/**
 * nav.css – Header og navigasjonskomponenter
 * Bibliotekarforbundet 2026
 */

/* ── Header ─────────────────────────────────────── */

.bf-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: var(--bf-header-height);
  background: var(--bf-hvit);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  z-index: var(--bf-z-header);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.bf-header__inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 0;
}

/* ── Logo ───────────────────────────────────────── */

.bf-logo {
  display: flex;
  align-items: center;
  gap: var(--bf-space-2);
  margin-right: var(--bf-space-12);  /* 48 px til første menypunkt */
  flex-shrink: 0;
  text-decoration: none;
}

.bf-logo__img {
  height: 38px;
  width: auto;
}

/* ── Desktop navigasjon ─────────────────────────── */

.bf-nav {
  display: flex;
  align-items: stretch;
  flex: 1;
  height: 100%;
}

.bf-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.bf-nav__link {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--bf-space-4);  /* 16 px ≈ 32 px mellom hvert menypunkt */
  font-size: var(--bf-text-base);
  font-weight: var(--bf-weight-medium);
  color: var(--bf-sort);
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  white-space: nowrap;
  transition: border-color var(--bf-transition-fast),
              color var(--bf-transition-fast);
  user-select: none;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: var(--bf-font-body);
  letter-spacing: 0.01em;
}

.bf-nav__link:hover,
.bf-nav__link[aria-expanded="true"],
.bf-nav__link[aria-current="page"] {
  border-bottom-color: var(--bf-sort);
}

/* Direkte-lenke-variant: <a> i stedet for <button>+dropdown.
 * Brukes på menypunkter uten sub-items (f.eks. Aktuelt). Trenger
 * tekst-dekorasjon-reset siden default for <a> er underline. */
.bf-nav__link--direct {
  text-decoration: none;
}

/* Medlemskap-tabben får Leken-bakgrunn kun i aktiv (åpen) state –
 * kobler visuelt sammen tabben med Leken-fargen bak feature-bildet
 * og under hover-tilstand i megamenyen. I hvile er tabben nøytral
 * som resten av nav-lenkene. */
.bf-nav__link[data-nav-id="medlemskap"][aria-expanded="true"] {
  background: var(--bf-leken);
}

/* ── Megameny ───────────────────────────────────── */
/* Avkuttet hjørne nederst til høyre – matcher BF-boksene.
 * Feature-panelet er heldekkende på høyre halvdel og arver
 * dropdown-formen, inkludert cut corner. */

.bf-megamenu {
  --cut: var(--bf-corner-cut-lg);
  /* display: flex permanent – posisjonen er absolutt, så elementet
   * påvirker ikke layout-flyt selv når det er skjult. Skjul/vis via
   * visibility + opacity + transform så fade og slide kan animeres
   * (jf. designsystem § 14). */
  display: flex;
  position: absolute;
  top: calc(var(--bf-header-height) - 1px);  /* Dekk border-bottom */
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 600px;
  background: var(--bf-hvit);
  border-radius: 0;
  padding: 0;
  gap: 0;
  z-index: var(--bf-z-dropdown);
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.10));
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  /* visibility har 0s-transition med delay tilsvarende durasjonen,
   * slik at visibility først skifter til hidden ETTER fade-out er
   * ferdig. Ved åpning (.is-open) overstyres delay til 0 så
   * skjermleser umiddelbart får tilgang til innholdet. */
  transition: opacity var(--bf-duration-base) var(--bf-ease-out),
              transform var(--bf-duration-base) var(--bf-ease-out),
              visibility 0s var(--bf-duration-base);
  clip-path: polygon(
    0 1px,
    1px 0,
    calc(100% - 1px) 0,
    100% 1px,
    100% calc(100% - var(--cut) - 1px),
    calc(100% - 0.71px) calc(100% - var(--cut) + 0.71px),
    calc(100% - var(--cut) + 0.71px) calc(100% - 0.71px),
    calc(100% - var(--cut) - 1px) 100%,
    1px 100%,
    0 calc(100% - 1px)
  );
}

.bf-megamenu.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition: opacity var(--bf-duration-base) var(--bf-ease-out),
              transform var(--bf-duration-base) var(--bf-ease-out),
              visibility 0s;
}

/* Megameny venstre kolonne – lenker */
.bf-megamenu__links {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--bf-space-6);
}

.bf-megamenu__link {
  display: block;
  padding: var(--bf-space-3) var(--bf-space-4);
  margin: 0 calc(-1 * var(--bf-space-4));
  font-size: var(--bf-text-sm);
  color: var(--bf-sort);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: background var(--bf-transition-fast);
  cursor: pointer;
}

.bf-megamenu__link:last-child {
  border-bottom: none;
}

/* «Kommer»-tilstand: dempet, ikke-klikkbar, med tag.
 * Brukes til menypunkter som ikke har egen side ennå. */
.bf-megamenu__link--coming-soon,
.bf-mobile-acc__link--coming-soon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bf-space-2);
  color: rgba(0, 0, 0, 0.4);
  cursor: not-allowed;
}

.bf-megamenu[data-megamenu-id] .bf-megamenu__link--coming-soon:hover,
.bf-mobile-acc__link--coming-soon:hover {
  background: transparent;
}

.bf-megamenu__feature-cta--coming-soon {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-2);
  opacity: 0.55;
  cursor: not-allowed;
}

.bf-megamenu__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: none;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.55);
  border-radius: 1px;
}

/* Hover-underlay i seksjonsfargen – knytter lenka visuelt til
 * det fargede feature-panelet på høyre side av dropdown-en. */
.bf-megamenu[data-megamenu-id="medlemskap"] .bf-megamenu__link:hover { background: var(--bf-leken); }
.bf-megamenu[data-megamenu-id="arbeidsliv"] .bf-megamenu__link:hover { background: var(--bf-color-arbeidsliv); }
.bf-megamenu[data-megamenu-id="kurs"]       .bf-megamenu__link:hover { background: var(--bf-color-kurs); }
.bf-megamenu[data-megamenu-id="aktuelt"]    .bf-megamenu__link:hover { background: var(--bf-color-aktuelt); }
.bf-megamenu[data-megamenu-id="om-bf"]      .bf-megamenu__link:hover { background: var(--bf-color-om-bf); }

/* Megameny høyre kolonne – heldekkende farget panel.
 * Arver dropdown-formen (cut corner bottom-right) fra forelder.
 * Bildet er et utfallende bånd på toppen, teksten har egen padding. */
.bf-megamenu__feature {
  width: 300px;
  flex-shrink: 0;
  border-radius: 0;
  padding: 0 0 calc(var(--bf-space-6) + var(--cut));
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-4);
  align-self: stretch;
}

/* Utfallende bildebånd på toppen – full bredde, ingen avrunding.
 * Bilder har aldri cut corner (§ 4b). Placeholder-ikon vises
 * sentrert til ekte bilde legges inn. */
.bf-megamenu__feature-img {
  width: 100%;
  height: 120px;
  background: rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.4);
  overflow: hidden;
  flex-shrink: 0;
}

.bf-megamenu__feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bf-megamenu__feature-img svg {
  width: 40px;
  height: 40px;
}

/* Fargesetting per seksjon */
.bf-megamenu__feature--medlemskap { background: var(--bf-leken); }
.bf-megamenu__feature--arbeidsliv { background: var(--bf-color-arbeidsliv); }
.bf-megamenu__feature--kurs       { background: var(--bf-color-kurs); }
.bf-megamenu__feature--aktuelt    { background: var(--bf-color-aktuelt); }
.bf-megamenu__feature--om-bf      { background: var(--bf-color-om-bf); }

/* Tekst og CTA har horisontal padding – image-båndet på toppen
 * går utfallende til venstre og høyre. Font-size arves fra body
 * (16 px) slik at teksten leses komfortabelt. */
.bf-megamenu__feature-text {
  padding: 0 var(--bf-space-6);
  margin-top: var(--bf-space-2);
  line-height: var(--bf-leading-relaxed);
  color: var(--bf-sort);
}

.bf-megamenu__feature-cta {
  padding: 0 var(--bf-space-6);
  margin-top: auto;  /* Dytt CTA til bunnen av panelet */
  font-weight: 700;
  color: var(--bf-sort);
  cursor: pointer;
  transition: opacity var(--bf-transition-fast);
}

.bf-megamenu__feature-cta:hover { opacity: 0.7; }

/* ── Søk: ikon-toggle i header + full-bredde dropdown ──
 * Søket har fått egen dropdown (se .bf-search-panel) slik at ikonet
 * bare trenger å markere tilgang, mens selve søkefeltet får romslig
 * plass inne i panelet. Samme interaksjonsspråk som megamenyen. */

.bf-search {
  display: flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
}

.bf-search__toggle {
  --cut: var(--bf-corner-cut);
  width: 40px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: var(--bf-balanse);
  color: var(--bf-sort);
  cursor: pointer;
  transition: background var(--bf-transition-fast),
              color var(--bf-transition-fast);
  clip-path: polygon(
    0 1px,
    1px 0,
    calc(100% - 1px) 0,
    100% 1px,
    100% calc(100% - var(--cut) - 1px),
    calc(100% - 0.71px) calc(100% - var(--cut) + 0.71px),
    calc(100% - var(--cut) + 0.71px) calc(100% - 0.71px),
    calc(100% - var(--cut) - 1px) 100%,
    1px 100%,
    0 calc(100% - 1px)
  );
}

.bf-search__toggle svg {
  width: 18px;
  height: 18px;
}

.bf-search__toggle:hover,
.bf-search__toggle[aria-expanded="true"] {
  background: var(--bf-sort);
  color: var(--bf-hvit);
}

/* Søke-panel – full-bredde dropdown under headeren med cut corner
 * bottom-right (samme formsignatur som megamenyen).
 *
 * position: fixed siden panelet er flyttet UT av desktop-header og
 * skal være posisjonert relativ til viewport (ikke noen ancestor).
 * top-verdien følger header-høyden – ulik på desktop vs mobil. */
.bf-search-panel {
  --cut: var(--bf-corner-cut-lg);
  position: fixed;
  top: calc(var(--bf-header-height) - 1px);  /* Dekk border-bottom */
  left: 0;
  right: 0;
  margin: 0 auto;
  width: calc(100% - 2 * var(--bf-space-8));
  max-width: 720px;
  background: var(--bf-hvit);
  padding: var(--bf-space-8);
  z-index: var(--bf-z-dropdown);
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.1));
  clip-path: polygon(
    0 1px,
    1px 0,
    calc(100% - 1px) 0,
    100% 1px,
    100% calc(100% - var(--cut) - 1px),
    calc(100% - 0.71px) calc(100% - var(--cut) + 0.71px),
    calc(100% - var(--cut) + 0.71px) calc(100% - 0.71px),
    calc(100% - var(--cut) - 1px) 100%,
    1px 100%,
    0 calc(100% - 1px)
  );
}

/* Mobil: panel henger under mobil-header (52 px) i stedet for
 * desktop-header (68 px), og bruker stram container-padding (16 px). */
@media (max-width: 900px) {
  .bf-search-panel {
    top: calc(var(--bf-header-height-m) - 1px);
    width: calc(100% - 2 * var(--bf-space-4));
    padding: var(--bf-space-6);
  }
}

.bf-search-panel[hidden] {
  display: none;
}

.bf-search-panel__kicker {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-regular);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bf-sort);
  margin: 0 0 var(--bf-space-3);
}

.bf-search-panel__form {
  display: flex;
  gap: var(--bf-space-3);
  align-items: center;
  margin-bottom: var(--bf-space-5);
}

/* Input-høyde matcher hoved-knapper (.bf-btn--lg ≈ 48 px) slik at
 * input + Søk-knapp leses som én sammenhengende enhet. appearance/
 * border-radius nullstilles så Safari ikke legger til egne rundede
 * hjørner — kun clip-path sitt 1 px-bevel skal være synlig. */
.bf-search-panel__input {
  --cut: var(--bf-corner-cut);
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 var(--bf-space-5);
  background: var(--bf-balanse);
  border: none;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  color: var(--bf-sort);
  outline: none;
  clip-path: polygon(
    0 1px,
    1px 0,
    calc(100% - 1px) 0,
    100% 1px,
    100% calc(100% - var(--cut) - 1px),
    calc(100% - 0.71px) calc(100% - var(--cut) + 0.71px),
    calc(100% - var(--cut) + 0.71px) calc(100% - 0.71px),
    calc(100% - var(--cut) - 1px) 100%,
    1px 100%,
    0 calc(100% - 1px)
  );
}

.bf-search-panel__input::placeholder {
  color: #595959;
  opacity: 1;
}

.bf-search-panel__help {
  margin: 0 0 var(--bf-space-6);
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-sm);
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.5;
  max-width: 60ch;
}

.bf-search-panel__popular-label {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bf-sort);
  margin: 0 0 var(--bf-space-3);
}

/* Populære søk: samme minimalistiske tag-språk som .bf-jobber__tag –
 * understreket tekst med #-prefiks, ingen container. */
.bf-search-panel__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-4);
  padding: 0;
  margin: 0;
  list-style: none;
}

.bf-search-panel__tags li { list-style: none; }

.bf-search-panel__tags a {
  display: inline-flex;
  align-items: center;
  padding: 4px 0;
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-medium);
  letter-spacing: 0.01em;
  color: var(--bf-sort);
  background: transparent;
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.25);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--bf-transition-fast),
              color var(--bf-transition-fast);
}

.bf-search-panel__tags a::before {
  content: '#';
  margin-right: 2px;
  opacity: 0.55;
  font-weight: var(--bf-weight-regular);
  text-decoration: none;
}

.bf-search-panel__tags a:hover,
.bf-search-panel__tags a:focus-visible {
  text-decoration-color: var(--bf-sort);
}

.bf-search-panel__tags a:hover::before,
.bf-search-panel__tags a:focus-visible::before {
  opacity: 1;
}

/* ── Header-handlinger (CTA-er) ─────────────────── */

.bf-header__actions {
  display: flex;
  align-items: center;
  gap: 17px;
  flex-shrink: 0;
  margin-left: 17px;
}

.bf-btn-logg-inn {
  --cut: var(--bf-corner-cut);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-medium);
  padding: 0 var(--bf-space-5);
  padding-right: calc(var(--bf-space-5) + var(--cut) * 0.4);
  border: none;
  border-radius: 0;
  background: var(--bf-energi);
  color: var(--bf-sort);
  cursor: pointer;
  transition: background var(--bf-transition-fast);
  white-space: nowrap;
  text-decoration: none;
  clip-path: polygon(
    0 1px,
    1px 0,
    calc(100% - 1px) 0,
    100% 1px,
    100% calc(100% - var(--cut) - 1px),
    calc(100% - 0.71px) calc(100% - var(--cut) + 0.71px),
    calc(100% - var(--cut) + 0.71px) calc(100% - 0.71px),
    calc(100% - var(--cut) - 1px) 100%,
    1px 100%,
    0 calc(100% - 1px)
  );
}

.bf-btn-logg-inn:hover {
  background: #FFE800;
}

.bf-btn-bli-medlem {
  --cut: var(--bf-corner-cut);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-medium);
  padding: 0 var(--bf-space-5);
  padding-right: calc(var(--bf-space-5) + var(--cut) * 0.4);
  border-radius: 0;
  border: none;
  background: var(--bf-levende);
  color: var(--bf-hvit);
  cursor: pointer;
  transition: background var(--bf-transition-fast);
  white-space: nowrap;
  text-decoration: none;
  clip-path: polygon(
    0 1px,
    1px 0,
    calc(100% - 1px) 0,
    100% 1px,
    100% calc(100% - var(--cut) - 1px),
    calc(100% - 0.71px) calc(100% - var(--cut) + 0.71px),
    calc(100% - var(--cut) + 0.71px) calc(100% - 0.71px),
    calc(100% - var(--cut) - 1px) 100%,
    1px 100%,
    0 calc(100% - 1px)
  );
}

.bf-btn-bli-medlem:hover {
  background: #008a6a;
}

/* ── Mobilnavigasjon ────────────────────────────── */

.bf-mobile-header {
  display: none;   /* Skjul på desktop */
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: var(--bf-header-height-m);
  background: var(--bf-hvit);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  z-index: var(--bf-z-header);
  align-items: center;
  justify-content: space-between;
  /* min-width: 0 lar flex-containeren krympe under intrinsic size –
   * uten dette forblir headeren minst like bred som summen av barna,
   * og 360 px-viewport får horisontal scroll. */
  min-width: 0;
  padding: 0 var(--bf-space-4);
  gap: var(--bf-space-2);
}

/* Logo i mobil header strammes inn slik at vi får plass til
 * søk-knapp + Bli medlem-CTA + hamburger. Samme logo-asset som
 * desktop (Bibforb_logo_v2.svg).
 *
 * VIKTIG: nullstill margin-right (.bf-logo arver 48 px margin fra
 * desktop-regelen som dyttet logoen vekk fra megamenyen). I mobil-
 * headeren styres avstanden av flex gap på .bf-mobile-header. Med
 * 48 px ekstra margin overflyter innholdet viewport på 360 px.
 * flex-shrink: 1 + min-width: 0 lar logoen krympe som siste utvei
 * dersom CTAene fortsatt presser bredden. */
.bf-mobile-header .bf-logo {
  margin-right: 0;
  flex-shrink: 1;
  min-width: 0;
}

.bf-mobile-header .bf-logo__img {
  height: 28px;
  width: auto;
  max-width: 100%;
  display: block;
}

/* Handlinger-gruppen til høyre i mobil-headeren.
 * Rekkefølge: Søk → Bli medlem → Hamburger.
 * flex-shrink: 0 sikrer at gruppen ALDRI brytes på smal viewport –
 * det er logoens jobb å krympe (den har flex-shrink: 1 + min-width: 0). */
.bf-mobile-header__actions {
  display: flex;
  align-items: center;
  gap: var(--bf-space-2);
  flex-shrink: 0;
}

/* Smal mobil (≤ 400 px): ytterligere innstramming av padding og gap
 * slik at logo + search + Bli medlem + hamburger får plass innenfor
 * f.eks. 360 px-viewport (Galaxy S8). Touch targets på 40 × 40 og
 * 36 px knappehøyde bevares – kun horisontal luft strammes. */
@media (max-width: 400px) {
  .bf-mobile-header {
    padding: 0 var(--bf-space-3);
    gap: var(--bf-space-1);
  }

  .bf-mobile-header__actions {
    gap: var(--bf-space-1);
  }

  .bf-mobile-header .bf-btn-bli-medlem {
    padding: 0 var(--bf-space-2);
    padding-right: calc(var(--bf-space-2) + var(--bf-corner-cut) * 0.4);
  }
}

/* Søk-knapp i mobil-header. Samme søke-panel som desktop åpnes.
 * Visuell signatur: rent ikon, 40 × 40 px touch target (§ 11b). */
.bf-mobile-search {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 1px;
  color: var(--bf-sort);
  cursor: pointer;
  padding: 0;
  transition: background var(--bf-transition-fast);
}

.bf-mobile-search:hover {
  background: rgba(0, 0, 0, 0.05);
}

.bf-mobile-search svg {
  width: 20px;
  height: 20px;
}

/* Bli medlem-CTA i mobil-header bruker samme komponent-klasse som
 * desktop, men strammer padding for å spare plass på smal viewport.
 * Aldri sett bredde – paddingen alene må skalere ned slik at knappen
 * krymper sammen med ikke-tekst-innholdet rundt (search + hamburger).
 * 12 px sidepadding (space-3) er minimum som fortsatt gir luft rundt
 * teksten uten å skvise cut-corner. */
.bf-mobile-header .bf-btn-bli-medlem {
  height: 36px;
  font-size: var(--bf-text-sm);
  padding: 0 var(--bf-space-3);
  padding-right: calc(var(--bf-space-3) + var(--bf-corner-cut) * 0.4);
}

.bf-hamburger {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.bf-hamburger__line {
  width: 22px;
  height: 1.5px;
  background: var(--bf-sort);
  border-radius: 2px;
  transition: transform var(--bf-transition-normal),
              opacity var(--bf-transition-fast);
}

/* Hamburger → X-animasjon */
.bf-hamburger[aria-expanded="true"] .bf-hamburger__line:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.bf-hamburger[aria-expanded="true"] .bf-hamburger__line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.bf-hamburger[aria-expanded="true"] .bf-hamburger__line:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobil drawer
 * Full-bredde panel under mobil-headeren. Glir inn fra høyre med
 * 220 ms ease-in-out (jf. designsystem § 14). Skjul/vis via transform
 * + visibility – ikke display – så bevegelsen kan animeres.
 *
 * Viktig: !important på display i media query (linje under)
 * tillater fortsatt at desktop-versjon kan skjule denne helt. */
.bf-mobile-drawer {
  display: block;
  position: fixed;
  top: var(--bf-header-height-m);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bf-hvit);
  overflow-y: auto;
  z-index: var(--bf-z-mobile);
  visibility: hidden;
  transform: translateX(100%);
  transition: transform var(--bf-duration-base) var(--bf-ease-in-out),
              visibility 0s var(--bf-duration-base);
}

.bf-mobile-drawer.is-open {
  visibility: visible;
  transform: translateX(0);
  transition: transform var(--bf-duration-base) var(--bf-ease-in-out),
              visibility 0s;
}

/* Drawer-containeren tar programmatisk fokus ved åpning (tabindex=-1)
 * for å fange tastatur-navigasjon i modal. Men containeren skal ikke
 * vise en focus-ring – den er ikke en synlig interaktiv flate, og
 * fokusen er kun en a11y-mekanisme. Brukerens første Tab tar dem
 * direkte til Medlemskap-knappen som har sin egen focus-stil. */
.bf-mobile-drawer:focus,
.bf-mobile-drawer:focus-visible {
  outline: none;
}

/* Mobil accordion */
.bf-mobile-acc__item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.bf-mobile-acc__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--bf-space-4);
  font-size: var(--bf-text-base);
  font-weight: 500;
  color: var(--bf-sort);
  cursor: pointer;
  user-select: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--bf-font-body);
}

/* Inset focus-ring på accordion-header. Default :focus-visible bruker
 * outline-offset: 2px som gir 5 px rød stripe utenfor knappens kant —
 * den ser ut som en separator MELLOM accordion-items når header får
 * fokus. Inset (-3px) flytter ringen INNI knappen så den ikke
 * invaderer naboelementene. */
.bf-mobile-acc__header:focus-visible {
  outline: 3px solid var(--bf-pulserende);
  outline-offset: -3px;
  border-radius: 1px;
}

.bf-mobile-acc__arrow {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.35);
  transition: transform var(--bf-transition-normal);
  flex-shrink: 0;
}

.bf-mobile-acc__header[aria-expanded="true"] .bf-mobile-acc__arrow {
  transform: rotate(90deg);
}

/* Direkte-lenke-variant for menypunkter uten sub-items. */
.bf-mobile-acc__header--direct {
  text-decoration: none;
  display: block;
}

.bf-mobile-acc__header--direct[aria-current="page"] {
  font-weight: var(--bf-weight-bold);
}

.bf-mobile-acc__body {
  display: none;
  padding: 0 var(--bf-space-4) var(--bf-space-4);
}

.bf-mobile-acc__body.is-open {
  display: block;
}

.bf-mobile-acc__link {
  display: block;
  padding: var(--bf-space-3);
  margin: 0 calc(-1 * var(--bf-space-3));
  font-size: var(--bf-text-sm);
  color: rgba(0, 0, 0, 0.75);  /* WCAG 1.4.3: >6:1 mot hvit */
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 1px;
  transition: background var(--bf-transition-fast),
              color var(--bf-transition-fast);
}

/* Tydeligere hover/aktiv på mobil – speiler desktop megameny der
 * undersidene får lyseblå (Drømmende-lys) hover-bakgrunn. Gir samme
 * visuelle vokabular på begge viewports. */
.bf-mobile-acc__link:hover,
.bf-mobile-acc__link:focus-visible {
  background: var(--bf-drommende-lys);
  color: var(--bf-sort);
  outline: none;
}

.bf-mobile-acc__link:last-child {
  border-bottom: none;
}

/* Feature-teaser i accordion-body: lite bilde + tekst + CTA.
 * Speiler desktop-megamenyens featured-panel i et mer kompakt format. */
.bf-mobile-acc__feature {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--bf-space-3);
  align-items: center;
  padding: var(--bf-space-3);
  margin: 0 calc(-1 * var(--bf-space-3)) var(--bf-space-3);
  background: var(--bf-flyt);
  border-radius: 1px;
  text-decoration: none;
  color: var(--bf-sort);
  transition: background var(--bf-transition-fast);
}

.bf-mobile-acc__feature:hover,
.bf-mobile-acc__feature:focus-visible {
  background: var(--bf-leken);
  outline: none;
}

.bf-mobile-acc__feature-media {
  display: block;
  width: 88px;
  height: 64px;
  overflow: hidden;
  border-radius: 1px;
  background: var(--bf-balanse);
}

.bf-mobile-acc__feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bf-mobile-acc__feature-body {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-1);
}

.bf-mobile-acc__feature-text {
  font-size: var(--bf-text-sm);
  line-height: 1.35;
  color: var(--bf-sort);
}

.bf-mobile-acc__feature-cta {
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-bold);
  color: var(--bf-sort);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Mobil drawer-footer: Logg inn (gul, venstre) + Bli medlem (grønn, høyre).
 * Rekkefølge og fargevalg matcher desktop-headeren én-til-én. */
.bf-mobile-footer {
  padding: var(--bf-space-4);
  display: flex;
  gap: var(--bf-space-3);
  background: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  position: sticky;
  bottom: 0;
}

/* CTA-knappene i drawer-footer fyller bredden likt og strekkes til
 * 44 px høyde (§ 11b touch target for primær CTA). Beholder de
 * eksakte hover-fargene fra desktop. */
.bf-mobile-footer .bf-btn-logg-inn,
.bf-mobile-footer .bf-btn-bli-medlem {
  flex: 1;
  height: 44px;
  font-size: var(--bf-text-base);
  padding: 0 var(--bf-space-5);
  padding-right: calc(var(--bf-space-5) + var(--bf-corner-cut) * 0.4);
  text-align: center;
}

/* ── Responsivt bruddpunkt ──────────────────────── */

@media (max-width: 900px) {
  .bf-header { display: none; }
  .bf-mobile-header { display: flex; }
}

@media (min-width: 901px) {
  .bf-mobile-header,
  .bf-mobile-drawer { display: none !important; }
}