/* --- Global Resets & Typography --- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
}

:root {
    --navy: #1B2A41;
    --gold: #C5A059;
    --gold-hover: #b08d4b;
    --cream: #F9F7F2;
    --text-dark: #333333;
    --text-light: rgba(255, 255, 255, 0.8);
}

body {
    font-family: 'Nunito', sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    background-color: var(--cream); /* Warm foundation */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Varela Round', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    color: var(--navy); /* Headings are now Navy */
}

a { text-decoration: none; color: inherit; transition: all 0.2s; }
img { max-width: 100%; height: auto; display: block; }
.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-white { color: white; }
.text-gold { color: var(--gold); }
.text-navy { color: var(--navy); }

/* --- Navigation --- */
#mainNav {
    position: fixed;
    top: 0; width: 100%;
    z-index: 1000;
    padding: 1rem 0;
    transition: background 0.3s, padding 0.3s;
    background: var(--navy); /* Solid Navy on mobile */
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
    flex-wrap: wrap;
}

.nav-brand { 
    color: var(--gold); /* Gold Brand Name */
    font-weight: 700; 
    font-size: 1.1rem; 
    letter-spacing: 0.05rem;
}

.nav-toggle {
    display: none; 
    background: none; 
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 0.5rem;
    cursor: pointer;
    font-size: 0.8rem;
    text-transform: uppercase;
    border-radius: 3px;
}

.nav-links { list-style: none; display: flex; gap: 15px; }
.nav-links a {
    color: white;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    font-weight: 600;
}
.nav-links a:hover { color: var(--gold); }

/* Desktop Transparent Nav logic */
@media (min-width: 768px) {
    #mainNav { background: linear-gradient(to bottom, rgba(27, 42, 65, 0.9) 0%, rgba(27, 42, 65, 0) 100%); padding: 25px 0; border-bottom: none; }
    #mainNav.navbar-shrink { background: var(--navy); padding: 15px 0; border-bottom: 1px solid #333; }
    .nav-toggle { display: none; }
}

/* Mobile Nav Logic */
@media (max-width: 767px) {
    .nav-toggle { display: block; }
    .nav-links {
        display: none;
        width: 100%;
        flex-direction: column;
        text-align: center;
        padding-top: 1rem;
        background: var(--navy);
    }
    .nav-links.active { display: flex; }
    .nav-links a { padding: 10px 0; display: block; border-top: 1px solid rgba(255,255,255,0.05); }
}

/* --- Masthead / Hero --- */
.masthead {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    /* UPDATED: Now pointing to .webp */
    background: linear-gradient(to bottom, rgba(27, 42, 65, 0.4) 0%, rgba(27, 42, 65, 0.6) 75%, var(--navy) 100%), url("img/beth-standing-in-courtroom.webp");
    background-position: center top; 
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.masthead h1 {
    font-size: 2.5rem; 
    line-height: 1.2;
    color: white;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.sub-heading { 
    color: var(--gold); 
    font-size: 1.2rem; 
    margin-bottom: 3rem; 
    font-weight: 700;
    letter-spacing: 0.2rem;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.8);
}

.btn-primary {
    background-color: var(--gold);
    border: 2px solid var(--gold);
    padding: 1rem 2.5rem;
    color: white;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.15rem;
    border-radius: 4px;
    font-weight: 700;
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--gold);
}

@media (min-width: 992px) {
    .masthead h1 { font-size: 5rem; }
    .sub-heading { font-size: 1.5rem; }
}

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

.about-section {
    background: white;
    color: var(--text-dark);
}

.section-title { 
    font-weight: bold; 
    color: var(--navy);
    margin-bottom: 0.5rem; 
    margin-top: 2rem; 
    font-size: 1.1rem;
    border-bottom: 2px solid var(--gold);
    display: inline-block;
}

.highlight-text { 
    margin-top: 3rem; 
    font-style: italic; 
    text-align: center; 
    font-size: 1.25rem;
    color: var(--navy);
    font-weight: bold;
}

/* --- Projects / Grid System --- */
.projects-section { background: var(--cream); padding: 8rem 0; }
.mb-large { margin-bottom: 3rem; }
.row { display: flex; flex-wrap: wrap; }
.align-center { align-items: center; }

/* 60/40 Split for Intro */
.col-image { width: 100%; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.col-text { width: 100%; padding: 2rem; }
.col-text h4 { color: var(--navy); margin-bottom: 1rem; }
.col-text p { color: #555; }

@media (min-width: 992px) {
    .col-image { width: 60%; }
    .col-text { width: 40%; padding-left: 3rem; }
}

/* 50/50 Split for Tiles */
.no-gutters { margin: 0; }
.col-half { width: 100%; }
.content-center { display: flex; align-items: center; justify-content: center; padding: 3rem; }
.bg-navy { background-color: var(--navy); }

.tile-text h4 { color: var(--gold); margin-bottom: 1rem; }
.tile-text p { color: rgba(255,255,255,0.7); }

@media (min-width: 992px) {
    .col-half { width: 50%; }
    .reverse-mobile { flex-direction: row; } 
    .order-first { order: -1; } 
}

/* --- Contact Section --- */
.contact-section { background-color: #151515; color: white; } /* Keep footer dark grey */

.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 3rem;
}
@media (min-width: 768px) {
    .card-grid { grid-template-columns: repeat(3, 1fr); }
}

.contact-card {
    background: #222;
    padding: 3rem 2rem;
    text-align: center;
    border-top: 3px solid var(--gold); /* Gold accent on top */
}

.contact-card i { font-size: 2rem; margin-bottom: 1rem; color: var(--gold); }
.contact-card h4 { font-size: 0.9rem; margin-bottom: 1rem; color: white; }
.contact-card hr { border: 0; border-top: 1px solid #444; margin: 1.5rem 0; }
.contact-card a { color: rgba(255,255,255,0.6); font-size: 0.9rem; }
.contact-card a:hover { color: var(--gold); }

.social-icons { text-align: center; }
.social-icons i { color: white; font-size: 2rem; transition: color 0.3s; }
.social-icons i:hover { color: var(--gold); }

/* --- Footer --- */
.footer { 
    background-color: #000; 
    color: rgba(255,255,255,0.4); 
    text-align: center; 
    padding: 3rem 0; 
    font-size: 0.8rem; 
}
.small { font-style: italic; margin-top: 10px; }
.small a { color: #666; text-decoration: underline; }

/* --- Language Toggle Logic (CORRECTED) --- */

/* 1. By default, hide Spanish */
.lang-es {
    display: none;
}

/* 2. When 'spanish-view' is active, hide English */
body.spanish-view .lang-en {
    display: none !important;
}

/* 3. When 'spanish-view' is active, show Spanish */
/* IMPORTANT: We separate DIVs (blocks) from SPANs (inline text) */

/* For big sections (bios, divs), show as block */
body.spanish-view div.lang-es {
    display: block !important;
}

/* For headlines, buttons, and list items, show as inline */
body.spanish-view span.lang-es {
    display: inline !important; 
}

/* 4. Fix for the Button Layout */
/* Ensures the button holds its shape regardless of content */
.btn-primary {
    display: inline-block; /* Added to prevent collapsing */
    white-space: nowrap;   /* Keeps text on one line if possible */
}

/* Optional: Make the toggle link look active */
.nav-links a.active-lang {
    color: white;
    border-bottom: 2px solid var(--gold);
}

/* --- Language Button (Always Visible) --- */
.lang-btn {
    color: var(--gold);
    border: 1px solid var(--gold);
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-right: 15px; /* Spacing between Lang button and Menu button on mobile */
    transition: all 0.3s;
}

.lang-btn:hover {
    background-color: var(--gold);
    color: white;
}

/* --- Navigation Layout Adjustments --- */
.nav-container {
    display: flex;
    align-items: center;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
    flex-wrap: wrap; /* Allows mobile menu to drop to next line */
}

.nav-brand { 
    margin-right: auto; /* This pushes the buttons/links to the far right */
    color: var(--gold); 
    font-weight: 700; 
    font-size: 1.1rem; 
    letter-spacing: 0.05rem;
}

/* Desktop Specific Layout */
@media (min-width: 768px) {
    .lang-btn {
        margin-right: 0;
        margin-left: 15px; /* Add space between Links and Button */
        order: 2; /* Forces button to be the very last item on the right */
    }
    
    .nav-links {
        order: 1; /* Keeps links in the middle */
    }
}

/* For big sections and paragraphs, show as block */
body.spanish-view div.lang-es,
body.spanish-view p.lang-es {
    display: block !important;
}

/* --- Testimonials Section --- */
.testimonial-card {
    background: white;
    padding: 2rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 4px;
    border-left: 5px solid var(--gold); /* Gold accent line */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonial-text {
    font-style: italic;
    color: #555;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.client-name {
    font-weight: 700;
    color: var(--navy);
    text-transform: uppercase;
    font-size: 0.9rem;
}

/* --- Compact Contact Form Styles --- */
.contact-card form {
    text-align: left;
    width: 100%;
    margin-top: 1rem;
}

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

.form-control {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    font-family: inherit;
    background-color: #f9f9f9; /* Slight contrast against dark card */
    color: #333;
}

.form-control:focus {
    border-color: var(--gold);
    outline: none;
    box-shadow: 0 0 5px rgba(201, 161, 91, 0.3);
    background-color: #fff;
}

.btn-submit {
    width: 100%;
    background-color: var(--navy);
    color: white;
    border: 1px solid var(--gold); /* Added border for visibility */
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.3s;
    letter-spacing: 0.05rem;
}

.btn-submit:hover {
    background-color: var(--gold);
    color: var(--navy);
}

/* Label styling for readability on dark background */
.form-label {
    font-size: 0.75rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.7); /* Light text for dark card */
    margin-bottom: 0.2rem;
    display: block;
    text-transform: uppercase;
}

/* --- Final Mobile Optimization Tweaks (Phones Under 768px) --- */
@media (max-width: 767px) {
    /* 1. Set vertical separation space between major sections for a less cramped feel */
    section {
        padding: 5rem 0;
    }

    /* 2. Restore padding to navy tiles so text has proper breathing room */
    .content-center {
        padding: 4rem 2rem;
    }

    /* 3. Give the map a more usable height on mobile */
    .contact-card iframe {
        height: 350px !important;
    }
}
/* --- Payment Page Styles --- */
.payment-section {
    padding-top: 120px; 
    padding-bottom: 60px; 
    min-height: 80vh; 
    background-color: var(--cream);
}

.payment-section .section-title {
    margin-top: 0;
}

.payment-intro-text {
    margin-bottom: 2rem; 
    color: #555; 
    max-width: 600px; 
    margin-left: auto; 
    margin-right: auto;
}

.clio-container {
    max-width: 800px; 
    margin: 0 auto; 
    background: white; 
    padding: 10px; 
    border-radius: 8px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
    border-top: 4px solid var(--gold);
}


.btn-return {
    background-color: transparent; 
    color: var(--navy); 
    border-color: var(--navy);
    margin-top: 2rem;
    display: inline-block;
}

.btn-return:hover {
    background-color: var(--navy);
    color: white;
}
/* --- Navigation Dropdown Styles --- */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--navy);
    min-width: 240px;
    box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
    z-index: 1001;
    border-top: 3px solid var(--gold);
    border-radius: 0 0 4px 4px;
    text-align: left;
}

.dropdown-content a {
    color: white;
    padding: 12px 20px !important;
    text-decoration: none;
    display: block !important;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: none !important;
}

.dropdown-content a:hover {
    background-color: rgba(255,255,255,0.05);
    color: var(--gold);
}

/* Desktop Hover Reveal */
@media (min-width: 768px) {
    .dropdown:hover .dropdown-content {
        display: block;
    }
}

/* Mobile Dropdown Integration */
@media (max-width: 767px) {
    .dropdown-content {
        position: static;
        display: block; /* Always visible in the mobile menu */
        background-color: rgba(0,0,0,0.15); /* Slightly darker to show depth */
        box-shadow: none;
        border-top: none;
    }
    .dropdown-content a {
        padding-left: 40px !important; /* Indent sub-items */
        font-size: 0.75rem;
        color: rgba(255,255,255,0.8);
    }
}
/* ============================================
   Component classes (Sept 2026 cleanup)
   Extracted from repeated inline style="" attributes
   so the same look can be edited in one place.
   ============================================ */

/* Static (non-scroll-fixed) nav variant, used on simple text pages like
   the privacy policy and disclaimer, which don't have a hero image
   underneath the nav to overlay. */
#mainNav.mainNav-static {
    position: relative;
    background: var(--navy);
}

/* Solid navy header banner used on interior pages (About, Our Logo,
   Divorce, Custody, Protective Orders, Payment, Testimonials, Univision,
   Family Law Video). */
.page-header {
    padding: 140px 0 60px 0;
    background-color: var(--navy);
    color: white;
    text-align: center;
}

/* Same idea, shorter, used only on the FAQ page. */
.faq-header {
    padding-top: 120px;
    padding-bottom: 40px;
    background-color: var(--navy);
    color: white;
    text-align: center;
}

/* Cream content wrapper used on the About/Our Logo pages (profile-content)
   and the Divorce/Custody/Protective Orders pages (practice-content). */
.profile-content,
.practice-content {
    padding: 5rem 0;
    background-color: var(--cream);
}

/* White card wrapper for the main text block on Divorce/Custody/
   Protective Orders pages. */
.practice-card {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    background: white;
    padding: 3rem;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

/* Section heading style (navy text, gold underline) used for the main
   H2 on profile/practice-card pages. */
.card-title {
    color: var(--navy);
    border-bottom: 2px solid var(--gold);
    padding-bottom: 10px;
    margin-bottom: 1.5rem;
}

/* Sub-section H3 heading used repeatedly within page body copy. */
.card-subtitle {
    color: var(--navy);
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

/* Callout box: standard gold-accent version (Custody, Divorce) and the
   red "urgent" version (Protective Orders). */
.cta-box {
    background-color: #f4f6f9;
    padding: 2rem;
    border-radius: 6px;
    text-align: center;
    margin-top: 3rem;
    border-left: 4px solid var(--gold);
}
.cta-box h4 {
    color: var(--navy);
    margin-bottom: 1rem;
}
.cta-box-danger {
    background-color: #ffebee;
    padding: 2rem;
    border-radius: 6px;
    text-align: center;
    margin-top: 3rem;
    border-left: 4px solid #d32f2f;
}
.cta-box-danger h4 {
    color: #d32f2f;
    margin-bottom: 1rem;
}

/* --- Footer line styles (used on every page) --- */
.footer-firm-line {
    margin-bottom: 0.5rem;
    color: rgba(255,255,255,0.7);
}
.footer-copyright-line {
    margin-bottom: 0.5rem;
}
.footer-separator {
    margin: 0 5px;
}
.footer-link {
    text-decoration: underline;
}
.footer-link-first {
    margin-left: 5px;
}
.footer-phone {
    color: inherit;
}

/* --- Shared policy-page styles (Privacy Policy, Disclaimer) --- */
.policy-container {
    padding: 8rem 0;
    background-color: white;
    min-height: 80vh; /* Ensures footer stays at bottom */
}
.policy-content h3 {
    color: var(--navy);
    margin-top: 2rem;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--gold);
    display: inline-block;
    margin-bottom: 1rem;
}
.policy-content p, .policy-content ul {
    color: #555;
    margin-bottom: 1rem;
}
.policy-content ul {
    margin-left: 2rem;
}

/* Max-width wrapper for policy page text (Privacy Policy, Disclaimer) */
.policy-content {
    max-width: 800px;
    margin: 0 auto;
}

/* White card wrapper for the About/Our Logo page intro layout */
.profile-card {
    background: white;
    padding: 3rem;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}