/* =========================================================================
   chiangmaiguiden.com — designsystem
   Palett: teak og safran. Antikva i overskriftene, grotesk i brødteksten.
   Bevisst ulik søstersiden .se, som kjører jade/gull og grotesk display.
   ========================================================================= */

:root {
  --brand:      #6B2D1E;   /* teak-lakk, Lanna-rødt treverk */
  --brand-d:    #4A1E13;
  --brand-l:    #8F4630;
  --brand-soft: #F6E9E3;

  --accent:     #96590F;   /* safran, mørk nok til brødtekst */
  --accent-h:   #7A4709;
  --accent-soft:#FCF0DC;

  --gold:       #D6A63A;   /* tempeltak — dekor, aldri tekst på lys bunn */
  --gold-l:     #E6BC5E;
  --gold-soft:  #FBF2DC;

  --jade:       #2F6B57;   /* fjellskog — støttefarge */
  --jade-soft:  #E6F0EB;
  --chili:      #A83A22;
  --teak:       #241A13;

  --bg:         #FBF8F3;
  --bg-2:       #F3ECE2;
  --white:      #FFFFFF;
  --text:       #1F1A17;
  --text-light: #6B6055;
  --border:     #E7DCCD;

  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --display: "Sitka Text", Charter, "Bitstream Charter", Cambria, Georgia,
             "Times New Roman", serif;

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --shadow:    0 1px 3px rgba(36,26,19,.07), 0 8px 24px rgba(36,26,19,.07);
  --shadow-lg: 0 14px 48px rgba(36,26,19,.20);
  --maxw: 1200px;
  --nav-h: 64px;
}

/* Avdelingstoner — ti avdelinger, ett system. */
.t1  { --tone:#8A6212; --tone-2:#C79A2E; }  /* attraksjoner  — tempelgull   */
.t2  { --tone:#2F6B4A; --tone-2:#5AA07B; }  /* utflukter     — fjellgrønn   */
.t3  { --tone:#B04E15; --tone-2:#DE8534; }  /* aktiviteter   — energi       */
.t4  { --tone:#8E3A6B; --tone-2:#B96398; }  /* festivaler    — lanternelilla*/
.t5  { --tone:#A83A22; --tone-2:#D5674A; }  /* mat og drikke — chili        */
.t6  { --tone:#6E6357; --tone-2:#A09383; }  /* overnatting   — dempet teak  */
.t7  { --tone:#2C5C86; --tone-2:#5A8CB8; }  /* transport     — asfaltblå    */
.t8  { --tone:#4B4F86; --tone-2:#7C81B8; }  /* praktisk      — indigo       */
.t9  { --tone:#3F7269; --tone-2:#6FA79C; }  /* nord-thailand — dis          */
.t10 { --tone:#7A5230; --tone-2:#A87F55; }  /* langtidsopphold — jord       */

/* ---- grunnmur ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.68 var(--sans);
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-h); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.2;
                 letter-spacing: -.01em; margin: 0 0 .5em; color: var(--teak); }
h1 { font-size: clamp(30px, 4.4vw, 46px); }
h2 { font-size: clamp(24px, 3vw, 31px); }
h3 { font-size: clamp(20px, 2.2vw, 23px); }
p  { margin: 0 0 1.15em; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 200; background: var(--white);
              padding: 10px 16px; border-radius: var(--r-sm); }

/* ---- topplinje og meny ------------------------------------------------- */
.topp {
  position: sticky; top: 0; z-index: 100; background: var(--white);
  border-bottom: 1px solid var(--border);
}
.topp-rad { display: flex; align-items: center; gap: 18px; height: var(--nav-h); }
.logo {
  font-family: var(--display); font-weight: 700; font-size: 21px;
  color: var(--brand); text-decoration: none; letter-spacing: -.02em;
  display: flex; align-items: center; gap: 9px; white-space: nowrap;
}
.logo .mrk {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: linear-gradient(140deg, var(--gold) 0%, var(--brand) 78%);
}
.hovedmeny { display: none; margin-left: auto; }
@media (min-width: 1000px) { .hovedmeny { display: flex; } }
.hovedmeny > li { list-style: none; position: static; }
.hovedmeny { padding: 0; margin: 0; gap: 2px; }
.hovedmeny > li > a {
  display: block; position: relative; padding: 0 7px; line-height: var(--nav-h);
  font-size: 15px; font-weight: 600; color: var(--text);
  text-decoration: none; white-space: nowrap;
}
/* Ti menypunkter skal faa plass fra 1000 px. Under 1200 px strammes
   luft og skriftgrad inn framfor aa la linja flyte over. */
@media (min-width: 1000px) and (max-width: 1199.98px) {
  .hovedmeny > li > a { padding: 0 4px; font-size: 13px; letter-spacing: -.015em; }
  .logo { font-size: 18px; gap: 7px; }
  .logo .mrk { width: 22px; height: 22px; }
}
@media (min-width: 1200px) and (max-width: 1339.98px) {
  .hovedmeny > li > a { padding: 0 5px; font-size: 13.5px; }
}
.hovedmeny > li > a:hover,
.hovedmeny > li:focus-within > a { color: var(--brand); }
.hovedmeny > li > a::after {
  content: ""; position: absolute; left: 7px; right: 7px; bottom: 0;
  height: 3px; background: var(--brand); transform: scaleX(0);
  transition: transform .16s ease;
}
.hovedmeny > li:hover > a::after,
.hovedmeny > li:focus-within > a::after { transform: scaleX(1); }

.megameny {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--white); border-top: 1px solid var(--border);
  box-shadow: var(--shadow-lg); padding: 22px 0 26px; margin: 0;
  opacity: 0; visibility: hidden; transition: opacity .14s ease;
}
.megameny > ul {
  max-width: var(--maxw); margin: 0 auto; padding: 0 20px;
}
.hovedmeny > li:hover .megameny,
.hovedmeny > li:focus-within .megameny { opacity: 1; visibility: visible; }
.megameny ul { list-style: none;
               display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 18px; }
.megameny a {
  display: block; padding: 9px 11px; border-radius: var(--r-sm);
  text-decoration: none; color: var(--text);
}
.megameny a:hover { background: var(--bg-2); }
.megameny .navn { font-weight: 600; font-size: 15px; display: block; }
.megameny .undertekst { font-size: 13px; color: var(--text-light); display: block; }
.megameny .alle {
  grid-column: 1 / -1; margin-top: 6px; padding-top: 10px;
  border-top: 1px solid var(--border);
}
.megameny .alle a { font-weight: 600; color: var(--brand); }

.menyknapp {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand); color: var(--white); border: 0;
  border-radius: 999px; padding: 9px 17px; font: 600 15px/1 var(--sans);
  cursor: pointer;
}
@media (min-width: 1000px) { .menyknapp { display: none; } }

/* mobilskuff */
.skuff {
  position: fixed; inset: var(--nav-h) 0 0; background: var(--white);
  overflow-y: auto; padding: 16px 20px 60px; z-index: 99; display: none;
}
.skuff.apen { display: block; }
.skuff details { border-bottom: 1px solid var(--border); }
.skuff summary {
  cursor: pointer; padding: 14px 2px; font-weight: 600; font-size: 17px;
  list-style: none; display: flex; justify-content: space-between;
}
.skuff summary::-webkit-details-marker { display: none; }
.skuff summary::after { content: "+"; color: var(--text-light); font-weight: 400; }
.skuff details[open] summary::after { content: "–"; }
.skuff details ul { list-style: none; margin: 0 0 12px; padding: 0; }
.skuff details a { display: block; padding: 9px 2px; color: var(--text);
                   text-decoration: none; font-size: 15.5px; }

/* ---- hero -------------------------------------------------------------- */
/* Teksten får egen boks. Kontrasten måles mot boksen, ikke mot bildet —
   se [[hero-kontrast-mal-sammensetningen]]. */
.hero { position: relative; background: var(--teak); overflow: hidden; }
.hero img { width: 100%; height: 100%; object-fit: cover; position: absolute;
            inset: 0; opacity: .82; }
.hero-inner {
  position: relative; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(56px, 9vw, 116px) 20px;
}
.hero-boks {
  max-width: 720px; background: rgba(24,17,12,.62);
  backdrop-filter: blur(2px); border-radius: var(--r-lg);
  padding: clamp(22px, 3.4vw, 38px);
}
.hero-boks h1 { color: #fff; margin-bottom: .35em; }
.hero-boks p { color: #F3EAE0; font-size: clamp(16px, 1.7vw, 19px); margin: 0; }
.hero-merke {
  display: inline-block; margin-bottom: 14px; padding: 5px 13px;
  border-radius: 999px; background: var(--gold); color: var(--teak);
  font: 700 12.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
.hero-liten .hero-inner { padding: clamp(34px, 5vw, 62px) 20px; }

/* ---- kreditt under bildet ---------------------------------------------- */
/* Full TASL: fotograf, lisens, kilde og hva vi har gjort. Den skal kunne leses,
   men ikke konkurrere med ingressen — derfor liten skrift og dempet farge.
   Ingen white-space: nowrap: linja er lang, og skal bryte fritt. */
.bildekreditt-inline {
  max-width: var(--maxw); margin: 7px auto 0; padding: 0 20px;
  font-size: 12.5px; line-height: 1.5; color: var(--text-light);
  text-align: right;
}
.bildekreditt-inline a {
  color: inherit; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 2px;
  text-decoration-color: rgba(120,110,100,.5);
}
.bildekreditt-inline a:hover, .bildekreditt-inline a:focus-visible {
  color: var(--brand); text-decoration-color: currentColor;
}
/* Venstrestilt paa smal skjerm: hoyrestilt gir en ujevn venstrekant naar
   linja bryter over tre linjer. */
@media (max-width: 700px) { .bildekreditt-inline { text-align: left; } }

/* ---- kredittabellen ----------------------------------------------------- */
.kredittabell td { vertical-align: top; }
.kred-kilde, .kred-merk, .endr {
  font-size: 12px; color: var(--text-light);
}
.kred-merk { color: var(--brand); }
.kred-fot { font-size: 14px; color: var(--text-light); margin-top: 1.4rem; }

/* ---- brødsmuler -------------------------------------------------------- */
.smuler { font-size: 14px; color: var(--text-light); padding: 14px 0 0; }
.smuler ol { list-style: none; display: flex; flex-wrap: wrap; gap: 7px;
             margin: 0; padding: 0; }
.smuler li::after { content: "›"; margin-left: 7px; color: var(--border); }
.smuler li:last-child::after { content: ""; }
.smuler a { color: var(--text-light); }

/* ---- kort -------------------------------------------------------------- */
.rutenett { display: grid; gap: 20px; margin: 26px 0 0;
            grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.kort {
  position: relative;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow); transition: transform .16s ease, box-shadow .16s ease;
}
.kort:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
/* Hele kortet er klikkflaten: overskriftslenken strekkes over kortet. Hvert
   kort har nøyaktig én lenke, så ingenting havner under dekket. */
.kort h2 a::after, .kort h3 a::after { content: ""; position: absolute; inset: 0; }
.kort:hover h2 a, .kort:hover h3 a { color: var(--brand); }
.kort:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.kort h2 a:focus-visible, .kort h3 a:focus-visible { outline: none; }
.kort-bilde { aspect-ratio: 16 / 10; background:
  linear-gradient(135deg, var(--tone, var(--brand)) 0%, var(--tone-2, var(--gold)) 100%); }
.kort-bilde img { width: 100%; height: 100%; object-fit: cover; }
.kort-tekst { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.kort h2, .kort h3 { font-size: 19px; margin-bottom: .35em; }
.kort h2 a, .kort h3 a { color: var(--teak); text-decoration: none; }
.kort h2 a:hover, .kort h3 a:hover { color: var(--brand); }
.kort p { font-size: 14.5px; color: var(--text-light); margin: 0; }
.stikk {
  font: 700 11.5px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--tone, var(--brand)); margin-bottom: 9px; display: block;
}

/* ---- seksjoner på forsiden --------------------------------------------- */
.blokk { padding: clamp(40px, 6vw, 72px) 0; }
.blokk-2 { background: var(--bg-2); }
.blokk-topp { display: flex; align-items: flex-end; justify-content: space-between;
              gap: 20px; flex-wrap: wrap; }
.blokk-topp p { max-width: 62ch; color: var(--text-light); margin: 6px 0 0; }
.knapp {
  display: inline-block; background: var(--brand); color: #fff;
  padding: 11px 20px; border-radius: 999px; font-weight: 600; font-size: 15px;
  text-decoration: none; white-space: nowrap;
}
.knapp:hover { background: var(--brand-d); color: #fff; }
.knapp-2 { background: transparent; color: var(--brand);
           border: 1.5px solid var(--brand); }
.knapp-2:hover { background: var(--brand); color: #fff; }

/* ---- artikkel ---------------------------------------------------------- */
.artikkel-topp { padding: 26px 20px 0; }   /* 20px = samme som .wrap;
   uten dem gikk brodteksten helt ut i skjermkanten paa mobil */
.meta { font-size: 14px; color: var(--text-light); display: flex;
        flex-wrap: wrap; gap: 6px 16px; margin: 0 0 22px; }
.artikkel-layout { display: grid; gap: 40px; padding: 0 0 60px;
                   grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .artikkel-layout { grid-template-columns: minmax(0, 1fr) 300px; }
}
.brodtekst { max-width: 72ch; font-size: 17.5px; }
.brodtekst h2 { margin-top: 1.7em; padding-top: .2em; }
.brodtekst h3 { margin-top: 1.4em; }
.brodtekst ul, .brodtekst ol { padding-left: 1.25em; margin: 0 0 1.15em; }
.brodtekst li { margin-bottom: .45em; }
.brodtekst img { border-radius: var(--r); margin: 1.6em 0 .6em; }
.brodtekst figure { margin: 1.8em 0; }
.brodtekst figcaption { font-size: 13.5px; color: var(--text-light); margin-top: 8px; }
.brodtekst table { width: 100%; border-collapse: collapse; margin: 1.5em 0;
                   font-size: 15.5px; }
.brodtekst th, .brodtekst td { text-align: left; padding: 10px 12px;
                               border-bottom: 1px solid var(--border); }
.brodtekst th { background: var(--bg-2); font-weight: 700; }
.brodtekst blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--gold);
  font-family: var(--display); font-size: 19px; color: var(--brand-d);
}
.tabell-hylse { overflow-x: auto; }

.faktaboks {
  background: var(--accent-soft); border: 1px solid #EEDCBD;
  border-radius: var(--r); padding: 20px 22px; margin: 1.8em 0;
}
.faktaboks h3 { margin-top: 0; font-size: 19px; }
.faktaboks :last-child { margin-bottom: 0; }
.faktaboks-jade { background: var(--jade-soft); border-color: #CFE2D8; }

/* innholdsfortegnelse */
.innhold {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r); padding: 18px 20px; margin: 0 0 28px;
}
.innhold h2 { font-size: 16px; margin: 0 0 10px; letter-spacing: .02em;
              text-transform: uppercase; font-family: var(--sans); }
.innhold ol { margin: 0; padding-left: 1.1em; font-size: 15.5px; }
.innhold li { margin-bottom: .35em; }

.sidefelt { align-self: start; }
@media (min-width: 1000px) { .sidefelt { position: sticky; top: calc(var(--nav-h) + 20px); } }
.sidekort { background: var(--white); border: 1px solid var(--border);
            border-radius: var(--r); padding: 18px 20px; margin-bottom: 20px; }
.sidekort h2 { font-size: 17px; margin: 0 0 12px; }
.sidekort ul { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.sidekort li { border-bottom: 1px solid var(--border); }
.sidekort li:last-child { border-bottom: 0; }
.sidekort a { display: block; padding: 9px 0; color: var(--text); text-decoration: none; }
.sidekort a:hover { color: var(--brand); }
.sidekort a[aria-current="page"] { color: var(--brand); font-weight: 600; }

.videre { border-top: 1px solid var(--border); padding-top: 30px; margin-top: 40px; }

/* ---- bunn -------------------------------------------------------------- */
.bunn { background: var(--teak); color: #D9CEC2; padding: 52px 0 30px;
        font-size: 15px; margin-top: 40px; }
.bunn a { color: #EADFD2; text-decoration: none; }
.bunn a:hover { color: var(--gold-l); text-decoration: underline; }
.bunn h2 { color: #fff; font-size: 16px; font-family: var(--sans);
           letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px; }
.bunn-rutenett { display: grid; gap: 28px;
                 grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.bunn ul { list-style: none; margin: 0; padding: 0; }
.bunn li { margin-bottom: 8px; }
.bunn-strek { border-top: 1px solid rgba(255,255,255,.14); margin-top: 36px;
              padding-top: 20px; display: flex; flex-wrap: wrap; gap: 12px 26px;
              justify-content: space-between; font-size: 14px; color: #A79A8D; }

/* ---- småting ----------------------------------------------------------- */
.merkelapp {
  display: inline-block; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 13px; font-size: 13.5px; margin: 0 6px 6px 0;
  color: var(--text); text-decoration: none;
}
.merkelapp:hover { background: var(--brand-soft); border-color: var(--brand-l); }
.visuelt-skjult { position: absolute; width: 1px; height: 1px; overflow: hidden;
                  clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto; }
}

/* ---- ordliste ----------------------------------------------------------- */
.ol-gruppe { margin: 38px 0 0; }
.ol-liste { margin: 14px 0 0; }
.ol-post {
  border-top: 1px solid var(--border); padding: 14px 0;
  display: grid; gap: 4px 22px;
}
.ol-post dt { font-weight: 650; color: var(--brand); font-size: 17px; }
.ol-post dd { margin: 0; }
.ol-uttale { font-weight: 400; color: var(--text-light); font-size: 14.5px; }
.ol-videre { display: block; margin-top: 5px; font-size: 14.5px; }
.ol-videre a { color: var(--accent); }
@media (min-width: 680px) {
  .ol-post { grid-template-columns: 180px 1fr; }
  .ol-post dt { padding-top: 1px; }
}

/* ---- verktøy: felles ---------------------------------------------------- */
.brodtekst .kalk { margin: 22px 0 8px; }
.kalk fieldset { border: 0; margin: 0 0 18px; padding: 0; }
.kalk legend { font-weight: 650; margin-bottom: 10px; padding: 0; }
.k-valg {
  display: block; border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 12px 14px; margin-bottom: 8px; cursor: pointer; background: var(--white);
}
.k-valg:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.k-valg input { margin-right: 10px; }
.k-valg span { display: inline; }
.k-valg em { display: block; font-style: normal; color: var(--text-light);
             font-size: 14.5px; margin: 3px 0 0 26px; }
.k-rad { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
         margin-bottom: 12px; }
.k-rad label { flex: 1 1 260px; }
.k-rad input {
  flex: 0 0 130px; padding: 9px 11px; font: inherit;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--white);
}
.k-rad input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.k-hjelp { font-size: 14.5px; color: var(--text-light); }
.k-svar {
  display: block; margin-top: 18px; padding: 20px 22px;
  background: var(--brand); color: #fff; border-radius: var(--r);
}
.k-sum { display: block; font: 700 30px/1.15 var(--display); }
.k-sum2 { display: block; font-size: 19px; margin-top: 4px; color: var(--gold-l); }
.k-detalj { display: block; font-size: 14.5px; margin-top: 9px; color: #E6D8CC; }

/* ---- værkalender -------------------------------------------------------- */
.v-tabell { min-width: 640px; }
.v-tall { white-space: nowrap; font-variant-numeric: tabular-nums; }
.v-stolpe { min-width: 110px; }
.v-stolpe { position: relative; }
.v-spenn {
  position: absolute; top: 50%; transform: translateY(-50%); height: 9px;
  border-radius: 5px; background: linear-gradient(90deg, var(--jade), var(--gold));
  min-width: 6px;
}

/* ---- pakkeliste --------------------------------------------------------- */
.pk-status { font-weight: 650; color: var(--brand); }
.pk-verktoy { margin-bottom: 8px; }
.pk-bolk { margin-top: 30px; }
.pk-liste { list-style: none; margin: 12px 0 0; padding: 0; }
.pk-liste li { border-top: 1px solid var(--border); }
.pk-liste label { display: flex; gap: 12px; align-items: flex-start;
                  padding: 11px 2px; cursor: pointer; }
.pk-liste input { margin-top: 4px; flex: 0 0 auto; width: 17px; height: 17px;
                  accent-color: var(--brand); }
.pk-liste input:checked + span { color: var(--text-light); text-decoration: line-through; }

/* ---- tempelvelger og reiseruteplanlegger -------------------------------- */
.tv-filtre, .rr-valgene { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 12px; }
.tv-filter, .rr-valg {
  font: inherit; font-size: 15px; cursor: pointer;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--white); color: var(--text);
}
.tv-filter:hover, .rr-valg:hover { border-color: var(--brand-l); }
.tv-filter.er-valgt, .rr-valg.er-valgt {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.tv-status { font-size: 14.5px; color: var(--text-light); margin: 0 0 6px; }
.tv-rutenett, .rr-rutenett {
  display: grid; gap: 16px; margin: 14px 0 0;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.tv-kort, .rr-kort {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r); padding: 16px 18px;
}
.tv-kort h3, .rr-kort h3 { font-size: 18px; margin: 0 0 6px; }
.tv-kort h3 a, .rr-kort h3 a { color: var(--teak); text-decoration: none; }
.tv-kort h3 a:hover, .rr-kort h3 a:hover { color: var(--brand); }
.tv-kort p, .rr-kort p { font-size: 14.5px; color: var(--text-light); margin: 0; }
.tv-merker { margin-top: 10px !important; display: flex; flex-wrap: wrap; gap: 6px; }
.tv-merke {
  font-size: 12.5px; padding: 3px 9px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-h); border: 1px solid var(--gold-soft);
}
.rr-kort .stikk { margin-bottom: 6px; }

/* ---- festivalkalender --------------------------------------------------- */
.fk-tabell { min-width: 520px; }
.fk-tabell td { vertical-align: top; }
.fk-nar { white-space: nowrap; color: var(--text-light); font-size: 14.5px; }


/* ---- forsidens bildeserie ---------------------------------------------- */
.hero-kar { min-height: clamp(440px, 68vh, 660px); }
.kar { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.kar-bilde {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s ease;
}
.kar-bilde.aktiv { opacity: 1; }
.kar-prikker {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 18px;
  display: flex; justify-content: center; gap: 9px;
}
.kar-prikk {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.85); background: rgba(255,255,255,.28);
}
.kar-prikk.aktiv { background: #fff; }
.kar-prikk:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .kar-bilde { transition: none; } }

/* ---- samtykkebanner ----------------------------------------------------- */
.samtykke {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--white); border-top: 1px solid var(--border);
  box-shadow: 0 -6px 30px rgba(36,26,19,.14);
}
.samtykke[hidden] { display: none; }
.samtykke-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 18px 20px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
}
.samtykke-inner > div:first-child { flex: 1 1 340px; }
.samtykke p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-light); }
.samtykke-tittel { font-weight: 650; color: var(--text); margin-bottom: 4px !important; }
.samtykke-knapper { display: flex; gap: 10px; flex: 0 0 auto; }
.samtykke-knapper .knapp { white-space: nowrap; }

/* Kortene kan staa inne i .brodtekst — for eksempel under «Les videre». Uten
   denne nullstillingen arver kortbildet artikkelbildets margin, og gradienten
   bak stikker fram som et farget band over bildet. Regelen maa staa etter
   .brodtekst img for aa vinne, og vaere mer spesifikk enn den. */
.brodtekst .kort-bilde img,
.kort .kort-bilde img { margin: 0; border-radius: 0; }

/* Logoteksten «ChiangMaiGuiden.com» er lengre enn den var, og pa smale
   skjermer presset den menyknappen ut av topplinja. Stram inn under 480 px. */
@media (max-width: 479.98px) {
  .logo { font-size: 17px; gap: 7px; }
  .logo .mrk { width: 22px; height: 22px; }
  .menyknapp { padding: 8px 14px; font-size: 14.5px; }
}
@media (max-width: 359.98px) {
  .logo { font-size: 14px; gap: 6px; }
  .logo .mrk { width: 20px; height: 20px; }
  .menyknapp { padding: 8px 12px; font-size: 14px; }
}

/* Velkomstteksten arver .brodtekst sin lesebredde, men den staar i en full
   .wrap uten sidefelt — uten auto-margin klistrer den seg til venstre kant
   med et halvt tusen piksler tomt til hoyre. */
.velkomst { margin-left: auto; margin-right: auto; }

/* ---- søk ---------------------------------------------------------------- */
/* Ti menypunkter og en logo fyller topplinja. En sokeknapp med tekst
   sprengte den paa alle bredder — derfor bare ikon, med tilgjengelig navn
   paa lenka. */
.sokknapp {
  display: none; align-items: center; justify-content: center;
  margin-left: 6px; width: 36px; height: 36px; flex: none;
  border-radius: 50%; border: 1px solid var(--border);
  color: var(--text); text-decoration: none;
}
.sokknapp span { position: absolute; width: 1px; height: 1px; overflow: hidden;
                 clip: rect(0 0 0 0); white-space: nowrap; }
.sokknapp:hover { border-color: var(--brand-l); color: var(--brand); background: var(--bg-2); }
.sokknapp:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (min-width: 1000px) { .sokknapp { display: inline-flex; } }
@media (min-width: 1000px) and (max-width: 1199.98px) {
  .sokknapp { width: 32px; height: 32px; margin-left: 4px; }
}

.skuff-sok { display: flex; gap: 8px; margin: 4px 0 18px; }
.skuff-sok input {
  flex: 1; min-width: 0; padding: 11px 13px; font: inherit;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--white);
}
.skuff-sok button {
  padding: 11px 16px; font: 600 15px/1 var(--sans); cursor: pointer;
  border: 0; border-radius: var(--r-sm); background: var(--brand); color: #fff;
}

.sok-form { margin: 0 0 8px; }
#sok-felt {
  width: 100%; padding: 15px 18px; font: 400 18px/1.4 var(--sans);
  border: 1px solid var(--border); border-radius: var(--r); background: var(--white);
  box-shadow: var(--shadow);
}
#sok-felt:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.sok-status { font-size: 14.5px; color: var(--text-light); margin: 0 0 6px; min-height: 1.4em; }
.sok-treff { list-style: none; margin: 0 0 30px; padding: 0; }
.sok-post { border-top: 1px solid var(--border); }
.sok-post a { display: block; padding: 15px 2px; text-decoration: none; color: var(--text); }
.sok-post a:hover { background: var(--bg-2); }
.sok-hvor {
  display: block; font: 700 11.5px/1 var(--sans); letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.sok-tittel {
  display: block; font-family: var(--display); font-weight: 700; font-size: 19px;
  color: var(--teak); line-height: 1.25; margin-bottom: 4px;
}
.sok-post a:hover .sok-tittel { color: var(--brand); }
.sok-utdrag { display: block; font-size: 14.5px; color: var(--text-light); line-height: 1.55; }
.sok-treff mark { background: var(--gold-soft); color: inherit; padding: 0 1px; border-radius: 2px; }
.sok-tomt { padding: 14px 0; }