/* Tillegg for eksempelet på framblikk.no/eksempel/. Lastes etter stil.css fra salgssiden.
   Kopieres til nettside/eksempel/ av skript/lag-eksempel.mjs. Endre her, ikke i nettside/eksempel/. */

/* ---------- skrifter fra framblikk (../skrift/) ----------
   Salgssiden henter Fraunces og Inter fra Google Fonts. Inter finnes i framblikk. Fraunces gjør ikke det,
   så overskriftene bruker framblikk sin Nunito. */
@font-face { font-family: "Inter"; src: url("../skrift/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../skrift/nunito-latin-wght-normal.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
:root {
  --serif: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --banner-h: 2.25rem;
}
@media (max-width: 640px) { :root { --banner-h: 3.4rem; } }

/* ---------- banner øverst ----------
   Banneret står først på siden og ruller bort. Topplinjen er klebrig i stedet for fast, så den ligger
   under banneret ved start og fester seg øverst når man blar. Startbildet trekkes opp under topplinjen
   som på salgssiden. */
.eksempel-banner {
  position: relative; z-index: 60; margin: 0; padding: .5rem var(--kant); min-height: var(--banner-h);
  background: var(--bg-2); color: var(--dempet); border-bottom: 1px solid var(--linje);
  font-size: .82rem; line-height: 1.5; text-align: center; text-wrap: balance;
}
.eksempel-banner strong { color: var(--fg); font-weight: 600; }
.eksempel-banner a { color: var(--aksent); font-weight: 600; white-space: nowrap; margin-left: .3rem; }
@media (max-width: 640px) { .eksempel-banner { font-size: .78rem; padding-block: .45rem; } }
.topp { position: sticky; top: 0; }
.helt { margin-top: calc(-1 * var(--topp-h)); min-height: calc(100svh - var(--banner-h)); }

/* ---------- kontaktinfo og prospekt er tatt ut ---------- */
.kontakt.kontakt-eksempel { border-style: dashed; }
.kontakt-plassholder { margin: 0; font-size: 1.1rem; color: var(--dempet); }
.knapp.knapp-plassholder { border-style: dashed; color: var(--dempet); font-weight: 500; cursor: default; }
.knapp.knapp-plassholder:hover { transform: none; }

/* ---------- prinsippskissen: fargene som salgssiden satte med style-attributter ---------- */
#snitt-svg .tre .stamme { fill: var(--jord-mork); }
#snitt-svg .stein-bunn { fill: var(--fyll); }
#snitt-svg .fylt { opacity: 0; }

/* ---------- kartet: fast kartbilde i stedet for kartfliser ----------
   Rammen har kartbildets form omtrent, så hele området med rutene får plass. Den strekkes ikke til høyden av lista,
   for da måtte bildet beskjæres på sidene. */
.kart-oppsett .kart-ramme { align-self: start; }
#kart.kart {
  position: relative; overflow: hidden; height: auto; min-height: 0; aspect-ratio: 3 / 2;
  background: #eeedea; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
@media (max-width: 760px) { #kart.kart { height: auto; min-height: 0; aspect-ratio: 4 / 3; } }
.kart-statisk .kart-bilde {
  position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none;
}
:root[data-theme="dark"] #kart.kart { background: #1c2226; }
:root[data-theme="dark"] .kart-statisk .kart-bilde { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.5); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #kart.kart { background: #1c2226; }
  :root:not([data-theme="light"]) .kart-statisk .kart-bilde { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.5); }
}
/* Rutene står i kartkoordinater. --k er kartenheter per skjermpiksel, så strekene holder samme tykkelse når man zoomer. */
.kart-statisk .kart-lag { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; --k: 1; }
.kart-statisk .kart-lag path, .kart-statisk .kart-lag polygon { stroke-linecap: round; stroke-linejoin: round; }
.kart-statisk .tomt-flate { stroke-width: calc(2.5px * var(--k)); pointer-events: none; }
.kart-statisk .gangrute-halo { fill: none; stroke: #fff; stroke-opacity: .85; stroke-width: calc(8px * var(--k)); pointer-events: none; }
.kart-statisk .gangrute { fill: none; stroke-width: calc(4px * var(--k)); }
.kart-statisk .gangrute.aktiv { stroke-width: calc(6px * var(--k)); }
.kart-statisk .gangrute-prikker {
  fill: none; pointer-events: none; stroke-width: calc(3px * var(--k));
  stroke-dasharray: calc(.1px * var(--k)) calc(12px * var(--k)); animation: kart-marsj .9s linear infinite;
}
@keyframes kart-marsj { to { stroke-dashoffset: calc(-12.1px * var(--k)); } }
.kart-statisk .kart-merker { position: absolute; inset: 0; pointer-events: none; }
.kart-statisk .kart-merker > * { position: absolute; left: 0; top: 0; }
.kart-statisk .kart-sted { width: 30px; height: 30px; margin: -15px 0 0 -15px; pointer-events: auto; cursor: pointer; }
.kart-statisk .kart-sted.valgt { z-index: 2; }
.kart-statisk .tomt-merke { width: 18px; height: 18px; margin: -9px 0 0 -9px; z-index: 3; }
.kart-statisk .gaaer { width: 14px; height: 14px; margin: -7px 0 0 -7px; z-index: 4; }
.kart-statisk .kart-kilde {
  position: absolute; right: 0; bottom: 0; margin: 0; padding: 2px 7px; border-top-left-radius: 6px;
  background: rgba(255, 255, 255, .82); color: #333; font-size: 11px; line-height: 1.4;
}
.kart-statisk .kart-kilde a { color: #1f5f86; }
@media (prefers-reduced-motion: reduce) { .kart-statisk .gangrute-prikker { animation: none; } }

@media print {
  .eksempel-banner { border: 0; }
  .helt { margin-top: 0; }
}