/* ==========================================================================
   Komponenter
   Ved port til Next.js blir hver blokk her én komponent i components/.
   Klassenavnene er allerede avgrenset per komponent (blokk__element--variant).
   ========================================================================== */

/* --- Merke -------------------------------------------------------------- */

.merke {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--skrift-display);
  letter-spacing: var(--spor-tett);
  line-height: 1;
}

.merke__dc {
  font-size: 1.375rem;
  font-weight: 700;
  position: relative;
  padding-bottom: 0.28rem;
}

/* Den gule midtlinjen ligger under initialene som en veistripe under et
   kjøretøy — ikke ved siden av, der den ville lest som en bindestrek. */
.merke__dc::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--midtlinje);
}

.merke__navn {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--blekk-dempet);
  text-transform: lowercase;
}

.merke--mork .merke__navn {
  color: var(--stein);
}

/* --- Navigasjon --------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(246, 248, 250, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--kant);
  transition: background var(--tid-2) var(--lett-inn),
    border-color var(--tid-2) var(--lett-inn);
}

/* Den mørke navigasjonen er heldekkende, ikke gjennomsiktig: den ligger i
   normalflyten over hero-seksjonen, så en halvgjennomsiktig flate ville
   sluppet gjennom sidens lyse bakgrunnsfarge og blitt grå. */
.nav--mork {
  background: var(--natt);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  color: var(--sno);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rom-5);
  height: 68px;
}

.nav__lenker {
  display: flex;
  align-items: center;
  gap: var(--rom-6);
}

.nav__lenke {
  position: relative;
  font-size: var(--t-brod-s);
  font-weight: 500;
  padding-block: var(--rom-2);
  color: inherit;
  transition: color var(--tid-1) var(--lett-inn);
}

.nav__lenke::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--midtlinje);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tid-2) var(--lett);
}

.nav__lenke:hover::after,
.nav__lenke[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav__handlinger {
  display: flex;
  align-items: center;
  gap: var(--rom-3);
}

.nav__meny {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kant);
  border-radius: var(--radius);
}

.nav--mork .nav__meny {
  border-color: var(--kant-mork);
}

.nav__meny span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: currentColor;
  position: relative;
}

.nav__meny span::before,
.nav__meny span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 17px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--tid-2) var(--lett);
}

.nav__meny span::before {
  top: -5.5px;
}
.nav__meny span::after {
  top: 5.5px;
}

.nav__meny[aria-expanded="true"] span {
  background: transparent;
}
.nav__meny[aria-expanded="true"] span::before {
  transform: translateY(5.5px) rotate(45deg);
}
.nav__meny[aria-expanded="true"] span::after {
  transform: translateY(-5.5px) rotate(-45deg);
}

@media (max-width: 900px) {
  .nav__lenker {
    position: fixed;
    inset: 68px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--papir);
    border-bottom: 1px solid var(--kant);
    padding: var(--rom-4) clamp(1.25rem, 4vw, 2.5rem) var(--rom-6);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--tid-2) var(--lett), transform var(--tid-2) var(--lett);
    box-shadow: var(--skygge-3);
  }

  .nav--mork .nav__lenker {
    background: var(--natt);
    border-bottom-color: var(--kant-mork);
  }

  .nav__lenker[data-apen="true"] {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .nav__lenke {
    padding-block: var(--rom-4);
    font-size: var(--t-brod);
    border-bottom: 1px solid var(--kant);
  }

  .nav--mork .nav__lenke {
    border-bottom-color: var(--kant-mork);
  }

  .nav__lenke::after {
    display: none;
  }

  .nav__meny {
    display: flex;
  }

  /* På smal skjerm får handlingsfeltet bare plass til ett kall: "Book time".
     Konto- og innloggingslenkene flyttes ned i menyen av initSesjonsnav(),
     slik at hamburgerknappen aldri blir skjøvet ut av skjermen. */
  .nav__handlinger .knapp--stille,
  .nav__handlinger .knapp--kant {
    display: none;
  }

  .nav__inner {
    gap: var(--rom-3);
  }

  .nav__handlinger .knapp--primar {
    padding-inline: 1rem;
  }
}

/* Kontolenkene finnes bare i mobilmenyen. "Logg ut" er en <button> og må
   nullstilles slik at den flukter med lenkene over. */
.nav__lenke--konto {
  display: none;
  padding-inline: 0;
  font-weight: 500;
}

@media (max-width: 900px) {
  .nav__lenke--konto {
    display: block;
  }
}

/* --- Knapper ------------------------------------------------------------ */

.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rom-2);
  padding: 0.75rem 1.375rem;
  border-radius: var(--radius);
  font-size: var(--t-brod-s);
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform var(--tid-1) var(--lett-inn),
    background var(--tid-1) var(--lett-inn), border-color var(--tid-1) var(--lett-inn),
    color var(--tid-1) var(--lett-inn), box-shadow var(--tid-1) var(--lett-inn);
}

.knapp:active {
  transform: translateY(1px);
}

.knapp[disabled],
.knapp[aria-disabled="true"] {
  opacity: 0.42;
  pointer-events: none;
}

.knapp--primar {
  background: var(--midtlinje);
  color: var(--natt);
}

.knapp--primar:hover {
  background: var(--midtlinje-dyp);
  box-shadow: var(--skygge-lykt);
}

.knapp--fast {
  background: var(--natt);
  color: var(--sno);
}

.knapp--fast:hover {
  background: var(--dis-hev);
}

.knapp--kant {
  border-color: var(--kant-sterk);
  color: var(--blekk);
  background: var(--papir);
}

.knapp--kant:hover {
  border-color: var(--natt);
}

.seksjon--mork .knapp--kant,
.nav--mork .knapp--kant,
.hero .knapp--kant,
.sidehode .knapp--kant {
  background: transparent;
  border-color: var(--kant-mork);
  color: var(--sno);
}

.seksjon--mork .knapp--kant:hover,
.nav--mork .knapp--kant:hover,
.hero .knapp--kant:hover,
.sidehode .knapp--kant:hover {
  border-color: var(--stein);
  background: var(--dis);
}

.knapp--stille {
  color: inherit;
  padding-inline: var(--rom-3);
}

.knapp--stille:hover {
  color: var(--midtlinje-dyp);
}

.nav--mork .knapp--stille:hover,
.seksjon--mork .knapp--stille:hover {
  color: var(--midtlinje);
}

.knapp--stor {
  padding: 0.9375rem 1.75rem;
  font-size: var(--t-brod);
}

.knapp--blokk {
  width: 100%;
}

/* Pilen skyves ut på hover — én liten, presis bevegelse framfor mange. */
.knapp__pil {
  transition: transform var(--tid-2) var(--lett);
}

.knapp:hover .knapp__pil {
  transform: translateX(3px);
}

/* --- Kort -------------------------------------------------------------- */

.kort {
  background: var(--papir);
  border: 1px solid var(--kant);
  border-radius: var(--radius-l);
  padding: var(--rom-6);
  transition: border-color var(--tid-2) var(--lett-inn),
    box-shadow var(--tid-2) var(--lett-inn), transform var(--tid-2) var(--lett-inn);
}

.kort--lofte:hover {
  border-color: var(--kant-sterk);
  box-shadow: var(--skygge-2);
  transform: translateY(-2px);
}

.seksjon--mork .kort {
  background: var(--dis);
  border-color: var(--kant-mork);
}

.seksjon--mork .kort--lofte:hover {
  background: var(--dis-hev);
  border-color: var(--stein-svak);
}

/* --- Merkelapp ---------------------------------------------------------- */

.lapp {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-rund);
  font-family: var(--skrift-data);
  font-size: var(--t-mikro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--spor-vid);
  background: var(--midtlinje-svak);
  color: var(--midtlinje-dyp);
  white-space: nowrap;
}

.lapp--gress {
  background: var(--gress-svak);
  color: var(--gress);
}

.lapp--noytral {
  background: rgba(86, 99, 122, 0.1);
  color: var(--blekk-dempet);
}

.seksjon--mork .lapp--noytral {
  background: rgba(139, 154, 176, 0.14);
  color: var(--stein);
}

/* --- Språkvelger (signaturelementet) ------------------------------------
   De fire språkene settes i sine egne skriftsystemer. Ingen flagg:
   flagg betyr nasjon, og punjabi og urdu snakkes på tvers av landegrenser.
   Skriften er den ærlige representasjonen.
   ------------------------------------------------------------------------ */

.sprakvelger {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rom-2);
}

.sprakvelger__knapp {
  position: relative;
  padding: 0.5rem 1rem;
  border: 1px solid var(--kant-mork);
  border-radius: var(--radius-rund);
  color: var(--stein);
  font-size: var(--t-brod-s);
  line-height: 1.9;
  transition: color var(--tid-1) var(--lett-inn),
    border-color var(--tid-1) var(--lett-inn), background var(--tid-1) var(--lett-inn);
}

.sprakvelger__knapp:hover {
  color: var(--sno);
  border-color: var(--stein-svak);
}

.sprakvelger__knapp[aria-pressed="true"] {
  color: var(--natt);
  background: var(--midtlinje);
  border-color: var(--midtlinje);
  font-weight: 600;
}

.sprakvelger--lys .sprakvelger__knapp {
  border-color: var(--kant-sterk);
  color: var(--blekk-dempet);
}

.sprakvelger--lys .sprakvelger__knapp:hover {
  color: var(--blekk);
  border-color: var(--natt);
}

/* Nastaliq trenger mer vertikal luft enn latinsk skrift, ellers klippes
   de nedadgående strekene. Gurmukhi trenger litt, men mindre. */
[lang="ur"] {
  font-family: var(--skrift-urdu);
  line-height: 2.2;
  direction: rtl;
}

[lang="pa"] {
  font-family: var(--skrift-punjabi);
  line-height: 1.85;
}

/* --- Skjema ------------------------------------------------------------- */

.felt {
  display: flex;
  flex-direction: column;
  gap: var(--rom-2);
}

.felt__etikett {
  font-size: var(--t-liten);
  font-weight: 600;
  color: var(--blekk);
}

.felt__hjelp {
  font-size: var(--t-liten);
  color: var(--blekk-dempet);
}

.felt__feil {
  font-size: var(--t-liten);
  color: var(--varsel);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.input {
  width: 100%;
  padding: 0.75rem 0.875rem;
  background: var(--papir);
  border: 1px solid var(--kant-sterk);
  border-radius: var(--radius);
  font-size: var(--t-brod-s);
  transition: border-color var(--tid-1) var(--lett-inn),
    box-shadow var(--tid-1) var(--lett-inn);
}

.input::placeholder {
  color: var(--blekk-dempet);
  opacity: 0.7;
}

.input:hover {
  border-color: var(--blekk-dempet);
}

.input:focus {
  outline: none;
  border-color: var(--midtlinje);
  box-shadow: 0 0 0 3px var(--midtlinje-svak);
}

.input[aria-invalid="true"] {
  border-color: var(--varsel);
}

.input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px var(--varsel-svak);
}

select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2356637a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.25rem;
}

/* --- Valgkort (radio som kort) ------------------------------------------ */

.valg {
  position: relative;
  display: block;
  cursor: pointer;
}

.valg__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.valg__flate {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rom-4);
  padding: var(--rom-4) var(--rom-5);
  background: var(--papir);
  border: 1px solid var(--kant-sterk);
  border-radius: var(--radius);
  transition: border-color var(--tid-1) var(--lett-inn),
    box-shadow var(--tid-1) var(--lett-inn), background var(--tid-1) var(--lett-inn);
}

.valg:hover .valg__flate {
  border-color: var(--blekk-dempet);
}

.valg__input:checked + .valg__flate {
  border-color: var(--midtlinje);
  box-shadow: 0 0 0 2px var(--midtlinje-svak);
  background: var(--papir);
}

.valg__input:focus-visible + .valg__flate {
  outline: 2px solid var(--midtlinje);
  outline-offset: 2px;
}

/* Tittel og meta er <span> for å kunne ligge inne i en <label>, men skal
   stables som blokker. */
.valg__tittel {
  display: block;
  font-weight: 600;
  font-size: var(--t-brod-s);
}

.valg__meta {
  display: block;
  font-size: var(--t-liten);
  line-height: 1.45;
  color: var(--blekk-dempet);
  margin-top: 0.125rem;
}

.valg__pris {
  font-family: var(--skrift-data);
  font-size: var(--t-brod-s);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Tidsluker ---------------------------------------------------------- */

.luker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--rom-2);
}

.luke {
  padding: 0.625rem 0.5rem;
  border: 1px solid var(--kant-sterk);
  border-radius: var(--radius);
  background: var(--papir);
  font-family: var(--skrift-data);
  font-size: var(--t-brod-s);
  font-variant-numeric: tabular-nums;
  text-align: center;
  transition: border-color var(--tid-1) var(--lett-inn),
    background var(--tid-1) var(--lett-inn), color var(--tid-1) var(--lett-inn);
}

.luke:hover:not([disabled]) {
  border-color: var(--natt);
}

.luke[aria-pressed="true"] {
  background: var(--natt);
  border-color: var(--natt);
  color: var(--sno);
}

.luke[disabled] {
  color: var(--kant-sterk);
  background: var(--sno);
  cursor: not-allowed;
  text-decoration: line-through;
}

/* --- Framdriftsspor (booking) ------------------------------------------- */

.spor {
  display: flex;
  align-items: center;
  gap: var(--rom-2);
  flex-wrap: wrap;
}

.spor__steg {
  display: flex;
  align-items: center;
  gap: var(--rom-2);
  font-family: var(--skrift-data);
  font-size: var(--t-mikro);
  text-transform: uppercase;
  letter-spacing: var(--spor-vid);
  color: var(--blekk-dempet);
  transition: color var(--tid-2) var(--lett-inn);
}

.spor__nr {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-rund);
  border: 1px solid var(--kant-sterk);
  font-size: 0.625rem;
  transition: all var(--tid-2) var(--lett-inn);
}

.spor__steg[data-tilstand="aktiv"] {
  color: var(--blekk);
}

.spor__steg[data-tilstand="aktiv"] .spor__nr {
  background: var(--midtlinje);
  border-color: var(--midtlinje);
  color: var(--natt);
  font-weight: 600;
}

.spor__steg[data-tilstand="ferdig"] .spor__nr {
  background: var(--natt);
  border-color: var(--natt);
  color: var(--sno);
}

.spor__strek {
  flex: 1;
  min-width: 12px;
  height: 1px;
  background: var(--kant-sterk);
}

@media (max-width: 700px) {
  .spor__steg span:last-child {
    display: none;
  }
}

/* --- Varsel ------------------------------------------------------------- */

/* Tomme feilbeholdere skal ikke etterlate et hull i skjemaets rytme. */
[data-feil]:empty,
[data-skjemafeil]:empty {
  display: none;
}

.varsel {
  display: flex;
  gap: var(--rom-3);
  padding: var(--rom-4);
  border-radius: var(--radius);
  font-size: var(--t-brod-s);
  border: 1px solid;
}

.varsel--feil {
  background: var(--varsel-svak);
  border-color: rgba(200, 80, 47, 0.28);
  color: var(--varsel);
}

.varsel--info {
  background: var(--midtlinje-svak);
  border-color: rgba(245, 179, 53, 0.32);
  color: var(--blekk);
}

.varsel--gress {
  background: var(--gress-svak);
  border-color: rgba(47, 158, 107, 0.3);
  color: var(--blekk);
}

/* --- Trekkspill (FAQ) --------------------------------------------------- */

.trekk {
  border-bottom: 1px solid var(--kant);
}

.trekk__knapp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rom-4);
  width: 100%;
  padding: var(--rom-5) 0;
  text-align: left;
  font-size: var(--t-brod);
  font-weight: 500;
  transition: color var(--tid-1) var(--lett-inn);
}

.trekk__knapp:hover {
  color: var(--midtlinje-dyp);
}

.trekk__ikon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
}

.trekk__ikon::before,
.trekk__ikon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transition: transform var(--tid-2) var(--lett);
}

.trekk__ikon::before {
  width: 13px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

.trekk__ikon::after {
  width: 1.5px;
  height: 13px;
  transform: translate(-50%, -50%);
}

.trekk__knapp[aria-expanded="true"] .trekk__ikon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.trekk__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--tid-2) var(--lett);
}

.trekk__panel[data-apen="true"] {
  grid-template-rows: 1fr;
}

.trekk__innhold {
  overflow: hidden;
}

.trekk__innhold > p {
  padding-bottom: var(--rom-5);
  max-width: 62ch;
  color: var(--blekk-dempet);
}

/* --- Bunn --------------------------------------------------------------- */

.bunn {
  background: var(--natt-dyp);
  color: var(--stein);
  padding-block: var(--rom-8) var(--rom-6);
  font-size: var(--t-brod-s);
}

.bunn__rutenett {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--rom-7) var(--rom-5);
}

@media (max-width: 860px) {
  .bunn__rutenett {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 500px) {
  .bunn__rutenett {
    grid-template-columns: 1fr;
  }
}

.bunn__tittel {
  font-family: var(--skrift-data);
  font-size: var(--t-mikro);
  text-transform: uppercase;
  letter-spacing: var(--spor-vid);
  color: var(--stein-svak);
  margin-bottom: var(--rom-4);
}

.bunn__lenke {
  display: block;
  padding-block: 0.3125rem;
  transition: color var(--tid-1) var(--lett-inn);
}

.bunn__lenke:hover {
  color: var(--midtlinje);
}

.bunn__strek {
  margin-top: var(--rom-8);
  padding-top: var(--rom-5);
  border-top: 1px solid var(--kant-mork);
  display: flex;
  justify-content: space-between;
  gap: var(--rom-4);
  flex-wrap: wrap;
  font-size: var(--t-liten);
  color: var(--stein-svak);
}