/* ══════════════════════════════════════════════════════════════
   CHA – LIGHT (white) CONTENT OVERRIDES
   :root now uses white content backgrounds + dark text. The nav bar,
   image page-headers, community banner and footer stay dark, so their
   text/icons are forced light here. Loaded AFTER cha-style.css.
══════════════════════════════════════════════════════════════ */

/* ── White navigation bar ─────────────────────────────────────── */
/* Three-tier header: centered emblem band → green layer → nav bar (logo + menu) */
.site-header { position: static; background: transparent; border: none; box-shadow: none; backdrop-filter: none; }
/* Soft brand gradient behind the emblem — light tints keep the emblem's multiply blend working */
.logo-band { position: relative; overflow: hidden; background: linear-gradient(135deg, #dcebe0 0%, #f4f9f5 28%, #fdf6e8 50%, #f4f9f5 72%, #dcebe0 100%); display: flex; justify-content: center; align-items: center; padding: 16px 24px 10px; }

/* Muharram & Safar: the band blends green into red (faith → martyrdom) */
.mourning-active .logo-band { background: linear-gradient(135deg, #c4ddca 0%, #eaf4ec 28%, #faf1ee 52%, #f0d2cc 76%, #ddaba2 100%); }

/* Shrine images — always visible, fill full height, flush to outer edges */
.logo-band-flag { display: block; position: absolute; top: 0; bottom: 0; height: 100%; width: auto; mix-blend-mode: multiply; pointer-events: none; }
.logo-band-flag.flag-left  { left: 0; }
.logo-band-flag.flag-right { right: 0; }
@media (max-width: 768px) {
  .logo-band-flag { max-height: 80px; top: 50%; bottom: auto; transform: translateY(-50%); }
}
.season-banner { display: block; background: var(--accent-dark); color: #ffffff; }
.nav-bar {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid #e3ece7;
  box-shadow: 0 4px 18px rgba(20,45,30,.06);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.nav-bar .nav-inner { justify-content: space-between; height: 90px; }
.primary-nav { justify-content: flex-end; gap: 2px; }
.nav-logo { display: flex; align-items: center; gap: 12px; }
.logo-text-wrap { align-items: center; }
.site-header .nav-item > a,
.site-header .nav-item > button { color: #1f3328; }
.site-header .nav-item > a:hover { background: rgba(26,92,58,.08); color: var(--accent-dark); }
.nav-arrow { color: #7a8d80; }
.site-header .logo-name { color: #14241c; }
.nav-dropdown { background: #ffffff; border-color: #e3ece7; box-shadow: 0 18px 50px rgba(20,45,30,.16); }
.nav-dropdown a { color: #3c5246; border-bottom-color: #eef3f0; }
.nav-dropdown a:hover { background: rgba(26,92,58,.07); color: var(--accent-dark); }
.primary-nav { background: #ffffff; }
.nav-toggle span { background: #1f3328; }
.nav-donate { color: #ffffff; }      /* green button keeps white text */
.season-banner { color: #ffffff; }   /* season banner stays green */

/* ── CHA emblem logo in the logo-band — matches production size ── */
.site-emblem {
  height: 146px;
  width: auto;
  display: block;
  margin: 0 auto;
  mix-blend-mode: multiply; /* makes the white logo background vanish on the white band */
}

/* CHA emblem badge in the nav bar — real Canadian Hussaini Association logo */
.cha-logo-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 78px; height: 78px; border-radius: 50%; flex-shrink: 0;
  background: #ffffff url('../images/cha-emblem-white.jpg') center / contain no-repeat;
  color: #ffffff;
  font-size: 0;
  border: none;
  box-shadow: none;
}

/* Muharram & Safar: same emblem, no border */
.mourning-active .cha-logo-badge {
  background: #ffffff url('../images/cha-emblem-white.jpg') center / contain no-repeat;
  border: none;
  box-shadow: none;
}

/* ── Persian/Dari association name under the tagline ──────────── */
.logo-fa {
  display: block; direction: rtl; text-align: center;
  font-family: 'Vazirmatn', 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: 15px; line-height: 1.3; font-weight: 700;
  color: var(--accent-dark); margin-top: 3px;
}

/* ── Bismillah — larger + golden ──────────────────────────────── */
.hero-arabic { font-size: 42px; color: #ecc25e; text-shadow: 0 2px 10px rgba(0,0,0,.35); }

/* ── Home "Our Services" — larger card icons ──────────────────── */
.home-services .card-icon { width: 76px; height: 76px; border-radius: 18px; font-size: 38px; }
.home-services .card-icon svg { width: 52px; height: 52px; }

/* ── Form consent/privacy disclaimer ──────────────────────────── */
.form-disclaimer { font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); margin-top: 18px; max-width: 660px; }

/* ── Home hero (dark image) keeps light text ──────────────────── */
.hero-title { color: #ffffff; }
.hero-subtitle { color: #e6f0ea; }
.hero .btn-secondary { color: #ffffff; border-color: rgba(255,255,255,.45); }
.hero .btn-secondary:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.6); }

/* "Upcoming Events" stays a dark glass card on the hero → keep its text light */
.hero-card .event-info h4,
.hero-card .prayer-row .ptime,
.hero-card .hijri-value { color: #f1f8f4; }
.hero-card .event-info p,
.hero-card .prayer-row .pname,
.hero-card .hijri-label,
.hero-card #prayer-loading { color: #b9d2c4; }
.hero-card .prayer-row.current .pname,
.hero-card .prayer-row.current .ptime { color: var(--accent-light); }

/* ── Inner-page image headers keep light text ─────────────────── */
.page-hero h1 { color: #ffffff; }
.page-hero p  { color: #e6f0ea; }

/* ── Accents that were too light on white ─────────────────────── */
.section-label { color: var(--accent-dark); }
.card-link { color: var(--accent-dark); }

/* ── Cards: soft shadow for depth on white ────────────────────── */
.cha-card { box-shadow: 0 6px 22px rgba(20,45,30,.06); }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn-primary { color: #ffffff; }
.site-section .btn-secondary { color: var(--text-primary); border-color: var(--card-border); }
.site-section .btn-secondary:hover { background: var(--section-alt); border-color: var(--accent); }

/* ── Form notices restyled for light theme ────────────────────── */
.notice-success { background: #e7f5ec; color: #15703a; border: 1px solid #bfe3cc; }
.notice-error   { background: #fbe7e7; color: #9a2222; border: 1px solid #f0c4c4; }

/* ── Monthly prayer table on white ────────────────────────────── */
.prayer-monthly-table td,
.prayer-monthly-table th { border-bottom-color: var(--divider); }
.prayer-monthly-table tr:hover td { background: var(--section-alt); }
.prayer-monthly-table tr.today td { background: var(--badge-bg); color: var(--accent-dark); }

/* ── Community banner is green → force white text ─────────────── */
.community-banner h2 { color: #ffffff; }
.community-banner p  { color: rgba(255,255,255,.92); }

/* ── Footer stays dark → light text + visible social icons ────── */
.site-footer { color: #aac3b5; }
.footer-brand-name { color: #ffffff; }
.footer-brand p, .footer-col a, .footer-bottom { color: #aac3b5; }
.footer-col a:hover { color: #ffffff; }
.footer-social-icons a { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #ffffff; }

/* ── Info boxes on white ──────────────────────────────────────── */
.info-box { background: var(--section-alt); border: 1px solid var(--card-border); }