/* Generalprøven — bygget 2026-09-11
   Fargene og skriftene kommer fra kunde.toml. Ikke rediger denne fila:
   den skrives over ved neste bygging. */

:root{
  --blekk:#16303D;
  --dempet:#5A727E;
  --flate:#FFFFFF;
  --papir:#F1F5F7;
  --linje:#DCE5EA;
  --aksent:#1F6F8B;
  --aksentflate:#E3F0F5;
  --vis:"Bricolage Grotesque",-apple-system,sans-serif;
  --brod:"Public Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --bredde:1080px;
}

*{box-sizing:border-box}
/* ⚠️ scroll-padding-top MAA staa her saa lenge .topp er sticky. Uten den
   lander overskriften bak topplinja hver gang noen bruker menyen. */
html{scroll-behavior:smooth;scroll-padding-top:78px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--flate);
  color:var(--blekk);
  font:17px/1.65 var(--brod);
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto;display:block}

.inn{max-width:var(--bredde);margin:0 auto;padding:0 22px}

/* ⚠️ «smal» begrenser LESEBREDDEN, ikke spalten.
   Her sto det en gang max-width:660px paa selve .inn.smal. Da sentrerte de
   smale seksjonene seg selv mens de brede holdt seg til 1080-kolonnen, og de
   to delte ikke venstrekant: paa en 1400 px skjerm startet «Om gaarden» 210 px
   lenger inn enn heltteksten rett over. Det ser ut som en feil, og det er det.
   Naa er spalten den samme overalt, og bare innholdet kappes. */
.inn.smal{max-width:var(--bredde)}
.inn.smal > *{max-width:660px}
/* Handlingsfeltet er det ene som SKAL staa midt paa. */
.handling .inn.smal > *{margin-left:auto;margin-right:auto}

h1,h2{font-family:var(--vis);font-weight:600;letter-spacing:-.015em;
  text-wrap:balance;margin:0 0 14px}
h1{font-size:clamp(32px,6vw,52px);line-height:1.08}
h2{font-size:clamp(24px,3.6vw,34px);line-height:1.18}
p{margin:0 0 16px;max-width:62ch}
a{color:inherit}

/* ── topp ────────────────────────────────────────────────────────── */
.topp{position:sticky;top:0;z-index:20;background:var(--flate);
  border-bottom:1px solid var(--linje)}
.baand{max-width:var(--bredde);margin:0 auto;padding:12px 22px;
  display:flex;align-items:center;gap:20px}
.merke{font:600 19px var(--vis);text-decoration:none;letter-spacing:-.01em;
  white-space:nowrap}
.merke img{max-height:38px;width:auto}
.meny{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.meny a{font-size:15px;text-decoration:none;color:var(--dempet)}
.meny a:hover{color:var(--aksent)}
.topp .knapp{margin-left:auto}
.meny ~ .knapp{margin-left:0}
/* Paa telefon er menyen stoey. Nummeret er det folk skal ha. */
@media (max-width:720px){
  .meny{display:none}
  .topp .knapp{margin-left:auto}
}

/* ── knapper ─────────────────────────────────────────────────────── */
.knapp{
  display:inline-block;background:var(--aksent);color:var(--flate);
  font:600 15px var(--brod);text-decoration:none;
  padding:11px 20px;border-radius:9px;white-space:nowrap;
  /* 44 px er ikke pynt — det er en tommel paa en telefon. */
  min-height:44px;line-height:22px;
}
.knapp:hover{filter:brightness(1.08)}
.knapp.mild{background:transparent;color:var(--blekk);
  box-shadow:inset 0 0 0 1px var(--linje)}
.knapp.mild:hover{box-shadow:inset 0 0 0 1px var(--aksent);color:var(--aksent)}
.knapper{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px}

/* ── hero ────────────────────────────────────────────────────────── */
/* ⚠️ Ikke 100vh. Da skyves selve sida ut av det foerste bildet folk ser. */
.hero{padding:78px 0 66px;background:var(--papir)}
.hero .over{font:600 13px var(--brod);letter-spacing:.1em;text-transform:uppercase;
  color:var(--aksent);margin:0 0 12px}
.hero .ingress{font-size:19.5px;color:var(--dempet);max-width:56ch}
.hero.med-bilde{background-size:cover;background-position:center;
  color:#fff;padding:110px 0 96px}
.hero.med-bilde .ingress{color:rgba(255,255,255,.92)}
.hero.med-bilde .over{color:#fff}
.hero.med-bilde .knapp.mild{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}

/* ── blokker ─────────────────────────────────────────────────────── */
.blokk{padding:62px 0;border-top:1px solid var(--linje)}
/* ⚠️ «tonet» = --papir, ikke --flate. Klassen het en gang «flate» mens den
   satte papir-fargen, og da ble vekslingen satt i gang paa feil farge. */
.blokk.tonet{background:var(--papir);border-top:0}
.blokk .ingress{color:var(--dempet);margin-bottom:26px}
.fotnote{font-size:14.5px;color:var(--dempet);margin-top:22px}

/* ── rader: priser, tjenester ────────────────────────────────────── */
.rader{list-style:none;margin:0;padding:0;
  display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  column-gap:36px}
.rader li{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;padding:15px 0;border-bottom:1px solid var(--linje)}
.rader .navn{font-weight:600}
.rader .navn small{display:block;font-weight:400;font-size:14.5px;
  color:var(--dempet);margin-top:2px}
.rader .verdi{font-weight:600;color:var(--aksent);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* ── aapningstider ───────────────────────────────────────────────── */
.tider{list-style:none;margin:0;padding:0}
.tider li{display:flex;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--linje);
  font-variant-numeric:tabular-nums}
.tider li span:first-child{font-weight:600}
.tider li span:last-child{color:var(--dempet);white-space:nowrap}
/* Avvikende tider skal SES. Det er de folk kjoerer forgjeves paa. */
.avvikstittel{font:600 13px var(--brod);letter-spacing:.09em;
  text-transform:uppercase;color:var(--aksent);margin:26px 0 2px}
.tider.avvik li{border-bottom-style:dashed}

/* ── galleri ─────────────────────────────────────────────────────── */
.galleri{display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.galleri figure{margin:0}
.galleri img{border-radius:10px;aspect-ratio:4/3;object-fit:cover}
.galleri figcaption{font-size:14.5px;color:var(--dempet);margin-top:7px}

/* ── kontakt ─────────────────────────────────────────────────────── */
.kontakt{list-style:none;margin:0;padding:0}
.kontakt li{display:flex;gap:18px;padding:13px 0;
  border-bottom:1px solid var(--linje)}
.kontakt li span{min-width:92px;color:var(--dempet);font-size:15px}
.kontakt li a{color:var(--aksent)}

/* ── handling ────────────────────────────────────────────────────── */
.handling{padding:62px 0;background:var(--aksentflate);text-align:center}
.handling p{margin-left:auto;margin-right:auto;color:var(--dempet)}
.handling .knapper{justify-content:center}

/* ── bunn ────────────────────────────────────────────────────────── */
.bunn{padding:34px 0;border-top:1px solid var(--linje);
  font-size:15px;color:var(--dempet)}
.bunn .inn{display:flex;gap:22px;flex-wrap:wrap;
  justify-content:space-between;align-items:center}
.bunn strong{color:var(--blekk);font-family:var(--vis);font-size:17px}
.bunn .orgnr{font-size:13.5px;margin-top:3px}
.bunn .hoyre{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.bunn a{color:var(--dempet)}
.bunn .knapp{color:var(--flate)}

/* ── tastatur ────────────────────────────────────────────────────── */
a:focus-visible{outline:2px solid var(--aksent);outline-offset:3px;
  border-radius:4px}