/* Redesign 2026 — chrome (header, meny, footer, mobil-bunnlinje).
   Lastes ETTER tokens.css. Rolig, enkel, troverdig. */

/* ---------- HEADER ---------- */
header {
  background: var(--bg);
  border-bottom: 1px solid var(--kantlinje);
  position: sticky; top: 0; z-index: 50;
}
.nav-row { padding: 16px 32px; max-width: 1140px; }
.logo { font-family: var(--font-tekst); font-weight: 700; font-size: 20px; color: var(--tekst); }
.logo .mark { border-color: var(--primar); }
.logo .mark svg { color: var(--primar); }
.logo .el { color: var(--primar); }

nav.links { gap: 26px; font-size: 16px; }
nav.links a { opacity: 1; color: var(--tekst); border-bottom: 2px solid transparent; padding-bottom: 3px; font-weight: 500; }
nav.links a:hover { color: var(--primar); border-color: var(--primar); }
nav.links a.current { color: var(--primar); border-color: var(--primar); font-weight: 600; }

.nav-right { gap: 20px; }
.nav-right .phone { font-size: 16px; color: var(--primar); font-weight: 700; }

/* Knapper: aksent for hovedknapp, rolig omriss ellers. 18px-kontekst. */
.btn { font-family: var(--font-tekst); font-size: 16px; padding: 12px 22px; border-radius: 6px; }
.btn-solid { background: var(--aksent); color: #fff; border-color: var(--aksent); }
.btn-solid:hover { background: var(--aksent-moerk); border-color: var(--aksent-moerk); }

/* ---------- FOOTER ---------- */
footer { background: var(--flate); color: var(--dempet); margin-top: 72px; padding-top: 40px; }
footer .wrap { max-width: 1140px; }
.foot-grid { display: grid; grid-template-columns: 1.25fr 1.1fr 1fr 0.85fr; gap: 24px 32px; padding-bottom: 24px; }
/* Hver kolonne er <details>; summary = overskrift */
.foot-col { border: none; margin: 0; }
.foot-col > summary { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--tekst); font-weight: 700; margin-bottom: 6px; list-style: none; }
.foot-col > summary::-webkit-details-marker { display: none; }
.foot-col > summary::marker { content: ""; }
/* ul er block + list-style:none; vi setter IKKE display:flex/grid på innholdet i
   base — da ville UA-skjulingen av lukket <details> (Safari/eldre) bli overstyrt
   og accordionen stå åpen på mobil. Display settes i PC- og [open]-kontekst. */
.foot-grid ul { margin: 0 0 4px; padding: 0; list-style: none; }
.foot-grid li { line-height: 1.9; }
.foot-grid li a { font-size: 15px; color: var(--dempet); }
.foot-grid li a:hover { color: var(--tekst); text-decoration: underline; }
.foot-group-label { color: var(--dempet); font-weight: 600; font-size: 13px; margin: 8px 0 2px; }
/* Bysider i to smale kolonner (display settes i PC/[open]-kontekst) */
.foot-byer { grid-template-columns: 1fr 1fr; gap: 0 18px; }
/* Stor telefon-knapp — kun mobil */
.foot-ring { display: none; }
/* Kontaktlinje — egen bunnlinje, tynn skillelinje over */
.foot-kontaktlinje { border-top: 1px solid var(--kantlinje); padding-top: 16px; font-size: 13.5px; line-height: 1.7; color: var(--dempet); }
.foot-kontaktlinje a { color: var(--dempet); }
.foot-kontaktlinje a:hover { color: var(--tekst); }
.foot-legal { padding: 10px 0 24px; font-size: 13px; color: var(--dempet); }
.foot-legal a { color: var(--dempet); }
.foot-legal a:hover { color: var(--tekst); }

/* PC: tving <details>-kolonnene åpne uansett open-attributt */
@media (min-width: 901px) {
  .foot-col > summary { cursor: default; pointer-events: none; }
  .foot-col::details-content { content-visibility: visible; } /* moderne Chrome/Edge */
  .foot-col:not([open]) > ul:not(.foot-byer),
  .foot-col:not([open]) > .foot-group-label { display: block; } /* eldre: vis innhold */
  .foot-col:not([open]) > .foot-byer,
  .foot-col[open] > .foot-byer { display: grid; } /* bysider 2 kolonner */
}

/* ---------- MOBIL BUNNLINJE ---------- */
/* Reservert hoeyde paa body (satt i style.css som padding-bottom:66px) hindrer CLS. */
@media (max-width: 900px) {
  nav.links { background: var(--bg); border-color: var(--kantlinje); }
  nav.links a { border-bottom: none; font-size: 17px; padding: 6px 0; }
  .mobile-cta-bar { background: var(--bg); border-top: 1px solid var(--kantlinje); box-shadow: 0 -4px 16px rgba(27,31,30,0.08); }
  .mobile-cta-bar a { font-size: 16px; border-radius: 6px; }
  .mobile-cta-bar .call { border: 1.5px solid var(--primar); color: var(--primar); }
  .mobile-cta-bar .book { background: var(--aksent); color: #fff; border: none; }

  /* Footer: hver kolonne blir en accordion (lukket som standard) */
  .foot-grid { grid-template-columns: 1fr; gap: 0; padding-bottom: 6px; }
  .foot-col { border-top: 1px solid var(--kantlinje); }
  .foot-col > summary { display: flex; justify-content: space-between; align-items: center; padding: 15px 2px; margin: 0; cursor: pointer; font-size: 14px; }
  .foot-col > summary::after { content: "\25BE"; font-size: 11px; color: var(--dempet); }
  .foot-col[open] > summary::after { content: "\25B4"; }
  .foot-grid ul { padding: 2px 2px 14px; }
  .foot-col[open] > .foot-byer { display: grid; } /* 2 kolonner når åpnet */
  .foot-ring { display: block; text-align: center; background: var(--primar); color: #fff; font-weight: 600; font-size: 16px; padding: 15px; border-radius: 8px; margin: 18px 0 14px; }
}

/* ---------- /borettslag/ redesign-komponenter ---------- */
/* Dette slipper styret */
.slipper-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;}
.slipper-kort{background:var(--flate);border:1px solid var(--kantlinje);border-radius:8px;padding:20px;}
.slipper-kort h3{font-size:17px;margin-bottom:6px;}
.slipper-kort p{font-size:15px;color:var(--dempet);line-height:1.6;}

/* Pakkekort */
.pakke-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;align-items:start;}
.pakke-kort{background:var(--bg);border:1px solid var(--kantlinje);border-radius:10px;padding:26px 24px;display:flex;flex-direction:column;gap:14px;}
.pakke-uthevet{border:2px solid var(--primar);box-shadow:0 8px 30px rgba(18,51,46,0.08);position:relative;}
.pakke-merke{position:absolute;top:-12px;left:24px;background:var(--primar);color:#fff;font-size:12px;font-weight:600;padding:4px 12px;border-radius:20px;letter-spacing:.03em;}
.pakke-kort h3{font-size:19px;}
.pakke-pris .pris{font-size:26px;}
.pakke-liste{display:flex;flex-direction:column;gap:8px;margin:4px 0 10px;}
.pakke-liste li{font-size:15px;color:var(--tekst);padding-left:22px;position:relative;line-height:1.5;}
.pakke-liste li::before{content:"✓";position:absolute;left:0;color:var(--primar);font-weight:700;}
.pakke-kort .btn{margin-top:auto;}

/* Kalkulator */
.kalk{background:var(--flate);border:1px solid var(--kantlinje);border-radius:10px;padding:24px;display:flex;flex-direction:column;gap:18px;}
.kalk-felt{display:flex;flex-direction:column;gap:8px;font-weight:600;font-size:15px;}
.kalk-felt input{font-size:18px;padding:12px 14px;border:1px solid var(--kantlinje);border-radius:6px;max-width:200px;font-family:inherit;}
.kalk-valg{border:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
.kalk-valg legend{font-weight:600;font-size:15px;margin-bottom:6px;padding:0;}
.kalk-valg label{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:400;cursor:pointer;}
.kalk-valg input{width:20px;height:20px;accent-color:var(--primar);}
.kalk-resultat{background:var(--bg);border:1px solid var(--kantlinje);border-radius:8px;padding:18px 20px;}
.kalk-label{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--dempet);margin-bottom:4px;}
.kalk-tall{font-size:26px;display:block;}
.kalk-note{font-size:14px;color:var(--dempet);margin-top:6px;}

/* Tilbudsskjema */
.tilbud-form{display:flex;flex-direction:column;gap:16px;}
.tilbud-form .felt-rad{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.tilbud-form .felt{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:15px;}
.tilbud-form input,.tilbud-form select,.tilbud-form textarea{font-size:16px;padding:12px 14px;border:1px solid var(--kantlinje);border-radius:6px;font-family:inherit;background:var(--bg);}
.tilbud-form button{margin-top:4px;}

/* Nedlastbare filer */
.nedlast-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
.nedlast-kort{display:flex;flex-direction:column;gap:5px;background:var(--bg);border:1px solid var(--kantlinje);border-radius:8px;padding:18px 20px;}
.nedlast-kort strong{color:var(--primar);font-size:16px;}
.nedlast-kort span{font-size:14px;color:var(--dempet);}
.nedlast-kort:hover{border-color:var(--primar);}

/* Referanser */
.ref-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;}
.ref-kort{background:var(--bg);border:1px solid var(--kantlinje);border-radius:8px;padding:18px 20px;display:flex;flex-direction:column;gap:4px;}
.ref-kort strong{font-size:16px;}
.ref-kort span{font-size:14px;color:var(--dempet);}

/* Byer */
.by-lenker{display:flex;flex-wrap:wrap;gap:12px;}
.by-lenker a{background:var(--bg);border:1px solid var(--kantlinje);border-radius:6px;padding:10px 16px;font-size:15px;color:var(--primar);}
.by-lenker a:hover{border-color:var(--primar);}

@media (max-width:620px){
  .tilbud-form .felt-rad{grid-template-columns:1fr;}
}

/* ---------- Forside (fase 3) ---------- */
.hero-eyebrow{font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--primar);font-weight:700;margin-bottom:14px;}
.hero-v2 h1{font-size:clamp(30px,5vw,46px);line-height:1.18;color:var(--tekst);}
.hero-v2 h1 span{color:var(--primar);}
.hero-v2 .lead{font-size:19px;color:var(--dempet);line-height:1.6;}
.portal-card.fremhevet{border:2px solid var(--primar);box-shadow:0 8px 30px rgba(18,51,46,0.07);}
.portal-card.fremhevet:hover{border-color:var(--primar);}
.portal-merke{position:absolute;top:-11px;left:22px;background:var(--primar);color:#fff;font-size:11.5px;font-weight:600;padding:3px 11px;border-radius:20px;letter-spacing:.03em;}
.kred{text-align:center;font-size:15px;color:var(--dempet);max-width:720px;margin:0 auto;line-height:1.6;}
.cta-final.centered .box{border:1px solid var(--kantlinje);}
.area-tags{gap:10px;}
.area-tags a{background:var(--flate);border:1px solid var(--kantlinje);border-radius:100px;padding:6px 14px;font-size:14px;color:var(--primar);}
.area-tags a:hover{border-color:var(--primar);text-decoration:none;}

/* ---------- a11y (fase 5): tekstlenker skal ikke skilles på farge alene ---------- */
main p a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Forside: bevislinje under hero-CTA ---------- */
.hero-bevis { margin-top: 20px; font-size: 13px; color: var(--dempet); letter-spacing: .01em; }
.hero-bevis .sjekk { color: var(--primar); font-weight: 700; }

/* ---------- Forside: 3-stegs-seksjon — fyll bredden, midtstilt ---------- */
/* .steps (4 kol) lastes etter .steps-3 i style.css og vant; her tvinger vi 3 like
   kolonner som fyller containeren, midtstiller innholdet og fjerner delstreken. */
.steps.steps-3 { grid-template-columns: repeat(3, 1fr); border-top: none; }
.steps.steps-3 .step { text-align: center; padding: 8px 24px; border-right: none; }
.steps.steps-3 .step .n { margin-bottom: 10px; }
@media (max-width: 900px) {
  .steps.steps-3 { grid-template-columns: 1fr; }
  .steps.steps-3 .step { padding: 14px 24px; }
}

/* ---------- Kortrutenett paa smale skjermer ---------- */
/* style.css setter .card-grid til to kolonner under 900px. Paa en telefon gir
   det ~170px brede kort, og overskrifter som «Instruksen skal gjelde ett
   bestemt anlegg» brekker over fire linjer. Under 560px er det bedre med én
   kolonne. .cols-4 maa staa med: den har hoeyere spesifisitet enn .card-grid
   aleine, og ville ellers beholdt to kolonner. */
@media (max-width: 560px) {
  .card-grid, .card-grid.cols-4 { grid-template-columns: 1fr; }
}