/* Felles meny, bunntekst, mobilmeny og personvernbanner for de offentlige sidene.
   Flyttet ut av layout.js 5. nov 2026 (lå før som en streng som ble lagt inn i
   <head> når skriptet kjørte). Lenkes rett før </head> på hver side som laster
   layout.js, så den kommer etter sidens egne <style>-blokker, som før.
   Farger og fonter kommer fra tokens.css. */

body { font-family: var(--et-font-body); }

/* ── Topp-meny ── */
.et-nav {
  height: 103px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Logo og knapper i samme rutenett som innholdet (1216 px) */
  padding: 0 max(32px, calc((100% - 1216px) / 2));
  background: var(--et-lys-stein);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.et-nav-logo { height: 58px; cursor: pointer; }
.et-nav-logo img { height: 100%; width: auto; display: block; }
.et-nav-center { display: flex; gap: 32px; align-items: center; }
.et-nav-link {
  font-family: var(--et-font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--et-heading);   /* grå på Lys stein ga for svak kontrast */
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.et-nav-link:hover, .et-nav-link.active {
  color: var(--et-heading);
  border-bottom-color: var(--et-anorakk);
  text-decoration: none;
}
.et-nav-right { display: flex; align-items: center; gap: 12px; }
/* ── Knapper: den felles komponenten for offentlige sider ──
   .et-btn-primary (oransje) og .et-btn-secondary (hvit med kant). Tillegg:
   .et-btn-stor (stor knapp, 52 px – hovedhandlinger og mobil) og
   .et-btn-full (full bredde). Runde hjørner kommer fra tokens.css.
   Nye sider bruker disse og lager ikke egne knapperegler. Forsiden og
   «Bli medlem» er gått over (mobilrunde 1, nov. 2026); de andre sidene har
   fortsatt egne .btn-primary o.l. til de tas i en senere runde. */
.et-btn-primary, .et-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-sizing: border-box; padding: 11px 22px; border-radius: var(--et-radius-pill);
  font-family: var(--et-font-body); font-weight: 600; font-size: 14px; line-height: 1.2;
  cursor: pointer; text-decoration: none; text-align: center;
}
.et-btn-primary { background: var(--et-anorakk); color: #fff; border: 1.5px solid var(--et-anorakk); }
.et-btn-primary:hover { background: var(--et-anorakk-dark); border-color: var(--et-anorakk-dark); text-decoration: none; }
.et-btn-secondary { background: #fff; color: var(--et-text-muted); border: 1.5px solid var(--et-border); padding: 9px 20px; }
.et-btn-secondary:hover { background: #fff; border-color: var(--et-heading); color: var(--et-heading); text-decoration: none; }
.et-btn-primary:focus-visible, .et-btn-secondary:focus-visible { outline: 3px solid var(--et-fjellbla); outline-offset: 3px; }
.et-btn-primary:disabled, .et-btn-secondary:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 600px) {
  .et-btn-primary, .et-btn-secondary { min-height: var(--et-touch); }
}
.et-btn-stor { min-height: 52px; padding: 12px 26px; font-size: 17px; font-weight: 700; }
.et-btn-stor.et-btn-secondary { color: var(--et-fjellbla); }
.et-btn-full { display: flex; width: 100%; }
/* Knapp som venter på svar (f.eks. «Gå til betaling»): spinner foran teksten, og knappen er
   låst så den ikke trykkes to ganger. Settes med klassen .et-btn-laster + disabled. */
.et-btn-primary.et-btn-laster:disabled, .et-btn-secondary.et-btn-laster:disabled { opacity: .85; cursor: progress; }
.et-spinner {
  display: inline-block; flex: none; width: 1em; height: 1em; box-sizing: border-box;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: et-snurr .7s linear infinite;
}
@keyframes et-snurr { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .et-spinner { animation-duration: 1.8s; } }

/* ── Footer ── */
.et-footer { background: var(--et-lys-stein); }
.et-footer-top {
  padding: 64px 80px 48px;
  display: flex;
  gap: 120px;
  max-width: 1376px;
  margin: 0 auto;
}
.et-footer-brand {
  display: flex; flex-direction: column; gap: 16px;
  flex-shrink: 0; max-width: 280px;
}
/* Logoen venstrejusteres med teksten under */
.et-footer-brand img { height: 60px; width: auto; align-self: flex-start; }
.et-footer-tagline {
  font-family: var(--et-font-body);
  font-weight: 500; font-size: 14px; line-height: 20px;
  color: var(--et-text);
}
.et-footer-links { display: flex; flex: 1; gap: 64px; }
.et-footer-col { display: flex; flex-direction: column; gap: 16px; flex: 1; }
/* Kolonnetitlene skiller seg fra lenkene: små versaler i Bark */
.et-footer-col-title {
  font-family: var(--et-font-body);
  font-weight: 700; font-size: 13px; color: var(--et-heading);
  text-transform: uppercase; letter-spacing: var(--et-tracking-label);
}
.et-footer-col-links { display: flex; flex-direction: column; gap: 12px; }
.et-footer-col-links a {
  font-family: var(--et-font-body);
  font-weight: 500; font-size: 16px;
  color: var(--et-heading); text-decoration: none; cursor: pointer;
}
.et-footer-col-links a:hover { color: var(--et-heading); text-decoration: underline; text-underline-offset: 3px; }
.et-footer-juridisk { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; }
.et-footer-juridisk a { font-size: 14px; color: var(--et-heading); text-decoration: none; }
.et-footer-juridisk a:hover { color: var(--et-heading); text-decoration: underline; text-underline-offset: 3px; }
.et-footer-bottom {
  padding: 24px 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(0,0,0,0.06);
  max-width: 1376px;
  margin: 0 auto;
}
.et-footer-copy {
  font-family: var(--et-font-body);
  font-size: 14px;
  color: var(--et-text);
  margin: 0;
}
.et-social-icons { display: flex; gap: 12px; }
.et-social-icons a {
  color: var(--et-heading);
  transition: color .15s;
  display: inline-flex;
  align-items: center;
}
.et-social-icons a:hover { color: var(--et-anorakk); }

/* ── Felles for innholdssidene (korrektur fra designer, okt. 2026) ──
   Står etter sidenes egen CSS og vinner derfor ved lik spesifisitet.
   • Sidetittelen står rett på siden, uten boks, i Bark.
   • Stikktitler (små versaler over titler) i Bark, ikke blått/oransje.
   • Kort og innholdsbokser uten skygge; én radius for kort. */
.et-page-hero {
  background: none; padding: 8px 0 0; border-radius: 0;
  text-align: left; margin-bottom: 32px;
}
.et-page-hero h1 { color: var(--et-heading); }
.et-page-hero p { margin-left: 0; max-width: 720px; }
.card-tag, .post-tag, .bm-etikett { color: var(--et-heading); }
/* Knapper som er lenker: den globale a:hover-fargen gjorde teksten uleselig */
a.btn-primary:hover, a.btn.btn-primary:hover, a.et-btn-primary:hover, a.bm-knapp:hover { color: #fff; }
a.btn-secondary:hover, a.btn-ghost:hover, a.et-btn-secondary:hover { color: var(--et-heading); }
/* Kort i lister beholder kant, men mister skyggen */
.post, .post:hover, .project-card, .project-card:hover, .latest-card,
.form-card, .info-card { box-shadow: none; }
/* Lesetekst (om, artikler, turtips, vilkår) står rett på siden uten boks */
.article-card {
  background: none; border: 0; box-shadow: none;
  padding-left: 0; padding-right: 0; border-radius: 0;
}
/* ── Felles rutenett for alle undersider ──
   Alle undersider (oversikter, lesesider, kontakt, «Bli medlem») har samme
   sentrerte kolonne på 760 px, med sidetopp, filtre, kort og tekst i samme
   kolonne. Kortene står to i bredden. Samme bredde som Min side.
   Forsiden har egen layout i full bredde. Bare på skjerm, så utskrift av
   turtips er urørt. */
@media screen {
  .et-container { max-width: calc(760px + 64px); margin: 0 auto; padding: 48px 32px; }
}
@media screen and (max-width: 780px) {
  .et-container { padding: 32px var(--et-gutter); }
}

/* Anorakk er ikke tekstfarge (for svak kontrast): lenker i brødtekst i
   Fjellblå, tilbakelenker og piler i Bark */
.et-prose a:not([class*="btn"]), .et-prose a:not([class*="btn"]):hover, .contact-box a { color: var(--et-link); }
/* Alle oransje knapper ser like ut (som på «Bli medlem»): hvit tekst,
   mørkere oransje ved hover, aldri lenkefarge */
.btn-primary, .et-btn-primary, .btn-submit, .newsletter-btn,
.et-prose .btn-primary { font-weight: 700; }
.btn-primary:hover, .et-btn-primary:hover, .btn-submit:hover, .newsletter-btn:hover,
.et-prose .btn-primary:hover { background: var(--et-anorakk-dark); color: #fff; text-decoration: none; }
.back-link:hover { color: var(--et-link); }
.post-title .arrow, .project-title .arrow, .arrow { color: var(--et-heading); }

/* Felles tekststiler (tokens.css): brødtekst 17 px, liten tekst 15 px.
   Før hadde hver side egne størrelser (13–18 px). */
.et-prose, .latest-notes { font-size: var(--et-tekst); line-height: var(--et-tekst-linje); }
.post-excerpt, .project-excerpt, .meeting-date, .post-meta, .post-stats, .meta-row,
.partnerkort-kontakt, .bm-betaling { font-size: var(--et-tekst-liten); }

/* Kort som er lenker: titlen understrekes ved hover */
a:hover .post-title, .post:hover .post-title, .project-card:hover .project-title,
a:hover .meeting-title { text-decoration: underline; text-underline-offset: 3px; }

/* ── Mobilmeny ── */
.et-nav-toggle {
  display: none;
  width: var(--et-touch); height: var(--et-touch);
  align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--et-radius-sm);
  color: var(--et-heading); cursor: pointer; padding: 0;
}
.et-nav-toggle:focus-visible { outline: 3px solid var(--et-fjellbla); outline-offset: 2px; }
.et-nav-toggle svg { width: 26px; height: 26px; }
.et-nav-toggle .et-ikon-lukk { display: none; }
.et-nav[data-meny-apen] .et-nav-toggle .et-ikon-meny { display: none; }
.et-nav[data-meny-apen] .et-nav-toggle .et-ikon-lukk { display: block; }
.et-meny {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  top: var(--et-nav-hoyde, 64px);
  background: var(--et-lys-stein);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 8px var(--et-gutter) calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 99;
  border-top: 1px solid rgba(0,0,0,.05);
}
.et-nav[data-meny-apen] + .et-meny { display: block; }
.et-meny a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px;
  font-family: var(--et-font-body); font-weight: 600; font-size: 18px;
  color: var(--et-heading); text-decoration: none;
  border-bottom: 1px solid var(--et-border-light);
}
.et-meny a.active { color: var(--et-fjellbla); }
.et-meny a::after { content: '›'; font-size: 24px; color: var(--et-text-muted); }
.et-meny-handlinger { display: grid; gap: 10px; margin-top: 20px; }
.et-meny-handlinger a {
  justify-content: center; border: 0; min-height: var(--et-touch);
  border-radius: var(--et-radius-pill); font-size: 16px;
}
.et-meny-handlinger a::after { content: none; }
.et-meny-handlinger .et-btn-primary { color: #fff; }
.et-meny-handlinger .et-btn-secondary { border: 1.5px solid var(--et-border); color: var(--et-heading); background: #fff; }
body.et-meny-laast { overflow: hidden; }

/* Butikken skjules til innstillingen sier åpen (body.et-butikk-aapen) */
body:not(.et-butikk-aapen) [data-butikk] { display: none !important; }

/* Bilder som ikke laster, skjules — kortets bakgrunn vises i stedet */
img.et-bilde-feilet { display: none !important; }

/* Menypunktene får ikke plass under 1180px (sju lenker + knapper).
   Da brukes menyknappen, men knappene i toppen beholdes til 980px. */
@media(max-width:1180px) {
  .et-nav { padding: 0 32px; }
  .et-nav-center { display: none; }
  .et-nav-toggle { display: inline-flex; }
}

@media(max-width:980px) {
  .et-nav { padding: 0 var(--et-gutter); height: 64px; }
  /* Logoen vises 40 px høy, men lenken er en full trykkflate (44 px) */
  .et-nav-logo { height: var(--et-touch); display: flex; align-items: center; }
  .et-nav-logo img { height: 40px; }
  .et-nav-center { display: none; }
  /* «Logg inn» (utlogget) / «Min side» (innlogget) i toppen på mobil.
     «Bli medlem» ligger i menyen og er hovedknappen øverst på forsiden;
     «Logg ut» ligger i menyen. */
  .et-nav-right .et-btn-primary { display: none; }
  .et-nav-right .et-btn-secondary { padding: 0 16px; min-height: var(--et-touch); display: inline-flex; align-items: center; white-space: nowrap; box-sizing: border-box; color: var(--et-heading); }
  .et-nav-right { gap: 4px; }
  .et-nav-toggle { display: inline-flex; }

  .et-footer-top { flex-direction: column; padding: 40px var(--et-gutter) 24px; gap: 28px; }
  .et-footer-brand { max-width: none; }
  .et-footer-brand img { height: 48px; align-self: flex-start; }
  .et-footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .et-footer-col { gap: 4px; min-width: 0; }
  .et-footer-col-links { gap: 0; }
  .et-footer-col-links a { display: flex; align-items: center; min-height: var(--et-touch); }
  .et-footer-bottom { padding: 20px var(--et-gutter) calc(20px + env(safe-area-inset-bottom, 0px)); flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
  .et-social-icons a { width: var(--et-touch); height: var(--et-touch); justify-content: center; }
  .et-social-icons { gap: 4px; margin-left: -11px; }
  .et-footer-juridisk { gap: 0 20px; }
  .et-footer-juridisk .et-footer-copy { flex-basis: 100%; }
  .et-footer-juridisk a { display: inline-flex; align-items: center; min-height: var(--et-touch); }

  /* iOS zoomer inn i felt med tekst under 16px og blir stående
     forstørret. !important fordi mange sider setter størrelsen inline. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea {
    font-size: var(--et-input-size) !important;
  }
}
/* ── Innholdssider på mobil (om, artikler, turtips, prosjekter, årsmøter,
   vilkår): samme tekststørrelser som forsiden, og tilbakelenker som er
   lette å treffe. Står etter sidenes egen CSS, så disse vinner ved lik spesifisitet. */
@media(max-width:600px) {
  .et-page-hero h1 { font-size: 28px; line-height: 34px; }
  .lead { font-size: 18px; line-height: 27px; }
  .et-prose { font-size: 16px; line-height: 26px; }
  .et-prose h2 { font-size: 22px; line-height: 28px; }
  .et-prose h3 { font-size: 18px; line-height: 24px; }
  .back-link { display: inline-flex; align-items: center; min-height: var(--et-touch); }
  .post-tag { font-size: 13px; }
}
@media(max-width:340px) {
  .et-footer-links { grid-template-columns: 1fr; }
}

/* ── Samtykke til informasjonskapsler (Google Analytics) ── */
.et-cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000;
  max-width: 560px; margin: 0 auto;
  background: #fff; color: var(--et-text);
  border: 1px solid var(--et-border-light); border-radius: var(--et-radius-lg);
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
  padding: 20px 22px;
}
.et-cookie h2 {
  font-family: var(--et-font-title); font-weight: 800; font-size: 18px; line-height: 24px;
  color: var(--et-heading); margin: 0 0 8px;
}
.et-cookie p { font-size: 15px; line-height: 23px; margin: 0 0 16px; }
.et-cookie a { color: var(--et-link); }
.et-cookie-knapper { display: flex; gap: 10px; flex-wrap: wrap; }
.et-cookie-knapper button {
  flex: 1 1 auto; min-height: var(--et-touch); padding: 0 20px;
  font-family: var(--et-font-body); font-weight: 700; font-size: 15px;
  border-radius: var(--et-radius); cursor: pointer; border: 1.5px solid var(--et-border);
}
/* «Godta» og «Avvis» er likeverdige — avvis er ikke gjemt bort */
.et-cookie-godta { background: var(--et-fjellbla); border-color: var(--et-fjellbla); color: #fff; }
.et-cookie-avvis { background: #fff; color: var(--et-heading); }
.et-cookie-knapper button:focus-visible { outline: 3px solid var(--et-fjellbla); outline-offset: 2px; }