/* ==========================================================================
Madeiraguiden.se - huvudstilmall
Palett: laurissilva-groent (oeyas skog) + atlantblaatt, med strelitzia-
orange som accent mot en basaltvaskad off-white bakgrund. Groent i stedet
for blaatt som primaerfarge er et bevisst valg: Madeira selges paa fjell
og skog, ikke paa strand.
========================================================================== */
:root {
--brand: #16776B; /* laurissilva / levada */
--brand-d: #0B3B3C; /* vaat basalt */
--brand-l: #2E9C86;
--accent: #E4572E; /* strelitzia / taktegel */
--accent-h: #C8451F;
--accent-soft: #FCE9E1;
--blue: #2E6E8E; /* atlanten */
--gold: #E9A93C; /* banan / poncha-honning */
--bg: #F4F2EA; /* basaltvasket off-white */
--bg-2: #E8E5DA;
--white: #FFFFFF;
--text: #1B2622;
--text-light: #647069;
--border: #E1DDD0;
--good: #3F9D77;
--warn: #E0A33B;
--star: #E4572E;
--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(20,40,50,0.06), 0 8px 24px rgba(20,40,50,0.05);
--shadow-lg: 0 10px 40px rgba(20,40,50,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); }
/* Egen, bredare ram an textspalten (--maxw = 1180). Tio menyposter far
inte plats i 1 180 px ens i kompakt storlek, och en navrad som andas
lite mer an brodtexten ar dessutom helt normalt. */
.nav-inner { max-width: 1280px; margin: 0 auto; padding: .55rem 1.2rem; display: flex; align-items: center; gap: .9rem; }
.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; }
.nav-link { padding: .5rem .38rem; border-radius: var(--r-sm); font-size: .84rem; 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-image: var(--hero-img); 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(250px,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(250px,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 h4 { 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; }
/* ---------- Kreditering vid bilden -------------------------------------
Fullvärdig attribution för alla CC BY(-SA): upphov, licenstext, källa och
bearbetning. Ska synas och gå att läsa, men aldrig konkurrera med
brödtexten — därför liten grad, dämpad färg och understruken länk bara så
mycket att den syns som länk. */
.bildkredit-inline {
margin: .45rem 0 0; font-size: .72rem; line-height: 1.45;
color: var(--text-light);
}
.bildkredit-inline a {
color: inherit; text-decoration: underline; text-decoration-thickness: 1px;
text-underline-offset: 2px; text-decoration-color: rgba(100,112,105,.45);
}
.bildkredit-inline a:hover, .bildkredit-inline a:focus-visible {
text-decoration-color: currentColor; color: var(--brand);
}
/* Efter heroet: samma textkolumn som resten av sidan, högerställd så den inte
läser som en bildtext till rubriken. Vänsterställd på smal skärm, där den
annars bryter till flera rader med ojämn högerkant. */
.page-hero + .bildkredit-inline {
max-width: var(--maxw); margin: .5rem auto 0; padding: 0 1.2rem;
text-align: right;
}
@media (max-width: 640px) {
.page-hero + .bildkredit-inline { text-align: left; }
}
/* I figcaption ärver den centreringen från .article-figure figcaption. */
.article-figure figcaption .bildkredit-inline { margin-top: 0; }
.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 h4 { 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; }
/* ---------- Kompakt toppmeny pa smala skarmar --------------------------
MATT, inte gissat: med normal storlek kraver de tio menyposterna 1 374 px
(logo 205 + sok 40 + lankar 1 052 + padding och gap). Hamburgaren slog
inte in forran 1 100, sa mellan 1 101 och 1 373 rann menyn utanfor och gav
horisontell scroll pa hela sidan. Har kryms typsnitt, padding och logo sa
att allt ryms redan vid 1 101 px. */
@media (max-width: 1279px) {
/* Smalaste desktoplaget. Har kryms ocksa logotypen, annars ryms inte de
tio posterna vid 1 101 px.
INGEN min-width-grans: med devicePixelRatio 1,5 blir CSS-bredden ett
brakdelstal, och paret (max-width:1279)/(min-width:1280) traffade da
ingendera vid 1 279,33 - en dodzon pa en pixel dar menyn hoppade
tillbaka till full storlek och rann utanfor. Mobilblocket langre ner
tar over under 1 100. */
.nav-inner { gap: .7rem; padding-left: .8rem; padding-right: .8rem; }
/* .28rem, inte .34: 8 px marginal vid 1 110 px var for snalt tilltaget.
Skriftrendering skiljer sig nagra procent mellan operativsystem, och
den marginalen ska inte avgora om menyn rinner over. */
.nav-link { font-size: .8rem; padding: .45rem .28rem; }
.nav-logo { font-size: 1rem; gap: .4rem; }
.nav-logo-icon { width: 30px; height: 30px; border-radius: 8px; }
.dropdown-menu { padding: .8rem .9rem; }
}
/* ---------- 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; }
}
@media (max-width: 1100px) {
/* top:100% i stallet for inset:56px. Baren ar 57,3 px hog, inte 56, sa den
hardkodade siffran gav ett pixels overlapp - och hade brutits helt om
radhojden andrats. Nu foljer menyn barens faktiska underkant. */
.nav-menu { position: absolute; top: 100%; left: 0; right: 0; background: var(--white); flex-direction: column; align-items: stretch; padding: .6rem 1rem 1rem; gap: .15rem; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); display: none; max-height: 78vh; overflow-y: auto; overscroll-behavior: contain; }
.nav-menu.open { display: flex; }
.nav-link { padding: .85rem .6rem; border-radius: var(--r-sm); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.nav-dropdown:last-child .nav-link { border-bottom: none; }
/* DRAGSPEL. Tidigare lag alla tio undermenyer permanent utfallda: 56 lankar
och 2 311 px innehall i en 756 px hog ruta. Nu ar de hopfallda tills man
trycker, och sjalva hubben nas via "Allt om ..." langst ner i varje. */
.dropdown-menu { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: none; padding: .2rem 0 .7rem .8rem; min-width: 0; display: none; }
.nav-dropdown.oppen > .dropdown-menu { display: block; }
.nav-dropdown:hover .dropdown-menu { transform: none; }
/* Har stod content med en CSS-escape for nedatpilen. Escapen overlevde inte
skrivningen: filen fick den osynliga kontrollbyten U+0015 fulgt av
bokstaverna "be", og hver menyrad viste en tofu-rute og teksten "be".
Ingen kontroll kunne se det - CSS-en var gyldig, tegnkontrollen leser bare
HTML, og i kildekoden SER linja helt riktig ut.
Na er pilen et ekte element (.chev fra bygg.py) som roteres direkte.
Skriv aldri backslash-escaper i CSS-strenger her; sett tegnet i markupen. */
.nav-dropdown > .nav-link .chev { font-size: .8em; opacity: .55;
transition: transform .18s ease; display: inline-block; }
.nav-dropdown.oppen > .nav-link { color: var(--brand); }
.nav-dropdown.oppen > .nav-link .chev { transform: rotate(180deg); }
.dropdown-col { margin-bottom: .5rem; }
.dropdown-col a { padding: .5rem .2rem; }
.nav-toggle { display: block; margin-left: auto; }
/* Sidan bakom ska inte kunna rulla medan menyn ar oppen. */
body.meny-oppen { overflow: hidden; }
.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; }
}
@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(220px, 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;}
/* .cookie-consent-text har flex:1 1 360px. De 360 pixlarna ar flex-basis
LANGS HUVUDAXELN - i radlayouten ovan ar det en minimibredd, men har
vander axeln till column och samma varde blir en HOJD. Rutan blev 442 px
pa en 812 px skarm: 54 procent av mobilskarmen, mest tomt vitt, som det
forsta varje besokare mote. Nollstall basen nar axeln vander. */
.cookie-consent-text{flex:0 0 auto;}
}
/* ==========================================================================
Madeiraguiden - tillagg till den arvda mallen
========================================================================== */
/* ---------- Hero: helt rena bilder, inga filter eller toningar ----------
Den arvda mallen lade ett 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);
}
/* Kickern hade vit text pa en VIT halvgenomskinlig pille - rgba(255,255,255,.18)
ljusar upp underlaget och arbetade alltsa emot sin egen lasbarhet. Mot ljus
himmel matte den 1,86:1 dar 4,5:1 kravs for sa liten text (12,5 px).
Mork pille i stallet: da bar den sin egen kontrast och ar oberoende av vilket
karusellfoto som ligger under. Samma grepp som .page-hero .kicker pa alla
andra sidor - dar har den redan egen bakgrund. */
.hero-inner.hero-solo .pill {
background: rgba(8,40,38,.74);
border: 1px solid rgba(255,255,255,.16);
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.7); }
/* ---------- Fjadrad toning bakom forstasidans hero-text -----------------
Detta ar INTE textplattan som forkastades. Plattan var en rektangel med
kant och radie som lag som en ruta ovanpa fotot. Det har ar en ellips utan
kant som tonar ut till noll langt innan bildkanten - fotots horn, himmel
och ytterkanter ar ororda.
Varfor den behovs: karusellen byter motiv, och rubriken ar centrerad. Den
som lagger in ett nytt ljust foto senare far lasbarheten pa kopet i stallet
for att behova mata om. Toppvardet ar satt till det svagaste som klarar
WCAG pa alla fem motiv - se _harvest/forsidekontrast.py. */
.hero .serie::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: radial-gradient(ellipse 62% 58% at 50% 45%,
rgba(6,26,30,.26) 0%, rgba(6,26,30,.20) 55%, rgba(6,26,30,0) 78%);
}
/* ---------- 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 ![]()
i stedet for background-image --------
Bakgrunnsbilder kan ikke ha srcset. Som ![]()
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 ![]()
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 er arvet fra mallen; 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(--muted);
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 ---------- */
.dropdown-menu { min-width: 0; padding: .9rem 1rem; gap: .3rem 1.6rem;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.dropdown-menu.dropdown-themes { min-width: 0; }
.dropdown-col a { padding: .34rem .2rem; font-weight: 600; border-radius: 6px; }
.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 ---------- */
.toc ul { grid-template-columns: 1fr; }
@media (min-width: 700px) { .toc ul { grid-template-columns: 1fr 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; } }
/* ---------- Levadavaljarens 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. */
.lv-fakta { font-weight: 700; font-size: .88rem; color: var(--brand);
margin: .1rem 0 .45rem; letter-spacing: .01em; }
.vj-kort .lv-fakta + .desc { margin-top: 0; }
/* ---------- 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); }