/* 
 * Michael Manfredi for Supreme Court Judge
 * Premium Campaign Theme (Black & Gold Edition)
 * Rebuilt for Stability & Performance
 */

:root {
    /* Color Palette - Light Theme */
    --primary-color: #012b15;
    /* Deepest Green */
    --secondary-color: #b89628;
    /* Darker Gold for Text Contrast */
    --secondary-color-bright: #D4AF37;
    /* Original Gold for backgrounds */

    /* Mapping old vars to new theme */
    --text-color-light: #013b1e;
    /* Main Body Text: Deep Forest Green */
    --text-color-muted: #555555;

    --bg-dark: #ffffff;
    /* Main Background: White */
    --bg-card: #f8fbfa;
    /* Lightest Mint/White */

    --accent-color: #012b15;
    /* Headings/Accents: Deep Green */

    /* Typography */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Montserrat', sans-serif;
    --font-script: 'Montserrat', sans-serif;

    /* Layout */
    --container-width: 1200px;
    --header-height: 90px;
    --transition: all 0.3s ease;
}

/* --- Reset & Base Styles --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--text-color-light);
    background-color: var(--bg-dark);
    line-height: 1.8;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

/* --- Container & Grid System --- */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
}

/* Grid Helper for Split Sections (Desktop) */
.split-layout,
.hero-container,
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    /* 64px */
    align-items: center;
}

/* --- Typography --- */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--primary-color);
    /* Headings to Deep Green for readability */
    margin-bottom: 1rem;
    font-weight: 700;
}

h1 {
    font-size: 3.5rem;
    line-height: 1.1;
}

h2 {
    font-size: 2.5rem;
}

h3 {
    font-size: 1.5rem;
}

p {
    margin-bottom: 1.5rem;
}

/* --- Buttons --- */
.btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    background-color: var(--secondary-color);
    color: var(--bg-dark);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 2px solid var(--secondary-color);
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.9rem;
    border-radius: 4px;
    text-align: center;
}

.btn:hover {
    background-color: transparent;
    color: var(--secondary-color);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
    /* Gold Glow */
}

.btn-outline {
    background-color: transparent;
    color: var(--secondary-color);
    border: 2px solid var(--secondary-color);
}

.btn-outline:hover {
    background-color: var(--secondary-color);
    color: var(--bg-dark);
}

.btn-sm {
    padding: 0.5rem 1.5rem;
    font-size: 0.8rem;
}

.btn-block {
    width: 100%;
    display: block;
}

/* --- Header & Navigation --- */
header {
    background-color: rgba(255, 255, 255, 0.98);
    /* White Header */
    height: var(--header-height);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(184, 150, 40, 0.2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.logo span {
    font-family: var(--font-script);
    color: var(--secondary-color);
    text-transform: uppercase;
    /* Changed to Uppercase */
    font-size: 1.1rem;
    /* Adjusted size for non-script */
    letter-spacing: 2px;
    /* Added tracking */
    margin-left: 0.8rem;
    font-weight: 600;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-links a {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent-color);
}

.nav-links a:hover {
    color: var(--secondary-color);
}

.mobile-menu-btn {
    display: none;
    font-size: 1.5rem;
    color: var(--secondary-color);
    cursor: pointer;
}

/* --- Hero Section --- */
#hero {
    min-height: 90vh;
    /* Viewport Height */
    background-color: var(--bg-dark);
    padding-top: var(--header-height);
    /* Account for fixed header */
    display: flex;
    align-items: center;
}

/* Using .split-layout class from Grid Helper */


.hero-text h2 {
    font-family: var(--font-script);
    font-size: 1.5rem;
    /* Reduced from 3rem */
    color: var(--secondary-color);
    /* Darker Gold */
    text-transform: uppercase;
    /* Uppercase */
    margin-bottom: 1rem;
    letter-spacing: 3px;
    /* Added tracking */
    font-weight: 600;
}

/* --- Content & Typography Polish --- */
.content-block {
    max-width: 900px;
    margin: 0 auto;
}

/* Bio Row Layout (Resume Style) */
.bio-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    /* Reduced width */
    gap: 30px;
    /* Reduced gap */
    padding: 60px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.bio-row:last-child {
    border-bottom: none;
}

.bio-header {
    text-align: right;
}

.bio-header h3 {
    font-size: 1.5rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

.bio-header i {
    font-size: 2rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
    display: block;
}

.bio-content p {
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
    color: var(--text-color-light);
    /* Fixed contrast */
    text-align: left;
    /* Reset justify for this layout */
}

/* Custom List Styles */
.custom-list {
    list-style: none;
    padding-left: 0;
}

.custom-list li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
    font-size: 1.05rem;
    color: var(--text-color-light);
    /* Fixed contrast */
}

.custom-list li i {
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--secondary-color);
}

/* Spacing Utilities */
.spacer-lg {
    height: 60px;
}

.spacer-md {
    height: 40px;
}

/* Personal Section Highlight */
.personal-highlight {
    background-color: rgba(255, 255, 255, 0.05);
    /* Transparent for dark mode */
    padding: 30px;
    border-left: 4px solid var(--secondary-color);
    margin-top: 10px;
}

.personal-grid {
    display: flex;
    gap: 30px;
    align-items: center;
}

.personal-text {
    flex: 1;
}

.personal-img {
    flex: 0 0 50%;
    /* Image takes 50% width */
}

/* Responsive override for split layout in About */
@media (max-width: 900px) {
    .bio-row {
        grid-template-columns: 1fr;
        gap: 30px;
        /* Reduced gap */
        text-align: left;
        padding: 40px 0;
    }

    .personal-grid {
        flex-direction: column-reverse;
        /* Image on top or bottom? Let's put text top for readability or image top for visual? Flow usually Text then Image for bio details. But Image Top is nice. Let's do Standard Stack: Image First? No, Text First is safer for flow. Column Reverse = Image Last. */
    }

    .personal-img {
        width: 100%;
    }

    .bio-header {
        text-align: left;
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .bio-header i {
        margin-bottom: 0;
        font-size: 1.5rem;
    }

    .bio-header h3 {
        margin-bottom: 0;
        font-size: 1.3rem;
    }
}

.hero-text h1 {
    color: var(--accent-color);
    font-size: 4rem;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero-text p {
    font-size: 1.25rem;
    opacity: 0.9;
    max-width: 600px;
}

.hero-btns {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.hero-image img {
    border: 3px solid var(--secondary-color);
    box-shadow: 20px 20px 0 rgba(212, 175, 55, 0.15);
    border-radius: 4px;
}

/* --- Sections Common --- */
section {
    padding: 6rem 0;
}

.section-title {
    text-align: center;
    margin-bottom: 4rem;
}

.section-title h2 {
    font-size: 2.8rem;
    margin-bottom: 1rem;
}

.section-title .line {
    width: 80px;
    height: 4px;
    background-color: var(--secondary-color);
    margin: 0 auto;
}

/* --- About Section (Transparent BG) --- */
#about {
    background-color: transparent;
    color: var(--text-color-light);
}

#about h2 {
    color: var(--primary-color);
}

#about h4 {
    color: var(--accent-color);
}

.lead {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 2rem;
}

.about-subsections {
    display: grid;
    gap: 2rem;
    margin-top: 2rem;
}

.subsection h4 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.subsection i {
    color: var(--secondary-color);
    font-size: 1.1rem;
}

/* --- Priorities Section (Dark BG) --- */
#priorities {
    background-color: #f0f5f2;
    /* Light Gray-Green */
    color: var(--text-color-light);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 Columns */
    gap: 2rem;
}

.card {
    background-color: #ffffff;
    padding: 2.5rem 2rem;
    border: 1px solid #e0e0e0;
    text-align: center;
    border-radius: 4px;
    transition: var(--transition);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

.card:hover {
    transform: translateY(-8px);
    border-color: var(--secondary-color);
}

.card-icon {
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 1.5rem;
}

.card h3 {
    color: var(--accent-color);
    margin-bottom: 1rem;
}

.card p {
    font-size: 0.95rem;
    opacity: 0.8;
}

/* --- Endorsements (White BG) --- */
#endorsements {
    background-color: var(--bg-light);
    color: var(--text-color-dark);
    text-align: center;
}

#endorsements .section-title h2 {
    color: var(--primary-color);
}

.quote {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-style: italic;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.author {
    font-weight: 600;
    color: var(--secondary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Volunteer (Gold BG) --- */
#volunteer {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

#volunteer .section-title h2,
#volunteer .section-title p {
    color: var(--primary-color);
}

#volunteer .line {
    background-color: var(--primary-color);
}

/* Volunteer Form Button Fix - High Contrast */
#volunteer .btn {
    background-color: var(--accent-color);
    /* Dark Green Button */
    color: #ffffff;
    border-color: var(--accent-color);
}

#volunteer .btn:hover {
    background-color: transparent;
    color: var(--primary-color);
    /* Dark Text on Gold */
    border-color: var(--primary-color);
}

.form-container {
    background-color: #ffffff;
    /* Explicit White */
    padding: 3rem;
    max-width: 700px;
    margin: 0 auto;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--bg-dark);
    /* Dark Text for Labels */
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid #ddd;
    font-family: var(--font-body);
    font-size: 1rem;
    background-color: #f9f9f9;
    transition: var(--transition);
    color: #333;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--secondary-color);
    background-color: #ffffff;
}

/* --- Donate Section (Dark BG) --- */
#donate {
    background-color: var(--bg-dark);
    color: var(--text-color-light);
    text-align: center;
    border-top: 1px solid #eee;
}

.donate-options {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.donate-amount {
    width: 100px;
    padding: 1rem 0;
    border: 1px solid #444;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
}

.donate-amount:hover,
.donate-amount.active {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    border-color: var(--secondary-color);
}

/* --- Footer --- */
footer {
    background-color: #011409;
    /* Keep Dark Footer */
    color: #f5f5f5;
    /* Force Light Text */
    padding: 4rem 0 2rem;
    text-align: center;
    border-top: 4px solid var(--secondary-color);
}

.footer-logo {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--secondary-color);
    margin-bottom: 2rem;
}

.social-links a {
    color: var(--accent-color);
    font-size: 1.2rem;
    margin: 0 1rem;
    opacity: 0.6;
}

.social-links a:hover {
    color: var(--secondary-color);
    opacity: 1;
}

.disclaimer,
.copyright {
    font-size: 0.8rem;
    opacity: 0.5;
    margin-top: 2rem;
    display: block;
}

.disclaimer {
    border: 1px solid #333;
    display: inline-block;
    padding: 0.5rem 1rem;
}

/* --- Animations --- */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Responsive Media Queries --- */
@media (max-width: 900px) {

    /* Collapse Grids to Single Column */
    .split-layout,
    .card-grid,
    .hero-container,
    .about-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .hero-container {
        display: flex;
        /* Override grid for Flex ordering if needed, or just keep grid and assume DOM order is fine (Text, Image) */
        flex-direction: column;
    }

    /* Since we switched Hero, About to use .split-layout helper OR their own Grid/Flex, let's target them specifically if ID-based */

    /* Hero: Ensure Text is on Top */
    /* Note: In Grid, DOM order dictates unless 'order' used. Index.html: Text div, then Image div. Perfect. */

    #hero {
        padding-top: calc(var(--header-height) + 2rem);
        text-align: center;
        height: auto;
    }

    .hero-text h1 {
        font-size: 2.8rem;
    }

    .hero-btns {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* About: Image on Bottom for Grid? 
       Index.html: Image div, then Text div. 
       Grid 1fr -> Image Top, Text Bottom. 
       Usually on mobile text first is better. */
    #about .split-layout,
    .about-grid {
        /* Explicit targeting */
        display: flex;
        flex-direction: column-reverse;
        /* Text Top */
    }

    /* Cards */
    .card-grid {
        grid-template-columns: 1fr;
    }

    /* Nav */
    .nav-links {
        display: none;
        /* Hide Desktop Menu */
        /* JS Toggle logic usually handles 'active' class */
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        background-color: var(--bg-dark);
        flex-direction: column;
        padding: 2rem;
        gap: 1.5rem;
        border-bottom: 2px solid var(--secondary-color);
    }

    .nav-links.active {
        display: flex;
    }

    .mobile-menu-btn {
        display: block;
    }
}
/* Mobile/Desktop Visibility Toggles */
.mobile-only-btn {
    display: none !important;
}

.desktop-only-btn {
    /* desktop styles handled by inline or default */
}

@media (max-width: 900px) {
    .mobile-only-btn {
        display: block !important;
    }

    .desktop-only-btn {
        display: none !important;
    }
}