/* =====================================================================
   christiandyas.com — "Editorial White" theme (Elliman-inspired)
   Load this AFTER global.css, contrast.css and journey.css.
   Fonts: add to <head> on every page (before this file):
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Libre+Caslon+Display&display=swap">
   ===================================================================== */

/* ---------- 1. Design tokens (overrides global.css :root) ---------- */
:root{
  --black:#ffffff; --surface-1:#ffffff; --surface-2:#f6f6f4; --surface-3:#efefec;
  --white:#111111; --gold:#111111; --gold-bright:#000000;
  --glass-light:rgba(0,0,0,.02); --glass-mid:rgba(0,0,0,.03); --glass-heavy:rgba(0,0,0,.05);
  --glass-border:rgba(0,0,0,.12); --glass-border-bright:rgba(0,0,0,.2); --glass-shine:transparent;
  --bleed-blue:transparent; --bleed-purple:transparent; --bleed-gold:transparent;
  --font-display:'Libre Caslon Display',Georgia,serif;
  --font-body:'Inter',Helvetica,Arial,sans-serif;
  --radius-sm:0; --radius:0; --radius-lg:0; --radius-xl:0;
  --blur:none; --blur-heavy:none;
  --panel:#ffffff; --panel-hover:#f6f6f4;
  --hero-img:url("/images/site-bg.jpg");
}

/* ---------- 2. Base ---------- */
html:root, html:root body{
  background:#fff !important; background-image:none !important;
  color:#111 !important; font-family:var(--font-body) !important;
}
html:root body *, html:root body *::before, html:root body *::after{
  box-shadow:none !important; text-shadow:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border-radius:0 !important;
}
h1,h2,h3,h4{font-family:var(--font-display) !important; font-weight:400 !important; letter-spacing:-.01em; color:#111 !important}
h1 em,h2 em,h1 span,h2 span{color:inherit !important; font-style:normal !important; -webkit-text-fill-color:currentColor !important; background:none !important}
p,li{line-height:1.75}

/* ---------- 3. Navigation ---------- */
.nav{background:#fff !important; border-bottom:1px solid #e5e5e5 !important}
.nav a,.nav button,.nav span{color:#111 !important; -webkit-text-fill-color:#111 !important; text-transform:uppercase; letter-spacing:.16em; font-size:11px !important; font-weight:500 !important}
.nav img,.mobile-nav img{filter:invert(1) brightness(0) !important}
.mobile-nav{background:#fff !important}
.mobile-nav *{color:#111 !important}
.lang-toggle{background:transparent !important; border:none !important; gap:10px}
html:root body .nav .lang-toggle span,
html:root body .nav .lang-toggle a{background:transparent !important; color:#999 !important; -webkit-text-fill-color:#999 !important; opacity:1 !important; padding:0 4px !important}
html:root body .nav .lang-toggle [aria-current]{color:#111 !important; -webkit-text-fill-color:#111 !important; border-bottom:1px solid #111 !important}

/* ---------- 4. Buttons ---------- */
.btn{border-radius:0 !important; text-transform:uppercase; letter-spacing:.18em; font-size:11px !important; font-weight:500 !important; padding:16px 30px !important; transition:all .2s}
html:root body .btn-gold, html:root body .nav-cta{background:#111 !important; color:#fff !important; -webkit-text-fill-color:#fff !important; border:1px solid #111 !important}
html:root body .btn-gold *, html:root body .nav .nav-cta *{color:#fff !important; -webkit-text-fill-color:#fff !important}
html:root body .btn-outline, html:root body .btn-ghost:not(.nav-cta){background:transparent !important; color:#111 !important; -webkit-text-fill-color:#111 !important; border:1px solid #111 !important}
html:root body .form-submit, html:root body form button[type=submit]{background:#111 !important; background-image:none !important; color:#fff !important; -webkit-text-fill-color:#fff !important; border:1px solid #111 !important; text-transform:uppercase; letter-spacing:.18em; font-size:12px !important}
html:root body section:not(.ell-hero):not(.zz):not(.zy) .form-submit{color:#fff !important; -webkit-text-fill-color:#fff !important}
html:root body section:not(.ell-hero):not(.zz):not(.zy) .form-submit:hover{background:#fff !important; color:#111 !important; -webkit-text-fill-color:#111 !important}

/* ---------- 5. Hero (first section on every page — add class "ell-hero") ---------- */
.hero.ell-hero{--hero-img:url("/images/hero-bg.jpg")} /* homepage keeps its own photo */
html:root body section.ell-hero{
  background:linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.25) 60%,rgba(0,0,0,.1) 100%),var(--hero-img) center/cover no-repeat !important;
  min-height:88vh; display:flex; align-items:center; margin:0 !important;
}
.ell-hero::before,.ell-hero::after{display:none !important}
html:root body .ell-hero *:not(.btn):not(.btn *){color:#fff !important; -webkit-text-fill-color:#fff !important}
.ell-hero h1{font-size:clamp(44px,6vw,84px) !important; line-height:1.05 !important}
html:root body .ell-hero .btn-gold{background:#fff !important; color:#111 !important; -webkit-text-fill-color:#111 !important; border-color:#fff !important}
html:root body .ell-hero .btn-gold *{background:transparent !important; color:#111 !important; -webkit-text-fill-color:#111 !important}
html:root body .ell-hero .btn-outline,
html:root body .ell-hero .btn-ghost,
html:root body .ell-hero .btn-outline *{color:#fff !important; -webkit-text-fill-color:#fff !important; border-color:#fff !important; background:transparent !important}
.ell-hero [class*=rule]{background:#fff !important; height:1px !important; width:48px}

/* ---------- 6. Content sections ---------- */
html:root body section:not(.ell-hero){background:#fff !important; padding-top:110px !important; padding-bottom:110px !important; margin:0 !important}
html:root body section:nth-of-type(odd):not(.ell-hero){background:#f6f6f4 !important}
section:not(.ell-hero) h2{font-size:clamp(34px,4vw,52px) !important}
html:root body section:not(.ell-hero) *:not(.btn):not(.btn *){color:#111 !important; -webkit-text-fill-color:#111 !important}
html:root body section:not(.ell-hero) p,
html:root body section:not(.ell-hero) li,
html:root body section:not(.ell-hero) [class*=sub]{color:#555 !important; -webkit-text-fill-color:#555 !important}
html:root body section:not(.ell-hero) [class*=eyebrow],
html:root body section:not(.ell-hero) [class*=label]{color:#777 !important; -webkit-text-fill-color:#777 !important; opacity:1 !important; text-transform:uppercase; letter-spacing:.2em}
html:root body section:not(.ell-hero) [class*=rule]{background:#111 !important; height:1px !important}

/* ---------- 7. Cards, grids, panels ---------- */
html:root body [class$=card], html:root body [class*="card "],
html:root body [class$=panel], html:root body [class$=tile]{background-color:#fff !important; border:1px solid #ddd !important}
html:root body [class*=card]{filter:none !important}
html:root body [class*=card]:hover{border-color:#111 !important}
html:root body [class*=grid]{background:transparent !important}
html:root body section [class*=grid] > a:not(.area-card){border:1px solid #ddd !important; background-color:#fff !important}
html:root body section [class*=grid] > a:not(.area-card):hover{border-color:#111 !important}
html:root body [class*=card] [class*=bg]{background-color:transparent !important; border:none !important}
html:root body [class*=image], html:root body [class*=overlay],
html:root body [class*=img], html:root body [class*=label]{background-color:transparent !important}
html:root body [class*=icon]:empty{display:none !important}
.journey-num{font-family:var(--font-display) !important; font-size:28px !important}

/* Homepage neighborhood cards: full photo, white serif name */
html:root body .area-card{border:none !important; position:relative; overflow:hidden; min-height:340px}
html:root body .area-card-bg{position:absolute !important; inset:0 !important; z-index:0 !important; height:100% !important; background-size:cover !important; background-position:center !important; transition:transform .8s ease !important; border:none !important}
html:root body .area-card:hover .area-card-bg{transform:scale(1.04)}
html:root body .area-card-glass{position:absolute !important; inset:0 !important; z-index:1 !important; background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.65) 100%) !important; border:none !important}
html:root body section:not(.ell-hero) .area-card .area-card-content{position:absolute !important; left:0; right:0; bottom:0; z-index:2 !important; padding:80px 28px 28px !important; background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.6) 100%) !important; border:none !important}
html:root body section:not(.ell-hero) .area-card *:not(.btn){color:#fff !important; -webkit-text-fill-color:#fff !important}
html:root body section:not(.ell-hero) .area-card .area-num{opacity:.8 !important}
html:root body .area-name{font-family:var(--font-display) !important; font-size:30px !important}

/* Areas page big cards + blog post cards */
html:root body [class*=image-label]{border:none !important}
html:root body [class*=card-image-label]{font-family:var(--font-display) !important; letter-spacing:.02em !important; text-transform:none !important; font-size:34px !important}
html:root body .post-img{background:#1a1a1a !important}
html:root body section:not(.ell-hero):not(.zz):not(.zy) [class*=card-image] *,
html:root body section:not(.ell-hero):not(.zz):not(.zy) .post-img,
html:root body section:not(.ell-hero):not(.zz):not(.zy) .post-img *{color:#fff !important; -webkit-text-fill-color:#fff !important}

/* FAQ */
html:root body .faq-item{background:transparent !important; border:none !important; border-top:1px solid #d8d8d8 !important; padding:28px 8px !important}
.faq-item h3{font-size:22px !important; margin-bottom:12px}

/* ---------- 8. Forms ---------- */
html:root body input, html:root body textarea, html:root body select{background:#fff !important; color:#111 !important; -webkit-text-fill-color:#111 !important; border:1px solid #ccc !important}

/* ---------- 9. Footer ---------- */
html:root body .footer{background:#111 !important}
html:root body .footer *{color:#cfcfcf !important; -webkit-text-fill-color:#cfcfcf !important}
html:root body .footer h3, html:root body .footer h4{color:#fff !important; -webkit-text-fill-color:#fff !important}