/*
Theme Name: Radio Bielany
Theme URI: https://radiobielany.pl/
Author: Radio Bielany
Author URI: https://radiobielany.pl/
Description: Makieta scrollytelling „Twoje Bielany do posłuchania". Hyperlokalny podcast o warszawskich Bielanach. Od 1.1.0 strona główna ma REALNE odtwarzanie: typ treści „Odcinki" (CPT rb_odcinek) z plikiem audio z Biblioteki mediów lub linkiem wideo YouTube gra w odtwarzaczu (deck + dock); bez odcinków zostaje TRYB POKAZOWY. Od 1.1.1 PEŁNA edycja treści w Customizerze (Wygląd → Dostosuj → panel „Radio Bielany — treści", 10 sekcji, ~125 pól): strona główna (hero, nagłówki, 5 przystanków z ryciną, karty historii/dołącz, partnerzy z logo, nawigacja, stopka), napisy mikrofonu/loadera, gazeta „Świeżo z Bielan" (winieta, uszy, rubryki: kronika/ogłoszenia/program/impressum) i pojedynczy wpis — domyślne teksty 1:1 z makietą, część pól z podglądem na żywo. Alternatywnie strona główna może być własnym, samodzielnym plikiem HTML (szablon „Strona główna (własny HTML)"). Od 1.0.0 blog jest NATYWNY: wpisy + kategorie-działy + Biblioteka mediów + oEmbed — gazeta „Świeżo z Bielan" (page-blog.php), pojedynczy wpis (single.php), 3 najnowsze na froncie. Architektura: warstwa współdzielona (nav/stopka/dock/floater/loader + tokeny + fonty) w style.css, strona główna w assets/css/home.css + assets/js/home.js, gazeta w assets/css/blog.css + assets/js/blog.js, pojedynczy wpis w assets/css/single.css.
Version: 1.1.4
Requires at least: 6.0
Requires PHP: 7.4
License: proprietary
Text Domain: radio-bielany
*/

/* ===== FONTY SELF-HOSTED (Lato 400/700/900 + Caveat 600; latin + latin-ext = polskie znaki) ===== */
@font-face{
  font-family:'Lato';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/lato-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Lato';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/lato-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Lato';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('assets/fonts/lato-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Lato';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('assets/fonts/lato-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Lato';
  font-style:normal;
  font-weight:900;
  font-display:swap;
  src:url('assets/fonts/lato-900-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Lato';
  font-style:normal;
  font-weight:900;
  font-display:swap;
  src:url('assets/fonts/lato-900-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Caveat';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('assets/fonts/caveat-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Caveat';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('assets/fonts/caveat-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================= WARSTWA WSPÓŁDZIELONA (shell) — ładowana na KAŻDEJ stronie (functions.php).
   Bloki wycięte 1:1 ze źródła makiety „story" v-0.8 (kolejność źródłowa zachowana):
   tokeny → reset/base → logo(.eq) → loader → topnav → stopka → floater → dock.
   Reszta CSS makiety (hero + sekcje) jest w assets/css/home.css (ładowana po tym pliku, tylko na stronie głównej). */

/* ============================================================= TOKENY */
:root{
  --las:#123526; --las2:#16402E; --mech:#2F6B4C;
  --krem:#F4EAD5; --krem2:#EFE4CC; --biel:#FFFFFF;
  --cegla:#C7512D; --cegla2:#a83f20;
  --zloto:#E8A33D; --zloto-krem:#A8791F; /* złoto duże napisy na kremie */
  --zloto-deep:#8A6414; /* złoto MAŁY tekst na kremie/bieli (kontrast 4.5+) */
  --grafit:#191917;
  --maxw:1120px; --gut:24px;
  --r-card:16px; --r-deck:24px; --r-pill:999px;
  --shadow-card:0 2px 10px rgba(18,53,38,.08);
  /* z-scale: treść 1-9 / trasa 2 / nav 40 / dock 50 */
  --z-nav:40; --z-dock:50;
}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:clip}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  font-family:'Lato',system-ui,sans-serif;
  font-size:17px; line-height:1.6; color:var(--grafit);
  background:var(--krem);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
h1,h2,h3{line-height:1.15}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:3px solid var(--cegla2);outline-offset:3px;border-radius:4px}
.dark-zone :focus-visible, .dock :focus-visible{outline-color:var(--zloto)}
::selection{background:var(--zloto);color:var(--grafit)}

.skip{position:absolute;left:-9999px;top:0;background:var(--cegla);color:var(--krem);padding:10px 18px;z-index:100;border-radius:0 0 10px 0;font-weight:700}
.skip:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}

/* ============================================================= LOGO — 4 słupki */
.eq{width:40px;height:40px;flex:none}
.eq .b1{fill:var(--mech)} .eq .b2{fill:var(--krem)} .eq .b3{fill:var(--zloto)} .eq .b4{fill:var(--cegla)}
.eq .bar{transform-box:fill-box;transform-origin:center bottom}
.eq.live .bar{animation:eqbar 1.3s ease-in-out infinite}
.eq.live .b1{animation-delay:0s}.eq.live .b2{animation-delay:.16s}.eq.live .b3{animation-delay:.34s}.eq.live .b4{animation-delay:.1s}
@keyframes eqbar{0%,100%{transform:scaleY(.55)}45%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){ .eq.live .bar{animation:none} }

/* ============================================================= LOADER — strojenie odbiornika */
.loader{
  position:fixed;inset:0;z-index:90;
  background:var(--las);color:var(--krem);
  display:grid;place-items:center;text-align:center;
}
.loader-inner{display:grid;justify-items:center;gap:18px}
.loader-mic{
  height:118px;width:auto;
  filter:drop-shadow(0 12px 18px rgba(6,18,12,.45));
  animation:loaderMic 2.4s ease-in-out infinite;
}
@keyframes loaderMic{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@media (prefers-reduced-motion:reduce){ .loader-mic{animation:none} }
.loader .eq{width:52px;height:52px}
.loader .eq .bar{animation-duration:.85s}
.loader-note{font-family:'Caveat',cursive;font-weight:600;font-size:1.6rem;color:var(--zloto)}
.loader-pct{font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums;color:rgba(244,234,213,.72);letter-spacing:.12em}
.loader-line{width:180px;height:2px;background:rgba(244,234,213,.18);border-radius:2px;overflow:hidden}
.loader-line i{display:block;height:100%;width:0%;background:var(--zloto)}
.loader.hidden{display:none}

/* ============================================================= NAWIGACJA */
.topnav{
  position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);
  padding:14px 0;
  transition:background .35s ease, box-shadow .35s ease;
}
.topnav.scrolled{background:rgba(18,53,38,.92);backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(244,234,213,.12)}
.topnav .wrap{display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--krem);font-weight:900;font-size:1.05rem;letter-spacing:.05em}
.brand .eq{width:26px;height:26px}
.nav-links{margin-left:auto;display:flex;gap:26px}
.nav-links a{color:var(--krem);text-decoration:none;font-weight:700;font-size:.92rem;opacity:.88;transition:opacity .2s,color .2s}
.nav-links a:hover{opacity:1;color:var(--zloto)}
.nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--cegla);color:var(--krem);text-decoration:none;
  font-weight:900;font-size:.95rem;padding:10px 20px;border-radius:var(--r-pill);
  transition:background .2s, transform .2s;
}
.nav-cta:hover{background:var(--cegla2);transform:translateY(-1px)}
.nav-cta .cta-sm{display:none} /* na desktopie pełny CTA; na mobile podmiana na krótkie „Odcinki" */
/* hamburger — tylko mobile; sticky bo cały .topnav jest position:fixed */
.nav-burger{
  display:none;width:44px;height:44px;flex:none;background:none;border:none;cursor:pointer;
  padding:0;place-items:center;color:var(--krem);border-radius:10px;transition:background .2s;
}
.nav-burger:hover{background:rgba(244,234,213,.1)}
.nav-burger span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;margin:2.6px auto;transition:transform .28s ease,opacity .2s ease}
.topnav.menu-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.topnav.menu-open .nav-burger span:nth-child(2){opacity:0}
.topnav.menu-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1020px){ .nav-links a:nth-child(n+4){display:none} }
@media(max-width:720px){
  .topnav .wrap{gap:8px}
  .nav-burger{display:grid} /* obok kompaktowego „Odcinki" po prawej */
  .nav-cta{margin-left:auto;padding:8px 14px;font-size:.85rem;gap:5px}
  .nav-cta .cta-lg{display:none}
  .nav-cta .cta-sm{display:inline}
  /* rozwijane menu z odnośnikami do sekcji (kotwiczone do fixed .topnav) */
  .nav-links{
    position:absolute;top:calc(100% + 6px);left:var(--gut);right:var(--gut);
    margin-left:0;flex-direction:column;gap:0;display:flex;
    background:var(--las2);border:1px solid rgba(244,234,213,.16);border-radius:14px;
    box-shadow:0 18px 40px rgba(9,20,14,.5);padding:6px;
    opacity:0;transform:translateY(-8px);pointer-events:none;
    transition:opacity .25s ease,transform .25s ease;
  }
  .topnav.menu-open .nav-links{opacity:1;transform:none;pointer-events:auto}
  .nav-links a{display:block;padding:13px 14px;border-radius:9px;font-size:1rem;opacity:1}
  .nav-links a:nth-child(n+4){display:block} /* na mobile pokazujemy wszystkie pozycje */
  .nav-links a:hover{background:rgba(244,234,213,.08);color:var(--krem)}
  .nav-links a+a{border-top:1px solid rgba(244,234,213,.08)}
}

/* ============================================================= 8. STOPKA */
footer{background:var(--grafit);color:#cfc8b8;padding:56px 0 130px}
footer .foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(24px,5vw,64px)}
@media(max-width:820px){ footer .foot-grid{grid-template-columns:1fr} }
footer .eq{width:26px;height:26px}
footer .fbrand{font-weight:900;color:var(--krem);letter-spacing:.04em;font-size:1.05rem}
footer .fslogan{font-family:'Caveat',cursive;font-weight:600;font-size:1.35rem;color:var(--zloto);margin-top:10px;display:block;transform:rotate(-1deg)}
footer .fmail{margin-top:14px;font-size:.95rem}
footer .fmail a{color:var(--zloto);text-decoration:none}
footer .fmail a:hover{text-decoration:underline}
footer h4{color:var(--krem);font-size:.85rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin-bottom:14px}
footer .flist{list-style:none;display:grid;gap:9px}
footer .flist a{color:#cfc8b8;text-decoration:none;font-size:.95rem}
footer .flist a:hover{color:var(--zloto)}
.foot-bottom{
  margin-top:44px;padding-top:20px;border-top:1px solid rgba(244,234,213,.12);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.9rem;
}

/* ============================================================= PŁYWAJĄCY MIKROFON — rekwizyt „płaskie 3D" (gpt-image-2, bez ramki) */
.floater{
  position:fixed;left:0;top:0;z-index:45; /* nad nav, pod dockiem */
  width:64px;height:130px;
  background:none;border:none;padding:0;
  cursor:pointer;
  will-change:transform,opacity;
  perspective:640px;
}
.floater[hidden]{display:none}
.floater.descending{z-index:95} /* nad kurtyną loadera podczas opadania */
.fl-inner{
  display:block;width:100%;height:100%;position:relative;
  transform-style:preserve-3d;will-change:transform;
  filter:drop-shadow(0 14px 20px rgba(18,53,38,.34));
  transition:filter .35s;
}
.floater:hover .fl-inner{filter:drop-shadow(0 20px 28px rgba(18,53,38,.42))}
.floater.playing .fl-inner{filter:drop-shadow(0 14px 20px rgba(18,53,38,.3)) drop-shadow(0 0 24px rgba(232,163,61,.5))}
.fl-mic{display:block;width:100%;height:auto;pointer-events:none;user-select:none;-webkit-user-drag:none}
.fl-waves{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.floater .wv{stroke:var(--cegla);stroke-width:3.5;fill:none;stroke-linecap:round;opacity:0}
.floater.playing .wv{animation:flwave 1.6s ease-out infinite}
.floater.playing .wv2{animation-delay:.35s}
.floater.playing .wv3{animation-delay:.1s}
.floater.playing .wv4{animation-delay:.45s}
@keyframes flwave{0%{opacity:0}18%{opacity:.9}70%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .floater.playing .wv{animation:none;opacity:.7} }
.fl-note{
  position:absolute;left:calc(100% + 10px);top:26%;transform:rotate(-2deg);
  transform-origin:left center; /* kontr-skala w JS — notka czytelna przy małym mikrofonie */
  font-family:'Caveat',cursive;font-weight:600;font-size:1.3rem;color:var(--zloto);
  white-space:nowrap;pointer-events:none;
  opacity:0; /* wchodzi/gaśnie PULSEM, dopóki mikrofon niekliknięty */
}
/* „naciśnij, żeby odtworzyć": pulsuje (pojawia się i znika), ~3s, sinusoidalnie, DOPÓKI niekliknięty.
   Po kliknięciu (.noted) znika na stałe; podczas intra-opadania (.descending) ukryty. */
.floater.in-dock:not(.noted):not(.descending) .fl-note{ animation:flNotePulse 3s cubic-bezier(.37,0,.63,1) infinite; }
@keyframes flNotePulse{0%{opacity:0}22%{opacity:1}58%{opacity:1}100%{opacity:0}}
.floater.noted .fl-note{opacity:0;animation:none;transition:opacity .4s}
@media (prefers-reduced-motion:reduce){
  .floater.in-dock:not(.noted):not(.descending) .fl-note{animation:none;opacity:1} /* statycznie widoczny, bez pulsu */
}
/* podpis-instrukcja — kontr-skala + adaptacja koloru w pętli rAF */
.fl-cap{
  position:absolute;left:50%;top:calc(100% + 6px);
  transform:translateX(-50%);transform-origin:center top;
  font-family:'Caveat',cursive;font-weight:600;font-size:1.05rem;line-height:1.05;
  white-space:nowrap;pointer-events:none;
  color:rgba(244,234,213,.9); /* domyślnie „ciemne tło" — mikrofon startuje na hero */
  opacity:0;transition:opacity .4s, color .35s; /* pojawia się po .noted; kolor płynnie „w ruchu" */
}
.floater.noted .fl-cap{opacity:1}
.floater.on-dark .fl-cap{color:rgba(244,234,213,.9);text-shadow:0 1px 5px rgba(18,53,38,.65)} /* krem na zieleni */
.floater.on-light .fl-cap{color:var(--las);text-shadow:0 1px 4px rgba(244,234,213,.95)} /* zieleń na kremie */
.floater:focus-visible{outline:3px solid var(--zloto);outline-offset:6px;border-radius:14px}

/* ===== ZADOKOWANY mikrofon = przycisk .dock-play (mobile + desktop) ===== */
html.floater-on .dock-play{ visibility:hidden; }               /* mikrofon zastępuje oryginalny przycisk; visibility → rect nadal mierzalny.
                                                                  reduced-motion: brak .floater-on → dock-play wraca widoczny */
.floater.in-dock:not(.descending){ z-index:60; }               /* nad dockiem (z-dock:50), pod kurtyną intro (95) */
.floater.in-dock .fl-waves{ opacity:0; }                       /* fale wyciszone (zostaje poświata .playing) */
/* DESKTOP: podpis + notka-gag NAD górną krawędzią docka (pozycja pionowa + kontr-skala liczone w pętli rAF) */
.floater.in-dock .fl-cap, .floater.in-dock .fl-note{
  left:50%; right:auto; top:auto; bottom:100%; transform-origin:center bottom; text-align:center;
}
.floater.descending .fl-cap, .floater.descending .fl-note{ opacity:0; } /* podczas intra-opadania etykiety schowane */

/* ============================================================= DOCK — radyjko podróżne */
.dock{
  position:fixed;left:50%;bottom:18px;z-index:var(--z-dock);
  transform:translate(-50%,140%);
  width:min(408px,calc(100vw - 24px));
  background:var(--las);color:var(--krem);
  border:1px solid rgba(244,234,213,.16);
  border-radius:18px;
  box-shadow:0 18px 48px rgba(9,20,14,.5), 0 0 90px rgba(232,163,61,.1);
  transition:transform .5s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.dock.on{transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){ .dock{transition:none} }

.dock-progress{
  position:relative;height:20px;margin:0 14px;cursor:pointer;touch-action:none;
  display:flex;align-items:center;
}
.dock-progress .rail{width:100%;height:4px;border-radius:3px;background:rgba(244,234,213,.22);overflow:hidden}
.dock-progress .fill{height:100%;width:0%;background:var(--zloto);border-radius:3px}
.dock-progress .knob{
  position:absolute;top:50%;width:12px;height:12px;border-radius:50%;
  background:var(--zloto);transform:translate(-50%,-50%);left:0%;
  box-shadow:0 0 0 3px rgba(232,163,61,.25);
  pointer-events:none;
}
.dock-row{display:flex;align-items:center;gap:12px;padding:4px 14px 12px}
.dock .eq{width:26px;height:26px;flex:none}
.dock-meta{min-width:0;flex:1}
.dock-meta .dt{font-weight:900;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-meta .dm{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,234,213,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-time{font-weight:700;font-variant-numeric:tabular-nums;font-size:.92rem;color:rgba(244,234,213,.8);flex:none}
.dock-ctl{display:flex;align-items:center;gap:8px;flex:none}
.dock-btn{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  color:var(--krem);transition:background .2s,transform .2s;
}
.dock-btn:hover{background:rgba(244,234,213,.12);transform:translateY(-1px)}
.dock-btn svg{width:19px;height:19px}
.dock-btn.skip{font-size:.66rem;font-weight:900;letter-spacing:.02em}
.dock-play{
  width:52px;height:52px;border-radius:50%;background:var(--cegla);color:var(--krem);
  display:grid;place-items:center;box-shadow:0 8px 20px rgba(199,81,45,.4);
  transition:background .2s,transform .2s;flex:none;
}
.dock-play:hover{background:var(--cegla2);transform:translateY(-1px)}
.dock-play svg{width:21px;height:21px}
.dock-up{color:rgba(244,234,213,.7)}
/* wąski dock 408px: czas gry i przyciski −15/+15 się nie mieszczą — chowamy je
   ZAWSZE; zostają logo, tytuł z ellipsis, duży play (główna akcja) i strzałka w górę */
.dock-time,.dock-btn.skip{display:none}
@media(max-width:640px){
  .dock-row{gap:10px}
}