.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 (![]()
) 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
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 ![]()
-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;}
}
/* Affiliate-banneri (ladataan vasta markkinointisuostumuksen jälkeen) */
.hb-affiliate-banner{display:flex;justify-content:center;align-items:center;width:100%;text-align:center;margin:25px auto}
.hb-affiliate-banner a{display:block;line-height:0;max-width:100%}
.hb-affiliate-banner[hidden]{display:none!important}
.hb-affiliate-banner img{display:block;margin:0 auto;max-width:100%;height:auto}
/* 1.50 — Footerin saumaton liittymä ja hyödyllinen apupaneeli */
.site-footer{margin-top:0!important;position:relative;background:#080808;color:#d8d2cc;border-top:3px solid #d6111e;padding-top:48px;}
.site-footer:before{content:"";position:absolute;top:-3px;left:0;right:0;height:3px;background:linear-gradient(90deg,#d6111e 0%,#d6111e 58%,#ddc76d 100%);}
.home .hb-front-contact{margin-bottom:0!important;}
.home #sisalto{padding-bottom:0!important;margin-bottom:0!important;}
.footer-help{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:36px;padding:26px 30px;border:1px solid rgba(221,199,109,.42);border-radius:18px;background:radial-gradient(circle at 100% 0%,rgba(214,17,30,.16),transparent 42%),linear-gradient(120deg,#171717,#101010);box-shadow:0 12px 32px rgba(0,0,0,.22);}
.footer-help__copy{max-width:650px;}
.footer-help__eyebrow{display:block;color:#ddc76d;font-size:10.5px;font-weight:850;letter-spacing:.14em;margin-bottom:9px;}
.site-footer .footer-help h2{color:#fff;font-size:clamp(18px,2.1vw,24px);line-height:1.2;letter-spacing:-.02em;margin:0 0 9px;}
.site-footer .footer-help p{color:#bcb4ad;line-height:1.7;font-size:13px;margin:0;max-width:620px;}
.footer-help__actions{display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:220px;}
.site-footer .footer-help__button{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 15px;border-radius:10px;background:linear-gradient(100deg,#d6111e,#ff5a19);color:#fff;font-weight:800;text-decoration:none;width:100%;box-sizing:border-box;transition:transform .18s,box-shadow .18s;}
.site-footer .footer-help__button:hover{color:#fff;transform:translateY(-2px);box-shadow:0 7px 18px rgba(214,17,30,.22);}
.site-footer .footer-help__link{font-size:12.5px;text-decoration:none;border-bottom:1px solid rgba(221,199,109,.35);padding-bottom:2px;}
.site-footer .footer-help__link:hover{color:#ddc76d;}
.footer-bottom{margin-top:28px;}
@media(max-width:760px){.footer-help{align-items:stretch;flex-direction:column;padding:22px 20px;gap:20px;margin-top:28px}.footer-help__actions{min-width:0;width:100%}.site-footer{padding-top:34px}}
/* Tekoälytyökalut-hakemiston SEO-opas — sama tumma/punainen/kultainen hakemistotyyli */
.hb-ai-guide{margin:42px 0 28px;padding:clamp(24px,4vw,38px);border:1px solid rgba(221,199,109,.48);border-radius:20px;background:linear-gradient(135deg,#111 0%,#1b1b1b 72%,#2b1012 100%);color:#f8f6f0;box-shadow:0 14px 35px rgba(0,0,0,.12)}
.hb-ai-guide__eyebrow{display:block;margin-bottom:10px;color:#ddc76d;font-size:.75rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.hb-ai-guide h2{margin:0 0 14px;color:#fff;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.2}
.hb-ai-guide>p{max-width:1000px;color:rgba(255,255,255,.84);line-height:1.8}
.hb-ai-guide__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0}
.hb-ai-guide__grid>div{padding:19px;border:1px solid rgba(221,199,109,.22);border-radius:13px;background:rgba(255,255,255,.045)}
.hb-ai-guide__grid h3{margin:0 0 8px;color:#ddc76d;font-size:1.03rem}
.hb-ai-guide__grid p{margin:0;color:rgba(255,255,255,.82);font-size:.93rem;line-height:1.7}
.hb-ai-guide .hb-ai-guide__note{margin:22px 0 0;padding:16px 18px;border-radius:10px;background:rgba(214,17,30,.13);border-left:3px solid #d6111e;color:#f5f0e8}
@media(max-width:680px){.hb-ai-guide{margin:30px 0 20px;padding:22px 18px}.hb-ai-guide__grid{grid-template-columns:1fr}}
/* 1.63.0 — Harrasteblogin esittelyvideo: etusivun hero sekä Info-sivun leveä esittely. */
.hero .hb-hero-video-art{
flex:0 1 560px;
width:min(560px,100%);
aspect-ratio:16/9;
padding:0;
overflow:hidden;
border:2px solid var(--red);
border-radius:20px;
background:#080707;
box-shadow:0 24px 48px -20px rgba(214,17,30,.38),0 0 0 7px var(--red-tint);
}
.hero .hb-hero-video-art .hb-hero-intro-video{
display:block;
width:100%;
height:100%;
object-fit:cover;
border-radius:17px;
background:#080707;
}
.hero .hb-hero-video-art .ribbon{
z-index:2;
top:15px;
left:15px;
right:auto;
transform:rotate(-4deg);
max-width:calc(100% - 30px);
padding:7px 13px;
border-radius:999px;
background:var(--red);
color:#fff;
font-size:11px;
font-weight:850;
letter-spacing:.02em;
box-shadow:3px 4px 0 rgba(0,0,0,.42);
}
.hb-video-sound-note{
position:absolute;
left:15px;
bottom:13px;
z-index:2;
color:#fff;
font-size:9px;
font-weight:800;
letter-spacing:.1em;
padding:7px 10px;
border:1px solid rgba(255,255,255,.25);
border-radius:999px;
background:rgba(0,0,0,.65);
backdrop-filter:blur(8px);
}
.hb-video-sound-note span{color:var(--gold);padding:0 4px}
.hb-info-video-section{
width:100%;
padding:52px 24px 68px;
background:linear-gradient(180deg,#f7f1e6 0%,#fffdfa 100%);
border-top:1px solid var(--line);
}
.hb-info-video-inner{max-width:1200px;margin:0 auto}
.hb-info-video-copy{max-width:850px;margin:0 0 24px}
.hb-info-video-kicker{display:inline-block;margin-bottom:10px;color:var(--red-dark);font-size:11px;font-weight:900;letter-spacing:.15em}
.hb-info-video-copy h2{font-size:clamp(27px,3.5vw,40px);letter-spacing:-.035em;line-height:1.13;margin:0 0 12px}
.hb-info-video-copy p{max-width:760px;color:var(--ink-soft);font-size:15px;line-height:1.8;margin:0}
.hb-info-video-frame{
overflow:hidden;
width:100%;
aspect-ratio:16/9;
border:2px solid var(--red);
border-radius:20px;
background:#080707;
box-shadow:0 22px 50px -30px rgba(23,17,15,.45),0 0 0 6px var(--red-tint);
}
.hb-info-video-frame video{display:block;width:100%;height:100%;object-fit:contain;background:#080707}
@media(max-width:760px){
.hero .hb-hero-video-art{flex:1 1 100%;width:100%;max-width:560px;margin:14px auto 0}
.hero .hb-hero-video-art .ribbon{top:10px;left:10px;font-size:10px}
.hb-video-sound-note{left:10px;bottom:9px;font-size:8px}
.hb-info-video-section{padding:36px 16px 46px}
.hb-info-video-frame{border-radius:13px;box-shadow:0 12px 30px -20px rgba(23,17,15,.45),0 0 0 4px var(--red-tint)}
}
@media(prefers-reduced-motion:reduce){
.hero .hb-hero-video-art video{animation:none}
}
/* Etusivun pääotsikon yhteyteen lisätty lyhyt Harrasteblogin tunnuslause. */
.hb-front-hero .hb-hero-tagline {
display:flex;
align-items:center;
gap:10px;
margin:14px 0 12px;
color:#d6111e;
font-size:clamp(12px,1.15vw,14px);
font-weight:850;
letter-spacing:.13em;
line-height:1.4;
}
.hb-front-hero .hb-hero-tagline i {
color:#d9bd61;
font-style:normal;
font-size:1.25em;
}
@media (max-width:640px) {
.hb-front-hero .hb-hero-tagline { margin:10px 0; gap:8px; }
}