/*
Theme Name: Harrasteblogi
Theme URI: https://harrasteblogi.online
Author: Harrasteblogi
Description: Kevyt, responsiivinen oma teema Harrasteblogi.online-sivustolle. Ei Divi-riippuvuutta, itsepäivitettävä lohkoeditorilla (Gutenberg), valmiit mallipohjat artikkeleille, sivuille sekä Domainit/Kaupungit/Nettiraidiot/Ilmaiskokeilut-hakemistoille.
Version: 1.57.6
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: harrasteblogi
Update URI: harrasteblogi.online
*/
/* ==========================================================================
   Harrasteblogi — teeman tyylit
   Väripaletti: #d6111e (pää), #ddc76d (vaihtoehtoinen), #000, #fff
   Fontti: Open Sans
   ========================================================================== */

:root{
  --red:#d6111e;
  --red-dark:#a90d17;
  --red-tint:#fbe4e2;
  --gold:#ddc76d;
  --gold-dark:#7a6a2c;
  --gold-tint:#f8f2df;
  --ink:#17110f;
  --ink-soft:#4a413c;
  --muted:#7b716a;
  --line:#e7ded3;
  --line-strong:#d3c7b6;
  --bg:#fffdfa;
  --surface:#ffffff;
  --surface-alt:#f7f1e6;
  --shadow:0 1px 2px rgba(23,17,15,.05), 0 10px 28px -16px rgba(23,17,15,.18);
  --radius:12px;
  --maxw:1180px;
  --nav-w:250px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Open Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  line-height:1.65;
  font-size:16px;
}
img{max-width:100%;display:block;}
a{color:var(--red-dark);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{font-family:'Open Sans',sans-serif;font-weight:800;line-height:1.2;margin:0 0 .4em;text-wrap:balance;color:var(--ink);}
p{margin:0 0 1em;}
:focus-visible{outline:3px solid var(--red);outline-offset:2px;}
.skip-link{position:absolute;left:-999px;top:0;background:var(--red);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:200;}
.skip-link:focus{left:0;}

/* ---------- juhlapäivätunnelma (ks. hb_seasonal_mode() functions.php:ssä) ---------- */
.hb-season-banner{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:9px 40px;font-size:13.5px;font-weight:700;text-align:center;color:#fff;
  position:relative;background:linear-gradient(90deg,var(--red-dark),var(--red));
}
.hb-season-banner .hb-season-icon{font-size:16px;}
.hb-season-banner .hb-season-close{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.2);border:none;color:inherit;width:22px;height:22px;
  border-radius:50%;cursor:pointer;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;
}
.hb-season-banner .hb-season-close:hover{background:rgba(255,255,255,.36);}
body.hb-season-joulu .hb-season-banner,
body.hb-season-joulukausi .hb-season-banner{background:linear-gradient(90deg,#7a1420,#1f5c33);}
body.hb-season-itsenaisyyspaiva .hb-season-banner{background:linear-gradient(90deg,#00205b,#00368a);}
body.hb-season-uusivuosi .hb-season-banner{background:linear-gradient(90deg,#332257,#7a1f5c);}
body.hb-season-vappu .hb-season-banner{background:linear-gradient(90deg,var(--gold-dark),var(--red));}
body.hb-season-juhannus .hb-season-banner{background:linear-gradient(90deg,var(--gold),#e7c766);color:#3a2c10;}
body.hb-season-juhannus .hb-season-banner .hb-season-close{background:rgba(0,0,0,.1);}

/* Kevyt, esteettömyysasetuksia kunnioittava lumisade jouluna/joulukautena.
   Lisätään JS:llä (main.js) vain kun body-luokka on läsnä; pelkkä CSS
   riittää itse animaatioon. pointer-events:none, ettei mikään klikkaus
   koskaan jää sen alle. */
.hb-snow{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:5;}
.hb-snow span{position:absolute;top:-24px;color:#fff;user-select:none;will-change:transform;
  animation-name:hb-snow-fall;animation-timing-function:linear;animation-iteration-count:infinite;
  text-shadow:0 0 4px rgba(23,17,15,.25);}
@keyframes hb-snow-fall{
  0%{transform:translateY(-24px) translateX(0);}
  50%{transform:translateY(50vh) translateX(14px);}
  100%{transform:translateY(110vh) translateX(-10px);}
}
@media (prefers-reduced-motion:reduce){.hb-snow{display:none;}}

.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
@media (max-width:640px){.container{padding:0 18px;}}

/* ---------- header / nav ---------- */
.site-topbar{background:var(--ink);color:#fff;font-size:13px;}
.site-topbar .container{display:flex;justify-content:space-between;align-items:center;padding-top:6px;padding-bottom:6px;color:#cfc6bf;}
.site-topbar a{color:#fff;}

.site-header{
  background:var(--surface);
  position:sticky;top:0;z-index:100;
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px;}
.brand{display:flex;align-items:center;gap:10px;flex:none;}
.brand img{width:40px;height:40px;border-radius:8px;object-fit:contain;}
.brand .word{font-weight:800;font-size:19px;letter-spacing:-.01em;}
.brand .word span{color:var(--red);}
/* Ulkoasu > Mukauta > Sivustotiedot -kohdasta ladattu oma logo voi olla
   minkä tahansa kuvasuhteinen (leveä/suorakaide), joten sille ei pakoteta
   40x40-neliötä niin kuin teeman omalle oletuslogolle — korkeus pysyy
   siistinä ja tasaisena valikkopalkin kanssa, leveys mukautuu vapaasti. */
.brand--custom-logo img{width:auto;height:44px;max-width:240px;max-height:44px;border-radius:0;object-fit:contain;}
.brand--custom-logo .custom-logo-link{display:flex;align-items:center;line-height:0;}

/* Täysleveä valikkopalkki omana rivinään logon alla — tausta ulottuu koko
   näytön leveydelle, sisältö pysyy sivuston vakioleveydessä (--maxw). */
.primary-nav-bar{width:100%;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.primary-nav-bar .container{padding-top:0;padding-bottom:0;}
.primary-nav{flex:1;}
/* HUOM: ">"-lapsivalitsin TARKOITUKSELLA, ei tavallista jälkeläisvalitsinta —
   ".primary-nav ul" (ilman ">") olisi osunut myös sisäkkäiseen .sub-menu-
   listaan, jolloin alavalikko peri vahingossa display:flex+flex-wrap+
   justify-content-arvot päävalikolta. Tämä sekoitti alavalikon asettelun
   (lyhyet kohteet asettuivat samalle riville allekkain listautumisen
   sijaan) ja sai koko alavalikon näyttämään rikkinäiseltä. */
.primary-nav > ul{list-style:none;display:flex;gap:6px;margin:0;padding:0;flex-wrap:wrap;justify-content:space-between;}
.primary-nav > ul > li{position:relative;}
.primary-nav a{
  display:block;padding:12px;border-radius:8px;color:var(--ink-soft);font-weight:600;font-size:14.5px;
}
.primary-nav > ul > li > a:hover, .primary-nav > ul > li.is-active > a{background:var(--red-tint);color:var(--red-dark);text-decoration:none;}
.primary-nav .has-sub > a::after{content:"\25BE";font-size:10px;margin-left:5px;color:var(--muted);}
.primary-nav .sub-menu{
  list-style:none;display:block;margin:0;padding:8px;position:absolute;top:100%;left:0;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);min-width:210px;z-index:200;
  opacity:0;visibility:hidden;transform:translateY(4px);transition:.15s ease;
}
/* Alavalikko avautuu oletuksena kiinni triggerinsä VASEMPAAN reunaan
   (left:0) ja levittäytyy oikealle. "Hakemistot"-kohde (Domainit/Kunnat/
   Nettiradiot/Ilmaiskokeilut/Kategoriat ym.) sijaitsee lähellä valikkorivin
   OIKEAA reunaa, joten sen leveä alavalikko saattoi levitä ulos näytön
   oikeasta reunasta asti. Tämä luokka (ks. assets/js/main.js:
   sijoitaAlavalikot(), joka mittaa jokaisen alavalikon todellisen sijainnin
   ja lisää luokan tarvittaessa) kääntää KYSEISEN alavalikon sen sijaan kiinni
   triggerinsä OIKEAAN reunaan levittäytyen vasemmalle — pysyy aina näytöllä,
   riippumatta siitä kuinka monta/leveää kohdetta valikkoon lisätään jatkossa. */
.primary-nav .sub-menu.sub-menu--oikealle{left:auto;right:0;}
.primary-nav .sub-menu li{display:block;width:100%;}
.primary-nav .has-sub:hover .sub-menu, .primary-nav .has-sub:focus-within .sub-menu{opacity:1;visibility:visible;transform:translateY(0);}
.primary-nav .sub-menu a{display:block;padding:8px 10px;font-weight:500;font-size:14px;border-radius:7px;white-space:nowrap;}
.primary-nav .sub-menu a:hover{background:var(--surface-alt);text-decoration:none;}

.header-cta{flex:none;background:var(--red);color:#fff;padding:9px 16px;border-radius:8px;font-weight:700;font-size:13.5px;}
.header-cta:hover{background:var(--red-dark);color:#fff;text-decoration:none;}

.nav-toggle{display:none;flex:none;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:18px;color:var(--ink);}
.primary-nav-overlay{display:none;}
.primary-nav-close{display:none;}
@media (max-width:900px){
  .site-header{border-bottom:1px solid var(--line);}
  .primary-nav-bar{border:none;}
  .primary-nav{position:fixed;inset:0 0 0 auto;width:min(320px,88vw);background:var(--surface);
    transform:translateX(100%);transition:.25s ease;box-shadow:-16px 0 32px rgba(0,0,0,.15);
    padding:70px 22px 22px;overflow-y:auto;z-index:150;}
  .primary-nav.is-open{transform:translateX(0);}
  .primary-nav > ul{flex-direction:column;}
  .primary-nav .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding-left:14px;display:none;}
  .primary-nav .has-sub.is-open .sub-menu{display:block;}
  .nav-toggle{display:block;}
  .header-cta{display:none;}
}

/* ---------- hero (valkoinen, punaisella tehostettu — "myyvä" etusivu) ---------- */
.hero{background:var(--surface);color:var(--ink);padding:64px 0 56px;position:relative;overflow:hidden;border-bottom:1px solid var(--line);}
.hero::before{
	content:"";position:absolute;top:-140px;right:-160px;width:520px;height:520px;border-radius:50%;
	background:radial-gradient(circle at 30% 30%, var(--red) 0%, rgba(214,17,30,0) 70%);opacity:.14;pointer-events:none;
}
.hero .container{display:flex;align-items:center;gap:44px;flex-wrap:wrap;position:relative;}
.hero .htext{flex:1;min-width:280px;}
.hero .kicker{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--red-dark);font-weight:800;background:var(--red-tint);padding:5px 12px;border-radius:999px;}
.hero .kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);}
.hero h1{color:var(--ink);font-size:clamp(32px,5vw,50px);margin-top:16px;max-width:15ch;line-height:1.08;}
.hero h1 mark{background:none;color:var(--red);}
.hero p{color:var(--ink-soft);font-size:17px;max-width:50ch;margin-top:16px;}
.hero .actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:9px;font-weight:800;font-size:14.5px;border:2px solid transparent;}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 8px 20px -6px rgba(214,17,30,.55);}
.btn-primary:hover{background:var(--red-dark);color:#fff;text-decoration:none;}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent;}
.btn-ghost:hover{border-color:var(--red);color:var(--red);text-decoration:none;}
.hero .stat-strip{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap;}
.hero .stat-strip .s{border-left:2px solid var(--red);padding-left:12px;}
.hero .stat-strip .s b{display:block;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;}
.hero .stat-strip .s span{font-size:12px;color:var(--muted);}
.hero .art{
	flex:none;width:min(300px,82vw);aspect-ratio:1/1;border-radius:22px;position:relative;
	background:var(--surface);border:3px solid var(--red);
	display:flex;align-items:center;justify-content:center;padding:30px;
	box-shadow:0 24px 48px -20px rgba(214,17,30,.4), 0 0 0 8px var(--red-tint);
}
/* KORJAUS (2026-09): kuva näytti venyneen pystysuunnassa neliön sijaan
   pitkäksi suorakulmioksi. Aiemmin kuvalle oli asetettu vain "width:100%"
   ilman "height"- tai "object-fit"-määritystä, jolloin kuvan oma korkeus
   riippui täysin siitä missä vaiheessa selain ehti ladata/vaihtaa oikean
   kuvatiedoston (LiteSpeedin "lazy load" korvaa kuvan ensin pienellä SVG-
   paikkamerkillä ja vaihtaa oikeaan kuvaan vasta myöhemmin) — tämä välivaihe
   saattoi hetkellisesti näyttää väärän muotoisena ennen kuvan täyttä
   latautumista. "height:100%" + "object-fit:contain" pakottaa kuvan AINA
   täyttämään tasan neliönmuotoisen kehyksen sisäpuolen oikeassa kuva-
   suhteessa (ei venytystä), riippumatta lataustilanteesta tai siitä onko
   käytössä oletuslogo vai Ulkoasu > Mukauta -kohdasta asetettu oma kuva
   (joka voi olla minkä muotoinen tahansa — "contain" näyttää senkin aina
   vääristymättä, koskaan venyttämättä). HUOM: "overflow:hidden" EI ole
   lisätty kehykseen ("` .hero .art`"), koska kultainen "UUSI ILME" -liuska
   on tarkoituksella osittain kehyksen ulkopuolella (position:absolute,
   negatiiviset top/right-arvot) — se leikkautuisi näkyvistä jos kehykselle
   asettaisi overflow:hidden:n. */
.hero .art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.12));}
.hero .art .ribbon{
	position:absolute;top:-12px;right:-14px;background:#fff;color:var(--red);border:2px solid var(--red);
	font-size:11.5px;font-weight:800;padding:6px 12px;border-radius:999px;box-shadow:0 6px 14px rgba(0,0,0,.15);
	transform:rotate(6deg);
}

/* ---------- sections / cards ---------- */
.section{padding:48px 0;}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:22px;flex-wrap:wrap;}
.section-head h2{font-size:23px;}
.section-head .see-all{font-size:13.5px;font-weight:700;color:var(--red-dark);}

.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:880px){.card-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.card-grid{grid-template-columns:1fr;}}

/* "Selaa hakemistoja" -ruudukko: aina täsmälleen 4 sisältötyyppiä, joten
   4 saraketta samalle riville sen sijaan että neljäs jäisi omalle rivilleen. */
.card-grid--4{grid-template-columns:repeat(4,1fr);}
@media (max-width:880px){.card-grid--4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.card-grid--4{grid-template-columns:1fr;}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;}
.card .thumb{aspect-ratio:16/10;background:#000;position:relative;overflow:hidden;}
.card .thumb img{width:100%;height:100%;object-fit:cover;}
.card .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1;}
.pill{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:3px 9px;border-radius:999px;width:fit-content;}
.pill-gold{background:var(--gold-tint);color:var(--gold-dark);}
.pill-red{background:var(--red-tint);color:var(--red-dark);}

/* "Selaa hakemistoja" -korttien isot kuvakkeet (etusivu) — selkeästi
   näyttävämmät kuin pieni tekstipilleri, jonka sisään emoji jäi aiemmin
   liian pieneksi. */
.dir-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:16px;font-size:28px;line-height:1;
  background:linear-gradient(135deg,var(--red-tint),var(--gold-tint));
  box-shadow:inset 0 0 0 1px var(--line);
}
.card h3{font-size:16.5px;}
.card p{color:var(--muted);font-size:13.8px;margin:0;}
.card .meta{font-size:12px;color:var(--muted);margin-top:auto;padding-top:8px;display:flex;gap:10px;}
.hb-tool-card .thumb{display:flex;align-items:center;justify-content:center;background:#000;}
.hb-tool-icon span{font-size:54px;line-height:1;}
.hb-tool-card .body{gap:10px;}
.hb-tool-card p{flex:1;}
.hb-tool-btn{margin-top:4px;align-self:flex-start;}

/* ---------- Hakemistot-sivu (template-hakemistot.php) ----------
   OMAT luokat (.hb-dirs-*), EIVÄT jaettuja .card/.hb-tool-card-luokkia
   template-tyokalut.php:n kanssa — ks. selitys itse tiedostossa. Jokainen
   kortti saa hakemistotyypin oman aksenttivärin CSS-muuttujana
   (--hb-dirs-accent, asetetaan inline-tyylillä PHP:ssä hb_directory_
   accent_colors()-funktiosta) — sama väri kuin tallennukset-modaalin
   paikkamerkeissä, joten väritys pysyy yhdenmukaisena koko sivustolla. */
/* KORJAUS (2026-09): kiinteät repeat(3,1fr)/repeat(2,1fr) perustuivat
   NÄYTÖN leveyteen (media query), eivät säiliön omaan leveyteen — kun
   ruudukko sijoitettiin uuden ".hb-section-layout":n 70 %:n oikeaan
   sarakkeeseen, kolme korttia yritettiin silti ahtaa vain ~70 %:iin
   entisestä tilasta ja otsikot katkesivat. "auto-fit, minmax(...)" laskee
   sarakkeiden määrän AINA todellisen käytettävissä olevan leveyden mukaan
   (toimii sekä täysleveänä että 70 %:n sarakkeessa, myös jos ruudukko
   joskus siirretään vielä johonkin kolmanteen kontekstiin). */
.hb-dirs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:22px;margin-top:8px;}
.hb-dirs-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hb-dirs-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:5px;
  background:linear-gradient(90deg,var(--hb-dirs-accent,var(--red)),transparent 130%);
}
.hb-dirs-card:hover{
  transform:translateY(-5px);
  border-color:var(--hb-dirs-accent,var(--gold-dark));
  box-shadow:0 26px 48px -22px color-mix(in srgb, var(--hb-dirs-accent,var(--red)) 45%, transparent), var(--shadow);
}
.hb-dirs-card-link{display:flex;flex-direction:column;gap:14px;padding:26px 22px 6px;text-decoration:none;color:inherit;}
.hb-dirs-card-link:hover{text-decoration:none;}
.hb-dirs-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:16px;font-size:30px;line-height:1;
  background:linear-gradient(135deg,color-mix(in srgb, var(--hb-dirs-accent,var(--red)) 22%, var(--surface)),var(--surface-alt));
  box-shadow:inset 0 0 0 1px var(--line);
}
.hb-dirs-body{display:flex;flex-direction:column;gap:6px;}
.hb-dirs-title{font-size:18px;margin:0;color:var(--ink);}
.hb-dirs-desc{color:var(--muted);font-size:13.8px;margin:0;}
.hb-dirs-count{font-size:12px;color:var(--muted);font-weight:700;}
.hb-dirs-preview{list-style:none;margin:14px 22px 0;padding:12px 0 0;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:6px;}
.hb-dirs-preview-item a{
  display:flex;align-items:baseline;gap:6px;font-size:12.8px;color:var(--ink-soft);
  text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hb-dirs-preview-item a:hover{color:var(--hb-dirs-accent,var(--red-dark));text-decoration:underline;}
.hb-dirs-preview-flag{flex:none;font-size:1.05em;}
.hb-dirs-btn{
  margin:16px 22px 22px;align-self:flex-start;
  display:inline-flex;align-items:center;gap:6px;
  background:var(--hb-dirs-accent,var(--red));color:#fff;
  font-weight:700;font-size:13.5px;padding:10px 18px;border-radius:999px;
  text-decoration:none;transition:filter .15s ease,transform .15s ease;
}
.hb-dirs-btn:hover{filter:brightness(1.1);transform:translateX(2px);text-decoration:none;}
@media (max-width:420px){
  .hb-dirs-card-link{padding:20px 18px 4px;}
  .hb-dirs-icon{width:50px;height:50px;font-size:24px;border-radius:12px;}
  .hb-dirs-title{font-size:16px;}
  .hb-dirs-preview,.hb-dirs-btn{margin-left:18px;margin-right:18px;}
}

/* ---------- Itsepäivittyvä alaotsikkonavigaatio (2026-09) ----------
   Käytetään template-hakemistot.php:llä ja template-tyokalut.php:llä:
   vasemmalla 30 % leveydeltä ".hb-section-nav" (template-parts/section-
   nav.php — listan SISÄLTÖ JA JÄRJESTYS tulevat suoraan Ulkoasu > Valikot
   -näkymästä, hb_menu_children_for_page()), oikealla 70 % sivun oma
   sisältö ".hb-section-content". Kevyt, vaalea kortti-ilme — TOISIN kuin
   hakemistoarkistojen tumma ".side-nav" (eri sivupohja, eri konteksti),
   koska nämä sivut (Työkalut/Hakemistot) ovat muutenkin vaaleita
   ".article-wrap"-sivuja.

   Leveys: ".article-wrap" on oletuksena 760px (artikkelisivujen lukuleveys),
   mikä ahtaisi tämän kaksipalstarakenteen liian kapeaksi. Sidotaan leveys
   suoraan tämän rakenteen ESIINTYMISEEN ":has()"-valitsimella — 1200px
   aina kun sivulla on tämä alasivunavigaatio — sen sijaan että luotettaisiin
   pelkästään ".hb-tool-page"-body-luokan sivukohtaiseen slug-listaan. */
.article-wrap:has(.hb-section-layout){max-width:1200px;}
/* Sivut joilla EI ole ".article-wrap"-kehystä valmiina (hakemistoarkistot,
   ks. archive-domain.php ym. — niiden ".directory" on muuten reunasta
   reunaan leveä) — tarjotaan sama 1200px:n keskitetty kehys erikseen. */
.hb-archive-section-wrap{max-width:1200px;margin:0 auto;padding:0 24px;box-sizing:border-box;}
.hb-section-layout{display:grid;grid-template-columns:30% 70%;gap:28px;align-items:start;margin-top:8px;}
@media (max-width:860px){.hb-section-layout{grid-template-columns:1fr;}}
.hb-section-nav{
  position:sticky;top:74px;align-self:start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px 20px 22px;
}
@media (max-width:860px){.hb-section-nav{position:static;}}
.hb-section-nav-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:10px;}
.hb-section-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.hb-section-nav li a{
  display:block;padding:8px 10px;border-radius:8px;
  color:var(--ink-soft);font-weight:600;font-size:14px;text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
.hb-section-nav li a:hover{background:var(--surface-alt);color:var(--ink);text-decoration:none;}
.hb-section-nav li.is-active a{background:var(--red-tint);color:var(--red-dark);}

/* Punamusta muunnos (2026-09, käyttäjän pyynnöstä) — käytetään hakemisto-
   sivuilla (Hakemistot-pääsivu + Domainit/Kunnat/Nettiradiot/Ilmaiskokeilut/
   Maatunnukset-arkistot). Sama tumma/punainen/kulta-perhe kuin hakemistojen
   oma hero-osio (template-parts/dir-hero.php) ja Windows-virhekoodit-sivu,
   jotta uusi laatikko tuntuu samalta tuoteperheeltä eikä irralliselta —
   vaikka se saattaa toistaa osan tumman ".side-nav":n "Sisältötyypit"-
   listasta (käyttäjän tietoinen valinta, ks. keskustelu 2026-09-22). */
.hb-section-nav--red{
  background:var(--ink);border:1px solid #2a221c;color:#f3ece5;
  border-top:3px solid transparent;
  background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(90deg,var(--red),var(--gold));
  background-origin:border-box;background-clip:padding-box,border-box;
}
.hb-section-nav--red .hb-section-nav-title{color:#a89d96;}
.hb-section-nav--red li a{color:#e6ddd5;}
.hb-section-nav--red li a:hover{background:rgba(255,255,255,.08);color:#fff;}
.hb-section-nav--red li.is-active a{background:var(--red);color:#fff;}

.hb-section-content{min-width:0;}
/* ".card-grid" (template-tyokalut.php) on sivustolla laajemmin jaettu
   luokka, jonka oletus-repeat(3,1fr) EI saa muuttua kaikkialla — tämä
   säiliökohtainen ylikirjoitus koskee vain ".hb-section-content":n SISÄLLÄ
   olevaa ruudukkoa, koska sillä on nyt vain 70 % entisestä tilasta
   käytettävissä (sama "auto-fit"-korjaus kuin ".hb-dirs-grid":lla). */
.hb-section-content .card-grid{grid-template-columns:repeat(auto-fit,minmax(215px,1fr));}

/* "Selaa hakemistoja" -kortit: vaakarivi, ikoni vasemmalla, teksti oikealla
   (eri asettelu kuin artikkelikortit, siksi omat luokkansa .hb-dirnav-*
   eikä yleistä .card-luokkaa — .card on kaytossa monessa muussa paikassa
   pystysuuntaisena). */
.hb-dirnav-card{
  display:flex;align-items:center;gap:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow);text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hb-dirnav-card:hover{
  transform:translateY(-3px);border-color:var(--gold-dark);
  box-shadow:0 16px 36px -16px rgba(214,17,30,.32);text-decoration:none;
}
.hb-dirnav-icon{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:16px;font-size:28px;line-height:1;
  background:linear-gradient(135deg,var(--red-tint),var(--gold-tint));
  box-shadow:inset 0 0 0 1px var(--line);
}
.hb-dirnav-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;}
.hb-dirnav-title{font-family:'Open Sans',sans-serif;font-weight:800;font-size:16px;color:var(--ink);}
.hb-dirnav-count{font-size:12.5px;color:var(--muted);}
.hb-dirnav-arrow{flex:none;color:var(--gold-dark);font-size:19px;font-weight:700;transition:transform .18s ease,color .18s ease;}
.hb-dirnav-card:hover .hb-dirnav-arrow{transform:translateX(4px);color:var(--red-dark);}
@media (max-width:420px){
  .hb-dirnav-card{padding:14px 16px;gap:12px;}
  .hb-dirnav-icon{width:46px;height:46px;font-size:22px;border-radius:12px;}
  .hb-dirnav-title{font-size:14.5px;}
}

/* Etusivun "Ota yhteytta" -osio: 2 palstaa (uutiskirje + yhteydenottolomake). */
.hb-front-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;text-align:left;}
@media (max-width:760px){.hb-front-contact-grid{grid-template-columns:1fr;gap:28px;}}
.hb-front-contact-col h2{font-size:21px;margin-bottom:6px;}
.hb-front-contact-col > p{color:var(--muted);font-size:14px;margin:0 0 16px;}
.hb-front-contact-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow);}

/* ---------- sivutus (arkistot, haku, hakemistot) ----------
   Korvaa WordPressin oletusarvoisen tyylittelemättömän linkkilistan
   ammattimaisemmalla, brändin väreihin sopivalla versiolla. Käytetään
   aina funktions.php:n hb_pagination()-kääreen kautta, ks. sen kutsu-
   paikat (index.php, search.php, dir-grid.php). */
.hb-pagination-wrap{margin-top:28px;}
.hb-pagination{margin:0;}
.hb-pagination .nav-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;}
.hb-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 14px;
  border-radius:10px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-soft);
  font-weight:700;font-size:14px;text-decoration:none;
  transition:border-color .15s ease,color .15s ease,background .15s ease,box-shadow .15s ease;
}
.hb-pagination a.page-numbers:hover{border-color:var(--red);color:var(--red-dark);box-shadow:var(--shadow);text-decoration:none;}
.hb-pagination .page-numbers.current{
  background:linear-gradient(135deg,var(--red),var(--red-dark));
  border-color:transparent;color:#fff;box-shadow:var(--shadow);
}
.hb-pagination .page-numbers.dots{border-color:transparent;background:transparent;color:var(--muted);min-width:auto;padding:0 4px;}
.hb-pagination .page-numbers.prev,
.hb-pagination .page-numbers.next{padding:0 18px;font-weight:700;color:var(--ink);}
.hb-pagination .page-numbers.prev:hover,
.hb-pagination .page-numbers.next:hover{background:var(--gold-tint);border-color:var(--gold);color:var(--gold-dark);}
@media (max-width:480px){
  .hb-pagination .page-numbers{min-width:36px;height:36px;padding:0 10px;font-size:13px;}
  .hb-pagination .page-numbers.prev,.hb-pagination .page-numbers.next{padding:0 12px;}
}

/* ---------- article ---------- */
.article-wrap{max-width:760px;margin:0 auto;padding:44px 24px 0;}
/* Työkalusivut (DNS/IP/MX/SSL/WHOIS, AI-vertailu, Live Grid) — leveämpi
   asettelu, ks. hb_tool_page_body_class() funktions.php:ssä. */
.hb-tool-page .article-wrap{max-width:1200px;}
/* Artikkelit JA muut yksittaissisallot (post-tyypit domain/kaupunki/
   nettiraidiot/ilmaiskokeilu/hb_tapahtuma), jotka kaikki kayttavat samaa
   single.php-mallia - leveampi sisaltoalue. body.single tulee WordPressin
   omasta body_class()-funktiosta MILLE TAHANSA yksittaisnakymalle (post
   TAI mika tahansa custom post type), joten tama EI vaikuta tavallisiin
   sivuihin (page.php saa body.page-luokan, ei body.single). */
body.single .article-wrap{max-width:1200px;}
body.single .article-wrap.article-with-sidebar{max-width:1200px;}
.article-head .kicker{color:var(--red-dark);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;}
/* Artikkelin pääotsikko — bränditunnistettava punainen/kulta-aksenttipalkki
   otsikon alla (sama punainen->kulta-yhdistelmä kuin logossa/tunnuksessa),
   itse teksti pidetään tummana ja tasavärisenä luettavuuden vuoksi. */
.article-head h1{
  position:relative;font-size:clamp(30px,5vw,44px);font-weight:900;
  margin-top:10px;padding-bottom:20px;letter-spacing:-.02em;line-height:1.15;
}
.article-head h1::after{
  content:"";position:absolute;left:0;bottom:0;width:96px;height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--red) 0%,var(--red) 50%,var(--gold) 50%,var(--gold) 100%);
}
.article-head .byline{color:var(--muted);font-size:13.5px;margin-top:14px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
/* Kansikuva 1080x400 (artikkelit ja muut single-tyypit). */
.article-cover{margin:26px 0;border-radius:14px;overflow:hidden;aspect-ratio:1080/400;background:var(--surface-alt);}
.article-cover img{width:100%;height:100%;object-fit:cover;}
/* Pieni, tekstin sekaan aseteltava kansikuvan kopio leipätekstin alussa
   (alignleft) — SEO:n kannalta hyvä käytäntö (kuva lähellä leipätekstiä),
   erillinen isommasta yllä olevasta kansikuva-bannerista. */
.article-thumb-inline{width:220px;max-width:45%;height:auto;border-radius:12px;box-shadow:var(--shadow);}
/* Tiivistelmäkortti kansikuvan jälkeen — näkyy AINA (myös silloin kun
   artikkelilla ei ole omaa "Ote"-kenttää, jolloin teksti muodostetaan
   automaattisesti sisällöstä), ettei kuvan jälkeen hypätä suoraan
   pitkään leipätekstiin. */
.article-summary-card{background:var(--surface-alt);border:1px solid var(--line);border-left:4px solid var(--red);border-radius:12px;padding:18px 22px 20px;margin:0 0 28px;}
.article-summary-label{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--red-dark);margin-bottom:8px;}
.article-summary-text{font-size:15.5px;line-height:1.6;color:var(--ink-soft);margin:0;}
.article-summary-share{display:flex;gap:8px;margin-top:14px;}
.article-summary-share a{width:30px;height:30px;border-radius:8px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--ink-soft);}
.article-summary-share a:hover{background:var(--red);border-color:var(--red);color:#fff;}
/* Tekstiin (Perinteinen editori / lohkoeditori) lisattyjen kuvien
   tasaukset - WordPressin oma alignleft/alignright/aligncenter-luokitus,
   myos kuvatekstillisena (.wp-caption). */
.prose img.alignleft, .prose .wp-caption.alignleft{float:left;margin:6px 22px 16px 0;}
.prose img.alignright, .prose .wp-caption.alignright{float:right;margin:6px 0 16px 22px;}
.prose img.aligncenter, .prose .wp-caption.aligncenter{display:block;margin-left:auto;margin-right:auto;float:none;}
.prose .wp-caption{max-width:100%;}
.prose .wp-caption img{display:block;margin:0;}
.prose .wp-caption-text{font-size:13px;color:var(--muted);text-align:center;margin-top:6px;}
.prose::after{content:"";display:table;clear:both;}
/* Kapealla näytöllä kellutettu (alignleft/alignright) kuva ahtautuu
   tekstin viereen liian pieneksi — näytetään sen sijaan omalla rivillään. */
@media (max-width:560px){
  .prose img.alignleft, .prose img.alignright,
  .prose .wp-caption.alignleft, .prose .wp-caption.alignright{
    float:none;display:block;margin:0 auto 16px;max-width:100%;width:auto;
  }
}
/* ---------- artikkelin sisältö (prose) ----------
   Tavoite: otsikot ja listaukset erottuvat heti tekstimassasta, ilman
   että ulkoasu muuttuu raskaaksi. Käytetään sivuston omaa väripalettia
   (--red / --gold / --ink), ei uusia värejä.

   HUOM — TÄRKEÄ SKOOPPAUS (sama opetus kuin Domainit-hakemiston CSS-
   bugista aiemmin projektissa): artikkelin/sivun sisältö (.prose) voi
   sisältää KYMMENIÄ lyhytkoodeja (sää, AI-vertailu, RSS, uutislukija,
   uusimmat artikkelit, jne.) ja Liittyvät artikkelit -moduulin oman
   the_content-lisäyksen, joilla KAIKILLA on omat h2/h3/ul/li-elementtinsä
   ja OMA tarkka ulkoasunsa (esim. [hb_latest] ja [hb_rss] palauttavat
   suoraan <ul>-listan ilman kääre-diviä). Jos tästedes otsikko-/lista-
   koristelu kohdistettaisiin yleisesti "kaikkiin .prose:n sisällä oleviin
   h2/h3/ul/li-elementteihin", se rikkoisi jokaisen tällaisen lyhytkoodin
   oman asettelun. Siksi koristelu on rajattu KOSKEMAAN VAIN artikkelin
   OMIA, LOHKOEDITORISSA KIRJOITETTUJA suoria otsikko-/listalohkoja
   (">"-lapsivalitsin), ja lyhytkoodit suljetaan pois nimeltä mainiten
   niiden OMAT luokat: ":not(.card-grid):not(.hb-rss-list)" (paitsi juuri
   [hb_latest]/[hb_rss], joiden lista on aina luokallinen — .card-grid /
   .hb-rss-list). HUOM: aiemmin tässä käytettiin ":not([class])" eli
   "ei mitään luokkaa ollenkaan" — mutta WordPress 6.2+ lisää lohko-
   editorin otsikoille AINA luokan "wp-block-heading" ja listoille usein
   "wp-block-list", joten se versio esti myös kaikki oikeat artikkelin
   omat otsikot/listat koristelemasta. Nimetty poissulkeva lista korjaa
   tämän ja säilyttää silti alkuperäisen suojan lyhytkoodeja vastaan. */
.prose{font-size:17px;line-height:1.75;color:var(--ink-soft);}
.prose > *:first-child{margin-top:0;}

.prose > h2:not(.card-grid):not(.hb-rss-list){
  position:relative;font-size:clamp(22px,2.8vw,27px);font-weight:800;color:var(--ink);
  margin:2.1em 0 .9em;padding-bottom:.5em;letter-spacing:-.01em;
  border-bottom:2px solid var(--line);
  /* HUOM: otsikko "clearataan" aina irti kelluvista pienoiskuvista
     (.alignleft/.alignright), koska muuten lyhyt, kuvan viereen
     rivittyvä otsikko sai alareunansa (viivan + väriliu'un) osumaan
     kesken vielä-kelluvan kuvan päälle — otsikon LAATIKKO on aina
     koko palstan levyinen vaikka teksti rivittyykin kuvan viereen,
     joten sen alareunan koriste piirtyi kuvan sisään. clear:both
     pakottaa otsikon aina alkamaan vasta kuvan alapuolelta. */
  clear:both;
}
.prose > h2:not(.card-grid):not(.hb-rss-list)::before{
  content:"";position:absolute;left:0;bottom:-3px;width:64px;height:4px;border-radius:999px;
  background:linear-gradient(90deg,var(--red),var(--gold));
}
.prose > h3:not(.card-grid):not(.hb-rss-list){
  position:relative;font-size:clamp(17.5px,2vw,19.5px);font-weight:700;color:var(--ink);
  margin:1.8em 0 .7em;padding-left:16px;letter-spacing:-.005em;
  clear:both;
}
.prose > h3:not(.card-grid):not(.hb-rss-list)::before{
  content:"";position:absolute;left:0;top:.22em;width:7px;height:7px;border-radius:2px;
  background:var(--gold);transform:rotate(45deg);
}
.prose > h4:not(.card-grid):not(.hb-rss-list){
  position:relative;font-size:16px;font-weight:700;color:var(--ink);
  margin:1.6em 0 .6em;padding-left:14px;
  clear:both;
}
.prose > h4:not(.card-grid):not(.hb-rss-list)::before{
  content:"";position:absolute;left:0;top:.3em;width:6px;height:6px;border-radius:1px;
  background:var(--red-dark);
}

.prose p{margin-bottom:1.1em;}
/* "Ingressi": artikkelin ensimmäinen kappale hieman isompana/vaaleampana,
   jotta artikkeliin on selkeä, lehtimäinen sisäänheitto ennen leipätekstiä. */
.prose > p:first-of-type{font-size:1.18em;line-height:1.65;color:var(--ink);}
.prose a{color:var(--red-dark);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold-dark);text-decoration-thickness:1.5px;transition:color .15s,text-decoration-color .15s;}
.prose a:hover{color:var(--red);text-decoration-color:var(--red);}
.prose strong, .prose b{color:var(--ink);font-weight:700;}
.prose em{color:var(--ink-soft);}

/* Listaukset: omat merkit oletusympyröiden/numeroiden sijaan, jotta ne
   erottuvat selkeästi leipätekstistä. Rajattu koskemaan vain artikkelin
   OMIA, suoria, luokattomia listalohkoja (ks. yllä oleva selitys). */
.prose > ul:not(.card-grid):not(.hb-rss-list), .prose > ol:not(.card-grid):not(.hb-rss-list){margin:0 0 1.3em;padding-left:6px;list-style:none;}
.prose > ul:not(.card-grid):not(.hb-rss-list) > li, .prose > ol:not(.card-grid):not(.hb-rss-list) > li{margin-bottom:.5em;padding-left:26px;position:relative;}
.prose > ul:not(.card-grid):not(.hb-rss-list) > li > ul, .prose > ul:not(.card-grid):not(.hb-rss-list) > li > ol,
.prose > ol:not(.card-grid):not(.hb-rss-list) > li > ul, .prose > ol:not(.card-grid):not(.hb-rss-list) > li > ol{
  margin:.5em 0 0;padding-left:20px;list-style:none;
}

.prose > ul:not(.card-grid):not(.hb-rss-list) > li::before{
  content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 3px var(--gold-tint);
}
.prose > ol:not(.card-grid):not(.hb-rss-list){counter-reset:hb-ol;}
.prose > ol:not(.card-grid):not(.hb-rss-list) > li{counter-increment:hb-ol;}
.prose > ol:not(.card-grid):not(.hb-rss-list) > li::before{
  content:counter(hb-ol);position:absolute;left:0;top:0;min-width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;border-radius:6px;
  background:var(--red);color:#fff;font-size:11.5px;font-weight:800;line-height:1;
}

/* Alalistat (lista listan sisällä) — ilman tätä ne näyttäisivät selaimen
   OMAN pallukan (koska list-style:none koski vain ylintä listaa) PÄÄLLEKKÄIN
   yllä olevan oman kultapallukka-/numerojärjestelmän kanssa. Oma, hieman
   pienempi merkki myös alalistoille, ei koskaan selaimen oletusta. */
.prose > ul:not(.card-grid):not(.hb-rss-list) li ul > li, .prose > ul:not(.card-grid):not(.hb-rss-list) li ol > li,
.prose > ol:not(.card-grid):not(.hb-rss-list) li ul > li, .prose > ol:not(.card-grid):not(.hb-rss-list) li ol > li{
  position:relative;margin-bottom:.4em;padding-left:18px;
}
.prose > ul:not(.card-grid):not(.hb-rss-list) li ul > li::before, .prose > ol:not(.card-grid):not(.hb-rss-list) li ul > li::before{
  content:"";position:absolute;left:0;top:.68em;width:5px;height:5px;border-radius:50%;
  background:var(--red-dark);
}
.prose > ul:not(.card-grid):not(.hb-rss-list) li ol, .prose > ol:not(.card-grid):not(.hb-rss-list) li ol{counter-reset:hb-ol-nested;}
.prose > ul:not(.card-grid):not(.hb-rss-list) li ol > li, .prose > ol:not(.card-grid):not(.hb-rss-list) li ol > li{counter-increment:hb-ol-nested;}
.prose > ul:not(.card-grid):not(.hb-rss-list) li ol > li::before, .prose > ol:not(.card-grid):not(.hb-rss-list) li ol > li::before{
  content:counter(hb-ol-nested,lower-alpha) ".";position:absolute;left:0;top:0;
  color:var(--gold-dark);font-weight:800;font-size:12.5px;
}

.prose > blockquote:not(.card-grid):not(.hb-rss-list){
  position:relative;margin:1.8em 0;padding:1em 1.4em 1em 2.6em;border-left:3px solid var(--red);
  background:var(--red-tint);border-radius:0 10px 10px 0;color:var(--ink);
  font-size:16.5px;font-style:italic;
}
.prose > blockquote:not(.card-grid):not(.hb-rss-list)::before{
  content:"\201C";position:absolute;left:.5em;top:-.1em;font-family:Georgia,serif;
  font-style:normal;font-size:2.6em;line-height:1;color:var(--gold-dark);opacity:.55;
}
.prose > blockquote:not(.card-grid):not(.hb-rss-list) p:last-child{margin-bottom:0;}

.prose hr{position:relative;border:none;border-top:1px dashed var(--line);margin:2.4em 0;}
.prose hr::after{
  content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;transform:translate(-50%,-50%) rotate(45deg);
  background:var(--gold);border:2px solid var(--bg);
}

.prose > img, .prose p > img{border-radius:12px;max-width:100%;height:auto;box-shadow:var(--shadow);}
.prose figure{margin:1.6em 0;}
.prose figcaption{font-size:13px;color:var(--muted);text-align:center;margin-top:8px;}

/* "Leveä" ja "Täysi leveys" -kuvatasaukset (lohkoeditorin oma alignwide/
   alignfull-tuki, ks. functions.php: add_theme_support('align-wide')).
   Ilman näitä sääntöjä valinta ei tehnyt sivulla mitään, koska .prose ei
   itsessään rajaa tekstiä sivupalkkia kapeammaksi — kuva näytti aina
   yhtä leveältä kuin .article-wrap riippumatta valitusta tasauksesta.
   translateX(-50%) -temppu keskittää elementin NÄYTÖN keskelle riippumatta
   .article-wrapin omasta leveydestä, jolloin kuva voi murtautua ulos
   sivun sisältöpalstasta. */
.prose > .alignwide{width:100vw;max-width:1400px;margin-left:50%;transform:translateX(-50%);}
.prose > .alignfull{width:100vw;max-width:100vw;margin-left:50%;transform:translateX(-50%);}
.prose > .alignwide img, .prose > .alignfull img{width:100%;height:auto;display:block;}
.prose > .alignfull img{border-radius:0;}

/* Taulukko: Gutenbergin oma taulukkolohko (core/table) kääri <table>-
   elementin AINA <figure class="wp-block-table">-säiliöön, joten se ei
   koskaan ole .prose:n suora lapsi — pelkkä ">"-lapsivalitsin ei siis
   riitä, vaan täytyy osata hakea myös figure-kääreen läpi. */
.prose > table:not(.card-grid):not(.hb-rss-list),
.prose > figure.wp-block-table > table{
  width:100%;border-collapse:separate;border-spacing:0;margin:1.8em 0;font-size:15px;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--shadow);
}
.prose > table:not(.card-grid):not(.hb-rss-list) th, .prose > table:not(.card-grid):not(.hb-rss-list) td,
.prose > figure.wp-block-table > table th, .prose > figure.wp-block-table > table td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;}
.prose > table:not(.card-grid):not(.hb-rss-list) th,
.prose > figure.wp-block-table > table th{color:#fff;font-weight:700;background:linear-gradient(135deg,var(--red-dark),var(--red));border-bottom:none;}
.prose > table:not(.card-grid):not(.hb-rss-list) tr:last-child td,
.prose > figure.wp-block-table > table tr:last-child td{border-bottom:none;}
.prose > table:not(.card-grid):not(.hb-rss-list) tr:nth-child(even) td,
.prose > figure.wp-block-table > table tr:nth-child(even) td{background:var(--surface-alt);}
.prose > table:not(.card-grid):not(.hb-rss-list) tr:hover td,
.prose > figure.wp-block-table > table tr:hover td{background:var(--gold-tint);}
.prose > figure.wp-block-table{margin:1.8em 0;}
.ai-notice{display:inline-flex;align-items:center;gap:6px;background:var(--surface-alt);border:1px solid var(--line);color:var(--muted);font-size:12px;padding:5px 11px;border-radius:999px;margin-top:28px;}
.ai-notice b{color:var(--ink);}

.code-block{position:relative;background:#1c1512;color:#f1e9e0;border-radius:10px;padding:16px 44px 16px 16px;margin:1.4em 0;overflow-x:auto;border-left:3px solid var(--gold);line-height:1.55;}
.code-block code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13.5px;}
.code-copy{position:absolute;top:10px;right:10px;background:#332a24;color:#e6dcd2;border:none;border-radius:6px;padding:5px 9px;font-size:11px;cursor:pointer;}
.code-copy:hover{background:var(--red);color:#fff;}

/* Rivin sisäinen "koodi"-muotoilu (esim. `komento`-tyylinen pätkä keskellä
   lausetta) — erillinen yllä olevasta tummasta code-block-laatikosta, jota
   käytetään kokonaisille koodilohkoille (Gutenbergin "Koodi"-lohko). */
.prose code{background:var(--surface-alt);border:1px solid var(--line);border-radius:5px;padding:.15em .45em;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.9em;color:var(--red-dark);}
.prose pre code{background:none;border:none;padding:0;color:inherit;}

.tag-cloud{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:36px;}
.tag-cloud-label{flex:none;font-weight:700;font-size:13px;color:var(--ink-soft);}
.tag-cloud-tags{display:flex;flex-wrap:wrap;gap:8px;flex:1;}
.tag-cloud a{background:var(--surface-alt);border:1px solid var(--line);padding:5px 12px;border-radius:999px;font-size:12.5px;color:var(--ink-soft);font-weight:600;}
.tag-cloud a:hover{background:var(--gold-tint);border-color:var(--gold);color:var(--gold-dark);text-decoration:none;}

.share-row{display:flex;gap:8px;margin-top:20px;}
.share-row a{width:34px;height:34px;border-radius:8px;background:var(--surface-alt);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--ink-soft);}
.share-row a:hover{background:var(--red);border-color:var(--red);color:#fff;}

.related{background:var(--surface-alt);margin-top:56px;padding:44px 0;}
.related .container{max-width:var(--maxw);}

/* ---------- directory / archive with sidebar (Domainit, Kaupungit, Nettiraidiot, Ilmaiskokeilut, kategoriat) ---------- */
.directory{display:grid;grid-template-columns:var(--nav-w) 1fr;gap:0;align-items:start;}
@media (max-width:860px){.directory{grid-template-columns:1fr;}}
/* Kun ".side-nav" jätetään kokonaan renderöimättä (2026-09-22, ks.
   template-parts/sidebar-nav.php: piilotettu "Sisältötyypit" korvattu jo
   uudella "Tässä osiossa" -laatikolla eikä sivulla ole mitään muuta tähän
   sivupalkkiin) — ei jätetä tyhjää var(--nav-w)-levyistä aukkoa, vaan
   ".dir-content" saa koko tilan. */
.directory:not(:has(.side-nav)){grid-template-columns:1fr;}

.side-nav{
  position:sticky;top:74px;align-self:start;background:var(--ink);color:#fff;padding:26px 22px;
  border-radius:0 14px 14px 0;
}
@media (max-width:860px){.side-nav{position:static;border-radius:14px;margin:20px 24px 0;}}
.side-nav .grp{font-family:'Open Sans';font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#a89d96;margin:20px 0 8px;}
.side-nav .grp:first-child{margin-top:0;}
.side-nav ul{list-style:none;margin:0;padding:0;}
.side-nav li a{display:flex;align-items:center;gap:6px;padding:7px 0;color:#e6ddd5;font-size:14px;font-weight:600;}
.side-nav li a:hover, .side-nav li.is-active > a{color:var(--gold);text-decoration:none;}
.side-nav li.sub a{padding-left:14px;font-weight:400;font-size:13px;color:#c2b8b0;}
.side-nav .count{margin-left:auto;font-size:11px;color:#8a7f77;font-weight:400;}

/* "Näytä kaikki kategoriat" -paneeli (186 kategoriaa ei enää listata
   suoraan auki, ks. template-parts/sidebar-nav.php). */
.side-nav .cat-toggle-all{
  display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  margin-top:14px;padding:9px 12px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);border-radius:9px;color:#e6ddd5;
  font-family:'Open Sans';font-size:12.5px;font-weight:700;letter-spacing:.02em;
  cursor:pointer;transition:background .15s,border-color .15s;
}
.side-nav .cat-toggle-all:hover{background:rgba(255,255,255,.1);border-color:rgba(221,199,109,.4);}
.side-nav .cat-toggle-all .cat-toggle-arrow{transition:transform .2s ease;color:var(--gold);}
.side-nav .cat-toggle-all.is-open .cat-toggle-arrow{transform:rotate(180deg);}

.side-nav .cat-all-panel{margin-top:12px;padding-top:14px;border-top:1px dashed rgba(255,255,255,.14);}
.side-nav .cat-search-row{margin-bottom:10px;}
.side-nav .cat-search-input{
  width:100%;box-sizing:border-box;padding:9px 12px;border-radius:8px;
  border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.35);color:#fff;
  font-size:13px;font-family:'Open Sans';outline:none;transition:border-color .15s;
}
.side-nav .cat-search-input::placeholder{color:#8a7f77;}
.side-nav .cat-search-input:focus{border-color:var(--gold);}

.side-nav .cat-all-list{
  max-height:360px;overflow-y:auto;padding-right:4px;
  scrollbar-width:thin;scrollbar-color:rgba(221,199,109,.4) transparent;
}
.side-nav .cat-all-list::-webkit-scrollbar{width:6px;}
.side-nav .cat-all-list::-webkit-scrollbar-thumb{background:rgba(221,199,109,.35);border-radius:6px;}
.side-nav .cat-group{margin-bottom:2px;}
.side-nav .cat-group > a{font-size:13.5px;padding:6px 0;}
.side-nav .cat-sub{list-style:none;margin:0 0 4px;padding:0;}
.side-nav .cat-sub li a{padding:5px 0 5px 14px;font-weight:400;font-size:12.5px;color:#c2b8b0;}
.side-nav .cat-search-empty{font-size:12.5px;color:#a89d96;text-align:center;padding:14px 0 4px;margin:0;}

.dir-content{padding:36px 24px 60px;min-width:0;}
.crumbs{font-size:12.5px;color:var(--muted);margin-bottom:14px;}
.crumbs a{color:var(--muted);}
.dir-content h1{font-size:26px;}
.dir-content .lede{color:var(--muted);max-width:60ch;margin-top:6px;}
.dir-toolbar{display:flex;gap:10px;margin:20px 0;flex-wrap:wrap;}
.dir-toolbar input, .dir-toolbar select{border:1px solid var(--line-strong);border-radius:8px;padding:9px 12px;font-family:inherit;font-size:13.5px;background:var(--surface);}
.dir-toolbar input{flex:1;min-width:180px;}

.dir-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:6px;}
@media (max-width:1080px){.dir-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.dir-grid{grid-template-columns:1fr;}}
.dir-card{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:16px 18px;box-shadow:var(--shadow);}
.dir-card .top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;}
.dir-card h3{font-size:15px;}
.dir-card p{font-size:13px;color:var(--muted);margin:6px 0 0;}
.dir-card .badge-mini{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--gold-tint);color:var(--gold-dark);white-space:nowrap;}

/* ---------- tumma haku + suosikit -hakemisto (Nettiradiot, Kaupungit,
   Ilmaiskokeilut) — kävijä voi tallentaa suosikkinsa selaimen omaan
   muistiin (localStorage), ei vaadi tiliä/kirjautumista. ---------- */
.dir-toolbar-dark{display:flex;gap:10px;flex-wrap:wrap;align-items:center;background:#17110f;border-radius:12px;padding:14px 16px;margin:20px 0 14px;}
.dir-toolbar-dark input[type="search"]{flex:1;min-width:180px;border:1px solid #4a3d34;border-radius:8px;padding:10px 14px;background:#241a15;color:#fff;font-family:inherit;font-size:14px;}
.dir-toolbar-dark input[type="search"]::placeholder{color:#a89d90;}
.dir-toolbar-dark .btn-hae{background:var(--red);color:#fff;border:none;border-radius:999px;padding:10px 20px;font-weight:700;font-size:13.5px;cursor:pointer;}
.dir-toolbar-dark .btn-hae:hover{background:var(--red-dark);}
.dir-toolbar-dark .btn-suosikit{background:transparent;color:#fff;border:1px solid #4a3d34;border-radius:999px;padding:10px 18px;font-weight:700;font-size:13.5px;cursor:pointer;white-space:nowrap;}
.dir-toolbar-dark .btn-suosikit:hover{border-color:var(--gold);}
.dir-toolbar-dark .btn-suosikit.is-active{background:var(--gold);color:#000;border-color:var(--gold);}
.dir-count{color:var(--muted);font-size:13.5px;margin:4px 0 16px;}

.dir-grid-dark{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:6px;}
@media (max-width:1080px){.dir-grid-dark{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.dir-grid-dark{grid-template-columns:1fr;}}
.dir-card-dark{position:relative;background:#0d0a08;border:1px solid #2a221c;border-radius:12px;padding:16px 18px 18px;color:#f3ece5;}
.dir-card-dark h3{font-size:15.5px;margin:0;}
.dir-card-dark h3 a{color:#fff;}
.dir-card-dark p{font-size:13px;color:#a89d90;margin:8px 0 14px;line-height:1.5;}
.dir-card-dark .fav-btn{position:absolute;top:12px;right:12px;background:none;border:none;font-size:19px;line-height:1;color:#a89d90;cursor:pointer;padding:2px;}
.dir-card-dark .fav-btn.is-fav{color:var(--red);}
.dir-card-dark .btn-lue{display:inline-block;background:var(--red);color:#fff;border-radius:999px;padding:8px 18px;font-weight:700;font-size:13px;text-decoration:none;}
.dir-card-dark .btn-lue:hover{background:var(--red-dark);color:#fff;}
.dir-card-dark .share-mini{display:flex;gap:6px;margin-top:12px;}
.dir-card-dark .share-mini a{width:26px;height:26px;border-radius:50%;border:1px solid #3a2b22;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#a89d90;}
.dir-card-dark .share-mini a:hover{background:var(--red);border-color:var(--red);color:#fff;}
.dir-card-dark[hidden]{display:none;}
.hb-cctld-flag{font-size:1.15em;margin-right:2px;vertical-align:-1px;}
.hb-cctld-flag-lead{font-size:3rem;line-height:1;margin:0 0 6px;}

/* ---------- Hakemiston "Lataa lisää" -nappi (elävä haku / suosikit) ---------- */
.hb-dir-more-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;margin:26px 0 12px;}
.hb-dir-more-wrap[hidden]{display:none;}
.hb-dir-more-info{margin:0;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:center;}
.hb-dir-more-wrap.is-error .hb-dir-more-info{color:var(--red-dark);font-weight:600;}
.hb-dir-more-bar{width:min(240px,70%);height:4px;border-radius:999px;background:var(--line);overflow:hidden;}
.hb-dir-more-bar span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--red),#ff5a3c);transition:width .35s ease;}
.hb-dir-more-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-width:200px;padding:14px 28px;border:1px solid #4a3d34;border-radius:999px;
  background:linear-gradient(180deg,#261b16,#17110f);color:#fff;
  font-family:inherit;font-size:14px;font-weight:700;line-height:1;letter-spacing:.01em;cursor:pointer;
  box-shadow:0 10px 24px -14px rgba(23,17,15,.75),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .15s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.hb-dir-more-btn:hover{background:linear-gradient(180deg,#e0212e,var(--red));border-color:var(--red);transform:translateY(-1px);box-shadow:0 14px 26px -14px rgba(214,17,30,.7);}
.hb-dir-more-btn:active{transform:translateY(0);box-shadow:0 6px 14px -10px rgba(214,17,30,.7);}
.hb-dir-more-btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px;}
.hb-dir-more-ico{flex:none;transition:transform .2s ease;}
.hb-dir-more-btn:hover .hb-dir-more-ico{transform:translateY(2px);}
.hb-dir-more-spin{display:none;flex:none;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:hb-dir-spin .7s linear infinite;}
.hb-dir-more-btn.is-loading{cursor:progress;pointer-events:none;background:linear-gradient(180deg,#261b16,#17110f);border-color:#4a3d34;transform:none;box-shadow:0 10px 24px -14px rgba(23,17,15,.75);}
.hb-dir-more-btn.is-loading .hb-dir-more-ico{display:none;}
.hb-dir-more-btn.is-loading .hb-dir-more-spin{display:inline-block;}
.hb-dir-more-wrap.is-error .hb-dir-more-btn{border-color:var(--red);}
@keyframes hb-dir-spin{to{transform:rotate(360deg);}}
@media (max-width:560px){.hb-dir-more-btn{width:100%;max-width:360px;}}
@media (prefers-reduced-motion:reduce){
  .hb-dir-more-btn,.hb-dir-more-ico,.hb-dir-more-bar span{transition:none;}
  .hb-dir-more-btn:hover{transform:none;}
  .hb-dir-more-spin{animation-duration:2s;}
}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#cfc6bf;margin-top:60px;padding:44px 0 24px;font-size:13.5px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr;}}
/* KORJAUS (2026-09): otsikkotaso vaihdettu h4:stä h3:ksi (ks. footer.php) —
   Lighthouse/accessibility-tarkistus "Heading elements are not in a
   sequentially-descending order" hälytti, koska pääsisällön viimeinen
   otsikko oli aina h2 ja footer hyppäsi suoraan h4:ään ohittaen h3:n.
   Sama visuaalinen tyyli säilytetty, vain valitsin päivitetty. */
.site-footer h3{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.site-footer li{margin:6px 0;display:block;}
.site-footer a{color:#cfc6bf;display:inline-block;}
.site-footer a:hover{color:var(--gold);}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.footer-brand img{width:32px;height:32px;border-radius:7px;}
.footer-bottom{border-top:1px solid #332a24;margin-top:32px;padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#8a7f77;font-size:12.5px;}

/* ---------- misc ---------- */
.badge-strip{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;}
.badge-strip .b{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);}
.weather-block{max-width:1080px;margin:0 auto;}
.weather-search{display:flex;gap:8px;margin-bottom:14px;}
.weather-search-input{flex:1;padding:11px 14px;border-radius:10px;border:1px solid #e7ded3;background:#fff;font-size:14px;outline:none;}
.weather-search-input:focus{border-color:var(--red);}
.weather-search-btn{flex:none;background:var(--red);color:#fff;border:none;padding:11px 20px;border-radius:10px;font-weight:700;font-size:13.5px;cursor:pointer;}
.weather-search-btn:hover{background:var(--red-dark);}
.weather-result.is-loading{opacity:.55;}
.weather-error{color:#7b716a;font-size:13.5px;padding:16px 4px;}
.weather-widget{
  max-width:1080px;width:100%;box-sizing:border-box;background:linear-gradient(160deg,var(--ink) 0%,#2a1f18 100%);color:#fff;
  border-radius:16px;padding:24px 28px 26px;box-shadow:var(--shadow);
}
.weather-widget .weather-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.weather-widget .weather-main{display:flex;align-items:center;gap:6px;}
.weather-widget .weather-icon{width:72px;height:72px;flex:none;margin:-8px 0;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));}
.weather-widget .weather-temp-block{flex:1;}
.weather-widget .temp{font-size:42px;font-weight:800;line-height:1;letter-spacing:-.02em;}
.weather-widget .temp .unit{font-size:20px;font-weight:600;opacity:.75;margin-left:1px;}
.weather-widget .place{font-size:14px;color:var(--gold);font-weight:700;margin-top:4px;}
.weather-widget .weather-minmax{font-size:16px;font-weight:700;color:rgba(255,255,255,.85);}
.weather-widget .weather-minmax .wmax{color:#fff;}
.weather-widget .weather-minmax .wmin{color:rgba(255,255,255,.6);}
.weather-widget .weather-desc{font-size:14.5px;color:rgba(255,255,255,.85);margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.12);}
.weather-widget .weather-meta{display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:10px;font-size:13px;color:rgba(255,255,255,.8);}
.weather-widget .wm-label{color:rgba(255,255,255,.5);margin-right:3px;}
.weather-widget .weather-forecast{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);}
.weather-widget .weather-day{display:flex;flex-direction:column;align-items:center;gap:2px;background:rgba(255,255,255,.06);border-radius:10px;padding:10px 4px;text-align:center;}
.weather-widget .wd-label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:rgba(255,255,255,.65);}
.weather-widget .wd-temps{font-size:12.5px;}
.weather-widget .wd-temps .wmax{font-weight:700;color:#fff;}
.weather-widget .wd-temps .wmin{color:rgba(255,255,255,.55);}
@media (max-width:640px){
  .weather-widget .weather-forecast{grid-template-columns:repeat(3,1fr);}
  .weather-widget{padding:20px 18px 22px;}
}

/* ---------- hb-uutislukija (Uutiset-sivu, kategorioitu uutiskooste) ---------- */
.hb-news{background:#100c0a;border-radius:16px;padding:20px 20px 24px;color:#f3ece5;margin:20px 0;}
.hb-news-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px;}
.hb-news-live{display:flex;align-items:center;gap:6px;font-weight:800;font-size:12.5px;letter-spacing:.06em;color:#ff5b5b;}
.hb-live-dot{width:8px;height:8px;border-radius:50%;background:#ff2d2d;box-shadow:0 0 0 0 rgba(255,45,45,.6);animation:hb-live-pulse 1.6s infinite;}
@keyframes hb-live-pulse{0%{box-shadow:0 0 0 0 rgba(255,45,45,.55);}70%{box-shadow:0 0 0 8px rgba(255,45,45,0);}100%{box-shadow:0 0 0 0 rgba(255,45,45,0);}}
.hb-news-updated{font-size:12.5px;color:#a89d90;}
.hb-news-refresh{margin-left:auto;background:transparent;border:1px solid #4a3d34;color:#fff;border-radius:999px;padding:8px 16px;font-size:12.5px;font-weight:700;text-decoration:none;transition:border-color .15s ease,color .15s ease;}
.hb-news-refresh:hover{border-color:var(--gold);color:var(--gold);}
.hb-news-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;}
.hb-news-search{flex:1;min-width:180px;border:1px solid #4a3d34;border-radius:8px;padding:10px 14px;background:#1c1512;color:#fff;font-family:inherit;font-size:14px;}
.hb-news-search::placeholder{color:#a89d90;}
.hb-news-view{display:flex;gap:6px;}
.hb-view-btn{background:#1c1512;border:1px solid #4a3d34;color:#a89d90;border-radius:8px;width:38px;height:38px;font-size:16px;cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease;}
.hb-view-btn.is-active{background:var(--red);color:#fff;border-color:var(--red);}
.hb-news-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.hb-news-tab{background:#1c1512;border:1px solid #3a2b22;color:#cfc6bf;border-radius:999px;padding:8px 14px;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;gap:6px;transition:border-color .15s ease,background .15s ease,color .15s ease;}
.hb-news-tab span{background:rgba(255,255,255,.12);border-radius:999px;padding:1px 7px;font-size:11px;}
.hb-news-tab.is-active{background:var(--red);color:#fff;border-color:var(--red);}
.hb-news-tab.is-active span{background:rgba(255,255,255,.25);}
.hb-news-grid{display:grid;grid-template-columns:1fr;gap:14px;}
.hb-news-grid.hb-news-grid-view{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;}
.hb-news-empty{color:#a89d90;font-size:13.5px;}
/* Moderni korttilayout (2026-09): kuvallinen kortti — listanäkymässä vaakarivi
   (pieni neliökuva vasemmalla), ruudukkonäkymässä pystykortti (iso kuva
   ylhäällä, 16:10). Sama .hb-news-card-luokka molemmissa, suunta vaihtuu
   CSS:llä .hb-news-grid-view:n mukaan — ei erillistä JS/PHP-haaraa. */
.hb-news-card{
  position:relative;display:flex;gap:14px;align-items:stretch;
  background:#17110f;border:1px solid #2a221c;border-radius:14px;
  padding:14px 46px 14px 14px;overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hb-news-card:hover{
  transform:translateY(-4px);
  border-color:var(--hb-news-accent,#4a3d34);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.6), 0 0 0 1px var(--hb-news-accent,#3a2b22) inset;
}
.hb-news-card[hidden]{display:none;}
.hb-news-thumb{flex:none;width:112px;border-radius:10px;overflow:hidden;position:relative;background:#1c1512;}
.hb-news-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.hb-news-thumb-ic{display:none;}
.hb-news-thumb--empty{background:linear-gradient(135deg,var(--hb-news-accent,#3a2b22),#100c0a);}
.hb-news-thumb--empty .hb-news-thumb-ic{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;font-size:30px;line-height:1;
}
.hb-news-content{flex:1;min-width:0;display:flex;flex-direction:column;}
.hb-news-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;color:#a89d90;margin-bottom:6px;}
.hb-news-source{font-weight:800;letter-spacing:.03em;color:#cfc6bf;}
.hb-news-new{background:var(--red);color:#fff;border-radius:4px;padding:1px 6px;font-weight:800;font-size:10.5px;letter-spacing:.04em;}
.hb-news-title{font-size:15px;margin:0 0 6px;color:#fff;line-height:1.4;}
.hb-news-excerpt{font-size:13px;color:#a89d90;margin:0;line-height:1.5;}
.hb-news-actions{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:6px;}
.hb-news-fav,.hb-news-open{width:26px;height:26px;border-radius:50%;border:1px solid #3a2b22;background:transparent;color:#a89d90;font-size:13px;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;transition:border-color .15s ease,color .15s ease;}
.hb-news-fav.is-fav{color:var(--red);border-color:var(--red);}
.hb-news-open:hover,.hb-news-fav:hover{border-color:var(--gold);color:var(--gold);}
/* Ruudukkonäkymä: pystykortti, iso kuva ylhäällä. Toimintopainikkeet jäävät
   kuvan päälle (pyöreä tumma "lasi"-tausta pitää ne luettavina kuvan päällä). */
.hb-news-grid-view .hb-news-card{flex-direction:column;padding:0 0 16px;}
.hb-news-grid-view .hb-news-thumb{width:100%;aspect-ratio:16/10;border-radius:14px 14px 0 0;}
.hb-news-grid-view .hb-news-thumb-ic{font-size:44px;}
.hb-news-grid-view .hb-news-content{padding:14px 16px 0;}
.hb-news-grid-view .hb-news-actions{
  top:10px;right:10px;flex-direction:row;
  background:rgba(16,12,10,.55);backdrop-filter:blur(3px);
  border-radius:999px;padding:4px;gap:4px;
}
@media (max-width:600px){
  .hb-news-head{gap:10px;}
  .hb-news-refresh{margin-left:0;}
  .hb-news-thumb{width:80px;}
}

/* ---------- hb-dir-modal ("Lue lisää" -modaali: Domainit/Kaupungit/Nettiradiot/Ilmaiskokeilut) ---------- */
/* KORJAUS (2026-09): modaali meni navigaatiovalikon ALLE — sivun myöhempi
   ":root"-ylikirjoituslohko (ks. tämän tiedoston loppupuoli) nostaa
   .site-header:n z-index-arvoon 10000 ja mobiilinavigaation aina
   10002:een asti, kun tämä modaali oli vain 9999. Nostetaan modaali
   selvästi kaiken navigaation yläpuolelle. */
.hb-modal-overlay{position:fixed;inset:0;background:rgba(8,6,5,.72);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:100000;}
.hb-modal-overlay[hidden]{display:none;}
body.hb-modal-open{overflow:hidden;}
.hb-modal{position:relative;width:100%;max-width:920px;max-height:88vh;overflow-y:auto;background:#0d0a08;color:#f3ece5;border-radius:16px;border:1px solid #2a221c;border-top:3px solid transparent;background-image:linear-gradient(#0d0a08,#0d0a08),linear-gradient(90deg,var(--red),var(--gold));background-origin:border-box;background-clip:padding-box,border-box;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);padding:36px;}
.hb-modal-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:#1c1512;border:1px solid #3a2b22;color:#f3ece5;font-size:20px;line-height:1;cursor:pointer;transition:transform .2s,border-color .2s,color .2s;}
.hb-modal-close:hover{border-color:var(--gold);color:var(--gold);transform:rotate(90deg);}
.hb-modal-body{display:grid;grid-template-columns:2fr 1fr;gap:32px;}
.hb-modal.hb-modal-no-sidebar .hb-modal-body{grid-template-columns:1fr;}
.hb-modal-loading{color:#a89d90;font-size:13.5px;}
/* KORJAUS (2026-09, kierros 2): käyttäjä pyysi, ettei modaali näytä kuvaa
   missään hakemistossa (Domainit/Kunnat/Nettiradiot/Ilmaiskokeilut) —
   pelkkä otsikko riittää tekstinä. Kuvaelementti (<img class="hb-modal-
   image">) on poistettu kokonaan HTML-rungosta hb-dir-modal.js:ssä, joten
   .hb-modal-image-sääntöjä ei enää tarvita. Otsikko on nyt aina modaalin
   ensimmäinen näkyvä elementti, joten sen isompi "kansikuvan korvaava"
   tyyli on tästedes ainoa, oletuksena käytössä oleva tyyli. */
.hb-modal-title{color:#fff;font-size:30px;margin:6px 0 16px;padding-right:30px;line-height:1.3;}
.hb-modal-generic-info{margin-top:22px;padding-top:18px;border-top:1px solid #2a221c;}
.hb-modal-generic-info h4{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--gold);}
/* KORJAUS (2026-09, kierros 4): käyttäjä pyysi leipätekstin selvästi
   valkoiseksi (oli aiemmin vaalean beige #e3dbd3, joka näytti osassa
   artikkeleita himmeältä/harmaalta mustaa taustaa vasten). */
.hb-modal-content{color:#fff !important;font-size:15px;line-height:1.7;}
.hb-modal-content p{margin:0 0 14px;}
.hb-modal-content a{color:var(--gold) !important;text-decoration-color:rgba(221,199,109,.4);text-underline-offset:2px;}
.hb-modal-content a:hover{color:#fff !important;}
.hb-modal-content img{max-width:100%;height:auto;border-radius:10px;margin:14px 0;}
/* KORJAUS (2026-09): sivuston yleinen "h1,h2,h3,h4{color:var(--ink)}"-sääntö
   (style.css, artikkelin oma otsikkoväri vaalealle taustalle) osui myös
   TÄMÄN tumman modaalin sisällä oleviin artikkelin omiin alaotsikoihin,
   koska se on tägivalitsin eikä rajattu ".prose"-luokkaan — lopputulos oli
   lähes musta teksti mustaa taustaa vasten. Rajataan otsikot tässä aina
   valkoisiksi + lisätään kevyt kultainen korostus, samaa henkeä kuin
   artikkelisivun oma otsikkotyyli.
   LISÄKORJAUS (2026-09, kierros 2): tämä ei silti aina riittänyt — jos
   itse artikkelin sisältöön on liitetty/liimattu HTML jossain toisessa
   työkalussa (esim. suoraan ChatGPT:n verkkokäyttöliittymästä kopioitu
   pätkä), se saattaa sisältää OMAN elementin jonka luokka sattuu olemaan
   nimeltään "prose" (täysin sattumalta sama nimi kuin sivuston oma
   sisältökääre) — tällöin sivuston ".prose > h2:not(.card-grid)
   :not(.hb-rss-list){color:var(--ink);...}" (spesifisyys 0,3,1) voittaa
   tämän säännön (0,1,1), koska sen spesifisyys on suurempi, vaikka
   kyseessä ei ole ollenkaan sama sisältökääre. "!important" varmistaa
   että TÄMÄN modaalin otsikot ovat aina luettavia riippumatta siitä mitä
   artikkelin omaan sisältöön on liitetty. (Jos artikkelin teksti näyttää
   sisältävän tällaista vierasta liitettyä HTML:ää, kannattaa tarkistaa/
   siistiä se suoraan WordPressin sisällönmuokkaimessa — tämä CSS-korjaus
   suojaa vain LUKUPANEELIN OMAA ulkoasua, ei artikkelin normaalinäkymää.) */
/* KORJAUS (2026-09, kierros 4): käyttäjä pyysi otsikot punaisella (aiemmin
   valkoisella) — erottaa selvemmin leipätekstistä (joka on nyt yllä
   yksiselitteisesti valkoinen). Käytetään sivuston omaa brändipunaista
   ("--red"), joka on riittävän kirkas näkymään mustaa taustaa vasten. */
.hb-modal-content h1,.hb-modal-content h2,.hb-modal-content h3,
.hb-modal-content h4,.hb-modal-content h5,.hb-modal-content h6{
	color:var(--red) !important;font-weight:800;line-height:1.3;margin:1.3em 0 .55em;
}
.hb-modal-content h1:first-child,.hb-modal-content h2:first-child,
.hb-modal-content h3:first-child,.hb-modal-content h4:first-child{margin-top:0;}
.hb-modal-content h2{font-size:20px;padding-bottom:.4em;border-bottom:2px solid rgba(221,199,109,.25);}
.hb-modal-content h3{font-size:17.5px;}
.hb-modal-content h4{font-size:15px;}
.hb-modal-content ul,.hb-modal-content ol{padding-left:1.3em;margin:0 0 14px;}
.hb-modal-content li+li{margin-top:.35em;}
.hb-modal-content blockquote{margin:0 0 14px;padding:12px 18px;border-left:3px solid var(--gold);background:rgba(221,199,109,.06);border-radius:0 10px 10px 0;font-style:italic;color:#cfc6bf;}
.hb-modal-sidebar{display:flex;flex-direction:column;gap:14px;}
.hb-modal-side-box{background:#17110f;border:1px solid #2a221c;border-radius:12px;padding:16px 18px;}
.hb-modal-side-box h4{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--gold);}
.hb-modal-side-box p{margin:0 0 10px;font-size:13.5px;color:#cfc6bf;line-height:1.6;}
.hb-modal-side-box p:last-child{margin-bottom:0;}
.hb-modal-side-btn{display:block;text-align:center;background:var(--red);color:#fff;border-radius:999px;padding:10px 20px;font-weight:700;font-size:13.5px;text-decoration:none;}
.hb-modal-side-btn:hover{background:var(--red-dark);color:#fff;}
.hb-modal-side-box .freq-pill{position:relative;background:rgba(255,255,255,.05);border-left:3px solid var(--red);border-radius:8px;padding:9px 12px 9px 34px;font-weight:600;font-size:13px;color:#e3dbd3;margin-bottom:8px;}
.hb-modal-side-box .tag-pill-list{display:flex;flex-wrap:wrap;gap:6px;}
.hb-modal-side-box .tag-pill{display:inline-block;background:#1c1512;border:1px solid #2a221c;border-radius:999px;padding:6px 12px;font-size:12px;color:#cfc6bf;}
@media (max-width:760px){
	.hb-modal{padding:24px;max-height:92vh;}
	.hb-modal-body{grid-template-columns:1fr;}
	.hb-modal-title{font-size:21px;}
}

/* ---------- single.php: sivupalkillinen artikkeli (Nettiradiot/Kaupungit/Ilmaiskokeilut) ---------- */
.article-wrap.article-with-sidebar{max-width:1040px;display:grid;grid-template-columns:2fr 1fr;gap:36px;align-items:start;}
.article-with-sidebar .article-main{min-width:0;}
.article-with-sidebar .article-sidebar{display:flex;flex-direction:column;gap:14px;}
.article-sidebar .side-box{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow);}
.article-sidebar .side-box h4{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--red-dark);}
.article-sidebar .side-box p{margin:0 0 10px;font-size:13.5px;color:var(--ink-soft);line-height:1.6;}
.article-sidebar .side-box p:last-child{margin-bottom:0;}
.article-sidebar .side-btn{display:block;text-align:center;background:var(--red);color:#fff;border-radius:999px;padding:10px 20px;font-weight:700;font-size:13.5px;text-decoration:none;}
.article-sidebar .side-btn:hover{background:var(--red-dark);color:#fff;}
.article-sidebar .freq-pill{background:var(--surface-alt);border-left:3px solid var(--red);border-radius:8px;padding:9px 12px;font-weight:600;font-size:13px;color:var(--ink-soft);margin-bottom:8px;}
.article-sidebar .tag-pill-list{display:flex;flex-wrap:wrap;gap:6px;}
.article-sidebar .tag-pill{display:inline-block;background:var(--surface-alt);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:12px;color:var(--ink-soft);}
@media (max-width:900px){.article-wrap.article-with-sidebar{grid-template-columns:1fr;max-width:760px;}}

/* ---------- Kuntien yksittäissivujen otsikkoalue ---------- */
.article-head--municipality{
	position:relative;overflow:hidden;isolation:isolate;
	margin-bottom:30px;padding:34px clamp(24px,5vw,52px) 30px;
	background:
		linear-gradient(135deg,rgba(255,255,255,.98) 0 68%,rgba(221,199,109,.34) 68% 100%);
	border:2px solid var(--ink);border-top:8px solid var(--red);
	border-radius:4px 28px 4px 28px;
	box-shadow:10px 10px 0 rgba(221,199,109,.72);
}
.article-head--municipality::before{
	content:"";position:absolute;z-index:-1;right:-58px;top:-80px;
	width:220px;height:220px;border:34px solid rgba(214,17,30,.08);border-radius:50%;
}
.article-head--municipality .crumbs{margin-bottom:24px;color:var(--ink-soft);}
.municipality-kicker{
	display:inline-flex;align-items:center;gap:9px;margin-bottom:12px;
	font-size:12px;font-weight:800;letter-spacing:.14em;line-height:1;
	text-transform:uppercase;color:var(--red);
}
.municipality-kicker-icon{
	display:inline-grid;place-items:center;width:22px;height:22px;
	background:var(--red);border:5px solid var(--red-tint);border-radius:50%;
	box-shadow:0 0 0 1px var(--red);
	color:transparent;
}
.article-head--municipality h1{
	max-width:12ch;margin:0;color:var(--ink);
	font-size:clamp(42px,7vw,78px);line-height:.98;letter-spacing:-.055em;
	text-wrap:balance;
}
.article-head--municipality h1::after{display:none;}
.municipality-intro{
	max-width:62ch;margin:20px 0 0;padding-left:16px;
	border-left:4px solid var(--gold);color:var(--ink-soft);
	font-size:clamp(16px,2vw,19px);font-weight:600;line-height:1.55;
}
.municipality-title-mark{display:flex;gap:6px;margin-top:22px;}
.municipality-title-mark span{display:block;width:34px;height:5px;background:var(--red);transform:skewX(-24deg);}
.municipality-title-mark span:nth-child(2){width:18px;background:var(--gold);}
.municipality-title-mark span:nth-child(3){width:9px;background:var(--ink);}
.article-head--municipality .byline{
	display:inline-flex;margin-top:22px;padding:7px 12px;
	background:var(--ink);border-radius:999px;color:#fff;font-size:12px;
}
@media (max-width:640px){
	.article-head--municipality{padding:26px 20px 24px;border-radius:3px 20px 3px 20px;box-shadow:6px 6px 0 rgba(221,199,109,.72);}
	.article-head--municipality h1{font-size:clamp(38px,13vw,58px);}
	.municipality-intro{font-size:15.5px;}
}

/* ---------- Erikoispäätteiden yksittäissivujen otsikot ja väliotsikot ---------- */
.article-head--domain{
	position:relative;overflow:hidden;isolation:isolate;margin-bottom:34px;
	padding:34px clamp(24px,5vw,52px) 32px;color:#fff;background:#000;
	border:2px solid #000;border-bottom:8px solid var(--gold);
	border-radius:26px 4px 26px 4px;box-shadow:10px 10px 0 var(--red);
}
.article-head--domain::before{
	content:".";position:absolute;z-index:-1;right:20px;top:-74px;
	font-size:260px;font-weight:900;line-height:1;color:rgba(221,199,109,.16);
}
.article-head--domain::after{
	content:"";position:absolute;z-index:-1;inset:0;
	background:linear-gradient(120deg,transparent 0 66%,rgba(214,17,30,.24) 66% 100%);
}
.article-head--domain .crumbs,.article-head--domain .crumbs a{color:rgba(255,255,255,.72);}
.domain-kicker{
	display:flex;align-items:center;gap:10px;margin:24px 0 14px;
	color:var(--gold);font-size:12px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
}
.domain-kicker span{
	display:inline-flex;align-items:center;justify-content:center;height:25px;padding:0 8px;
	background:var(--red);border-radius:4px;color:#fff;font:800 10px/1 ui-monospace,SFMono-Regular,monospace;
	letter-spacing:0;
}
.article-head--domain h1{
	max-width:15ch;margin:0;color:#fff;font-size:clamp(38px,6.5vw,72px);
	line-height:1;letter-spacing:-.055em;overflow-wrap:anywhere;
}
.article-head--domain h1::after{display:none;}
.domain-intro{
	max-width:64ch;margin:20px 0 0;color:rgba(255,255,255,.84);
	font-size:clamp(16px,2vw,19px);font-weight:600;line-height:1.55;
}
.domain-title-mark{display:flex;align-items:center;gap:8px;margin-top:23px;}
.domain-title-mark span:first-child{width:74px;height:5px;background:var(--red);}
.domain-title-mark span:last-child{width:16px;height:16px;background:var(--gold);border-radius:50%;}
.article-head--domain .byline{
	display:inline-flex;margin-top:22px;padding:7px 12px;border:1px solid rgba(255,255,255,.3);
	border-radius:999px;color:#fff;font-size:12px;
}
.single-domain .prose{counter-reset:domain-section;}
.single-domain .prose h2{
	position:relative;margin-top:2em;padding:14px 18px 14px 58px;
	background:#fff;border:2px solid #000;border-left:8px solid var(--red);
	border-radius:3px 14px 3px 14px;box-shadow:5px 5px 0 rgba(221,199,109,.72);
	font-size:clamp(21px,3vw,28px);counter-increment:domain-section;
}
.single-domain .prose h2::before{
	content:counter(domain-section,decimal-leading-zero);position:absolute;left:15px;top:50%;
	transform:translateY(-50%);color:var(--red);font:900 15px/1 ui-monospace,SFMono-Regular,monospace;
}
.single-domain .prose h2::after{content:"";position:absolute;left:45px;top:14px;bottom:14px;width:1px;background:rgba(0,0,0,.2);}
@media (max-width:640px){
	.article-head--domain{padding:26px 20px 25px;border-radius:18px 3px 18px 3px;box-shadow:6px 6px 0 var(--red);}
	.article-head--domain h1{font-size:clamp(34px,11vw,52px);}
	.domain-intro{font-size:15.5px;}
	.single-domain .prose h2{padding:13px 14px 13px 50px;font-size:21px;}
	.single-domain .prose h2::before{left:11px;}
	.single-domain .prose h2::after{left:39px;}
}

/* ---------- 404-sivu ---------- */
.hb-404{background:var(--surface);padding:76px 0 64px;text-align:center;border-bottom:1px solid var(--line);}
.hb-404-inner{max-width:640px;margin:0 auto;}
.hb-404-badge{
  display:inline-block;font-size:clamp(64px,12vw,120px);font-weight:900;line-height:1;letter-spacing:-.03em;
  background:linear-gradient(135deg,var(--red) 40%,var(--gold-dark));-webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.hb-404 h1{font-size:clamp(24px,3.4vw,32px);color:var(--ink);margin:6px 0 10px;}
.hb-404-lede{color:var(--muted);font-size:16px;max-width:44ch;margin:0 auto 28px;}
.hb-404-search{max-width:420px;margin:0 auto 28px;}
.hb-404-links{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0;padding:0;}
.hb-404-links a{display:inline-block;padding:10px 18px;border-radius:999px;border:1.5px solid var(--line);color:var(--ink-soft);font-weight:700;font-size:14px;}
.hb-404-links a:hover{border-color:var(--red);color:var(--red-dark);background:var(--red-tint);text-decoration:none;}

/* ---------- some-linkit ([harrasteblogi_socials], footerin "Seuraa") ---------- */
.hb-socials{display:flex;align-items:center;gap:8px;flex-wrap:wrap;list-style:none;margin:0;padding:0;}
.hb-socials li{margin:0!important;padding:0!important;list-style:none!important;}
.hb-socials a{
  display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 9px;
  border:1.5px solid rgba(255,255,255,.28);border-radius:999px;color:#fff;text-decoration:none;
  line-height:1;font-weight:700;font-size:14px;box-sizing:border-box;transition:.15s;
}
.hb-socials a:hover{border-color:var(--gold);color:var(--gold);background:rgba(255,255,255,.06);text-decoration:none;}
.hb-socials--square a{border-radius:6px;}
.hb-socials--text a{border:0;min-width:auto;height:auto;padding:0;font-size:13px;color:#c2b8b0;}
.hb-socials--text a:hover{color:var(--gold);background:none;}

/* Footerin "Seuraa"-sarake: isommat, koko sarakkeen levyiset kuvakkeet
   (rivittyvä ruudukko) sen sijaan että jäisivät pieniksi 34px-pilleiksi. */
.hb-socials--footer{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:10px;width:100%;}
.hb-socials--footer li{width:100%;}
.hb-socials--footer a{
  width:100%;min-width:0;height:46px;padding:0;font-size:19px;
  border-radius:12px;border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.04);
}
.hb-socials--footer a:hover{background:rgba(221,199,109,.12);}
.hb-socials--footer.hb-socials--square a{border-radius:10px;}
.hb-socials--footer.hb-socials--text{display:flex;}
.hb-socials--footer.hb-socials--text a{width:auto;height:auto;font-size:13px;}

/* 1.22 — oma "toimituksellinen työpöytä" -ilme. */
:root{--bg:#ffffff;--surface:#ffffff;--surface-alt:#ffffff;--ink:#000000;--ink-soft:#000000;--muted:#000000;--line:rgba(0,0,0,.16);--line-strong:#000000;--red:#d6111e;--red-dark:#d6111e;--red-tint:rgba(214,17,30,.09);--gold:#ddc76d;--gold-dark:#ddc76d;--gold-tint:rgba(221,199,109,.18);--shadow:0 2px 0 rgba(0,0,0,.08),0 22px 50px -34px rgba(0,0,0,.55);--radius:18px;}
body{background-color:#ffffff;background-image:radial-gradient(rgba(0,0,0,.045) .7px,transparent .7px);background-size:8px 8px;}
h1,h2,h3,h4,.brand .word{font-family:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:-.025em;}
.site-header{border-top:4px solid var(--red);box-shadow:0 8px 30px rgba(24,19,17,.06);}
.primary-nav-bar{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);}
.hero{padding:86px 0 74px;background:linear-gradient(118deg,#ffffff 0 66%,#ddc76d 66%)!important;}
.hero::after{content:"";position:absolute;inset:22px 28px;border:1px solid rgba(24,19,17,.12);pointer-events:none;}
.hero h1{font-size:clamp(42px,6.3vw,76px);max-width:12ch;line-height:.98;}
.hero .art{transform:rotate(2.5deg);filter:drop-shadow(18px 24px 24px rgba(24,19,17,.18));}
.hero .art img{border-radius:26% 8% 24% 8%;}
.hero .ribbon{transform:rotate(-7deg);box-shadow:4px 5px 0 var(--ink);}
.section-head{border-bottom:2px solid var(--ink);padding-bottom:12px;}
.section-head h2::before{content:"//";color:var(--red);margin-right:.35em;font-family:ui-monospace,monospace;}
.card,.hb-dirnav-card{border:1px solid rgba(24,19,17,.14);box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease;}
.card:hover,.hb-dirnav-card:hover{transform:translateY(-5px) rotate(-.25deg);box-shadow:0 3px 0 rgba(24,19,17,.1),0 28px 55px -30px rgba(24,19,17,.5);}
.card-grid>.card:nth-child(even){transform:translateY(14px);}
.card-grid>.card:nth-child(even):hover{transform:translateY(9px) rotate(.25deg);}
.btn,.header-cta{border-radius:999px;}
@media (max-width:760px){.hero{padding:58px 0;background:linear-gradient(155deg,#ffffff 0 72%,#ddc76d 72%)!important;}.hero::after{inset:12px;}.hero h1{font-size:clamp(38px,12vw,58px);}.card-grid>.card:nth-child(even){transform:none;}}
@media (prefers-reduced-motion:reduce){.card,.hb-dirnav-card{transition:none;}.hero .art{transform:none;}}

/* 1.22.1 — alavalikot peittävinä ja muun sivusisällön yläpuolella. */
.site-header{z-index:10000;}
.primary-nav-bar{position:relative;z-index:9999;background:#ffffff;overflow:visible;isolation:isolate;}
.primary-nav-bar .container,.primary-nav,.primary-nav>ul,.primary-nav>ul>li{overflow:visible;}
.primary-nav .sub-menu{z-index:10001;background:#ffffff;opacity:0;visibility:hidden;pointer-events:none;border:2px solid #000000;box-shadow:8px 8px 0 rgba(221,199,109,.95);}
.primary-nav .has-sub:hover>.sub-menu,.primary-nav .has-sub:focus-within>.sub-menu,.primary-nav .has-sub.is-open>.sub-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);}
.primary-nav .sub-menu a{background:#ffffff;color:#000000;}
.primary-nav .sub-menu a:hover,.primary-nav .sub-menu a:focus-visible{background:#d6111e;color:#ffffff;}
@media (max-width:900px){.primary-nav-bar{z-index:10001;}.primary-nav{z-index:10002;background:#ffffff;}.primary-nav .sub-menu{background:#ffffff;border-left:3px solid #ddc76d;box-shadow:none;pointer-events:auto;}}

/* 1.35.2 — mobiilivalikko (burger): kiinteä valkoinen pohja koko paneelille ja alavalikoille.
   Vika: ".primary-nav-bar"-palkin backdrop-filter teki palkista "position:fixed"-lapsen sisältölohkon, jolloin paneeli
   kutistui palkin (korkeus 0) kokoiseksi, sen valkoinen tausta jäi vain ylimmäisen osan taakse ja sivun keltainen
   hero-kaista ja tekstit näkyivät valikon läpi. Nyt suodatin pois mobiilissa, paneeli on koko näytön korkuinen, aina
   peittävä valkoinen.
   KORJAUS (2026-09): "yläpalkki pysyy paneelin päällä" -rivi yllä oli tarkoituksellista, mutta osoittautui
   virheeksi — ".primary-nav-bar":lla on ".isolation: isolate" (ks. tiedoston loppupuoli, "1.22.1 — alavalikot"),
   joka vangitsee TÄMÄN paneelin oman z-indexin (oli 10002) omaan erilliseen pinoamiskontekstiinsa: ulkopuolelta
   (esim. ".site-header":sta) katsottuna koko paneeli näkyi vain ".primary-nav-bar":n OMAN z-indexin (oli 10001)
   arvoisena, joka jäi ".site-header":n (10003) alle — koko mobiilivalikko piiloutui yläpalkin taakse sen sijaan
   että olisi peittänyt sen. Nostettu sama asteikko kuin "Omat tallennukset" -vetolaatikolla (hb-tallennukset.css:
   .hbs-overlay 100010 / .hbs-drawer 100020).
   UUDISTUS (2026-09-22, käyttäjän pyynnöstä): PÄÄvalikko avautui tätä ennen TÄSMÄLLEEN samalla tavalla kuin
   "Omat tallennukset" -vetolaatikko — oikealta liukuva 320px:n valkoinen paneeli. Käyttäjä halusi PÄävalikolle oman,
   erottuvan avautumistyylin ("uniikki", ei sama kuin tallennuksissa). Uusi tyyli: koko näytön peittävä TUMMA
   ("punamusta") täystakeover, joka haalistuu+suurenee näkyviin (fade+scale) keskeltä — ei liu'u sivulta — samaa
   tumma/punainen/kulta-perhettä kuin muualla sivustolla jo käytetty "pro-widget"-ilme (dir-hero.php, Windows-
   virhekoodit, Kalenteri-työkalu). Tallennukset-vetolaatikkoon (hb-tallennukset.css) EI koskettu — se pysyy
   ennallaan valkoisena oikealta liukuvana paneelina, jotta kaksi järjestelmää eroavat nyt selvästi. Ainoa mikä
   PYSYY samana: ei edelleenkään suljeta ulkopuolelle klikkaamalla (käyttäjän aiempi, yhä voimassa oleva toive) ja
   valikko on aina yläpalkin (ja kaiken muun) päällä. */
@media (max-width:900px){
  .site-header{z-index:10003;}
  .primary-nav-bar{-webkit-backdrop-filter:none;backdrop-filter:none;background:transparent;border:0;z-index:100020;}
  .primary-nav-overlay{
    display:block;position:fixed;inset:0;z-index:100010;
    background:rgba(6,4,3,.75);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .3s ease,visibility 0s linear .3s;
  }
  body:has(#hb-primary-nav.is-open) .primary-nav-overlay{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s;}
  .primary-nav{
    position:fixed;inset:0;width:100%;height:100vh;height:100dvh;
    display:flex;flex-direction:column;justify-content:center;
    background:#0d0a08;
    background-image:
      radial-gradient(circle at 85% -10%, rgba(214,17,30,.35) 0%, rgba(214,17,30,0) 55%),
      radial-gradient(circle at -10% 110%, rgba(221,199,109,.22) 0%, rgba(221,199,109,0) 55%);
    padding:84px 30px 48px;overflow-y:auto;overscroll-behavior:contain;z-index:100020;
    box-shadow:none;
    border-top:3px solid transparent;
    background-origin:border-box;
  }
  /* Fade + scale keskeltä — EI liu'u sivulta, toisin kuin tallennusten vetolaatikko. */
  .primary-nav:not(.is-open){opacity:0;visibility:hidden;transform:scale(.96);transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s;}
  .primary-nav.is-open{opacity:1;visibility:visible;transform:scale(1);transition:opacity .3s ease,transform .3s ease,visibility 0s;}
  @media (prefers-reduced-motion:reduce){.primary-nav,.primary-nav:not(.is-open),.primary-nav.is-open{transition:opacity .15s linear;transform:none;}}
  /* Valikon oma sulkupainike (ks. header.php-kommentti) — kiinnitetty ".primary-nav":n
     omaan position:fixed-laatikkoon (top-right), sama idea kuin tallennusten ".hbs-x" mutta
     tumma-teemainen väritys, koska paneeli itse on nyt tumma eikä valkoinen. */
  .primary-nav-close{
    display:flex;position:absolute;top:22px;right:22px;align-items:center;justify-content:center;
    width:42px;height:42px;border:1px solid rgba(255,255,255,.18);border-radius:50%;cursor:pointer;
    background:rgba(255,255,255,.06);color:#f3ece5;font-size:22px;line-height:1;
    transition:background .2s ease,border-color .2s ease,transform .2s ease;
  }
  .primary-nav-close:hover,.primary-nav-close:focus-visible{background:var(--red);border-color:var(--red);color:#fff;transform:rotate(90deg);}
  .primary-nav > ul{background:transparent;gap:4px;}
  .primary-nav > ul > li{background:transparent;}
  .primary-nav a{background:transparent;color:#f3ece5;font-size:19px;font-weight:700;padding:13px 14px;border-radius:10px;}
  .primary-nav > ul > li.is-active > a,.primary-nav > ul > li > a:hover{background:rgba(214,17,30,.22);color:#ff6b74;}
  .primary-nav .sub-menu{
    background:rgba(255,255,255,.04);margin:4px 0 10px;padding:6px;border:1px solid rgba(255,255,255,.12);
    border-left:3px solid var(--gold);border-radius:0 12px 12px 0;box-shadow:none;
  }
  .primary-nav .sub-menu li{background:transparent;}
  .primary-nav .sub-menu a{background:transparent;color:#e6ddd5;font-size:16px;font-weight:600;padding:10px 12px;}
  .primary-nav .sub-menu a:hover,.primary-nav .sub-menu a:focus-visible{background:var(--red);color:#ffffff;}
}

/* ===========================================================================
   1.44 — Tumma/vaalea tila -kytkin (käyttäjän pyynnöstä, 2026-09-23)
   Pieni aurinko/kuu-painike yläpalkkiin, ennen "Omat tallennukset"
   -sydänpainiketta (ks. header.php). Valinta tallennetaan selaimeen
   (localStorage), oletuksena laitteen oma järjestelmäasetus. Itse
   <html data-theme="dark|light"> asetetaan header.php:n omalla anti-
   välähdys-skriptillä ennen sivun piirtoa — ei koskaan CSS-luokkana.

   HUOM sivuston värijärjestelmästä: suurin osa sivustosta käyttää jo
   CSS-muuttujia (--surface/--ink-soft/--muted/--line jne.), joten ne
   voidaan vaihtaa suoraan alla ja iso osa sivustosta "kääntyy" tummaksi
   automaattisesti. "--ink" on kuitenkin sivustolla KAKSOISKÄYTÖSSÄ:
   sekä leipätekstin väriksi (PITÄÄ vaihtua vaaleaksi) ETTÄ tarkoituksella
   tummina pysyvien "punamusta"-elementtien (footer, .site-topbar,
   .hb-section-nav--red, modaalit, .side-nav, kunta-/domain-otsikot)
   TAUSTAVÄRIKSI (EI SAA vaihtua — ne ovat jo valmiiksi tummia laatikoita
   kummassakin tilassa). Siksi "--ink"-muuttujaa itseään EI kosketa tässä
   — sen sijaan niille harvoille kohdille jotka käyttävät sitä LEIPÄ-
   TEKSTINÄ vaalealla (nyt tummalla) taustalla on omat, tarkkaan valitut
   ohitussäännöt alla. Kunta-sivun otsikko (.article-head--municipality)
   pysyy AINA tumman tekstin päällä, koska sen tausta on kiinteä vaalea
   liuska riippumatta sivuston teemasta — siksi sille on oma palautus-
   sääntö, ettei yleinen otsikko-ohitus vaikuta siihen.
   =========================================================================== */

[data-theme="dark"]{
  --bg:#151009;
  --surface:#1e1712;
  --surface-alt:#251d17;
  --ink-soft:#cfc6bf;
  --muted:#a89d96;
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.24);
  --red:#f23c4a;
  --red-dark:#ff727d;
  --red-tint:rgba(242,60,74,.16);
  --gold:#e9d68c;
  --gold-dark:#f3e3ab;
  --gold-tint:rgba(233,214,140,.14);
  --shadow:0 2px 0 rgba(0,0,0,.4),0 22px 50px -30px rgba(0,0,0,.9);
  color-scheme:dark;
}
[data-theme="dark"] body{
  background-color:var(--bg);
  background-image:radial-gradient(rgba(255,255,255,.045) .7px,transparent .7px);
  background-size:8px 8px;
  color:var(--ink-soft);
}

/* Leipäteksti-ohitukset: kohdat jotka käyttävät var(--ink):iä TEKSTIVÄRINÄ
   vaalealla (nyt tummalla) taustalla — ks. yllä oleva selitys. */
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] h4,
[data-theme="dark"] .nav-toggle,
[data-theme="dark"] .hero h1,
[data-theme="dark"] .hb-dirs-title,[data-theme="dark"] .hb-dirnav-title,
[data-theme="dark"] .hb-pagination .page-numbers.next,
[data-theme="dark"] .prose>p:first-of-type,[data-theme="dark"] .prose strong,[data-theme="dark"] .prose b,
[data-theme="dark"] .ai-notice b,
[data-theme="dark"] .hb-404 h1{
  color:#f3ece5;
}
[data-theme="dark"] .btn-ghost{color:#f3ece5;border-color:#f3ece5;}
[data-theme="dark"] .section-head{border-bottom-color:rgba(255,255,255,.2);}
/* Kunta-sivun otsikko: tausta pysyy AINA kiinteän vaaleana (ks. yllä) —
   korkeampi spesifisyys palauttaa tumman tekstin yleisen h1-ohituksen yli. */
[data-theme="dark"] .article-head--municipality h1,
[data-theme="dark"] .article-head--municipality .crumbs,
[data-theme="dark"] .municipality-intro{
  color:#17110f;
}

/* Yläpalkki / alavalikko: nämä käyttivät kiinteitä #fff-taustoja (eivät
   CSS-muuttujien kautta), joten vaativat omat ohitukset. */
[data-theme="dark"] .primary-nav-bar{background:rgba(30,23,18,.94);}
[data-theme="dark"] .primary-nav .sub-menu{background:var(--surface);border-color:rgba(255,255,255,.16);}
[data-theme="dark"] .primary-nav .sub-menu a{background:var(--surface);color:var(--ink-soft);}
[data-theme="dark"] .primary-nav .sub-menu a:hover,[data-theme="dark"] .primary-nav .sub-menu a:focus-visible{background:var(--red);color:#fff;}

/* Hero: brändin vinoviiva-liuska on aina kiinteä (vaalea+kulta) —
   tummassa tilassa sama liuska muuttuu tumma+kulta-versioksi, samaa
   "punamusta"-perhettä muun sivuston jo valmiiksi tummien laatikoiden
   kanssa (esim. .hb-section-nav--red, .side-nav). */
[data-theme="dark"] .hero{background:linear-gradient(118deg,#1e1712 0 66%,#5c4f22 66%)!important;}
@media (max-width:760px){[data-theme="dark"] .hero{background:linear-gradient(155deg,#1e1712 0 72%,#5c4f22 72%)!important;}}
[data-theme="dark"] .hero::after{border-color:rgba(255,255,255,.14);}
[data-theme="dark"] .hero .art .ribbon{background:var(--surface);color:var(--gold);border-color:var(--gold);}

/* Lomake-elementit (yleinen turvaverkko — esim. sääpalvelun haku,
   hakemistotoolbarin haku/valinta). */
[data-theme="dark"] input,[data-theme="dark"] textarea,[data-theme="dark"] select{
  background:var(--surface);color:var(--ink-soft);border-color:var(--line-strong);
}
[data-theme="dark"] .weather-search-input{background:var(--surface);border-color:var(--line-strong);color:var(--ink-soft);}
[data-theme="dark"] .article-summary-share a{background:var(--surface);}

/* Tallennuspaneelin tyhjän tilan teksti ei saa muuttua valkoiseksi tai
   selaimen valintavärin siniseksi tummassa teemassa. */
[data-theme="dark"] .hbs-empty,
[data-theme="dark"] .hbs-empty p,
[data-theme="dark"] .hbs-empty .hbs-muted{color:#b9aea6;}
[data-theme="dark"] .hbs-empty ::selection{background:rgba(233,214,140,.28);color:#f3ece5;}

/* HTML-sivukartta käyttää samoja punainen–kulta-teeman pintoja kuin
   hakemistokortit, myös tummassa tilassa. */
.hb-map-chip{display:inline-flex;align-items:center;min-height:32px;padding:6px 12px;border-radius:999px;background:var(--surface-alt);border:1px solid var(--line);color:var(--ink-soft);font-weight:700;font-size:12.5px;text-decoration:none;}
.hb-map-chip:hover,.hb-map-chip:focus-visible{background:var(--red);border-color:var(--red);color:#fff;text-decoration:none;}
.hb-map-group{margin:26px 0 0;padding:18px 20px;border:1px solid var(--line);border-top:3px solid var(--red);border-radius:16px;background:linear-gradient(135deg,var(--surface),var(--surface-alt));box-shadow:var(--shadow);}
.hb-map-group:nth-of-type(3n){border-top-color:var(--gold);}
.hb-map-group h2{margin:0 0 12px;font-size:19px;color:var(--ink);}
.hb-map-group ul{columns:2;column-gap:32px;list-style:none;padding:0;margin:0;}
.hb-map-group li{margin:5px 0;break-inside:avoid;}
.hb-map-group li a{color:var(--red);text-decoration:none;font-weight:600;}
.hb-map-group li a:hover,.hb-map-group li a:focus-visible{color:var(--red-dark);text-decoration:underline;}
[data-theme="dark"] .hb-map-group li a{color:#ff727d;}
[data-theme="dark"] .hb-map-group h2{color:#fff;}
[data-theme="dark"] .hb-map-group li a:hover,[data-theme="dark"] .hb-map-group li a:focus-visible{color:#f3e3ab;}
@media (max-width:650px){.hb-map-group ul{columns:1;}.hb-map-group{padding:15px;}}

/* Kategoria-/tagikorttien "Lue artikkeli" -linkki (.kat-card-cta) saa
   värinsä kortin OMASTA, per-kategoria-inline-tyylistä (--kat-a, ks.
   dir-grid.php) — yksi kolmesta paletista käyttää lähes mustaa sävyä
   (#17110f), joka on lähes näkymätön kortin OMAN tumman taustan päällä
   tummassa tilassa (löytyi visuaalisella tarkistuksella). Käytetään siksi
   tummassa tilassa aina yhtä, taatusti luettavaa korostusväriä sen sijaan
   että luotettaisiin kategorian omaan väriin. */
[data-theme="dark"] .kat-card-cta{color:var(--gold);}
[data-theme="dark"] .kat-card-cta:hover{color:var(--red-dark);}

/* Etusivun Kategoriabannerit-karuselli (Core-lisäosan .hb-catban-*,
   ks. hb-kategoriabannerit.css): sama --ink-ongelma kuin yllä olevassa
   .kat-card-cta-korjauksessa, löytyi suorituskyky/saavutettavuus-
   katsauksessa 2026-09-23. Kortin otsikko (.hb-catban-title) ja
   karusellin nuolipainikkeiden ikonit (.hb-catban-arrow) käyttävät
   TEKSTIVÄRINÄÄN var(--hbcb-ink):tä, joka periytyy var(--ink):stä — sama
   muuttuja joka on TARKOITUKSELLA jätetty vaihtumattomaksi tummassa
   tilassa, koska sitä käytetään myös pysyvästi tummina koristepintoina
   muualla (ks. yllä oleva kommentti "Leipäteksti-ohitukset"). Kortin OMA
   tausta (.hb-catban-card, var(--hbcb-surface)) taas VAIHTUU tummaksi
   tummassa tilassa — tuloksena lähes musta teksti lähes mustalla
   pohjalla (mitattu kontrastisuhde n. 1,1:1, WCAG AA vaatii 4,5:1
   leipätekstille). Sama korjaustapa kuin .kat-card-cta:lle: pakotetaan
   luettava, vaihtuva tekstiväri tummassa tilassa. */
[data-theme="dark"] .hb-catban-title{color:var(--ink-soft);}
[data-theme="dark"] .hb-catban-arrow{color:var(--ink-soft);}

/* Kuvat: kevyt himmennys, ettei täysin kirkas valokuva "riko" tummaa
   sivua — koskee vain oikeita <img>-elementtejä, ei koskaan kategorian
   omia inline-SVG-bannereita (ne pysyvät aina kirkkaina). */
[data-theme="dark"] img{filter:brightness(.9) contrast(1.02);}
[data-theme="dark"] .brand img{filter:brightness(.96);}

@media (prefers-reduced-motion:reduce){.theme-toggle{transition:none;}}

/* ---------- Painike itse (yläpalkki, ennen "Omat tallennukset") ---------- */
.site-header .theme-toggle{margin-left:auto;}
.theme-toggle{
  appearance:none;-webkit-appearance:none;position:relative;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;margin:0 10px 0 auto;padding:0;border-radius:50%;cursor:pointer;
  color:var(--ink);background:var(--surface);border:1.5px solid var(--line-strong);
  transition:transform .2s cubic-bezier(.22,1,.36,1),border-color .2s,box-shadow .2s,color .2s,background .2s;
  -webkit-tap-highlight-color:transparent;
}
.theme-toggle:hover{transform:translateY(-2px);border-color:var(--gold);color:var(--gold-dark);box-shadow:0 10px 22px -12px rgba(221,199,109,.55);}
.theme-toggle:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
.theme-toggle-icon{display:block;}
.theme-toggle-icon--sun{display:none;}
[data-theme="dark"] .theme-toggle-icon--moon{display:none;}
[data-theme="dark"] .theme-toggle-icon--sun{display:block;}
@media (max-width:900px){.theme-toggle{margin-right:8px;}}

/* ===========================================================================
   1.45 — Kategoriaindeksi-sivu ("Kaikki kategoriat", käyttäjän idea,
   2026-09-23). Bannerikortit + hakukenttä. Kortin visuaali on tarkoituksella
   samaa henkeä kuin etusivun Kategoriabannerit-karuselli (Harrasteblogi
   Core, ".hb-catban-card") mutta OMAT luokat/kiinteä leveys pois, koska
   tässä kortit elävät reagoivassa CSS Grid -ruudukossa eivätkä vaakavieritys-
   radalla. h3-otsikko käyttää tarkoituksella sivuston yleistä h1-h4-väriä
   (var(--ink)) eikä omaa väriä, jotta se kääntyy automaattisesti oikein
   myös tummassa tilassa (ks. "Tumma/vaalea tila" -osio yllä).

   LEVEYS (2026-09, käyttäjän pyynnöstä): 1200px sivuston yleisen 1180px:n
   (--maxw) sijaan — VAIN tällä sivulla, VAIN "#sisalto"-pääsisältöalueen
   ".container"-kääreissä (hero + hakukenttä + ruudukko), ei ylä-/alapalkissa
   (ks. selitys template-kategoriaindeksi.php:n alkukommentissa).
   =========================================================================== */
body.hb-kategoriaindeksi-page #sisalto .container{max-width:1200px;}

.catidx-search-row{margin:4px 0 20px;max-width:420px;}
.catidx-search-input{
  width:100%;box-sizing:border-box;padding:12px 16px;border-radius:999px;
  border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);
  font-family:inherit;font-size:14.5px;outline:none;transition:border-color .15s;
}
.catidx-search-input:focus{border-color:var(--red);}
.catidx-empty{color:var(--muted);margin:0 0 20px;}

.catidx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;}
.catidx-card{
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease;
}
.catidx-card:hover,.catidx-card:focus-visible{
  transform:translateY(-4px);box-shadow:0 3px 0 rgba(24,19,17,.1),0 24px 46px -26px rgba(24,19,17,.5);outline:none;
}
.catidx-card:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
/* HUOM: ".catidx-card{display:flex}" ohittaisi muuten selaimen oman
   "[hidden]{display:none}"-oletussäännön (sama spesifisyys, tämä sääntö
   myöhemmin), jolloin hakusuodatuksen piilottamat kortit jäisivät
   näkyviin tyhjinä laatikkoina — löytyi Playwright-testillä. */
.catidx-card[hidden]{display:none;}
.catidx-art{display:block;line-height:0;}
.catidx-art svg{display:block;width:100%;height:auto;}
.catidx-body{padding:14px 16px 16px;}
.catidx-title{font-size:15.5px;letter-spacing:-.01em;margin:0 0 3px;}
.catidx-count{display:block;font-size:12.5px;color:var(--muted);}
@media (prefers-reduced-motion:reduce){.catidx-card{transition:none;}}


/* Vaalea oletus; tumman tilan käyttöliittymäkuvakkeiden kontrasti. */
:root[data-theme="light"]{color-scheme:light;}
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .hbs-launcher{color:#f3ece5;border-color:#8c8178;}
[data-theme="dark"] .theme-toggle:hover,
[data-theme="dark"] .hbs-launcher:hover{color:#e9d68c;border-color:#e9d68c;}
[data-theme="dark"] .hbs-actions .hbs-btn:not(.is-on){color:#f3ece5;}
[data-theme="dark"] .hbs-actions--icon .hbs-btn,
[data-theme="dark"] .hbs-actions--pill .hbs-btn{background:#251d17;border-color:#8c8178;}
[data-theme="dark"] .hbs-actions .hbs-btn--fav.is-on{color:#ff727d;background:#251d17;}
[data-theme="dark"] .hbs-actions .hbs-btn--later.is-on{color:#e9d68c;background:#251d17;}
[data-theme="dark"] .hbs-actions .hbs-btn--later.is-on .hbs-shape{fill:#e9d68c;stroke:#e9d68c;}
[data-theme="dark"] .dir-icon,
[data-theme="dark"] .hb-dirs-icon,
[data-theme="dark"] .hb-dirnav-icon{color:#f3ece5;border:1px solid #8c8178;}
[data-theme="dark"] .brand img,
[data-theme="dark"] .ai-vertailu-logo img,
[data-theme="dark"] .ai-vertailu-compare-logo img{filter:none;}
[data-theme="dark"] .brand img{background:#fff;border-radius:8px;}

/* Saavutettavuus/SEO (2026-09-26): WordPressin vakioluokka ruudunlukijalle
   tarkoitetulle tekstille. Teemasta puuttui yleinen määrittely, joten esim.
   valikkopainikkeen ja Teksti-TV:n piilotettu H1 olisivat näkyneet. */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;}
.screen-reader-text:focus{background:#fff;clip:auto!important;clip-path:none;color:#17110f;display:block;height:auto;left:8px;padding:12px 16px;top:8px;width:auto;z-index:100000;}
.hb-index-title{margin:0 0 20px;}
.hb-index-title .hb-index-page{font-weight:400;font-size:.7em;color:var(--muted,#7b716a);}

/* Etusivun esittely ja uusimmat artikkelit: samanlevyiset palstat. */
.hb-front-hero h1{font-size:20px;line-height:1.3;max-width:none;}
.hb-front-editorial{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;align-items:start;}
.hb-front-intro,.hb-front-latest{min-width:0;}
.hb-front-intro{line-height:1.75;overflow-wrap:anywhere;}
.hb-front-intro h2{font-size:22px;line-height:1.35;margin:1.5em 0 .65em;}
.hb-front-intro h2:first-child{margin-top:0;}
.hb-front-intro p{margin:0 0 1.15em;}
.hb-front-intro a{text-decoration:underline;text-underline-offset:3px;}
.hb-front-latest .section-head{flex-wrap:wrap;gap:12px;}
.hb-front-latest .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.hb-front-latest .card-grid>.card:nth-child(even){transform:none;}
@media(max-width:880px){.hb-front-editorial{grid-template-columns:minmax(0,1fr);gap:32px;}}
@media(max-width:560px){.hb-front-latest .card-grid{grid-template-columns:minmax(0,1fr);}}

/* Tallennusten toimintolinkki ei peri artikkelisisällön linkkiväriä. */
.hbs-empty a.hbs-cta,
.hbs-empty a.hbs-cta:visited,
.hbs-empty a.hbs-cta:hover,
.hbs-empty a.hbs-cta:focus-visible,
.hbs-empty a.hbs-cta:active{color:#fff;text-decoration:none;}

/* Etusivun Mukauta-värit ovat inline-tyylejä: tumma tila ohittaa ne. */
[data-theme="dark"] .home .section{background:var(--bg)!important;color:var(--ink-soft);}
[data-theme="dark"] .home .section:nth-of-type(even){background:var(--surface)!important;}
[data-theme="dark"] .hb-front-hero h1,
[data-theme="dark"] .home .section-head h2,
[data-theme="dark"] .home .hb-front-contact-col>h2{color:#f3ece5!important;}
[data-theme="dark"] .hb-front-hero h1 mark{color:#ff727d!important;}
[data-theme="dark"] .hb-front-hero .htext>p,
[data-theme="dark"] .hb-front-intro{color:#cfc6bf;}
[data-theme="dark"] .hb-front-intro h2{color:#f3ece5;}
[data-theme="dark"] .hb-front-intro a{color:#ff727d;}
[data-theme="dark"] .hb-front-intro a:hover,
[data-theme="dark"] .hb-front-intro a:focus-visible{color:#f3e3ab;}
/* Sisältöotsikoiden tarkemmat vaalean tilan säännöt eivät saa voittaa. */
[data-theme="dark"] .prose>h2:not(.card-grid):not(.hb-rss-list),
[data-theme="dark"] .prose>h3:not(.card-grid):not(.hb-rss-list),
[data-theme="dark"] .prose>h4:not(.card-grid):not(.hb-rss-list){color:#f3ece5;}

/* Uutiskirje: ilmoitus säilyy luettavana myös aina tummassa yläpalkissa. */
.hbjn-newsletter .hb-newsletter-notice,
[data-theme="dark"] .hb-newsletter-notice{color:#f3ece5!important;background:#30291b!important;border-color:#ddc76d!important;}
.hb-newsletter-notice ::selection,.hb-newsletter-notice::selection{background:#ddc76d;color:#17110f;}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto;}
 .hbjn-badge{animation:none;}
 .hbjn-card,.hbjn-newsletter{transition:none;}
}