/* ============================================================
   VINORA EVENTS — dark.css
   A full dark treatment, scoped to html[data-dark]. Nothing here
   applies until the theme is switched on, so the light site is
   untouched and the two can be compared side by side.

   Palette: deep plum-black ground, gold as the only warm accent,
   and a single lifted "surface" tone for every card so the page
   reads as layers rather than as boxes on black.
   ============================================================ */

html[data-dark]{
  --d-bg:#180417;          /* page ground */
  --d-bg-2:#230620;        /* alternating band */
  --d-surface:#2e0a29;     /* cards */
  --d-surface-2:#3a0c33;   /* raised cards */
  --d-line:rgba(248,216,129,.14);
  --d-line-soft:rgba(255,255,255,.07);
  --d-text:#f0e6f5;        /* body */
  --d-text-soft:#c3b0cd;   /* secondary */
  --d-text-dim:#9c89a6;    /* captions */
  --d-gold:#f3c13f;
  --d-gold-2:#fcf1d5;
  --gold-grad:linear-gradient(100deg,#fff 8%,#fcf1d5 52%,#d4a017 95%);

  /* remap the light system's own tokens so inherited rules follow */
  --ivory:#180417;
  --ivory-2:#230620;
  --plum:#f0e6f5;
  color-scheme:dark;
}

html[data-dark] body{background:var(--d-bg);color:var(--d-text)}

/* ---------- the aurora ground ----------
   Two very slow, very soft gradient blooms. They sit behind
   everything and give the dark page depth instead of flat black. */
html[data-dark] body:before{
  content:"";position:fixed;inset:-20vh -10vw;z-index:-2;pointer-events:none;
  background:
    radial-gradient(45vw 40vh at 15% 12%,rgba(198,16,171,.26),transparent 62%),
    radial-gradient(40vw 36vh at 85% 30%,rgba(212,160,23,.13),transparent 64%),
    radial-gradient(50vw 44vh at 50% 92%,rgba(107,7,92,.3),transparent 66%);
  animation:d-aurora 26s ease-in-out infinite alternate
}
@keyframes d-aurora{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-2.5%,1.5%,0) scale(1.06)}
  100%{transform:translate3d(2%,-2%,0) scale(1.03)}
}

/* fine film grain — stops large dark areas from banding */
html[data-dark] body:after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")
}

/* ---------- surfaces ---------- */
html[data-dark] .sec{background:transparent!important}
html[data-dark] .sec:nth-of-type(even){background:var(--d-bg-2)!important}

html[data-dark] .header{
  background:rgba(20,7,24,.72);border-bottom:1px solid var(--d-line-soft);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)
}
html[data-dark] .header.scrolled{background:rgba(20,7,24,.9)}
html[data-dark] .nav a,html[data-dark] .header a{color:var(--d-text)}
html[data-dark] .nav a:hover{color:var(--d-gold)}

/* ---------- type ---------- */
html[data-dark] h1,html[data-dark] h2,html[data-dark] h3,
html[data-dark] h4,html[data-dark] h5{color:var(--d-text)}
html[data-dark] p,html[data-dark] li,html[data-dark] dd,html[data-dark] dt{color:var(--d-text-soft)}
html[data-dark] .eyebrow{color:var(--d-gold)}
html[data-dark] .eyebrow:before,html[data-dark] .eyebrow:after{background:rgba(243,193,63,.45)}
html[data-dark] .sec-head p,html[data-dark] .sec-head > p{color:var(--d-text-soft)}

/* every section title gets the foil treatment */
html[data-dark] .sec-title,
html[data-dark] .seo-body h2,
html[data-dark] .seo-body h3{
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent
}
html[data-dark] .sec-title em{-webkit-text-fill-color:initial;color:var(--d-gold)}

html[data-dark] a{color:var(--d-gold)}
html[data-dark] .seo-body a{color:var(--d-gold-2);text-decoration-color:rgba(243,193,63,.4)}
html[data-dark] .seo-body a:hover{color:#fff}
html[data-dark] .seo-body strong{color:#fff}

/* ---------- cards: one glass recipe, used everywhere ---------- */
html[data-dark] .pr-card,
html[data-dark] .svc2-card,
html[data-dark] .step2,
html[data-dark] .faq,
html[data-dark] .post-card,
html[data-dark] .feat,
html[data-dark] .stats .stat,
html[data-dark] .q-form,
html[data-dark] .pr-note,
html[data-dark] .keyfacts{
  background:linear-gradient(165deg,rgba(45,20,57,.78),rgba(36,16,48,.62));
  border:1px solid var(--d-line);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -20px 40px -30px rgba(0,0,0,.9),
    0 20px 46px -26px rgba(0,0,0,.75);
  backdrop-filter:blur(10px) saturate(130%);-webkit-backdrop-filter:blur(10px) saturate(130%);
  color:var(--d-text)
}
html[data-dark] .pr-card h3,html[data-dark] .svc2-card h3,
html[data-dark] .step2 h3,html[data-dark] .post-card h3{color:var(--d-gold-2)}
html[data-dark] .pr-points li{color:var(--d-text-soft);border-bottom-color:var(--d-line-soft)}
html[data-dark] .pr-points b{color:#fff}
html[data-dark] .pr-points li:before{background:rgba(243,193,63,.16);border-color:rgba(243,193,63,.45)}
html[data-dark] .pr-points li:after{border-color:var(--d-gold)}
html[data-dark] .pr-ic{
  background:linear-gradient(140deg,rgba(243,193,63,.2),rgba(212,160,23,.1));
  border-color:rgba(243,193,63,.3);color:var(--d-gold-2)
}
html[data-dark] .pr-unit{color:var(--d-text-dim)}
html[data-dark] .pr-card > a{color:var(--d-gold);border-bottom-color:rgba(243,193,63,.35)}

/* an animated gold hairline that travels the card edge on hover */
html[data-dark] .pr-card,html[data-dark] .svc2-card{position:relative}
html[data-dark] .pr-card:before,html[data-dark] .svc2-card:before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--edge,0deg),transparent 0deg,rgba(243,193,63,.85) 40deg,transparent 110deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .4s ease
}
html[data-dark] .pr-card:hover:before,html[data-dark] .svc2-card:hover:before{
  opacity:1;animation:d-edge 2.6s linear infinite
}
@keyframes d-edge{to{--edge:360deg}}
@property --edge{syntax:'<angle>';initial-value:0deg;inherits:false}

/* ---------- the two-way comparison ---------- */
html[data-dark] .tw-usual{
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));
  border-color:var(--d-line-soft);color:var(--d-text-dim)
}
html[data-dark] .tw-usual h3{color:var(--d-text-soft)}
html[data-dark] .tw-usual b{color:var(--d-text-soft)}
html[data-dark] .tw-usual li:before{background:rgba(255,255,255,.1);color:var(--d-text-dim)}
html[data-dark] .tw-vs{background:linear-gradient(170deg,#3a0c33,#230620);color:var(--d-gold);border-color:var(--d-line)}

/* ---------- forms ---------- */
html[data-dark] .q-field input,html[data-dark] .q-field select,
html[data-dark] .field input,html[data-dark] .field select,html[data-dark] .field textarea{
  background:rgba(255,255,255,.05);border-color:var(--d-line-soft);color:var(--d-text)
}
html[data-dark] .q-field input::placeholder{color:var(--d-text-dim)}
html[data-dark] .q-field input:focus,html[data-dark] .q-field select:focus{
  border-color:var(--d-gold);box-shadow:0 0 0 3px rgba(243,193,63,.16);background:rgba(255,255,255,.08)
}
html[data-dark] .q-field label,html[data-dark] .field label{color:var(--d-text-dim)}
html[data-dark] .q-form h3{color:var(--d-gold-2);border-bottom-color:var(--d-line-soft)}
html[data-dark] .q-form .ok{background:linear-gradient(165deg,#3a0c33,#230620)}
html[data-dark] .q-form .ok b{color:var(--d-gold-2)}
html[data-dark] .q-fine{color:var(--d-text-dim)}
html[data-dark] .q-tel{background:rgba(255,255,255,.05)}

/* ---------- buttons ---------- */
html[data-dark] .btn{
  background:linear-gradient(135deg,#f3c13f,#fcf1d5 45%,#d4a017);
  color:#230620;border:0;
  box-shadow:0 10px 26px -12px rgba(243,193,63,.5),inset 0 1px 0 rgba(255,255,255,.6)
}
html[data-dark] .btn:hover{box-shadow:0 16px 36px -12px rgba(243,193,63,.7),inset 0 1px 0 rgba(255,255,255,.8)}
html[data-dark] .header .btn{background:linear-gradient(135deg,#c610ab,#6b075c);color:#fff}

/* ---------- gallery, media ---------- */
html[data-dark] figure img{filter:saturate(1.06) contrast(1.03)}
html[data-dark] figcaption{color:var(--d-text-soft)}
html[data-dark] .rail-btn{background:rgba(45,20,57,.9);color:var(--d-gold);border:1px solid var(--d-line)}
html[data-dark] .rail-bar{background:var(--d-line-soft)}
html[data-dark] .rail-bar i{background:linear-gradient(90deg,#d4a017,#fcf1d5)}
html[data-dark] .filters button{
  background:rgba(255,255,255,.05);color:var(--d-text-soft);border:1px solid var(--d-line-soft)
}
html[data-dark] .filters button.on{background:linear-gradient(135deg,#f3c13f,#d4a017);color:#230620;border-color:transparent}

/* ---------- faq ---------- */
html[data-dark] .faq h3 button{color:var(--d-text)}
html[data-dark] .faq.on h3 button{color:var(--d-gold-2)}
html[data-dark] .faq .ans p{color:var(--d-text-soft)}

/* ---------- misc ---------- */
html[data-dark] .marq{background:rgba(255,255,255,.03);border-block:1px solid var(--d-line-soft)}
html[data-dark] .marq span{color:var(--d-text-dim)}
html[data-dark] .keyfacts b{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
html[data-dark] .keyfacts span{color:var(--d-text-dim)}
html[data-dark] .stats .stat b{color:var(--d-gold-2)}
html[data-dark] .stats .stat span{color:var(--d-text-dim)}
html[data-dark] .stats .stat .ic{background:rgba(243,193,63,.12);color:var(--d-gold);border:1px solid var(--d-line)}
html[data-dark] .quote-sec{background:linear-gradient(170deg,#260621,#3a0c33 60%,#230620)!important}
html[data-dark] hr,html[data-dark] .sec-head:after{border-color:var(--d-line-soft)}

/* the floating action buttons keep their colour but gain a dark ring */
html[data-dark] #callfab,html[data-dark] #top{border:1px solid var(--d-line)}

/* ---------- the preview switch ---------- */
#darkSwitch{
  position:fixed;left:16px;bottom:16px;z-index:9999;
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 15px;border-radius:999px;border:1px solid rgba(248,216,129,.4);
  background:rgba(20,7,24,.86);color:#fcf1d5;
  font-family:var(--font-caps,system-ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.7);transition:transform .25s ease,background .25s ease
}
#darkSwitch:hover{transform:translateY(-2px)}
#darkSwitch svg{width:15px;height:15px}
html:not([data-dark]) #darkSwitch{
  background:rgba(255,255,255,.92);color:#6b075c;border-color:rgba(107,7,92,.25)
}
@media(max-width:620px){#darkSwitch{left:12px;bottom:12px;padding:9px 13px;font-size:10px}}

@media(prefers-reduced-motion:reduce){
  html[data-dark] body:before{animation:none}
  html[data-dark] .pr-card:hover:before,html[data-dark] .svc2-card:hover:before{animation:none}
}