/*
 * dark-mode.css — Guardian Life & Safety Solutions
 * Auto-applied when OS is set to dark mode (prefers-color-scheme: dark)
 */

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

  /* ── Base ─────────────────────────────────────────────── */
  body {
    background: #080e1c;
    color: rgba(255,255,255,0.85);
  }

  /* ── Nav ──────────────────────────────────────────────── */
  nav {
    background: rgba(8,14,28,0.97) !important;
    border-color: rgba(255,255,255,0.07);
  }
  .nav-logo-text .logo-main { color: var(--white) !important; }
  .nav-logo-text .logo-sub  { color: var(--silver) !important; }
  .nav-links a              { color: rgba(255,255,255,0.72) !important; }
  .nav-links a:hover,
  .nav-links a.active       { color: var(--white) !important; }
  .nav-cta                  { background: var(--blue) !important; color: var(--white) !important; }
  .nav-cta:hover            { background: var(--blue-bright) !important; }
  .nav-toggle span          { background: var(--white) !important; }
  /* Mobile menu */
  .mobile-menu              { background: #060c1a !important; }

  /* ── Hero gradients (index + all inner page heroes) ──── */
  /* Desktop: long cinematic fade — smoke atmosphere bleeds in gradually
     from mid-logo-zone downward. Logo/credentials stay crisp at z-index 6
     above the gradient, so the extended fade doesn't affect readability.
     'rgba(…,0)' instead of 'transparent' keeps the color channel consistent
     and prevents CSS from interpolating through transparent black.         */
  .hero-gradient-top,
  .page-hero-gradient-top {
    background: linear-gradient(to bottom,
      #080e1c 0%,
      #080e1c 52%,
      rgba(8,14,28,0.82) 63%,
      rgba(8,14,28,0.52) 75%,
      rgba(8,14,28,0.22) 87%,
      rgba(8,14,28,0)   100%
    ) !important;
  }
  /* Mobile: logo zone is 240px. Logo runs from ~60px to ~205px (60px padding
     + 145px logo height). Previous gradient started fading at 68% (163px),
     letting background images on city pages bleed through behind the logo and
     credentials. Fixed: hold solid through the full logo zone, then fade only
     in the last ~8% so there's no hard edge into the content area below.     */
  @media (max-width: 768px) {
    .hero-gradient-top,
    .page-hero-gradient-top {
      background: linear-gradient(to bottom,
        #080e1c 0%,
        #080e1c 90%,
        rgba(8,14,28,0.4) 97%,
        rgba(8,14,28,0)   100%
      ) !important;
    }
  }

/* ── Ghost icon (was dark navy @ 7% opacity — invisible on dark bg) ── */
  .hero-logo-ghost-icon,
  .page-hero-ghost-icon {
    opacity: 0.35 !important;
  }
  .hero-logo-ghost-icon svg,
  .page-hero-ghost-icon svg {
    stroke: var(--white) !important;
  }

  /* ── Hero credential text (was dark for white bg) ─────── */
  .hero-logo-cred span,
  .hero-mobile-cred span,
  .page-hero-cred span {
    color: rgba(255,255,255,0.88) !important;
  }
  .hero-logo-serif-tag p,
  .page-hero-serif-tag p {
    color: rgba(255,255,255,0.72) !important;
  }
  /* em accent inside serif quote — var(--blue) has low contrast on dark bg */
  .hero-logo-serif-tag p em,
  .page-hero-serif-tag p em {
    color: var(--steel) !important;
  }
  /* Decorative rule below quote — var(--blue) at 35% is near-invisible on dark bg */
  .hero-logo-serif-tag .tag-rule,
  .page-hero-serif-tag .tag-rule {
    background: var(--steel) !important;
    opacity: 0.55 !important;
  }
  /* Credential dots */
  .hero-logo-cred-dot,
  .page-hero-cred-dot {
    background: var(--steel) !important;
  }
  /* Vertical divider between quote and credentials */
  .page-hero-divider {
    background: linear-gradient(to bottom, transparent, rgba(74,127,212,0.45), transparent) !important;
  }

  /* ── Section labels, titles, intros ──────────────────── */
  .section-title { color: rgba(255,255,255,0.92); }
  .section-intro { color: rgba(255,255,255,0.5); }
  .section-label { color: var(--steel); }
  .section-label::before,
  .section-label::after { background: var(--steel); }

  /* ── Light section backgrounds ────────────────────────── */
  .services   { background: #0b1423; }
  .events     { background: #080e1c; }

  /* Generic .section on pages with white/cream body bg */
  .section {
    background: #080e1c;
  }
  /* Preserve already-dark sections */
  .why,
  .events-showcase,
  .trust-bar,
  .cta-band {
    background: revert;
  }

  /* ── Service pillar cards (homepage) ─────────────────── */
  .pillar-card-hp { background: #0f1d38; }
  .pillar-card-hp:hover { background: #152240; }
  .pillar-card-name { color: rgba(255,255,255,0.9); }
  .pillar-card-desc { color: rgba(255,255,255,0.45); }
  .pillar-card-services li { color: rgba(255,255,255,0.58); }
  .pillar-card-bg-num { color: rgba(255,255,255,0.03); }

  /* ── Service cards (services page grid) ──────────────── */
  .services-grid { background: rgba(255,255,255,0.06); }
  .service-card  { background: #0f1d38; }
  .service-card:hover { background: #152240; }
  .service-num   { color: rgba(255,255,255,0.05); }
  .service-name  { color: rgba(255,255,255,0.9); }
  .service-desc  { color: rgba(255,255,255,0.48); }
  .service-icon-wrap { background: rgba(42,82,152,0.2); }
  .tag {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.45);
  }
  .service-card:hover .service-tags .tag {
    background: rgba(42,82,152,0.2);
    color: var(--steel);
    border-color: rgba(74,127,212,0.3);
  }

  /* ── Event type cards ─────────────────────────────────── */
  .event-card {
    background: #0f1d38;
    border-color: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
  }
  .event-card:hover {
    border-color: var(--steel);
    box-shadow: 0 4px 24px rgba(74,127,212,0.15);
  }
  .event-name  { color: rgba(255,255,255,0.9); }
  .event-desc  { color: rgba(255,255,255,0.45); }
  .event-icon  { background: rgba(42,82,152,0.2); }

  /* ── Blog cards ───────────────────────────────────────── */
  .blog-card {
    background: #0f1d38;
    border-color: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
  }
  .blog-card:hover { box-shadow: 0 16px 48px rgba(0,0,0,0.4); }
  .blog-card-img   { background: #0a1428; }
  .blog-card-title { color: rgba(255,255,255,0.9); }
  .blog-card-excerpt { color: rgba(255,255,255,0.5); }
  .blog-card-date  { color: rgba(255,255,255,0.35); }

  /* ── Testimonials ─────────────────────────────────────── */
  .testimonials { background: #080e1c; }
  .testimonials-coming-soon {
    background: #0f1d38;
    border-color: rgba(255,255,255,0.08);
  }
  .tcs-heading { color: rgba(255,255,255,0.9); }
  .tcs-body    { color: rgba(255,255,255,0.5); }
  .tcs-icon    { background: rgba(42,82,152,0.2); color: var(--steel); }
  .tcs-divider { background: rgba(255,255,255,0.1); }
  .tcs-cta-text { color: rgba(255,255,255,0.45); }

  /* ── Hero text scrim — shift start past gradient end to kill the seam line ── */
  /* Desktop: gradient ends at 360px (100% of 360px height). Scrim at 340px
     creates a 20px overlap where both darken the left side, visible as a
     horizontal line. Moving to 362px eliminates the overlap entirely.       */
  .hero-text-scrim {
    top: 362px;
  }
  /* Mobile: scrim not needed — hero bg is already dark, text has text-shadow,
     and the scrim's top edge at 362px falls right at the h1 baseline, which
     creates its own visible seam. Suppress it entirely on narrow screens.   */
  @media (max-width: 768px) {
    .hero-text-scrim {
      display: none;
    }
  }

  /* ── Page hero tag pill (blog & inner pages) ──────────── */
  .page-hero-tag {
    background: rgba(12,19,44,0.88);
    border-color: rgba(74,127,212,0.45);
  }

  /* ── Footer ───────────────────────────────────────────── */
  footer { background: #060c1a; }
  .footer-top { border-color: rgba(255,255,255,0.07); }
  .footer-brand p { color: rgba(255,255,255,0.38); }
  .footer-col h4,
  .footer-col-heading { color: rgba(255,255,255,0.28); }
  .footer-col ul a { color: rgba(255,255,255,0.42); }
  .footer-col ul a:hover { color: rgba(255,255,255,0.82); }
  .footer-contact-item span { color: rgba(255,255,255,0.42); }
  .footer-bottom { background: #060c1a; }
  .footer-copy { color: rgba(255,255,255,0.28); }
  .footer-bottom-links a { color: rgba(255,255,255,0.28); }
  .footer-bottom-links a:hover { color: rgba(255,255,255,0.7); }

  /* ── Clearmark badge ──────────────────────────────────── */
  .clearmark-credit {
    background: #040912;
    border-color: rgba(255,255,255,0.06);
  }
  .clearmark-badge {
    background: #0f1d38;
    border-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.38);
  }
  .clearmark-badge:hover {
    background: #152240;
    border-color: rgba(74,127,212,0.5);
    color: rgba(255,255,255,0.7);
  }
  .clearmark-badge strong { color: var(--steel); }

  /* ── Services page card name + desc ─────────────────── */
  .card-name { color: rgba(255,255,255,0.92) !important; }
  .card-desc { color: rgba(255,255,255,0.5) !important; }

  /* ── Services page card icons ────────────────────────── */
  .card-icon {
    background: rgba(42,82,152,0.22) !important;
    border-radius: 6px;
  }
  .card-icon svg { stroke: var(--steel) !important; }
  .service-card:hover { background: #152240 !important; }
  .service-card { background: #0f1d38; border-color: rgba(255,255,255,0.08); }
  .card-link { color: var(--steel); }
  .card-link svg { stroke: var(--steel); }
  .card-cta { background: var(--blue); }

  /* ── About page — TC bio section ─────────────────────── */
  .about-text h2 { color: rgba(255,255,255,0.92) !important; }
  .about-text p  { color: rgba(255,255,255,0.55) !important; }
  .cred-badge {
    background: rgba(42,82,152,0.18) !important;
    border-color: rgba(74,127,212,0.25) !important;
    color: var(--steel) !important;
  }
  .cred-badge svg { stroke: var(--steel) !important; }

  /* ── Blog post article body ──────────────────────────── */
  .article-wrap { background: #080e1c; }
  .article-body h2 {
    color: rgba(255,255,255,0.92) !important;
    border-color: rgba(255,255,255,0.08) !important;
  }
  .article-body p,
  .article-body ul li         { color: rgba(255,255,255,0.65) !important; }
  .article-body p strong,
  .article-body ul li strong  { color: rgba(255,255,255,0.9) !important; }
  .article-body a             { color: var(--steel) !important; }
  .article-body blockquote    { border-color: var(--steel); background: rgba(42,82,152,0.1); color: rgba(255,255,255,0.7); }

  /* ── Blog post sidebar ────────────────────────────────── */
  .sidebar-card {
    background: #0f1d38 !important;
    border-color: rgba(255,255,255,0.08) !important;
  }
  .sidebar-card h4 {
    color: rgba(255,255,255,0.88) !important;
    border-color: rgba(255,255,255,0.08) !important;
  }
  .sidebar-toc a       { color: rgba(255,255,255,0.5) !important; }
  .sidebar-toc a:hover { color: var(--steel) !important; }
  .sidebar-toc a::before { background: rgba(255,255,255,0.2) !important; }
  .sidebar-links a       { color: var(--steel) !important; }
  .sidebar-links a:hover { color: var(--silver-lt) !important; }

  /* ── Careers & Contact — forms ───────────────────────── */
  .form-card {
    background: #0f1d38 !important;
    border-color: rgba(255,255,255,0.08) !important;
  }
  .form-card h3,
  .form-card h2          { color: rgba(255,255,255,0.92) !important; }
  .form-card p,
  .form-card > p         { color: rgba(255,255,255,0.5) !important; }
  .form-group label      { color: rgba(255,255,255,0.7) !important; }
  .form-group input,
  .form-group select,
  .form-group textarea {
    background: #0a1428 !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.85) !important;
  }
  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
    border-color: var(--steel) !important;
    box-shadow: 0 0 0 3px rgba(74,127,212,0.15) !important;
  }
  .file-upload {
    background: #0a1428 !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.5) !important;
  }

  /* ── Careers — perk cards ─────────────────────────────── */
  .perk-card   { background: #0f1d38 !important; }
  .perk-title  { color: rgba(255,255,255,0.9) !important; }
  .perk-desc   { color: rgba(255,255,255,0.5) !important; }

  /* ── Service detail — section body prose ────────────────── */
  .section-body         { color: rgba(255,255,255,0.6) !important; }
  .section-body strong  { color: rgba(255,255,255,0.9) !important; }
  .section-body a       { color: var(--steel) !important; }

  /* ── Service detail — timeline ───────────────────────────── */
  .timeline::before  {
    background: linear-gradient(to bottom, var(--steel), rgba(255,255,255,0.08)) !important;
  }
  .timeline-label    { color: var(--steel) !important; }
  .timeline-title    { color: rgba(255,255,255,0.9) !important; }
  .timeline-desc     { color: rgba(255,255,255,0.5) !important; }

  /* ── Service detail — load-in band gap ───────────────────── */
  .load-in-band { background: rgba(255,255,255,0.06) !important; }

  /* ── Service detail — include item icon + text ───────────── */
  .include-icon  { background: rgba(42,82,152,0.22) !important; }
  .include-title { color: rgba(255,255,255,0.9) !important; }
  .include-desc  { color: rgba(255,255,255,0.5) !important; }

  /* ── Service detail — FAQ ────────────────────────────────── */
  .faq-item { border-color: rgba(255,255,255,0.08) !important; }
  .faq-q    { color: rgba(255,255,255,0.9) !important; }
  .faq-a    { color: rgba(255,255,255,0.6) !important; }
  .faq-a a  { color: var(--steel) !important; }

  /* ── Service detail pages — include/audience items ─────── */
  .include-item {
    background: #0f1d38 !important;
    border-color: rgba(255,255,255,0.08) !important;
    border-left-color: var(--steel) !important;
  }
  .audience-item {
    background: #0f1d38 !important;
    border-color: rgba(255,255,255,0.08) !important;
  }
  .audience-item-title   { color: rgba(255,255,255,0.9) !important; }
  .audience-item p       { color: rgba(255,255,255,0.5) !important; }

  /* ── EMT/service comparison columns ──────────────────── */
  .diff-col:not(.diff-col-navy) {
    background: #0f1d38 !important;
  }
  .diff-col h3.light { color: rgba(255,255,255,0.9) !important; }
  .diff-col ul li    { color: rgba(255,255,255,0.6) !important; }

  /* ── Events page — card h3, p, tag pill ──────────────── */
  .event-card h3 { color: rgba(255,255,255,0.9) !important; }
  .event-card p  { color: rgba(255,255,255,0.45) !important; }
  .event-tag {
    background: rgba(42,82,152,0.18) !important;
    color: var(--steel) !important;
    border-color: rgba(74,127,212,0.3) !important;
  }

  /* ── Services page — grid gap strip ──────────────────── */
  .cards-grid { background: rgba(255,255,255,0.06) !important; }

  /* ── EMT staffing — comparison + table ───────────────── */
  .diff-split { background: rgba(255,255,255,0.06) !important; }
  .staffing-table th {
    background: #0a1428 !important;
    color: rgba(255,255,255,0.5) !important;
    border-color: rgba(255,255,255,0.08) !important;
  }
  .staffing-table td {
    color: rgba(255,255,255,0.6) !important;
    border-color: rgba(255,255,255,0.06) !important;
  }
  .staffing-table tr:hover td { background: rgba(255,255,255,0.04) !important; }

  /* ── City / local area pages — service + venue items ── */
  .service-item {
    background: #0f1d38 !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.85) !important;
  }
  .service-item-name { color: rgba(255,255,255,0.9) !important; }
  .service-item-desc { color: rgba(255,255,255,0.5) !important; }
  .venue-item {
    background: #0f1d38 !important;
    border-color: rgba(255,255,255,0.08) !important;
  }
  .venue-name { color: rgba(255,255,255,0.9) !important; }
  .venue-desc { color: rgba(255,255,255,0.5) !important; }

  /* ── Resource / guide pages — prose + callouts ────────── */
  .resource-intro {
    color: rgba(255,255,255,0.6) !important;
    border-color: rgba(255,255,255,0.08) !important;
  }
  .resource-section h2 {
    color: rgba(255,255,255,0.92) !important;
    border-color: rgba(255,255,255,0.08) !important;
  }
  .resource-section p,
  .resource-list li        { color: rgba(255,255,255,0.65) !important; }
  .resource-callout {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
    border-left-color: var(--steel) !important;
  }
  .resource-section-divider { background: rgba(255,255,255,0.08) !important; }
  /* FAQ items on resource pages have explicit white bg in their CSS */
  .faq-q { background: transparent !important; }
  .faq-a { background: transparent !important; }

  /* ── Coverage guide — tier cards ─────────────────────── */
  .coverage-tier {
    background: #0f1d38 !important;
    border-color: rgba(255,255,255,0.08) !important;
  }
  .tier-size       { color: rgba(255,255,255,0.9) !important; }
  .tier-item-label { color: rgba(255,255,255,0.38) !important; }
  .tier-item-value { color: rgba(255,255,255,0.6) !important; }
  .tier-applies    { color: rgba(255,255,255,0.38) !important; }

  /* ── Event planning checklist ─────────────────────────── */
  .checklist-intro {
    color: rgba(255,255,255,0.6) !important;
    border-color: rgba(255,255,255,0.08) !important;
  }
  .checklist-group-title { color: rgba(255,255,255,0.92) !important; }
  .checklist-items {
    background: #0f1d38 !important;
    border-color: rgba(255,255,255,0.08) !important;
  }
  .checklist-item        { border-color: rgba(255,255,255,0.06) !important; }
  .checklist-item:hover  { background: rgba(255,255,255,0.04) !important; }
  .checklist-box {
    background: #0a1428 !important;
    border-color: rgba(255,255,255,0.15) !important;
  }
  .checklist-text strong { color: rgba(255,255,255,0.9) !important; }
  .checklist-text span   { color: rgba(255,255,255,0.6) !important; }
  .print-note {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
  }

  /* ── Blog — article intro ─────────────────────────────── */
  .article-intro {
    color: rgba(255,255,255,0.6) !important;
    border-color: rgba(255,255,255,0.08) !important;
  }

  /* ── Blog — tip blocks (event-safety-tips) ────────────── */
  .tip-block {
    background: #0f1d38 !important;
    border-color: rgba(255,255,255,0.08) !important;
    border-left-color: var(--steel) !important;
  }
  .tip-block-title       { color: rgba(255,255,255,0.9) !important; }
  .tip-block p           { color: rgba(255,255,255,0.6) !important; }
  .tip-block .tip-pro {
    color: rgba(255,255,255,0.45) !important;
    border-color: rgba(255,255,255,0.08) !important;
  }
  .tip-block .tip-pro::before { color: var(--steel) !important; }

  /* ── Blog — step blocks (inside guardian process) ────── */
  .step-block {
    background: #0f1d38 !important;
    border-color: rgba(255,255,255,0.08) !important;
    border-left-color: var(--steel) !important;
  }
  .step-title            { color: rgba(255,255,255,0.9) !important; }
  .step-block p,
  .step-block ul li      { color: rgba(255,255,255,0.6) !important; }

  /* ── Blog — info blocks (fire watch 101) ─────────────── */
  .info-block {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
    border-left-color: var(--steel) !important;
  }
  .info-block p          { color: rgba(255,255,255,0.6) !important; }

  /* ── Blog — compare cards (crowd mgmt vs security) ───── */
  .compare-card {
    background: #0f1d38 !important;
    border-color: rgba(255,255,255,0.08) !important;
  }
  .compare-card h3       { color: var(--steel) !important; }
  .compare-card ul li    { color: rgba(255,255,255,0.6) !important; }

  /* ── Privacy / Terms — prose content ─────────────────── */
  .prose h2, .prose h3,
  .legal-content h2, .legal-content h3,
  .content-section h2, .content-section h3,
  .doc-section h2, .doc-section h3 {
    color: rgba(255,255,255,0.92) !important;
    border-color: rgba(255,255,255,0.08) !important;
  }
  .prose p, .prose li,
  .legal-content p, .legal-content li,
  .content-section p, .content-section li,
  .doc-section p, .doc-section li  { color: rgba(255,255,255,0.65) !important; }
  .doc-last-updated {
    color: rgba(255,255,255,0.38) !important;
    border-color: rgba(255,255,255,0.08) !important;
  }

  /* ── Contact — info panel ────────────────────────────── */
  .contact-info h3       { color: rgba(255,255,255,0.92) !important; }
  .contact-info p        { color: rgba(255,255,255,0.55) !important; }
  .contact-detail-icon   { background: rgba(42,82,152,0.22) !important; }
  .contact-detail-label  { color: rgba(255,255,255,0.4) !important; }
  .contact-detail-value  { color: rgba(255,255,255,0.85) !important; }
  .contact-detail-value a { color: var(--steel) !important; }

  /* ── Contact — inquiry sub-section inside form card ──── */
  .inquiry-section {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
  }
  .inquiry-section h4 { color: rgba(255,255,255,0.88) !important; }
  .inquiry-section p  { color: rgba(255,255,255,0.45) !important; }

  /* ── Contact — hr divider inside form card ───────────── */
  .form-divider { border-color: rgba(255,255,255,0.08) !important; }

  /* ── Careers — form section title dividers ───────────── */
  .form-section-title {
    color: rgba(255,255,255,0.55) !important;
    border-color: rgba(255,255,255,0.08) !important;
  }

  /* ── Careers — checkbox items ────────────────────────── */
  .checkbox-item span                  { color: rgba(255,255,255,0.65) !important; }
  .checkbox-item input:checked + span  { color: rgba(255,255,255,0.92) !important; }
  .checkbox-item:hover                 { background: rgba(255,255,255,0.05) !important; }

  /* ── Careers — perk icon bg ──────────────────────────── */
  .perk-icon     { background: rgba(42,82,152,0.22) !important; }
  .perk-icon svg { stroke: var(--steel) !important; }

  /* ── Careers — small helper text inside form ─────────── */
  .req-note { color: rgba(255,255,255,0.35) !important; }

  /* ── Blog — read-more link on blog cards ─────────────── */
  .blog-card-read { color: var(--steel) !important; }

  /* ── Inline-styled white section overrides ────────────── */
  /* Service areas white section */
  .dm-section-light {
    background: #0b1423 !important;
  }
  .dm-card-light {
    background: #0f1d38 !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.85) !important;
  }
  /* Icon wrapper inside inline-styled cards */
  .dm-icon-bg { background: rgba(42,82,152,0.22) !important; }
  .dm-text-mid  { color: rgba(255,255,255,0.5)  !important; }
  .dm-text-lt   { color: rgba(255,255,255,0.38) !important; }
  .dm-text-body { color: rgba(255,255,255,0.9)  !important; }
  .dm-text-accent { color: var(--steel) !important; }

}