/* ========================================================= */
/* 1. CSS VARIABLES (Color Palette) */
/* ========================================================= */
:root {
    --dark-blue: #002D58; /* Deep Blue (Primary) */
    --gold-accent: #C5B358; /* ANTIQUE GOLD (LOGO/Accent Color) */
    --medium-blue: #005A9C; /* Used for non-dark theme text/links */
    --page-bg-light: white; /* Default background for index.html */
    --page-bg-dark: #33445C; /* Darker blue/gray for content pages */
    --content-bg-dark: #1a4a75; /* Background for cards/containers in dark theme */
    --light-gray: #F4F4F4;
    --text-color-light: #FFFFFF; /* Text color for dark backgrounds */
    --text-color-dark: #333; /* Text color for light backgrounds */
    --text-color-subtle: #ccc; /* Subtle text on dark backgrounds */
}

/* ========================================================= */
/* 2. GLOBAL RESET & BASE STYLES */
/* ========================================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Arial', sans-serif;
    color: var(--text-color-dark);
    line-height: 1.6;
    background-color: var(--page-bg-light); /* Default light background */
}

a {
    color: var(--medium-blue);
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: var(--dark-blue);
}

h1 {
    font-size: 2.5em;
    color: var(--dark-blue);
    margin-bottom: 20px;
}

h2 {
    font-size: 2em;
    color: var(--dark-blue);
    margin: 30px 0 20px;
}

/* ========================================================= */
/* 3. HEADER & NAVIGATION */
/* ========================================================= */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    background-color: var(--dark-blue);
    color: white;
    border-bottom: 4px solid var(--gold-accent); 
}

.logo-container {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-img {
    height: 40px;
    margin-right: 10px;
}

.logo-text-group {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.logo-name {
    font-weight: bold;
    font-size: 1.4em;
    color: white;
}

.logo-tagline {
    font-size: 0.8em;
    color: var(--gold-accent);
}

.nav a {
    color: white;
    margin-left: 20px;
    padding: 5px 0;
    border-bottom: 2px solid transparent;
}

.nav a:hover {
    color: var(--gold-accent);
    border-bottom: 2px solid var(--gold-accent);
}

/* 3.5. HEADER LOGIN BUTTON */
.header .login-btn {
    background-color: var(--gold-accent);
    color: var(--dark-blue);
    padding: 8px 18px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    margin-left: 20px;
    transition: background-color 0.2s;
    line-height: 1.5; /* Align vertically with nav */
}
.header .login-btn:hover {
    background-color: #9c8a48;
}

/* ========================================================= */
/* 4. CALLOUTS & BANNERS */
/* ========================================================= */
.veteran-callout {
    background-color: var(--gold-accent);
    color: var(--dark-blue);
    text-align: center;
    padding: 10px;
    font-size: 1em;
    font-weight: bold;
}

.veteran-callout span {
    text-decoration: underline;
}

/* ========================================================= */
/* 5. MAIN CONTENT & CONTAINERS */
/* ========================================================= */
.content-container {
    padding: 40px 5%;
    max-width: 1200px;
    margin: 0 auto;
}

/* ========================================================= */
/* 6. CARD STYLES */
/* ========================================================= */
.value-box {
    padding: 30px;
    border-radius: 8px;
    margin: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
    
    /* CRITICAL FLEXBOX RULES FOR EQUAL HEIGHT */
    display: flex;
    flex-direction: column;
    position: relative; 
    justify-content: flex-start;
    height: 100%;
}
/* --- Dark Blue Card Style (Used for Core Services) --- */
.value-box.dark-card {
    background-color: var(--dark-blue) !important; 
    color: white; 
    border: 1px solid var(--gold-accent);
}

.value-box h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.8em;
}
.value-box.dark-card a {
    color: var(--gold-accent) !important;
    text-decoration: none;
    font-weight: bold;
}
.value-box .icon {
    color: var(--gold-accent);
    font-size: 3em;
    margin-bottom: 15px;
}
/* New rule to activate flex-grow on the content wrapper to achieve equal height */
.card-text-content {
    flex-grow: 1; 
    display: flex; 
    flex-direction: column;
    justify-content: flex-start; 
}

/* --- Shadow Card Style (Used for secondary features) --- */
.value-box.shadow-box {
    background-color: var(--page-bg-light);
    color: var(--dark-blue);
    border: 1px solid var(--dark-blue);
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.value-box.shadow-box .icon {
    color: var(--dark-blue);
}
.value-box.shadow-box:hover {
    background-color: #FFFBE6; /* Lightest possible gold/yellow tint */
    border: 1px solid var(--gold-accent); /* Make the border Antique Gold on hover */
}
/* ========================================================= */
/* 6.5. HOME PAGE GRID SYSTEM (Card/Button Alignment) */
/* ========================================================= */

.card-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
    padding: 30px 0;
    margin: 0 auto;
    max-width: 1200px; 
}

.card-column {
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center; 
    height: 100%; 
}

.card-link {
    text-decoration: none;
    color: inherit;
    display: block; 
    flex-grow: 1; 
}
.card-link:hover .value-box.dark-card {
    transform: scale(1.02);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.card-column .value-box {
    margin: 0 0 15px 0;
    width: 100%;
    flex-grow: 1;
}

.card-column .cta-button {
    display: block; 
    margin-top: 0; 
    margin-bottom: 0; 
}

/* ========================================================= */
/* 7. CTA BUTTONS */
/* ========================================================= */
.cta-button {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.3s, color 0.3s;
}

.cta-primary {
    background-color: var(--gold-accent);
    color: var(--dark-blue);
    border: 2px solid var(--gold-accent);
}

.cta-primary:hover {
    background-color: var(--dark-blue);
    color: var(--gold-accent);
}

.cta-gold-blue-text {
    background-color: var(--dark-blue);
    color: var(--gold-accent);
    border: 2px solid var(--gold-accent);
}

.cta-gold-blue-text:hover {
    background-color: var(--gold-accent);
    color: var(--dark-blue);
}

/* ========================================================= */
/* 8. FOOTER */
/* ========================================================= */
.footer {
    background-color: var(--dark-blue);
    color: white;
    padding: 30px 5%;
    text-align: center;
    font-size: 0.9em;
    border-top: 4px solid var(--gold-accent);
}
.footer p {
    color: white; /* Ensure text color is white in footer */
}


/* ========================================================= */
/* 9. DARK THEME & PAGE-SPECIFIC STYLES (Content Pages) */
/* ========================================================= */

/* --- GLOBAL DARK THEME OVERRIDES --- */

/* Class applied to the body element of all content pages */
body.dark-theme-page {
    background-color: var(--page-bg-dark) !important;
    color: var(--text-color-light) !important;
}
body.dark-theme-page .content-container {
    background-color: var(--page-bg-dark) !important;
}
body.dark-theme-page h1, 
body.dark-theme-page h2 {
    color: var(--text-color-light) !important;
}
body.dark-theme-page p {
    color: var(--text-color-subtle) !important;
}
body.dark-theme-page a {
    color: var(--gold-accent);
}
/* --- FIX: Ensure CTA Button Text is Visible on Dark Theme Pages --- */
body.dark-theme-page .cta-button {
    /* Uses dark blue for the text color, which is the intended color for cta-primary */
    color: var(--dark-blue) !important;
}

/* ========================================================= */
/* 1. CSS VARIABLES (Color Palette) */
/* ========================================================= */
:root {
    --dark-blue: #002D58; /* Deep Blue (Primary) */
    --gold-accent: #C5B358; /* ANTIQUE GOLD (LOGO/Accent Color) */
    --medium-blue: #005A9C; /* Used for non-dark theme text/links */
    --page-bg-light: white; /* Default background for index.html */
    --page-bg-dark: #33445C; /* Darker blue/gray for content pages */
    --content-bg-dark: #1a4a75; /* Background for cards/containers in dark theme */
    --light-gray: #F4F4F4;
    --text-color-light: #FFFFFF; /* Text color for dark backgrounds */
    --text-color-dark: #333; /* Text color for light backgrounds */
    --text-color-subtle: #ccc; /* Subtle text on dark backgrounds */
}

/* ========================================================= */
/* 2. GLOBAL RESET & BASE STYLES */
/* ========================================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Arial', sans-serif;
    color: var(--text-color-dark);
    line-height: 1.6;
    background-color: var(--page-bg-light); /* Default light background */
}

a {
    color: var(--medium-blue);
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: var(--dark-blue);
}

h1 {
    font-size: 2.5em;
    color: var(--dark-blue);
    margin-bottom: 20px;
}

h2 {
    font-size: 2em;
    color: var(--dark-blue);
    margin: 30px 0 20px;
}

/* ========================================================= */
/* 3. HEADER & NAVIGATION */
/* ========================================================= */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    background-color: var(--dark-blue);
    color: white;
    border-bottom: 4px solid var(--gold-accent); 
}

.logo-container {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-img {
    height: 40px;
    margin-right: 10px;
}

.logo-text-group {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.logo-name {
    font-weight: bold;
    font-size: 1.4em;
    color: white;
}

.logo-tagline {
    font-size: 0.8em;
    color: var(--gold-accent);
}

.nav a {
    color: white;
    margin-left: 20px;
    padding: 5px 0;
    border-bottom: 2px solid transparent;
}

.nav a:hover {
    color: var(--gold-accent);
    border-bottom: 2px solid var(--gold-accent);
}

/* 3.5. HEADER LOGIN BUTTON */
.header .login-btn {
    background-color: var(--gold-accent);
    color: var(--dark-blue);
    padding: 8px 18px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    margin-left: 20px;
    transition: background-color 0.2s;
    line-height: 1.5; /* Align vertically with nav */
}
.header .login-btn:hover {
    background-color: #9c8a48;
}

/* ========================================================= */
/* 4. CALLOUTS & BANNERS */
/* ========================================================= */
.veteran-callout {
    background-color: var(--gold-accent);
    color: var(--dark-blue);
    text-align: center;
    padding: 10px;
    font-size: 1em;
    font-weight: bold;
}

.veteran-callout span {
    text-decoration: underline;
}

/* ========================================================= */
/* 5. MAIN CONTENT & CONTAINERS */
/* ========================================================= */
.content-container {
    padding: 40px 5%;
    max-width: 1200px;
    margin: 0 auto;
}

/* ========================================================= */
/* 6. CARD STYLES */
/* ========================================================= */
.value-box {
    padding: 30px;
    border-radius: 8px;
    margin: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
    
    /* CRITICAL FLEXBOX RULES FOR EQUAL HEIGHT */
    display: flex;
    flex-direction: column;
    position: relative; 
    justify-content: flex-start;
    height: 100%;
}
/* --- Dark Blue Card Style (Used for Core Services) --- */
.value-box.dark-card {
    background-color: var(--dark-blue) !important; 
    color: white; 
    border: 1px solid var(--gold-accent);
}

.value-box h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.8em;
}
.value-box.dark-card a {
    color: var(--gold-accent) !important;
    text-decoration: none;
    font-weight: bold;
}
.value-box .icon {
    color: var(--gold-accent);
    font-size: 3em;
    margin-bottom: 15px;
}
/* New rule to activate flex-grow on the content wrapper to achieve equal height */
.card-text-content {
    flex-grow: 1; 
    display: flex; 
    flex-direction: column;
    justify-content: flex-start; 
}

/* --- Shadow Card Style (Used for secondary features) --- */
.value-box.shadow-box {
    background-color: var(--page-bg-light);
    color: var(--dark-blue);
    border: 1px solid var(--dark-blue);
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.value-box.shadow-box .icon {
    color: var(--dark-blue);
}
.value-box.shadow-box:hover {
    background-color: #FFFBE6; /* Lightest possible gold/yellow tint */
    border: 1px solid var(--gold-accent); /* Make the border Antique Gold on hover */
}
/* ========================================================= */
/* 6.5. HOME PAGE GRID SYSTEM (Card/Button Alignment) */
/* ========================================================= */

.card-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
    padding: 30px 0;
    margin: 0 auto;
    max-width: 1200px; 
}

.card-column {
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center; 
    height: 100%; 
}

.card-link {
    text-decoration: none;
    color: inherit;
    display: block; 
    flex-grow: 1; 
}
.card-link:hover .value-box.dark-card {
    transform: scale(1.02);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.card-column .value-box {
    margin: 0 0 15px 0;
    width: 100%;
    flex-grow: 1;
}

.card-column .cta-button {
    display: block; 
    margin-top: 0; 
    margin-bottom: 0; 
}

/* ========================================================= */
/* 7. CTA BUTTONS */
/* ========================================================= */
.cta-button {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.3s, color 0.3s;
}

.cta-primary {
    background-color: var(--gold-accent);
    color: var(--dark-blue);
    border: 2px solid var(--gold-accent);
}

.cta-primary:hover {
    background-color: var(--dark-blue);
    color: var(--gold-accent);
}

.cta-gold-blue-text {
    background-color: var(--dark-blue);
    color: var(--gold-accent);
    border: 2px solid var(--gold-accent);
}

.cta-gold-blue-text:hover {
    background-color: var(--gold-accent);
    color: var(--dark-blue);
}

/* ========================================================= */
/* 8. FOOTER */
/* ========================================================= */
.footer {
    background-color: var(--dark-blue);
    color: white;
    padding: 30px 5%;
    text-align: center;
    font-size: 0.9em;
    border-top: 4px solid var(--gold-accent);
}
.footer p {
    color: white; /* Ensure text color is white in footer */
}


/* ========================================================= */
/* 9. DARK THEME & PAGE-SPECIFIC STYLES (Content Pages) */
/* ========================================================= */

/* --- GLOBAL DARK THEME OVERRIDES --- */

/* Class applied to the body element of all content pages */
body.dark-theme-page {
    background-color: var(--page-bg-dark) !important;
    color: var(--text-color-light) !important;
}
body.dark-theme-page .content-container {
    background-color: var(--page-bg-dark) !important;
}
body.dark-theme-page h1, 
body.dark-theme-page h2 {
    color: var(--text-color-light) !important;
}
body.dark-theme-page p {
    color: var(--text-color-subtle) !important;
}
body.dark-theme-page a {
    color: var(--gold-accent);
}
/* --- FIX: Ensure CTA Button Text is Visible on Dark Theme Pages --- */
body.dark-theme-page .cta-button {
    /* Uses dark blue for the text color, which is the intended color for cta-primary */
    color: var(--dark-blue) !important;
}


/* --- Document Breakdown Grid (estate-planning.html & entity-creation.html) --- */

.document-breakdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 60px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.document-item {
    padding: 20px;
    background-color: var(--content-bg-dark);
    border-radius: 8px;
    border-top: 5px solid var(--gold-accent);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
}
.document-item h3 {
    margin-top: 0;
    font-size: 1.25em;
    color: var(--gold-accent) !important;
    border-bottom: 1px solid rgba(197, 179, 88, 0.4);
    padding-bottom: 10px;
    margin-bottom: 15px;
    height: 45px; /* Fixed height for visual consistency */
}
.document-item i {
    font-size: 1.25em;
    margin-right: 8px;
}
.document-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
/* === Hanging Indentation Fix for Document Lists (Estate/Entity) === */
.document-item li {
    font-size: 0.9em;
    margin-bottom: 12px;
    line-height: 1.4;
    color: var(--text-color-subtle);
    
    position: relative; /* CRITICAL */
    padding-left: 25px; /* CRITICAL: Creates hanging indent */
}
.document-item li::before {
    content: "\f058"; /* Check circle icon for clarity */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #79ac95; /* Softer green check */
    
    position: absolute; /* CRITICAL */
    left: 0; /* CRITICAL */
    top: 0; /* CRITICAL */
}
/* ------------------------------------------------------------------ */

.document-item strong {
    color: var(--text-color-light);
}

/* --- Entity Cards (entity-creation.html) --- */
/* NOTE: Entity Creation page now uses .document-breakdown, so this is vestigial but kept */
.entity-cards {
    display: flex; 
    gap: 30px;
    margin-bottom: 60px;
    max-width: 1100px;
    margin: 40px auto 60px; 
}
.entity-card {
    flex: 1; 
    padding: 30px;
    background-color: var(--content-bg-dark); 
    border-radius: 8px;
    border-top: 5px solid var(--gold-accent);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
}
.entity-card h3 {
    color: var(--gold-accent) !important;
    font-size: 1.5em;
    margin-top: 0;
    border-bottom: 1px solid rgba(197, 179, 88, 0.4);
    padding-bottom: 10px;
}
.entity-card i {
    margin-right: 10px;
}

/* --- Simplified CTA Section (Used on Estate Planning & Entity Creation) --- */

.cta-section {
    text-align: center;
    padding: 40px;
    max-width: 900px;
    margin: 50px auto 30px;
    background-color: var(--content-bg-dark);
    border-radius: 8px;
    border: 2px solid var(--gold-accent);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.cta-section p {
    font-size: 1.2em;
    margin-bottom: 30px;
    color: var(--text-color-light) !important;
}

/* CTA Button (Large and prominent) */
.cta-section .cta-button {
    display: block;
    margin: 0 auto;
    max-width: 400px;
    padding: 15px 30px;
    font-size: 1.4em;
    /* Uses primary CTA style colors */
    text-decoration: none;
}

/* Small link under the CTA button */
.full-pricing-link {
    display: block;
    margin-top: 15px;
    color: var(--gold-accent);
    font-weight: bold;
    text-decoration: underline;
}

/* --- Pricing Boxes (pricing.html) - HANGING INDENTATION FIX INCLUDED --- */

.service-box-container {
    display: flex;
    gap: 30px;
    max-width: 1100px;
    margin: 40px auto 60px;
}

.pricing-box {
    flex: 1;
    background-color: var(--content-bg-dark);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    border-top: 5px solid var(--gold-accent);
    display: flex;
    flex-direction: column;
}
.pricing-box h3 {
    background-color: rgba(0, 45, 88, 0.7);
    color: var(--gold-accent) !important;
    text-align: center;
    padding: 20px 10px;
    margin: 0;
    font-size: 1.6em;
    border-bottom: 2px solid var(--gold-accent);
}
.pricing-box ul {
    list-style: none;
    padding: 20px 30px;
    margin: 0;
    flex-grow: 1;
}
/* === Hanging Indentation Fix for Pricing Lists (Pricing Page) === */
.pricing-box li {
    font-size: 1em;
    margin-bottom: 12px;
    line-height: 1.4;
    color: var(--text-color-light);
    
    position: relative; /* CRITICAL */
    padding-left: 30px; /* CRITICAL: Creates hanging indent */
}
.pricing-box li::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--gold-accent);
    
    position: absolute; /* CRITICAL */
    left: 0; /* CRITICAL */
    top: 0; /* CRITICAL */
}
/* ------------------------------------------------------------- */

/* Price Display at Bottom */
.price-display {
    background-color: var(--dark-blue);
    color: var(--text-color-light);
    padding: 15px 10px;
    text-align: center;
}
.price-display strong {
    display: block;
    font-size: 1.8em;
    color: var(--gold-accent);
    margin-bottom: 5px;
}
.price-display .note {
    font-size: 0.9em;
    color: var(--text-color-subtle);
}
.price-display .veteran-note {
     color: #79ac95;
     font-weight: bold;
     display: block;
     margin-top: 8px;
}