/* Nordic MRO: shared styles (base, buttons, menu). Section styles live in their own files. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: clip;   /* a safety net under 320 px; clip, unlike hidden, keeps position: sticky working */
  background: var(--kalk);
  color: var(--tekst);
  font-family: var(--font);
  font-size: var(--str-tekst);
  font-weight: var(--vekt-tekst);
  line-height: var(--linjehoyde);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.skjult {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hopp {
  position: fixed; left: var(--marg); top: 0.75rem; z-index: 200;
  padding: 0.7rem 1rem; background: var(--grafitt); color: var(--tekst-lys);
  transform: translateY(-160%); transition: transform 0.2s var(--mykt);
}
.hopp:focus { transform: none; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }

.merke {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: var(--str-merke); font-weight: var(--vekt-merke);
  letter-spacing: var(--sporing-merke); text-transform: uppercase;
}

/* ---------- buttons ---------- */
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 48px; padding: 0.85rem 1.5rem;
  border: 1px solid var(--grafitt); border-radius: var(--radius);
  background: var(--grafitt); color: var(--tekst-lys);
  font-size: 1rem; font-weight: 500; letter-spacing: 0.01em; text-decoration: none;
  transition: background-color 0.25s var(--mykt), color 0.25s var(--mykt), border-color 0.25s var(--mykt);
}
.knapp:hover { background: var(--grafitt-3); border-color: var(--grafitt-3); }
.knapp-omriss { background: transparent; color: var(--tekst); border-color: var(--linje-sterk); }
.knapp-omriss:hover { background: var(--grafitt); color: var(--tekst-lys); border-color: var(--grafitt); }
.knapp-lys { background: var(--kalk); color: var(--grafitt); border-color: var(--kalk); }
.knapp-lys:hover { background: var(--hvit); border-color: var(--hvit); }
/* the slate from the evening photo: a calm second accent */
.knapp-skifer { background: var(--skifer); border-color: var(--skifer); color: var(--hvit); }
.knapp-skifer:hover { background: var(--skifer-2); border-color: var(--skifer-2); }
.knapp svg { width: 18px; height: 18px; flex: none; }

/* ---------- menu ---------- */
.meny {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--meny-h);
  display: flex; align-items: center; gap: 1.25rem; padding: 0 var(--marg);
  color: var(--tekst);
  transition: background-color 0.35s var(--mykt), box-shadow 0.35s var(--mykt), color 0.35s var(--mykt);
}
/* without JavaScript nothing sets .matt, so the bar keeps its ground from the start (the content scrolls under it) */
.meny.matt, html:not(.js) .meny {
  background: var(--meny-matt);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--linje);
}
.meny-logo { display: block; flex: none; width: clamp(136px, 12vw, 176px); }
.meny-logo img { width: 100%; height: auto; }
.meny-logo .logo-lys { display: none; }
/* on the hero photo's blue sky the bar turns white; an open phone menu lays its light ground behind it, so not then */
html.js .meny.pa-bilde:not(.matt):not(.apen) .meny-logo .logo-mork { display: none; }
html.js .meny.pa-bilde:not(.matt):not(.apen) .meny-logo .logo-lys { display: block; }
html.js .meny.pa-bilde:not(.matt):not(.apen) { color: var(--tekst-lys); --fokus: var(--hvit); }

.meny-lenker { display: none; align-items: center; gap: clamp(1.1rem, 2vw, 2rem); margin-left: auto; }
.meny-lenker a { text-decoration: none; font-size: 0.98rem; font-weight: 500; position: relative; padding: 0.4rem 0; }
.meny-punkter > li > a::after, .meny-pil::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.1rem; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--mykt);
}
.meny-punkter > li > a:hover::after, .meny-punkter > li > a[aria-current="page"]::after,
.meny-pil:hover::after, .meny-pil[aria-expanded="true"]::after, .har-aktiv > .meny-pil::after { transform: scaleX(1); }

/* the items in the order the front page runs; Tjenester and Prosjekter open a list of all of them (Sverre 30.10.2026:
   «sørg for at navigasjonsbaren viser hele nettsiden i riktig rekkefølge»): the mouse opens it, a click keeps it, Escape and a
   click outside close it (main.js); without JavaScript hover and keyboard focus open it */
.meny-punkter { display: flex; align-items: center; gap: clamp(1rem, 1.6vw, 1.75rem); margin: 0; padding: 0; list-style: none; }
.meny-punkter > li { position: relative; }
.meny-pil {
  position: relative; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0;
  border: 0; background: none; color: inherit; font: inherit; font-size: 0.98rem; font-weight: 500; cursor: pointer;
}
.meny-pil .ned { width: 12px; height: 12px; transition: transform 0.25s var(--mykt); }
.meny-pil[aria-expanded="true"] .ned { transform: rotate(180deg); }
.meny-liste {
  position: absolute; top: calc(100% + 14px); left: -1rem; z-index: 2; display: none;
  min-width: 290px; max-height: calc(100svh - var(--meny-h) - 24px); overflow-y: auto;
  margin: 0; padding: 0.5rem; list-style: none; border-radius: var(--radius);
  background: var(--kalk); color: var(--tekst); box-shadow: 0 18px 44px var(--skygge), 0 0 0 1px var(--linje);
}
.meny-liste.apen { display: block; }
/* the gap between the word and the list belongs to the open item, so the mouse can cross it (on Euphoria's site a bridge
   inside the list was cut off by the list's own overflow); only while open, so it never opens a list by itself */
.meny-lenker .har-liste.apen::after, html:not(.js) .meny-lenker .har-liste:hover::after {
  content: ""; position: absolute; top: 100%; left: -1rem; width: max(calc(100% + 2rem), 290px); height: 16px;
}
.meny-lenker .meny-liste a { display: block; padding: 0.6rem 0.75rem; border-radius: var(--radius); line-height: 1.3; }
.meny-lenker .meny-liste a:hover, .meny-lenker .meny-liste a:focus-visible { background: var(--betong); }
.meny-liste a[aria-current="page"] { color: var(--skifer); }
.meny-alle { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid var(--linje); }
.meny-lenker .meny-alle a, .mobilmeny .meny-alle a { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-weight: 600; }
.meny-alle svg { width: 16px; height: 16px; flex: none; }
html:not(.js) .har-liste:hover > .meny-liste, html:not(.js) .har-liste:focus-within > .meny-liste { display: block; }
/* Tjenester: every service in six columns under the menu (Sverre 06.11.2026: «lag også alle tjenestesidene slik for bygglund»). A wide list stands under
   the whole bar, not under its word; the bar's backdrop filter makes the bar its frame, so top and sides are the same either way */
.meny-lenker .meny-liste.meny-stor {
  position: fixed; top: var(--meny-h);
  left: max(var(--marg), calc((100% - var(--maks)) / 2 + var(--marg))); right: max(var(--marg), calc((100% - var(--maks)) / 2 + var(--marg)));
  min-width: 0; max-height: calc(100svh - var(--meny-h) - 12px);
  grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem 1.25rem; padding: 1.25rem 1.5rem 0.9rem;
}
.meny-lenker .meny-liste.meny-stor.apen, html:not(.js) .meny-lenker .har-liste:hover > .meny-stor, html:not(.js) .meny-lenker .har-liste:focus-within > .meny-stor { display: grid; }
.meny-lenker .har-stor.apen::after, html:not(.js) .meny-lenker .har-stor:hover::after { height: 32px; }
.meny-stor .meny-kol ul { margin: 0; padding: 0; list-style: none; }
.meny-lenker .meny-stor .meny-kol a { padding: 0.2rem 0; border-radius: 0; font-size: 0.875rem; line-height: 1.3; }
.meny-lenker .meny-stor .meny-kol a:hover, .meny-lenker .meny-stor .meny-kol a:focus-visible { background: none; color: var(--skifer); text-decoration: underline; text-underline-offset: 3px; }
.meny-lenker .meny-stor .meny-kol a.meny-gruppe { margin-bottom: 0.3rem; padding: 0 0 0.35rem; border-bottom: 1px solid var(--linje); font-size: 0.9375rem; font-weight: 600; }
.meny-lenker .meny-stor .meny-kol ul + a.meny-gruppe { margin-top: 0.85rem; }
.meny-lenker .meny-stor .meny-alle { grid-column: 1 / -1; margin-top: 0; padding-top: 0.5rem; }
.meny-lenker .meny-stor .meny-alle a { padding: 0.35rem 0; justify-content: flex-start; }
.meny-fb { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; }
.meny-fb svg { width: 20px; height: 20px; }
.meny-fb::after { display: none; }

.meny-hoyre { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
/* only where the links show: below 1180 px they are hidden but still the right group's neighbour, and this rule held the
   phone's menu button about 65 px in from the right edge (found 29.10.2026, night) */
@media (min-width: 1180px) { .meny-lenker + .meny-hoyre { margin-left: clamp(0.5rem, 1.6vw, 1.5rem); } }
.sprak {
  display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.45rem 0.35rem;
  border: 0; background: none; cursor: pointer; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em;
}
.sprak span { padding-bottom: 2px; border-bottom: 1px solid transparent; opacity: 0.72; }
.sprak .skille { opacity: 0.45; border: 0; }
html[lang="nb"] .sprak [data-sprak="no"], html[lang="en"] .sprak [data-sprak="en"] { opacity: 1; border-bottom-color: currentColor; }
.meny-ring { display: none; align-items: center; gap: 0.45rem; text-decoration: none; font-weight: 600; font-size: 0.95rem; white-space: nowrap; }
.meny-ring svg { width: 17px; height: 17px; }
.meny-prat { min-height: 42px; padding: 0.6rem 1.15rem; font-size: 0.95rem; }
html.js .meny.pa-bilde:not(.matt):not(.apen) .meny-prat { background: var(--kalk); color: var(--grafitt); border-color: var(--kalk); }
html.js .meny.pa-bilde:not(.matt):not(.apen) .meny-prat:hover { background: var(--hvit); border-color: var(--hvit); }

.meny-knapp {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
  width: 44px; height: 44px; padding: 0 10px; border: 0; background: none; cursor: pointer;
}
.meny-knapp span { display: block; height: 1.5px; background: currentColor; transition: transform 0.3s var(--mykt), opacity 0.2s; }
.meny.apen .meny-knapp span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.meny.apen .meny-knapp span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

.mobilmeny {
  position: fixed; inset: 0; z-index: 90; padding: calc(var(--meny-h) + 2rem) var(--marg) 2rem; overflow-y: auto;
  background: var(--kalk); display: flex; flex-direction: column; gap: 0.25rem;
  opacity: 0; visibility: hidden; transition: opacity 0.3s var(--mykt), visibility 0s linear 0.3s;
}
.meny.apen ~ .mobilmeny, .mobilmeny.apen { opacity: 1; visibility: visible; transition: opacity 0.3s var(--mykt); }
.mobilmeny a[aria-current="page"] { color: var(--skifer); }
.mobilmeny a { font-size: 1.9rem; font-weight: 300; letter-spacing: -0.02em; text-decoration: none; padding: 0.45rem 0; border-bottom: 1px solid var(--linje); }
.mobilmeny .meny-punkter { display: block; }
.mobilmeny .meny-punkter > li > a, .mobilmeny .meny-pil { display: flex; width: 100%; }
.mobilmeny .meny-pil {
  justify-content: space-between; align-items: center; padding: 0.45rem 0; border-bottom: 1px solid var(--linje);
  font-size: 1.9rem; font-weight: 300; letter-spacing: -0.02em; text-align: left;
}
.mobilmeny .meny-pil::after { content: none; }
.mobilmeny .meny-pil .ned { width: 20px; height: 20px; }
.mobilmeny .meny-liste {
  position: static; min-width: 0; max-height: none; overflow: visible; padding: 0.35rem 0 0.9rem;
  background: none; box-shadow: none;
}
.mobilmeny .meny-liste a { font-size: 1.15rem; font-weight: 400; letter-spacing: 0; padding: 0.5rem 0; border-bottom: 0; }
.mobilmeny .meny-alle { border-top: 0; }
.mobilmeny .meny-stor .meny-kol ul { margin: 0; padding: 0; list-style: none; }
.mobilmeny .meny-stor a.meny-gruppe { display: block; padding: 0.85rem 0 0.2rem; font-size: 0.82rem; font-weight: 600; letter-spacing: var(--sporing-merke); text-transform: uppercase; color: var(--tekst-dempet); }
.mobilmeny .meny-stor .meny-kol li a { display: block; padding: 0.38rem 0; font-size: 1.08rem; }
html:not(.js) .mobilmeny .meny-liste { display: block; }
.mobilmeny .mobilmeny-kontakt { margin-top: auto; display: grid; gap: 0.75rem; padding-top: 1.5rem; }
.mobilmeny .mobilmeny-kontakt a { font-size: 1.05rem; font-weight: 500; border: 0; }

/* without JavaScript the phone menu cannot open: below 1180 px its links stand under the bar instead */
@media (max-width: 1179px) {
  html:not(.js) .mobilmeny {
    position: relative; inset: auto; z-index: auto; opacity: 1; visibility: visible;
    padding: calc(var(--meny-h) + 0.5rem) var(--marg) 1.5rem;
  }
  html:not(.js) .mobilmeny a { font-size: 1.4rem; }
  html:not(.js) .mobilmeny .mobilmeny-kontakt { margin-top: 1rem; }
}
/* the six menu items fit beside the logo and the right group from about 1150 px; from 1024 px (a tablet on its side) they
   broke over two lines (31.10.2026), so the links show from 1180 px and the menu button stands in below it */
@media (min-width: 1180px) {
  .meny-lenker { display: flex; }
  .meny-knapp, .mobilmeny { display: none; }
}
/* six menu items and the phone number fit side by side from 1360 px; below it the number stands in the hero, the contact section and the phone menu */
@media (min-width: 1360px) {
  .meny-ring { display: inline-flex; }
}
@media (max-width: 1023px) {
  .meny-prat { display: none; }
}

/* ---------- phones (mobil 08.11.2026; behind max-width: 767px, so the PC stays as it is) ---------- */
@media (max-width: 767px) {
  /* a blur behind the bar is expensive on a phone, and the ground was 92 % opaque anyway */
  .meny.matt, html:not(.js) .meny { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--kalk); }
  .sprak { min-height: 44px; }
  .mobilmeny .meny-stor .meny-kol li a { padding: 0.62rem 0; }
  .mobilmeny .meny-stor a.meny-gruppe { min-height: 44px; display: flex; align-items: flex-end; }
  .mobilmeny .meny-liste a { min-height: 44px; }
  .mobilmeny .mobilmeny-kontakt { gap: 0; }
  .mobilmeny .mobilmeny-kontakt a { display: flex; align-items: center; min-height: 44px; }
}