/*
Theme Name: Vogule Poland
Theme URI: https://vogulepoland.online
Author: Vogule Poland (z Klaudią)
Description: Kosmiczny motyw Y2K dla Vogule Poland — jeden wspólny feed (wpisy własne + Instagram + YouTube), drzewko linków z menu WordPressa, edytowalny pasek boczny w widżetach, rozwijane udostępnianie z opcją Stories. Mobile + desktop w jednym responsywnym szablonie.
Version: 1.5
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: vogule-poland
*/

:root{
  --rozowy:#FF40FF;
  --zielony:#0DF116;
  --tlo:#0b0712;
  --karta:rgba(255,255,255,.05);
  --tekst:#f3eefb;
  --przygaszony:rgba(243,238,251,.55);
  --ramka:rgba(255,64,255,.28);
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  min-height:100vh;
  font-family:Helvetica,Arial,sans-serif;
  color:var(--tekst);
  background:
    radial-gradient(60% 40% at 95% 0%, rgba(13,241,22,.12), transparent 60%),
    radial-gradient(60% 40% at 5% 100%, rgba(255,64,255,.14), transparent 60%),
    #040109;
}

a{color:inherit}
img{max-width:100%;height:auto}

/* ---- warstwa tła: gwiazdy + dryfujące UFO ---- */
.vp-scena{position:relative;overflow:hidden;min-height:100vh}
.vp-gwiazdy{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
@keyframes vp-migot{0%,100%{opacity:.2}50%{opacity:.95}}
.vp-ufo-drift{position:absolute;top:130px;right:5%;z-index:0;opacity:.9;animation:vp-dryf 9s ease-in-out infinite}
@keyframes vp-dryf{0%,100%{transform:translate(0,0)}50%{transform:translate(-22px,16px)}}
.vp-warstwa{position:relative;z-index:1}

/* ---- przyklejona belka górna ---- */
.vp-topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;background:rgba(11,7,18,.82);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,64,255,.18)}
.vp-logo-mini img,.vp-logo-mini{height:26px;width:auto;filter:drop-shadow(0 0 8px rgba(255,64,255,.5))}
.vp-logo-mini{font-family:'VT323',monospace;font-size:22px;color:var(--rozowy);text-decoration:none;letter-spacing:1px}
.vp-mini-linki{display:flex;gap:9px;list-style:none}
.vp-mini-linki a{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid rgba(255,255,255,.25);background-image:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0) 50%)}
.vp-mini-linki a i{font-size:19px}
.vp-mini-linki li:nth-child(odd) a{background-color:var(--rozowy);color:#3a0b3a}
.vp-mini-linki li:nth-child(even) a{background-color:var(--zielony);color:#063d07}

/* ---- hero ---- */
.vp-hero{text-align:center;padding:42px 20px 24px}
.vp-logo{display:block;width:300px;max-width:78%;height:auto;margin:0 auto;filter:drop-shadow(0 0 16px rgba(255,64,255,.6))}
.vp-logo-text{display:block;text-align:center;font-family:'VT323',monospace;font-size:54px;line-height:.9;color:var(--rozowy);text-shadow:0 0 18px rgba(255,64,255,.6)}
.vp-ufo-scena{position:relative;margin-top:14px;height:118px}
.vp-beam{position:absolute;top:42px;left:50%;transform:translateX(-50%);width:220px;height:92px;clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);background:linear-gradient(rgba(13,241,22,.30),rgba(13,241,22,0));z-index:0;pointer-events:none}
.vp-ufo{position:relative;z-index:1;animation:vp-lewituj 4s ease-in-out infinite}
@keyframes vp-lewituj{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.vp-tagline{position:relative;z-index:1;margin-top:6px;font-family:'VT323',monospace;font-size:23px;letter-spacing:2px;color:var(--zielony);text-shadow:0 0 12px rgba(13,241,22,.6)}

/* ---- drzewko linków (menu) ---- */
.vp-drzewko{list-style:none;display:flex;flex-direction:column;gap:10px;margin:18px auto 0;max-width:420px;padding:0 4px}
.vp-drzewko>li{display:flex;flex-direction:column}
.vp-drzewko>li>a,.vp-drzewko>li>.vp-pill-btn{display:flex;align-items:center;gap:10px;justify-content:center;width:100%;border-radius:999px;padding:13px 18px;font-size:15px;font-weight:bold;text-decoration:none;border:1px solid rgba(255,255,255,.4);background-image:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,0) 50%);transition:transform .12s ease, filter .12s ease;font-family:inherit;cursor:pointer}
.vp-drzewko>li>a:hover,.vp-drzewko>li>.vp-pill-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.vp-drzewko>li>a:focus-visible,.vp-drzewko>li>.vp-pill-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.vp-drzewko>li>a i,.vp-drzewko>li>.vp-pill-btn i{font-size:18px}
.vp-drzewko>li:nth-child(odd)>a,.vp-drzewko>li:nth-child(odd)>.vp-pill-btn{background-color:var(--rozowy);color:#3a0b3a;box-shadow:0 0 16px rgba(255,64,255,.4)}
.vp-drzewko>li:nth-child(even)>a,.vp-drzewko>li:nth-child(even)>.vp-pill-btn{background-color:var(--zielony);color:#063d07;box-shadow:0 0 16px rgba(13,241,22,.35)}
.vp-pill-btn .vp-strzalka{font-size:16px;transition:transform .2s ease;opacity:.8}
.vp-ma-dzieci.otwarte .vp-pill-btn .vp-strzalka{transform:rotate(180deg)}

/* podmenu (wewnętrzne drzewko linków) */
.vp-podmenu{list-style:none;display:flex;flex-direction:column;gap:8px;max-height:0;overflow:hidden;opacity:0;margin-top:0;transition:max-height .28s ease,opacity .2s ease,margin-top .2s ease}
.vp-ma-dzieci.otwarte .vp-podmenu{max-height:640px;opacity:1;margin-top:10px}
.vp-podmenu a{display:flex;align-items:center;gap:9px;justify-content:center;border-radius:999px;padding:11px 16px;font-size:14px;font-weight:bold;text-decoration:none;color:var(--tekst);background:rgba(255,255,255,.05);border:1px solid var(--ramka);transition:filter .12s ease,border-color .12s ease}
.vp-podmenu a:hover{filter:brightness(1.2);border-color:var(--rozowy)}
.vp-podmenu a i{font-size:16px;color:var(--rozowy)}

/* ---- sekcja Instagram (shortcode Smash Balloon) ---- */
.vp-ig-sekcja{max-width:960px;margin:8px auto 0;padding:0 18px}
.vp-ig-tytul{font-family:'VT323',monospace;font-size:20px;letter-spacing:3px;color:var(--rozowy);text-shadow:0 0 12px rgba(255,64,255,.5);display:flex;align-items:center;gap:8px;margin-bottom:12px}

/* ---- dzielnik TRANSMISJA ---- */
.vp-dzielnik{display:flex;align-items:center;gap:12px;max-width:960px;margin:30px auto 16px;padding:0 24px;color:var(--przygaszony);font-family:'VT323',monospace;font-size:16px;letter-spacing:5px}
.vp-dzielnik .linia{flex:1;height:1px}
.vp-dzielnik .lz{background:linear-gradient(90deg,transparent,rgba(13,241,22,.6))}
.vp-dzielnik .lr{background:linear-gradient(90deg,rgba(255,64,255,.6),transparent)}

/* ---- układ feed + pasek ---- */
.vp-uklad{display:grid;grid-template-columns:1fr;gap:22px;max-width:960px;margin:0 auto;padding:0 18px 56px}

/* ---- karty feedu ---- */
.vp-karta{background:var(--karta);border:1px solid var(--ramka);border-radius:18px;padding:15px 17px;position:relative;margin-bottom:14px}
.vp-badge{position:absolute;top:12px;right:12px;font-size:11px;font-weight:bold;display:flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px}
.vp-badge.online{background:rgba(13,241,22,.16);color:var(--zielony);border:1px solid rgba(13,241,22,.5)}
.vp-badge.ig{background:rgba(255,64,255,.16);color:var(--rozowy);border:1px solid rgba(255,64,255,.5)}
.vp-badge.yt{background:rgba(255,64,255,.16);color:var(--rozowy);border:1px solid rgba(255,64,255,.5)}
.vp-autor{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.vp-awatar{width:32px;height:32px;border-radius:50%;background:var(--rozowy);display:flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:hidden}
.vp-awatar img{width:100%;height:100%;object-fit:cover}
.vp-awatar i{color:var(--tlo);font-size:17px}
.vp-nazwa{font-weight:bold;font-size:14px;line-height:1.2}
.vp-handle{color:var(--przygaszony);font-size:12px}
.vp-tresc{font-size:14px;line-height:1.55;margin:0 0 10px;word-wrap:break-word}
.vp-tresc a{color:var(--rozowy);text-decoration:none}
.vp-kafel{display:block;border-radius:13px;position:relative;overflow:hidden;margin:10px 0;min-height:180px}
.vp-kafel img{display:block;width:100%;height:100%;object-fit:cover}
.vp-kafel.placeholder{height:200px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--rozowy),var(--zielony))}
.vp-kafel.placeholder i{color:rgba(255,255,255,.85);font-size:38px}
.vp-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:var(--zielony);display:flex;align-items:center;justify-content:center;box-shadow:0 0 22px rgba(13,241,22,.5)}
.vp-play i{color:#063d07;font-size:28px}

/* ---- udostępnianie ---- */
.vp-udzial-przycisk{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,64,255,.45);color:var(--rozowy);border-radius:999px;padding:7px 15px;font-size:13px;font-weight:bold;cursor:pointer;font-family:inherit}
.vp-udzial-przycisk:hover{filter:brightness(1.1)}
.vp-udzial-przycisk:focus-visible{outline:2px solid #fff;outline-offset:2px}
.vp-udzial-menu{display:none;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.vp-udzial-menu.otwarte{display:flex}
.vp-ikona-udzial{width:37px;height:37px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;text-decoration:none}
.vp-ikona-udzial i{font-size:17px}
.vp-ikona-udzial:hover{filter:brightness(1.2)}
.vp-ikona-udzial:focus-visible{outline:2px solid #fff;outline-offset:2px}
.vp-stories{display:flex;align-items:center;gap:6px;background:var(--zielony);color:#063d07;border:none;border-radius:999px;padding:0 13px;height:37px;font-size:12px;font-weight:bold;cursor:pointer;font-family:inherit}
.vp-stories i{font-size:16px}

/* ---- pasek boczny / widżety ---- */
.vp-rail{display:flex;flex-direction:column;gap:16px}
.vp-rail .widget,.vp-widget{background:var(--karta);border:1px solid var(--ramka);border-radius:18px;padding:18px}
.vp-rail .widget-title,.vp-widget h3,.vp-widget-title{font-family:'VT323',monospace;font-size:19px;letter-spacing:2px;color:var(--zielony);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.vp-rail a{color:var(--rozowy);text-decoration:none}
.vp-rail ul{list-style:none}
.vp-rail li{padding:5px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.vp-ball-row{font-size:14px;color:rgba(243,238,251,.8);margin-bottom:5px;display:flex;align-items:center;gap:7px}
.vp-ball-row i{color:var(--rozowy);font-size:16px}
.vp-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;background:var(--rozowy);color:#3a0b3a;border:none;border-radius:999px;padding:11px;font-size:14px;font-weight:bold;cursor:pointer;text-decoration:none;background-image:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,0) 50%)}
.vp-widget p{font-size:13px;color:rgba(243,238,251,.75);line-height:1.5;margin-bottom:12px}
.vp-news{display:flex;gap:8px}
.vp-news input{flex:1;min-width:0;background:#0b0712;border:1px solid #2a2238;border-radius:999px;padding:10px 14px;color:#fff;font-size:13px;font-family:inherit}
.vp-news input:focus{outline:2px solid var(--zielony);outline-offset:1px}
.vp-news button{background:var(--zielony);color:#063d07;border:none;border-radius:999px;padding:0 16px;font-weight:bold;font-size:13px;cursor:pointer;font-family:inherit}

/* ---- modal podglądu Stories ---- */
.vp-modal{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.82);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:22px}
.vp-modal img{max-width:min(78vw,300px);max-height:60vh;border-radius:18px;border:2px solid rgba(255,64,255,.5);box-shadow:0 0 40px rgba(255,64,255,.3)}
.vp-modal-hint{color:rgba(243,238,251,.75);font-size:13px;text-align:center;max-width:300px;line-height:1.4}
.vp-modal-akcje{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.vp-modal-btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:999px;padding:13px 20px;font-size:15px;font-weight:bold;cursor:pointer;font-family:inherit}
.vp-modal-btn i{font-size:18px}
.vp-modal-share{background:var(--zielony);color:#063d07}
.vp-modal-zamknij{background:rgba(255,255,255,.1);color:var(--tekst);border:1px solid rgba(255,255,255,.3)}

/* ---- toast ---- */
.vp-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:rgba(0,0,0,.88);border:1px solid rgba(13,241,22,.5);color:var(--zielony);font-size:13px;font-weight:bold;padding:9px 16px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s ease;font-family:'VT323',monospace;letter-spacing:1px;z-index:60}
.vp-toast.widoczny{opacity:1}

/* ---- treść pojedynczego wpisu / strony ---- */
.vp-single{max-width:680px;margin:0 auto;padding:10px 20px 60px}
.vp-single h1{font-size:28px;margin-bottom:10px}
.vp-single .vp-tresc{font-size:16px}
.vp-single img{border-radius:13px;margin:14px 0}
.vp-powrot{display:inline-flex;align-items:center;gap:7px;color:var(--zielony);text-decoration:none;font-family:'VT323',monospace;font-size:17px;letter-spacing:1px;margin:8px 0 18px}

.vp-stopka{text-align:center;padding:26px 20px 40px;color:var(--przygaszony);font-size:12px;border-top:1px solid rgba(255,64,255,.15);max-width:960px;margin:0 auto}

/* ---- pusty feed ---- */
.vp-pusto{text-align:center;color:var(--przygaszony);padding:30px;font-family:'VT323',monospace;font-size:18px;letter-spacing:1px}

/* ======= DESKTOP ======= */
@media (min-width:861px){
  .vp-hero{padding:50px 20px 26px}
  .vp-logo{width:340px}
  .vp-tagline{font-size:27px;letter-spacing:3px}
  .vp-drzewko{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:flex-start;max-width:760px;gap:11px}
  .vp-drzewko>li{flex:0 0 auto}
  .vp-drzewko>li>a,.vp-drzewko>li>.vp-pill-btn{width:auto;padding:13px 22px}
  .vp-podmenu{min-width:210px}
  .vp-uklad{grid-template-columns:minmax(0,1fr) 300px;gap:24px;padding:0 24px 56px}
  .vp-rail{align-self:start;position:sticky;top:74px}
  .vp-tresc{font-size:15px}
  .vp-kafel.placeholder{height:280px}
}

@media (max-width:860px){
  .vp-ufo-drift{display:none}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}