/*
 * stil.css: felles stil for hele eiendomslos.no.
 *
 * Én fil for alle sider, slik at forsiden, forklaringene og oversikten
 * faktisk ser like ut. Før hadde forsiden sin egen stil og undersidene en
 * annen, og brukeren merket skiftet i det de klikket seg videre.
 *
 * Filnavnet får versjonsnummer i lenken (stil.css?v=N). .htaccess lar
 * nettleseren beholde CSS i 30 dager, så uten nytt nummer ser de som har
 * vært innom før, den gamle stilen i en måned.
 *
 * Designprinsipper, så de ikke forvitrer:
 *  - Linjer og tabeller, ikke kort med skygge.
 *  - Farge betyr noe. Bare «bør undersøkes» har signalfarge.
 *  - Høy kontrast. Brødtekst er nesten svart.
 *  - Systemskrift. Ingen dekorativ serif.
 */

  :root {
    --blekk: #14202b; --blekk-2: #3b4855; --blekk-3: #5f6b76;
    --linje: #d9dee3; --linje-lys: #eef1f3;
    --papir: #ffffff; --lerret: #f3f5f7;
    --merke: #0f3d5c; --merke-h: #0a2c43; --merke-lys: #e8eff4;
    --signal: #b0501a; --signal-bg: #fbf1ea;
    --ok: #2d6a4c;
    --maks: 1180px;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Aliaser for eldre kode som fortsatt leser disse navnene. */
    --ink: var(--blekk); --dim: var(--blekk-3); --line: var(--linje);
    --flate: var(--papir); --accent: var(--merke); --accent-light: var(--merke-lys);
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; background: var(--papir); color: var(--blekk); font: 16.5px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
  a { color: var(--merke); text-underline-offset: 2px; }
  a:hover { color: var(--merke-h); }
  button { font: inherit; }
  .tall { font-variant-numeric: tabular-nums; }
  .wrap { max-width: var(--maks); margin: 0 auto; padding: 0 24px; }
  .skjult { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* Topp */
  .topp { background: var(--papir); border-top: 4px solid var(--merke); border-bottom: 1px solid var(--linje); }
  .topp .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 62px; }
  .ordmerke { font-weight: 700; font-size: 19px; letter-spacing: -.01em; color: var(--blekk); text-decoration: none; white-space: nowrap; }
  .ordmerke span { color: var(--merke); }
  .topp nav { display: flex; gap: 26px; }
  .topp nav a { color: var(--blekk-2); text-decoration: none; font-size: 15px; font-weight: 500; }
  .topp nav a:hover { color: var(--blekk); text-decoration: underline; }

  /* Samme tre valg på alle sider. Siden du står på er markert. */
  .topp nav { align-items: center; }
  .topp nav a[aria-current="page"] { color: var(--blekk); font-weight: 650; }
  .topp nav .nav-knapp { background: var(--merke); color: #fff; padding: 7px 13px; border-radius: 3px; font-weight: 600; white-space: nowrap; }
  .topp nav .nav-knapp:hover { background: var(--merke-h); color: #fff; text-decoration: none; }

  /* Statusmarkører. Firkanter, ikke piller. */
  .m { display: inline-block; width: 10px; height: 10px; flex: none; }
  .m-bor { background: var(--signal); }
  .m-vite { border: 2px solid var(--blekk-2); }
  .m-ukj { border: 2px dashed var(--blekk-3); }
  .m-ok { background: var(--ok); }
  .st { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; white-space: nowrap; }
  .st-bor { color: var(--signal); }
  .st-vite { color: var(--blekk); }
  .st-ok { color: var(--blekk-2); font-weight: 500; }

  /* Kildestripe */
  .kilder-stripe { background: var(--lerret); border-bottom: 1px solid var(--linje); }
  .kilder-stripe .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; padding-top: 17px; padding-bottom: 17px; font-size: 14.5px; }
  .kilder-stripe .lbl { color: var(--blekk-3); margin-right: 18px; }
  .kilder-stripe .etat { font-weight: 600; padding: 0 15px; border-left: 1px solid var(--linje); }
  .kilder-stripe .etat:first-of-type { border-left: 0; padding-left: 0; }

  /* Seksjoner på forsiden */
  .seksjon { padding: 56px 0; border-bottom: 1px solid var(--linje); }
  .seksjon h2 { font-size: 26px; letter-spacing: -.015em; margin: 0 0 8px; }
  .seksjon .under { color: var(--blekk-2); margin: 0 0 26px; max-width: 42em; }
  .tabell { width: 100%; border-collapse: collapse; font-size: 15.5px; }
  .tabell th { text-align: left; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--blekk-3); padding: 0 16px 10px 0; border-bottom: 2px solid var(--blekk); }
  .tabell td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--linje); vertical-align: top; }
  .tabell td:first-child { font-weight: 600; white-space: nowrap; width: 150px; }

  .lenkeliste { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--linje); }
  .lenkeliste li { border-bottom: 1px solid var(--linje); }
  .lenkeliste a { display: block; padding: 15px 0; text-decoration: none; }
  .lenkeliste a strong { display: block; color: var(--blekk); font-weight: 600; }
  .lenkeliste a span { display: block; color: var(--blekk-2); font-size: 15px; }
  .lenkeliste a:hover strong { text-decoration: underline; color: var(--merke); }
  .flere { margin: 20px 0 0; font-size: 15.5px; }

  .faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; border-top: 1px solid var(--linje); }
  .faq details { border-bottom: 1px solid var(--linje); }
  .faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 16px 0; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--merke); flex: none; }
  .faq details[open] summary::after { content: "−"; }
  .faq summary:focus-visible { outline: 2px solid var(--merke); outline-offset: 2px; }
  .faq h3 { font-size: 17px; margin: 0; }
  .faq p { color: var(--blekk-2); font-size: 15.5px; margin: 0 0 18px; }

  .bunn { padding: 32px 0 48px; font-size: 14px; color: var(--blekk-3); }
  .bunn .wrap { display: flex; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
  .bunn a { color: var(--blekk-2); }
  .bunn p { margin: 0; }

  /* ================= Undersider ================= */
  /* Sidehodet speiler forsidens hero: stikkord, stor overskrift, ingress. */
  .side-hode { background: var(--papir); border-bottom: 1px solid var(--linje); padding: 34px 0 32px; }
  .sti { font-size: 14px; color: var(--blekk-3); margin: 0 0 16px; }
  .sti a { color: var(--blekk-3); }
  .stikk { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--merke); margin: 0 0 12px; }
  .side-hode h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.12; letter-spacing: -.02em; font-weight: 700; margin: 0 0 14px; max-width: 24em; }
  .side-hode .ingress { font-size: 18.5px; color: var(--blekk-2); margin: 0; max-width: 40em; }
  .side-hode .dato { font-size: 15px; color: var(--blekk-3); margin: 0; }

  /* Innhold til venstre, sjekk og les videre til høyre. Som forsiden. */
  .side-kropp { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; padding-top: 36px; padding-bottom: 64px; }
  .side-kropp.enkel { grid-template-columns: minmax(0, 1fr); }
  .prosa { max-width: 720px; min-width: 0; }
  .prosa > :first-child { margin-top: 0; }
  .prosa h2 { font-size: 22px; font-weight: 700; letter-spacing: -.012em; margin: 42px 0 10px; }
  .prosa h3 { font-size: 17px; margin: 26px 0 6px; }
  .prosa p, .prosa li { font-size: 17px; color: #26323d; }
  .prosa p { margin: 0 0 16px; }
  .prosa ul, .prosa ol { padding-left: 1.25em; margin: 0 0 16px; }
  .prosa li { margin-bottom: 8px; }
  .prosa strong { font-weight: 600; color: var(--blekk); }
  .prosa table { border-collapse: collapse; width: 100%; margin: 0 0 20px; font-size: 15.5px; }
  .prosa th { text-align: left; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--blekk-3); padding: 0 12px 10px 0; border-bottom: 2px solid var(--blekk); vertical-align: bottom; }
  .prosa td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--linje); vertical-align: top; }

  .ramme { background: var(--merke-lys); border-left: 3px solid var(--merke); padding: 16px 18px; margin: 0 0 20px; }
  .ramme p:last-child { margin-bottom: 0; }
  .merk { background: var(--signal-bg); border-left: 3px solid var(--signal); padding: 16px 18px; margin: 0 0 20px; font-size: 16px; color: #4a2a12; }
  .merk p { color: #4a2a12; }

  figure { margin: 26px 0 30px; }
  figure svg { display: block; width: 100%; height: auto; border: 1px solid var(--linje); background: #fff; }
  figcaption { font-size: 14.5px; color: var(--blekk-3); margin-top: 10px; }
  .fig-tekst { font-family: var(--sans); }

  .kilder { font-size: 14.5px; color: var(--blekk-3); border-top: 1px solid var(--linje); padding-top: 20px; margin-top: 46px; }
  .kilder a { color: var(--blekk-3); }

  /* Lenkelisten på oversiktssiden står inne i tekstspalten. Der skal den
     ikke arve innrykk og luft fra brødtekstens lister, og to smale
     kolonner blir for trangt. */
  .prosa .lenkeliste { grid-template-columns: 1fr; padding: 0; }
  .prosa .lenkeliste li { margin: 0; font-size: inherit; }
  .prosa .lenkeliste a strong { font-size: 17px; }

  /* Høyrekolonnen følger med når man blar. */
  .sidekolonne { position: sticky; top: 24px; display: grid; gap: 26px; }
  .sjekk { display: block; border: 1px solid var(--linje); border-top: 4px solid var(--blekk); background: var(--papir); color: var(--blekk); text-decoration: none; padding: 18px 20px 20px; }
  .sjekk strong { display: block; font-size: 18px; font-weight: 700; margin-bottom: 6px; color: var(--blekk); }
  .sjekk span { display: block; font-size: 15px; line-height: 1.5; color: var(--blekk-2); margin-bottom: 16px; }
  .sjekk::after { content: "Sjekk eiendommen"; display: block; text-align: center; background: var(--merke); color: #fff; font-weight: 600; font-size: 15.5px; padding: 11px 14px; border-radius: 3px; }
  .sjekk:hover { color: var(--blekk); border-color: var(--blekk-3); }
  .sjekk:hover::after { background: var(--merke-h); }
  .videre h2, .innhold h2 { font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--blekk-3); margin: 0 0 8px; }
  .videre ul, .innhold ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linje); }
  .videre li, .innhold li { border-bottom: 1px solid var(--linje); margin: 0; }
  .videre a, .innhold a { display: block; padding: 10px 0; font-size: 15px; line-height: 1.4; text-decoration: none; color: var(--blekk); }
  .videre a:hover, .innhold a:hover { color: var(--merke); text-decoration: underline; }

  /* Oversikten over hva vi sjekker: rader som i tabellen på forsiden. */
  .bolk { margin: 0 0 44px; scroll-margin-top: 20px; }
  .bolk h2 { margin-top: 0; }
  .bolk .under { color: var(--blekk-2); margin: 0 0 14px; }
  .sjekkliste { border-top: 2px solid var(--blekk); }
  .punkt { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 2px 24px; padding: 16px 0; border-bottom: 1px solid var(--linje); }
  .punkt h3 { grid-row: 1 / span 3; margin: 0; font-size: 16.5px; font-weight: 650; }
  .punkt p { grid-column: 2; margin: 0 0 6px; font-size: 16px; }
  .punkt .meta { font-size: 14px; color: var(--blekk-3); margin: 0; }
  .punkt .meta strong { color: var(--blekk-2); }

  /* ================= Små skjermer ================= */
  @media (max-width: 900px) {
    .topp nav { gap: 16px; }
    .topp nav a { font-size: 14px; }
    .lenkeliste, .faq { grid-template-columns: 1fr; }
    .side-kropp { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .sidekolonne { position: static; }
  }
  @media (max-width: 600px) {
    .wrap { padding: 0 16px; }
    /* .wrap over nullstiller topp- og bunnmarg. Innholdet skal ikke
       starte rett under linjen i sidehodet. */
    .side-kropp { padding-top: 28px; padding-bottom: 48px; }
    body { font-size: 16px; }
    .ordmerke { font-size: 17px; }
    .topp .wrap { gap: 10px; }
    .topp nav { gap: 12px; }
    .topp nav .nav-hva, .topp nav .nav-om, .topp nav .nav-lang { display: none; }
    .topp nav .nav-knapp { padding: 7px 11px; }
    .tabell td:first-child { width: auto; white-space: normal; }
    .kilder-stripe .etat, .kilder-stripe .etat:first-of-type { border-left: 0; padding: 0 14px 0 0; }
    .kilder-stripe .lbl { width: 100%; }
    .side-hode { padding: 24px 0 24px; }
    .prosa p, .prosa li { font-size: 16.5px; }
    .prosa table, .prosa tbody, .prosa tr, .prosa td, .prosa th { display: block; }
    .prosa thead { display: none; }
    .prosa td { border: 0; padding: 2px 0; }
    .prosa tr { border-bottom: 1px solid var(--linje); padding: 12px 0; }
    .prosa td:first-child { font-weight: 600; color: var(--blekk); }
    .punkt { grid-template-columns: 1fr; }
    .punkt h3 { grid-row: auto; margin-bottom: 4px; }
    .punkt p { grid-column: 1; }
  }
  @media print {
    .topp, .bunn, .sidekolonne { display: none !important; }
    .side-kropp { display: block; padding: 0; }
    .side-hode { border: 0; padding: 0 0 12px; }
    a { color: inherit; }
  }