/*
Theme Name: VAFEC 2026
Theme URI: https://vafec.sk
Author: VAFEC creative production
Description: Kinematická čierno-zlatá téma pre VAFEC — „pozeráš sa cez objektív". Domov, Služby, Live, Zóna, Archív + záznamy. Obsah Live sa riadi cez /assets/vafec-config.js (editor: vafec-builder).
Version: 1.0.7
Text Domain: vafec
*/

/* ============================================================
   ZDIEĽANÉ ŠTÝLY (nav, pätička, chrome, kurzor)
   Farby a typografia sú v :root — meň len tu.
   Page-specifické štýly sú v jednotlivých assets/css/*.css
   ============================================================ */
:root{
  --black:#000; --gold:#F5A81A; --gold-lite:#FFCB57; --paper:#F2EEE4;
  --muted:#6E6656; --red:#E5484D; --green:#4ADE80;
  --disp:'Space Grotesk',sans-serif; --mono:'JetBrains Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#000;color:var(--paper);font-family:var(--disp);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--gold-lite);text-decoration:none}
a:hover{color:var(--gold)}
em{font-style:normal;color:var(--gold)}
.m{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase}

/* film chrome */
.grain2{position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>")}
.crop{position:fixed;width:28px;height:28px;border:2px solid rgba(242,238,228,.4);z-index:7;pointer-events:none}
.c-tl{top:24px;left:24px;border-right:0;border-bottom:0}.c-tr{top:24px;right:24px;border-left:0;border-bottom:0}
.c-bl{bottom:24px;left:24px;border-right:0;border-top:0}.c-br{bottom:24px;right:24px;border-left:0;border-top:0}

/* nav */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:9;display:flex;justify-content:space-between;align-items:center;padding:18px 26px 40px;
  background:linear-gradient(to bottom,#000,rgba(0,0,0,.7) 45%,transparent)}
.wm{display:inline-flex;align-items:center;text-decoration:none}
.wm img{height:42px;width:auto;display:block}
.navr{display:flex;align-items:center;gap:28px}
.navlinks{display:flex;gap:26px;align-items:center;list-style:none}
.navlinks a{position:relative;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,238,228,.6);text-decoration:none;padding:5px 0;transition:color .25s}
.navlinks a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold-lite);transition:width .3s cubic-bezier(.22,1,.36,1)}
.navlinks a:hover{color:var(--paper)}.navlinks a:hover::after{width:100%}
.navlinks .current-menu-item a,.navlinks a.on{color:var(--gold)}
.navlinks .current-menu-item a::after,.navlinks a.on::after{width:100%;background:var(--gold)}
/* NAŽIVO indikátor — VŽDY viditeľný na KAŽDEJ stránke (base, načíta sa všade).
   Dva stavy: .is-live (vysiela, červený pulz) / .is-off (mimo vysielania, stlmený).
   display !important, aby prebil page-špecifické CSS (front/sluzby/archiv majú
   .live-pill{display:none}, čo inak pill skryje na Domove/Službách/Archíve). */
.live-pill{display:inline-flex !important;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--red);padding:8px 13px;text-decoration:none;box-shadow:0 0 18px rgba(229,72,77,.5);
  transition:background .3s,box-shadow .3s,color .3s,opacity .3s}
.live-pill i{width:7px;height:7px;border-radius:50%;background:#fff;flex:0 0 auto}
/* Vysiela → svieti + pulz */
.live-pill.is-live{color:#fff;background:var(--red);box-shadow:0 0 18px rgba(229,72,77,.5);opacity:1}
.live-pill.is-live i{background:#fff;animation:blink 1.3s infinite}
/* Mimo vysielania → stlmený, bez pulzu (NEmizne) */
.live-pill.is-off{color:rgba(242,238,228,.55);background:rgba(255,255,255,.05);box-shadow:none;
  border:1px solid rgba(242,238,228,.14);opacity:.85}
.live-pill.is-off i{background:rgba(242,238,228,.4);animation:none}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}

/* footer */
.site-footer{position:relative;z-index:3;border-top:1px solid rgba(245,168,26,.16);max-width:1160px;margin:60px auto 0;padding:36px 30px 70px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted)}
.site-footer a{color:var(--muted)}.site-footer a:hover{color:var(--gold-lite)}

/* reticle cursor */
#ret{position:fixed;left:0;top:0;z-index:60;width:26px;height:26px;pointer-events:none;transform:translate(-50%,-50%);opacity:0;transition:width .18s ease,height .18s ease,opacity .3s}
#ret .k{position:absolute;width:7px;height:7px;border:1.4px solid var(--gold-lite)}
#ret .k.tl{top:0;left:0;border-right:0;border-bottom:0}#ret .k.tr{top:0;right:0;border-left:0;border-bottom:0}
#ret .k.bl{bottom:0;left:0;border-right:0;border-top:0}#ret .k.br{bottom:0;right:0;border-left:0;border-top:0}
#ret .dot{position:absolute;left:50%;top:50%;width:3px;height:3px;background:var(--gold-lite);border-radius:50%;transform:translate(-50%,-50%)}
#ret.hot{width:42px;height:42px}
@media (hover:hover) and (pointer:fine){body,a,button{cursor:none}#ret{opacity:1}}
@media (hover:none){#ret{display:none}}

@media(max-width:860px){.navlinks{display:none}}

/* mobilné hamburger menu */
.mnav-btn{display:none;position:fixed;top:16px;right:20px;z-index:70;width:46px;height:46px;border:1px solid rgba(245,168,26,.4);background:rgba(0,0,0,.55);backdrop-filter:blur(6px);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.mnav-btn span{display:block;width:20px;height:2px;background:var(--gold-lite);transition:.3s}
.mnav-btn.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mnav-btn.on span:nth-child(2){opacity:0}
.mnav-btn.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav-ov{position:fixed;inset:0;z-index:66;background:rgba(4,3,2,.975);backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;opacity:0;pointer-events:none;transition:opacity .3s}
.mnav-ov.on{opacity:1;pointer-events:auto}
.mnav-ov a{font-family:var(--mono);font-size:20px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);text-decoration:none;padding:15px 24px;transition:color .2s}
.mnav-ov a:hover{color:var(--gold)}
.mnav-ov .mnav-live{margin-top:14px;display:inline-flex;align-items:center;gap:9px;color:#fff;background:var(--red);font-size:13px;padding:11px 20px;letter-spacing:.14em}
.mnav-ov .mnav-live i{width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1.3s infinite}
@media(max-width:860px){.mnav-btn{display:flex}}


/* === Doplnené z vafec-home.html (mobilné menu detaily + #pgx prechodový overlay) === */
.mnav-ov a:hover{color:#F5A81A}
.mnav-ov .mnav-live{margin-top:14px;display:inline-flex;align-items:center;gap:9px;color:#fff;background:#E5484D;font-size:13px;padding:11px 20px;letter-spacing:.14em}
.mnav-btn span{display:block;width:20px;height:2px;background:#FFCB57;transition:.3s}
.mnav-ov a{font-family:'JetBrains Mono',monospace;font-size:20px;letter-spacing:.12em;text-transform:uppercase;color:#F2EEE4;text-decoration:none;padding:15px 24px;transition:color .2s}
@property --pgx{syntax:'<percentage>';inherits:false;initial-value:150%}
  #pgx{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 46%,transparent var(--pgx,150%),#000 calc(var(--pgx,150%) + 2%))}
  #pgx.close{opacity:1;animation:pgxClose .3s cubic-bezier(.5,0,.8,.5) forwards}
  #pgx.open{opacity:1;animation:pgxOpen .55s cubic-bezier(.3,.6,.2,1) forwards}
@keyframes pgxClose{from{--pgx:150%}to{--pgx:0%}}
@keyframes pgxOpen{from{--pgx:0%}to{--pgx:150%}}

/* Admin bar (prihlaseny admin): posun fixnu nav pod 32px listu */
body.admin-bar .site-nav{top:32px}
@media screen and (max-width:782px){body.admin-bar .site-nav{top:46px}}