/* ╔══════════════════════════════════════════════════════════════════════════════╗
   ║   LAYOUT-FIXES.CSS — Andy Crestodina Presentation Standards                  ║
   ║   Fixes orphaned classes + adds missing visual hierarchy                     ║
   ║   Version: 1.0                                                               ║
   ╚══════════════════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════════════════════════════
   1. ANSWER LEAD — Key callout at start of content sections
   Andy: "Be specific. Lead with the answer."
   ═══════════════════════════════════════════════════════════════════════════════ */
.answer-lead {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--color-neutral-800);
    margin-bottom: var(--space-6);
    padding-left: var(--space-4);
    border-left: 4px solid var(--color-brand-blue);
    background: linear-gradient(to right, rgba(10, 58, 94, 0.03), transparent);
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.answer-lead strong {
    color: var(--color-brand-blue-dark);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   2. MID-PAGE CTA — Conversion point within content flow
   Andy: "CTAs must be specific and visually distinct."
   ═══════════════════════════════════════════════════════════════════════════════ */
.mid-page-cta {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border: 2px solid var(--color-brand-blue);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-8);
    margin: var(--space-10) auto;
    max-width: 700px;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 15px rgba(10, 58, 94, 0.1);
}

.mid-page-cta p {
    margin-bottom: var(--space-4);
    font-size: 1.05rem;
    color: var(--color-brand-blue-dark);
}

.mid-page-cta .btn,
.mid-page-cta .btn-phone {
    margin-top: var(--space-2);
    background: var(--color-brand-blue, #183075);
    color: white !important;
    border: 2px solid var(--color-brand-blue, #183075);
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.mid-page-cta .btn:hover,
.mid-page-cta .btn-phone:hover {
    background: var(--color-brand-blue-dark, #0f1e4a);
    border-color: var(--color-brand-blue-dark, #0f1e4a);
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(24, 48, 117, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   3. ADAS SUMMARY BOX — Safety-critical warning callout
   Andy: "Evidence reduces risk perception."
   ═══════════════════════════════════════════════════════════════════════════════ */
.adas-summary-box {
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    border: 2px solid #F59E0B;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin: var(--space-8) 0;
    position: relative;
}

.adas-summary-box::before {
    content: "⚠";
    position: absolute;
    top: -14px;
    left: var(--space-4);
    background: #F59E0B;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.adas-summary-box .box-heading {
    display: block;
    font-size: 1.15rem;
    color: #92400E;
    margin-bottom: var(--space-3);
}

.adas-summary-box p {
    color: #78350F;
    margin-bottom: var(--space-3);
}

.adas-summary-box p:last-child {
    margin-bottom: 0;
}

.adas-summary-box a {
    color: #B45309;
    font-weight: 600;
}

.adas-summary-box a:hover {
    color: #92400E;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   4. VEHICLE LIST INLINE — Horizontal scrollable brand links
   Andy: "Internal links are votes you control."
   ═══════════════════════════════════════════════════════════════════════════════ */
.vehicle-list-inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    list-style: none;
    padding: 0;
    margin: var(--space-6) 0;
    justify-content: center;
}

.vehicle-list-inline li {
    margin: 0;
}

.vehicle-list-inline li a {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: white;
    border: 2px solid var(--color-brand-blue, #183075);
    border-radius: var(--radius-full);
    color: var(--color-brand-blue, #183075);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(24, 48, 117, 0.1);
}

.vehicle-list-inline li a:hover {
    background: var(--color-brand-blue, #183075);
    border-color: var(--color-brand-blue, #183075);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(24, 48, 117, 0.25);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   5. CRITERIA NOTE — Assessment disclaimer/note
   ═══════════════════════════════════════════════════════════════════════════════ */
.criteria-note {
    font-size: 0.95rem;
    color: var(--color-neutral-600);
    background: var(--color-neutral-50);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    margin-top: var(--space-6);
    text-align: center;
    border: 1px dashed var(--color-neutral-300);
}

.criteria-note strong {
    color: var(--color-brand-blue);
}

.criteria-note a {
    color: var(--color-brand-red);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   6. SOCIAL PROOF ROW — Trust signals after hero
   Andy: "Social proof immediately after hero builds trust before asking attention."
   ═══════════════════════════════════════════════════════════════════════════════ */
.proof-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-6);
    padding: var(--space-5) var(--space-4);
    background: white;
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-8);
}

.proof-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.9rem;
    color: var(--color-neutral-700);
}

.proof-item svg {
    flex-shrink: 0;
}

.proof-stars {
    display: flex;
    gap: 2px;
}

.proof-stars svg {
    width: 16px;
    height: 16px;
    fill: #FFC107;
}

.proof-rating {
    font-weight: 700;
    color: var(--color-brand-blue-dark);
}

.proof-divider {
    width: 1px;
    height: 24px;
    background: var(--color-neutral-200);
}

.proof-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: var(--color-neutral-50);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-neutral-600);
}

.proof-badge svg {
    color: var(--color-success);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   7. TESTIMONIAL CARDS — Service page social proof
   Andy: "Testimonials with names/photos = credibility"
   ═══════════════════════════════════════════════════════════════════════════════ */
.section-testimonials {
    padding: var(--space-12) 0;
    background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    max-width: 1000px;
    margin: 0 auto;
}

.testimonial-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border);
    position: relative;
}

.testimonial-card::before {
    content: """;
    position: absolute;
    top: var(--space-4);
    left: var(--space-5);
    font-size: 4rem;
    line-height: 1;
    color: var(--color-brand-blue);
    opacity: 0.15;
    font-family: Georgia, serif;
}

.testimonial-card blockquote {
    margin: 0;
    padding: 0;
}

.testimonial-card p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-neutral-700);
    margin-bottom: var(--space-4);
    position: relative;
    z-index: 1;
}

.testimonial-card cite {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-style: normal;
    font-size: 0.9rem;
}

.testimonial-card cite strong {
    color: var(--color-brand-blue-dark);
}

.testimonial-card cite span {
    color: var(--color-neutral-500);
}

.testimonial-stars {
    display: flex;
    gap: 2px;
    margin-bottom: var(--space-3);
}

.testimonial-stars svg {
    width: 14px;
    height: 14px;
    fill: #FFC107;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   8. IMAGE PLACEHOLDER — Visual content markers
   Andy: "Visual breaks every 300-400 words"
   ═══════════════════════════════════════════════════════════════════════════════ */
.image-placeholder {
    background: linear-gradient(135deg, var(--color-neutral-100) 0%, var(--color-neutral-200) 100%);
    border: 2px dashed var(--color-neutral-300);
    border-radius: var(--radius-lg);
    padding: var(--space-12) var(--space-6);
    text-align: center;
    margin: var(--space-8) 0;
    color: var(--color-neutral-500);
    font-style: italic;
}

.image-placeholder::before {
    content: "📷";
    display: block;
    font-size: 2rem;
    margin-bottom: var(--space-2);
}

/* Hero with image split layout */
.hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
    text-align: left;
}

.hero-split .hero-content {
    order: 1;
}

.hero-split .hero-image {
    order: 2;
}

.hero-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .hero-split {
        grid-template-columns: 1fr;
    }

    .hero-split .hero-image {
        order: 1;
    }

    .hero-split .hero-content {
        order: 2;
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   9. SECTION DIVIDERS — Clear visual breaks between sections
   Andy: "Users should understand where they are within 3 seconds."
   ═══════════════════════════════════════════════════════════════════════════════ */
.section-accent {
    background: linear-gradient(135deg, var(--color-brand-blue) 0%, #1a2a4e 100%);
    color: white;
}

.section-accent h2 {
    color: white;
}

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

.section-light {
    background: white;
}

.section-subtle {
    background: #F8FAFC;
}

.section-divider {
    height: 4px;
    background: linear-gradient(to right, var(--color-brand-blue), var(--color-brand-red));
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   10. PROCESS PHASE GROUPS
   Andy: "Group related items to reduce cognitive load."
   ═══════════════════════════════════════════════════════════════════════════════ */
.process-phase {
    margin-bottom: var(--space-10);
}

.process-phase-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-neutral-500);
    margin-bottom: var(--space-6);
}

.process-phase-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-neutral-200);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   11. FAQ IMPROVEMENTS — Visual separation between items
   ═══════════════════════════════════════════════════════════════════════════════ */
.faq-list .faq-item {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    transition: box-shadow 0.2s ease;
}

.faq-list .faq-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.faq-list .faq-item h3 {
    color: var(--color-brand-blue);
    font-size: 1.1rem;
    margin-bottom: var(--space-3);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.faq-list .faq-item h3::before {
    content: "Q";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--color-brand-blue);
    color: white;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.faq-list .faq-item p {
    padding-left: var(--space-10);
    color: var(--color-neutral-700);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   12. COMPARISON TABLE — vs Competitor styling
   Andy: "What makes you different = differentiator section"
   ═══════════════════════════════════════════════════════════════════════════════ */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-6) 0;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.comparison-table th,
.comparison-table td {
    padding: var(--space-4);
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.comparison-table th {
    background: var(--color-brand-blue);
    color: white;
    font-weight: 700;
}

.comparison-table th:first-child {
    text-align: left;
    background: #1a2a4e;
}

.comparison-table td:first-child {
    text-align: left;
    font-weight: 600;
    color: var(--color-neutral-700);
}

.comparison-table tr:last-child td {
    border-bottom: none;
}

.comparison-table tr:nth-child(even) {
    background: var(--color-neutral-50);
}

.comparison-check {
    color: var(--color-success);
    font-size: 1.2rem;
}

.comparison-x {
    color: var(--color-danger);
    font-size: 1.2rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   13. ALIGNMENT STANDARDIZATION
   Andy: "Cognitive fluency = trust"
   ═══════════════════════════════════════════════════════════════════════════════ */

/* All section content left-aligned except hero/cta */
.section:not(.section-hero):not(.section-cta) .container > p,
.section:not(.section-hero):not(.section-cta) .container > ul,
.section:not(.section-hero):not(.section-cta) .container > ol {
    max-width: 75ch;
}

/* Ensure consistent h3 alignment */
.section h3 {
    text-align: left;
    font-size: 1.25rem;
    color: var(--color-brand-blue-dark);
    margin: var(--space-6) 0 var(--space-3);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   14. NAV ALIGNMENT FIX
   Ensures all nav items align consistently regardless of dropdown toggle presence
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Force consistent baseline alignment for all nav items */
.nav-list {
    align-items: stretch;
}

.nav-item {
    align-items: center;
}

/* Ensure nav links have consistent height across all items */
.nav-item .nav-link {
    display: flex;
    align-items: center;
    min-height: 44px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   15. HERO TEXT CONTRAST FIX
   Ensures strong/bold text in hero sections is visible on dark backgrounds
   Overrides brand-accents.css "p strong" blue color rule for dark hero contexts
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Strong text in hero lead paragraphs should be white on dark backgrounds */
.section-hero .hero-lead strong,
.section-hero p strong,
.hero--compact-form .hero-lead strong,
.hero--bg-urban .hero-lead strong,
.hero--location-metro .hero-lead strong {
    color: #ffffff !important;
    font-weight: 700;
}

/* Ensure all hero text elements have proper contrast */
.section-hero .hero-lead,
.section-hero .hero-lead strong,
.section-hero .hero-lead b {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Red accent for strong text on homepage only (as originally intended) */
#homepage .section-hero .hero-lead strong,
#homepage .hero-lead strong {
    color: var(--color-brand-red, #EC1C24) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   16. BRAND CARD HEADER SPACING FIX
   Ensures brand name and ADAS badge display on separate lines with proper spacing
   ═══════════════════════════════════════════════════════════════════════════════ */

.brand-card .card-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
}

.brand-card .card-header .brand-name {
    display: block;
    font-size: 1.25rem;
    color: var(--color-brand-blue-dark, #0f1e4a);
}

.brand-card .card-header .adas-badge {
    display: block;
    font-size: 0.875rem;
    color: var(--color-brand-red, #EC1C24);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   17. GREEN INSURANCE BOX CONTRAST FIX
   Ensures text is readable on green background boxes
   ═══════════════════════════════════════════════════════════════════════════════ */

.insurance-highlight,
.insurance-highlight h3,
.insurance-highlight p,
.insurance-highlight strong {
    color: #ffffff !important;
}

.insurance-highlight a {
    color: #ffffff !important;
    text-decoration: underline;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   18. REMOVE AUTO-HIGHLIGHT ON SCROLL/TARGET
   Prevents yellow highlighting when navigating to anchored sections
   ═══════════════════════════════════════════════════════════════════════════════ */

.brand-card:target,
.brand-card-primary:target,
section:target,
[id]:target {
    background-color: inherit !important;
    outline: none !important;
    animation: none !important;
}

/* Remove any scroll-triggered highlight animations */
@keyframes highlight-fade {
    from { background-color: inherit; }
    to { background-color: inherit; }
}

/* ═══════════════════════════════════════════════════════════
   SMS "Text Us a Photo" CTA — Added 2026-03-05
   ═══════════════════════════════════════════════════════════ */
.btn-text-us {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #10b981;
    color: white;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    transition: background 0.2s;
    white-space: nowrap;
}
.btn-text-us:hover {
    background: #059669;
    color: white;
}
.btn-text-us svg {
    flex-shrink: 0;
}

/* Mobile Drawer SMS CTA */
.drawer-sms-cta {
    display: block;
    padding: 16px;
    background: #10b981;
    color: white;
    text-align: center;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    margin: 8px 16px;
}
.drawer-sms-cta:hover {
    background: #059669;
    color: white;
}
.drawer-sms-sub {
    text-align: center;
    font-size: 0.85rem;
    color: #64748b;
    margin: 4px 16px 8px;
}

/* Landing page (get-quote) SMS button */
.lp-header .btn-text-us {
    padding: 6px 12px;
    font-size: 0.8rem;
}

/* ═══════════════════════════════════════════════════════════
   Inline Quote CTA (replaces scattered inline forms)
   Added 2026-03-05 — Phase 2 form unification
   ═══════════════════════════════════════════════════════════ */
.inline-quote-cta {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: var(--surface-secondary, #f8fafc);
    border-radius: 12px;
    margin: 2rem 0;
    border: 1px solid rgba(0,0,0,0.06);
}
.inline-quote-cta h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary, #0f172a);
}
.inline-quote-cta p {
    color: var(--text-secondary, #475569);
    margin-bottom: 1rem;
}
.inline-quote-cta .cta-or {
    margin: 0.75rem 0;
    color: #94a3b8;
    font-size: 0.875rem;
}
.inline-quote-cta .btn-large {
    padding: 14px 32px;
    font-size: 1.1rem;
}
.inline-quote-cta .btn-text-us.btn-large {
    display: inline-flex;
    padding: 12px 24px;
    font-size: 1rem;
}