/* TAPS Light Mode Text Colors V13.1 */

:root {
    --taps-light-hero-title: #ffffff;
    --taps-light-hero-description: #eaf7ff;
    --taps-light-hero-kicker: #00d6ff;
    --taps-light-section-title: #07111f;
    --taps-light-section-text: #27364a;
    --taps-light-header-text: #07111f;
    --taps-light-header-muted: #1f2d3d;
    --taps-light-active-menu: #00bfe8;
}

/* Hero red-box area in screenshot */
html[data-theme="light"] .hero-copy h1,
html[data-theme="light"] .hero-title,
html[data-theme="light"] .site-hero-title,
html[data-theme="light"] .taps-hero-title,
html[data-theme="light"] .hero h1,
html[data-theme="light"] .site-hero h1,
html[data-theme="light"] .main-hero h1,
html[data-theme="light"] .taps-hero h1,
html[data-theme="light"] .home-hero h1,
html[data-theme="light"] [class*="hero"] h1 {
    color: var(--taps-light-hero-title) !important;
    text-shadow: 0 14px 36px rgba(0, 0, 0, .22);
}

html[data-theme="light"] .hero-copy p,
html[data-theme="light"] .hero p,
html[data-theme="light"] .site-hero p,
html[data-theme="light"] .main-hero p,
html[data-theme="light"] .taps-hero p,
html[data-theme="light"] .home-hero p,
html[data-theme="light"] [class*="hero"] p {
    color: var(--taps-light-hero-description) !important;
}

html[data-theme="light"] .hero-copy .kicker,
html[data-theme="light"] .hero-kicker,
html[data-theme="light"] .site-hero-kicker,
html[data-theme="light"] .section-kicker,
html[data-theme="light"] .kicker {
    color: var(--taps-light-hero-kicker) !important;
}

/* Home split cards */
html[data-theme="light"] .home-card strong,
html[data-theme="light"] .split-card strong,
html[data-theme="light"] .split-card h2,
html[data-theme="light"] .home-card h2 {
    color: var(--taps-light-hero-title) !important;
}

html[data-theme="light"] .home-card p,
html[data-theme="light"] .split-card p {
    color: var(--taps-light-hero-description) !important;
}

/* Header */
html[data-theme="light"] .topbar,
html[data-theme="light"] .top-nav button,
html[data-theme="light"] .top-detail-nav a,
html[data-theme="light"] .top-actions a,
html[data-theme="light"] .top-actions button,
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .search-btn,
html[data-theme="light"] .hamburger,
html[data-theme="light"] .drawer-menu a,
html[data-theme="light"] .drawer-menu button {
    color: var(--taps-light-header-text) !important;
}

html[data-theme="light"] .top-actions a,
html[data-theme="light"] .top-actions button {
    color: var(--taps-light-header-muted) !important;
}

html[data-theme="light"] .top-nav button.active,
html[data-theme="light"] .top-nav button:hover,
html[data-theme="light"] .top-detail-nav a.active,
html[data-theme="light"] .top-detail-nav a:hover,
html[data-theme="light"] .rail-tab.active,
html[data-theme="light"] .drawer-menu a.active,
html[data-theme="light"] .theme-toggle:hover,
html[data-theme="light"] .search-btn:hover {
    color: var(--taps-light-active-menu) !important;
}

/* Underline follows active menu color */
html[data-theme="light"] .top-nav button::after,
html[data-theme="light"] .top-detail-nav a::after,
html[data-theme="light"] .drawer-menu a::after,
html[data-theme="light"] .drawer-menu button::after,
html[data-theme="light"] .rail-tab::after {
    background: linear-gradient(90deg, transparent, var(--taps-light-active-menu), var(--taps-light-hero-kicker), transparent) !important;
    box-shadow:
        0 0 14px color-mix(in srgb, var(--taps-light-active-menu) 62%, transparent),
        0 0 24px color-mix(in srgb, var(--taps-light-hero-kicker) 28%, transparent) !important;
}

/* Content area */
html[data-theme="light"] .content-section,
html[data-theme="light"] .contact-section,
html[data-theme="light"] .service-card,
html[data-theme="light"] .contact-cards div {
    color: var(--taps-light-section-text) !important;
}

html[data-theme="light"] .section-head h2,
html[data-theme="light"] .service-card h3,
html[data-theme="light"] .contact-cards b,
html[data-theme="light"] .content-section h1,
html[data-theme="light"] .content-section h2,
html[data-theme="light"] .content-section h3,
html[data-theme="light"] .contact-section h1,
html[data-theme="light"] .contact-section h2,
html[data-theme="light"] .contact-section h3 {
    color: var(--taps-light-section-title) !important;
}

html[data-theme="light"] .section-head p,
html[data-theme="light"] .service-card p,
html[data-theme="light"] .contact-cards span {
    color: var(--taps-light-section-text) !important;
}

/* Rail text */
html[data-theme="light"] .rail-tab {
    color: var(--taps-light-header-muted) !important;
}

html[data-theme="light"] .rail-tab.active {
    color: var(--taps-light-active-menu) !important;
}