/* ==========================================================================
   Costablancaguiden.se — huvudstilmall
   Palett: medelhavsblått + terrakotta + kalkvit sand. Rubriker i antikva
   för en redaktionell, tidskriftslik känsla.
   ========================================================================== */

:root {
  --brand:        #0E6187;   /* medelhavsblaa */
  --brand-d:      #093F58;
  --brand-l:      #2C8CB6;
  --brand-soft:   #E4F1F7;

  --accent:       #D9622C;   /* terrakotta */
  --accent-h:     #bd5023;
  --accent-soft:  #FCEADF;

  --gold:         #DFA23A;   /* sol, salt, sand */
  --gold-soft:    #FAF0DA;
  --rose:         #C9648B;   /* saltsjoen i Torrevieja */
  --green:        #3F8F6E;

  --bg:           #F8F5EF;   /* kalkvit */
  --bg-2:         #EFE9DF;
  --white:        #FFFFFF;
  --text:         #1B2A31;
  --text-light:   #63727A;
  --border:       #E5DED2;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;
  --shadow:    0 1px 3px rgba(16,40,55,.06), 0 8px 24px rgba(16,40,55,.06);
  --shadow-lg: 0 12px 44px rgba(16,40,55,.16);
  --maxw: 1200px;

  --nav-h: 62px;
}

/* Sektionstoner — styr hubbarnas accentfärg och platshållarnas gradient. */
.t1  { --tone: #0E6187; --tone-2: #2C8CB6; }  /* destinationer */
.t2  { --tone: #148A9C; --tone-2: #34B0B4; }  /* strander */
.t3  { --tone: #8A5A2B; --tone-2: #C08A48; }  /* sevardheter */
.t4  { --tone: #3F8F6E; --tone-2: #63B48D; }  /* aktiviteter */
.t5  { --tone: #C0492B; --tone-2: #E0774A; }  /* mat och dryck */
.t6  { --tone: #5B6BA8; --tone-2: #8290C6; }  /* boende */
.t7  { --tone: #2F7391; --tone-2: #549DB8; }  /* transport */
.t8  { --tone: #7A6099; --tone-2: #A188BC; }  /* praktiskt */
.t9  { --tone: #B4813A; --tone-2: #D6A85F; }  /* reseguider */
.t10 { --tone: #385E70; --tone-2: #5E8B9C; }  /* bo och flytta hit */

* { 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(--serif); font-weight: 700; line-height: 1.18; letter-spacing: -.01em; color: var(--text); }
h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.28rem; }
h4 { font-size: 1.06rem; }
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: .14em; text-transform: uppercase; }
.section-head h2 { margin: .45rem 0 .6rem; }
.section-head p { color: var(--text-light); font-size: 1.06rem; margin: 0; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--brand); 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); }
/* Headern är bredare än innehållet — nio sektioner plus portal-pillret
   får annars inte plats på 1200 px. */
.nav-inner { max-width: 1400px; margin: 0 auto; padding: .5rem 1.25rem; display: flex; align-items: center; gap: .55rem; min-height: var(--nav-h); flex-wrap: nowrap; }
.nav-logo { display: flex; align-items: center; gap: .5rem; font-family: var(--serif); font-weight: 700; font-size: 1.14rem; color: var(--brand-d); letter-spacing: -.02em; white-space: nowrap; flex: none; }
.nav-logo:hover { color: var(--brand-d); }
.nav-logo-icon { width: 34px; height: 34px; border-radius: 11px; overflow: hidden; flex: none; box-shadow: 0 1px 4px rgba(16,40,55,.2); }
.nav-logo-icon svg { width: 100%; height: 100%; display: block; }
.nav-logo-text em { font-style: normal; color: var(--accent); }
/* Toppdomanen ar en del av namnet och ska LASA som en del av det.
   0,72em blev en fotnot: ordet foll isar i tva olika storlekar. Nu
   nastan full storlek — det ar fargen som skiljer den, inte skalan. */
.nav-logo-tld { font-size: .94em; color: var(--text-light); letter-spacing: -.01em; }
.sidfot-logo .nav-logo-tld { color: rgba(255,255,255,.66); }
.nav-menu { display: flex; align-items: center; gap: .1rem; margin-left: auto; }
.nav-link { display: block; padding: .5rem .4rem; border-radius: var(--r-sm); font-size: .82rem; font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap; background: none; border: none; }
.nav-link:hover { background: var(--bg); color: var(--brand); }
.nav-link[aria-current="page"] { color: var(--brand); box-shadow: inset 0 -2px 0 var(--accent); }

/* Portal-pillret (Bo & flytta hit) — visuellt avskilt från resemenyn. */
.nav-portal { margin-left: .35rem; padding: .45rem .7rem; flex: none; border-radius: 999px; background: var(--brand-d); color: #fff !important; font-size: .82rem; 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; }
/* En smal panel med ett led — inte en vägg av artikellänkar. Se dropdown()
   i bygg.py. Bredden räcker till gruppnamn plus antal, inget mer. */
.dropdown-menu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(8px); background: var(--white); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: .6rem; min-width: 272px; max-width: 320px; opacity: 0; visibility: hidden; transition: opacity .16s, transform .16s, visibility .16s; }
.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-lista a { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .46rem .6rem; border-radius: 7px; font-size: .9rem; font-weight: 500; color: var(--text); }
.dropdown-lista a:hover { background: var(--bg-2); color: var(--brand); }
.dropdown-lista em { font-style: normal; font-size: .74rem; font-variant-numeric: tabular-nums; color: var(--text-light); }
.dropdown-lista a:hover em { color: var(--brand); }
.dropdown-foot { border-top: 1px solid var(--border); margin-top: .45rem; padding: .7rem .6rem .3rem; display: flex; flex-direction: column; gap: .35rem; }
.dropdown-foot a { font-size: .85rem; font-weight: 700; color: var(--brand); }
.dropdown-foot a.more { color: var(--accent); }

.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); 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: 700; font-family: var(--serif); 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: .11em; 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; }
.btn-primary { background: var(--accent); color: #fff !important; }
.btn-primary:hover { background: var(--accent-h); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(217,98,44,.36); }
.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: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size: 14px 14px; }
.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å kanarieguiden. */
.karusell { position: relative; height: min(82vh, 760px); min-height: 500px; 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; }
/* INGET filter över bilden. Den låg tidigare under en heltäckande gradient
   som tog bort både färg och djup. Läsbarheten löses i stället lokalt på
   texten — se .karusell h1 / .lead nedan. Lägg aldrig tillbaka ::after här. */
.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; }
/* Läsbarhet utan filter: en tät kontur som håller bokstavskanten mot ljus
   himmel, plus en vid mörk halo som bara syns runt texten och inte lägger sig
   som en hinna över motivet. Halon är knappt märkbar på mörka bilder och gör
   jobbet på ljusa. Ordningen spelar roll — konturen först, halon sist. */
.karusell h1, .karusell .lead, .page-hero h1, .page-hero p {
  text-shadow:
    0 1px 1px rgba(4,14,20,.92),
    0 -1px 1px rgba(4,14,20,.55),
    1px 0 1px rgba(4,14,20,.55),
    -1px 0 1px rgba(4,14,20,.55),
    0 2px 10px rgba(4,14,20,.85),
    0 6px 34px rgba(4,14,20,.72);
}
.karusell h1 { color: #fff; max-width: 20ch; margin-bottom: .7rem; }
.karusell .lead { font-size: clamp(1.02rem, 2vw, 1.22rem); max-width: 48ch; margin-bottom: 1.5rem; color: #fff; }
.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: #fff; 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; }
/* Inget ::after-filter här heller. Se kommentaren vid .karusell. */
.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: .1em; 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; }
.page-hero p { color: #fff; font-size: 1.1rem; max-width: 52ch; margin: 0; }
.hero-kredit { position: absolute; right: .8rem; bottom: .4rem; z-index: 3; font-size: .66rem; color: rgba(255,255,255,.7); }
.hero-kredit a { color: inherit; text-decoration: underline; }

/* ---------- 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: var(--border); }
.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.12rem; 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: .1em; 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(9,25,35,.05) 30%, rgba(9,25,35,.78) 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.3rem; 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: .06em; text-transform: uppercase; color: rgba(255,255,255,.8); margin-top: .55rem; }

/* 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(--serif); font-size: 1.04rem; margin-bottom: .18rem; color: var(--text); }
.lankkort span { font-size: .87rem; color: var(--text-light); }
/* Rutnat for lankkort — anvands pa /verktyg. Tva spalter fran 620 px. */
.lankkort-grid { display: grid; gap: .8rem; margin: 1.6rem 0 2.2rem; }
@media (min-width: 620px) { .lankkort-grid { grid-template-columns: 1fr 1fr; } }

.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(--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-size: 1.16rem; color: #2c3d45; }
.artikel-text a { text-decoration: underline; text-decoration-color: rgba(14,97,135,.35); text-underline-offset: 2px; }
.artikel-text a:hover { text-decoration-color: var(--accent); }
.artikel-figur { margin: 1.8rem 0; }
.artikel-figur img { width: 100%; border-radius: var(--r); }
.artikel-figur 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: #8a6320; }
.varning { background: var(--accent-soft); border-left: 4px solid var(--accent); 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: var(--accent-h); }
.varning p:last-child, .tips p: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; letter-spacing: .11em; 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(--serif); 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 { 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; }
.packlista .pk-text { cursor: pointer; }
.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); }

/* ---------- Väderkalendern -------------------------------------------- */
.vk-bad { padding: 1.1rem 1.3rem; border-radius: var(--r); border-left: 5px solid var(--tone, var(--brand)); background: var(--tone-soft, var(--brand-soft)); }
.vk-bad strong { display: block; font-family: var(--serif); font-size: 1.28rem; color: var(--tone-d, var(--brand-d)); margin-bottom: .3rem; }
.vk-bad p { margin: 0; font-size: .96rem; }
.vk-bad-ja      { --tone: var(--green);  --tone-d: #2C6B51; --tone-soft: #E6F3ED; }
.vk-bad-friskt  { --tone: var(--brand);  --tone-d: var(--brand-d); --tone-soft: var(--brand-soft); }
.vk-bad-hardad  { --tone: var(--gold);   --tone-d: #8A6015; --tone-soft: var(--gold-soft); }
.vk-bad-nej     { --tone: var(--accent); --tone-d: #8E3D18; --tone-soft: var(--accent-soft); }

.vk-rutor { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: .7rem; margin-top: 1.2rem; }
.vk-ruta { padding: .8rem .9rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-sm); }
.vk-etikett { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-light); margin-bottom: .25rem; }
.vk-varde { font-family: var(--serif); font-size: 1.5rem; color: var(--text); line-height: 1.1; }
.vk-enhet { font-family: var(--sans); font-size: .8rem; font-weight: 600; color: var(--text-light); }
.vk-not { margin-top: 1.2rem; font-size: .97rem; }
.vk-caption { caption-side: bottom; margin-top: .7rem; font-size: .83rem; color: var(--text-light); text-align: left; line-height: 1.5; }
.vk-tabell th[scope="row"] { white-space: nowrap; }
.bad-mark { display: inline-block; padding: .16rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; background: var(--bg-2); color: var(--text-light); }
.bad-mark.bad-ja     { background: #E6F3ED; color: #2C6B51; }
.bad-mark.bad-friskt { background: var(--brand-soft); color: var(--brand-d); }
.bad-mark.bad-hardad { background: var(--gold-soft); color: #8A6015; }
.bad-mark.bad-nej    { background: var(--accent-soft); color: #8E3D18; }

/* ---------- Strandfiltret --------------------------------------------- */
.valj-rad.valj-kompakt { margin-bottom: .95rem; }
.strand-lista { list-style: none; display: grid; gap: .85rem; }
.strandkort { padding: 1rem 1.15rem; background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--brand-l); border-radius: var(--r-sm); box-shadow: var(--shadow); }
.strandkort h4 { font-family: var(--serif); font-size: 1.1rem; margin: 0 0 .12rem; }
.strandkort h4 a { color: var(--text); }
.strandkort h4 a:hover { color: var(--brand); }
.sk-kommun { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-light); margin-bottom: .5rem; }
.sk-text { font-size: .93rem; line-height: 1.55; margin: 0 0 .6rem; }
.sk-taggar { display: flex; flex-wrap: wrap; gap: .35rem; }
.sk-tagg { font-size: .77rem; font-weight: 600; padding: .18rem .6rem; border-radius: 999px; background: var(--bg-2); color: var(--text-light); }
.sk-tagg.sk-flagg { background: var(--brand-soft); color: var(--brand-d); }
.sk-lank { display: inline-block; margin-top: .55rem; font-size: .88rem; font-weight: 600; }
.sk-ingen-lank { display: inline-block; margin-top: .55rem; font-size: .84rem; color: var(--text-light); }
.verktyg-nollresultat { padding: 1.3rem 1.4rem; background: var(--accent-soft); border-left: 4px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.verktyg-nollresultat strong { display: block; font-family: var(--serif); font-size: 1.14rem; margin-bottom: .35rem; }
.verktyg-nollresultat p { margin: 0 0 .5rem; font-size: .95rem; }
.btn-nollstall { padding: .5rem 1rem; border: 1px solid var(--border); background: var(--white); border-radius: var(--r-sm); font-family: inherit; font-size: .88rem; font-weight: 600; color: var(--text); cursor: pointer; }
.btn-nollstall:hover { border-color: var(--brand-l); color: var(--brand-d); }

/* ---------- Portalband (Bo & flytta hit) ------------------------------ */
.portalband { background: linear-gradient(135deg, var(--brand-d) 0%, #16506B 60%, #2C6E7F 100%); color: #fff; padding: 3.2rem 0; }
.portalband h2 { color: #fff; }
.portalband p { color: rgba(255,255,255,.9); }
.portalband .eyebrow { color: var(--gold); }
.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,.2); border-radius: var(--r); color: #fff !important; transition: .16s; }
.portal-kort:hover { background: rgba(255,255,255,.19); transform: translateY(-2px); }
.portal-kort strong { display: block; font-family: var(--serif); font-size: 1.06rem; margin-bottom: .18rem; }
.portal-kort span { font-size: .85rem; color: rgba(255,255,255,.82); }

/* ---------- Sök ------------------------------------------------------- */
.sok-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(12,30,40,.55); 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 ---------------------------------------------------- */
/* Sidfoten var för hög: 3,2 rem topp, nio sektioner i två kolumner och en
   luftig bottenrad. Nu tätare rader, sektionerna i CSS-columns och mindre
   marginal mot bottenraden — samma innehåll, drygt en tredjedel lägre. */
.sidfot { background: var(--brand-d); color: rgba(255,255,255,.78); padding: 2rem 0 1.1rem; font-size: .9rem; }
.sidfot h4 { color: #fff; font-family: var(--sans); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .5rem; }
.sidfot a { color: rgba(255,255,255,.78); }
.sidfot a:hover { color: var(--gold); }
.sidfot-grid { display: grid; grid-template-columns: 1.5fr 1.3fr .9fr .9fr; gap: 1.2rem 1.8rem; align-items: start; }
.sidfot ul { list-style: none; }
.sidfot li { margin-bottom: .2rem; line-height: 1.5; }
.sidfot-sektioner ul { columns: 2; column-gap: 1.4rem; }
.sidfot-om p { color: rgba(255,255,255,.7); font-size: .86rem; max-width: 40ch; line-height: 1.55; }
/* Identisk med headerns logotyp: samma markup, samma proportioner.
   Accenten ar ljusare har — #D9622C ger bara 3,08:1 mot sidfotens
   bakgrund, #E8814F ger 4,12:1. */
.sidfot-logo { display: flex; align-items: center; gap: .5rem; font-family: var(--serif); font-weight: 700; font-size: 1.14rem; color: #fff; letter-spacing: -.02em; margin-bottom: .45rem; }
.sidfot-logo .nav-logo-text em { color: #E8814F; }
.sidfot-botten { border-top: 1px solid rgba(255,255,255,.16); margin-top: 1.3rem; padding-top: .85rem; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: center; font-size: .8rem; color: rgba(255,255,255,.6); }
.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-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; }
}

/* Tio menyposter plus logotyp och portal-pill kraver ~1 245 px. Brytpunkten
   ligger med marginal over det — spiller menyn ar det har siffran som ska
   hojas, inte nagot annat. */
@media (max-width: 1279px) {
  .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; }
  .karusell { height: min(72vh, 540px); min-height: 400px; }
  .karusell-inner { padding-bottom: 2.8rem; }
  .section { padding: 2.8rem 0; }
  .sidfot-grid { grid-template-columns: 1fr 1fr; gap: 1.1rem 1.6rem; }
}

@media (max-width: 560px) {
  h1 { font-size: 1.85rem; }
  .artikel-text { font-size: 1.02rem; }
  .artikel-text > p:first-of-type { font-size: 1.09rem; }
  .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.75rem; }
  .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; }
}

/* ---------- Marknadskalendern och fiestakalendern --------------------- */
.mk-lista, .fk-lista { list-style: none; }
.mk-post, .fk-post { padding: .95rem 0; border-bottom: 1px solid var(--border); line-height: 1.55; }
.mk-post:last-child, .fk-post:last-child { border-bottom: none; }
.mk-ort, .fk-namn { display: block; font-family: var(--serif); font-size: 1.08rem; font-weight: 700; color: var(--text); }
.mk-typ, .fk-nar { display: inline-block; margin-top: .3rem; padding: .12rem .6rem; background: var(--brand-soft); border-radius: 999px; font-family: var(--sans); font-size: .76rem; font-weight: 600; letter-spacing: .02em; color: var(--brand-d); }
.fk-nar { background: var(--gold-soft); color: #7A5410; }
.mk-plats, .fk-vad { display: block; margin-top: .35rem; font-size: .93rem; }
.mk-storlek, .fk-ort { display: block; margin-top: .2rem; font-size: .87rem; color: var(--text-light); }
.fk-ort { font-weight: 600; color: var(--brand-d); }
.fk-effekt { display: block; margin-top: .45rem; padding: .55rem .8rem; background: var(--accent-soft); border-radius: var(--r-sm); font-size: .89rem; }
.fk-las { display: block; margin-top: .45rem; font-size: .87rem; font-weight: 600; }
.mk-osaker { display: block; margin-top: .45rem; padding: .55rem .8rem; background: var(--bg-2); border-left: 3px solid var(--gold); border-radius: var(--r-sm); font-size: .86rem; color: var(--text-light); }
.verktyg-summa a { color: var(--brand-d); text-decoration: underline; }

/* ---------- Hitta din ort ------------------------------------------------ */
.ortlista { display: grid; gap: 1rem; }
.ortkort { padding: 1.1rem 1.2rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); }
.verktyg-resultat .ortkort h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin: 0 0 .45rem; padding: 0; border: none; font-size: 1.06rem; }
.ortkort .ort-omrade { margin-left: auto; font-family: var(--sans); font-size: .75rem; font-weight: 400; color: var(--text-light); white-space: nowrap; }
.ortkort .ort-mening { margin: 0 0 .7rem; font-size: .95rem; line-height: 1.6; }
.ort-marken { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem .4rem; margin: 0 0 .7rem; padding: 0; }
.ort-marken li { font-size: .78rem; padding: .18rem .62rem; background: var(--bg); border-radius: 999px; color: var(--text-light); white-space: nowrap; }
.ortkort .ort-avstaende { margin: 0 0 .45rem; font-size: .88rem; line-height: 1.55; color: var(--text-light); }
.ortkort .ort-siffror { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--text-light); }
.krav-lista { list-style: none; margin: 0; padding: 0; }
.krav-lista li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem 0; border-bottom: 1px solid var(--border); }
.krav-lista li:last-child { border-bottom: none; }
.krav-namn { font-weight: 600; font-size: .93rem; }
.krav-namn::first-letter { text-transform: uppercase; }
.krav-pris { font-size: .85rem; color: var(--text-light); }
.krav-slapp { margin-left: auto; padding: .34rem .8rem; font-family: inherit; font-size: .82rem; font-weight: 600; color: var(--brand-d); background: var(--brand-soft); border: 1px solid var(--brand-l); border-radius: 999px; cursor: pointer; transition: .14s; }
.krav-slapp:hover { background: var(--brand); border-color: var(--brand); color: var(--white); }
.krav-slapp:focus-visible, .verktyg-resultat:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }