:root {
  --bg: #f7f4ee; --tekst: #2a2520; --demp: #7a7065;
  --primar: #5a3e2b; --aksent: #8b6f47; --kort: #fffdf9;
  --kant: #e3dccf; --mark: #f5e6b8;
}
* { box-sizing: border-box; }
:root { --botnnav: 0px; }   /* rest frå botn-navigasjonen; hamburgermenyen tek ikkje plass */
body { margin: 0; font: 16px/1.6 Georgia, 'Times New Roman', serif; background: var(--bg); color: var(--tekst);
  overflow-wrap: break-word; }   /* lange e-postar, URL-ar og matrikkelnummer sprengjer ikkje smale skjermar */
main { max-width: 960px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
a { color: var(--primar); }

.topp { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem;
  padding: .8rem 1.2rem; background: var(--primar); color: #fff;
  /* PWA på iOS: statuslinja ligg OVER innhaldet (black-translucent) */
  padding-top: calc(.8rem + env(safe-area-inset-top)); }
.topp a { color: #fff; text-decoration: none; margin-right: .9rem; }
.topp a:hover { text-decoration: underline; }
.logo { font-size: 1.25rem; font-weight: bold; letter-spacing: .02em; }
.logo span { opacity: .65; font-weight: normal; }
.brukar { opacity: .75; margin-right: .9rem; font-size: .9rem; }
/* Hamburgerknapp — skjult på skjerm breiare enn 700 px */
.menyknapp { display: none; background: transparent; color: #fff; cursor: pointer;
  border: 1px solid rgba(255,255,255,.35); border-radius: 6px;
  padding: .3rem .65rem; font-size: 1.2rem; line-height: 1; }
.menyknapp:hover { background: rgba(255,255,255,.14); }
footer { text-align: center; color: var(--demp); font-size: .85rem; padding: 1.5rem; }

h1 { font-size: 1.7rem; margin: 1rem 0; }
.kort { background: var(--kort); border: 1px solid var(--kant); border-radius: 8px; padding: 1.2rem 1.5rem; margin: 1rem 0; }
.kort.smal { max-width: 420px; margin: 3rem auto; }
label { display: block; margin: .7rem 0; }
input, select, button, textarea { font: inherit; padding: .45rem .6rem; border: 1px solid var(--kant); border-radius: 5px; background: #fff; }
/* Ingen skjemafelt får vere breiare enn plassen sin — gjeld òg felt med fast rem-breidd */
input, select, textarea { max-width: 100%; }
pre { max-width: 100%; overflow-x: auto; }
input[type=email], input[type=password], input[type=text], input[type=search] { width: 100%; }
button { background: var(--primar); color: #fff; border: none; cursor: pointer; padding: .5rem 1.1rem; }
button:hover { background: var(--aksent); }
button.lita { padding: .2rem .6rem; font-size: .82rem; }
button.fare { background: #8c2f2f; }
button.fare:hover { background: #a33; }
button:disabled { opacity: .4; cursor: default; }
.feil { color: #a33; } .melding { background: var(--mark); padding: .6rem .9rem; border-radius: 6px; }
.hint, .tal { color: var(--demp); font-size: .9rem; }

.filterrad { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.2rem; }
.bokliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1rem; }
.bokkort { display: block; background: var(--kort); border: 1px solid var(--kant); border-radius: 8px;
  padding: 1rem 1.2rem; text-decoration: none; color: inherit; transition: box-shadow .15s; }
.bokkort:hover { box-shadow: 0 3px 12px rgba(90,62,43,.15); }
.bokkort h2 { font-size: 1.05rem; margin: 0 0 .3rem; color: var(--primar); }
.bokkort .meta { margin: 0; color: var(--demp); font-size: .88rem; }
.bokkort .type { margin: .2rem 0; font-size: .82rem; font-style: italic; color: var(--aksent); }
.tags span { display: inline-block; background: var(--bg); border: 1px solid var(--kant);
  border-radius: 10px; padding: 0 .5rem; margin: .15rem .2rem 0 0; font-size: .74rem; color: var(--demp); }

.lesing .bokhovud { border-bottom: 2px solid var(--kant); margin-bottom: 1.5rem; }
.boktekst { max-width: 720px; }
.boktekst h1, .boktekst h2, .boktekst h3 { color: var(--primar); margin-top: 2rem; }
.boktekst blockquote { border-left: 3px solid var(--aksent); margin: 1rem 0; padding: .2rem 1rem; color: #4a4038; background: var(--kort); }
.boktekst img { max-width: 100%; height: auto; }
.boktekst table { border-collapse: collapse; margin: 1rem 0; font-size: .92rem; }
.boktekst td { border: 1px solid var(--kant); padding: .25rem .6rem; }
.side { float: right; clear: right; font: .72rem/1.4 sans-serif; color: #fff; background: var(--aksent);
  border-radius: 4px; padding: 0 .45rem; margin: .1rem 0 .3rem .8rem; scroll-margin-top: 4rem; }
.side:target { background: #c0392b; }
.brodsmule { font-size: .9rem; }

.sokform { margin-bottom: 1.4rem; }
.sokform input[type=search] { width: min(560px, 100%); }
.sokform details { margin-top: .6rem; }
.filterboks { background: var(--kort); border: 1px solid var(--kant); border-radius: 6px; padding: .8rem 1rem; }
.bokval { columns: 2; margin-top: .6rem; }
.bokval label { margin: .15rem 0; font-size: .9rem; }
.treff { background: var(--kort); border: 1px solid var(--kant); border-radius: 6px; padding: .7rem 1rem; margin: .6rem 0; }
.treffkjelde { margin: 0 0 .3rem; font-size: .92rem; }
.utdrag { margin: 0; color: #4a4038; }
mark { background: var(--mark); padding: 0 .1em; }

.admtabell { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admtabell th { text-align: left; border-bottom: 2px solid var(--kant); padding: .35rem .5rem; }
.admtabell td { border-bottom: 1px solid var(--kant); padding: .3rem .5rem; vertical-align: middle; }
.admtabell tr.inaktiv td { opacity: .45; }
.inlineform { display: inline; }

/* Brukarkort (admin) */
.brukarliste { display: flex; flex-direction: column; }
.brukarkort { padding: 1rem 0; border-bottom: 1px solid var(--kant); display: flex; flex-direction: column; gap: .6rem; }
.brukarkort:last-child { border-bottom: none; }
.brukarkort.inaktiv { opacity: .55; }
.bk-id { display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; }
.bk-id strong { font-size: 1.02rem; }
.merke { font-size: .72rem; font-family: sans-serif; padding: .1rem .55rem; border-radius: 10px; color: #fff; }
.merke.ok { background: #4a7c46; }
.merke.av { background: #8c2f2f; }
.bk-kontrollar { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: flex-end; }
.bk-kontrollar label { margin: 0; font-size: .8rem; color: var(--demp); display: flex; flex-direction: column; gap: .2rem; }
.feltgruppe { display: flex; gap: .35rem; align-items: center; }
.feltgruppe input { width: auto; }
.bk-kontrollar input[type=number] { width: 5.5rem; }
.bk-kontrollar input[type=email] { width: 15rem; }
.bk-kontrollar input[type=text] { width: 9rem; }
.bk-kontrollar input[type=password] { width: 11rem; }
.bk-handlingar { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }
.bk-handlingar form { display: inline-flex; margin: 0; }
.bk-handlingar .lita { padding: .35rem .75rem; }
.nybrukar { display: flex; gap: .6rem; flex-wrap: wrap; }
.nybrukar input, .nybrukar select { width: auto; }
.settpass { display: flex; gap: .3rem; margin-top: .3rem; }
.settpass input[type=password] { width: 11rem; font-size: .82rem; padding: .2rem .4rem; }
code { background: var(--bg); padding: .1em .4em; border-radius: 4px; font-size: .92em; }

.faner { display: flex; gap: .4rem; margin: 1rem 0 0; border-bottom: 2px solid var(--kant); flex-wrap: wrap; }
.faner button { background: var(--bg); color: var(--tekst); border: 1px solid var(--kant); border-bottom: none;
  border-radius: 8px 8px 0 0; padding: .45rem 1.1rem; }
.faner button.aktiv { background: var(--primar); color: #fff; }
.fane { border-top-left-radius: 0; }

.kiform textarea { width: 100%; }
.kival { display: flex; gap: 1rem; flex-wrap: wrap; align-items: end; margin: .7rem 0; }
.kival label { margin: 0; font-size: .9rem; }
.kisvar .svartekst { max-width: 720px; }
.kisvar .svartekst h1, .kisvar .svartekst h2 { font-size: 1.2rem; }

/* ---------- Responsivt (mobil ≤ 700 px) ---------- */
@media (max-width: 700px) {
  /* Ingen botn-navigasjon lenger — hamburgermenyen tok over. Variabelen står att
     på 0 fordi lydopptak, bildearkiv og plasspanel reknar med henne. */
  :root { --botnnav: 0px; }
  body { font-size: 15px; }
  main { padding: 1rem .8rem calc(1.6rem + env(safe-area-inset-bottom)); }
  h1 { font-size: 1.35rem; margin: .6rem 0; }

  /* Topplinje: logo til venstre, hamburgerknapp til høgre. */
  .topp { padding: .6rem .9rem; padding-top: calc(.6rem + env(safe-area-inset-top));
    position: sticky; top: 0; z-index: 1700; flex-wrap: nowrap; }
  .menyknapp { display: block; flex: none; }

  /* Hovudmenyen: fell ned under topplinja når .topp har klassen «open» */
  .topp nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: var(--primar); box-shadow: 0 6px 14px rgba(0,0,0,.32);
    padding: 0 0 max(.4rem, env(safe-area-inset-bottom));
    max-height: 78dvh; overflow-y: auto;
  }
  .topp.open nav { display: flex; }
  .topp nav a {
    position: static !important; margin: 0 !important;
    padding: .8rem 1.1rem; font-size: .98rem; text-decoration: none;
    border-top: 1px solid rgba(255,255,255,.14);
  }
  .topp nav a:active { background: var(--aksent); }
  /* Brukarnamnet får plass i menyen — som ei diskré overskrift */
  .brukar { display: block; order: -1; margin: 0 !important;
    padding: .55rem 1.1rem; font-size: .78rem; opacity: .6; }

  /* Skjema og panel */
  .kival { flex-direction: column; align-items: stretch; gap: .5rem; }
  .kival label { display: flex; flex-direction: column; }
  .kival select, .kival input { width: 100%; }
  .filterrad select { flex: 1 1 40%; }
  .sokform input[type=search] { width: 100%; }
  .nybrukar { flex-direction: column; }
  .nybrukar input, .nybrukar select, .nybrukar button { width: 100%; }
  .bokval { columns: 1; }
  button { padding: .6rem 1.1rem; }  /* større trykkflater */

  /* Tabellar: rull sidelengs i staden for å sprengje skjermen */
  .kort { overflow-x: auto; padding: .9rem 1rem; }
  .admtabell { font-size: .78rem; min-width: 560px; }
  .faner { overflow-x: auto; flex-wrap: nowrap; }
  .faner button { white-space: nowrap; padding: .45rem .8rem; }

  /* Brukarkort: stable kontrollane i full breidd */
  .bk-kontrollar { flex-direction: column; align-items: stretch; gap: .7rem; }
  .bk-kontrollar label, .feltgruppe { width: 100%; }
  .feltgruppe { flex-wrap: wrap; }
  .bk-kontrollar input[type=email], .bk-kontrollar input[type=text],
  .bk-kontrollar input[type=password] { flex: 1 1 10rem; width: auto; }
  .bk-handlingar .lita { flex: 1 1 40%; }

  /* Boklesing */
  .boktekst { font-size: 1rem; }
  /* Breie tabellar i boktekst: rull sidelengs i staden for å sprengje sida */
  .boktekst table { display: block; width: max-content; max-width: 100%; overflow-x: auto; }
  .bokbilete figure { width: calc(50% - .28rem); }   /* alltid to per rad */
  .side { font-size: .62rem; }
  .kort.smal { margin: 1.5rem auto; }
}

/* ---------- Kartpanel (hamburger) ---------- */
.panelknapp { font-size: 1.15rem; padding: .2rem .65rem; line-height: 1.4; }
.kartomrade { position: relative; }
.kartpanel {
  position: absolute; top: 52px; left: 10px; z-index: 1099;
  width: min(300px, 82vw); max-height: calc(100% - 20px); overflow-y: auto;
  background: var(--kort); border: 1px solid var(--kant); border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,.25); padding: .9rem 1.1rem 1.1rem;
  transform: translateX(calc(-100% - 20px)); transition: transform .25s ease;
}
.kartpanel.open { transform: none; }
.kartpanel h3 { margin: .9rem 0 .35rem; font-size: .95rem; color: var(--primar); }
.kartpanel h3:first-child { margin-top: 0; }
.kartpanel label { display: flex; gap: .4rem; align-items: center; margin: .3rem 0; font-size: .9rem; }
.kartpanel select { width: 100%; }
.kartpanel .lagrad { display: flex; gap: .4rem; flex-wrap: wrap; }
.kartpanel .lagrad button { padding: .3rem .8rem; font-size: .85rem; }
.kartpanel .lagrad button.aktiv { background: var(--aksent); }
.kartpanel .heilbreidd { width: 100%; margin-top: .3rem; }

/* Fullskjerm for kart */
.fsknapp { position: absolute; top: 10px; z-index: 1100; padding: .25rem .6rem; font-size: 1.05rem; }
.kartomrade .panelknapp { position: absolute; top: 10px; left: 10px; z-index: 1100; }
.kartomrade.fullskjerm { position: fixed; inset: 0; z-index: 3000; background: #000; }
.kartomrade.fullskjerm #kart { height: 100dvh !important; width: 100% !important; }

/* ---------- Utskrift / lagre som PDF ---------- */
.skrivut { margin-left: .6rem; }
.utskrift-referanse, .utskrift-tittel { display: none; }

@media print {
  .topp, footer, .sokform, .kiform, .filterrad, .faner, .skrivut, .brodsmule,
  button, #teljar, .tal a, nav { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; line-height: 1.45; }
  main { max-width: none; padding: 0; }
  .kort, .treff { border: none; box-shadow: none; padding: 0; background: #fff; }
  h1, h2, h3 { font-size: 16pt; font-weight: bold; color: #000; }
  .svartekst, .utdrag, .treff p.utdrag { font-size: 12pt; }
  .svartekst h1, .svartekst h2, .svartekst h3 { font-size: 16pt; }
  .treffkjelde, .kisvar .hint, .utskrift-referanse { font-size: 6pt; color: #000; }
  .treffkjelde a, .kisvar .hint a { color: #000; text-decoration: none; }
  mark { background: none; font-weight: bold; }
  .kisvar hr { border: none; border-top: .5pt solid #000; }
  .utskrift-referanse { display: block; margin-top: 12pt; border-top: .5pt solid #000; padding-top: 3pt; }
  .utskrift-tittel { display: block; font-size: 16pt; font-weight: bold; margin: 0 0 8pt; }
}


/* ═══ Media: fanene (delt av fotoalbum / bildearkiv / lydopptak) ═══ */
.mediafaner { display: flex; gap: .4rem; margin: .3rem 0 .8rem; }
.mediafaner a button { font-size: .95rem; padding: .35rem 1.1rem; }
.mediafaner a.aktivfane button { background: #f5b32e; border-color: #9a6a10; }

/* Nettbrett (701–1024 px) */
@media (min-width: 701px) and (max-width: 1024px) {
  main { padding: 1.2rem 1.1rem 3rem; }
  .mediafaner a button { padding: .35rem .85rem; font-size: .9rem; }
}

/* Mobil (≤ 700 px) */
@media (max-width: 700px) {
  /* Fanene: rull sidelengs i staden for å brekke linja */
  .mediafaner {
    overflow-x: auto; flex-wrap: nowrap; gap: .3rem;
    margin: .2rem -.8rem .7rem; padding: 0 .8rem .2rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .mediafaner::-webkit-scrollbar { display: none; }
  .mediafaner a { flex: 0 0 auto; }
  .mediafaner a button { white-space: nowrap; padding: .5rem .85rem; font-size: .88rem; }
}