/*
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.21.14
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;
}
.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);}
@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:var(--gold);color:var(--gold-dark);
	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;}

/* "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;}}

.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;}

/* ---------- 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:14px;padding:18px 18px 22px;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;}
.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;}
.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:16px;}
.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;}
.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:12px;}
.hb-news-grid.hb-news-grid-view{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
.hb-news-empty{color:#a89d90;font-size:13.5px;}
.hb-news-card{position:relative;background:#17110f;border:1px solid #2a221c;border-radius:12px;padding:14px 46px 14px 16px;}
.hb-news-card[hidden]{display:none;}
.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;}
.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);}
@media (max-width:600px){.hb-news-head{gap:10px;}.hb-news-refresh{margin-left:0;}}

/* ---------- hb-dir-modal ("Lue lisää" -modaali: Domainit/Kaupungit/Nettiradiot/Ilmaiskokeilut) ---------- */
.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:9999;}
.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): artikkelikuva/pienoiskuva puuttui tästä modaalista
   kokonaan (JS ei aiemmin lukenut sitä REST-vastauksesta ollenkaan) —
   ks. hb-dir-modal.js:n extractFeaturedImage(). */
.hb-modal-image{display:block;width:100%;height:240px;object-fit:cover;border-radius:12px;margin-bottom:20px;box-shadow:0 14px 34px rgba(0,0,0,.4);}
.hb-modal-title{color:#fff;font-size:26px;margin:0 0 16px;padding-right:30px;line-height:1.3;}
/* 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;}}

/* ---------- 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;}