/* =========================================================
   JUURI NYT -palkki — sama upea tumma punainen/kulta-ilme kuin
   alkuperäisessä HB Juuri Nyt Pro -lisäosassa, siirrettynä
   suoraan teemaan (ei enää Divi-yhteensopivuuspakotuksia,
   koska Diviä ei enää ole).
   ========================================================= */
:root{
	--hbjn-red:#d6111e;
	--hbjn-red-dark:#5a0a10;
	--hbjn-red-deep:#2a0306;
	--hbjn-black:#0a0a0a;
	--hbjn-black-deep:#000000;
	--hbjn-gold:#ddc76d;
	--hbjn-gold-light:#f0dd9a;
}

#hbjn-bar-wrapper{position:static;clear:both;overflow:hidden;}
#hbjn-bar{
	position:relative;isolation:isolate;
	background:linear-gradient(135deg,var(--hbjn-red-deep) 0%,var(--hbjn-black) 55%,var(--hbjn-black-deep) 100%);
	border-bottom:2px solid var(--hbjn-red);
	box-shadow:0 4px 24px rgba(0,0,0,.45);
}
#hbjn-bar::after{
	content:"";position:absolute;inset:0;opacity:.035;mix-blend-mode:overlay;pointer-events:none;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.hbjn-container{position:relative;max-width:1180px;margin:0 auto;padding:14px 24px;}
.hbjn-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px;flex-wrap:wrap;}
.hbjn-brand{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.hbjn-spark{flex:0 0 auto;display:inline-flex;width:18px;}
.hbjn-logo-link{display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:800;text-decoration:none;font-family:'Open Sans',sans-serif;}
.hbjn-logo-link:hover{color:var(--hbjn-gold);text-decoration:none;}
.hbjn-badge{position:relative;background:linear-gradient(135deg,var(--hbjn-red) 0%,#8c0d16 60%,var(--hbjn-red-deep) 100%);color:#fff;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.5px;animation:hbjn-pulse 2s infinite;}
@keyframes hbjn-pulse{0%,100%{box-shadow:0 0 0 0 rgba(214,17,30,.5);}50%{box-shadow:0 0 0 6px rgba(214,17,30,0);}}
.hbjn-clock{color:var(--hbjn-gold);font-size:12px;font-family:'Courier New',monospace;background:rgba(221,199,109,.08);padding:4px 8px;border-radius:8px;}
.hbjn-actions{display:flex;gap:8px;}
.hbjn-btn-small{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--hbjn-gold),var(--hbjn-gold-light));border:0;padding:6px 10px;border-radius:999px;font-weight:800;font-size:12px;cursor:pointer;font-family:'Open Sans',sans-serif;transition:transform .15s ease,box-shadow .15s ease;}
.hbjn-btn-small:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(221,199,109,.35);}
.hbjn-btn-closebar{width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.08);color:#fff;font-weight:900;transition:background .2s ease,transform .2s ease;}
.hbjn-btn-closebar:hover{background:linear-gradient(135deg,var(--hbjn-red),var(--hbjn-red-dark));transform:rotate(90deg);}
.hbjn-feed{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.hbjn-card{position:relative;background:linear-gradient(160deg,var(--hbjn-red-deep) 0%,#161616 45%,var(--hbjn-black) 100%);border-radius:14px;padding:14px;border:1px solid rgba(214,17,30,.18);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .3s ease;}
/* POISTETTU (2026-09): käyttäjän pyynnöstä poistettu hover-ominaisuus, jossa
   kortin reunus muuttui pyörivän kultainen/punaisen liukuvärin (conic-
   gradient) reunukseksi hiiren ollessa kortin päällä. Tavallinen "korttti
   nousee ja reunus/varjo korostuu" -hover-efekti (alla) säilytetty
   ennallaan — vain se pyörivä osa poistettiin. */
.hbjn-card:hover{transform:translateY(-3px);border-color:rgba(214,17,30,.55);box-shadow:0 8px 24px rgba(214,17,30,.25);}
.hbjn-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px;font-size:11px;color:rgba(255,255,255,.75);}
.hbjn-meta-item{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.05);padding:3px 8px;border-radius:999px;}
.hbjn-meta-item svg{width:11px;height:11px;flex:0 0 auto;color:var(--hbjn-gold);}
.hbjn-meta-cat{background:linear-gradient(135deg,rgba(214,17,30,.28),rgba(221,199,109,.12));color:var(--hbjn-gold);padding:3px 8px;border-radius:999px;}
/* KORJAUS (2026-09): Lighthouse/accessibility "Touch targets do not have
   sufficient size or spacing" — tämä linkki oli aiemmin oletusarvoisesti
   "inline", jolloin klikattava/kosketettava alue oli vain tekstirivin oma
   korkeus (alle suositellun 24px minimin) ilman minkäänlaista pehmustetta.
   "display:block" + pieni pystypehmuste kasvattaa kosketusalueen riittävän
   isoksi muuttamatta ulkoasua juuri lainkaan. */
.hbjn-link{display:block;padding:4px 0;line-height:1.4;color:#fff;text-decoration:none;font-weight:800;font-size:14px;background-image:linear-gradient(var(--hbjn-gold),var(--hbjn-gold));background-position:0 100%;background-repeat:no-repeat;background-size:0% 2px;transition:background-size .25s ease,color .25s ease;}
.hbjn-link:hover{color:var(--hbjn-gold);background-size:100% 2px;text-decoration:none;}
.hbjn-newsletter{display:none;margin-top:14px;background:linear-gradient(160deg,var(--hbjn-red-deep) 0%,#151515 50%,#0d0d0d 100%);border:1px solid rgba(214,17,30,.25);border-left:3px solid var(--hbjn-gold);border-radius:14px;opacity:0;transform:translateY(-6px);transition:opacity .25s ease,transform .25s ease;}
.hbjn-newsletter.active{display:block;opacity:1;transform:translateY(0);}
.hbjn-newsletter-inner{padding:16px;}
.hbjn-newsletter-text{color:#fff;}
.hbjn-newsletter-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.hbjn-newsletter h3{color:#fff;font-size:16px;}
.hbjn-close{width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.08);color:#fff;flex:none;}
.hbjn-close:hover{background:linear-gradient(135deg,var(--hbjn-red),var(--hbjn-red-dark));}
@media (max-width:900px){.hbjn-feed{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){
	.hbjn-feed{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
	.hbjn-card{flex:0 0 80%;scroll-snap-align:start;}
}
@media (prefers-reduced-motion: reduce){#hbjn-bar-wrapper *,#hbjn-bar-wrapper *::before,#hbjn-bar-wrapper *::after{animation:none!important;transition:none!important;}}