/* ==========================================================================
   Chiangmaiguiden.se — huvudstilmall
   Palett: Lanna. Djup jadegrön (bergen, teakskogen) + bränt tempelguld
   + sparsam saffransröd, på en varm råvit papperston.
   Rubriker i en tung, tätt spärrad systemgrotesk; antikvan är reserverad
   för ingresser. Inga webbfonter, inga externa anrop.

   Kontrastkontroll (WCAG AA kräver 4,5:1 för text, 3:1 för gränser).
   Uträknat med WCAG-formeln, inte gissat:

     text #201A14 mot vitt .................... 17,22:1
     text #201A14 mot --bg #FBF7F0 ............ 16,13:1
     text #201A14 mot --bg-2 #F2ECE1 .......... 14,65:1
     --text-light #6A6055 mot vitt ............  6,15:1
     --text-light #6A6055 mot --bg ............  5,75:1
     --brand #14503C mot vitt .................  9,36:1   (länkar)
     --brand #14503C mot --bg .................  8,77:1
     vit text på --brand ......................  9,36:1   (.btn-brand)
     vit text på --brand-d #0A3226 ............ 14,03:1   (.nav-portal, sidfot)
     --accent #A45A0E mot vitt ................  5,19:1   (.eyebrow, hover)
     --accent #A45A0E mot --bg ................  4,86:1
     vit text på --accent .....................  5,19:1   (.btn-primary)
     vit text på --accent-h #8A4A08 ...........  6,85:1   (hover)
     vit text på --red #A83A1E ................  6,39:1
     ingress #4A3F33 mot vitt ................. 10,24:1
     --gold #D9A227 mot --brand-d .............  6,11:1   (endast på mörkt)
     --gold-l #E3B23F mot portalbandets ljusaste stopp #1B4133 5,79:1
     sidfotstext (78 % vit) på --brand-d ......  8,32:1
     sidfotens finstilta (60 % vit) ...........  5,73:1
     faktaruta: --brand-d på --brand-soft ..... 11,97:1
     tips: #7A5209 på --gold-soft .............  6,15:1
     varning: #93300F på --red-soft ...........  6,79:1

   Sektionstonerna används som versal etikettext (.kort-tagg) på vitt kort,
   så alla tio är kontrollerade mot vitt — lägsta är t3 med 5,32:1:
     t1 5,47  t2 6,32  t3 5,32  t4 5,92  t5 5,86
     t6 6,35  t7 6,23  t8 6,02  t9 6,02  t10 12,43

   --gold #D9A227 klarar 2,3:1 mot vitt och får därför ALDRIG bli textfärg
   på ljus botten. Den är dekor, och text bara på de mörka partierna.
   ========================================================================== */

:root {
  --brand:        #14503C;   /* djup jade — berg, teak, tempelgård */
  --brand-d:      #0A3226;
  --brand-l:      #2E7D62;
  --brand-soft:   #E3F0EA;

  --accent:       #A45A0E;   /* bränt Lanna-guld, läsbart som text */
  --accent-h:     #8A4A08;
  --accent-soft:  #FBEEDC;

  --gold:         #D9A227;   /* tempeltak, chedin på Doi Suthep — dekor */
  --gold-l:       #E3B23F;   /* ljusare guld för text på mörk botten */
  --gold-soft:    #FBF1D8;

  --red:          #A83A1E;   /* saffran/munkdräkt — används sparsamt */
  --red-soft:     #FCEBE4;
  --teak:         #241C14;   /* mörkt teakträ, portalens botten */

  --rose:         #A8496B;
  --green:        #2F6B4A;

  --bg:           #FBF7F0;   /* varm råvit — papper, inte kalk */
  --bg-2:         #F2ECE1;
  --white:        #FFFFFF;
  --text:         #201A14;
  --text-light:   #6A6055;
  --border:       #E6DDCE;

  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Rubrikstacken: tung grotesk med tät spärrning. Enbart systemfonter —
     Avenir Next på macOS/iOS, Segoe UI på Windows, Roboto på Android. */
  --display: "Avenir Next", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Antikvan finns kvar men bara för ingress och citat. */
  --serif: "Sitka Text", Charter, "Bitstream Charter", Cambria, Georgia, "Times New Roman", serif;

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;
  --shadow:    0 1px 3px rgba(36,28,20,.07), 0 8px 24px rgba(36,28,20,.07);
  --shadow-lg: 0 12px 44px rgba(36,28,20,.18);
  --maxw: 1200px;

  --nav-h: 62px;
}

/* Sektionstoner — styr hubbarnas accentfärg och platshållarnas gradient.
   Tio avdelningar, ett system: allt är dragit mot varm jord och jade. */
.t1  { --tone: #8A6212; --tone-2: #C79A2E; }  /* sevardheter — tempelguld */
.t2  { --tone: #2F6B4A; --tone-2: #59A17A; }  /* utflykter — bergsgroen */
.t3  { --tone: #B04E15; --tone-2: #DE8534; }  /* aktiviteter — energisk oranger */
.t4  { --tone: #B33A22; --tone-2: #DF6C48; }  /* mat och dryck — chili */
.t5  { --tone: #6E6357; --tone-2: #A09383; }  /* boende — dampad teak/lera */
.t6  { --tone: #3F6478; --tone-2: #6E96AA; }  /* transport — blaagraa */
.t7  { --tone: #2A6497; --tone-2: #5A93C1; }  /* planera resan — lugn blaa */
.t8  { --tone: #6B5B8A; --tone-2: #9A88B8; }  /* praktiskt — lilagraa */
.t9  { --tone: #1F6E68; --tone-2: #46A099; }  /* haelsa och saekerhet — teal */
.t10 { --tone: #3E3226; --tone-2: #7A6446; }  /* bo i Chiang Mai — moerk teak */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); }
body { font-family: var(--sans); color: var(--text); background: var(--white); line-height: 1.7; overflow-x: hidden; }
/* height: auto ar INTE valfritt. bygg.py skriver width- och height-attribut pa
   varje <img> for att halla undan CLS, och height="1280" blir en definitiv
   hojd i CSS om ingen regel sager emot. Da ignoreras aspect-ratio pa
   .kort-bild och bilden dras ut pa hojden. De regler som medvetet satter
   height (karusell, hero, sektionskort) ligger senare och vinner anda. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent); }
button { font-family: inherit; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 1.12; letter-spacing: -.035em; color: var(--text); }
h1 { font-size: clamp(2.05rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); }
h3 { font-size: 1.3rem; letter-spacing: -.025em; }
h4 { font-size: 1.06rem; letter-spacing: -.015em; }
p { margin-bottom: 1.05rem; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }
.narrow { max-width: 780px; }

.section { padding: 3.6rem 0; }
.section.alt { background: var(--bg); }
.section.tight { padding: 2.4rem 0; }
.section-head { max-width: 680px; margin: 0 auto 2.4rem; text-align: center; }
.section-head.left { text-align: left; margin-left: 0; }
.eyebrow { display: block; color: var(--accent); font-family: var(--sans); font-weight: 700; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }
.section-head h2 { margin: .45rem 0 .6rem; }
.section-head p { color: var(--text-light); font-family: var(--serif); font-size: 1.08rem; margin: 0; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--brand-d); color: #fff; padding: .7rem 1.1rem; z-index: 999; }
.skip-link:focus { left: 0; color: #fff; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- Topp-nav ------------------------------------------------- */
.site-nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.97); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); box-shadow: inset 0 -3px 0 -2px rgba(217,162,39,.5); }
/* Headern är bredare än innehållet — sju sektioner plus portal-pillret
   får annars inte plats på 1200 px. */
.nav-inner { max-width: 1340px; margin: 0 auto; padding: .5rem 1.25rem; display: flex; align-items: center; gap: .8rem; min-height: var(--nav-h); }
.nav-logo { display: flex; align-items: center; gap: .6rem; font-family: var(--display); font-weight: 800; font-size: 1.22rem; color: var(--brand-d); letter-spacing: -.045em; white-space: nowrap; }
.nav-logo:hover { color: var(--brand-d); }
.nav-logo-icon { width: 38px; height: 38px; border-radius: 11px; overflow: hidden; flex: none; box-shadow: 0 1px 4px rgba(36,28,20,.24); }
.nav-logo-icon svg { width: 100%; height: 100%; display: block; }
.nav-logo-text em { font-style: normal; color: var(--accent); }
.nav-menu { display: flex; align-items: center; gap: .1rem; margin-left: auto; }
.nav-link { display: block; padding: .5rem .55rem; border-radius: var(--r-sm); font-size: .87rem; font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap; background: none; border: none; }
.nav-link:hover { background: var(--bg-2); color: var(--brand); }
.nav-link[aria-current="page"] { color: var(--brand); box-shadow: inset 0 -3px 0 var(--gold); }

/* Portal-pillret (Bo i Chiang Mai) — visuellt avskilt från resemenyn. */
.nav-portal { margin-left: .5rem; padding: .48rem .85rem; border-radius: 999px; background: var(--brand-d); color: #fff !important; font-size: .87rem; font-weight: 700; white-space: nowrap; display: flex; align-items: center; gap: .4rem; }
.nav-portal:hover { background: var(--accent); color: #fff !important; }
.nav-sep { width: 1px; height: 26px; background: var(--border); margin: 0 .3rem; flex: none; }

.nav-dropdown { position: relative; }
.dropdown-menu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(8px); background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--gold); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: .55rem; display: flex; flex-direction: column; min-width: 268px; max-width: 340px; opacity: 0; visibility: hidden; transition: opacity .16s, transform .16s, visibility .16s; }
.dropdown-menu > a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem .7rem; border-radius: 7px; font-size: .92rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.dropdown-menu > a:hover { background: var(--bg); color: var(--accent); }
.dropdown-menu > a small { font-family: var(--sans); font-size: .72rem; font-weight: 700; color: var(--text-light); background: var(--bg); border-radius: 999px; padding: .08rem .42rem; flex: none; }
.dropdown-menu > a:hover small { background: var(--white); }
.nav-dropdown:hover > .dropdown-menu,
.nav-dropdown:focus-within > .dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-dd-right > .dropdown-menu { left: auto; right: 0; transform: translateX(0) translateY(8px); }
.nav-dd-right:hover > .dropdown-menu,
.nav-dd-right:focus-within > .dropdown-menu { transform: translateX(0) translateY(0); }
.dropdown-col h4 { font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--text-light); margin-bottom: .5rem; }
.dropdown-col a { display: block; padding: .24rem 0; font-size: .89rem; font-weight: 500; color: var(--text); }
.dropdown-col a:hover { color: var(--accent); }
.dropdown-col a.more { color: var(--accent); font-weight: 700; margin-top: .3rem; }
.dropdown-foot { border-top: 1px solid var(--border); margin-top: .4rem; padding: .6rem .7rem .25rem; }
.dropdown-foot a { font-size: .86rem; font-weight: 700; color: var(--brand); }

.btn-icon { background: none; border: none; padding: .45rem .5rem; cursor: pointer; color: var(--text-light); font-size: 1.1rem; border-radius: var(--r-sm); line-height: 1; }
.btn-icon:hover { background: var(--bg-2); color: var(--brand); }
.nav-toggle { display: none; }

/* ---------- Mobilmeny ------------------------------------------------ */
.mobil-meny { position: fixed; inset: 0; z-index: 200; background: var(--white); overflow-y: auto; transform: translateX(100%); transition: transform .24s ease; visibility: hidden; }
.mobil-meny.open { transform: translateX(0); visibility: visible; }
.mobil-topp { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1.25rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--white); }
.mobil-stang { background: none; border: none; font-size: 1.7rem; line-height: 1; cursor: pointer; color: var(--text); padding: .1rem .5rem; }
.mobil-lista { padding: .6rem 1.25rem 3rem; }
.mobil-grupp { border-bottom: 1px solid var(--border); }
.mobil-knapp { width: 100%; display: flex; align-items: center; gap: .7rem; padding: .95rem .2rem; background: none; border: none; font-size: 1.04rem; font-weight: 800; font-family: var(--display); letter-spacing: -.025em; color: var(--text); cursor: pointer; text-align: left; }
.mobil-knapp .pil { margin-left: auto; color: var(--text-light); transition: transform .2s; font-size: .9rem; }
.mobil-grupp.open .pil { transform: rotate(90deg); }
.mobil-inner { display: none; padding: 0 0 .9rem .2rem; }
.mobil-grupp.open .mobil-inner { display: block; }
.mobil-inner a { display: block; padding: .46rem 0 .46rem 1.9rem; font-size: .95rem; color: var(--text); }
.mobil-inner a.hub { font-weight: 700; color: var(--brand); padding-left: 1.9rem; }
.mobil-portal { display: block; margin: 1.2rem 0 .4rem; padding: .95rem 1.1rem; border-radius: var(--r); background: var(--brand-d); color: #fff !important; font-weight: 700; }
.mobil-verktyg { margin-top: 1.4rem; }
.mobil-verktyg h4 { font-family: var(--sans); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-light); margin-bottom: .5rem; }

/* ---------- Knappar -------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .82rem 1.55rem; border-radius: var(--r-sm); font-weight: 700; font-size: .97rem; cursor: pointer; border: 2px solid transparent; transition: .15s; text-align: center; letter-spacing: -.01em; }
.btn-primary { background: var(--accent); color: #fff !important; }
.btn-primary:hover { background: var(--accent-h); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(164,90,14,.34); }
.btn-brand { background: var(--brand); color: #fff !important; }
.btn-brand:hover { background: var(--brand-d); transform: translateY(-1px); }
.btn-ghost { background: rgba(255,255,255,.14); color: #fff !important; border-color: rgba(255,255,255,.6); backdrop-filter: blur(4px); }
.btn-ghost:hover { background: rgba(255,255,255,.26); }
.btn-outline { background: var(--white); color: var(--brand) !important; border-color: var(--border); }
.btn-outline:hover { border-color: var(--brand); background: var(--bg); }
.btn-lg { padding: 1rem 1.9rem; font-size: 1.05rem; }

/* ---------- Bildplatshållare ----------------------------------------- */
/* Sajten byggs innan alla foton finns. En platshållare ska se avsiktlig ut,
   aldrig som ett trasigt bildkryss. */
.ph { background: linear-gradient(135deg, var(--tone, var(--brand)) 0%, var(--tone-2, var(--brand-l)) 100%); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.5); font-size: 2.2rem; position: relative; overflow: hidden; }
.ph::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.11) 0 1px, transparent 1px 13px); }
.ph span { position: relative; z-index: 1; }

/* ---------- Karusell (förstasidan) ----------------------------------- */
/* Ingen textplatta över karusellen — läsbarheten bärs av textskugga och
   kontur, precis som på systersajterna. */
.karusell { position: relative; height: min(86vh, 780px); min-height: 540px; background: var(--brand-d); overflow: hidden; }
.karusell-bild { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.karusell-bild.aktiv { opacity: 1; }
.karusell-bild img, .karusell-bild.ph { width: 100%; height: 100%; object-fit: cover; }
.karusell-inner { position: relative; z-index: 2; height: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem 3.4rem; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; color: #fff; }
.karusell h1 { color: #fff; max-width: 20ch; margin-bottom: .7rem; text-shadow: 0 2px 5px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.7), 0 6px 34px rgba(0,0,0,.7); -webkit-text-stroke: .5px rgba(0,0,0,.24); }
.karusell .lead { font-family: var(--serif); font-size: clamp(1.04rem, 2vw, 1.24rem); max-width: 48ch; margin-bottom: 1.5rem; color: #fff; text-shadow: 0 2px 5px rgba(0,0,0,.9), 0 1px 2px rgba(0,0,0,.8), 0 4px 22px rgba(0,0,0,.7); }
.karusell-knappar { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center; }
.karusell-prickar { position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: .45rem; }
.karusell-prickar button { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(255,255,255,.45); cursor: pointer; padding: 0; transition: .2s; }
.karusell-prickar button.aktiv { background: var(--gold-l); width: 26px; border-radius: 999px; }

/* ---------- Sidhuvud med bild (alla andra sidor) --------------------- */
.page-hero { position: relative; min-height: 330px; display: flex; align-items: flex-end; color: #fff; background: var(--brand-d); }
.page-hero > img, .page-hero > .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero .inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; width: 100%; padding: 2.6rem 1.25rem 2.2rem; }
.kicker { display: inline-block; background: var(--accent); color: #fff; font-family: var(--sans); font-weight: 700; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; padding: .3rem .85rem; border-radius: 999px; margin-bottom: .85rem; box-shadow: 0 2px 10px rgba(0,0,0,.28); }
.page-hero h1 { color: #fff; margin: 0 0 .55rem; max-width: 22ch; text-shadow: 0 2px 5px rgba(0,0,0,.9), 0 1px 2px rgba(0,0,0,.8), 0 6px 30px rgba(0,0,0,.72); -webkit-text-stroke: .4px rgba(0,0,0,.2); }
.page-hero p { font-family: var(--serif); color: #fff; font-size: 1.12rem; max-width: 52ch; margin: 0; text-shadow: 0 2px 5px rgba(0,0,0,.92), 0 1px 2px rgba(0,0,0,.85), 0 4px 24px rgba(0,0,0,.72); }

/* ---------- Brödsmulor ------------------------------------------------ */
.breadcrumb { background: var(--bg); border-bottom: 1px solid var(--border); font-size: .84rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .38rem; padding: .68rem 0; align-items: center; }
.breadcrumb li { color: var(--text-light); }
.breadcrumb li a { color: var(--text-light); }
.breadcrumb li a:hover { color: var(--accent); }
.breadcrumb li::after { content: "/"; margin-left: .38rem; color: #C9BCA6; }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb li:last-child { color: var(--text); font-weight: 600; }

/* ---------- Kort ------------------------------------------------------ */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(226px, 1fr)); }

.kort { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s; color: var(--text); }
.kort:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: var(--text); }
.kort-bild { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; background: var(--bg-2); }
.kort-kropp { padding: 1.05rem 1.15rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.kort h3 { font-size: 1.14rem; margin-bottom: .35rem; }
.kort:hover h3 { color: var(--accent); }
.kort p { font-size: .91rem; color: var(--text-light); margin: 0; }
.kort .kort-tagg { font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tone, var(--brand)); margin-bottom: .35rem; }

/* Sektionskort på förstasidan */
.sektionskort { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; min-height: 220px; color: #fff; box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s; }
.sektionskort:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: #fff; }
.sektionskort > img, .sektionskort > .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sektionskort::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,26,18,.05) 30%, rgba(14,26,18,.8) 100%); }
.sektionskort .sk-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.3rem; min-height: 220px; }
.sektionskort .sk-ikon { font-size: 1.5rem; margin-bottom: .3rem; }
.sektionskort h3 { color: #fff; font-size: 1.32rem; margin-bottom: .2rem; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.sektionskort p { color: rgba(255,255,255,.9); font-size: .88rem; margin: 0; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.sektionskort .sk-antal { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-l); margin-top: .55rem; text-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* Kompakta länklistor på hubbar */
.lankkort { display: block; padding: 1rem 1.15rem; background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--tone, var(--brand)); border-radius: var(--r-sm); box-shadow: var(--shadow); transition: .16s; }
.lankkort:hover { transform: translateX(3px); border-left-color: var(--accent); }
.lankkort strong { display: block; font-family: var(--display); font-weight: 800; letter-spacing: -.025em; font-size: 1.04rem; margin-bottom: .18rem; color: var(--text); }
.lankkort span { font-size: .87rem; color: var(--text-light); }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .85rem; background: var(--white); border: 1px solid var(--border); border-radius: 999px; font-size: .87rem; font-weight: 600; color: var(--text); }
.chip:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Underhubbsrad på hubbsidan -------------------------------- */
.hub-nav { background: var(--bg); border-bottom: 1px solid var(--border); position: sticky; top: var(--nav-h); z-index: 60; }
.hub-nav .wrap { display: flex; gap: .4rem; overflow-x: auto; padding-top: .55rem; padding-bottom: .55rem; scrollbar-width: none; }
.hub-nav .wrap::-webkit-scrollbar { display: none; }
.hub-nav a { flex: none; padding: .38rem .85rem; border-radius: 999px; font-size: .86rem; font-weight: 600; color: var(--text); background: var(--white); border: 1px solid var(--border); white-space: nowrap; }
.hub-nav a:hover { border-color: var(--accent); color: var(--accent); }

.hub-grupp { margin-bottom: 3rem; }
.hub-grupp:last-child { margin-bottom: 0; }
.hub-grupp-huvud { display: flex; align-items: baseline; gap: .7rem; margin-bottom: 1.2rem; padding-bottom: .6rem; border-bottom: 2px solid var(--tone, var(--border)); }
.hub-grupp-huvud h2 { margin: 0; }
.hub-grupp-huvud .antal { font-family: var(--sans); font-size: .8rem; color: var(--text-light); margin-left: auto; white-space: nowrap; }
.hub-grupp > p.grupp-blurb { color: var(--text-light); margin: -.6rem 0 1.3rem; max-width: 62ch; }

/* ---------- Artikeltext ---------------------------------------------- */
.artikel { padding: 2.6rem 0 3.4rem; }
.artikel-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; align-items: start; }
.artikel-text { max-width: 74ch; font-size: 1.06rem; }
.artikel-text > h2 { margin: 2.4rem 0 .9rem; padding-top: .3rem; }
.artikel-text > h3 { margin: 1.8rem 0 .7rem; }
.artikel-text ul, .artikel-text ol { margin: 0 0 1.15rem 1.3rem; }
.artikel-text li { margin-bottom: .45rem; }
.artikel-text > p:first-of-type { font-family: var(--serif); font-size: 1.19rem; line-height: 1.62; color: #4A3F33; }
.artikel-text a { text-decoration: underline; text-decoration-color: rgba(20,80,60,.38); text-underline-offset: 2px; }
.artikel-text a:hover { text-decoration-color: var(--accent); }
.artikel-figur, .article-figure { margin: 1.8rem 0; }
.artikel-figur img, .article-figure img { width: 100%; border-radius: var(--r); }
.artikel-figur figcaption, .article-figure figcaption { font-size: .82rem; color: var(--text-light); margin-top: .45rem; }

.faktaruta { background: var(--brand-soft); border-left: 4px solid var(--brand); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 1.15rem 1.3rem; margin: 1.8rem 0; }
.faktaruta h4 { margin-bottom: .5rem; color: var(--brand-d); }
.faktaruta p:last-child, .faktaruta ul:last-child { margin-bottom: 0; }
.tips { background: var(--gold-soft); border-left: 4px solid var(--gold); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 1.15rem 1.3rem; margin: 1.8rem 0; }
.tips h4 { margin-bottom: .5rem; color: #7A5209; }
.varning { background: var(--red-soft); border-left: 4px solid var(--red); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 1.15rem 1.3rem; margin: 1.8rem 0; }
.varning h4 { margin-bottom: .5rem; color: #93300F; }
.varning p:last-child, .tips p:last-child { margin-bottom: 0; }
/* Neutral utbrytningsruta när varken fakta, tips eller varning passar. */
.callout { background: var(--bg); border: 1px solid var(--border); border-left: 4px solid var(--tone, var(--accent)); border-radius: 0 var(--r) var(--r) 0; padding: 1.15rem 1.3rem; margin: 1.8rem 0; }
.callout h4 { margin-bottom: .5rem; color: var(--text); }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }

.artikel-text table { width: 100%; border-collapse: collapse; margin: 1.7rem 0; font-size: .94rem; }
.tabell-svep { overflow-x: auto; margin: 1.7rem 0; }
.tabell-svep table { margin: 0; }
.artikel-text th { background: var(--bg-2); text-align: left; padding: .68rem .8rem; font-weight: 700; border-bottom: 2px solid var(--border); }
.artikel-text td { padding: .68rem .8rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.artikel-text tr:last-child td { border-bottom: none; }

.artikel-meta { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; font-size: .84rem; color: var(--text-light); padding-bottom: 1.4rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--border); }

/* Sidokolumn */
.sidokol { position: sticky; top: calc(var(--nav-h) + 1.2rem); font-size: .93rem; }
.sidokol-box { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); padding: 1.15rem 1.25rem; margin-bottom: 1.2rem; }
.sidokol-box h4 { font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--text-light); margin-bottom: .7rem; }
.sidokol-box ul { list-style: none; }
.sidokol-box li { margin-bottom: .45rem; line-height: 1.45; }
.sidokol-box li:last-child { margin-bottom: 0; }
.innehall a { color: var(--text); display: block; padding-left: .8rem; border-left: 2px solid var(--border); }
.innehall a:hover { color: var(--accent); border-left-color: var(--accent); }

.vidare { background: var(--bg); border-top: 1px solid var(--border); padding: 2.8rem 0; }

/* ---------- Verktygsband --------------------------------------------- */
.verktygsband { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.verktygskort { display: flex; flex-direction: column; gap: .3rem; padding: 1.15rem 1.2rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); transition: .16s; }
.verktygskort:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.verktygskort .vk-ikon { font-size: 1.55rem; }
.verktygskort strong { font-family: var(--display); font-weight: 800; letter-spacing: -.025em; font-size: 1.04rem; color: var(--text); }
.verktygskort span { font-size: .85rem; color: var(--text-light); line-height: 1.5; }

/* ---------- Interaktiva verktyg --------------------------------------- */
.verktyg-val { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); padding: 1.3rem 1.4rem; margin-bottom: 2rem; }
.valj-rad { margin-bottom: 1.2rem; }
.valj-rad:last-child { margin-bottom: 0; }
.valj-rad > strong, .valj-rad > label { display: block; margin-bottom: .6rem; font-size: .95rem; }
.valj-rad select, .valj-rad input[type="number"] { width: 100%; max-width: 280px; padding: .6rem .8rem; font-family: inherit; font-size: 1rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--white); color: var(--text); }
.valj-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.valj-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .48rem .9rem; background: var(--white); border: 1px solid var(--border); border-radius: 999px; font-size: .9rem; font-weight: 600; cursor: pointer; user-select: none; transition: .14s; }
.valj-chip:hover { border-color: var(--brand-l); }
.valj-chip input { margin: 0; cursor: pointer; accent-color: var(--brand); }
.valj-chip:has(input:checked) { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-d); }

.verktyg-resultat h3 { display: flex; align-items: baseline; gap: .6rem; margin: 1.8rem 0 .8rem; padding-bottom: .5rem; border-bottom: 2px solid var(--border); }
.verktyg-resultat h3:first-child { margin-top: 0; }
.verktyg-resultat h3 .antal { margin-left: auto; font-family: var(--sans); font-size: .78rem; font-weight: 400; color: var(--text-light); }
.packlista { list-style: none; }
.packlista li { padding: .6rem 0 .6rem 2rem; border-bottom: 1px solid var(--border); position: relative; line-height: 1.55; }
.packlista li:last-child { border-bottom: none; }
.packlista li::before { content: "☐"; position: absolute; left: .3rem; top: .55rem; color: var(--brand-l); font-size: 1.05rem; }
.packlista li.klar { color: var(--text-light); }
.packlista li.klar::before { content: "☑"; color: var(--green); }
.packlista li.klar .pk-text { text-decoration: line-through; }
/* Avbockningen ska vara en riktig <button> for tangentbord och skarmlasare,
   men se ut som text. Darav nollstallningen. */
.packlista .pk-text { cursor: pointer; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; }
.packlista .pk-text:hover { color: var(--accent); }
.packlista .pk-not { display: block; font-size: .87rem; color: var(--text-light); margin-top: .2rem; }
.verktyg-tom { padding: 1.4rem; background: var(--bg); border-radius: var(--r); color: var(--text-light); }
.verktyg-summa { margin-top: 1.6rem; padding: .9rem 1.1rem; background: var(--brand-soft); border-radius: var(--r-sm); font-size: .93rem; font-weight: 600; color: var(--brand-d); }

/* ---------- Portalband (Bo i Chiang Mai) ------------------------------ */
/* Portalen ska kännas som en egen, mörkare avdelning — jade som glider
   över i teak. Guldet är enda ljuspunkten. */
.portalband { background: linear-gradient(135deg, var(--brand-d) 0%, #123A2C 52%, var(--teak) 100%); color: #fff; padding: 3.2rem 0; }
.portalband h2 { color: #fff; }
.portalband p { color: rgba(255,255,255,.92); }
.portalband .eyebrow { color: var(--gold-l); }
.portal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-top: 1.8rem; }
.portal-kort { display: block; padding: 1.1rem 1.2rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: var(--r); color: #fff !important; transition: .16s; }
.portal-kort:hover { background: rgba(255,255,255,.19); transform: translateY(-2px); border-color: rgba(217,162,39,.55); }
.portal-kort strong { display: block; font-family: var(--display); font-weight: 800; letter-spacing: -.025em; font-size: 1.06rem; margin-bottom: .18rem; }
.portal-kort span { font-size: .85rem; color: rgba(255,255,255,.85); }

/* ---------- Sök ------------------------------------------------------- */
.sok-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(20,32,24,.58); backdrop-filter: blur(3px); display: none; padding: 8vh 1.25rem 1.25rem; }
.sok-overlay.open { display: block; }
.sok-box { max-width: 640px; margin: 0 auto; background: var(--white); border-radius: var(--r); box-shadow: var(--shadow-lg); overflow: hidden; }
.sok-box input { width: 100%; border: none; padding: 1.15rem 1.3rem; font-size: 1.1rem; font-family: inherit; outline: none; }
.sok-traffar { max-height: 60vh; overflow-y: auto; border-top: 1px solid var(--border); }
.sok-traffar a { display: block; padding: .8rem 1.3rem; border-bottom: 1px solid var(--border); color: var(--text); }
.sok-traffar a:hover { background: var(--bg); }
.sok-traffar strong { display: block; font-weight: 600; }
.sok-traffar span { font-size: .82rem; color: var(--text-light); }
.sok-tom { padding: 1.1rem 1.3rem; color: var(--text-light); font-size: .92rem; }

/* ---------- Sidfot ---------------------------------------------------- */
.sidfot { background: var(--brand-d); color: rgba(255,255,255,.78); padding: 2.4rem 0 1.3rem; font-size: .92rem; border-top: 4px solid var(--gold); }
.sidfot h4 { color: #fff; font-family: var(--sans); font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .85rem; }
.sidfot a { color: rgba(255,255,255,.78); }
.sidfot a:hover { color: var(--gold-l); }
.sidfot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr; gap: 1.6rem 2.2rem; align-items: start; }
.sidfot ul { list-style: none; }
.sidfot li { margin-bottom: .3rem; }
.sidfot-om p { color: rgba(255,255,255,.75); font-size: .89rem; max-width: 34ch; }
.sidfot-logo { display: flex; align-items: center; gap: .55rem; font-family: var(--display); font-weight: 800; letter-spacing: -.04em; font-size: 1.2rem; color: #fff; margin-bottom: .7rem; }
.sidfot-botten { border-top: 1px solid rgba(255,255,255,.16); margin-top: 1.7rem; padding-top: 1.1rem; display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; font-size: .84rem; color: rgba(255,255,255,.62); }
.sidfot-botten .hoger { margin-left: auto; }

/* ---------- Cookiebanner ---------------------------------------------- */
.cookie-banner { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 400; max-width: 640px; margin: 0 auto; background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--gold); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 1.15rem 1.3rem; display: none; }
.cookie-banner.visa { display: block; }
.cookie-banner p { font-size: .9rem; margin-bottom: .9rem; }
.cookie-knappar { display: flex; gap: .6rem; flex-wrap: wrap; }
.cookie-knappar .btn { padding: .6rem 1.15rem; font-size: .9rem; }

/* ---------- Diverse --------------------------------------------------- */
.notis { background: var(--bg); border: 1px dashed var(--border); border-radius: var(--r); padding: 1.1rem 1.25rem; color: var(--text-light); font-size: .93rem; }
.lista-ren { list-style: none; }
.centrerat { text-align: center; }
.mt-2 { margin-top: 2rem; }
.text-light { color: var(--text-light); }

/* ---------- Responsivt ------------------------------------------------ */
@media (max-width: 1080px) {
  .artikel-layout { grid-template-columns: 1fr; gap: 2rem; }
  .sidokol { position: static; }
  .sidokol-box.innehall-box { display: none; }
}

/* Krympsteg: sju sektioner plus portal-pillret ryms bekvämt över ~1300 px,
   men mellan 1160 och 1300 behöver menyn dras ihop för att aldrig brytas
   till två rader. Samma grepp som på systersajterna. */
@media (max-width: 1300px) {
  .nav-inner { gap: .55rem; }
  .nav-menu { gap: 0; }
  .nav-link { padding: .45rem .42rem; font-size: .83rem; }
  .nav-portal { margin-left: .35rem; padding: .44rem .72rem; font-size: .83rem; }
  .nav-sep { margin: 0 .2rem; }
  .nav-logo { font-size: 1.12rem; }
  .nav-logo-icon { width: 34px; height: 34px; border-radius: 10px; }
}

/* Under 1160 px: hamburgare + drawer. Menyn hinner aldrig radbrytas. */
@media (max-width: 1159px) {
  .nav-menu, .nav-sep, .nav-portal { display: none; }
  .nav-toggle { display: block; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text); padding: .2rem .45rem; line-height: 1; }
  .nav-inner { gap: .5rem; }
  .nav-logo { font-size: 1.2rem; }
  .nav-logo-icon { width: 38px; height: 38px; border-radius: 11px; }
  .karusell { height: min(72vh, 560px); min-height: 420px; }
  .karusell-inner { padding-bottom: 2.8rem; }
  .section { padding: 2.8rem 0; }
  .sidfot-grid { grid-template-columns: 1fr 1fr; }
  .sidfot-om { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  h1 { font-size: 1.9rem; }
  .artikel-text { font-size: 1.02rem; }
  .artikel-text > p:first-of-type { font-size: 1.11rem; }
  .page-hero { min-height: 260px; }
  .page-hero .inner { padding: 1.8rem 1.25rem 1.6rem; }
  .grid { gap: 1.1rem; }
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .sidfot-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .sidfot-botten .hoger { margin-left: 0; }
  .karusell h1 { font-size: 1.8rem; }
  .kort-bild { aspect-ratio: 16 / 9; }
}

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

@media print {
  .site-nav, .hub-nav, .sidokol, .vidare, .sidfot, .cookie-banner, .karusell-prickar { display: none !important; }
  body { font-size: 11pt; }
  .artikel-layout { grid-template-columns: 1fr; }
}