/* cebu.no - stilark
   Sjoegroent + solnedgangskorall paa sand. Samme malfamilie som
   tyrkiaguiden.com, tilpasset et bildetungt tropisk reisenettsted
   med tre menynivaaer. */

:root {
  --blaa: #0e5b62;
  --blaa-mork: #08403f;
  --blaa-lys: #e4f2f1;
  --terra: #e06a3f;
  --terra-lys: #fdeee7;
  --blekk: #17242a;
  --damp: #5c7178;
  --flate: #f4f9f8;
  --kant: #d9e6e5;
  --hvit: #fff;
  --radius: 10px;
  --bredde: 1180px;
  /* Tekstspaltens bredde, definert ett sted. I rem, ikke ch/em: ch er
     font-avhengig, og i brodsmulene (0.87rem) ble 74ch til 555 px mot
     678 px i broedteksten. 42.38rem = 74ch og 48.88rem = 46em maalt i
     broedtekstens fontkontekst (rot 16px, kropp 17px). */
  --tekstbredde: 42.38rem;
  --innledningsbredde: 48.88rem;
  --skygge: 0 1px 2px rgba(8, 64, 63, .06), 0 4px 14px rgba(8, 64, 63, .05);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--blekk);
  background: var(--hvit);
}

a { color: var(--blaa); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--terra); }

img { max-width: 100%; height: auto; }

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

/* ---------- Topp ---------- */
.topp {
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--kant);
  box-shadow: 0 1px 12px rgba(8, 64, 63, .05);
  color: var(--blekk);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topp-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}
.logo {
  font-size: 1.3rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: var(--blaa);
}
.logo span { color: var(--terra); }

.menyknapp {
  display: none;
  background: none;
  border: 1px solid var(--kant);
  color: var(--blekk);
  border-radius: 7px;
  padding: 7px 12px;
  font: inherit;
  font-size: .95rem;
  cursor: pointer;
}

.meny { display: flex; align-items: center; gap: 1px; margin: 0; padding: 0; }
.meny > li { list-style: none; position: relative; }
/* Bare margin nullstilles her. Satte vi ogsaa padding: 0, ville «.meny ul»
   (klasse + type) slaa «.panel» (bare klasse), og nedtrekkspanelene mistet
   hele innerrommet sitt - punktene la seg inntil kanten av den hvite boksen. */
.meny ul { margin: 0; }
.meny > li > a {
  display: block;
  padding: 9px 9px;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 550;
  color: var(--damp);
  border-radius: 7px;
  transition: background .13s ease, color .13s ease;
}
.meny > li > a:hover,
.meny > li:focus-within > a { background: var(--blaa-lys); color: var(--blaa); }
.meny > li[aria-current] > a {
  color: var(--blaa);
  box-shadow: inset 0 -3px 0 var(--terra);
  border-radius: 7px 7px 0 0;
}

.panel {
  position: absolute;
  left: 0;
  top: 100%;
  background: var(--hvit);
  color: var(--blekk);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(8, 64, 63, .22);
  padding: 10px;
  min-width: 268px;
  display: none;
  z-index: 60;
}
.meny > li:hover > .panel,
.meny > li:focus-within > .panel { display: block; }
.panel li { list-style: none; position: relative; }
.panel a {
  color: var(--blekk);
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: .94rem;
  /* Uten nowrap bryter lange menynavn, og tallet havner alene paa linje to. */
  white-space: nowrap;
}
.panel a:hover { background: var(--blaa-lys); color: var(--blaa); }
.panel .tall { color: var(--damp); font-size: .8rem; font-variant-numeric: tabular-nums; }
.panel .alle {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--kant);
}
.panel .alle a { color: var(--blaa); font-weight: 600; }

/* Tredje niva: utfelling til siden av panelet */
.panel li.harunder > a::after {
  content: "›";
  color: var(--kant);
  font-size: 1.05rem;
  line-height: 1;
  margin-left: auto;
  padding-left: 8px;
}
.panel .under {
  display: none;
  position: absolute;
  left: 100%;
  top: -10px;
  background: var(--hvit);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(8, 64, 63, .22);
  padding: 10px;
  min-width: 280px;
  max-width: 340px;
  max-height: 70vh;
  overflow-y: auto;
  z-index: 61;
}
.panel li.harunder:hover > .under,
.panel li.harunder:focus-within > .under { display: block; }
.panel .under a { font-size: .89rem; padding: 7px 10px; display: block; }
/* De siste menypunktene feller ut mot venstre for aa ikke gaa ut av skjermen */
.meny > li.motvenstre .panel { left: auto; right: 0; }
.meny > li.motvenstre .panel .under { left: auto; right: 100%; }
/* Menypunktene midt paa: panelet staar der det staar, men tredje nivaa
   maa falle mot venstre. Ellers havner det delvis utenfor skjermen. */
.meny > li.undervenstre .panel .under { left: auto; right: 100%; }

/* ---------- Herobilde (seksjons- og artikkelsider) ---------- */
.heroband {
  position: relative;
  background: var(--blaa-mork);
  overflow: hidden;
}
.heroband img {
  display: block;
  width: 100%;
  height: clamp(200px, 26vw, 380px);
  object-fit: cover;
}
/* Ingen fargetoning over bildene. Bildet skal staa som det er - lesbarheten
   loeses utelukkende med tekstboksen, som bare dekker selve tekstblokken. */
.heroband .paatrykk {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 0 26px;
  color: var(--hvit);
}
.heroband .paatrykk h1 {
  margin: 0;
  font-size: clamp(1.7rem, 1rem + 2.6vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .65), 0 3px 22px rgba(0, 0, 0, .55);
}
.heroband .paatrykk p {
  margin: 8px 0 0;
  font-size: .98rem;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7), 0 2px 16px rgba(0, 0, 0, .6);
}
.artikkelbilde {
  margin: 0 0 26px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--flate);
}
.artikkelbilde img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ---------- Brodsmuler ---------- */
.brodsmuler {
  font-size: .87rem;
  color: var(--damp);
  padding: 14px 0 0;
}
/* Brodsmulene skal flukte med tekstspalten under, ikke med rammekanten.
   Ellers stod stien 231 px til venstre for datolinjen rett under den.
   Tekstspalten har to bredder: 74ch for broedtekst, 46em der siden bare
   har en innledning (landings- og gruppesider). */
.brodsmuler ol { list-style: none; margin: 0 auto; padding: 0; display: flex;
                 flex-wrap: wrap; gap: 6px; max-width: var(--tekstbredde); }
/* Bare naar innledningen ER sidens tekstspalte. Paa /omrader.html ligger
   den nestet inne i en vanlig .artikkel og styrer derfor ingenting. */
main:has(.ramme > .artikkel.innledning) .brodsmuler ol {
  max-width: var(--innledningsbredde); }
.brodsmuler li::after { content: "›"; margin-left: 6px; color: var(--kant); }
.brodsmuler li:last-child::after { content: ""; }
.brodsmuler a { color: var(--damp); }

/* ---------- Hero (tekstlig) ---------- */
.hero { padding: 10px 0 4px; }
.hero h1 {
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.5rem);
  line-height: 1.18;
  margin: 10px 0 10px;
  letter-spacing: -.02em;
}
.hero .stikktittel { margin: 0 0 10px; color: var(--damp); font-size: 1.02rem; max-width: 78ch; }
.metalinje {
  font-size: .87rem;
  color: var(--damp);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--kant);
  margin-bottom: 22px;
}

/* ---------- Oppsett ---------- */
/* En midtstilt spalte. Tidligere var dette et rutenett med en 292 px
   sidestolpe, men lenkeboksen fylte bare rundt 3 % av hoeyden. Resten var
   en tom hoeyrehalvdel, og teksten stod klemt mot venstre. */
.oppsett { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px;
           align-items: start; padding-bottom: 50px; }

/* ---------- Artikkeltekst ---------- */
/* Midtstilt: like store marger paa begge sider. */
.artikkel { max-width: var(--tekstbredde); margin-inline: auto; }
.artikkel > *:first-child { margin-top: 0; }
.artikkel p { margin: 0 0 1.1em; }
.artikkel h2 {
  font-size: 1.42rem;
  line-height: 1.3;
  margin: 2em 0 .6em;
  letter-spacing: -.01em;
  padding-bottom: .3em;
  border-bottom: 2px solid var(--blaa-lys);
}
.artikkel h3 { font-size: 1.12rem; margin: 1.7em 0 .5em; }
.artikkel ul, .artikkel ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.artikkel li { margin-bottom: .38em; }
.artikkel li::marker { color: var(--terra); }
.artikkel img { border-radius: var(--radius); }

/* Bilder inne i teksten. Bredden foelger tekstspalten, ikke sidebredden,
   slik at oyet ikke maa hoppe ut av lesekolonnen. */
.ibrod { margin: 2.1em 0 1.9em; }
.ibrod img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--flate);
  box-shadow: var(--skygge);
}
.ibrod figcaption {
  margin-top: .6em;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--damp);
  border-left: 3px solid var(--terra);
  padding-left: 12px;
}
.ibrod .foto { color: var(--damp); opacity: .72; white-space: nowrap; }
.artikkel strong { font-weight: 650; }

.tabellramme {
  overflow-x: auto;
  margin: 0 0 1.6em;
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  box-shadow: var(--skygge);
}
.artikkel table {
  border-collapse: collapse;
  width: 100%;
  min-width: 460px;
  font-size: .95rem;
  background: var(--hvit);
}
.artikkel thead th {
  background: var(--blaa);
  color: var(--hvit);
  text-align: left;
  font-weight: 600;
  padding: 11px 14px;
  position: sticky;
  top: 0;
  white-space: nowrap;
}
.artikkel tbody th { text-align: left; font-weight: 600; }
.artikkel td, .artikkel tbody th { padding: 10px 14px; border-top: 1px solid var(--kant); vertical-align: top; }
.artikkel tbody tr:nth-child(even) { background: var(--flate); }
.artikkel tbody tr:hover { background: var(--blaa-lys); }

/* ---------- Ofte spurt ---------- */
.faq {
  margin: 40px 0 0;
  padding: 22px 24px 6px;
  border: 1px solid var(--kant);
  border-left: 4px solid var(--terra);
  border-radius: var(--radius);
  background: var(--hvit);
  max-width: var(--tekstbredde);
  margin-inline: auto;
}
.faq h2 { margin: 0 0 14px; font-size: 1.25rem; }
.faq dl { margin: 0; }
.faq dt {
  font-weight: 650;
  color: var(--blaa);
  margin: 0 0 6px;
  font-size: 1.02rem;
}
.faq dd { margin: 0 0 18px; }
.faq dd p { margin: 0 0 .7em; }
.faq dd p:last-child { margin-bottom: 0; }
.faq dd ul { margin: .4em 0 .6em; padding-left: 1.2em; }

/* ---------- Knutepunkt: lenkeblokker under artikler ---------- */
.knutepunkt {
  background: var(--flate);
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 40px 0 0;
}
.knutepunkt h2 { font-size: 1.15rem; margin: 0 0 4px; border: 0; padding: 0; }
.knutepunkt p.stikk { margin: 0 0 14px; font-size: .9rem; color: var(--damp); }
.lenkegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 18px; list-style: none; margin: 0; padding: 0; }
.lenkegrid a { text-decoration: none; font-size: .95rem; }
.lenkegrid a:hover { text-decoration: underline; }
.lenkegrid .merke { color: var(--damp); font-size: .78rem; }

/* ---------- Fliser ---------- */
.flisgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(182px, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.flis a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 10px 14px 10px 16px;
  background: var(--hvit);
  border: 1px solid var(--kant);
  border-radius: 9px;
  text-decoration: none;
  color: var(--blekk);
  font-size: .97rem;
  font-weight: 550;
  line-height: 1.3;
  position: relative;
  overflow: hidden;
  transition: border-color .13s ease, transform .13s ease, box-shadow .13s ease;
}
.flis a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--terra);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .16s ease;
}
.flis a::after {
  content: "›";
  margin-left: auto;
  padding-left: 10px;
  color: var(--kant);
  font-size: 1.15rem;
  line-height: 1;
  transition: color .13s ease, transform .13s ease;
}
.flis a:hover,
.flis a:focus-visible {
  border-color: var(--blaa);
  color: var(--blaa);
  transform: translateY(-2px);
  box-shadow: 0 5px 16px rgba(8, 64, 63, .11);
}
.flis a:hover::before,
.flis a:focus-visible::before { transform: scaleY(1); }
.flis a:hover::after { color: var(--terra); transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .flis a, .flis a::before, .flis a::after { transition: none; }
  .flis a:hover { transform: none; }
}

/* ---------- Kort ---------- */
.gruppe { margin: 34px 0; }
.gruppe h2 {
  font-size: 1.3rem;
  margin: 0 0 4px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.gruppe h2 .antall { font-size: .85rem; font-weight: 400; color: var(--damp); }
.gruppe > p.stikk { margin: 0 0 16px; color: var(--damp); font-size: .93rem; max-width: 84ch; }

.kortgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 18px; list-style: none; margin: 0; padding: 0; }
.kort {
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--hvit);
  box-shadow: var(--skygge);
  transition: transform .13s ease, box-shadow .13s ease;
}
.kort:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(8, 64, 63, .13); }
.kort a { text-decoration: none; color: inherit; display: block; height: 100%; }
.kort img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: var(--flate); }
/* Bildet gaar helt ut i kortkanten, saa teksten under trenger tydelig mer
   luft enn bildet for ikke aa se klistret til venstresiden. Samme rytme som
   regionkortene (20 px), justert ned for det smalere kortet. */
.kort .tekst { display: block; padding: 14px 18px 16px; }
.kort h3 { margin: 0 0 5px; font-size: 1.02rem; color: var(--blaa); line-height: 1.3; }
.kort p { margin: 0; font-size: .86rem; color: var(--damp); line-height: 1.5; }
.kort .dato { display: block; margin-top: 7px; font-size: .78rem; color: var(--damp); }

/* ---------- Sidefelt ---------- */
/* Lenkeboksen stod i sidestolpen. Naa ligger den under teksten og skal
   flukte med den. */
/* width:100% er noedvendig: auto-margene slaar av rutenettets stretch,
   og uten den krymper boksen til innholdsbredden (239 px) i stedet for aa
   flukte med tekstspalten. */
aside.boks { width: 100%; max-width: var(--tekstbredde); margin-inline: auto; }
.boks {
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 20px;
  background: var(--hvit);
}
.boks h2 { font-size: .95rem; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--damp); }
.boks ul { list-style: none; margin: 0; padding: 0; }
.boks li { margin-bottom: 7px; font-size: .93rem; line-height: 1.45; }
.boks a { text-decoration: none; }
.boks a:hover { text-decoration: underline; }

.sokefelt { display: flex; gap: 8px; }
.sokefelt input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--kant);
  border-radius: 7px;
  font: inherit;
  font-size: .93rem;
}
.sokefelt input:focus { outline: 2px solid var(--blaa); outline-offset: 1px; }
.sokefelt button {
  background: var(--blaa);
  color: var(--hvit);
  border: 0;
  border-radius: 7px;
  padding: 9px 15px;
  font: inherit;
  font-size: .93rem;
  cursor: pointer;
}
.sokefelt button:hover { background: var(--blaa-mork); }

/* Forsidens storhero og bildkarusell er definert lenger nede,
   etter kanarieguiden-malen. */

/* Tallband under heroen */
.tallband {
  background: var(--blaa);
  color: var(--hvit);
  padding: 26px 0;
}
.tallband-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 18px;
  text-align: center;
}
.tallband .tall {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--terra);
  font-variant-numeric: tabular-nums;
}
.tallband .etikett {
  font-size: .87rem;
  color: rgba(255, 255, 255, .84);
  margin-top: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .bilde { transition: none; }
}

/* ---------- Forside ---------- */
/* Velkomstbolken foelger tekstspalten, ikke rammen. Ellers stod den
   oransje streken og overskriften 218 px til venstre for avsnittene de
   hoerer til. 26px = borderen (4) + venstre luft (22), som box-sizing
   trekker fra innholdsbredden. */
.velkomst {
  border-left: 4px solid var(--terra);
  padding: 2px 0 2px 22px;
  margin: 0 auto 38px;
  max-width: calc(var(--tekstbredde) + 26px);
}
.velkomst h2 {
  font-size: clamp(1.4rem, 1rem + 1.6vw, 1.9rem);
  margin: 0 0 14px;
  line-height: 1.22;
  letter-spacing: -.02em;
}
.velkomst p { margin: 0 0 1em; }
.velkomst p:last-child { margin-bottom: 0; }

.regiongrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(296px, 1fr));
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.regionkort {
  border: 1px solid var(--kant);
  border-radius: 14px;
  overflow: hidden;
  background: var(--hvit);
  box-shadow: var(--skygge);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.regionkort > a { text-decoration: none; color: inherit; display: block; }
.regionkort .ramme-bilde { overflow: hidden; background: var(--flate); }
.regionkort img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.regionkort:hover {
  transform: translateY(-3px);
  border-color: var(--blaa);
  box-shadow: 0 10px 30px rgba(8, 64, 63, .16);
}
.regionkort:hover img { transform: scale(1.05); }
.regionkort .tekst { padding: 16px 20px 18px; }
.regionkort h3 {
  margin: 0 0 6px;
  font-size: 1.24rem;
  font-weight: 700;
  color: var(--blaa);
  letter-spacing: -.015em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.regionkort h3::after {
  content: "›";
  color: var(--terra);
  font-size: 1.5rem;
  line-height: 1;
  transition: transform .16s ease;
}
.regionkort:hover h3::after { transform: translateX(4px); }
.regionkort p { margin: 0 0 6px; font-size: .89rem; color: var(--damp); line-height: 1.55; }
.regionkort .noekkeltall {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: .85rem;
  color: var(--damp);
}
.regionkort .noekkeltall b {
  color: var(--blekk);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .regionkort, .regionkort img, .regionkort h3::after { transition: none; }
  .regionkort:hover { transform: none; }
  .regionkort:hover img { transform: none; }
}

/* ---------- Bunn ---------- */
.bunn {
  background: var(--blaa-mork);
  color: rgba(255, 255, 255, .82);
  padding: 38px 0 30px;
  margin-top: 40px;
  font-size: .92rem;
}
.bunn a { color: rgba(255, 255, 255, .92); }
.bunn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 26px; }
.bunn h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 10px; color: var(--terra); }
.bunn ul { list-style: none; margin: 0; padding: 0; }
.bunn li { margin-bottom: 6px; }
.bunn .fin { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .85rem; color: rgba(255, 255, 255, .62); }

/* ---------- Verktoy ---------- */
.verktoy {
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  background: var(--flate);
  padding: 20px 22px 22px;
  margin: 0 0 26px;
}
.verktoy h2 { margin: 0 0 6px; border: 0; padding: 0; font-size: 1.2rem; }
.verktoy .verktoy-stikk { margin: 0 0 16px; font-size: .9rem; color: var(--damp); }
.verktoy-rad { display: flex; flex-wrap: wrap; gap: 14px; }
.verktoy-rad label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--damp);
  flex: 1 1 190px;
  min-width: 0;
}
.verktoy-rad input,
.verktoy-rad select {
  padding: 9px 11px;
  border: 1px solid var(--kant);
  border-radius: 7px;
  font: inherit;
  font-size: .96rem;
  font-weight: 400;
  color: var(--blekk);
  background: var(--hvit);
  max-width: 100%;
}
.verktoy-rad input:focus,
.verktoy-rad select:focus { outline: 2px solid var(--blaa); outline-offset: 1px; }
.verktoy-svar {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--kant);
  font-size: 1.08rem;
}
.verktoy-svar strong { color: var(--blaa); font-weight: 700; }
.verktoy-detalj { color: var(--damp); font-size: .9rem; }

/* ---------- Sok ---------- */
#sokresultat { list-style: none; padding: 0; margin: 20px 0 0; }
#sokresultat li { padding: 13px 0; border-bottom: 1px solid var(--kant); }
#sokresultat a { font-weight: 600; text-decoration: none; font-size: 1.05rem; }
#sokresultat p { margin: 3px 0 0; font-size: .89rem; color: var(--damp); }
.sokstor { display: flex; gap: 10px; margin: 22px 0 0; max-width: 560px; }
.sokstor input { flex: 1; padding: 13px 15px; font-size: 1.02rem; border: 1px solid var(--kant); border-radius: 8px; font-family: inherit; }

/* ---------- Responsivt ---------- */
@media (max-width: 900px) {
  .oppsett { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sidefelt { position: static; margin-top: 34px; }
  .artikkel { max-width: none; }
}

/* Mellom brytepunktet og full bredde: krymp menyen saa alle aatte
   punktene + Sok staar paa EN linje helt ned til hamburgergrensa. */
@media (min-width: 1121px) and (max-width: 1580px) {
  .meny > li > a { padding: 9px 7px; font-size: .87rem; }
  .logo { font-size: 1.14rem; }
  .topp-inner { gap: 10px; }
}

/* Hamburgermenyen slaar inn tidlig: sju menypunkter trenger plassen. */
@media (max-width: 1120px) {
  .menyknapp { display: block; }
  .meny {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--hvit);
    border-bottom: 1px solid var(--kant);
    box-shadow: 0 12px 28px rgba(8, 64, 63, .14);
    flex-direction: column;
    align-items: stretch;
    padding: 8px 12px 16px;
    max-height: 78vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .meny.apen { display: flex; }
  html.menyapen { overflow: hidden; }
  .meny > li > a {
    padding: 13px 10px;
    border-bottom: 1px solid var(--kant);
    color: var(--blekk);
    font-weight: 650;
    border-radius: 0;
  }
  .meny > li[aria-current] > a { box-shadow: inset 3px 0 0 var(--terra); }
  .panel {
    position: static;
    display: block;
    background: none;
    box-shadow: none;
    min-width: 0;
    padding: 2px 0 10px 14px;
    columns: 2;
    column-gap: 18px;
  }
  .meny > li.motvenstre .panel { left: auto; right: auto; }
  .meny > li.undervenstre .panel .under { right: auto; }
  .panel a { font-size: .92rem; padding: 8px 10px; }
  .panel li { break-inside: avoid; }
  .panel .alle { border-top-color: var(--kant); column-span: all; }
  /* Tredje nivaa vises ikke i mobilmenyen - det ligger paa hubsidene */
  .panel .under { display: none !important; }
  .panel li.harunder > a::after { content: ""; }
  .topp-inner { position: relative; flex-wrap: wrap; }
}

@media (max-width: 780px) {
  body { font-size: 16.5px; }
  .panel { columns: 1; }
  .heroband .paatrykk { padding-bottom: 18px; }
  .velkomst { padding-left: 16px; margin-bottom: 30px; }
}

@media (max-width: 420px) {
  .ramme { padding: 0 15px; }
  .flisgrid { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 8px; }
  .flis a { min-height: 46px; padding: 8px 10px 8px 12px; font-size: .92rem; }
}

@media print {
  .topp, .sidefelt, .bunn, .brodsmuler { display: none; }
  .oppsett { display: block; }
}

/* ---------- Annonseboks (vervelenker) ---------- */
/* Skal skille seg tydelig fra redaksjonell tekst. Leseren skal se
   forskjell paa et raad og en betalt lenke uten aa lete etter merkingen. */
.partnere {
  margin: 40px 0 0;
  padding: 20px 22px 8px;
  border: 1px solid var(--kant);
  border-left: 4px solid var(--damp);
  border-radius: var(--radius);
  background: var(--flate);
}
.partnere h2 { margin: 0 0 .3em; font-size: 1.18rem; }
.partnere .merking {
  margin: 0 0 1em;
  font-size: .82rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--damp);
}
.partnere ul { margin: 0 0 1.1em; padding-left: 1.2em; }
.partnere li { margin-bottom: .5em; }
.partnere .forbehold { font-size: .9rem; color: var(--damp); }

/* ---------- Velgerne paa /verktoy ---------- */
.verktoy-liste { margin: .4em 0 0; padding-left: 1.3em; }
.verktoy-liste li { margin-bottom: .45em; }
.verktoy-liste a { font-weight: 600; }
.verktoy-liste .verktoy-detalj { color: var(--damp); font-size: .92rem; }

/* ---------- Sider som ennå ikke er skrevet ----------
   Lenkemålene i registeret finnes før teksten gjør det. Å lenke til en tom
   side er verre enn å la være, så de rendres som ren tekst og tennes
   automatisk av bygg.py den dagen teksten kommer. */
.ikkeenda {
  color: var(--damp);
  cursor: default;
}
.flis .ikkeenda { display: block; }

/* ---------- Bildkarusell på forsiden ----------
   <img> og ikke background-image: bakgrunnsbilder kan ikke ha srcset, og
   karusellen ville lastet 1600 px-filene også på telefon. Første bildet har
   src og fetchpriority (det er sidens LCP-element); bilde 2-5 hentes av
   skriptet først når siden er ferdiglastet, så de ikke konkurrerer om
   båndbredden. */
/* Ingen fast hoyde: baandet er akkurat saa hoyt som innholdet pluss
   luften over og under, slik kanarieguiden.se gjoer det. Med fast hoyde og
   overflow:hidden ble merkelappen og toppen av h1 klippet bort paa lave
   vinduer. */
/* Hoyden folger kanarieguiden.se: 554 px maalt i nettleseren paa 1280x800.
   min-height og ikke height - med fast hoyde ble merkelappen og toppen av
   h1 klippet bort paa lave vinduer. Baandet kan altsaa bli hoyere enn 554,
   aldri lavere. */
.storhero { position: relative; overflow: hidden;
  min-height: clamp(430px, 43vw, 554px);
  background: var(--blaa-mork); display: flex; align-items: center; }
.storhero .serie { position: absolute; inset: 0; z-index: 0; }
.storhero .serie img.bilde { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1.5s ease; }
.storhero .serie img.bilde.aktiv { opacity: 1; }
.storhero .paatrykk { position: relative; z-index: 2; width: 100%;
  padding: 4.8rem 0 4.2rem; color: var(--hvit); }
.storhero .paatrykk h1 { margin: 0 0 14px; max-width: 17em;
  font-size: clamp(2rem, 1.1rem + 3.4vw, 3.2rem); line-height: 1.1;
  letter-spacing: -.02em; color: var(--hvit); }
.storhero .paatrykk .lead { margin: 0 0 24px; max-width: 40em;
  font-size: 1.08rem; color: rgba(255, 255, 255, .95); }
.storhero .merkelapp { display: inline-block; margin: 0 0 16px;
  background: rgba(255, 255, 255, .17); color: #fff; border-radius: 999px;
  padding: 5px 14px; font-size: .84rem; font-weight: 600;
  letter-spacing: .02em; }
.heroknapper { display: flex; flex-wrap: wrap; gap: 12px; }
.knapp { display: inline-block; padding: 12px 22px; border-radius: 9px;
  font-weight: 650; text-decoration: none; font-size: 1rem; }
.knapp-fyll { background: var(--terra); color: #fff; }
.knapp-fyll:hover { background: #c9552e; color: #fff; }
.knapp-tom { background: rgba(255, 255, 255, .15); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.knapp-tom:hover { background: rgba(255, 255, 255, .26); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .storhero .serie img.bilde { transition: none; }
}
@media (max-width: 700px) {
  .storhero .paatrykk { padding: 2.8rem 0 2.6rem; }
}

/* ---------- Tekstboks over hero-bildet ----------
   Sjiktovergangen alene holder ikke. Den er sterkest helt nederst, men
   overskriften staar et godt stykke opp i baandet, der den knapt er
   merkbar - kontrast.py maalte 1,5:1 paa det verste bildet. En egen boks
   bak teksten gir samme lesbarhet uansett hva som ligger under, og er
   dessuten det eneste som ikke maa maales paa nytt hver gang et bilde
   byttes. */
.tekstboks {
  background: rgba(6, 30, 33, .66);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-radius: 13px;
  padding: 20px 26px 24px;
  display: inline-block;
  max-width: 44em;
}
.heroband .tekstboks { padding: 14px 22px 16px; }
@media (max-width: 700px) {
  .tekstboks { padding: 16px 18px 18px; display: block; }
}

/* ---------- Enkel lenkeliste (artikkelarkivet) ---------- */
.lenkeliste { list-style: none; margin: 18px 0 0; padding: 0;
  border-top: 1px solid var(--kant); }
.lenkeliste li { display: flex; justify-content: space-between;
  align-items: baseline; gap: 16px; padding: 11px 2px;
  border-bottom: 1px solid var(--kant); }
.lenkeliste a { font-weight: 600; text-decoration: none; }
.lenkeliste a:hover { text-decoration: underline; }
.lenkeliste .metalinje { margin: 0; white-space: nowrap; font-size: .85rem; }
@media (max-width: 560px) {
  .lenkeliste li { flex-direction: column; gap: 2px; }
}

/* Innledningen på seksjons- og gruppeforsidene. Smalere enn kortgridene
   under, så teksten faktisk lar seg lese. */
.innledning { max-width: var(--innledningsbredde); margin-inline: auto;
              margin-bottom: 6px; }
.innledning p:first-child { margin-top: 0; }

/* Kart ------------------------------------------------------------------ */
.kart {
  margin: 1.8rem 0;
}
.kart iframe {
  width: 100%;
  height: 420px;
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  display: block;
  background: #e9e5dc;
}
.kart figcaption {
  font-size: .87rem;
  color: var(--damp);
  margin-top: .5rem;
  line-height: 1.5;
}
.kart figcaption a {
  color: var(--blaa);
}
@media (max-width: 640px) {
  .kart iframe { height: 300px; }
}

/* ---------- Samtykkevalg ---------- */
/* Hengelåsen nede til høyre. Personvernsiden har alltid lovet den; her er
   den. Skjult til Googles banner melder seg — se samtykkeknapp() i bygg.py. */
.samtykkevalg {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--kant);
  border-radius: 50%;
  background: var(--hvit);
  color: var(--damp);
  box-shadow: var(--skygge);
  cursor: pointer;
}
.samtykkevalg:hover { color: var(--terra); border-color: var(--terra); }
.samtykkevalg:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }
.samtykkevalg[hidden] { display: none; }

@media print { .samtykkevalg { display: none; } }

/* ---------- Artikkelkort ---------- */
/* Artikkellistene under innledningen på seksjons- og gruppesidene. Samme
   kort som reisemålene, men smalere kolonner: en gruppe har gjerne seks til
   femten artikler, og 296px-rutenettet ble for grovt. */
.artikkelgrid { grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 18px; }
.artikkelgrid .regionkort h3 { font-size: 1.06rem; }
.artikkelgrid .regionkort .tekst { padding: 13px 16px 15px; }

/* Plate der siden ikke har bilde. Holder korthøyden slik at rutenettet ikke
   blir hakkete når noen sider mangler motiv. */
.kortplate {
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(135deg, var(--flate) 0%, var(--blaa-lys) 100%);
  border-bottom: 1px solid var(--kant);
}

/* Kort for en side som ennå ikke er skrevet: ingen lenke, dempet. */
.regionkort.ikkeenda { opacity: .55; box-shadow: none; }
.regionkort.ikkeenda:hover { transform: none; border-color: var(--kant); }
.regionkort.ikkeenda h3::after { content: ""; }

@media (max-width: 480px) {
  .artikkelgrid { grid-template-columns: 1fr; }
}