/* =============================================================================
   friluftslivet.nu — Header & Footer (blocktema-komponenter: header.php /
   menu.php / footer.php). Bygger ENBART på tokens i fl-tokens.css.
   Allt namespace:at .fl-* så inget krockar.
   ========================================================================== */

/* =============================================================================
   HEADER — kompakt, sticky, ALLTID solid (mörk skymning, ljus text) så
   kontrasten aldrig kan fela. Full-bredds mega-menu, mobil-drawer.
   ========================================================================== */
.fl-header {
  position: sticky;             /* positionerad → containing block för mega-panelen */
  top: 0;
  z-index: var(--fl-z-header);
  background: var(--fl-header-solid);
  backdrop-filter: saturate(140%) blur(var(--fl-header-blur));
  -webkit-backdrop-filter: saturate(140%) blur(var(--fl-header-blur));
  border-bottom: 1px solid rgba(199, 210, 234, 0.12);
  color: var(--fl-header-text);
  transition: box-shadow var(--fl-tid-lugn) var(--fl-ease);
}
/* Diskret skugga vid scroll som lyfter headern från innehållet */
.fl-scrollad .fl-header { box-shadow: 0 6px 24px rgba(7, 10, 20, 0.34); }

/* Gemensam wrap för båda raderna */
.fl-header__inner {
  width: 100%;
  max-width: var(--fl-bredd-max);
  margin-inline: auto;
  padding-inline: var(--fl-gutter);
}
/* Rad 1: logo + sök/konto på egen rad ovanför nav */
.fl-header__topp .fl-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--fl-luft-5); min-height: 64px;
}
/* Rad 2: navigationen — egen nyans (ljusare), ingen skiljelinje, luft runt hover-boxarna */
.fl-header__navrad { background: rgba(255, 255, 255, 0.045); }
.fl-header__navrad .fl-header__inner { display: flex; padding-block: 7px; }

/* --- Logotyp --- */
.fl-logo {
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: var(--fl-luft-3);
  font-family: var(--fl-font-display);
  font-weight: var(--fl-vikt-svart);
  font-size: var(--fl-text-md);
  letter-spacing: var(--fl-sparrning-rubrik);
  color: var(--fl-header-text);
  text-decoration: none;
  white-space: nowrap;
}
.fl-logo__mark {
  width: 30px; height: 30px; flex: none;
  filter: drop-shadow(0 2px 6px rgba(232, 112, 42, 0.35));
  transition: transform var(--fl-tid) var(--fl-ease), filter var(--fl-tid) var(--fl-ease);
}
.fl-logo__namn { font-weight: var(--fl-vikt-svart); }
.fl-logo__nu { color: var(--fl-glod); }   /* signaturglöd på ".nu" */
/* Hover: ENDAST ikon-animering. Nolla global a:hover-färg så texten ALDRIG byter färg. */
.fl-logo:hover,
.fl-logo:focus { color: var(--fl-header-text); }
.fl-logo:hover .fl-logo__nu { color: var(--fl-glod); }
.fl-logo:hover .fl-logo__mark { transform: scale(1.1) rotate(-4deg); }

/* --- Primär navigation (egen rad, full radhöjd för obruten hover) --- */
.fl-nav { display: flex; align-items: stretch; gap: var(--fl-luft-1); min-height: 48px; }
.fl-nav__list { list-style: none; display: flex; align-items: stretch; gap: var(--fl-luft-1); margin: 0; padding: 0; }
.fl-nav__item { display: flex; align-items: center; }   /* full höjd; knappen centrerad i objektet */

.fl-nav__lank {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--fl-luft-2);
  min-height: 40px;
  padding: var(--fl-luft-2) var(--fl-luft-4);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-base);
  font-weight: var(--fl-vikt-fet);          /* tydligare default (läsbart utan hover) */
  color: var(--fl-header-text);
  text-decoration: none;
  border-radius: var(--fl-radie);
  border: 1px solid transparent;
  background: transparent;                 /* nolla webbläsarens default-knappyta (annars ljus text på ljus buttonface) */
  appearance: none; -webkit-appearance: none;
  transition: background var(--fl-tid) var(--fl-ease), color var(--fl-tid) var(--fl-ease);
  cursor: pointer;
}
.fl-nav__lank:hover,
.fl-nav__item[aria-expanded="true"] > .fl-nav__lank,
.fl-nav__lank[aria-expanded="true"] {
  background: rgba(246, 244, 238, 0.10);
  color: var(--fl-header-text);
}
/* aktiv sida — eldglödmarkör under */
.fl-nav__lank[aria-current="page"] {
  color: var(--fl-glod);
}
.fl-nav__lank[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--fl-luft-4); right: var(--fl-luft-4); bottom: 4px;
  height: 2px; background: var(--fl-accent); border-radius: 2px;
}
/* chevron för mega-menu-item */
.fl-nav__chevron { width: 12px; height: 12px; transition: transform var(--fl-tid) var(--fl-ease); opacity: 0.7; }
.fl-nav__lank[aria-expanded="true"] .fl-nav__chevron { transform: rotate(180deg); }

/* Teaser-badge (Community = "Gå med snart") */
.fl-badge {
  font-family: var(--fl-font-ui);
  font-size: 0.625rem;
  font-weight: var(--fl-vikt-fet);
  letter-spacing: var(--fl-sparrning-versal);
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--fl-radie-pill);
  /* Sitter alltid på mörk yta (header/drawer/footer): glödtext på svagt varm
     ton + glödkant. Tidigare ljus-på-ljus (peach bg + glöd text) fixad. */
  background: rgba(255, 206, 107, 0.12);
  color: var(--fl-glod);
  border: 1px solid rgba(255, 206, 107, 0.42);
}

/* --- MEGA-MENU panel (full bredd, förankrad mot headern, inget glapp) ---
   Panelen är DOM-barn till menyobjektet (så hover bevaras) men positioneras
   mot .fl-header (närmaste positionerade förälder, eftersom .fl-nav__item inte
   är positionerad). top:100% = headerns underkant → inget dödläge att tappa
   musen i. Menyobjektet fyller hela header-höjden så musvägen ner är obruten. */
.fl-mega {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--fl-bg-panel);   /* varm panel, inte kliniskt vit */
  color: var(--fl-text);
  border-top: 1px solid var(--fl-linje-stark);
  border-bottom: 1px solid var(--fl-linje);
  box-shadow: var(--fl-skugga-3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity var(--fl-tid) var(--fl-ease), transform var(--fl-tid) var(--fl-ease), visibility var(--fl-tid);
}
/* Osynlig brygga över navradens botten-padding så musvägen ner till panelen inte bryts. */
.fl-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.fl-mega__inner {
  max-width: var(--fl-bredd-max);
  margin-inline: auto;
  padding: var(--fl-luft-6) var(--fl-gutter) var(--fl-luft-7);
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--fl-luft-5) var(--fl-luft-7);
}
.fl-mega__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: var(--fl-luft-5) var(--fl-luft-6);
}
.fl-mega__rubrik { display: flex; align-items: center; gap: 7px; }
.fl-mega__ikon { color: var(--fl-glod); display: inline-flex; }
.fl-mega__ikon svg { width: 17px; height: 17px; }
.fl-mega__snart {
  display: block;
  padding: var(--fl-luft-2) var(--fl-luft-3);
  margin-inline: calc(var(--fl-luft-3) * -1);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-base);
  color: var(--fl-text-svag);
}
.fl-mega__snart em {
  font-style: normal; font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--fl-glod); margin-left: 6px; opacity: .85;
}
.fl-mega__katalog { margin-top: var(--fl-luft-3); color: var(--fl-glod); font-family: var(--fl-font-ui); font-weight: 700; font-size: var(--fl-text-sm); text-decoration: none; }
.fl-nav__item[aria-expanded="true"] .fl-mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
}
.fl-mega__rubrik {
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-xs);
  font-weight: var(--fl-vikt-fet);
  letter-spacing: var(--fl-sparrning-versal);
  text-transform: uppercase;
  color: var(--fl-text-svag);
  margin: 0 0 var(--fl-luft-3);
}
.fl-mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fl-mega__lank {
  display: block;
  padding: var(--fl-luft-2) var(--fl-luft-3);
  margin-inline: calc(var(--fl-luft-3) * -1);
  border-radius: var(--fl-radie);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-base);
  color: var(--fl-text);
  text-decoration: none;
  transition: background var(--fl-tid-snabb) var(--fl-ease);
}
.fl-mega__lank:hover { background: var(--fl-accent-mjuk); color: var(--fl-text); }
.fl-mega__lank span { display: block; font-size: var(--fl-text-sm); color: var(--fl-text-svag); margin-top: 1px; }
/* Promo-cell i mega-menu (höger) */
.fl-mega__promo {
  background: var(--fl-bg-invers);
  color: var(--fl-text-invers);
  border-radius: var(--fl-radie-md);
  padding: var(--fl-luft-5);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--fl-luft-2);
}
.fl-mega__promo h4 { color: var(--fl-sno); margin: 0; font-size: var(--fl-text-md); }
.fl-mega__promo p { color: var(--fl-dis-ljus); font-size: var(--fl-text-sm); margin: 0; }

/* --- Utility höger (Sök, Konto, tema, hamburgare) --- */
.fl-header__utility { display: flex; align-items: center; gap: var(--fl-luft-2); }
.fl-ikonknapp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  background: transparent; border: 1px solid transparent; border-radius: var(--fl-radie);
  color: var(--fl-header-text); cursor: pointer;
  transition: background var(--fl-tid) var(--fl-ease), border-color var(--fl-tid) var(--fl-ease);
}
.fl-ikonknapp:hover { background: rgba(246, 244, 238, 0.10); }
.fl-ikonknapp svg { width: 20px; height: 20px; }
.fl-konto {
  display: inline-flex; align-items: center; gap: var(--fl-luft-2);
  min-height: 40px; padding: var(--fl-luft-2) var(--fl-luft-4);
  font-family: var(--fl-font-ui); font-weight: var(--fl-vikt-medium); font-size: var(--fl-text-base);
  color: var(--fl-header-text); text-decoration: none;
  border: 1px solid rgba(246,244,238,0.4); border-radius: var(--fl-radie-pill);
  transition: background var(--fl-tid) var(--fl-ease), border-color var(--fl-tid) var(--fl-ease);
}
.fl-konto:hover { background: rgba(246,244,238,0.1); border-color: rgba(246,244,238,0.7); color: var(--fl-header-text); }

/* Hamburgare — endast mobil */
.fl-hamburgare { display: none; }

/* =============================================================================
   MOBIL DRAWER
   ========================================================================== */
.fl-drawer {
  position: fixed; inset: 0 0 0 auto;
  width: min(360px, 86vw);
  background: var(--fl-skymning);
  color: var(--fl-sno);
  z-index: var(--fl-z-drawer);
  transform: translateX(100%);
  transition: transform var(--fl-tid-lugn) var(--fl-ease);
  display: flex; flex-direction: column;
  padding: var(--fl-luft-5);
  overflow-y: auto;
  box-shadow: -20px 0 60px rgba(0,0,0,0.5);
}
.fl-drawer[data-oppen="true"] { transform: translateX(0); }
.fl-drawer__topp { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--fl-luft-5); }
.fl-drawer__nav { list-style: none; margin: 0; padding: 0; }
.fl-drawer__nav > li { border-bottom: 1px solid rgba(199,210,234,0.12); }
.fl-drawer__lank {
  display: flex; align-items: center; justify-content: space-between; gap: var(--fl-luft-3);
  padding: var(--fl-luft-4) 0; min-height: 44px;
  font-family: var(--fl-font-ui); font-size: var(--fl-text-md); font-weight: var(--fl-vikt-medium);
  color: var(--fl-sno); text-decoration: none; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
}
.fl-drawer__sub { list-style: none; margin: 0; padding: 0 0 var(--fl-luft-4) var(--fl-luft-4);
  display: grid; gap: var(--fl-luft-1); }
.fl-drawer__sub a {
  display: block; padding: var(--fl-luft-2) 0; min-height: 40px;
  font-family: var(--fl-font-ui); font-size: var(--fl-text-base); color: var(--fl-dis-ljus); text-decoration: none;
}
.fl-drawer__sub a:hover { color: var(--fl-glod); }
.fl-drawer__sub[hidden] { display: none; }
.fl-drawer__cta { margin-top: var(--fl-luft-6); display: grid; gap: var(--fl-luft-3); }

.fl-overlay {
  position: fixed; inset: 0; background: rgba(7,10,20,0.55);
  z-index: var(--fl-z-overlay); opacity: 0; visibility: hidden;
  transition: opacity var(--fl-tid) var(--fl-ease), visibility var(--fl-tid);
  backdrop-filter: blur(2px);
}
.fl-overlay[data-oppen="true"] { opacity: 1; visibility: visible; }

/* =============================================================================
   RESPONSIVT — mega-menu/desktop-nav göms, hamburgare visas
   ========================================================================== */
@media (max-width: 920px) {
  :root { --fl-header-h: 64px; }      /* mobil: bara topp-raden (nav i drawer) */
  .fl-header__navrad { display: none; }
  .fl-nav { display: none; }
  .fl-konto__text { display: none; }
  .fl-hamburgare { display: inline-flex; }
}
@media (min-width: 921px) {
  .fl-drawer, .fl-overlay { display: none; }
}

/* =============================================================================
   STOR FOOTER — navigationsnav (flerkolumn mini-sitemap)
   ========================================================================== */
.fl-footer {
  background: var(--fl-skymning);     /* fast mörk skymning i BÅDA lägena (bg-invers flippar fel i mörkt) */
  color: var(--fl-dis-ljus);
  margin-top: var(--fl-luft-10);
  position: relative;
  overflow: hidden;
}
/* Tunn glödlinje i topp (eldreferens, signatur) */
.fl-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--fl-eld) 25%, var(--fl-glod) 50%, var(--fl-eld) 75%, transparent);
  opacity: 0.85;
}

.fl-footer__topp {
  display: grid;
  grid-template-columns: 1.7fr repeat(4, 1fr);
  gap: var(--fl-luft-7) var(--fl-luft-6);
  padding-block: var(--fl-luft-8) var(--fl-luft-7);
}

.fl-footer__brand { max-width: none; }
.fl-footer__logo { display: inline-flex; align-items: center; gap: var(--fl-luft-3); margin-bottom: var(--fl-luft-4); }
.fl-footer__logo .fl-logo__namn { font-family: var(--fl-font-display); font-weight: var(--fl-vikt-svart); font-size: var(--fl-text-md); color: var(--fl-sno); }
.fl-footer__tagline { color: var(--fl-dis); font-size: var(--fl-text-base); line-height: var(--fl-lh-brod); margin: 0 0 var(--fl-luft-5); max-width: 42ch; }

.fl-footer__kol h3 {
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-xs);
  font-weight: var(--fl-vikt-fet);
  letter-spacing: var(--fl-sparrning-versal);
  text-transform: uppercase;
  color: var(--fl-glod);
  margin: 0 0 var(--fl-luft-4);
}
.fl-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fl-footer__list a {
  display: inline-block; padding: 4px 0; min-height: 0; line-height: 1.4;
  font-family: var(--fl-font-ui); font-size: var(--fl-text-base);
  color: var(--fl-dis-ljus); text-decoration: none;
  transition: color var(--fl-tid-snabb) var(--fl-ease);
}
.fl-footer__list a:hover { color: var(--fl-glod); }
.fl-footer__teaser { font-size: var(--fl-text-xs); color: var(--fl-sten); }

/* Nyhetsbrev (community-teaser e-postfångst) — samlad pill-grupp, ej hopklämd */
.fl-footer__brev { margin-top: var(--fl-luft-5); max-width: 380px; }
.fl-footer__brev-grupp {
  display: flex; align-items: center; gap: var(--fl-luft-2);
  background: rgba(246,244,238,0.06);
  border: 1px solid rgba(199,210,234,0.22);
  border-radius: var(--fl-radie-pill);
  padding: 5px 5px 5px var(--fl-luft-4);
  transition: border-color var(--fl-tid) var(--fl-ease);
}
.fl-footer__brev-grupp:focus-within { border-color: var(--fl-glod); }
.fl-footer__brev input {
  flex: 1; min-width: 0; min-height: 40px; padding: 0;
  background: transparent; border: none; color: var(--fl-sno);
  font-family: var(--fl-font-ui); font-size: var(--fl-text-base);
}
.fl-footer__brev input::placeholder { color: var(--fl-dis); }
.fl-footer__brev input:focus-visible { outline: none; }
.fl-footer__brev-grupp .fl-knapp { flex: none; min-height: 40px; padding: 0 var(--fl-luft-5); white-space: nowrap; }

/* Socialt */
.fl-social { display: flex; gap: var(--fl-luft-2); margin-top: var(--fl-luft-5); }
.fl-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--fl-radie);
  border: 1px solid rgba(199,210,234,0.2); color: var(--fl-dis-ljus);
  transition: border-color var(--fl-tid) var(--fl-ease), color var(--fl-tid) var(--fl-ease), background var(--fl-tid) var(--fl-ease);
}
.fl-social a:hover { color: var(--fl-glod); border-color: var(--fl-glod); background: rgba(255,206,107,0.08); }
.fl-social svg { width: 20px; height: 20px; }

/* Botten-rad: legal */
.fl-footer__botten {
  border-top: 1px solid rgba(199,210,234,0.12);
  padding-block: var(--fl-luft-5);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--fl-luft-4);
  font-size: var(--fl-text-sm); color: var(--fl-sten);
}
.fl-footer__legal { display: flex; flex-wrap: wrap; gap: var(--fl-luft-5); list-style: none; margin: 0; padding: 0; }
.fl-footer__legal a { color: var(--fl-dis); text-decoration: none; font-family: var(--fl-font-ui); }
.fl-footer__legal a:hover { color: var(--fl-glod); }

/* Temaväxlare, i botten-raden */
.fl-footer__tema {
  display: inline-flex; align-items: center; gap: var(--fl-luft-2);
  background: rgba(199, 210, 234, 0.06); color: var(--fl-dis);
  border: 1px solid rgba(199, 210, 234, 0.16); border-radius: 999px;
  padding: 6px 14px; font-family: var(--fl-font-ui); font-size: var(--fl-text-sm);
  cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.fl-footer__tema:hover { color: var(--fl-sno); border-color: var(--fl-glod); background: rgba(255, 206, 107, 0.08); }
.fl-footer__tema-ikon { width: 16px; height: 16px; flex: none; }

@media (max-width: 980px) {
  .fl-footer__topp { grid-template-columns: 1fr 1fr; }
  .fl-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .fl-footer__topp { grid-template-columns: 1fr; gap: var(--fl-luft-6); }
  .fl-footer__brev-form { max-width: none; }
}


/* =============================================================================
   GLOBAL SÖK i headern + autocomplete
   ========================================================================== */
.fl-sok { position: relative; }
.fl-sok__form { display: flex; align-items: center; gap: var(--fl-luft-2); position: relative; }
.fl-sok__ikon { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--fl-dis-ljus, #c7d2ea); pointer-events: none; }
.fl-sok__falt {
  width: 168px; max-width: 40vw;
  padding: 8px 12px 8px 32px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: #fff; font-size: var(--fl-text-sm);
  transition: width .18s ease, background .18s ease, border-color .18s ease;
}
.fl-sok__falt::placeholder { color: rgba(255,255,255,0.6); }
.fl-sok__falt:focus { outline: none; width: 240px; background: rgba(255,255,255,0.14); border-color: var(--fl-glod, #e8702a); }
.fl-sok__forslag {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 360px; max-width: 86vw;
  background: var(--fl-bg-upphojd, #fff);
  color: var(--fl-text, #1a1a1a);
  border: 1px solid var(--fl-linje, #e2e2e2);
  border-radius: var(--fl-radie-md, 12px);
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
  padding: var(--fl-luft-3); z-index: 200; max-height: 70vh; overflow-y: auto;
}
.fl-sok__grupp + .fl-sok__grupp { margin-top: var(--fl-luft-3); padding-top: var(--fl-luft-3); border-top: 1px solid var(--fl-linje); }
.fl-sok__grupp-rubrik {
  margin: 0 0 var(--fl-luft-2); padding: 0 var(--fl-luft-2);
  font-size: var(--fl-text-xs, .72rem); text-transform: uppercase; letter-spacing: .06em;
  color: var(--fl-text-svag, #888); font-weight: 700;
}
.fl-sok__traff {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--fl-luft-3);
  padding: 8px var(--fl-luft-2); border-radius: var(--fl-radie, 8px);
  color: inherit; text-decoration: none;
}
.fl-sok__traff:hover, .fl-sok__traff--aktiv { background: var(--fl-accent-mjuk, #eef3ec); }
.fl-sok__traff-titel { font-weight: 600; font-size: var(--fl-text-sm); }
.fl-sok__traff-typ { font-size: var(--fl-text-xs, .72rem); color: var(--fl-text-svag, #888); flex: none; }
@media (max-width: 720px) { .fl-sok { display: none; } }   /* mobil: sök via drawer */