/* ╔══════════════════════════════════════════════════════════════════════════════╗
   ║   BRAND ACCENTS — SITE-WIDE COLOR STRATEGY                                   ║
   ║   Like Safelite: strategic color use to draw attention and create hierarchy  ║
   ║                                                                              ║
   ║   COLORS:                                                                    ║
   ║   - Blue (#183075): Headings, authority, trust                               ║
   ║   - Red (#EC1C24): Action items, "$0", "Free", key highlights                ║
   ║   - Gold (#FFC107): Stars, ratings, premium highlights                       ║
   ║   - Gray (#475569): Body text for readability                                ║
   ╚══════════════════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════════════════════════════
   0. BODY TEXT — Gray for readability, not all blue!
   Andy: "Visual hierarchy means NOT everything is the same color"
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Body text should be readable gray, NOT dark blue */
body, p, li, dd {
    color: var(--color-neutral-700, #475569);
}

/* Strong/bold text in paragraphs gets blue for emphasis */
p strong, li strong, dd strong {
    color: var(--color-brand-blue-dark, #0f1e4a);
    font-weight: 700;
}

/* Price mentions get special treatment - make them pop */
p strong:has(~ *:contains("$")),
p:has(strong) {
    /* Let strong tags handle their own color */
}

/* ═══════════════════════════════════════════════════════════════════════════════
   1. HEADINGS — Bold, Blue, Commanding
   ═══════════════════════════════════════════════════════════════════════════════ */

/* All page headings should be bold navy blue - EXCEPT in dark sections */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-brand-blue-dark, #0f1e4a);
    font-weight: 800;
}

/* H1s get extra visual weight */
h1 {
    font-weight: 900;
    letter-spacing: -0.02em;
}

/* H2 section headings */
h2 {
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* EXCEPTION: White headings in dark sections (hero only, NOT light-bg CTA) */
.section-hero h1,
.section-hero h2 {
    color: white !important;
}

/* BUT form headings inside cards need to be dark (light background) */
.section-hero .form-card h2,
.section-hero .form-card .form-heading,
.section-hero .form-heading,
.form-card h2,
.form-card .form-heading {
    color: var(--color-brand-blue-dark, #0f1e4a) !important;
}

/* Form subhead should also be visible */
.section-hero .form-card .form-subhead,
.form-card .form-subhead {
    color: var(--color-neutral-600, #4b5563) !important;
}

/* Keep the $0 replacement text RED */
.section-hero .form-card .form-subhead strong,
.form-card .form-subhead strong {
    color: var(--color-brand-red, #EC1C24) !important;
}

/* Dark CTA sections (not homepage which has light-gray CTA) */
.section-cta.dark h1,
.section-cta.dark h2,
.page-service .section-cta h2,
.page-services .section-cta h2,
.page-location .section-cta h2,
.page-vehicle .section-cta h2 {
    color: white !important;
}

/* Card headings should pop */
.service-card h3,
.why-item h3,
.faq-item h3,
.detail-heading,
[class*="card"] h3,
[class*="card"] h4 {
    color: var(--color-brand-blue, #183075);
    font-weight: 800;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   2. RED HIGHLIGHTS — Key Value Props & Actions
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Class for highlighting key terms */
.highlight-red,
.text-brand-red {
    color: var(--color-brand-red, #EC1C24);
    font-weight: 700;
}

/* Auto-highlight common value props via attribute selectors */
/* Note: For "$0", use <span class="highlight-red">$0</span> in HTML */

/* Price emphasis */
.service-price em,
.price-insurance,
.price-note {
    color: var(--color-brand-red, #EC1C24);
    font-weight: 700;
}

/* "(Often $0 with insurance)" style text */
.service-price em::before {
    content: "(";
}
.service-price em::after {
    content: ")";
}

/* Insurance emphasis */
.section-insurance strong,
[class*="insurance"] strong {
    color: var(--color-brand-red, #EC1C24);
}

/* Button hover states with brand red */
.btn-primary,
.btn-action {
    background: var(--color-brand-red, #EC1C24);
    color: white;
    font-weight: 700;
}

.btn-primary:hover,
.btn-action:hover {
    background: var(--color-brand-red-dark, #b9151b);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(236, 28, 36, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   3. GOLD HIGHLIGHTS — Stars, Ratings, Premium
   ═══════════════════════════════════════════════════════════════════════════════ */

.highlight-gold,
.text-brand-gold {
    color: var(--color-brand-gold, #FFC107);
}

/* Star icons and ratings */
.icon-star,
.rating-star,
[class*="star"] svg,
.google-rating svg {
    fill: var(--color-brand-gold, #FFC107);
    color: var(--color-brand-gold, #FFC107);
}

/* Rating text */
.rating-text strong,
.google-rating strong {
    color: var(--color-brand-gold, #FFC107);
    font-weight: 800;
}

/* Trust badges with gold accents */
.trust-item .icon-star {
    color: var(--color-brand-gold, #FFC107);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   4. SECTION BACKGROUNDS — Visual Rhythm
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Alternating section backgrounds - EXCLUDE hero and cta sections */
.section:nth-child(even):not(.section-hero):not(.section-cta) {
    background: var(--color-neutral-50, #f9fafb);
}

.section:nth-child(odd):not(.section-hero):not(.section-cta) {
    background: white;
}

/* Blue accent sections (for CTAs, key messages) */
.section-accent {
    background: linear-gradient(135deg, var(--color-brand-blue, #183075) 0%, var(--color-brand-blue-dark, #0f1e4a) 100%);
    color: white;
}

.section-accent h2 {
    color: white;
}

.section-accent p {
    color: rgba(255, 255, 255, 0.9);
}

/* CTA sections - ONLY dark on non-homepage pages */
/* Homepage CTA stays light gray (defined in home.css) */
.page-service .section-cta,
.page-services .section-cta,
.page-location .section-cta,
.page-locations .section-cta,
.page-vehicle .section-cta,
.page-vehicles .section-cta,
.page-insurance .section-cta,
.page-resource .section-cta,
.page-resources .section-cta,
.page-about .section-cta,
.page-faq .section-cta,
.page-contact .section-cta {
    background: linear-gradient(135deg, var(--color-brand-blue, #183075) 0%, var(--color-brand-blue-dark, #0f1e4a) 100%);
    color: white;
}

.page-service .section-cta h2,
.page-services .section-cta h2,
.page-location .section-cta h2,
.page-locations .section-cta h2,
.page-vehicle .section-cta h2,
.page-vehicles .section-cta h2,
.page-insurance .section-cta h2,
.page-resource .section-cta h2,
.page-resources .section-cta h2,
.page-about .section-cta h2,
.page-faq .section-cta h2,
.page-contact .section-cta h2 {
    color: white;
}

.page-service .section-cta p,
.page-services .section-cta p,
.page-location .section-cta p,
.page-locations .section-cta p,
.page-vehicle .section-cta p,
.page-vehicles .section-cta p,
.page-insurance .section-cta p,
.page-resource .section-cta p,
.page-resources .section-cta p,
.page-about .section-cta p,
.page-faq .section-cta p,
.page-contact .section-cta p {
    color: rgba(255, 255, 255, 0.9);
}

/* Light blue accent (softer) */
.section-light-accent {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   5. CARD ENHANCEMENTS — Borders & Hovers (GOLD on hover)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Cards with blue top border accent */
.service-card,
.why-item,
.area-col,
.faq-item,
[class*="card"]:not(.form-card) {
    border-top: 3px solid var(--color-brand-blue, #183075);
    transition: all 0.2s ease;
}

/* Hover state with GOLD accent - NO FLOAT TRANSFORM */
.service-card:hover,
.area-col:hover,
[class*="card"]:not(.form-card):hover {
    border-top-color: var(--color-brand-gold, #FFC107);
    /* Removed transform and box-shadow - keep cards stable */
}

/* Link hover → GOLD site-wide */
a:hover {
    color: var(--color-brand-gold, #FFC107);
}

/* Footer link hover → GOLD */
.site-footer a:hover {
    color: var(--color-brand-gold, #FFC107) !important;
}

/* Header/Nav link hover → GOLD */
.site-header .nav-link:hover,
.site-header .nav-link:focus,
.mega-menu .mega-link:hover,
.mega-menu .mega-link:focus,
.dropdown-menu a:hover,
.dropdown-menu a:focus {
    color: var(--color-brand-gold, #FFC107) !important;
}

/* Mega menu link text also gold on hover */
.mega-menu .mega-link:hover strong,
.mega-menu .mega-link:focus strong {
    color: var(--color-brand-gold, #FFC107) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   6. HOMEPAGE SPECIFIC FIXES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Hero heading with blue */
#homepage #hero-heading,
#homepage .hero-content h1 {
    color: var(--color-brand-blue-dark, #0f1e4a);
    font-weight: 900;
}

/* Hero lead emphasis */
#homepage .hero-lead strong {
    color: var(--color-brand-red, #EC1C24);
    font-weight: 800;
}

/* Service card headings */
#homepage .service-card h3 {
    color: var(--color-brand-blue, #183075);
    font-weight: 800;
    font-size: 1.25rem;
}

/* Service prices with red */
#homepage .service-price {
    color: var(--color-brand-blue-dark, #0f1e4a);
    font-weight: 800;
}

#homepage .service-price em {
    color: var(--color-brand-red, #EC1C24);
    font-weight: 700;
}

/* Why item titles */
#homepage .why-title {
    color: var(--color-brand-blue, #183075);
    font-weight: 800;
}

/* Area column headings */
#homepage .area-col > strong {
    color: var(--color-brand-blue, #183075);
    font-weight: 800;
}

/* FAQ headings */
#homepage .faq-item h3 {
    color: var(--color-brand-blue, #183075);
    font-weight: 800;
}

/* Form card styling */
#homepage .form-heading {
    color: var(--color-brand-blue-dark, #0f1e4a);
    font-weight: 800;
}

#homepage .form-subhead strong {
    color: var(--color-brand-red, #EC1C24);
    font-weight: 700;
}

/* Section intro text centered */
#homepage .section-intro {
    text-align: center;
    margin: 0 auto var(--space-6);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   7. SERVICES PAGE CTA FIX
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Center alignment for CTA sections */
.section-cta {
    text-align: center;
}

.section-cta h2 {
    text-align: center;
    color: var(--color-brand-blue-dark, #0f1e4a);
}

.section-cta .cta-text,
.section-cta p {
    text-align: center;
    max-width: 60ch;
    margin: 0 auto var(--space-6);
}

.section-cta .cta-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}

/* Fix the weird phone button */
.cta-buttons .btn-phone,
.cta-buttons .btn-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--space-3) var(--space-5);
    background: white;
    border: 2px solid var(--color-brand-blue, #183075);
    color: var(--color-brand-blue, #183075);
    border-radius: var(--radius-full);
    font-weight: 700;
    text-decoration: none;
    min-width: 180px;
}

.cta-buttons .btn-phone:hover,
.cta-buttons .btn-text:hover {
    background: var(--color-brand-blue, #183075);
    color: white;
}

.cta-buttons .btn-primary {
    background: var(--color-brand-red, #EC1C24);
    border: 2px solid var(--color-brand-red, #EC1C24);
    color: white;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-full);
    font-weight: 700;
    text-decoration: none;
    min-width: 180px;
}

.cta-buttons .btn-primary:hover {
    background: var(--color-brand-red-dark, #b9151b);
    border-color: var(--color-brand-red-dark, #b9151b);
}

/* Areas section centering */
.section-areas h2,
.section-areas > .container > p {
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   8. TRUST SIGNALS & BADGES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Trust badges with brand colors */
.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.trust-badge .icon-check {
    color: var(--color-success, #10b981);
}

/* Google rating emphasis */
.google-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.google-rating .icon-star {
    color: var(--color-brand-gold, #FFC107);
    fill: var(--color-brand-gold, #FFC107);
}

.google-rating .rating-text {
    font-weight: 600;
}

.google-rating .rating-text strong {
    color: var(--color-brand-gold, #FFC107);
    font-weight: 800;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   9. PREFOOTER CTA — WHITE TO BREAK BLUE WALL
   ═══════════════════════════════════════════════════════════════════════════════ */

.prefooter-cta {
    background: white !important;
    color: var(--color-brand-blue-dark, #0f1e4a);
    padding: var(--space-12) 0;
    border-top: 4px solid var(--color-brand-red, #EC1C24);
}

.prefooter-cta .prefooter-title {
    color: var(--color-brand-blue-dark, #0f1e4a);
    font-weight: 800;
}

.prefooter-cta .prefooter-text {
    color: var(--color-neutral-600, #4b5563);
}

.prefooter-cta .prefooter-text strong {
    color: var(--color-brand-red, #EC1C24);
    font-weight: 700;
}

.prefooter-cta .btn-phone {
    background: white;
    border: 2px solid var(--color-brand-blue, #183075);
    color: var(--color-brand-blue, #183075);
}

.prefooter-cta .btn-phone:hover {
    background: var(--color-brand-blue, #183075);
    color: white;
}

.prefooter-cta .btn-primary {
    background: var(--color-brand-red, #EC1C24);
    border: 2px solid var(--color-brand-red, #EC1C24);
    color: white;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   10. SITE-WIDE CONTENT CENTERING & CONTAINMENT
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Center all inline lists site-wide */
[class*="list-inline"],
[class*="inline-list"],
.makes-list-inline,
.area-list-inline {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: var(--space-3, 12px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 900px;
}

/* Reduce excessive white gaps between sections */
.section + .section {
    margin-top: 0;
}

/* Reviews to CTA gap reduction */
.section-reviews + .section-cta {
    padding-top: var(--space-8, 32px);
}

/* Center section intros and lead text - ONLY in hero sections */
.section-hero .section-intro,
.section-hero .hero-lead,
.section-hero > .container > p {
    text-align: center;
    max-width: 70ch;
    margin-left: auto;
    margin-right: auto;
}

/* Content sections - paragraphs LEFT aligned for readability */
/* BUT h2 headings can be centered on homepage */
.section:not(.section-hero):not(.section-cta) p {
    text-align: left;
}

/* Only force left-align h2/h3 on service pages, NOT homepage */
.page-service .section:not(.section-hero):not(.section-cta) h2,
.page-service .section:not(.section-hero):not(.section-cta) h3 {
    text-align: left;
}

/* Limit container width on service pages only, NOT homepage */
.page-service .section:not(.section-hero):not(.section-cta) .container {
    max-width: 75ch;
}

/* Contain FAQ and similar list content */
.faq-list,
.faq-grid,
[class*="question-list"] {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Center button groups */
.cta-buttons,
[class*="button-group"],
[class*="btn-group"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4, 16px);
}

/* Section headings - only center in hero/CTA sections */
.section-hero h2,
.section-cta h2 {
    text-align: center;
}

/* Content section h2/h3 - LEFT aligned */
.section:not(.section-hero):not(.section-cta) h2,
.section:not(.section-hero):not(.section-cta) h3 {
    text-align: left !important;
}

/* Content containers - consistent max-width */
.service-content,
.section-content,
[class*="content-wrap"] {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   11. SIMPLIFIED FOOTER — Andy Crestodina Style
   ═══════════════════════════════════════════════════════════════════════════════ */

.site-footer {
    background: linear-gradient(135deg, var(--color-brand-blue, #183075) 0%, var(--color-brand-blue-dark, #0f1e4a) 100%);
    color: white;
    padding: var(--space-12) 0 var(--space-6);
}

.site-footer .footer-main {
    display: grid;
    grid-template-columns: 1.2fr 2fr;
    gap: var(--space-10);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Brand Column */
.site-footer .footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.site-footer .footer-logo img {
    height: 40px;
    width: auto;
}

.site-footer .footer-tagline {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

.site-footer .footer-contact-quick {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.site-footer .footer-phone {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
}

.site-footer .footer-phone:hover {
    color: var(--color-brand-gold, #FFC107) !important;
}

.site-footer .footer-hours {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

/* Links Grid */
.site-footer .footer-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.site-footer .footer-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.site-footer .footer-heading {
    color: var(--color-brand-gold, #FFC107);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
}

.site-footer .footer-col nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.site-footer .footer-col a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.15s;
}

.site-footer .footer-col a:hover {
    color: var(--color-brand-gold, #FFC107) !important;
}

.site-footer .footer-all {
    color: var(--color-brand-gold, #FFC107) !important;
    font-weight: 600;
    margin-top: var(--space-1);
}

/* Bottom Bar */
.site-footer .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-6);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.site-footer .footer-copyright {
    margin: 0;
}

.site-footer .footer-legal {
    display: flex;
    gap: var(--space-4);
}

.site-footer .footer-legal a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
}

.site-footer .footer-legal a:hover {
    color: var(--color-brand-gold, #FFC107) !important;
}

/* Mobile Footer */
@media (max-width: 768px) {
    .site-footer .footer-main {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .site-footer .footer-links-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .site-footer .footer-col {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: var(--space-4);
    }

    .site-footer .footer-col:last-child {
        border-bottom: none;
    }

    .site-footer .footer-bottom {
        flex-direction: column;
        gap: var(--space-3);
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   12. UTILITY CLASSES FOR MANUAL HIGHLIGHTING
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Text colors */
.text-blue { color: var(--color-brand-blue, #183075) !important; }
.text-blue-dark { color: var(--color-brand-blue-dark, #0f1e4a) !important; }
.text-red { color: var(--color-brand-red, #EC1C24) !important; }
.text-gold { color: var(--color-brand-gold, #FFC107) !important; }
.text-white { color: white !important; }

/* Font weights */
.font-bold { font-weight: 700 !important; }
.font-extrabold { font-weight: 800 !important; }
.font-black { font-weight: 900 !important; }

/* Highlight box (like Safelite's "$0" callouts) */
.highlight-box {
    display: inline-block;
    background: var(--color-brand-red, #EC1C24);
    color: white;
    padding: 0.125em 0.5em;
    border-radius: 0.25em;
    font-weight: 800;
}

.highlight-box-gold {
    background: var(--color-brand-gold, #FFC107);
    color: var(--color-brand-blue-dark, #0f1e4a);
}

/* Gold underline accent */
.accent-underline {
    border-bottom: 3px solid var(--color-brand-gold, #FFC107);
    padding-bottom: 0.125em;
}

/* Red underline accent */
.accent-underline-red {
    border-bottom: 3px solid var(--color-brand-red, #EC1C24);
    padding-bottom: 0.125em;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SITEWIDE: Vehicle/Makes Chips → GOLD on Hover
   ═══════════════════════════════════════════════════════════════════════════════ */

/* All makes/vehicle chip lists - centered and gold hover */
.makes-list-inline,
.vehicle-list,
[class*="makes-list"],
[class*="vehicle-chips"] {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: var(--space-4, 12px) !important;
}

/* Makes/vehicle chips turn BLUE on hover */
.makes-list-inline a:hover,
.vehicle-list a:hover,
[class*="makes-list"] a:hover,
[class*="vehicle-chips"] a:hover {
    background: var(--color-brand-blue, #183075) !important;
    border-color: var(--color-brand-blue, #183075) !important;
    color: white !important;
    box-shadow: 0 12px 24px rgba(24, 48, 117, 0.35) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GLOBAL FIX: Dark Section Overrides (MUST BE AT END)
   Ensures hero and CTA sections maintain dark backgrounds across ALL pages
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Force dark blue background on hero sections */
.section-hero {
    background: linear-gradient(150deg, #1a2a4e 0%, #183075 100%) !important;
    color: white !important;
}

.section-hero h1,
.section-hero h2,
.section-hero .hero-lead {
    color: white !important;
}

/* Hero paragraphs are white EXCEPT inside cards/intercepts with light backgrounds */
.section-hero p {
    color: white !important;
}

/* BUT text inside light-background containers needs to be dark */
.section-hero .form-card p,
.section-hero .objection-intercept p,
.section-hero .intercept-content p,
.section-hero .intercept-content,
.section-hero .objection-intercept .intercept-content {
    color: var(--color-neutral-700, #374151) !important;
}

.section-hero .objection-intercept ol,
.section-hero .objection-intercept li {
    color: var(--color-neutral-700, #374151) !important;
}

.section-hero .objection-intercept strong {
    color: var(--color-brand-blue-dark, #0f1e4a) !important;
}

.section-hero a {
    color: white;
}

/* Force dark blue background on CTA sections (except homepage which is light) */
.page-service .section-cta,
.page-services .section-cta,
.page-location .section-cta,
.page-locations .section-cta,
.page-vehicle .section-cta,
.page-vehicles .section-cta,
.page-insurance .section-cta,
.page-resource .section-cta,
.page-resources .section-cta,
.page-about .section-cta,
.page-faq .section-cta,
.page-contact .section-cta {
    background: linear-gradient(135deg, #183075 0%, #0f1e4a 100%) !important;
    color: white !important;
}

.page-service .section-cta h2,
.page-services .section-cta h2,
.page-location .section-cta h2,
.page-locations .section-cta h2,
.page-vehicle .section-cta h2,
.page-vehicles .section-cta h2,
.page-insurance .section-cta h2,
.page-resource .section-cta h2,
.page-resources .section-cta h2,
.page-about .section-cta h2,
.page-faq .section-cta h2,
.page-contact .section-cta h2,
.page-service .section-cta p,
.page-services .section-cta p,
.page-location .section-cta p,
.page-locations .section-cta p,
.page-vehicle .section-cta p,
.page-vehicles .section-cta p {
    color: white !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   UNIVERSAL CARD VISIBILITY — PREVENT WHITE-ON-WHITE CONTAINERS
   This catches all common card/container patterns and ensures they're visible.
   Applied globally to fix systemic invisible container issue.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   SELECTIVE CARD STYLING — Only for IMPORTANT callouts, not everything!
   Andy: "When everything is special, nothing is special."
   ═══════════════════════════════════════════════════════════════════════════════ */

/* IMPORTANT CALLOUTS ONLY - get the blue accent card treatment */
.highlight-box,
.callout-box,
.info-box,
.warning-box,
.tip-box,
.mid-page-cta,
.adas-summary-box {
    background: linear-gradient(135deg, #f1f5f9 0%, #e8eef5 100%);
    border: 2px solid var(--color-brand-blue, #183075);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    padding: 1.5rem;
    margin: 1.5rem 0;
}

/* SIMPLE LISTS — Clean, minimal, checkmarks only (no left border) */
.feature-list li,
.feature-list-compact li,
.benefit-list li,
.glass-list li {
    background: transparent;
    border: none;
    border-left: none;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
}

/* GRID CARDS — Subtle, clean borders */
.type-col,
.type-card,
.damage-type,
.complexity-item,
.cause-item,
.detail-col {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    padding: 1.25rem;
}

/* Definition lists - simple styling */
.section dl {
    margin-bottom: 1rem;
}

.section dt {
    font-weight: 700;
    color: var(--color-brand-blue, #183075);
    margin-bottom: 0.25rem;
}

.section dd {
    margin-left: 0;
    margin-bottom: 1rem;
    padding-left: 1rem;
    border-left: 2px solid #e2e8f0;
}

/* Specific element card styles */
dt {
    font-weight: 700;
    color: var(--color-brand-blue, #183075);
    margin-bottom: 0.25rem;
}

dd {
    color: var(--color-neutral-700, #374151);
    margin-left: 0;
}

/* Exclude navigation and breadcrumb from card styling */
.nav-list li,
.breadcrumb li,
.breadcrumb ol li,
footer li,
.footer li,
.mega-menu li,
.dropdown-menu li {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-left: none !important;
}

/* Chips and tags - VISIBLE by default (Andy: "If it's on the page, make it visible") */
.area-list-inline li a,
.makes-list-inline li a {
    background: white !important;
    border: 2px solid var(--color-brand-blue, #183075) !important;
    border-left-width: 2px !important;
    box-shadow: 0 2px 4px rgba(24, 48, 117, 0.08) !important;
    padding: 0.5rem 1rem !important;
    color: var(--color-brand-blue, #183075) !important;
    font-weight: 700 !important;
}

/* Generic chips/tags/badges - subtle styling */
.chip,
.tag,
.badge {
    background: var(--color-neutral-50, #f9fafb) !important;
    border: 1px solid var(--border, #e5e7eb) !important;
    box-shadow: none !important;
    padding: 0.5rem 1rem !important;
}

/* NESTED LISTS — Simple, clean, checkmarks only (no left border) */
.type-col li,
.type-card li,
.detail-col li,
.criteria-col li {
    background: transparent;
    border: none;
    border-left: none;
    padding: 0.375rem 0;
    margin-bottom: 0.375rem;
    opacity: 0.9;
}