/* ============================================================
   Strefa Peptydów — motyw bloga (goweb.pl)
   Style przeniesione 1:1 z projektu Claude Design (pixel-perfect).
   Większość layoutu pozostaje w stylach inline w szablonach PHP —
   tu trzymamy reset, zmienne, stany hover/focus, animacje i RWD.
   ============================================================ */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#0d0f10}
::selection{background:#8CCECC;color:#0d0f10}
a{color:inherit}
input::placeholder{color:rgba(17,19,21,.4)}
input[data-dark]::placeholder{color:rgba(255,255,255,.5)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:#2a2f31;border-radius:0}
::-webkit-scrollbar-track{background:#15181a}

@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.sp-ticker__viewport{overflow:hidden;line-height:1.4}
.sp-ticker__inner{display:inline-flex;flex-wrap:nowrap;white-space:nowrap;width:max-content;will-change:transform;animation:ticker 30s linear infinite}
.sp-ticker__inner > *{flex:0 0 auto}
.sp-ticker__group{display:inline-flex;flex-wrap:nowrap;flex:0 0 auto;white-space:nowrap}
.sp-ticker__group > *{flex:0 0 auto;white-space:nowrap}
.sp-ticker:hover .sp-ticker__inner{animation-play-state:paused}

[data-h]{transition:color .15s ease,background .15s ease,border-color .15s ease,transform .15s ease,opacity .15s ease}
[data-h="link"]:hover{color:var(--mint,#8CCECC)!important}
[data-h="link-dark"]:hover{color:#15181a!important}
[data-h="btn-light"]:hover{background:#fff!important}
[data-h="btn-dark"]:hover{background:#23282a!important}
[data-h="btn-mint"]:hover{background:var(--mint,#8CCECC)!important;border-color:var(--mint,#8CCECC)!important;color:#0d0f10!important}
[data-h="card"]:hover{border-color:var(--mint-deep,#226e68)!important;transform:translateY(-3px)}
[data-h="card-dark"]:hover{border-color:var(--mint,#8CCECC)!important;transform:translateY(-3px)}
[data-h="row"]:hover{background:#f3f5f4!important}
[data-h="catitem"]:hover{background:rgba(255,255,255,.07)!important}

.navdd-panel{opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .15s ease,transform .15s ease,visibility .15s ease;pointer-events:none}
.navdd:hover .navdd-panel,.navdd:focus-within .navdd-panel{opacity:1;visibility:visible;transform:none;pointer-events:auto}

.nav-burger{display:none}
@media(max-width:900px){
  .nav-desktop{display:none!important}
  .nav-burger{display:inline-flex!important}
}
.burger-line{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.burger.open .burger-line:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open .burger-line:nth-child(2){opacity:0}
.burger.open .burger-line:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@keyframes ovFade{from{opacity:0}to{opacity:1}}
@keyframes ovSlide{from{transform:translateY(-16px)}to{transform:translateY(0)}}

[data-f="input"]:focus{border-color:var(--mint-deep,#226e68)!important}

/* ---- przyklejony nagłówek + offset paska admina ---- */
@media screen and (min-width:783px){
  .admin-bar .sp-site-header{top:32px!important}
}
@media screen and (max-width:782px){
  /* na mobile pasek admina przewija się z treścią — nagłówek przy krawędzi */
  .admin-bar .sp-site-header{top:0!important}
}
/* na mobile nagłówek w pełni nieprzezroczysty — bez prześwitującego tekstu z hero (iOS) */
@media (max-width:900px){
  .sp-site-header{background:#0d0f10!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}

/* ---- iOS: blokada automatycznego powiększania tekstu (ticker był „wielki” na iPhone) ---- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (max-width:600px){
  .sp-ticker{font-size:10px}
}

/* ---- menu mobilne: pełny ekran, własne przewijanie, blokada scrolla strony ---- */
.sp-mobile-menu{display:none;position:fixed;left:0;right:0;bottom:0;top:0;z-index:60;background:#0d0f10;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;border-top:1px solid rgba(255,255,255,.08);animation:ovSlide .22s cubic-bezier(.22,1,.36,1) both}
.sp-mobile-menu.is-open{display:block}
body.sp-menu-open{overflow:hidden}

/* ---- ikony danych kontaktowych (wklejony SVG, motyw narzuca fill) ---- */
.sp-contact-ico{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:none;color:var(--mint-deep,#226e68)}
.sp-contact-ico svg{width:18px;height:18px;display:block}
.sp-contact-ico svg,.sp-contact-ico svg *{fill:var(--mint-deep,#226e68)}

/* ---- komunikaty formularza kontaktowego ---- */
.sp-form-notice{border-radius:var(--rad,12px);padding:14px 18px;font-size:14px;margin-bottom:18px}
.sp-form-notice.is-success{background:rgba(140,206,204,.14);border:1px solid var(--mint-deep,#226e68);color:#15181a}
.sp-form-notice.is-error{background:rgba(232,120,90,.12);border:1px solid rgba(232,120,90,.5);color:#8a3b27}

/* ---- karuzela powiązanych wpisów (2 widoczne + podgląd trzeciej) ---- */
.sp-carousel{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:6px 2px 10px;margin-top:-6px}
.sp-carousel::-webkit-scrollbar{display:none}
.sp-carousel > *{flex:0 0 44%;scroll-snap-align:start}
@media (max-width:600px){
  .sp-carousel > *{flex:0 0 82%}
}

/* ---- treść wpisu (the_content) — typografia zgodna z projektem ---- */
.sp-post-body{font-size:18px;line-height:1.72;color:#23282a}
.sp-post-body > *:first-child{margin-top:0}
.sp-post-body p{margin:0 0 26px}
.sp-post-body h2{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:26px;letter-spacing:-.01em;margin:42px 0 18px}
.sp-post-body h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:21px;letter-spacing:-.01em;margin:34px 0 14px}
.sp-post-body a{color:var(--mint-deep,#226e68);text-decoration:underline;text-underline-offset:2px}
.sp-post-body img{max-width:100%;height:auto;border-radius:var(--rad,12px);margin:0 0 26px}
.sp-post-body ul{margin:0 0 26px;padding-left:0;list-style:none}
.sp-post-body ul li{position:relative;padding-left:26px;margin-bottom:12px}
.sp-post-body ul li::before{content:"▪";position:absolute;left:0;top:0;color:var(--mint-deep,#226e68);font-family:'JetBrains Mono',monospace}
.sp-post-body ol{margin:0 0 26px;padding-left:22px}
.sp-post-body ol li{margin-bottom:12px}
.sp-post-body blockquote{margin:0 0 28px;padding:22px 26px;background:#f3f5f4;border-left:3px solid var(--mint,#8CCECC);border-radius:0 var(--rad,12px) var(--rad,12px) 0;font-size:17px;color:#23282a}
.sp-post-body blockquote p:last-child{margin-bottom:0}
.sp-post-body figure{margin:0 0 26px}
.sp-post-body figure img{margin:0}
.sp-post-body figcaption{font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(17,19,21,.5);margin-top:8px}

/* ---- pomocnicze ---- */
.sp-link{cursor:pointer;text-decoration:none}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}

/* ---- komentarze (lekki styl spójny z motywem) ---- */
.sp-comments{width:100%;max-width:760px;margin:48px auto 0;padding:0 clamp(16px,4vw,32px)}
.sp-comments h2{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:24px;letter-spacing:-.01em;margin:0 0 20px}
.sp-comments ol{list-style:none;margin:0;padding:0}
.sp-comments .comment-body{padding:18px 0;border-top:1px solid rgba(17,19,21,.1)}
.sp-comments input[type=text],.sp-comments input[type=email],.sp-comments input[type=url],.sp-comments textarea{width:100%;border:1px solid rgba(17,19,21,.16);border-radius:var(--rad,12px);padding:14px 16px;font-size:15px;font-family:inherit;outline:none;background:#fff;margin-bottom:14px}
.sp-comments .submit{border:0;background:#0d0f10;color:#fff;font-weight:600;padding:15px 26px;border-radius:var(--rad,12px);cursor:pointer;font-family:inherit;font-size:15px}