/* ==========================================================================
   FORSIDE.CSS – stiler som bare forsiden (index.html) bruker
   Hero med nedtelling, mannskapet, været, kartet og programmet.
   Felles farger, meny og seksjonsrammer ligger i felles.css.
   ========================================================================== */

/* ---------- Hero: kartblad ---------- */
.hero{position:relative;background:var(--gran-dyp);color:var(--papir);overflow:hidden;border-bottom:5px solid var(--tytte)}
.hero svg.topo{position:absolute;inset:0;width:100%;height:100%;opacity:.35}
.hero-inner{position:relative;padding:72px 20px 56px;max-width:1040px;margin:0 auto}
.kartblad{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--lav);display:flex;gap:14px;flex-wrap:wrap}
.kartblad span::after{content:"·";margin-left:14px;color:var(--tytte)}
.kartblad span:last-child::after{content:""}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(64px,12vw,148px);line-height:.9;letter-spacing:.01em;text-transform:uppercase;margin:18px 0 8px}
.hero .undertittel{font-family:var(--display);font-weight:500;font-size:clamp(20px,3vw,30px);letter-spacing:.06em;text-transform:uppercase;color:var(--lav)}
.hero .undertittel b{color:#fff;font-weight:600}
.nedtelling{display:flex;gap:26px;margin-top:38px;flex-wrap:wrap}
.nedtelling .celle{border-left:2px solid var(--tytte);padding-left:12px}
.nedtelling .tall{font-family:var(--display);font-weight:700;font-size:46px;line-height:1}
.nedtelling .navn{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--lav)}
.mannskap{margin-top:34px;font-family:var(--mono);font-size:13px;color:var(--lav)}
.mannskap b{color:#fff;font-weight:500}

/* ---------- Mannskapet ---------- */
.mannskap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.bror{background:var(--kort);border:1px solid var(--kontur);display:flex;flex-direction:column}
.bror .foto{aspect-ratio:3/4;overflow:hidden;background:var(--gran-dyp)}
.bror .foto img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.96)}
.bror .tekst{padding:12px 14px 14px;border-top:3px solid var(--tytte)}
.bror h3{font-family:var(--display);font-weight:700;font-size:24px;text-transform:uppercase;letter-spacing:.04em}
.bror .rolle{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--vann)}
.bror p{font-size:14.5px;margin-top:6px;line-height:1.5}

/* ---------- Vær ---------- */
.vaer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.vaer-kort{background:var(--kort);border:1px solid var(--kontur);border-top:4px solid var(--vann);padding:18px}
.vaer-kort h3{font-family:var(--display);font-size:24px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.vaer-kort .dato{font-family:var(--mono);font-size:12px;color:#5c6f64;letter-spacing:.1em}
.vaer-symbol{font-size:44px;margin:10px 0 4px}
.vaer-temp{font-family:var(--display);font-size:36px;font-weight:700}
.vaer-temp small{font-size:20px;color:#5c6f64;font-weight:500}
.vaer-detalj{font-family:var(--mono);font-size:12.5px;color:#41544a;margin-top:8px;line-height:1.8}
.vaer-status{font-family:var(--mono);font-size:13px;padding:14px;background:var(--kort);border:1px dashed var(--kontur)}

/* ---------- Kart ---------- */
#kartboks{height:520px;border:1px solid var(--kontur);background:var(--vann-lys)}
.kart-fallback{padding:24px;font-family:var(--mono);font-size:13.5px;line-height:2}

/* Storvisning: kartet dekker hele skjermen. Esc eller ⛶ lukker. */
#kartboks.kart-stor{position:fixed;inset:0;height:auto;z-index:5000;border:none}
body.kart-er-stor{overflow:hidden}

.kart-verktoy{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.kart-hint{font-family:var(--mono);font-size:11.5px;color:#5c6f64}
.koordinatvisning{font-family:var(--mono);font-size:12.5px;background:var(--gran-dyp);color:var(--lav);padding:8px 12px;margin-top:-1px;display:inline-block}

/* Egne kartknapper – samme uttrykk som Leaflets egne */
.kart-knapp{display:block;width:34px;height:34px;line-height:34px;text-align:center;font-size:17px;background:#fff;color:var(--gran);text-decoration:none;border-bottom:1px solid #ccc}
.kart-knapp:hover{background:#f4f4f4}
.kart-knapp.aktiv{background:var(--vann);color:#fff}

.legendeliste{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-top:18px}
.legendeliste .punkt{background:var(--kort);border:1px solid var(--kontur);padding:12px 14px;font-size:15px}
.legendeliste .punkt b{font-family:var(--display);font-size:18px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.legendeliste .moh{font-family:var(--mono);font-size:11.5px;color:var(--vann)}
.legendeliste .koordinat{font-family:var(--mono);font-size:11px;color:#8a988f}
.legendeliste .kartapp{font-family:var(--mono);font-size:11px;white-space:nowrap}
.popup-koordinat{font-family:var(--mono);font-size:11px;color:#5c6f64}

/* ---------- Program ---------- */
.program-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.dagkort{background:var(--kort);border:1px solid var(--kontur)}
.dagkort header{background:var(--gran);color:var(--papir);padding:10px 16px;font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.05em;text-transform:uppercase}
.dagkort header small{display:block;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.14em;color:var(--lav)}
.dagkort ol{list-style:none;padding:8px 0}
.dagkort li{display:grid;grid-template-columns:64px 1fr auto;gap:10px;padding:8px 16px;border-bottom:1px solid #E2E8E0;font-size:15px}
.dagkort li:last-child{border-bottom:none}
.dagkort .kl{font-family:var(--mono);font-size:12.5px;color:var(--tytte);padding-top:2px}

/* Klokkeslett og tekst er knapper man kan trykke på for å redigere,
   men de skal se ut som vanlig tekst til man peker på dem. */
.endrbar{background:none;border:none;padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer;border-bottom:1px dashed transparent}
.endrbar:hover,.endrbar:focus-visible{border-bottom-color:var(--kontur);outline:none}
.dagkort .programtekst{line-height:1.5}

/* Feltet for å legge til en ny post nederst på hvert dagkort */
.ny-post{display:flex;gap:6px;padding:10px 16px 14px;border-top:1px dashed var(--kontur)}
.ny-post input{font-family:var(--body);font-size:14px;padding:6px 8px;border:1px solid var(--kontur);background:var(--papir);min-width:0}
.ny-post .felt-kl{width:64px;font-family:var(--mono);font-size:12.5px}
.ny-post input:last-of-type{flex:1}
.ny-post button{font-family:var(--display);font-weight:700;font-size:18px;line-height:1;background:var(--gran);color:#fff;border:none;padding:0 14px;cursor:pointer}
.ny-post button:hover{background:var(--tytte)}

/* Hvilket kartgrunnlag som faktisk lastes – og et varsel hvis siden
   måtte falle tilbake på et tynnere kart enn Kartverkets */
.kartlagstatus{font-family:var(--mono);font-size:11.5px;color:#5c6f64;margin-top:8px}
.kartlagstatus[data-byttet="ja"]{color:var(--tytte)}

/* Stedsnavnene som ligger fast oppå kartet ved hvert punkt */
.kartnavn.leaflet-tooltip{background:rgba(24,38,31,.82);border:none;box-shadow:none;color:#F1F4EF;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px}
.kartnavn.leaflet-tooltip::before{display:none}

/* Rettemodus: dra punktene på plass og få ut ferdig kode */
.rettepanel{background:var(--gran-dyp);color:var(--papir);padding:20px;margin-top:16px}
.rettepanel h3{font-family:var(--display);font-weight:700;font-size:22px;text-transform:uppercase;letter-spacing:.05em}
.rettepanel p{font-size:15px;color:#D9E2DB;margin:6px 0 14px;max-width:70ch}
.rettepanel code{font-family:var(--mono);font-size:13px;color:var(--lav)}
.rettepanel pre{background:#0F1A15;color:#C7CDA8;font-family:var(--mono);font-size:12px;line-height:1.7;padding:14px;overflow-x:auto;margin-bottom:12px}

/* ==========================================================================
   TERJE – svigerfars dom over vannet
   Eget felt i full bredde rett under menyen, det første man ser etter hero.
   ========================================================================== */
.terje{position:relative;overflow:hidden;background:var(--gran-dyp);color:var(--papir);
       border-top:5px solid var(--tytte);border-bottom:5px solid var(--tytte);padding:52px 0 46px}
.terje-topo{position:absolute;inset:0;width:100%;height:100%;opacity:.4}
.terje figure{position:relative;text-align:center}

.terje-merke{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
             color:var(--tytte);margin-bottom:20px}

.terje blockquote p{font-family:var(--body);font-style:italic;font-size:clamp(17px,2.2vw,21px);
                    line-height:1.5;color:#D9E2DB;max-width:44ch;margin:0 auto 8px}

/* Poenget. Dette er hele grunnen til at feltet finnes. */
.terje .poeng{font-family:var(--display);font-style:normal;font-weight:700;
              font-size:clamp(38px,8.5vw,88px);line-height:.92;letter-spacing:.01em;
              text-transform:uppercase;color:var(--papir);max-width:none;margin:26px 0 0}
.terje .poeng span{color:var(--tytte);display:inline-block;padding:2px 0}

.terje figcaption{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
                  color:var(--lav);margin-top:26px}
.terje figcaption::before{content:"— "}

@media(min-width:760px){
  /* På brede skjermer får likningen stå på én linje */
  .terje .poeng br{display:none}
  .terje .poeng span{margin:0 .28em}
}