/**
 * HackRepair.com - Light Theme (Brand Aligned)
 * Overrides default dark theme variables
 */

/* Import Brand Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Slab:wght@300;400;600;700&display=swap');

:root {
    /* Brand Colors (from hackrepair.com) */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-card: #ffffff;

    --text-primary: #333333;
    --text-secondary: #555555;
    --text-muted: #666666;
    --text-dark: #1a1a1a;

    /* Brand Accents */
    --accent-blue: #00b4c8;
    /* HackRepair Cyan */
    --accent-blue-light: #33c3d3;
    --accent-green: #22c55e;
    /* Keep green for success states */
    --accent-green-light: #4ade80;
    --accent-red: #ef4444;
    --accent-amber: #FF9301;
    /* HackRepair Orange Updated */
    --accent-orange: #FF9301;
    /* Exact Orange #FF9301 */

    /* UI Elements */
    --border-light: #e5e7eb;
    --border-medium: #d1d5db;
    --border-accent: rgba(0, 180, 200, 0.2);

    /* Typography Overrides */
    --font-heading: 'Roboto Slab', serif;
    --font-body: 'Roboto', sans-serif;
}

/* Typography Application */
body {
    font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--text-primary);
}

/* Specific Component Overrides for Light Mode */
.urgent-banner {
    background-color: var(--accent-orange);
    color: white;
}

.header {
    background: #ffffff;
    border-bottom: 1px solid var(--border-light);
}

.mobile-menu-btn {
    color: #333;
}

/* Mobile Menu Light Theme Override */
.nav.open {
    background-color: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--border-light);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.logo-name {
    color: #333;
}

/* Logo Accent: Yellow -> Orange */
.logo-accent {
    color: var(--accent-orange);
}

.nav-link {
    color: #333;
    font-weight: 500;
}

/* Nav Hover: Teal -> Orange */
.nav-link:hover {
    color: var(--accent-orange);
}

/* Hero Section High Contrast Overrides */
.hero-overlay {
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.9),
            rgba(255, 255, 255, 0.8),
            #ffffff);
}

.hero h1 {
    color: #1a1a1a;
    text-shadow: none;
}

.hero-description {
    color: #333;
    font-weight: 400;
}

/* Gradient Text ("Expert"): Teal -> Orange */
.gradient-text {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: var(--accent-orange);
    color: var(--accent-orange);
}

/* =========================================
   HERO LAYOUT UPDATE (Desktop Split) 
   ========================================= */
@media (min-width: 1024px) {
    .hero-content .hero-text {
        display: grid;
        grid-template-columns: 2fr 1fr;
        /* 2/3 Text, 1/3 Buttons */
        column-gap: 4rem;
        align-items: start;
        text-align: left;
        max-width: 80rem !important;
        /* Override base style to fill screen (1280px) */
        width: 100%;
        margin-top: -2rem;
        /* Move left column content up 2rem on desktop */
    }

    /* Column 1: Text Content */
    .availability-badge {
        width: auto;
        /* Restore original content-based width */
        justify-self: start;
        /* Prevent stretching to fill column */
    }

    .availability-badge,
    .hero-text h1,
    .hero-description,
    .trust-signals {
        grid-column: 1;
    }

    /* Column 2: Buttons Stack */
    .hero-buttons {
        grid-column: 2;
        grid-row: 1 / span 5;
        /* Force span to cover all text rows */
        flex-direction: column;
        width: 100%;
        /* max-width removed to fill column */
        margin: 0;
        align-self: start;
        margin-top: 4.5rem;
        /* Align Call Jim with top of H1 headline */
        gap: 1.5rem;
    }

    /* Reduce buttons to 70% of the column width */
    .hero-buttons .btn {
        width: 80%;
        max-width: none;
        /* Override any global button limits */
        justify-content: center;
        white-space: nowrap;
        /* Prevent text from wrapping in button */
    }
}

/* Availability Badge: Orange with darker border */
.availability-badge {
    margin-top: 1rem;
    background-color: rgba(255, 147, 1, 0.1);
    border: 2px solid rgba(255, 147, 1, 0.6);
    color: #da1f15;
}

.badge-text {
    font-weight: 600;
    color: #da1f15;
}

/* Trust Signals Position */
.trust-signals {
    margin-top: -0.625rem;
}

/* Scorecard Section - Light Theme Override */
.scorecard-section {
    background-color: #fff9f2;
    /* Very subtle warm orange tint */
    color: var(--text-primary);
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* Section Heading Underline: Teal -> Orange */
.section-header::after,
.underline-accent {
    background-color: var(--accent-orange);
}

.scorecard-section .section-header h2 {
    color: #1a1a1a;
    font-weight: 800;
}

.scorecard-section .section-header p {
    color: #555555;
    font-weight: 500;
}

/* Score Display: Larger/bolder */
.score-display,
.score-percentage,
.percentage {
    color: #1a1a1a;
    font-weight: 900;
}

.score-label,
.rank-label {
    color: #4b5563;
    font-weight: 600;
}

/* Light Theme Row Hover Effect ("Light Up") */
.question-item {
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
    border-radius: 0.75rem;
}

.question-item:hover {
    background-color: rgba(255, 147, 1, 0.03);
    border: 1px solid var(--accent-orange);
    box-shadow: 0 4px 6px -1px rgba(255, 147, 1, 0.1);
    transform: translateY(-1px);
}

/* Expert Answer Text: Darkened */
.question-content p {
    color: #374151;
    font-weight: 500;
}

.question-item:hover .checkbox {
    border-color: var(--accent-orange);
    background-color: white;
}

/* CRITICAL: Checked state in light theme - ensure contrast */
.question-item.checked {
    background-color: rgba(34, 197, 94, 0.15);
    border: 1px solid var(--accent-green);
}

.question-item.checked .question-content h4 {
    color: #166534;
    /* Dark green for contrast on light green bg */
}

.question-item.checked .question-content p {
    color: #15803d;
    /* Medium-dark green */
}

.question-item.checked .checkbox {
    background-color: var(--accent-green);
    border-color: var(--accent-green);
}

.question-item.checked .check-icon {
    color: white;
}

/* Scorecard Checkboxes: Visible border */
.checkbox {
    border: 2px solid #9ca3af;
    background-color: white;
}

.checkbox:hover {
    border-color: var(--accent-orange);
    background-color: rgba(255, 147, 1, 0.05);
}

/* Comparisons Card Override */
.comparison-card h3 {
    color: #1a1a1a;
    font-weight: 700;
}

.comparison-card strong {
    color: #1a1a1a;
    font-weight: 700;
}

.comparison-card p,
.comparison-card li,
.comparison-card li div {
    color: #374151;
}

.comparison-card.bad {
    background-color: #fff5f5;
    /* Light red tint for bad */
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.comparison-card.bad h3,
.comparison-card.bad strong {
    color: #991b1b;
}

.comparison-card.bad .comparison-label {
    color: var(--accent-red);
}

.comparison-card.good {
    background-color: #f6fffa;
    /* Light green tint for good */
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.comparison-card.good h3,
.comparison-card.good strong {
    color: #166534;
}

.comparison-card.good .comparison-label {
    color: var(--accent-green);
}

.comparison-label {
    color: #1a1a1a;
    font-weight: 600;
}

/* Verdict Panel "Liveliness" */
.scorecard-result,
.verdict-panel {
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    border-radius: 1rem;
    padding: 2rem;
    margin-top: 2rem;
}

.verdict-text h5 {
    color: #1a1a1a;
    font-weight: 800;
}

.verdict-text p {
    color: #4b5563;
    font-weight: 500;
}

/* High Contrast Buttons for Verdict */
.btn-success {
    background-color: #16a34a;
    /* Darker Green for white text contrast */
    color: white;
    font-weight: 700;
    box-shadow: 0 4px 6px -1px rgba(22, 163, 74, 0.3);
}

.btn-success:hover {
    background-color: #15803d;
}

/* Card Shadows need to be stronger on light bg */
.diagnosis-card,
.scorecard-card,
.stats-card,
.comparison-card {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-light);
    background-color: #ffffff;
}

/* Input Fields on light bg */
textarea,
input {
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    color: #333;
}

/* Input Focus: Orange instead of Teal */
textarea:focus,
input:focus {
    border-color: var(--accent-orange);
    box-shadow: 0 0 0 2px rgba(255, 147, 1, 0.2);
}

/* Button Refinements */
.btn-glass {
    background-color: transparent;
    border: 2px solid var(--accent-orange);
    color: var(--accent-orange);
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(255, 147, 1, 0.15);
}

.btn-glass:hover {
    background-color: var(--accent-orange);
    color: white;
}

.btn-white {
    background-color: var(--accent-orange);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(204, 115, 0, 0.3);
}

.btn-white:hover {
    background-color: #b36500;
    /* Darker orange */
}

/* Update btn-primary to use new Orange */
.btn-primary {
    background-color: var(--accent-orange);
    color: white;
    border: none;
    box-shadow: 0 4px 6px -1px rgba(255, 147, 1, 0.3);
    /* Shadow matches new orange */
}

.btn-primary:hover {
    background-color: #e68400;
    /* Darker shade of #FF9301 */
}

/* Trustpilot Logo Contrast */
.trustpilot-logo {
    filter: invert(1) brightness(0);
    /* Turns white logo into black */
}

/* Experience Badge Contrast */
.badge-label {
    color: #1a1a1a;
    font-weight: 800;
}

.badge-value {
    color: #333333;
    font-weight: 700;
}

.divider {
    background-color: #cbd5e1;
    /* Darker grey divider */
}

/* Meet Jim / Feature List Contrast & Alignment */
.feature {
    align-items: flex-start !important;
}

.feature-icon {
    margin-top: 0.25rem;
    /* Align icon with top of heading text */
}

/* Fix for "Why Site Owners Trust Jim Walker" heading */
.about-content h2 {
    color: #1a1a1a !important;
}

.feature-text h4 {
    color: #1a1a1a !important;
    font-weight: 800 !important;
}

.feature-text p {
    color: #4b5563;
    font-weight: 500;
}

/* Footer specific */
.footer-section {
    background-color: #f8fafc;
    border-top: 1px solid var(--border-light);
    color: #333;
}

/* Contact name must be dark on light footer */
.footer-section .contact-name {
    color: #1a1a1a;
}

/* Footer Heading Contrast Fix */
.footer-section .footer-heading h4 {
    color: #1a1a1a;
    background: linear-gradient(135deg, #ff9301, #ff6b00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Footer Social Links: Orange instead of Teal */
.footer-section .social-links a {
    color: #ff9301;
}

.footer-section .social-links a:hover {
    color: #ff6b00;
}

/* Diagnostics Contrast Fixes */
.diagnosis-content h2 {
    color: #1a1a1a;
}

.diagnosis-intro {
    color: #333333;
    font-weight: 500;
}

/* Diagnosis Quote: Darker text */
.diagnosis-disclaimer,
.diagnosis-note {
    color: #4b5563;
    font-weight: 500;
}

.diagnosis-card textarea::placeholder {
    color: #555555;
    opacity: 1;
}

/* CTA Section: Heading Contrast Fix */
.cta-section h2 {
    color: #1a1a1a;
    background: linear-gradient(135deg, #ff9301, #ff6b00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* CTA Buttons: Equal Height */
.cta-buttons {
    align-items: stretch;
}

.cta-buttons .btn {
    display: flex;
    align-items: center;
    justify-content: center;
}