/* ===== anitaelhajj.com – LIGHT THEME HARDENING PATCH (2025‑09‑23) =====
   Purpose: fix "black cards / dark smears" on some machines caused by
   OS/browser dark mode, blend modes, and cached CSS. Keep the site LIGHT.
   Drop this file AFTER your main CSS links.
*/

/* 0) Color tokens + safe fallbacks */
:root{
  --surface: #F8F4EF;          /* paper beige */
  --ink: #2C2826;               /* text / icon outline */
  --brand: #7C3A3A;             /* CTA burgundy */
  --icon-bg-pink: #F3E1E4;      /* pastel blush chip */
  color-scheme: light;          /* tell the browser we are light UI */
}

/* 1) Base surfaces (use fallbacks so it never renders 'undefined') */
html, body{
  background: var(--surface, #F8F4EF);
  color: var(--ink, #2C2826);
}

/* 2) Section backgrounds (unchanged content, just surfaces) */
#contact { background: var(--icon-bg-pink, #F3E1E4); }  /* soft blush */
#testimonials,
#faq,
#resume { background: var(--surface, #F8F4EF); }       /* paper beige */

/* 3) Card components — force white, disable surprise blending */
.services .card,
.testimonial,
.form-card,
.resume-card,
.faq-card {
  background: #FFFFFF;
  color: var(--ink, #2C2826);
  border: 1px solid rgba(44,40,38,.10);
  box-shadow: 0 10px 30px rgba(44,40,38,.08);
  background-blend-mode: normal;
  mix-blend-mode: normal;
}

/* 4) Hero safety: neutralize unexpected blend effects */
.hero img,
.hero::before,
.hero::after{
  mix-blend-mode: normal;
  background-blend-mode: normal;
}

/* If you intentionally use a translucent overlay/scrim, keep a real fill */
.scrim, .glass{
  background-color: rgba(255,255,255,.55); /* translucent so backdrop-filter works */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* 5) Buttons stay burgundy (so they pop on all surfaces) */
.btn-primary{ background: var(--brand, #7C3A3A); color:#fff; }
.btn-primary:hover{ background: #693232; }

/* 6) Defensive fallbacks where CSS variables are referenced elsewhere */
.bg-surface{ background: var(--surface, #F8F4EF); }
.text-ink{ color: var(--ink, #2C2826); }
.bg-blush{ background: var(--icon-bg-pink, #F3E1E4); }