/*
Homepage hero v2: two slide crossfade with animated SVG backgrounds.
Loaded from functions.php only on pages flagged with the _wcdc_hero_v2 post meta.
All rules are scoped under .wcdc-hero so nothing leaks into the rest of the site.
*/

.wcdc-hero{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:clamp(540px, 78vh, 820px);
  font-family:'Outfit', system-ui, sans-serif; box-sizing:border-box;
}
.wcdc-hero *, .wcdc-hero *::before, .wcdc-hero *::after{box-sizing:border-box}

/* slides stack on top of each other; the active one fades in */
.wcdc-slide{
  position:absolute; inset:0; display:flex; align-items:center; isolation:isolate;
  opacity:0; visibility:hidden;
  transition:opacity .9s ease, visibility 0s linear .9s;
}
.wcdc-slide.is-active{opacity:1; visibility:visible; transition:opacity .9s ease, visibility 0s}
.wcdc-slide--silk {--ink:#1E2833; --muted:#4A5866; --text:#3A4654; --btn-hover:#33414F; background:#E8ECEF}
.wcdc-slide--glass{--ink:#1F2B27; --muted:#4D5E57; --text:#3A4A44; --btn-hover:#33443D; background:#EDEFEC}
.wcdc-slide__bg{position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none}

.wcdc-slide__inner{width:100%; max-width:1440px; margin:0 auto; padding:96px 80px 120px}
.wcdc-slide__content{max-width:760px; display:flex; flex-direction:column; gap:24px;
  transform:translateY(8px); transition:transform .9s ease}
.wcdc-slide.is-active .wcdc-slide__content{transform:none}

.wcdc-hero__eyebrow{margin:0; font-size:12px; font-weight:400; letter-spacing:.32em; text-transform:uppercase; color:var(--muted)}
.wcdc-hero__title{margin:0; font-family:'Outfit', system-ui, sans-serif; font-weight:200;
  font-size:clamp(36px, 3.9vw, 56px); line-height:1.15; letter-spacing:-.01em; color:var(--ink)}
.wcdc-hero__text{margin:0; font-size:18px; font-weight:300; line-height:1.6; color:var(--text);}
.wcdc-hero__actions{display:flex; flex-wrap:wrap; align-items:center; gap:16px 32px; margin-top:16px}
.wcdc-hero__btn{display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 32px;
  background:var(--ink); color:#F2F4F3 !important; text-decoration:none !important;
  font-size:14px; font-weight:400; letter-spacing:.08em; transition:background .2s ease}
.wcdc-hero__btn:hover, .wcdc-hero__btn:focus-visible{background:var(--btn-hover)}
.wcdc-hero__phone{font-size:15px; letter-spacing:.06em; color:var(--ink) !important; text-underline-offset:6px}
.wcdc-hero__phone:hover{color:var(--muted) !important}

/* slide indicators */
.wcdc-hero__dots{position:absolute; z-index:2; left:max(80px, calc((100% - 1440px)/2 + 80px)); bottom:56px; display:flex; gap:6px}
.wcdc-hero__dot{appearance:none; -webkit-appearance:none; border:0; background:transparent; padding:20px 4px; margin:0; cursor:pointer; display:flex; align-items:center}
.wcdc-hero__dot::before{content:""; display:block; width:10px; height:2px; background:#9AA6A0; transition:width .4s ease, background .4s ease}
.wcdc-hero__dot[aria-current="true"]::before{width:32px; background:#1F2B27}
.wcdc-hero__dot:focus-visible{outline:2px solid #1F2B27; outline-offset:2px}

/* background animations — slide 1: silk lines */
  .silk-a{animation:silk-a 10s linear infinite}
  .silk-b{animation:silk-b 22s linear infinite}
  @keyframes silk-a{from{transform:translate(0,0)}to{transform:translate(-375.6px,79.8px)}}
  @keyframes silk-b{from{transform:translate(0,0)}to{transform:translate(415.9px,58.5px)}}
  @media (prefers-reduced-motion: reduce){.silk-a,.silk-b{animation:none}}
/* background animations — slide 2: reeded glass (glow drift + reflection sweep) */
  .glass-glow{animation:glass-glow 14s ease-in-out infinite alternate}
  @keyframes glass-glow{from{transform:translate(-30px,-20px)}to{transform:translate(40px,30px)}}
  .glass-sheen{animation:glass-sheen 9s cubic-bezier(.45,0,.25,1) infinite}
  @keyframes glass-sheen{0%{transform:translateX(-520px)}55%{transform:translateX(900px)}100%{transform:translateX(900px)}}
  @media (prefers-reduced-motion: reduce){.glass-glow,.glass-sheen{animation:none}.glass-sheen{transform:translateX(-520px)}}

@media (max-width: 900px){
  .wcdc-slide__inner{padding:72px 24px 104px}
  .wcdc-slide__bg{opacity:.45}
  .wcdc-hero__dots{left:20px; bottom:36px}
}
@media (max-width: 480px){
  .wcdc-hero{min-height:520px}
  .wcdc-hero__eyebrow{font-size:11px; letter-spacing:.24em}
  .wcdc-hero__actions{flex-direction:column; align-items:flex-start}
}
@media (prefers-reduced-motion: reduce){
  .wcdc-slide, .wcdc-slide.is-active, .wcdc-slide__content{transition:none; transform:none}
}

/* ---------- theme leak fixes ----------
   The parent theme, Bootstrap and the parent's .home rules style bare elements
   (body, h1, h2, a, button, svg). These rules restore the values the hero is
   designed with; each one is scoped so it cannot reach the rest of the page.
   The !important flags answer !important rules in the parent's mobile styles
   (.home h1/h2 font sizes, a text-decoration). */
.wcdc-hero{line-height:normal; color:#000; text-align:start}
.wcdc-hero .wcdc-slide__bg{vertical-align:baseline}
.wcdc-hero .wcdc-hero__title{margin:0; font-size:clamp(36px, 3.9vw, 56px) !important; letter-spacing:-.01em; text-transform:none; clear:none}
.wcdc-hero .wcdc-hero__phone{text-decoration:underline !important}
.wcdc-hero a:focus{outline:revert}
.wcdc-hero .wcdc-hero__dot{font:revert; letter-spacing:revert; text-transform:revert; color:revert}
.wcdc-hero .wcdc-hero__dot:focus:not(:focus-visible){outline:none}