/* ==========================================================================
   Dark Mode — Component Overrides
   Loaded last so these rules win the cascade.

   Applied in two situations:
     A) html[data-color-scheme="dark"]  — user explicitly chose Dark
     B) @media (prefers-color-scheme: dark) + html:not([data-color-scheme="light"])

   Architecture note
   -----------------
   --ac-color-white stays #ffffff in both modes (see tokens.css).
   This keeps text that uses color:var(--ac-color-white) correct on
   coloured backgrounds (buttons, hero, footer headings, mega menu, etc.).
   We explicitly override background-color for every element that uses
   background:var(--ac-color-white) as a surface colour.
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   0. Page & Structural Backgrounds
   Elements that use  background: var(--ac-color-white)  as a SURFACE colour.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-color-scheme="dark"] body                                 { background-color: #0d1526; }
html[data-color-scheme="dark"] .ac-header                          { background-color: #0d1526; box-shadow: 0 1px 0 var(--ac-color-border); }
html[data-color-scheme="dark"] .ac-header.is-scrolled              { box-shadow: 0 1px 0 var(--ac-color-border), var(--ac-shadow-md); }
html[data-color-scheme="dark"] .ac-header__nav .menu .sub-menu     { background: #0d1526; border-color: var(--ac-color-border); }
html[data-color-scheme="dark"] .ac-audience > .ac-container        { background: #0d1526; }
html[data-color-scheme="dark"] .ac-prefs-panel                     { background: var(--ac-color-surface); border-bottom-color: var(--ac-color-border); }
html[data-color-scheme="dark"] .ac-pref-radio:hover .ac-pref-radio__card { background-color: rgba(255,255,255,0.08); }

@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) body                                 { background-color: #0d1526; }
	html:not([data-color-scheme="light"]) .ac-header                          { background-color: #0d1526; box-shadow: 0 1px 0 var(--ac-color-border); }
	html:not([data-color-scheme="light"]) .ac-header.is-scrolled              { box-shadow: 0 1px 0 var(--ac-color-border), var(--ac-shadow-md); }
	html:not([data-color-scheme="light"]) .ac-header__nav .menu .sub-menu     { background: #0d1526; border-color: var(--ac-color-border); }
	html:not([data-color-scheme="light"]) .ac-audience > .ac-container        { background: #0d1526; }
	html:not([data-color-scheme="light"]) .ac-prefs-panel                     { background: var(--ac-color-surface); border-bottom-color: var(--ac-color-border); }
	html:not([data-color-scheme="light"]) .ac-pref-radio:hover .ac-pref-radio__card { background-color: rgba(255,255,255,0.08); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   1. Buttons
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * Primary button: dark navy background invisible on dark page.
 * Swap to secondary (magenta) — always high-contrast, on-brand.
 * Text stays #ffffff (--ac-color-white = #ffffff always) ✓
 */
html[data-color-scheme="dark"] .ac-btn--primary                                     { background-color: var(--ac-color-secondary); border-color: var(--ac-color-secondary); }
html[data-color-scheme="dark"] .ac-btn--primary:hover,
html[data-color-scheme="dark"] .ac-btn--primary:focus-visible                       { background-color: var(--ac-color-secondary-dark); border-color: var(--ac-color-secondary-dark); }

/*
 * Outline button: navy border + text → invisible.
 * Use semantic link colour (light blue). Hover → secondary fill.
 */
html[data-color-scheme="dark"] .ac-btn--outline                                     { color: var(--ac-color-link); border-color: var(--ac-color-link); }
html[data-color-scheme="dark"] .ac-btn--outline:hover,
html[data-color-scheme="dark"] .ac-btn--outline:focus-visible                       { background-color: var(--ac-color-secondary); border-color: var(--ac-color-secondary); color: #ffffff; }

/*
 * Icon-CTA: same treatment as primary.
 */
html[data-color-scheme="dark"] .ac-btn--icon-cta                                    { background-color: var(--ac-color-secondary); border-color: var(--ac-color-secondary); }
html[data-color-scheme="dark"] .ac-btn--icon-cta:hover,
html[data-color-scheme="dark"] .ac-btn--icon-cta:focus-visible                      { background-color: var(--ac-color-secondary-dark); border-color: var(--ac-color-secondary-dark); }

@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) .ac-btn--primary                                    { background-color: var(--ac-color-secondary); border-color: var(--ac-color-secondary); }
	html:not([data-color-scheme="light"]) .ac-btn--primary:hover,
	html:not([data-color-scheme="light"]) .ac-btn--primary:focus-visible                      { background-color: var(--ac-color-secondary-dark); border-color: var(--ac-color-secondary-dark); }
	html:not([data-color-scheme="light"]) .ac-btn--outline                                    { color: var(--ac-color-link); border-color: var(--ac-color-link); }
	html:not([data-color-scheme="light"]) .ac-btn--outline:hover,
	html:not([data-color-scheme="light"]) .ac-btn--outline:focus-visible                      { background-color: var(--ac-color-secondary); border-color: var(--ac-color-secondary); color: #ffffff; }
	html:not([data-color-scheme="light"]) .ac-btn--icon-cta                                   { background-color: var(--ac-color-secondary); border-color: var(--ac-color-secondary); }
	html:not([data-color-scheme="light"]) .ac-btn--icon-cta:hover,
	html:not([data-color-scheme="light"]) .ac-btn--icon-cta:focus-visible                     { background-color: var(--ac-color-secondary-dark); border-color: var(--ac-color-secondary-dark); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. Header & Navigation — hover / active states
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-color-scheme="dark"] .ac-header__nav .menu > li > a:hover,
html[data-color-scheme="dark"] .ac-header__nav .menu > li > a:focus-visible { color: var(--ac-color-secondary); }

html[data-color-scheme="dark"] .ac-header__nav .menu .sub-menu li a:hover,
html[data-color-scheme="dark"] .ac-header__nav .menu .sub-menu li a:focus-visible   { color: var(--ac-color-link); }

html[data-color-scheme="dark"] .ac-header__help-btn:hover,
html[data-color-scheme="dark"] .ac-header__help-btn:focus-visible                   { color: var(--ac-color-secondary); }

html[data-color-scheme="dark"] .ac-nav__toggle:hover,
html[data-color-scheme="dark"] .ac-nav__toggle:focus-visible                        { color: var(--ac-color-secondary); }

html[data-color-scheme="dark"] .ac-header__logo-text                                { color: var(--ac-color-link); }

@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) .ac-header__nav .menu > li > a:hover,
	html:not([data-color-scheme="light"]) .ac-header__nav .menu > li > a:focus-visible { color: var(--ac-color-secondary); }
	html:not([data-color-scheme="light"]) .ac-header__nav .menu .sub-menu li a:hover,
	html:not([data-color-scheme="light"]) .ac-header__nav .menu .sub-menu li a:focus-visible   { color: var(--ac-color-link); }
	html:not([data-color-scheme="light"]) .ac-header__help-btn:hover,
	html:not([data-color-scheme="light"]) .ac-header__help-btn:focus-visible                   { color: var(--ac-color-secondary); }
	html:not([data-color-scheme="light"]) .ac-nav__toggle:hover,
	html:not([data-color-scheme="light"]) .ac-nav__toggle:focus-visible                        { color: var(--ac-color-secondary); }
	html:not([data-color-scheme="light"]) .ac-header__logo-text                                { color: var(--ac-color-link); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. Max Mega Menu
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Top-level hover / active: swap navy bg to secondary ── */
html[data-color-scheme="dark"] #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-item > a.mega-menu-link:hover,
html[data-color-scheme="dark"] #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-item > a.mega-menu-link:focus,
html[data-color-scheme="dark"] #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
	background: var(--ac-color-secondary) !important;
	color:      #ffffff !important;
}

/* ── Mega panel: dark background ── */
html[data-color-scheme="dark"] #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu {
	background:    #0d1526 !important;
	border-color:  var(--ac-color-border) !important;
	border-top-color: var(--ac-color-secondary) !important;
	box-shadow:    0 8px 32px rgba(0, 0, 0, 0.55) !important;
}

/* ── Column dividers ── */
html[data-color-scheme="dark"] #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column,
html[data-color-scheme="dark"] #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column-standard {
	border-right-color: var(--ac-color-border) !important;
}

/* ── Column headings: hardcoded #002F86 → white + magenta underline ── */
html[data-color-scheme="dark"] #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column > a.mega-menu-link,
html[data-color-scheme="dark"] #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column-standard > a.mega-menu-link {
	color:            #ffffff !important;
	background-image: linear-gradient(var(--ac-color-secondary), var(--ac-color-secondary)) !important;
}

/* ── Column heading hover ── */
html[data-color-scheme="dark"] #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column > a.mega-menu-link:hover,
html[data-color-scheme="dark"] #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column-standard > a.mega-menu-link:hover {
	color:      #ffffff !important;
	background: var(--ac-color-secondary) !important;
}

/* ── Column standard hover bg ── */
html[data-color-scheme="dark"] #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column-standard:hover {
	background-color: rgba(255, 255, 255, 0.05) !important;
}

/* ── Sub-items: hardcoded #333333 → muted light text ── */
html[data-color-scheme="dark"] #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column-standard > ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
	color: var(--ac-color-text-muted) !important;
}

/* ── Sub-item hover ── */
html[data-color-scheme="dark"] #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column-standard > ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover,
html[data-color-scheme="dark"] #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column-standard > ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:focus {
	color:      #ffffff !important;
	background: var(--ac-color-secondary) !important;
}

/* ── Widget columns (calendar, image, etc.) ── */
html[data-color-scheme="dark"] #mega-menu-wrap-top-menu .mega-menu-item-type-widget {
	background-color: var(--ac-color-surface) !important;
	border-radius:    var(--ac-radius-md) !important;
}

/*
 * Force all direct children of widget columns to transparent bg so the
 * widget's own white containers don't poke through. Covers common plugin
 * widget wrappers (.widget, .mc-widget, .widget_media_image, etc.)
 */
html[data-color-scheme="dark"] #mega-menu-wrap-top-menu .mega-menu-item-type-widget .widget,
html[data-color-scheme="dark"] #mega-menu-wrap-top-menu .mega-menu-item-type-widget > div,
html[data-color-scheme="dark"] #mega-menu-wrap-top-menu .mega-menu-item-type-widget > ul {
	background: transparent !important;
	color:      var(--ac-color-text) !important;
}

/* ── Flyout (standard dropdown) sub-menu ── */
html[data-color-scheme="dark"] #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-flyout ul.mega-sub-menu {
	background:   #0d1526 !important;
	border-color: var(--ac-color-border) !important;
	box-shadow:   var(--ac-shadow-md) !important;
}

html[data-color-scheme="dark"] #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
	color:      var(--ac-color-text) !important;
	background: transparent !important;
}

html[data-color-scheme="dark"] #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover,
html[data-color-scheme="dark"] #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus {
	color:            #ffffff !important;
	background-color: var(--ac-color-secondary) !important;
}

@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-item > a.mega-menu-link:hover,
	html:not([data-color-scheme="light"]) #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-item > a.mega-menu-link:focus,
	html:not([data-color-scheme="light"]) #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
		background: var(--ac-color-secondary) !important; color: #ffffff !important;
	}
	html:not([data-color-scheme="light"]) #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu {
		background: #0d1526 !important; border-color: var(--ac-color-border) !important;
		border-top-color: var(--ac-color-secondary) !important;
		box-shadow: 0 8px 32px rgba(0,0,0,0.55) !important;
	}
	html:not([data-color-scheme="light"]) #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column,
	html:not([data-color-scheme="light"]) #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column-standard {
		border-right-color: var(--ac-color-border) !important;
	}
	html:not([data-color-scheme="light"]) #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column > a.mega-menu-link,
	html:not([data-color-scheme="light"]) #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column-standard > a.mega-menu-link {
		color: #ffffff !important; background-image: linear-gradient(var(--ac-color-secondary), var(--ac-color-secondary)) !important;
	}
	html:not([data-color-scheme="light"]) #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column > a.mega-menu-link:hover,
	html:not([data-color-scheme="light"]) #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column-standard > a.mega-menu-link:hover {
		color: #ffffff !important; background: var(--ac-color-secondary) !important;
	}
	html:not([data-color-scheme="light"]) #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column-standard:hover {
		background-color: rgba(255,255,255,0.05) !important;
	}
	html:not([data-color-scheme="light"]) #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column-standard > ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
		color: var(--ac-color-text-muted) !important;
	}
	html:not([data-color-scheme="light"]) #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column-standard > ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover,
	html:not([data-color-scheme="light"]) #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column-standard > ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:focus {
		color: #ffffff !important; background: var(--ac-color-secondary) !important;
	}
	html:not([data-color-scheme="light"]) #mega-menu-wrap-top-menu .mega-menu-item-type-widget {
		background-color: var(--ac-color-surface) !important; border-radius: var(--ac-radius-md) !important;
	}
	html:not([data-color-scheme="light"]) #mega-menu-wrap-top-menu .mega-menu-item-type-widget .widget,
	html:not([data-color-scheme="light"]) #mega-menu-wrap-top-menu .mega-menu-item-type-widget > div,
	html:not([data-color-scheme="light"]) #mega-menu-wrap-top-menu .mega-menu-item-type-widget > ul {
		background: transparent !important; color: var(--ac-color-text) !important;
	}
	html:not([data-color-scheme="light"]) #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-flyout ul.mega-sub-menu {
		background: #0d1526 !important; border-color: var(--ac-color-border) !important; box-shadow: var(--ac-shadow-md) !important;
	}
	html:not([data-color-scheme="light"]) #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
		color: var(--ac-color-text) !important; background: transparent !important;
	}
	html:not([data-color-scheme="light"]) #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover,
	html:not([data-color-scheme="light"]) #mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus {
		color: #ffffff !important; background-color: var(--ac-color-secondary) !important;
	}
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. Information Section heading
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-color-scheme="dark"] .ac-information__heading { color: var(--ac-color-link); }

@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) .ac-information__heading { color: var(--ac-color-link); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. Audience Section
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * In dark mode --ac-color-text becomes near-white (#e4eaf6) but
 * --ac-color-white stays #ffffff.  The card's background-color uses
 * --ac-color-white, so without this override the card stays white and the
 * near-white text is invisible against it.  Swap to surface colour so
 * text is legible (same pattern as .ac-program-category-card__link above).
 */
html[data-color-scheme="dark"] .ac-audience-card                                      { background-color: var(--ac-color-surface); border-color: var(--ac-color-border); }
html[data-color-scheme="dark"] .ac-audience > .ac-container                           { box-shadow: 0 -4px 40px rgba(0,0,0,0.5), var(--ac-shadow-md); }
html[data-color-scheme="dark"] .ac-audience-card:hover,
html[data-color-scheme="dark"] .ac-audience-card:focus-visible                        { background-color: var(--ac-color-secondary); border-color: var(--ac-color-secondary); color: #ffffff; }
html[data-color-scheme="dark"] .ac-audience-card:hover .ac-audience-card__icon-wrap,
html[data-color-scheme="dark"] .ac-audience-card:focus-visible .ac-audience-card__icon-wrap { background: rgba(255,255,255,0.2); }

@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) .ac-audience-card                                      { background-color: var(--ac-color-surface); border-color: var(--ac-color-border); }
	html:not([data-color-scheme="light"]) .ac-audience > .ac-container                           { box-shadow: 0 -4px 40px rgba(0,0,0,0.5), var(--ac-shadow-md); }
	html:not([data-color-scheme="light"]) .ac-audience-card:hover,
	html:not([data-color-scheme="light"]) .ac-audience-card:focus-visible                        { background-color: var(--ac-color-secondary); border-color: var(--ac-color-secondary); color: #ffffff; }
	html:not([data-color-scheme="light"]) .ac-audience-card:hover .ac-audience-card__icon-wrap,
	html:not([data-color-scheme="light"]) .ac-audience-card:focus-visible .ac-audience-card__icon-wrap { background: rgba(255,255,255,0.2); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. Program Category Cards
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * Cards use background: var(--ac-color-white) which is now #ffffff.
 * Sections use --ac-color-surface (#172035). White cards on dark section =
 * too bright. Force cards to surface level + border for elevation.
 */
html[data-color-scheme="dark"] .ac-program-category-card__link                        { background: var(--ac-color-surface); border-color: var(--ac-color-border); }
html[data-color-scheme="dark"] .ac-program-category-card__link:hover,
html[data-color-scheme="dark"] .ac-program-category-card__link:focus-visible          { background-color: var(--ac-color-secondary); border-color: var(--ac-color-secondary); }

@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) .ac-program-category-card__link                        { background: var(--ac-color-surface); border-color: var(--ac-color-border); }
	html:not([data-color-scheme="light"]) .ac-program-category-card__link:hover,
	html:not([data-color-scheme="light"]) .ac-program-category-card__link:focus-visible          { background-color: var(--ac-color-secondary); border-color: var(--ac-color-secondary); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. Featured Programs — band distinction
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-color-scheme="dark"] .ac-featured-programs                                  { border-top: 1px solid var(--ac-color-border); }
html[data-color-scheme="dark"] .ac-featured-programs__band                            { background-color: #0a1e4a; }

@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) .ac-featured-programs                                  { border-top: 1px solid var(--ac-color-border); }
	html:not([data-color-scheme="light"]) .ac-featured-programs__band                            { background-color: #0a1e4a; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. Preferences panel — selected radio card
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-color-scheme="dark"] .ac-pref-radio input[type="radio"]:checked + .ac-pref-radio__card { background: var(--ac-color-secondary); border-color: var(--ac-color-secondary); }

@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) .ac-pref-radio input[type="radio"]:checked + .ac-pref-radio__card { background: var(--ac-color-secondary); border-color: var(--ac-color-secondary); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. Mobile Menu / Help Panel / Overlay panels
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Panel slide-out container ── */
html[data-color-scheme="dark"] .ac-panel                  { background: var(--ac-color-surface); }
html[data-color-scheme="dark"] .ac-mobile-actions         { background: var(--ac-color-surface); border-top-color: var(--ac-color-border); }

/* ── Overlay backdrop ── */
html[data-color-scheme="dark"] .ac-overlay-backdrop       { background: rgba(0, 0, 0, 0.70); }

/* ── Drilldown borders (were rgba-black, invisible on dark bg) ── */
html[data-color-scheme="dark"] .ac-dd-header              { border-bottom-color: var(--ac-color-border); }
html[data-color-scheme="dark"] .ac-dd-item                { border-bottom-color: var(--ac-color-border); }
html[data-color-scheme="dark"] .ac-drawer-section         { border-top-color:    var(--ac-color-border); }
html[data-color-scheme="dark"] .ac-contact-item           { border-bottom-color: var(--ac-color-border); }
html[data-color-scheme="dark"] .ac-drawer-social-link     { border-color:        rgba(255, 255, 255, 0.20); }

/* ── Back button ── */
html[data-color-scheme="dark"] .ac-dd-back                             { color: var(--ac-color-link); }
html[data-color-scheme="dark"] .ac-dd-back:focus-visible               { outline-color: var(--ac-color-focus-ring); }

/* ── Nav links ── */
html[data-color-scheme="dark"] .ac-dd-link:hover,
html[data-color-scheme="dark"] .ac-dd-link:focus-visible               { color: var(--ac-color-secondary); }
html[data-color-scheme="dark"] .ac-dd-link:focus-visible               { outline-color: var(--ac-color-focus-ring); }

/* ── Parent rows (has submenu) ── */
html[data-color-scheme="dark"] .ac-dd-row:hover .ac-dd-label,
html[data-color-scheme="dark"] .ac-dd-row:focus-visible .ac-dd-label  { color: var(--ac-color-secondary); }
html[data-color-scheme="dark"] .ac-dd-row > i                          { color: var(--ac-color-text-muted); }
html[data-color-scheme="dark"] .ac-dd-row:hover > i,
html[data-color-scheme="dark"] .ac-dd-row:focus-visible > i            { color: var(--ac-color-secondary); }
html[data-color-scheme="dark"] .ac-dd-row:focus-visible                { outline-color: var(--ac-color-focus-ring); }

/* ── Drawer section titles (were rgba black) ── */
html[data-color-scheme="dark"] .ac-drawer-section-title                { color: var(--ac-color-text-muted); }

/* ── Quick links ── */
html[data-color-scheme="dark"] .ac-ql-item                             { background: rgba(255, 255, 255, 0.05); }
html[data-color-scheme="dark"] .ac-ql-item:hover,
html[data-color-scheme="dark"] .ac-ql-item:focus-visible               { background: var(--ac-color-secondary); color: #ffffff; }
html[data-color-scheme="dark"] .ac-ql-icon                             { background: var(--ac-color-secondary); }
html[data-color-scheme="dark"] .ac-ql-item:focus-visible               { outline-color: var(--ac-color-focus-ring); }

/* ── Contact section ── */
html[data-color-scheme="dark"] .ac-contact-icon                        { background: rgba(255, 255, 255, 0.08); color: var(--ac-color-link); }
html[data-color-scheme="dark"] .ac-contact-type                        { color: var(--ac-color-text-muted); }
html[data-color-scheme="dark"] .ac-contact-value a                     { color: var(--ac-color-link); }

/* ── Chat trigger (help panel) base — lift above the same-coloured panel bg ── */
html[data-color-scheme="dark"] .ac-chat-trigger                        { background: rgba(255, 255, 255, 0.06); border-color: var(--ac-color-border); color: var(--ac-color-text); }
/* ── Chat trigger hover ── */
html[data-color-scheme="dark"] .ac-chat-trigger:hover,
html[data-color-scheme="dark"] .ac-chat-trigger:focus-visible          { background: var(--ac-color-secondary); border-color: var(--ac-color-secondary); color: #ffffff; }
/* ── Mobile menu chat button (ac-btn + ac-chat-trigger) — override surface bg ── */
html[data-color-scheme="dark"] .ac-mobile-actions .ac-chat-trigger     { background: transparent; border-color: var(--ac-color-link); color: var(--ac-color-link); }
html[data-color-scheme="dark"] .ac-mobile-actions .ac-chat-trigger:hover,
html[data-color-scheme="dark"] .ac-mobile-actions .ac-chat-trigger:focus-visible { background: var(--ac-color-secondary); border-color: var(--ac-color-secondary); color: #ffffff; }

@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) .ac-panel                  { background: var(--ac-color-surface); }
	html:not([data-color-scheme="light"]) .ac-mobile-actions         { background: var(--ac-color-surface); border-top-color: var(--ac-color-border); }
	html:not([data-color-scheme="light"]) .ac-overlay-backdrop       { background: rgba(0, 0, 0, 0.70); }
	html:not([data-color-scheme="light"]) .ac-dd-header              { border-bottom-color: var(--ac-color-border); }
	html:not([data-color-scheme="light"]) .ac-dd-item                { border-bottom-color: var(--ac-color-border); }
	html:not([data-color-scheme="light"]) .ac-drawer-section         { border-top-color:    var(--ac-color-border); }
	html:not([data-color-scheme="light"]) .ac-contact-item           { border-bottom-color: var(--ac-color-border); }
	html:not([data-color-scheme="light"]) .ac-drawer-social-link     { border-color:        rgba(255, 255, 255, 0.20); }
	html:not([data-color-scheme="light"]) .ac-dd-back                { color: var(--ac-color-link); }
	html:not([data-color-scheme="light"]) .ac-dd-back:focus-visible  { outline-color: var(--ac-color-focus-ring); }
	html:not([data-color-scheme="light"]) .ac-dd-link:hover,
	html:not([data-color-scheme="light"]) .ac-dd-link:focus-visible  { color: var(--ac-color-secondary); }
	html:not([data-color-scheme="light"]) .ac-dd-link:focus-visible  { outline-color: var(--ac-color-focus-ring); }
	html:not([data-color-scheme="light"]) .ac-dd-row:hover .ac-dd-label,
	html:not([data-color-scheme="light"]) .ac-dd-row:focus-visible .ac-dd-label { color: var(--ac-color-secondary); }
	html:not([data-color-scheme="light"]) .ac-dd-row > i             { color: var(--ac-color-text-muted); }
	html:not([data-color-scheme="light"]) .ac-dd-row:hover > i,
	html:not([data-color-scheme="light"]) .ac-dd-row:focus-visible > i { color: var(--ac-color-secondary); }
	html:not([data-color-scheme="light"]) .ac-dd-row:focus-visible   { outline-color: var(--ac-color-focus-ring); }
	html:not([data-color-scheme="light"]) .ac-drawer-section-title   { color: var(--ac-color-text-muted); }
	html:not([data-color-scheme="light"]) .ac-ql-item                { background: rgba(255, 255, 255, 0.05); }
	html:not([data-color-scheme="light"]) .ac-ql-item:hover,
	html:not([data-color-scheme="light"]) .ac-ql-item:focus-visible  { background: var(--ac-color-secondary); color: #ffffff; }
	html:not([data-color-scheme="light"]) .ac-ql-icon                { background: var(--ac-color-secondary); }
	html:not([data-color-scheme="light"]) .ac-ql-item:focus-visible  { outline-color: var(--ac-color-focus-ring); }
	html:not([data-color-scheme="light"]) .ac-contact-icon           { background: rgba(255, 255, 255, 0.08); color: var(--ac-color-link); }
	html:not([data-color-scheme="light"]) .ac-contact-type           { color: var(--ac-color-text-muted); }
	html:not([data-color-scheme="light"]) .ac-contact-value a        { color: var(--ac-color-link); }
	html:not([data-color-scheme="light"]) .ac-chat-trigger                    { background: rgba(255, 255, 255, 0.06); border-color: var(--ac-color-border); color: var(--ac-color-text); }
	html:not([data-color-scheme="light"]) .ac-chat-trigger:hover,
	html:not([data-color-scheme="light"]) .ac-chat-trigger:focus-visible      { background: var(--ac-color-secondary); border-color: var(--ac-color-secondary); color: #ffffff; }
	html:not([data-color-scheme="light"]) .ac-mobile-actions .ac-chat-trigger  { background: transparent; border-color: var(--ac-color-link); color: var(--ac-color-link); }
	html:not([data-color-scheme="light"]) .ac-mobile-actions .ac-chat-trigger:hover,
	html:not([data-color-scheme="light"]) .ac-mobile-actions .ac-chat-trigger:focus-visible { background: var(--ac-color-secondary); border-color: var(--ac-color-secondary); color: #ffffff; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. Logo — white background pill in dark mode
       Ensures logos with dark ink / transparent bg remain legible.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-color-scheme="dark"] .ac-header__logo img {
	background-color: #ffffff;
	border-radius:    var(--ac-radius-sm);
	padding:          4px 10px;
}

html[data-color-scheme="dark"] .ac-footer__logo {
	background-color: rgba(255, 255, 255, 0.90);
	border-radius:    var(--ac-radius-sm);
	padding:          4px 8px;
}

@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) .ac-header__logo img {
		background-color: #ffffff;
		border-radius:    var(--ac-radius-sm);
		padding:          4px 10px;
	}
	html:not([data-color-scheme="light"]) .ac-footer__logo {
		background-color: rgba(255, 255, 255, 0.90);
		border-radius:    var(--ac-radius-sm);
		padding:          4px 8px;
	}
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. Upcoming Events Section
   ═══════════════════════════════════════════════════════════════════════════ */

/* Section + cards: white bg → surface */
html[data-color-scheme="dark"] .ac-events                          { background: color-mix( in srgb, var(--ac-color-surface) 60%, #0d1829 ); }
html[data-color-scheme="dark"] .ac-event-card__inner               { background: var(--ac-color-surface); border-color: var(--ac-color-border); box-shadow: var(--ac-shadow-sm); }
html[data-color-scheme="dark"] .ac-event-card__inner:hover,
html[data-color-scheme="dark"] .ac-event-card__inner:focus-visible  { border-color: var(--ac-color-secondary); box-shadow: var(--ac-shadow-lg); }
/* Date column: text colour token handles both modes automatically via tokens.css */
html[data-color-scheme="dark"] .ac-event-card__day                 { color: var(--ac-color-text); }
/* Title: primary → link */
html[data-color-scheme="dark"] .ac-event-card__title               { color: var(--ac-color-link); }
/* Type badge: color-mix(12%,secondary) over dark ≈ 2.2:1 FAILS → secondary bg + white ✅ 7.2:1 */
html[data-color-scheme="dark"] .ac-event-card__type-badge          { background: var(--ac-color-secondary); color: #ffffff; }
/* Cancelled badge: semi-transparent red over dark ≈ 3.2:1 FAILS → opaque red + white ✅ 4.7:1 */
html[data-color-scheme="dark"] .ac-event-card__cancelled-badge     { background: #b91c1c; color: #ffffff; }

@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) .ac-events                          { background: color-mix( in srgb, var(--ac-color-surface) 60%, #0d1829 ); }
	html:not([data-color-scheme="light"]) .ac-event-card__inner               { background: var(--ac-color-surface); border-color: var(--ac-color-border); box-shadow: var(--ac-shadow-sm); }
	html:not([data-color-scheme="light"]) .ac-event-card__inner:hover,
	html:not([data-color-scheme="light"]) .ac-event-card__inner:focus-visible  { border-color: var(--ac-color-secondary); box-shadow: var(--ac-shadow-lg); }
	html:not([data-color-scheme="light"]) .ac-event-card__day                 { color: var(--ac-color-text); }
	html:not([data-color-scheme="light"]) .ac-event-card__title               { color: var(--ac-color-link); }
	html:not([data-color-scheme="light"]) .ac-event-card__type-badge          { background: var(--ac-color-secondary); color: #ffffff; }
	html:not([data-color-scheme="light"]) .ac-event-card__cancelled-badge     { background: #b91c1c; color: #ffffff; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. Single Resource Template — single-resource.css overrides
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section titles (color: --ac-color-primary → dark navy) ── */
html[data-color-scheme="dark"] .ac-resource-section__title                 { color: var(--ac-color-link); }

/* ── Sidebar sticky nav ── */
html[data-color-scheme="dark"] .ac-resource-nav-wrap                       { background: var(--ac-color-surface); border-color: var(--ac-color-border); }
html[data-color-scheme="dark"] .ac-resource-nav__link:hover,
html[data-color-scheme="dark"] .ac-resource-nav__link:focus-visible        { color: var(--ac-color-secondary); border-left-color: var(--ac-color-secondary); background-color: rgba(162, 21, 102, 0.10); }
html[data-color-scheme="dark"] .ac-resource-nav__link.is-active,
html[data-color-scheme="dark"] .ac-resource-nav__link[aria-current="true"] { color: var(--ac-color-link); border-left-color: var(--ac-color-secondary); background-color: rgba(123, 167, 255, 0.10); }

/* ── Mobile pill nav strip ── */
html[data-color-scheme="dark"] .ac-resource-pill-nav-wrap                  { background: var(--ac-color-surface); box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
html[data-color-scheme="dark"] .ac-resource-pill-nav__link:hover,
html[data-color-scheme="dark"] .ac-resource-pill-nav__link:focus-visible   { color: var(--ac-color-secondary); border-color: var(--ac-color-secondary); }
html[data-color-scheme="dark"] .ac-resource-pill-nav__link.is-active,
html[data-color-scheme="dark"] .ac-resource-pill-nav__link[aria-current="true"] { background-color: var(--ac-color-secondary); border-color: var(--ac-color-secondary); color: #ffffff; }

/* ── FAQs ── */
/* FAQ — dark mode: question bar becomes a deep navy, answer panel uses surface */
html[data-color-scheme="dark"] .ac-faq                                     { box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
html[data-color-scheme="dark"] .ac-faq[open]                               { box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
html[data-color-scheme="dark"] .ac-faq__question                           { background: var(--ac-color-primary-light); color: var(--ac-color-white); }
html[data-color-scheme="dark"] .ac-faq__question:hover                     { background-color: var(--ac-color-primary); }
html[data-color-scheme="dark"] .ac-faq[open] .ac-faq__question             { background-color: var(--ac-color-primary-dark); }
html[data-color-scheme="dark"] .ac-faq__answer                             { background: var(--ac-color-surface); border-left-color: var(--ac-color-secondary); color: var(--ac-color-text); }

/* ── Who It's For chip slider ── */
html[data-color-scheme="dark"] .ac-wif-card                                { background: var(--ac-color-surface); }
html[data-color-scheme="dark"] .ac-wif-card__label                        { color: var(--ac-color-text); }
html[data-color-scheme="dark"] .ac-wif-card__icon                         { background: var(--ac-color-secondary); }
html[data-color-scheme="dark"] a.ac-wif-card:hover,
html[data-color-scheme="dark"] a.ac-wif-card:focus-visible,
html[data-color-scheme="dark"] .ac-wif-card--link:hover,
html[data-color-scheme="dark"] .ac-wif-card--link:focus-visible            { background-color: var(--ac-color-border); border-color: var(--ac-color-secondary); }

/* ── Instructor cards ── */
html[data-color-scheme="dark"] .ac-instructor-card                         { background: var(--ac-color-surface); }
html[data-color-scheme="dark"] .ac-instructor-card__name                   { color: var(--ac-color-link); }

/* ── Pricing ── */
html[data-color-scheme="dark"] .ac-pricing__price                          { color: var(--ac-color-link); }

/* ── Accessibility/Support cards ── */
html[data-color-scheme="dark"] .ac-a11y-card__icon                        { background: var(--ac-color-secondary); }
html[data-color-scheme="dark"] .ac-a11y-card__label                       { color: var(--ac-color-link); }

/* ── Related programs cards ── */
html[data-color-scheme="dark"] .ac-related-card                            { background: var(--ac-color-surface); }
html[data-color-scheme="dark"] .ac-related-card:hover,
html[data-color-scheme="dark"] .ac-related-card:focus-visible              { box-shadow: var(--ac-shadow-md); border-color: var(--ac-color-secondary); }
html[data-color-scheme="dark"] .ac-related-card__title                    { color: var(--ac-color-link); }

@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) .ac-resource-section__title                 { color: var(--ac-color-link); }
	html:not([data-color-scheme="light"]) .ac-resource-nav-wrap                       { background: var(--ac-color-surface); border-color: var(--ac-color-border); }
	html:not([data-color-scheme="light"]) .ac-resource-nav__link:hover,
	html:not([data-color-scheme="light"]) .ac-resource-nav__link:focus-visible        { color: var(--ac-color-secondary); border-left-color: var(--ac-color-secondary); background-color: rgba(162, 21, 102, 0.10); }
	html:not([data-color-scheme="light"]) .ac-resource-nav__link.is-active,
	html:not([data-color-scheme="light"]) .ac-resource-nav__link[aria-current="true"] { color: var(--ac-color-link); border-left-color: var(--ac-color-secondary); background-color: rgba(123, 167, 255, 0.10); }
	html:not([data-color-scheme="light"]) .ac-resource-pill-nav-wrap                  { background: var(--ac-color-surface); box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
	html:not([data-color-scheme="light"]) .ac-resource-pill-nav__link:hover,
	html:not([data-color-scheme="light"]) .ac-resource-pill-nav__link:focus-visible   { color: var(--ac-color-secondary); border-color: var(--ac-color-secondary); }
	html:not([data-color-scheme="light"]) .ac-resource-pill-nav__link.is-active,
	html:not([data-color-scheme="light"]) .ac-resource-pill-nav__link[aria-current="true"] { background-color: var(--ac-color-secondary); border-color: var(--ac-color-secondary); color: #ffffff; }
	html:not([data-color-scheme="light"]) .ac-faq                                     { box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
	html:not([data-color-scheme="light"]) .ac-faq[open]                               { box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
	html:not([data-color-scheme="light"]) .ac-faq__question                           { background: var(--ac-color-primary-light); color: var(--ac-color-white); }
	html:not([data-color-scheme="light"]) .ac-faq__question:hover                     { background-color: var(--ac-color-primary); }
	html:not([data-color-scheme="light"]) .ac-faq[open] .ac-faq__question             { background-color: var(--ac-color-primary-dark); }
	html:not([data-color-scheme="light"]) .ac-faq__answer                             { background: var(--ac-color-surface); border-left-color: var(--ac-color-secondary); color: var(--ac-color-text); }
	html:not([data-color-scheme="light"]) .ac-wif-card                                { background: var(--ac-color-surface); }
	html:not([data-color-scheme="light"]) .ac-wif-card__label                        { color: var(--ac-color-text); }
	html:not([data-color-scheme="light"]) .ac-wif-card__icon                         { background: var(--ac-color-secondary); }
	html:not([data-color-scheme="light"]) a.ac-wif-card:hover,
	html:not([data-color-scheme="light"]) a.ac-wif-card:focus-visible,
	html:not([data-color-scheme="light"]) .ac-wif-card--link:hover,
	html:not([data-color-scheme="light"]) .ac-wif-card--link:focus-visible            { background-color: var(--ac-color-border); border-color: var(--ac-color-secondary); }
	html:not([data-color-scheme="light"]) .ac-instructor-card                         { background: var(--ac-color-surface); }
	html:not([data-color-scheme="light"]) .ac-instructor-card__name                   { color: var(--ac-color-link); }
	html:not([data-color-scheme="light"]) .ac-pricing__price                          { color: var(--ac-color-link); }
	html:not([data-color-scheme="light"]) .ac-a11y-card__icon                        { background: var(--ac-color-secondary); }
	html:not([data-color-scheme="light"]) .ac-a11y-card__label                       { color: var(--ac-color-link); }
	html:not([data-color-scheme="light"]) .ac-related-card                            { background: var(--ac-color-surface); }
	html:not([data-color-scheme="light"]) .ac-related-card:hover,
	html:not([data-color-scheme="light"]) .ac-related-card:focus-visible              { box-shadow: var(--ac-shadow-md); border-color: var(--ac-color-secondary); }
	html:not([data-color-scheme="light"]) .ac-related-card__title                    { color: var(--ac-color-link); }
}