/*
 * ABT Shared Dark-Mode Card Override Partial
 * ============================================
 * Source: build-output/web-pages/shared/abt-dark-mode-cards.css
 * Live:   https://myabt.com/hubfs/css/abt-dark-mode-cards.css
 * Owner:  ABT Web Page Standards
 * Update: 2026-05-14
 *
 * Purpose
 * -------
 * One source of truth for dark-mode card visibility on ABT product pages.
 * Any card component using a hardcoded "background:#fff !important" in light
 * mode needs a matching [data-theme="dark"] override so the card stays
 * readable when the user prefers dark mode (whether via OS-level
 * prefers-color-scheme or HubSpot theme switcher).
 *
 * How to use
 * ----------
 * Add the following <link> tag to the headHtml of any web page that uses
 * the .gd-, .csd-, .mx-, .pc-, .psh-, or .amb- card namespaces:
 *
 *   <link rel="stylesheet" href="https://myabt.com/hubfs/css/abt-dark-mode-cards.css">
 *
 * Per-page [data-theme="dark"] override blocks may also exist inline (for
 * page-specific tweaks). The shared partial is additive and safe to load
 * alongside inline overrides; both will resolve at the same specificity.
 *
 * How to extend
 * -------------
 * When a new product page introduces a new CSS namespace (e.g., .new-),
 * append the relevant card classes to the selector list below and redeploy
 * this file. All pages referencing the file pick up the new coverage on
 * their next page render.
 *
 * Verification
 * ------------
 * tools/verify-web-page.mjs --check dark-mode will detect any web page
 * that has hardcoded "background:#fff !important" on a card class without
 * a corresponding [data-theme="dark"] override on the same selector.
 */

/* === Card backgrounds: explicit [data-theme="dark"] override === */
[data-theme="dark"] .gd-copilot-card,
[data-theme="dark"] .gd-plan-card,
[data-theme="dark"] .gd-p0-card,
[data-theme="dark"] .gd-plan-selected,
[data-theme="dark"] .gd-roadmap-card,
[data-theme="dark"] .gd-roadmap-card.gd-roadmap-featured,
[data-theme="dark"] .gd-roadmap-featured,
[data-theme="dark"] .gd-matrix-wrap,
[data-theme="dark"] .gd-matrix-detail-ai,
[data-theme="dark"] .gd-model-item,
[data-theme="dark"] .gd-coverage-card,
[data-theme="dark"] .csd-midcta-box,
[data-theme="dark"] .csd-copilot-card,
[data-theme="dark"] .csd-step,
[data-theme="dark"] .csd-beyond-card,
[data-theme="dark"] .csd-feature-card,
[data-theme="dark"] .csd-context-box,
[data-theme="dark"] .mx-midcta-box,
[data-theme="dark"] .mx-copilot-card,
[data-theme="dark"] .pc-midcta-box,
[data-theme="dark"] .pc-midcta-artifact,
[data-theme="dark"] .pc-midcta-inner,
[data-theme="dark"] .pc-copilot-card,
[data-theme="dark"] .pc-step,
[data-theme="dark"] .pc-feature-card,
[data-theme="dark"] .pc-beyond-card,
[data-theme="dark"] .pc-proof-box,
[data-theme="dark"] .psh-midcta-box,
[data-theme="dark"] .psh-copilot-card,
[data-theme="dark"] .psh-why-card,
[data-theme="dark"] .psh-type-card,
[data-theme="dark"] .amb-midcta-box,
[data-theme="dark"] .amb-copilot-card,
[data-theme="dark"] .mlc-midcta-box,
[data-theme="dark"] .sa-midcta-box,
/* dg- namespace (Document Guardian, MWS variant) */
[data-theme="dark"] .dg-midcta-box,
[data-theme="dark"] .dg-copilot-card,
[data-theme="dark"] .dg-feature-card,
[data-theme="dark"] .dg-stat-card,
/* ses- namespace (Smart Email Signatures, MWS variant) */
[data-theme="dark"] .ses-midcta-box,
[data-theme="dark"] .ses-copilot-card,
[data-theme="dark"] .ses-feature-card {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* === Button-like dark cards (different default styling) === */
[data-theme="dark"] .gd-plan-btn {
  background: rgba(30,41,59,0.6) !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #cbd5e1 !important;
}

/* === Roadmap icon wrappers (subtle backgrounds, not full cards) === */
[data-theme="dark"] .gd-roadmap-icon-1,
[data-theme="dark"] .gd-roadmap-icon-3 {
  background: rgba(30,41,59,0.6) !important;
}

/* === Card inner text: titles, subs, paragraphs === */
[data-theme="dark"] .gd-copilot-card h1,
[data-theme="dark"] .gd-copilot-card h2,
[data-theme="dark"] .gd-copilot-card h3,
[data-theme="dark"] .gd-copilot-card h4,
[data-theme="dark"] .gd-copilot-card p,
[data-theme="dark"] .gd-copilot-card .gd-copilot-title,
[data-theme="dark"] .gd-copilot-card .gd-copilot-text,
[data-theme="dark"] .csd-midcta-title,
[data-theme="dark"] .csd-midcta-sub,
[data-theme="dark"] .csd-copilot-card .csd-copilot-title,
[data-theme="dark"] .csd-copilot-card .csd-copilot-text,
[data-theme="dark"] .mx-midcta-title,
[data-theme="dark"] .mx-midcta-sub,
[data-theme="dark"] .pc-midcta-title,
[data-theme="dark"] .pc-midcta-sub,
[data-theme="dark"] .pc-midcta-h2,
[data-theme="dark"] .pc-midcta-eyebrow,
[data-theme="dark"] .psh-midcta-title,
[data-theme="dark"] .psh-midcta-sub,
[data-theme="dark"] .amb-midcta-title,
[data-theme="dark"] .amb-midcta-sub,
[data-theme="dark"] .mlc-midcta-title,
[data-theme="dark"] .mlc-midcta-sub,
[data-theme="dark"] .sa-midcta-title,
[data-theme="dark"] .sa-midcta-sub {
  color: #f1f5f9 !important;
}

/* === Outline buttons inside cards: flip text color for readability === */
[data-theme="dark"] .csd-midcta-box .csd-btn-outline-light,
[data-theme="dark"] .pc-midcta-box .pc-btn-outline-light,
[data-theme="dark"] .psh-midcta-box .psh-btn-outline-light,
[data-theme="dark"] .amb-midcta-box .amb-btn-outline-light,
[data-theme="dark"] .mlc-midcta-box .mlc-btn-outline-light {
  color: #f1f5f9 !important;
  border-color: rgba(255,255,255,0.2) !important;
}
[data-theme="dark"] .csd-midcta-box .csd-btn-outline-light:hover,
[data-theme="dark"] .pc-midcta-box .pc-btn-outline-light:hover,
[data-theme="dark"] .psh-midcta-box .psh-btn-outline-light:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
}

/* === System-level prefers-color-scheme: dark fallback === */
/* For users on dark-mode OS without an explicit [data-theme="dark"] switch. */
/* HTML attribute [data-theme="light"] opts out (light-mode locked pages). */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .gd-copilot-card,
  html:not([data-theme="light"]) .gd-plan-card,
  html:not([data-theme="light"]) .gd-roadmap-card,
  html:not([data-theme="light"]) .csd-midcta-box,
  html:not([data-theme="light"]) .csd-copilot-card,
  html:not([data-theme="light"]) .mx-midcta-box,
  html:not([data-theme="light"]) .mx-copilot-card,
  html:not([data-theme="light"]) .pc-midcta-box,
  html:not([data-theme="light"]) .pc-midcta-artifact,
  html:not([data-theme="light"]) .pc-midcta-inner,
  html:not([data-theme="light"]) .psh-midcta-box,
  html:not([data-theme="light"]) .psh-copilot-card,
  html:not([data-theme="light"]) .amb-midcta-box,
  html:not([data-theme="light"]) .mlc-midcta-box,
  html:not([data-theme="light"]) .sa-midcta-box {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: rgba(255,255,255,0.08) !important;
  }
}