/* ==========================================================================
   Arguineguin.org - main stylesheet (template: Portugalguiden.se)
   Palette: Atlantic teal (the harbour water), sunset orange (the evening light
   over the cement-works headland and the volcanic rock), on a warm sand ground.
   Contrast measured: --brand and --accent on white both >= 4.5:1.
   ========================================================================== */

:root {
  --brand:        #0B6E8A;   /* azulejoblaa */
  --brand-d:      #08485C;   /* indigo / kobolt */
  --brand-l:      #2E93AF;
  --accent:       #C2410C;   /* terrakotta / taktegel */
  --accent-h:     #9A330A;
  --accent-soft:  #FDECE3;
  --blue:         #1E7A8C;   /* atlanten */
  --gold:         #E9A93B;   /* calcada i solnedgang */
  --bg:           #F7F2E9;   /* kalksand */
  --bg-2:         #EDE4D4;
  --white:        #FFFFFF;
  --text:         #22262B;
  --text-light:   #66707A;
  --border:       #E6DCCB;
  --good:         #3F9D77;
  --warn:         #E0A33B;
  --star:         #C2410C;

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

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --shadow: 0 2px 8px rgba(18,35,55,0.06), 0 8px 24px rgba(18,35,55,0.05);
  --shadow-lg: 0 10px 40px rgba(18,35,55,0.13);
  --maxw: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); color: var(--text); background: var(--white); line-height: 1.65; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent); }

h1,h2,h3,h4 { font-weight: 700; line-height: 1.2; color: var(--text); letter-spacing: -0.01em; }
h1 { font-size: clamp(1.8rem, 4vw, 2.7rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.2rem; }
p  { margin-bottom: 1rem; }

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

.section { padding: 3.2rem 0; }
.section.alt { background: var(--bg); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 2.2rem; }
.section-head .eyebrow { color: var(--accent); font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }
.section-head h2 { margin: .4rem 0 .6rem; }
.section-head p { color: var(--text-light); font-size: 1.05rem; }

/* ---------- Topp-nav ---------- */
.site-nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.nav-inner { max-width: var(--maxw); margin: 0 auto; padding: .55rem 1.2rem; display: flex; align-items: center; gap: 1.2rem; }
.nav-logo { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.18rem; color: var(--brand); letter-spacing: -.02em; }
.nav-logo:hover { color: var(--brand); }
.nav-logo-icon { width: 36px; height: 36px; border-radius: 10px; overflow: hidden; display: block; box-shadow: 0 1px 3px rgba(20,40,50,.18); }
.nav-logo-icon svg { width: 100%; height: 100%; display: block; }
.nav-logo-text span { color: var(--accent); }
.nav-menu { display: flex; align-items: center; gap: .05rem; margin-left: auto; }
/* Polstringen og skriftgraden er MAALT, ikke valgt. Ni menypunkter pluss
   logoen krevde 1 197 px mens .nav-inner er kappet til --maxw 1180 - menyen
   rant over sin egen ramme paa ENHVER skjermbredde, ogsaa paa en bred skjerm,
   og dro hele siden med seg i sidelengs rulling. Med verdiene under ligger
   innholdet paa ca. 1 120 px og har luft igjen inne i rammen.
   Endrer du dem, eller legger til et menypunkt: mal om. */
.nav-link { padding: .5rem .5rem; border-radius: var(--r-sm); font-size: .89rem; font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap; }
.nav-link:hover { background: var(--bg); color: var(--brand); }

.nav-dropdown { position: relative; }
.dropdown-menu { position: absolute; top: calc(100% + 6px); 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: 1.2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 1.4rem; min-width: 560px; opacity: 0; visibility: hidden; transition: .18s; }
.nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* Dropdowns längst till höger: högerjustera så de inte ramlar utanför skärmkanten. */
.nav-dropdown.nav-dd-right .dropdown-menu { left: auto; right: 0; transform: translateX(0) translateY(8px); }
.nav-dropdown.nav-dd-right:hover .dropdown-menu, .nav-dropdown.nav-dd-right:focus-within .dropdown-menu { transform: translateX(0) translateY(0); }
/* Tema-dropdown (Planera resan): klickbara teman, smalare än artikel-dropdowns. */
.dropdown-menu.dropdown-themes { min-width: 360px; }
.dropdown-themes .dropdown-col a { font-weight: 600; }
.dropdown-col h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-light); margin-bottom: .55rem; }
.dropdown-col a { display: block; padding: .26rem 0; font-size: .9rem; color: var(--text); font-weight: 500; }
.dropdown-col a:hover { color: var(--accent); }
.dropdown-col a.more { color: var(--accent); font-weight: 700; }

.btn-search-icon { background: none; border: none; padding: .45rem; cursor: pointer; color: var(--text-light); font-size: 1.15rem; border-radius: var(--r-sm); }
.btn-search-icon:hover { background: var(--bg); color: var(--brand); }
.nav-toggle { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text); padding: .2rem .4rem; }

/* ---------- Knappar ---------- */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.5rem; border-radius: var(--r-sm); font-weight: 700; font-size: .98rem; cursor: pointer; border: 2px solid transparent; transition: .15s; }
.btn-primary { background: var(--accent); color: #fff !important; }
.btn-primary:hover { background: var(--accent-h); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(226,112,58,.4); }
.btn-brand { background: var(--brand); color: #fff !important; }
.btn-brand:hover { background: var(--brand-d); transform: translateY(-1px); }
.btn-ghost { background: var(--white); color: var(--brand) !important; border-color: var(--border); }
.btn-ghost:hover { border-color: var(--brand); background: var(--bg); }
.btn-lg { padding: 1rem 1.9rem; font-size: 1.05rem; }

/* ---------- Hero ---------- */
/* Rent bild utan fargfilter - bara en neutral mork toning for lasbarhet. */
.hero { position: relative; background-color: var(--brand-d); background-size: cover; background-position: center; color: #fff; overflow: hidden; }
.hero::after { content:""; position:absolute; inset:0; background: rgba(10,14,20,.34); }
.hero-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 4.8rem 1.2rem 4.2rem; display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.5rem; align-items: center; }
.hero-inner.hero-solo { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.hero-inner.hero-solo > div { max-width: 700px; }
.hero-inner.hero-solo .hero-actions { justify-content: center; }
.hero-inner.hero-solo p.lead { margin-left: auto; margin-right: auto; }
.hero h1 { color: #fff; margin-bottom: 1rem; text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 3px 22px rgba(0,0,0,.5); }
.hero p.lead { font-size: 1.18rem; color: #fff; margin-bottom: 1.6rem; max-width: 32rem; text-shadow: 0 1px 3px rgba(0,0,0,.65), 0 2px 14px rgba(0,0,0,.55); }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.hero-card { background: rgba(255,255,255,.97); color: var(--text); border-radius: var(--r-lg); padding: 1.6rem; box-shadow: var(--shadow-lg); }
.hero-card h3 { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.hero-card p { font-size: .92rem; color: var(--text-light); margin-bottom: 1rem; }
.hero-mini { display: flex; gap: .6rem; flex-wrap: wrap; }
.hero-mini a { font-size: .82rem; background: var(--bg); padding: .35rem .7rem; border-radius: 999px; font-weight: 600; color: var(--brand); }
.hero-mini a:hover { background: var(--accent-soft); color: var(--accent-h); }
.hero-credit { position: absolute; right: .7rem; bottom: .5rem; z-index: 3; font-size: .68rem; color: rgba(255,255,255,.7); text-shadow: 0 1px 4px rgba(0,0,0,.6); }

/* Sidhuvud med bild for artiklar/destinationer */
.page-hero { position: relative; min-height: 340px; display: flex; align-items: flex-end; color: #fff; background-color: var(--brand-d); background-size: cover; background-position: center; }
/* Helt rent bild - ingen toning over bilden. Lasbarheten loses med textskugga. */
.page-hero .inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; width: 100%; padding: 2.2rem 1.2rem; }
.page-hero h1 { text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 2px 6px rgba(0,0,0,.7), 0 4px 26px rgba(0,0,0,.6); }
.page-hero p { text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 2px 8px rgba(0,0,0,.7), 0 4px 20px rgba(0,0,0,.6); }
.page-hero .kicker { box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.page-hero .kicker { display:inline-block; background: var(--accent); color:#fff; font-weight: 700; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; padding: .28rem .8rem; border-radius: 999px; margin-bottom: .8rem; }
.page-hero h1 { color: #fff; margin: 0 0 .5rem; max-width: 22ch; }
.page-hero p { color: rgba(255,255,255,.92); font-size: 1.1rem; max-width: 44ch; margin: 0; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { background: var(--bg); border-bottom: 1px solid var(--border); font-size: .85rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: .7rem 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: .4rem; color: var(--border); }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb li:last-child { color: var(--text); font-weight: 600; }

/* ---------- Sektionskort (meny paa forsidan) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 1.2rem; }
.scard { background: var(--white); border: 1px solid var(--border); border-radius: var(--r); padding: 1.5rem; box-shadow: var(--shadow); transition: .18s; display: block; }
.scard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.scard .ico { font-size: 1.7rem; margin-bottom: .6rem; }
.scard h3 { margin-bottom: .35rem; color: var(--text); }
.scard p { font-size: .9rem; color: var(--text-light); margin: 0; }

/* ---------- Destinations-/bildkort (grid) ---------- */
.dest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 1.3rem; }
.dest-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); transition: .18s; display: flex; flex-direction: column; }
.dest-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.dest-card .ph { aspect-ratio: 3/2; background: var(--bg-2); background-size: cover; background-position: center; }
.dest-card .body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.dest-card h3 { font-size: 1.1rem; margin-bottom: .15rem; }
.dest-card .grp { font-size: .76rem; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; }
.dest-card .desc { font-size: .88rem; color: var(--text-light); flex: 1; }
.dest-card .tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .8rem; }
.tag { font-size: .72rem; background: var(--bg); color: var(--text-light); padding: .2rem .55rem; border-radius: 999px; font-weight: 600; }

/* ---------- Artikelinnehaall ---------- */
.article { max-width: 760px; margin: 0 auto; padding: 2.4rem 1.2rem 3.5rem; }
.article p, .article ul, .article ol { font-size: 1.05rem; color: #313b3f; }
.article ul, .article ol { margin: 0 0 1.2rem 1.3rem; }
.article li { margin-bottom: .4rem; }
.article h2 { margin: 2rem 0 .8rem; }
.article h3 { margin: 1.5rem 0 .5rem; }
.article figure { margin: 1.5rem 0; }
.article figure img { border-radius: var(--r); width: 100%; }
.article figcaption { font-size: .8rem; color: var(--text-light); margin-top: .5rem; text-align: center; }
.lead-img { width: 100%; aspect-ratio: 16/8; object-fit: cover; border-radius: var(--r-lg); margin-bottom: 1.6rem; }
.lead { font-size: 1.18rem; color: #313b3f; }
.toc { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); padding: 1.1rem 1.4rem; margin: 1.6rem 0; }
.toc h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-light); margin-bottom: .6rem; }
.toc ul { list-style: none; margin: 0; display: grid; gap: .3rem; }
.toc a { font-size: .95rem; font-weight: 600; }

.article-figure { margin: .5rem 0 1.6rem; }
.article-figure img { width: 100%; max-height: 440px; object-fit: cover; border-radius: var(--r-lg); display: block; }
.article-figure figcaption { font-size: .85rem; color: var(--text-light); margin-top: .5rem; text-align: center; }
.img-credit { font-size: .74rem; color: var(--text-light); margin: .25rem 0 0; }
.img-credit a { color: var(--text-light); text-decoration: underline; }
.img-credit a:hover { color: var(--accent); }

.callout { background: var(--accent-soft); border-left: 4px solid var(--accent); border-radius: var(--r-sm); padding: 1.1rem 1.3rem; margin: 1.5rem 0; }
.callout.green { background: #e9f4ef; border-color: var(--good); }
.callout.blue { background: #e9f1f7; border-color: var(--blue); }
.callout.warn { background: #fbf3e2; border-color: var(--warn); }
.callout p:last-child { margin: 0; }
.callout strong { color: var(--text); }

.factbox { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); padding: 1.3rem 1.5rem; margin: 1.5rem 0; }
.factbox h3 { margin-bottom: .8rem; font-size: 1.05rem; }
.factbox dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; font-size: .92rem; }
.factbox dt { color: var(--text-light); font-weight: 600; }
.factbox dd { font-weight: 600; }

.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
.pros-cons > div { border-radius: var(--r); padding: 1.1rem 1.3rem; }
.pros { background: #e9f4ef; }
.cons { background: #fbeeea; }
.pros h4, .cons h4 { margin-bottom: .6rem; }
.pros-cons ul { list-style: none; margin: 0; }
.pros-cons li { font-size: .9rem; padding-left: 1.4rem; position: relative; margin-bottom: .45rem; }
.pros li::before { content: "✓"; position: absolute; left: 0; color: var(--good); font-weight: 800; }
.cons li::before { content: "✕"; position: absolute; left: 0; color: #c4553b; font-weight: 800; }

/* ---------- Intern laankning ---------- */
.related { background: var(--bg); border-top: 1px solid var(--border); }
.related h2 { text-align: center; margin-bottom: 1.5rem; }
.chips { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.chip { background: var(--white); border: 1px solid var(--border); border-radius: 999px; padding: .45rem 1rem; font-size: .88rem; font-weight: 600; color: var(--brand); }
.chip:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Footer ---------- */
.site-footer { background: var(--brand-d); color: rgba(255,255,255,.8); padding: 3rem 0 1.5rem; margin-top: 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 2rem; }
.footer-brand .nav-logo { color: #fff; margin-bottom: .8rem; }
.footer-brand p { font-size: .88rem; color: rgba(255,255,255,.7); max-width: 22rem; }
.footer-col h2 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .8rem; }
.footer-col a { display: block; color: rgba(255,255,255,.75); font-size: .9rem; padding: .22rem 0; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); margin-top: 2.2rem; padding-top: 1.3rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; font-size: .82rem; color: rgba(255,255,255,.6); }

/* ---------- Soek-modal ---------- */
.search-modal { position: fixed; inset: 0; background: rgba(20,40,50,.55); backdrop-filter: blur(3px); z-index: 200; display: none; padding: 8vh 1rem 0; }
.search-modal.open { display: block; }
.search-box { max-width: 600px; margin: 0 auto; background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.search-box-head { display: flex; align-items: center; padding: .5rem .5rem .5rem 1.2rem; border-bottom: 1px solid var(--border); }
.search-box input { flex: 1; border: none; outline: none; font-size: 1.05rem; padding: .8rem .5rem; }
.search-box .close { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--text-light); padding: .5rem .8rem; }
.search-res { max-height: 50vh; overflow-y: auto; padding: .6rem; }
.search-res a { display: block; padding: .6rem .8rem; border-radius: var(--r-sm); }
.search-res a:hover, .search-res a.sel { background: var(--bg); }
.search-res .t { font-weight: 600; color: var(--text); }
.search-res .s { font-size: .8rem; color: var(--text-light); }
.search-res .empty { padding: 1rem; color: var(--text-light); font-size: .9rem; }

/* ---------- Hjaelpare ---------- */
.center { text-align: center; }
.mt2 { margin-top: 2rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.muted { color: var(--text-light); }
.pill { display:inline-block; background: var(--accent-soft); color: var(--accent-h); font-weight: 700; font-size: .78rem; padding: .25rem .7rem; border-radius: 999px; }

/* ---------- Destinationsväljaren ---------- */
.velger { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.velger-head { background: var(--brand); color: #fff; padding: 1.4rem 1.6rem; }
.velger-head h2 { color: #fff; margin: 0; }
.velger-head p { color: rgba(255,255,255,.88); font-size: .92rem; margin: .3rem 0 0; }
.velger-body { padding: 1.6rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 2rem; }
.q .qhead { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin-bottom: .5rem; }
.q .qhead label { font-weight: 700; font-size: .96rem; }
.q .qhead .hint { font-size: .76rem; color: var(--text-light); text-align: right; }
.q .opts { display: flex; gap: .4rem; flex-wrap: wrap; }
.q .opts .opt { flex: 1; min-width: 0; padding: .55rem .5rem; border: 1.5px solid var(--border); background: var(--white); border-radius: var(--r-sm); font-size: .82rem; font-weight: 600; color: var(--text-light); cursor: pointer; transition: .12s; }
.q .opts .opt:hover { border-color: var(--brand-l); color: var(--brand); }
.q .opts .opt.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.q .weight { display: flex; align-items: center; gap: .5rem; margin-top: .55rem; font-size: .74rem; color: var(--text-light); }
.q .weight input { flex: 1; accent-color: var(--accent); }
.q .weight .wv { min-width: 3.2em; text-align: right; font-weight: 700; }
.velger-foot { padding: 1.1rem 1.6rem; border-top: 1px solid var(--border); display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; background: var(--bg); }
.velger-foot .spacer { flex: 1; }

.results { margin-top: 1.8rem; display: grid; gap: 1rem; }
.result-card { display: grid; grid-template-columns: 110px 1fr auto; gap: 1.1rem; align-items: center; background: var(--white); border: 1px solid var(--border); border-radius: var(--r); padding: .9rem 1.1rem; box-shadow: var(--shadow); transition: .15s; }
.result-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.result-card .ph { width: 110px; height: 80px; border-radius: var(--r-sm); background: var(--bg-2); background-size: cover; background-position: center; }
.result-card h3 { font-size: 1.08rem; margin-bottom: .15rem; }
.result-card .meta { font-size: .82rem; color: var(--text-light); margin-bottom: .5rem; }
.match { text-align: center; min-width: 86px; }
.match .pct { font-size: 1.7rem; font-weight: 800; color: var(--brand); line-height: 1; }
.match .ring { font-size: .68rem; color: var(--text-light); text-transform: uppercase; letter-spacing: .06em; }
.match-bar { height: 6px; background: var(--bg-2); border-radius: 999px; margin-top: .35rem; overflow: hidden; }
.match-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--good)); }

/* Egenskapsbarer (profil + resultat) */
.traits { display: grid; gap: .55rem; }
.traits.mini { gap: .3rem; }
.trait { display: grid; grid-template-columns: 150px 1fr 34px; align-items: center; gap: .7rem; font-size: .86rem; }
.traits.mini .trait { grid-template-columns: 110px 1fr 30px; font-size: .78rem; }
.trait .lbl { color: var(--text); font-weight: 600; }
.trait .bar { height: 9px; background: var(--bg-2); border-radius: 999px; overflow: hidden; }
.traits.mini .trait .bar { height: 7px; }
.trait .bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-l), var(--accent)); border-radius: 999px; }
.trait .val { font-size: .78rem; color: var(--text-light); text-align: right; font-weight: 700; }

/* Destinationsprofil-kort på destinationssidor */
.dest-profil { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); padding: 1.4rem 1.5rem; margin: 1.8rem 0 2rem; }
.dest-profil h2 { margin: 0 0 .5rem; font-size: 1.25rem; }
.dest-profil .muted { font-size: .9rem; }
.dest-profil .traits { margin: 1rem 0 1.2rem; }

/* ---------- Responsivt / mobil ---------- */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 1.8rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
/* Bruddpunktet er MAALT, ikke gjettet. Toppmenyen har ni punkter, og de
   krever 1 197 px: logoen 209 + lenkene 949 + 38 px sidepolstring. Malen vi
   forket fra hadde faerre punkter og satte bruddet ved 1100 px - resultatet
   var at siste menypunkt laa 176 px utenfor skjermkanten mellom 1101 og
   1196 px, og hele siden rullet sidelengs.

   Med den strammere .nav-link under ligger innholdet paa 1 115 px, og
   bruddpunktet er satt til 1200 for aa gi 70 px luft ved 1201 px skjerm.
   Da faar en 1280- eller 1366-laptop full meny, og alt smalere faar
   hamburger FOER noe rekker aa renne over.

   ETT ENSIDIG BRUDDPUNKT, aldri et par (max-width:1199)/(min-width:1200):
   ved devicePixelRatio 1,5 treffer et slikt par ingen av delene.

   LEGGER DU TIL ET MENYPUNKT maa tallet males om. sjekk.py punkt L stopper
   bygget hvis antallet endrer seg, nettopp fordi dette ikke gaar aa se
   lokalt uten aa emulere skjermbredden. */
@media (max-width: 1200px) {
  .nav-menu { position: fixed; inset: 56px 0 auto 0; background: var(--white); flex-direction: column; align-items: stretch; padding: 1rem; gap: .2rem; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); display: none; max-height: calc(100vh - 56px); overflow-y: auto; }
  .nav-menu.open { display: flex; }
  .nav-link { padding: .8rem; border-radius: var(--r-sm); }
  .dropdown-menu { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: none; padding: .3rem 0 .6rem 1rem; min-width: 0; display: block; }
  /* nowrap trengs BARE i den absolutt posisjonerte desktop-dropdownen, der
     boksen kan vokse fritt. I mobilpanelet er bredden gitt av skjermen, og
     en lang etikett ville skjove siden i sidled i stedet for aa brytes.
     Ved 280 px er margen i dag bare 13 px. */
  .dropdown-col a { white-space: normal; }
  .nav-dropdown:hover .dropdown-menu { transform: none; }
  .dropdown-col { margin-bottom: .6rem; }
  .nav-toggle { display: block; margin-left: auto; }
  .grid-2, .pros-cons { grid-template-columns: 1fr; }
  .page-hero { min-height: 280px; }
  .velger-body { grid-template-columns: 1fr; }
  .result-card { grid-template-columns: 84px 1fr; }
  .result-card .match { grid-column: 2; text-align: left; display: flex; align-items: center; gap: .6rem; }
  .result-card .match-bar { flex: 1; margin-top: 0; }
  .trait { grid-template-columns: 120px 1fr 30px; }
}
/* Under 400 px far ikke logoteksten, sokeikonet og hamburgeren plass ved
   siden av hverandre: ved 320 px (iPhone SE) laa hamburgeren 36 px utenfor
   skjermkanten. Logoen krymper, og bade polstring og mellomrom strammes.
   Maalt: 341 px innhold i en 305 px ramme foer, 270 px etter. */
@media (max-width: 400px) {
  .nav-inner { padding: .55rem .8rem; gap: .5rem; }
  .nav-logo { font-size: .95rem; gap: .4rem; }
  .nav-logo-icon { width: 28px; height: 28px; border-radius: 8px; }
}
/* Under 340 px (Galaxy Fold sammenslatt er 280) maa ogsaa .wrap slippe litt
   polstring, ellers stikker kortene 4 px utenfor. Maalt paa 280 px. */
@media (max-width: 340px) {
  .wrap { padding: 0 .8rem; }
  .nav-logo { font-size: .85rem; }
  .btn-search-icon { padding: .3rem; font-size: 1rem; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .section { padding: 2.4rem 0; }
  .hero-inner { padding: 3rem 1.2rem; }
}

/* --- Byline (senast uppdaterad) --- */
.byline {
  font-size: .85rem;
  color: #6b7280;
  margin: 0 0 1.4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
}
.byline span { color: #374151; font-weight: 600; }

/* --- Platskarta (Hitta hit) --- */
.place-map { margin: 2.6rem 0 1rem; }
.place-map h2 { margin-bottom: .8rem; }
.place-map iframe {
  width: 100%;
  height: 340px;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  display: block;
}
.place-map .map-link { margin: .7rem 0 0; font-size: .92rem; }
.place-map .map-note { color: #9ca3af; font-size: .82rem; margin-left: .4rem; }
@media (max-width: 480px) { .place-map iframe { height: 260px; } }

/* --- Skip-link (tillgänglighet) --- */
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 1000;
  background: var(--accent, #0e7c86); color: #fff; padding: .6rem 1rem;
  border-radius: 8px; text-decoration: none; transition: top .15s;
}
.skip-link:focus { top: 8px; }
#innehall { scroll-margin-top: 80px; }

/* --- Sevärt i närheten --- */
.nearby { margin: 2.4rem 0 1rem; }
.nearby h2 { margin-bottom: .8rem; }
.nearby-list { list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: .5rem .9rem; }
.nearby-list li { padding: .5rem .8rem; border: 1px solid #e5e7eb; border-radius: 10px;
  display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.nearby-list a { font-weight: 600; text-decoration: none; }
.nearby-list a:hover { text-decoration: underline; }
.nearby-list .km { color: #9ca3af; font-size: .82rem; white-space: nowrap; }

/* ---- Cookie-samtyckesbanner (GDPR / Consent Mode v2) ---- */
.cookie-consent{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:#fff;
  border-top:3px solid var(--brand);box-shadow:0 -4px 24px rgba(14,80,102,.18);}
.cookie-consent[hidden]{display:none;}
.cookie-consent-inner{max-width:1100px;margin:0 auto;padding:.9rem 1.2rem;
  display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;justify-content:space-between;}
.cookie-consent-text{margin:0;font-size:.92rem;color:var(--text);line-height:1.45;flex:1 1 360px;}
.cookie-consent-text a{color:var(--brand);}
.cookie-consent-btns{display:flex;gap:.6rem;flex:0 0 auto;}
.btn-consent{cursor:pointer;border-radius:8px;padding:.55rem 1.3rem;font-size:.92rem;
  font-weight:600;border:2px solid var(--brand);transition:background .15s,color .15s;}
.btn-consent-accept{background:var(--brand);color:#fff;}
.btn-consent-accept:hover{background:var(--brand-d);border-color:var(--brand-d);}
.btn-consent-deny{background:#fff;color:var(--brand);}
.btn-consent-deny:hover{background:var(--bg);}
@media(max-width:560px){
  .cookie-consent-inner{flex-direction:column;align-items:stretch;gap:.7rem;padding:.9rem 1rem;}
  .cookie-consent-btns{justify-content:flex-end;}
}


/* ==========================================================================
   Portugalguiden - tillagg till den arvda mallen
   ========================================================================== */

/* ---------- Hero: helt rena bilder, inga filter eller toningar ----------
   Kretamallen lade en morkt lager over forstasidans hero. Har visas bilden
   som den ar; lasbarheten loses uteslutande med textskugga. */
.hero::after { content: none !important; display: none !important; }
.hero { background-blend-mode: normal; filter: none; }
.page-hero { filter: none; }
.page-hero::before, .page-hero::after { content: none !important; }
/* ---------- Textplatta i hero ------------------------------------------
   Bilderna ar helt ofiltrerade. For att vit rubriktext anda ska ga att lasa
   mot ljusa foton ligger texten pa en egen halvgenomskinlig platta. Den
   tacker bara textblocket - fotot runt omkring ar orort. */
.page-hero .hero-text {
  display: inline-block; max-width: 46rem;
  background: linear-gradient(180deg, rgba(8,40,38,.62), rgba(8,40,38,.74));
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border-radius: var(--r); padding: 1.1rem 1.5rem 1.2rem;
  box-shadow: 0 6px 30px rgba(0,0,0,.25);
}
.page-hero .hero-text h1 { margin-bottom: .35rem; }
.page-hero .hero-text p { margin: 0; }
.page-hero .hero-text .kicker { margin-bottom: .55rem; }
@media (max-width: 640px) {
  .page-hero .hero-text { padding: .9rem 1.1rem 1rem; }
}

/* Forstasidans karusell har INGEN textplatta - eierens beslutning: plattan
   loste lasbarheten men brot designen. Bara textskuggan under holder texten
   lasbar dar. Plattan gjelder fortsatt .page-hero pa alle andre sider. */

/* Kraftig textskugga ar den enda lasbarhetshjalpen som finns kvar. Den ligger
   pa bokstaverna, inte over fotot, och morkar alltsa inte ner bilden. */
.hero h1, .page-hero h1 {
  text-shadow: 0 0 6px rgba(0,0,0,.75), 0 1px 2px rgba(0,0,0,.95),
               0 2px 10px rgba(0,0,0,.85), 0 4px 30px rgba(0,0,0,.7); }
.hero p.lead, .page-hero p {
  text-shadow: 0 0 5px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.95),
               0 2px 10px rgba(0,0,0,.8), 0 4px 22px rgba(0,0,0,.65); }
.hero .pill { text-shadow: 0 1px 3px rgba(0,0,0,.8); }

/* Forstasidan bar hela lasbarheten pa skuggan sedan plattan togs bort, och
   karusellbilderna har ljus himmel bakom rubriken. Darfor en tat mork kontur
   runt sjalva bokstaverna dar - den syns inte som en ruta, men lyfter texten
   aven mot vita moln. paint-order gor att konturen hamnar bakom glyfen. */
.hero-inner.hero-solo h1 {
  paint-order: stroke fill;
  -webkit-text-stroke: .5px rgba(8,20,32,.55);
  text-shadow: 0 0 2px rgba(8,20,32,.9), 0 0 8px rgba(8,20,32,.8),
               0 1px 2px rgba(0,0,0,.95), 0 2px 14px rgba(0,0,0,.85),
               0 6px 34px rgba(0,0,0,.7);
}
.hero-inner.hero-solo p.lead {
  text-shadow: 0 0 2px rgba(8,20,32,.85), 0 0 7px rgba(8,20,32,.8),
               0 1px 2px rgba(0,0,0,.95), 0 2px 12px rgba(0,0,0,.8),
               0 5px 26px rgba(0,0,0,.7);
}
.hero-inner.hero-solo .pill {
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.7); }

/* ---------- Sidfoten fick en femte kolumn (Verktyg) --------------------
   Basmalen har "1.4fr repeat(4, 1fr)". Overstyringen ligger inne i en
   min-width-forespørsel, sa den ikke rorer de smale bruddpunktene der
   basmalen kollapser til to og en kolonne. */
@media (min-width: 981px) {
  .footer-grid { grid-template-columns: 1.3fr repeat(5, 1fr); gap: 1.6rem; }
}

/* ---------- Verktygskort pa forstasidan ---------- */
.verktyg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.verktyg-kort { background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r); padding: 1.5rem 1.5rem 1.6rem; box-shadow: var(--shadow);
  transition: .18s; display: block; }
.verktyg-kort:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg);
  border-color: var(--accent); }
.verktyg-kort .ikon { font-size: 1.8rem; line-height: 1; margin-bottom: .7rem;
  display: block; }
.verktyg-kort h3 { font-size: 1.12rem; margin-bottom: .3rem; }
.verktyg-kort p { font-size: .9rem; color: var(--text-light); margin: 0; }
@media (max-width: 820px) { .verktyg-grid { grid-template-columns: 1fr; } }

/* ---------- Karusellen som <img> i stedet for background-image --------
   Bakgrunnsbilder kan ikke ha srcset. Som <img> med object-fit ser det
   likedan ut, men mobilen laster 480/800 px i stedet for 1800. */
.hero .serie img.bilde { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1.5s ease; }
.hero .serie img.bilde.aktiv { opacity: 1; }

/* ---------- Responsiva bilder ------------------------------------------
   Hero og kort bruker <img> i stedet for background-image. Det er eneste
   maten aa faa bade srcset (riktig storrelse per skjerm) og lazy-lasting.
   Hubbene lastet for dette fullstore 1800 px-bilder til hvert kort -
   /attraktioner veide 43 MB. */
.page-hero { overflow: hidden; }
.page-hero .hero-bild { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; }
.dest-card img.ph { display: block; width: 100%; aspect-ratio: 3/2; height: auto;
  object-fit: cover; background: var(--bg-2); }

/* ---------- Destinationsvaljaren ---------------------------------------
   .velger-klasserna arves fra malen; her ligger bare radene og
   traffkortene. Reglagene er 0-3: null betyr "spelar ingen roll". */
.vj-rad { display: flex; flex-direction: column; gap: .35rem; }
.vj-rad label { font-weight: 700; font-size: .95rem; display: flex;
  flex-direction: column; gap: .15rem; }
.vj-hjalp { font-weight: 400; font-size: .82rem; color: var(--text-light); }
.vj-rad input[type=range] { width: 100%; accent-color: var(--accent); cursor: pointer; }
.vj-rad output { font-size: .82rem; color: var(--accent); font-weight: 700;
  letter-spacing: .02em; }
.vj-traffar { margin-top: 1.8rem; }
.vj-rad select { padding: .55rem .7rem; border: 1px solid var(--border);
  border-radius: var(--r-sm); background: var(--white); font: inherit;
  font-size: .95rem; color: var(--text); width: 100%; cursor: pointer; }
.sv-kryssrad { padding: 0 1.6rem 1.4rem; display: flex; flex-wrap: wrap;
  gap: .7rem 1.6rem; }
.sv-kryss { display: flex; align-items: center; gap: .45rem; font-size: .93rem;
  font-weight: 600; cursor: pointer; }
.sv-kryss input { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; }
.sv-taggar { font-size: .78rem; color: var(--accent); font-weight: 700;
  margin: .5rem 0 0; text-transform: lowercase; }
.pk-lista { margin-top: 1.8rem; }
.pk-lista ul { list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: 1fr 1fr; gap: .55rem 1.6rem; }
.pk-lista li { position: relative; padding-left: 1.6rem; font-size: .95rem;
  line-height: 1.45; }
.pk-lista li::before { content: "☐"; position: absolute; left: 0; top: -.05rem;
  color: var(--accent); font-size: 1.05rem; }
@media (max-width: 700px) { .pk-lista ul { grid-template-columns: 1fr; } }
.vj-kort .body { padding: 1rem 1.1rem 1.1rem; }
.vj-poang { display: inline-block; float: right; font-size: .78rem;
  font-weight: 700; color: var(--accent); }
@media (max-width: 700px) {
  .velger-body { grid-template-columns: 1fr; }
}

/* ---------- Tabeller (vart innehall anvander dem mycket) ---------- */
.tabell-svep { overflow-x: auto; margin: 1.5rem 0; -webkit-overflow-scrolling: touch; }
.article table { border-collapse: collapse; width: 100%; font-size: .94rem;
  background: var(--white); }
.article th, .article td { border: 1px solid var(--border); padding: .6rem .8rem;
  text-align: left; vertical-align: top; }
.article th { background: var(--bg); font-weight: 700; color: var(--text);
  font-size: .88rem; }
.article tbody tr:nth-child(even) { background: #FBF9F4; }
.tabell-svep table { margin: 0; }

/* ---------- Oarna som underrubrik pa sektionshubben ----------
   Menyn visar bara kategorin ("Sevardheter"). Oarna dyker upp forst har. */
.hub-underrubrik { margin: 2rem 0 .9rem; font-size: 1.05rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-light);
  border-bottom: 1px solid var(--border); padding-bottom: .45rem; }
.hub-underrubrik:first-of-type { margin-top: .4rem; }

/* ---------- Notis / faktaruta (ersatter .callout i vart innehall) ---------- */
.article p.notis { background: var(--accent-soft); border-left: 4px solid var(--accent);
  border-radius: var(--r-sm); padding: 1rem 1.2rem; margin: 1.5rem 0; font-size: .96rem; }

/* OBS: rora inte .footer-grid har. Basmalens media queries kollapsar den till
   tva och en kolumn, och en omdeklaration efter dem slar ut responsiviteten. */

/* ---------- Sokresultatsida (/sok) utover modalen ---------- */
.sok-sida { max-width: 820px; margin: 0 auto; padding: 2.4rem 1.2rem 3.5rem; }
.sok-falt { display: flex; gap: .6rem; margin-bottom: 1.6rem; }
.sok-falt input { flex: 1; border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: .8rem 1rem; font-size: 1.02rem; font-family: inherit; }
.sok-falt button { border: none; }
.sok-traffar { display: grid; gap: .6rem; margin-top: 1.2rem; }
.sok-traff { display: block; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r); padding: .9rem 1.1rem; box-shadow: var(--shadow); }
.sok-traff:hover { border-color: var(--accent); transform: translateY(-2px); }
.sok-traff .t { font-weight: 700; color: var(--text); display: block; }
.sok-traff .s { font-size: .82rem; color: var(--accent); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; }
.sok-traff .d { font-size: .9rem; color: var(--text-light); margin-top: .2rem; }

/* ---------- Forstasidans bildkarusell (samma monster som prisniva.com) ------
   Fem bilder som korsar over varandra med langsam overtoning. Inget filter
   eller gradient ligger over dem - motiven ar valda morka nog. */
.hero .serie { position: absolute; inset: 0; z-index: 0; }
.hero .serie .bilde { position: absolute; inset: 0; background-size: cover;
  background-position: center; opacity: 0; transition: opacity 1.5s ease; }
.hero .serie .bilde.aktiv { opacity: 1; }
.hero { background-image: none; }
.hero .hero-inner { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .hero .serie .bilde { transition: none; }
}

/* ---------- Kompakt dropdown: bara namn pa undermenyer ----------
   ALDRI minmax(min(190px, 100%), 1fr) HER. Dropdownen er absolutt posisjonert
   og har min-width: 0, altsaa shrink-to-fit uten definert bredde - og da
   loeser 100% seg opp mot en ubestemt bredde og faller til null. Kolonnegulvet
   forsvinner, menyen krymper til rundt 110 px og hver eneste lenke brytes over
   to linjer. Det skjedde da minmax-reglene ellers paa arket ble gjort
   krympbare 2026-08-27; vernet den gangen var basert paa LINJENUMMER, og det
   fantes to .dropdown-menu-regler. Vern etter selektor, ikke etter linje.
   Bruk et fast pikselgulv her - boksen har ingen ytre ramme aa krympe mot. */
.dropdown-menu { min-width: 0; padding: .9rem 1rem; gap: .3rem 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.dropdown-menu.dropdown-themes { min-width: 0; }
/* 220 px er MAALT, ikke valgt: den bredeste etiketten i menyen er
   "Norra Portugal & Silverkusten" paa 210 px, og "Historiska platser &
   UNESCO" paa 204. Med 190 px brakk begge to over to linjer.
   white-space: nowrap er vernet mot NESTE lange etikett: da vokser
   kolonnen i stedet for aa brekke, og boksen foelger etter av seg selv
   fordi den er shrink-to-fit. Faar du en etikett som sprenger skjermen,
   er det etiketten som skal kortes - ikke denne regelen som skal vekk. */
.dropdown-col a { padding: .34rem .2rem; font-weight: 600; border-radius: 6px;
  white-space: nowrap; }
.dropdown-col a:hover { background: var(--bg); }

/* ---------- Cookie-installningar i sidfoten ---------- */
.footer-col button.lankknapp { display: block; background: none; border: none;
  padding: .22rem 0; font: inherit; font-size: .9rem; color: rgba(255,255,255,.75);
  cursor: pointer; text-align: left; }
.footer-col button.lankknapp:hover { color: var(--accent); }

/* ---------- Innehallsforteckning: kolumner nar den ar lang ---------- */
/* EN kolumn, alltid. Tva kolumner sparade hojd men gjorde listan rorig:
   ogat maste hoppa tillbaka uppat mitt i innehallsforteckningen, och
   ordningen blev otydlig nar antalet rubriker var udda. En hogre lista som
   lases uppifran och ned ar battre an en kort som maste tolkas. */
.toc ul { grid-template-columns: 1fr; }

/* ---------- A-O-listan pa /alla-artiklar ---------- */
.artikellista { columns: 2; column-gap: 2.4rem; list-style: none; margin: 0 0 1.6rem; }
.artikellista li { break-inside: avoid; margin-bottom: .35rem; }
@media (max-width: 640px) { .artikellista { columns: 1; } }

/* ---------- Vandringsvaljarens faktarad ------------------------------------
   Langd, tid, stigning och niva pa ett kort. Den ska ga att lasa i ett svep,
   darfor egen rad i halvfet och i markaren farg an brodtexten. */
.vd-fakta { font-weight: 700; font-size: .88rem; color: var(--brand);
  margin: .1rem 0 .45rem; letter-spacing: .01em; }
.vj-kort .vd-fakta + .desc { margin-top: 0; }
.vd-kalla { font-size: .78rem; color: var(--text-light); font-style: italic;
  margin: -.25rem 0 .45rem; }
.vd-stangd { display: inline-block; background: #8a1c1c; color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: .12rem .5rem; border-radius: 3px;
  margin-bottom: .35rem; }

/* ---------- Manadsvaljarens tabell ----------------------------------------
   Fyra matta varden per manad plus ett redaktionellt. Tabellen ar sanningen,
   rangordningen ovanfor ar bara ett satt att lasa den. Bred tabell far egen
   rullning - sidan sjalv far aldrig rulla i sidled. */
.mv-svep { overflow-x: auto; margin-top: 1.8rem;
  -webkit-overflow-scrolling: touch; }
.mv-tabell { border-collapse: collapse; width: 100%; min-width: 640px;
  font-size: .88rem; }
.mv-tabell th, .mv-tabell td { padding: .45rem .6rem; text-align: right;
  border-bottom: 1px solid var(--border); white-space: nowrap; }
.mv-tabell th:first-child, .mv-tabell td:first-child { text-align: left;
  font-weight: 700; }
.mv-tabell thead th { background: var(--bg); font-size: .8rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-light); }
.mv-tabell tbody tr.mv-topp { background: rgba(0,0,0,.035); }
.mv-tabell tbody tr.mv-topp td:first-child::after { content: " °5";
  color: var(--accent); }
.mv-rank { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: .7rem; }
.mv-rank li { border: 1px solid var(--border); border-radius: var(--r);
  padding: .7rem .85rem; background: var(--white); }
.mv-rank .mv-namn { font-weight: 700; text-transform: capitalize; }
.mv-rank .mv-varde { font-size: .82rem; color: var(--text-light);
  margin-top: .2rem; }
.mv-rank li.mv-basta { border-color: var(--accent); border-width: 2px; }
.mv-matt { font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent); }
.mv-red { font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-light); }

/* ---------- Paraplyhubbens sektionsrubriker -------------------------------
   /planera-resan och /verktyg samlar andra hubbar. Rubriken ar en lank dit,
   och den ska se ut som en rubrik - inte som brodtextens lankar. */
.section-head h2 a { color: inherit; border-bottom: 2px solid transparent; }
.section-head h2 a:hover { color: var(--brand); border-bottom-color: var(--accent); }

/* --- Bildkredit vid bilden (endast CC 2.x/3.x) -------------------------- */
/* En rad, dämpad, i samma textkolumn som resten av sidan. Den ska kunna
   läsas utan att konkurrera med rubriken - men den ska gå att läsa. Därför
   samma färg som övrig hjälptext, inte ljusare. */
.bildkredit-inline { max-width: var(--maxw); margin: .45rem auto 0;
  padding: 0 1.2rem; font-size: .78rem; line-height: 1.5;
  color: var(--text-light); text-align: right; }
.bildkredit-inline a { color: inherit; text-decoration: underline;
  text-underline-offset: 2px; }
.bildkredit-inline a:hover { color: var(--brand); }
/* Under hero-bandet: krediten hör till bilden ovanför, inte till brödtexten
   under, så den får inte skapa ett extra tomrum före ingressen. */
.page-hero + .bildkredit-inline { margin-bottom: -.35rem; }
/* I en figcaption är kolumnen redan satt av figuren. */
.article-figure figcaption .bildkredit-inline { max-width: none; padding: 0;
  margin: .5rem 0 0; text-align: center; }
@media (max-width: 640px) {
  .bildkredit-inline { text-align: left; }
}
/* Karusellkrediten: EN statisk rad under bildspelet, alltid synlig.
   Den byttes tidigare i takt med bilderna, men da lag den display:none for
   fem av sex foton - osynlig for en lasare utan JavaScript och for QA. */
.kar-kredit { text-align: center; }
@media (max-width: 640px) { .kar-kredit { text-align: left; } }

/* Kortrutnat: en rad under rutnatet som pekar vidare till kreditsidan.
   /planera-resan har 77 kort - en samlad rad med 60 fotografnamn hade varit
   en vagg, inte en kreditering. CC BY 4.0 §3(a)(2) tillater uttryckligen en
   lank till en resurs som har uppgifterna. */
.kortkredit { max-width: var(--maxw); margin: .9rem auto 0; padding: 0 1.2rem;
  font-size: .78rem; color: var(--text-light); }
.kortkredit a { color: inherit; text-decoration: underline;
  text-underline-offset: 2px; }
.kortkredit a:hover { color: var(--brand); }

/* Kreditsidans tabell och filter ---------------------------------------- */
/* Filterknapparna ligger med hidden i kallan och slas pa av skriptet: utan
   JavaScript visas hela tabellen, och ingen ser knappar som inte fungerar. */
.bkfilter-rad { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 .9rem; }
.bkfilter-rad button { cursor: pointer; padding: .45rem .85rem;
  border: 1px solid var(--border); border-radius: 999px; background: #fff;
  font: inherit; font-size: .86rem; line-height: 1.3; color: var(--text); }
.bkfilter-rad button:hover { border-color: var(--brand); }
.bkfilter-rad button.pa { background: var(--brand); border-color: var(--brand);
  color: #fff; }
.bktal { opacity: .7; font-variant-numeric: tabular-nums; }
.bktabell td.bkbild { min-width: 150px; }
.bktabell td.bkbild img { display: block; width: 120px; height: 80px;
  object-fit: cover; border-radius: var(--r-sm); }
.bkmotiv { display: block; margin-top: .3rem; font-size: .78rem;
  color: var(--text-light); }
.bktomt { margin: 1.1rem 0; font-style: italic; }
.bkoanvand { color: var(--text-light); font-style: italic; }
/* Kreditsidan ar en uppslagstabell, inte brodtext. Fem kolumner med miniatyr
   trangs ut i sidled i textspalten - blocket centreras darfor om artikelns
   egen mittaxel, sa centreringen pa ovriga sidor star oror. */
.bkbred { --bkb: min(1140px, calc(100vw - 84px)); width: var(--bkb);
  margin-inline: calc(50% - var(--bkb) / 2); }
@media (max-width: 760px) {
  .bkbred { --bkb: calc(100vw - 32px); }
  .bktabell td.bkbild img { width: 84px; height: 56px; }
}

/* ==========================================================================
   Arguineguin.org additions
   ========================================================================== */
/* Three-level dropdown: one column per group (heading = level 2, links = level 3) */
.dropdown-menu { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); max-width: min(960px, 92vw); }
.dropdown-col h4 { margin: 0 0 .35rem; }
.dropdown-col h4 a { padding: 0; font-size: .72rem; color: var(--text-light); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.dropdown-col h4 a:hover { background: none; color: var(--accent); }
.dropdown-menu .dd-alle { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: .6rem; font-weight: 700; font-size: .88rem; color: var(--accent); }
.dd-apne { display: none; }
@media (min-width: 1201px) {
}
@media (max-width: 1200px) {
  .nav-dropdown { display: grid; grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid var(--border); }
  .dd-apne { display: block; background: none; border: none; font-size: 1.1rem; padding: .7rem 1rem; cursor: pointer; color: var(--brand); transition: transform .15s; }
  .nav-dropdown.open .dd-apne { transform: rotate(180deg); }
  .nav-dropdown .dropdown-menu { grid-column: 1 / -1; display: none; max-width: none; }
  .nav-dropdown.open .dropdown-menu { display: block; }
  .dropdown-col h4 a { white-space: normal; }
}
/* Page hero without a photo: a quiet sea-and-sand gradient, never an empty box */
.page-hero.uten-bilde { min-height: 220px; background: linear-gradient(135deg, var(--brand-d) 0%, var(--brand) 55%, #1f8fa8 100%); }
.page-hero .hero-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero .hero-text { display: inline-block; max-width: 760px; background: rgba(8,40,52,.62); padding: 1.1rem 1.4rem; border-radius: var(--r); }
.page-hero.uten-bilde .hero-text { background: none; padding: 0; }
.page-hero h1 { color: #fff; }
.page-hero .hero-text p { color: #fff; margin: .5rem 0 0; }
.page-hero .kicker { display: inline-block; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 999px; margin-bottom: .5rem; }
.hero.har-foto .hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero:not(.har-foto) { background: linear-gradient(135deg, var(--brand-d), var(--brand) 60%, #1f8fa8); }
.hero .pill { display: inline-block; background: rgba(255,255,255,.18); color: #fff; font-size: .78rem; font-weight: 700; padding: .25rem .8rem; border-radius: 999px; margin-bottom: .9rem; }
.bildkredit-inline { font-size: .74rem; color: var(--text-light); max-width: var(--maxw); margin: .35rem auto 0; padding: 0 1.2rem; text-align: right; }
.article figcaption .bildkredit-inline { text-align: center; padding: 0; }
.kortkredit { font-size: .76rem; color: var(--text-light); margin-top: .8rem; }
/* Byline, lead, author box, FAQ, sources */
.byline { font-size: .88rem; color: var(--text-light); margin-bottom: 1.2rem; }
.article .lead { font-size: 1.18rem; color: var(--text); }
.forfatter { display: flex; gap: 1rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); padding: 1.1rem 1.3rem; margin-top: 2.6rem; }
.forfatter .ikon { flex: 0 0 48px; height: 48px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; display: grid; place-items: center; }
.forfatter p { font-size: .92rem !important; margin-bottom: .4rem; }
.faq details { border: 1px solid var(--border); border-radius: var(--r-sm); padding: .7rem 1rem; margin-bottom: .6rem; background: #fff; }
.faq summary { font-weight: 700; cursor: pointer; }
.faq details div { margin-top: .6rem; }
.kilder { border-top: 1px solid var(--border); margin-top: 2rem; padding-top: 1rem; font-size: .9rem; }
.kilder li, .kilder p { font-size: .9rem !important; }
.tabell-svep { overflow-x: auto; margin: 1.2rem 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 1rem; }
.scard { display: block; background: #fff; border: 1px solid var(--border); border-radius: var(--r); padding: 1.2rem 1.3rem; box-shadow: var(--shadow); color: var(--text); }
.scard:hover { border-color: var(--brand); color: var(--text); }
.scard h3 { color: var(--brand); margin-bottom: .4rem; }
.scard p { font-size: .92rem; color: var(--text-light); margin-bottom: .6rem; }
.scard .antall { font-size: .8rem; font-weight: 700; color: var(--accent); }
.dest-card .ph:not(img) { background: linear-gradient(135deg, var(--bg-2), var(--bg)); }
.hub-intro { padding-top: 1.8rem; }
.footer-small { font-size: .8rem; opacity: .8; }
.footer-grid-2 { margin-top: 2rem; }
.forside-tekst { padding-top: 0; }
/* A hidden dropdown must not take part in layout: with visibility:hidden it still widened
   scrollWidth and gave the page a sideways scroll (memory skjult-nedtrekk-teller-i-scrollwidth). */
@media (min-width: 1201px) {
  .dropdown-menu { display: none; }
  .nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu { display: grid; }
  .nav-dropdown { display: flex; align-items: center; }
}
/* ---------- Planners (/tools) ---------- */
.verktoy { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); padding: 1.2rem 1.3rem; margin: 1.4rem 0 2rem; }
.verktoy h2 { margin-top: 1.2rem; font-size: 1.25rem; }
.verktoy .skjema { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: .8rem 1.2rem; }
.verktoy label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; font-weight: 600; color: var(--text); }
.verktoy input[type=number], .verktoy select { font: inherit; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; }
.verktoy fieldset.kryss { border: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; }
.verktoy fieldset.kryss legend { font-weight: 700; margin-bottom: .5rem; }
.verktoy fieldset.kryss label { flex-direction: row; align-items: center; font-weight: 500; }
.verktoy .glidere { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 1rem; }
.verktoy table { width: 100%; border-collapse: collapse; background: #fff; }
.verktoy td { padding: .45rem .7rem; border-bottom: 1px solid var(--border); }
.verktoy td.tall { text-align: right; font-variant-numeric: tabular-nums; }
.verktoy tr.sum td { font-weight: 800; color: var(--brand-d); border-top: 2px solid var(--brand); }
.strand-liste { display: grid; gap: .6rem; }
.strand-kort { display: flex; flex-direction: column; gap: .15rem; background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm); padding: .7rem .9rem; color: var(--text); }
.strand-kort:hover { border-color: var(--brand); color: var(--text); }
.strand-kort span { font-size: .88rem; }
.maaned-liste li { margin-bottom: .4rem; }
.maaned-tabell td, .maaned-tabell th { text-align: center; }
/* Dropdowns are centred under the whole menu bar, not under their item: at 1201 px the 900 px wide
   panels of the middle items ran past the right edge (measured 1286 px at Where to Stay). */
@media (min-width: 1201px) {
  .nav-inner { position: relative; }
  .nav-dropdown { position: static; }
  .nav-dropdown .dropdown-menu, .nav-dropdown.nav-dd-right .dropdown-menu,
  .nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu,
  .nav-dropdown.nav-dd-right:hover .dropdown-menu, .nav-dropdown.nav-dd-right:focus-within .dropdown-menu {
    left: 50%; right: auto; top: 100%; transform: translateX(-50%); width: min(960px, calc(100vw - 24px)); max-width: none; }
}
/* Front-page hero over a photo: the text sits on its own translucent panel (busy town photos made the lead
   unreadable with text-shadow alone). The photo itself is not filtered. */
.hero.har-foto::after { background: none; }
.hero.har-foto .hero-solo > div { background: rgba(8,40,52,.62); padding: 1.6rem 1.8rem; border-radius: var(--r-lg); }
@media (max-width: 640px) { .hero.har-foto .hero-solo > div { padding: 1.1rem 1.1rem; } }
/* Phones: smaller heading on the photo header so the photo is not hidden behind the text panel */
@media (max-width: 640px) {
  .page-hero { min-height: 240px; }
  .page-hero h1 { font-size: 1.45rem; }
  .page-hero .hero-text { padding: .8rem 1rem; }
}
/* ---------- Menu v2 (25.10.2026): compact sub-menu lists, no gap between item and panel ----------
   The panel closed when the mouse moved down: the bar is taller than the link, and the strip between link and panel
   was outside the hovered item. Now every item fills the full bar height and its panel starts at its bottom edge. */
@media (min-width: 1201px) {
  .nav-inner { align-items: stretch; padding-top: 0; padding-bottom: 0; min-height: 56px; }
  .nav-logo, .btn-search-icon { align-self: center; }
  .nav-menu { align-self: stretch; align-items: stretch; }
  .nav-dropdown { position: relative; display: flex; align-items: center; }
  .nav-dropdown .dropdown-menu, .nav-dropdown.nav-dd-right .dropdown-menu,
  .nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu,
  .nav-dropdown.nav-dd-right:hover .dropdown-menu, .nav-dropdown.nav-dd-right:focus-within .dropdown-menu {
    top: 100%; left: 0; right: auto; transform: none; width: auto; min-width: 240px; max-width: none;
    display: none; grid-template-columns: 1fr; padding: .6rem; gap: 0; }
  .nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu { display: block; opacity: 1; visibility: visible; }
  .nav-dropdown.nav-dd-right .dropdown-menu, .nav-dropdown.nav-dd-right:hover .dropdown-menu,
  .nav-dropdown.nav-dd-right:focus-within .dropdown-menu { left: auto; right: 0; }
}
.dropdown-menu > a { display: block; padding: .45rem .7rem; border-radius: 6px; font-size: .92rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.dropdown-menu > a:hover { background: var(--bg); color: var(--accent); }
.dropdown-menu > a.dd-alle { color: var(--accent); border-top: 1px solid var(--border); margin-top: .3rem; padding-top: .6rem; border-radius: 0; }
@media (max-width: 1200px) { .dropdown-menu > a { white-space: normal; } }
/* Footer v2: brand + Guides + About */
.site-footer .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 760px) { .site-footer .footer-grid { grid-template-columns: 1fr; } }
.footer-brand p a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }