/*
Theme Name: Vidrarios
Description: Tema site-ului Vidrarios — dark, portocaliu. Aspectul general; aplicațiile stau în pluginul Vidrarios Plus.
Version: 1.0.3
Author: SWEB
Requires PHP: 8.0
Text Domain: vidrarios
*/

:root{
  --vid-orange:#f0882a;--vid-orange-soft:#f0c08f;--vid-tan:#d6b48f;
  --vid-brown:#5a3b1c;--vid-btn:#241c13;--vid-accent-bg:#2a1f14;
  --vid-bg:#0f1012;--vid-side:#141518;--vid-card:#17181b;--vid-card2:#1d1e22;
  --vid-line:#26272c;--vid-line2:#2f3036;--vid-line3:#3a3b42;
  --vid-text:#e8e8ea;--vid-text2:#c9cace;--vid-muted:#9a9ba1;
  color-scheme:dark
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--vid-bg);color:var(--vid-text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.4;min-height:100vh;display:flex;flex-direction:column}
a{color:#f0a35e}
a:hover{color:#ffc58f}
.screen-reader-text{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.vid-skip:focus{position:fixed !important;left:16px;top:16px;width:auto;height:auto;clip:auto;z-index:100;padding:10px 16px;background:var(--vid-orange);color:#141518;border-radius:8px}

/* lățimea maximă a site-ului pe ecrane late; fundalurile rămân pe toată lățimea */
:root{--vid-max:1440px}
.vid-wrap{width:100%;max-width:var(--vid-max);margin:0 auto}
.vid-header{background:var(--vid-side);border-bottom:1px solid var(--vid-line)}
/* logo aliniat la stânga pe aceeași linie cu meniul Ilegale (padding 16px, ca meniul) */
.vid-header .vid-wrap{display:flex;align-items:center;gap:12px;padding:14px 16px}
.vid-brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;min-width:0}
.vid-brand:hover{color:inherit}
.vid-brand img{width:44px;height:44px;flex-shrink:0}
.vid-brand-t{font-weight:700;letter-spacing:.08em}
.vid-where{font-size:12px;color:var(--vid-muted)}

.vid-site{flex:1;display:flex;flex-direction:column}
.vid-page{flex:1;display:flex;flex-direction:column}
.vid-prose{max-width:760px;margin:0 auto;padding:40px 16px}

/* ── Pagina 404: grila A2 pe tot fundalul, glitch pe cifre, buton spre start ── */
.vid-404{flex:1;display:flex;align-items:center;justify-content:center;padding:48px 16px 64px;position:relative;overflow:hidden;isolation:isolate}
/* grila (22px) + linii mari la 5 pătrate, stinse spre margini cu mască */
.vid-404::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:110px 110px,110px 110px,22px 22px,22px 22px;background-position:center;
  -webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 45%,#000 20%,transparent 80%);mask-image:radial-gradient(ellipse 70% 65% at 50% 45%,#000 20%,transparent 80%)
}
/* lumină portocalie în spatele cifrelor + linii de monitor + bandă de scanare care coboară + vignetă */
.vid-404::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to bottom,transparent 0,rgba(240,136,42,.06) 48%,rgba(240,136,42,.12) 50%,transparent 52%) 0 0/100% 200% no-repeat,
    repeating-linear-gradient(to bottom,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),
    radial-gradient(ellipse 40% 30% at 50% 38%,rgba(240,136,42,.10),transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 50%,transparent 55%,rgba(0,0,0,.45));
  animation:vid404Sweep 7s linear infinite
}
.vid-404-box{width:100%;max-width:560px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
/* chenar de vizor: 4 colțuri portocalii în jurul cifrelor */
.vid-404-num{
  --c:rgba(240,136,42,.55);--cl:22px;
  width:100%;max-width:440px;padding:40px 0 32px;position:relative;
  background:
    linear-gradient(var(--c),var(--c)) top left/var(--cl) 1px,linear-gradient(var(--c),var(--c)) top left/1px var(--cl),
    linear-gradient(var(--c),var(--c)) top right/var(--cl) 1px,linear-gradient(var(--c),var(--c)) top right/1px var(--cl),
    linear-gradient(var(--c),var(--c)) bottom left/var(--cl) 1px,linear-gradient(var(--c),var(--c)) bottom left/1px var(--cl),
    linear-gradient(var(--c),var(--c)) bottom right/var(--cl) 1px,linear-gradient(var(--c),var(--c)) bottom right/1px var(--cl);
  background-repeat:no-repeat
}
.vid-404-num b{position:relative;display:block;font-size:clamp(96px,26vw,168px);line-height:.9;font-weight:800;letter-spacing:.04em;color:var(--vid-orange);text-shadow:0 0 40px rgba(240,136,42,.18);animation:vid404In .5s cubic-bezier(.2,.8,.2,1) both,vid404Jitter 4s steps(1) 1s infinite}
/* glitch: 2 copii ale cifrelor (data-text), tăiate în felii și deplasate; o rafală la ~4s */
.vid-404-num b::before,.vid-404-num b::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:0}
.vid-404-num b::before{color:var(--vid-orange-soft);text-shadow:-2px 0 rgba(229,72,77,.7);animation:vid404GlitchA 4s steps(1) 1s infinite}
.vid-404-num b::after{color:#fff;text-shadow:2px 0 rgba(240,136,42,.8);mix-blend-mode:screen;animation:vid404GlitchB 4s steps(1) 1s infinite}
.vid-404-num::after{content:"";position:absolute;left:10%;right:10%;bottom:12px;height:1px;background:linear-gradient(90deg,transparent,var(--vid-orange),transparent);transform-origin:left;animation:vid404Scan .8s cubic-bezier(.5,0,.2,1) .15s both}
.vid-404-eyebrow{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.14em;color:var(--vid-orange-soft);text-transform:uppercase}
.vid-404 h1{margin:0;font-size:26px;letter-spacing:.04em;line-height:1.2}
.vid-404 p{margin:0;color:var(--vid-muted);font-size:15px;max-width:42ch}
.vid-404-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;margin-top:8px;border-radius:999px;border:1px solid var(--vid-orange);background:var(--vid-accent-bg);color:#fff;font-weight:600;text-decoration:none;transition:background .2s ease,color .2s ease,transform .2s ease}
.vid-404-btn:hover{background:var(--vid-orange);color:#141518;transform:translateY(-2px)}
.vid-404-btn:focus-visible{outline:2px solid var(--vid-orange-soft);outline-offset:3px}
.vid-404-btn svg{width:18px;height:18px}
@keyframes vid404In{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes vid404Scan{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes vid404Sweep{from{background-position:0 150%,0 0,0 0,0 0}to{background-position:0 -50%,0 0,0 0,0 0}}
@keyframes vid404GlitchA{
  0%{opacity:0}
  80%{opacity:1;clip-path:inset(8% 0 72% 0);transform:translate(-6px,0)}
  82%{clip-path:inset(55% 0 20% 0);transform:translate(5px,0)}
  84%{clip-path:inset(30% 0 52% 0);transform:translate(-3px,0)}
  86%{clip-path:inset(78% 0 4% 0);transform:translate(7px,0)}
  88%{opacity:0}
  94%{opacity:1;clip-path:inset(40% 0 44% 0);transform:translate(-8px,0)}
  95%{opacity:0}
}
@keyframes vid404GlitchB{
  0%{opacity:0}
  81%{opacity:.85;clip-path:inset(62% 0 14% 0);transform:translate(6px,0)}
  83%{clip-path:inset(12% 0 66% 0);transform:translate(-5px,0)}
  85%{clip-path:inset(44% 0 38% 0);transform:translate(4px,0)}
  87%{opacity:0}
  94.5%{opacity:.85;clip-path:inset(20% 0 60% 0);transform:translate(8px,0)}
  95.5%{opacity:0}
}
@keyframes vid404Jitter{0%{transform:none}80%{transform:translate(2px,-1px) skewX(-4deg)}82%{transform:translate(-2px,1px)}84%{transform:skewX(3deg)}88%{transform:none}94%{transform:translate(-3px,0)}95%{transform:none}}
@media (prefers-reduced-motion:reduce){.vid-404 *,.vid-404 *::before,.vid-404 *::after,.vid-404::after{animation:none !important;transition:none !important}}