/* ============================================
   Community Primary Care — Dark Mode
   Auto-detect only: prefers-color-scheme: dark
   No manual toggle — purely CSS-driven.
   ============================================ */

@media (prefers-color-scheme: dark) {

  /* ==========================================
     DESIGN TOKENS — override light-mode vars
     ========================================== */
  :root {
    color-scheme: dark;

    /* Backgrounds */
    --bg-primary: #091F22;
    --bg-alt: #0C2A2E;
    --bg-dark: #061517;

    /* Text */
    --text-primary: #F3E9D4;
    --text-secondary: #A8C8CB;
    --text-light: #F3E9D4;

    /* Borders */
    --border-light: #1A4E53;

    /* Accent — slightly brighter for dark backgrounds */
    --deeper-water: #22A8B0;

    /* Status — brighter for dark backgrounds */
    --error: #F06B6B;
    --success: #4BB86A;

    /* Gradients — darker variants */
    --gradient-hero: linear-gradient(135deg, #072A2E 0%, #0E5A60 100%);
    --gradient-cta: linear-gradient(135deg, #072A2E 0%, #127278 100%);

    /* Shadows — black-based instead of teal-tinted */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.35);
  }


  /* ==========================================
     SURFACES — explicit dark backgrounds
     ========================================== */

  /* Header */
  .site-header {
    background: #091F22;
  }

  /* Header logo — invert to white (same technique as footer) */
  .header-logo img {
    filter: brightness(0) invert(1);
  }

  /* Mobile nav */
  .mobile-nav {
    background: #091F22;
  }

  /* Mobile CTA bar */
  .mobile-cta {
    background: #091F22;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
  }

  /* Hero curve — matches body bg instead of white */
  .hero::after {
    background: #091F22;
  }

  /* Cards */
  .card {
    background: #0E3A3E;
  }

  /* Pricing cards */
  .pricing-card {
    background: #0E3A3E;
  }

  /* Service cards */
  .service-card {
    background: #0E3A3E;
  }

  /* Comparison table */
  .comparison-table {
    background: #0E3A3E;
  }

  /* Comparison mobile cards */
  .comparison-card-item {
    background: #0E3A3E;
  }

  /* Accordion */
  .accordion-trigger {
    background: #0E3A3E;
  }

  /* Forms */
  .form-control {
    background: #0C2A2E;
    color: var(--text-primary);
  }

  .wpcf7 .wpcf7-form-control:not(.wpcf7-submit) {
    background: #0C2A2E;
    color: var(--text-primary);
  }

  /* Callout boxes */
  .callout {
    background: #0C2A2E;
  }

  /* Legal notice */
  .legal-notice {
    background: #0C2A2E;
  }

  /* Enroll page */
  .enroll-header {
    background: #091F22;
  }

  .enroll-embed {
    background: #0C2A2E;
  }

  /* Footer — slightly deeper */
  .site-footer {
    background: #061517;
  }

  /* Footer social icons */
  .footer-social a {
    background: rgba(255, 255, 255, 0.08);
  }

  .footer-social a:hover {
    background: #22A8B0;
    box-shadow: 0 4px 12px rgba(34, 168, 176, 0.3);
  }

  .footer-social a:focus-visible {
    outline-color: #F3E9D4;
    box-shadow: 0 0 0 4px rgba(243, 233, 212, 0.3);
  }


  /* ==========================================
     HARDCODED rgba() OVERRIDES
     ========================================== */

  /* Card icon backgrounds */
  .card-icon {
    background: rgba(34, 168, 176, 0.20);
  }

  /* Audience icon backgrounds */
  .audience-icon {
    background: rgba(34, 168, 176, 0.20);
  }

  /* Contact info icon backgrounds */
  .contact-info-icon {
    background: rgba(34, 168, 176, 0.20);
  }

  /* Comparison table row tints */
  .comparison-table tbody td:first-child {
    background: rgba(255, 255, 255, 0.03);
  }

  .comparison-table tbody td:last-child {
    background: rgba(34, 168, 176, 0.1);
    color: var(--text-primary);
  }

  /* Accordion hover/expanded states */
  .accordion-trigger:hover {
    background: rgba(34, 168, 176, 0.08);
  }

  .accordion-trigger[aria-expanded="true"] {
    background: rgba(34, 168, 176, 0.08);
  }

  /* Form focus rings */
  .form-control:focus {
    box-shadow: 0 0 0 3px rgba(34, 168, 176, 0.25);
  }

  .wpcf7 .wpcf7-form-control:not(.wpcf7-submit):focus {
    box-shadow: 0 0 0 3px rgba(34, 168, 176, 0.25);
  }

  /* Form success box */
  .form-success {
    background: rgba(75, 184, 106, 0.15);
  }

  /* Badge */
  .badge {
    background: rgba(247, 195, 82, 0.15);
    color: var(--golden-hour);
  }

  /* Button focus rings */
  .btn:focus-visible {
    box-shadow: 0 0 0 4px rgba(34, 168, 176, 0.3);
  }


  /* ==========================================
     BUTTON ADJUSTMENTS
     ========================================== */

  /* Primary uses brighter accent */
  .btn--primary {
    background: #22A8B0;
  }

  .btn--primary:hover {
    background: #1A8A91;
  }

  /* White/outline-white — use beach-beige instead of pure white */
  .btn--white {
    background: #F3E9D4;
    color: #0E4A4E;
  }

  .btn--white:hover {
    background: #E8D9BE;
  }

  .btn--outline-white {
    color: #F3E9D4;
    border-color: #F3E9D4;
  }

  .btn--outline-white:hover {
    background: #F3E9D4;
    color: #0E4A4E;
  }

  /* Secondary button — brighter border/text for dark bg */
  .btn--secondary {
    color: #22A8B0;
    border-color: #22A8B0;
  }

  .btn--secondary:hover {
    background: #22A8B0;
    color: #091F22;
  }

  /* CF7 submit */
  .wpcf7 .wpcf7-submit {
    background: #22A8B0;
  }

  .wpcf7 .wpcf7-submit:hover {
    background: #1A8A91;
  }


  /* ==========================================
     MAP — subtle border for dark bg
     ========================================== */
  .map-container {
    border: 1px solid #1A4E53;
  }


  /* ==========================================
     MISCELLANEOUS
     ========================================== */

  /* Accordion panel links — use Shallow Gulf for visibility */
  .accordion-panel-inner a {
    color: #4DC5CC;
  }

  /* Section subtitle text */
  .section-title p {
    color: #A8C8CB;
  }

  /* Simple table body background */
  .simple-table {
    background: #0E3A3E;
  }

  /* Legal content links */
  .legal-content a {
    color: #4DC5CC;
  }

  /* Enroll back link */
  .enroll-header .back-link {
    color: #4DC5CC;
  }

  /* Contact info link hover */
  .contact-info-item a:hover {
    color: #4DC5CC;
  }

  /* FAQ accordion section headings — dark text on dark bg */
  .accordion-group h3 {
    color: var(--text-primary);
  }

  /* Mobile comparison card headings */
  .comparison-card-item h4 {
    color: var(--text-primary);
  }

  /* Service card titles */
  .service-card h3 {
    color: var(--text-primary);
  }

  /* Enroll back-link hover */
  .enroll-header .back-link:hover {
    color: #F3E9D4;
  }

  /* Cost comparison cards */
  .cost-example-card {
    background: #0E3A3E;
  }

  /* Calculator */
  .calculator {
    background: #0E3A3E;
  }

  .calc-field input,
  .calc-field select {
    background: #0C2A2E;
    color: var(--text-primary);
    border-color: #1A4E53;
  }

  .calc-field input:focus,
  .calc-field select:focus {
    box-shadow: 0 0 0 3px rgba(34, 168, 176, 0.25);
  }

  .calculator-results {
    background: #0C2A2E;
  }

  /* Modal */
  .modal-overlay {
    background: rgba(0, 0, 0, 0.75);
  }

  .modal {
    background: #0E3A3E;
  }

  .modal-close:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  /* Enroll Medicare section */
  .enroll-medicare {
    border-top-color: #1A4E53;
  }

  /* Medication rows */
  .medication-row {
    border-bottom-color: #1A4E53;
  }

  .medication-add-btn {
    border-color: #22A8B0;
    color: #22A8B0;
  }

  .medication-add-btn:hover {
    background: rgba(34, 168, 176, 0.12);
  }

  /* Benefits review section heading */
  .benefits-form-wrapper h3 {
    border-bottom-color: #22A8B0;
  }
}