/* ==========================================================
   ŠJ WEB ENHANCEMENTS — globálne štýly pre celý web
   ========================================================== */

:root {
  --sj-bg: #14191c;
  --sj-surface: #1b2226;
  --sj-surface-2: #20282c;
  --sj-text: #ede8de;
  --sj-text-dim: #9aa5a6;
  --sj-amber: #e0a458;
  --sj-green: #7ea78e;
  --sj-line: #2b3338;
}

.sj-wrap * { box-sizing: border-box; }
.sj-wrap { font-family: 'Inter', sans-serif; color: var(--sj-text); background: var(--sj-bg); }
.sj-h { font-family: 'Space Grotesk', sans-serif; font-weight: 600; letter-spacing: -0.01em; }
.sj-mono { font-family: 'JetBrains Mono', monospace; }

.sj-section { padding: 64px 24px; border-bottom: 1px solid var(--sj-line); max-width: 1080px; margin: 0 auto; }
.sj-section:last-of-type { border-bottom: none; }
.sj-tag { font-size: 12px; color: var(--sj-text-dim); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px; }
.sj-tag.sj-amber { color: var(--sj-amber); }

.sj-btn-primary {
  display:inline-block; background:var(--sj-amber) !important; color:#181410 !important;
  font-weight:600; font-size:14.5px; padding:13px 22px; border-radius:5px; border:none; cursor:pointer;
  text-decoration:none !important; transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.sj-btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(224,164,88,.35); filter:brightness(1.08); }

.sj-btn-ghost {
  display:inline-block; border:1px solid var(--sj-line); color:var(--sj-text) !important;
  font-size:14.5px; padding:13px 22px; border-radius:5px; text-decoration:none !important;
  transition:border-color .2s ease, color .2s ease;
}
.sj-btn-ghost:hover { border-color:var(--sj-amber) !important; color:var(--sj-amber) !important; }

/* Grids - responzívne automaticky */
.sj-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.sj-grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.sj-grid4 { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:0; border:1px solid var(--sj-line); border-radius:8px; overflow:hidden; }
.sj-panel { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px; background:var(--sj-line); border:1px solid var(--sj-line); border-radius:8px; overflow:hidden; margin-top:32px; }
.sj-panel-cell { background:var(--sj-surface); padding:20px 22px; }
.sj-k { font-size:11px; color:var(--sj-text-dim); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }
.sj-v { font-size:19px; font-weight:600; color:var(--sj-text); }

.sj-card { background:var(--sj-surface); border:1px solid var(--sj-line); border-radius:8px; padding:24px; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.sj-card:hover { transform:translateY(-4px); border-color:var(--sj-amber); box-shadow:0 8px 24px rgba(0,0,0,.35); }

.sj-step { padding:24px 22px; border-right:1px solid var(--sj-line); background:var(--sj-surface); transition:background .25s ease; }
.sj-step:hover { background:var(--sj-surface-2); }
.sj-step:last-child { border-right:none; }

/* Protokol karty (ukážky projektov) */
.sj-protocol { background:var(--sj-surface); border:1px solid var(--sj-line); border-radius:8px; overflow:hidden; margin-bottom:20px; }
.sj-protocol:last-child { margin-bottom:0; }
.sj-protocol img { width:100%; height:auto; display:block; border-bottom:1px solid var(--sj-line); }
.sj-protocol-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; padding:18px 24px; border-bottom:1px solid var(--sj-line); background:var(--sj-surface-2); }
.sj-protocol-status { font-size:11px; color:var(--sj-green); border:1px solid var(--sj-line); padding:5px 10px; border-radius:20px; text-transform:uppercase; }
.sj-protocol-body { padding:28px 24px; }
.sj-specs .sj-spec-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--sj-line); font-size:13.5px; }
.sj-specs .sj-spec-row:last-child { border-bottom:none; }
.sj-specs .sj-spec-row span:first-child { color:var(--sj-text-dim); }
.sj-proto-linkbtn {
  display:inline-flex; align-items:center; gap:6px; background:var(--sj-amber) !important; color:#181410 !important;
  font-weight:600; font-size:13.5px; padding:10px 18px; border-radius:5px; text-decoration:none !important;
  margin-top:14px; transition:transform .2s ease, filter .2s ease;
}
.sj-proto-linkbtn:hover { transform:translateY(-2px); filter:brightness(1.08); }

/* Kruhová fotka - responzívna, VŽDY dokonalý kruh na akomkoľvek zariadení */
.sj-photo-circle {
  width: min(340px, 70vw) !important;
  height: min(340px, 70vw) !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  border: 3px solid var(--sj-amber);
  display: block;
  max-width: none !important;
}
/* Formuláre - tmavá téma, funguje aj pre Contact Form 7 automaticky */
.sj-input,
.sj-wrap input[type="text"], .sj-wrap input[type="email"], .sj-wrap input[type="tel"], .sj-wrap textarea,
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form textarea {
  width:100%; background:var(--sj-surface); border:1px solid var(--sj-line); border-radius:5px;
  padding:13px 14px; color:var(--sj-text); font-family:'Inter',sans-serif; font-size:14.5px; margin-bottom:12px;
}
.wpcf7-form label { display:block; margin-bottom:14px; color:var(--sj-text-dim); font-size:14px; }
.wpcf7-form input[type="submit"] {
  display:inline-block; background:var(--sj-amber); color:#181410 !important; font-weight:600; font-size:14.5px;
  padding:13px 22px; border-radius:5px; border:none; cursor:pointer;
}

/* Pätička (cez [sj_footer] shortcode) */
.sj-site-footer {
  max-width:1080px; margin:0 auto; padding:24px; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:16px; font-size:13px; color:var(--sj-text-dim);
}
.sj-site-footer a { color: var(--sj-amber); }

/* Skryje pôvodnú pätičku témy "Powered by GeneratePress" */
.site-info { display:none; }

/* --- Efekty / animácie --- */
.sj-reveal { opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
.sj-reveal.sj-in { opacity:1; transform:translateY(0); }

/* Tlačidlo Späť hore - vkladá sa automaticky cez plugin (wp_footer) */
.sj-totop {
  position:fixed; bottom:28px; right:28px; width:52px; height:52px; border-radius:50%;
  background:var(--sj-amber); color:#181410; display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:none; box-shadow:0 4px 14px rgba(0,0,0,.4);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease, filter .2s ease; z-index:999;
}
.sj-totop.sj-show { opacity:1; visibility:visible; transform:translateY(0); }
.sj-totop:hover { filter:brightness(1.1); }
.sj-totop svg { width:26px; height:26px; stroke:#181410; stroke-width:3.5; }

/* Banner: plávajúce svetlá (Domov) */
.sj-lightbanner { position:relative; width:100%; height:220px; background:var(--sj-bg); overflow:hidden; border-bottom:1px solid var(--sj-line); }
.sj-lightbanner .sj-grid-bg { position:absolute; inset:0; background-image:linear-gradient(var(--sj-line) 1px, transparent 1px), linear-gradient(90deg, var(--sj-line) 1px, transparent 1px); background-size:60px 60px; opacity:.22; }
.sj-lightbanner .sj-blob { position:absolute; border-radius:50%; filter:blur(50px); opacity:.32; }
.sj-lightbanner .sj-b1 { width:280px; height:280px; background:var(--sj-amber); top:-90px; left:5%; animation:sj-float1 18s ease-in-out infinite; }
.sj-lightbanner .sj-b2 { width:220px; height:220px; background:var(--sj-green); bottom:-100px; right:10%; animation:sj-float2 22s ease-in-out infinite; }
.sj-lightbanner .sj-b3 { width:160px; height:160px; background:var(--sj-amber); top:20%; right:35%; opacity:.18; animation:sj-float3 15s ease-in-out infinite; }
.sj-lightbanner .sj-fade-edge { position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,25,28,0) 55%, rgba(20,25,28,.95) 100%); pointer-events:none; }
@keyframes sj-float1 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(60px,30px);} }
@keyframes sj-float2 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(-50px,-25px);} }
@keyframes sj-float3 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-30px,20px) scale(1.15);} }

/* Banner: signálová vlna (O mne) */
.sj-wavebanner { position:relative; width:100%; height:130px; background:var(--sj-bg); overflow:hidden; border-bottom:1px solid var(--sj-line); }
.sj-wavebanner .sj-grid-bg { position:absolute; inset:0; background-image:linear-gradient(var(--sj-line) 1px, transparent 1px), linear-gradient(90deg, var(--sj-line) 1px, transparent 1px); background-size:40px 40px; opacity:.35; }
.sj-wavebanner svg { position:absolute; top:0; left:0; width:200%; height:100%; animation:sj-scroll 14s linear infinite; }
.sj-wavebanner .sj-wave { fill:none; stroke:var(--sj-amber); stroke-width:2.5; stroke-linecap:round; opacity:.9; }
.sj-wavebanner .sj-wave-2 { fill:none; stroke:var(--sj-green); stroke-width:1.5; stroke-linecap:round; opacity:.5; }
.sj-wavebanner .sj-dot { fill:var(--sj-amber); animation:sj-blink 3s ease-in-out infinite; }
.sj-wavebanner .sj-dot.g { animation-delay:1.5s; fill:var(--sj-green); }
@keyframes sj-scroll { from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes sj-blink { 0%,100%{opacity:.3;} 50%{opacity:1;} }

/* Banner: terminál (Kontakt) */
.sj-term-wrap { padding:50px 24px 0; max-width:1080px; margin:0 auto; display:flex; justify-content:center; }
.sj-term { width:640px; max-width:100%; background:var(--sj-surface); border:1px solid var(--sj-line); border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.4); overflow:hidden; }
.sj-term-bar { display:flex; gap:7px; padding:12px 14px; background:var(--sj-surface-2); border-bottom:1px solid var(--sj-line); }
.sj-term-dot { width:11px; height:11px; border-radius:50%; }
.sj-term-dot.r{background:var(--sj-amber);} .sj-term-dot.y{background:var(--sj-green);} .sj-term-dot.g{background:var(--sj-line);}
.sj-term-body { padding:20px 22px; font-family:'JetBrains Mono',monospace; font-size:14px; color:var(--sj-text); min-height:110px; line-height:1.8; }
.sj-term-prompt { color:var(--sj-green); }
.sj-term-cursor { display:inline-block; width:8px; height:15px; background:var(--sj-amber); animation:sj-blink-cursor 1s step-end infinite; vertical-align:middle; margin-left:2px; }
@keyframes sj-blink-cursor { 50% { opacity:0; } }

/* --- Responzivita --- */
@media (max-width: 780px) {
  .sj-grid3, .sj-grid2, .sj-grid4, .sj-panel { grid-template-columns: 1fr !important; }
  .sj-step { border-right:none; border-bottom:1px solid var(--sj-line); }
  .sj-lightbanner { height:150px; }
  .sj-site-footer { text-align:center; justify-content:center; }
}

@media (prefers-reduced-motion: reduce) {
  .sj-reveal { opacity:1; transform:none; transition:none; }
  .sj-lightbanner .sj-blob,
  .sj-wavebanner svg,
  .sj-wavebanner .sj-dot { animation:none; }
}

/* ============================================================
   SJ WEB ENHANCEMENTS — vizuálne efekty
   Vlož do existujúceho pluginu sj-web-enhancements
   (do jeho CSS súboru, alebo cez wp_enqueue_style — pozri poznámku dole)
   ============================================================ */


/* ---------- 2. UKÁŽKY PROJEKTOV — flip karta + žiara pozadia ----------
   Naviazané priamo na existujúcu triedu .sj-proj-card, netreba nič meniť v GenerateBlocks.
   Základná štruktúra (výška karty, umiestnenie back-strany) platí vždy. */
.sj-proj-card {
  position: relative;
}
.sj-proj-card::before {
  content: "";
  position: absolute;
  inset: -30px;
  z-index: 0;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.55), transparent 70%);
  opacity: 0;
  filter: blur(22px);
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.sj-flip-inner {
  position: relative;
  width: 100%;
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.sj-flip-front {
  position: relative; /* zostáva v normálnom toku, určuje výšku karty */
  backface-visibility: hidden;
}
.sj-flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

/* Samotný hover (otočenie + žiara) len na zariadeniach so skutočnou myšou —
   na dotyku (telefón/tablet) sa karta zobrazí normálne, bez rizika "zaseknutého" hoveru. */
@media (hover: hover) and (pointer: fine) {
  .sj-proj-card {
    perspective: 1400px;
  }
  .sj-proj-card:hover::before {
    opacity: 1;
  }
  .sj-flip-inner {
    transform-style: preserve-3d;
  }
  .sj-proj-card:hover .sj-flip-inner {
    transform: rotateY(180deg);
  }
}

/* ---------- 3. FAQ — fialová žiara pri prejdení myšou ----------
   Trieda "sj-faq-toggle" sa pridáva automaticky cez JS (pozri sj-effects.js),
   prípadne ju priraď ručne tlačidlu/summary vo FAQ bloku. */
.sj-faq-toggle {
  transition: box-shadow 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .sj-faq-toggle:hover {
    box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.4), 0 0 22px 4px rgba(168, 85, 247, 0.4);
    background-color: rgba(139, 92, 246, 0.08);
    color: #a855f7;
  }
}

/* ---------- 5. SLUŽBY — karty sa pri hoveri nadvihnú (podskočia) a rozžiaria ----------
   Naviazané priamo na existujúcu triedu .sj-svc-card, netreba nič meniť v GenerateBlocks. */
.sj-svc-card {
  border-radius: 16px;
  border: 1px solid rgba(168, 85, 247, 0.28);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .sj-svc-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 16px 40px -10px rgba(168, 85, 247, 0.5), 0 0 0 1px rgba(168, 85, 247, 0.45);
    border-color: rgba(168, 85, 247, 0.5);
  }
}

/* ---------- 6. Citátový blok — viditeľné orámovanie dookola, nech je vidno zaoblenie ---------- */
.sj-quote {
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
  border-left: 3px solid #9D5CFF !important;
}

/* ---------- 7. "sj-panel" — zaoblený plávajúci panel pre celé sekcie ----------
   Pridaj triedu "sj-panel" v GenerateBlocks (Advanced → CSS Class(es)) na kontajner
   sekcie (napr. "Postup"), aby dostala vlastné pozadie, orámovanie zo všetkých strán,
   zaoblené rohy a väčší vnútorný priestor namiesto ostro orezaného pásu. */
.sj-panel {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 28px !important;
  padding: 56px 40px !important;
  margin: 32px auto !important;
}