/* css/style.css */

/* --- CSS Variables --- */
:root {
    --primary-blue: #003366;
    --primary-teal: #008080;
    --secondary-sky-blue: #87CEEB;
    --secondary-light-teal: #AFEEEE; /* Used for active sub-menu child on desktop */
    --accent-blue: #005f9e;
    --accent-teal: #00A0A0;

    --neutral-white: #FFFFFF;
    --neutral-light-gray: #f4f7f6; /* Good for mobile sub-menu background */
    --neutral-medium-gray: #e0e0e0;
    --neutral-dark-gray: #555555;
    --text-color: #333333;
    --heading-color: var(--primary-blue);

    --font-primary: 'Montserrat', sans-serif;
    --font-secondary: 'Open Sans', sans-serif;

    --site-max-width: 1140px;
    --spacing-unit: 1rem; /* 16px */
    --header-horizontal-padding: calc(var(--spacing-unit) * 1.5);
    --header-bar-height: 70px;


    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --border-radius: 8px;
}

/* --- Basic Reset & Normalize --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 100%;
}

body {
    font-family: var(--font-secondary);
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--neutral-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body.mobile-menu-open {
    overflow: hidden;
}


/* --- General Container (for content BELOW header) --- */
.container {
    width: 90%;
    max-width: var(--site-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-unit);
    padding-right: var(--spacing-unit);
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {font-family: var(--font-primary);color: var(--heading-color);line-height: 1.3;margin-bottom: calc(var(--spacing-unit) * 0.75);font-weight: 700;}
h1 { font-size: 2.8rem; margin-bottom: var(--spacing-unit); }
h2 { font-size: 2.2rem; margin-bottom: calc(var(--spacing-unit) * 1.5); }
h3 { font-size: 1.6rem; color: var(--accent-blue); }
h4 { font-size: 1.2rem; }
p { margin-bottom: var(--spacing-unit); color: var(--neutral-dark-gray); }
a { color: var(--primary-teal); text-decoration: none; transition: color 0.3s ease; }
a:hover, a:focus { color: var(--accent-teal); }
header nav a:hover, header nav a:focus { text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

/* --- Buttons --- */
.btn {display: inline-block;padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.5);font-family: var(--font-primary);font-weight: 600;text-decoration: none;border-radius: var(--border-radius);transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;cursor: pointer;border: none;text-align: center;box-shadow: 0 2px 4px rgba(0,0,0,0.05);}
.btn:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); text-decoration: none; }
.btn-primary { background-color: var(--primary-teal); color: var(--neutral-white); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--accent-teal); color: var(--neutral-white); transform: translateY(-2px); }
.btn-secondary { background-color: var(--neutral-white); color: var(--primary-blue); border: 2px solid var(--primary-blue); }
.btn-secondary:hover, .btn-secondary:focus { background-color: var(--primary-blue); color: var(--neutral-white); transform: translateY(-2px); }
.btn-large { padding: var(--spacing-unit) calc(var(--spacing-unit) * 2); font-size: 1.1rem; }
.btn-small { padding: calc(var(--spacing-unit) * 0.5) var(--spacing-unit); font-size: 0.9rem; }


/* --- Header Styling --- */
header {
    background-color: var(--neutral-white);
    padding: calc(var(--spacing-unit) * 0.35) 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* Main header z-index */
    width: 100%;
    height: var(--header-bar-height);
}

header .container {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--header-horizontal-padding);
    padding-right: var(--header-horizontal-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

/* Logo Styling */
.logo-link {
    display: inline-block;
    flex-shrink: 0;
}

#header-logo {
    height: 70px;
    width: auto;
    display: block;
    transition: transform 0.3s ease;
}
#header-logo:hover {
    transform: scale(1.02);
}

/* Navigation Block - DESKTOP */
header nav { 
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

header nav ul { /* Desktop main UL */
    display: flex;
    align-items: center;
    padding: 0;
    width: 100%;
    justify-content: space-around;
}

header nav ul li {
    position: relative;
}


header nav ul li a {
    font-family: var(--font-secondary);
    font-weight: 600;
    color: var(--primary-blue);
    padding: calc(var(--spacing-unit) * 0.8) calc(var(--spacing-unit) * 1.1);
    text-decoration: none;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}
header nav ul li a:not(.active):not(.active-dropdown-parent-link):hover,
header nav ul li a:not(.active):not(.active-dropdown-parent-link):focus {
    color: var(--primary-teal);
    background-color: rgba(0, 128, 128, 0.08);
}

header nav ul li a.active,
header nav ul li.active-dropdown-parent > a {
    color: var(--neutral-white);
    background-color: var(--primary-teal);
    font-weight: 700;
}
header nav ul li a.active:hover,
header nav ul li a.active:focus,
header nav ul li.active-dropdown-parent > a:hover,
header nav ul li.active-dropdown-parent > a:focus {
    background-color: var(--accent-teal);
    color: var(--neutral-white);
}


header nav ul li a i.fa-chevron-down { /* Desktop chevron */
    font-size: 0.65em;
    margin-left: 6px;
    transition: transform 0.2s ease;
}
header nav ul li.dropdown:hover > a i.fa-chevron-down,
header nav ul li.dropdown > a:hover i.fa-chevron-down,
header nav ul li.dropdown > a:focus i.fa-chevron-down {
    transform: rotate(180deg);
}


.dropdown-menu { /* Desktop Dropdown Menu */
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    background-color: var(--neutral-white);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    padding: calc(var(--spacing-unit) * 0.5) 0;
    min-width: 280px;
    z-index: 1001; 
    border-top: 3px solid var(--accent-teal);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; 
    transform: translateY(10px) translateX(-50%); /* Start slightly down for animation */
}

header nav ul li.dropdown:hover .dropdown-menu { /* Desktop hover */
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0) translateX(-50%); /* Animate to final position */
}


.dropdown-menu li {
    margin-left: 0;
}

.dropdown-menu li a {
    display: block;
    padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.2);
    color: var(--primary-blue);
    font-weight: 500;
    white-space: nowrap;
    border-radius: 0;
}

.dropdown-menu li a:hover,
.dropdown-menu li a:focus {
    background-color: var(--neutral-light-gray);
    color: var(--primary-teal);
}

.dropdown-menu li a.active-dropdown-child {
    background-color: var(--secondary-light-teal);
    color: var(--primary-blue);
    font-weight: 600;
}
.dropdown-menu li a.active-dropdown-child:hover,
.dropdown-menu li a.active-dropdown-child:focus {
    background-color: var(--primary-teal);
    color: var(--neutral-white);
}

/* CTA Button in Header - DESKTOP */
.header-cta {
    padding: calc(var(--spacing-unit) * 0.9) calc(var(--spacing-unit) * 1.8);
    border-radius: var(--border-radius);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Mobile Menu Toggle Button (Hamburger/X) */
#mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--primary-blue);
    font-size: 1.8rem;
    cursor: pointer;
    padding: calc(var(--spacing-unit) * 0.5);
    flex-shrink: 0;
    z-index: 1002; /* Highest z-index for toggle button */
    position: relative;
}
.dropdown-toggle-btn { /* This is for JS-added mobile sub-menu toggles - will be hidden by default for flattened list */
    display: none !important; 
}


/* --- Footer Styling --- */
footer {background-color: var(--primary-blue);color: var(--neutral-light-gray);padding: calc(var(--spacing-unit) * 3) 0 calc(var(--spacing-unit) * 1.5);margin-top: calc(var(--spacing-unit) * 3);}
footer .container {display: flex;flex-direction: column;}
.footer-top {display: flex;flex-wrap: wrap;justify-content: space-between;gap: calc(var(--spacing-unit) * 2);margin-bottom: calc(var(--spacing-unit) * 2);}
.footer-logo-area, .footer-links, .footer-contact, .footer-social {flex: 1;min-width: 200px; }
#footer-logo {height: 45px;margin-bottom: var(--spacing-unit);background-color: var(--neutral-white); padding: 5px;border-radius: 4px;}
.veteran-owned-badge {font-size: 0.9rem;font-weight: 600;margin-top: var(--spacing-unit);color: var(--secondary-light-teal);}
.veteran-owned-badge i {margin-right: 5px;color: var(--secondary-sky-blue);}
footer h4 {font-size: 1.1rem;color: var(--neutral-white);margin-bottom: var(--spacing-unit);font-weight: 600;}
footer ul li {margin-bottom: calc(var(--spacing-unit) * 0.5);}
footer a {color: var(--neutral-light-gray);text-decoration: none;}
footer a:hover, footer a:focus {color: var(--secondary-sky-blue);text-decoration: underline;}
.footer-contact p {margin-bottom: calc(var(--spacing-unit) * 0.5);color: var(--neutral-light-gray);}
.footer-contact p i {margin-right: 8px;width: 16px; color: var(--secondary-light-teal);}
.footer-social a {margin-right: var(--spacing-unit);font-size: 1.5rem; color: var(--neutral-light-gray);}
.footer-social a:hover, .footer-social a:focus {color: var(--secondary-sky-blue);}
.footer-bottom {border-top: 1px solid rgba(255, 255, 255, 0.2);padding-top: calc(var(--spacing-unit) * 1.5);text-align: center;font-size: 0.9rem;}
.footer-bottom p {margin-bottom: calc(var(--spacing-unit) * 0.25);color: var(--neutral-light-gray);}

/* --- Utility Classes --- */
.section-padding {padding-top: calc(var(--spacing-unit) * 4);padding-bottom: calc(var(--spacing-unit) * 4);}
.bg-light {background-color: var(--neutral-light-gray);}
.text-center {text-align: center;}
.cta-center {text-align: center;margin-top: calc(var(--spacing-unit) * 2);}

/* --- Accessibility --- */
a:focus, button:focus, input:focus, textarea:focus, select:focus {outline: 2px solid var(--primary-teal);outline-offset: 2px;}
*:focus-visible {outline: 2px solid var(--primary-teal);outline-offset: 2px;}
*:focus:not(:focus-visible) {outline: none;}


/* --- Responsive Design --- */
@media (max-width: 991px) { /* Tablet and Mobile */

    /* Hide desktop nav items, show mobile toggle */
    header nav ul { 
        display: none; /* This hides the UL that is direct child of NAV on desktop */
    }
    #mobile-menu-toggle { 
        display: block;
    }
    .header-cta { 
        display: none;
    }

    /* Styles for the mobile navigation panel (<nav> element) */
    header nav { 
        display: none; /* Default state for <nav> on mobile is hidden */
    }
    header nav.active { /* When mobile menu is open (JS adds .active to <nav>) */
        display: flex; 
        flex-direction: column;
        position: fixed;
        top: 0; 
        left: 0;
        width: 100%;
        bottom: 0; /* Make it extend to the bottom of viewport */
        background-color: var(--neutral-white);
        padding-top: var(--header-bar-height); 
        overflow-y: auto; 
        z-index: 1001; 
        box-sizing: border-box; /* CRITICAL for height calculation with padding */
    }


    #header-logo {
        max-height: 50px;
    }

    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    h3 { font-size: 1.4rem; }

    /* Styling for the UL inside the active mobile menu */
    header nav.active ul { /* This is the UL we want to show on mobile */
        display: flex; /* Make this UL visible */
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        justify-content: flex-start;
        padding: var(--spacing-unit) 0; /* Padding for the list container */
        flex-grow: 1; /* Allow the UL to take available vertical space */
        /* Added padding-bottom to ensure last item isn't cut off */
        padding-bottom: calc(var(--header-bar-height) + var(--spacing-unit)); 
    }

    /* Optional Mobile CTA Item (if used in HTML within the mobile menu's UL) */
    .mobile-nav-cta-item { 
        padding: var(--spacing-unit) var(--header-horizontal-padding);
        margin-top: var(--spacing-unit); /* Space above CTA */
        border-top: 1px solid var(--neutral-medium-gray); /* Separator line */
    }
    .mobile-nav-cta-item .btn {
        width: 100%;
        padding: var(--spacing-unit);
        font-size: 1.1rem;
        text-align: center;
        display: block;
        background-color: var(--accent-teal);
        color: var(--neutral-white);
    }
    .mobile-nav-cta-item .btn:hover {
        background-color: var(--primary-teal);
    }

    /* Styling for main LI > A items in mobile menu */
    header nav.active ul > li > a {
        display: block; 
        padding: calc(var(--spacing-unit) * 1.2) var(--header-horizontal-padding);
        border-bottom: 1px solid var(--neutral-medium-gray);
        width: 100%;
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--primary-blue);
        border-radius: 0;
    }
    /* Active page styling for main links */
    header nav.active ul > li > a.active,
    header nav.active ul li.active-dropdown-parent > a { /* Parent of an active sub-page */
        background-color: var(--primary-teal);
        color: var(--neutral-white);
    }
    /* Hide desktop chevron icon within main links */
    header nav.active ul > li.dropdown > a > i.fa-chevron-down {
        display: none;
    }


    /* Mobile Sub-Menu (.dropdown-menu) - FLATTENED DISPLAY */
    header nav.active ul li.dropdown .dropdown-menu { 
        display: block !important; /* KEY: Always show the submenu block in mobile nav */
        position: static;
        box-shadow: none;
        border-top: none; 
        border-left: none;
        padding: 0; 
        background-color: var(--neutral-light-gray); 
        min-width: 100%;
        opacity: 1;
        visibility: visible;
        border-radius: 0;
        left: auto !important;
        transform: none !important;
        margin:0; 
    }

    /* Styling for individual sub-menu links (LI A) */
    header nav.active ul li.dropdown .dropdown-menu li a {
        padding: calc(var(--spacing-unit) * 1.0) var(--header-horizontal-padding) calc(var(--spacing-unit) * 1.0) calc(var(--header-horizontal-padding) + var(--spacing-unit) * 1.2); /* Indent sub-items */
        font-size: 1rem; 
        font-weight: normal; 
        border-bottom: 1px solid var(--neutral-medium-gray); 
        color: var(--primary-blue);
        display: block;
        background-color: transparent; 
    }
    /* Hover/focus for sub-items */
    header nav.active ul li.dropdown .dropdown-menu li a:hover,
    header nav.active ul li.dropdown .dropdown-menu li a:focus {
        background-color: var(--secondary-light-teal); 
        color: var(--primary-blue);
    }
    /* Active sub-page link */
    header nav.active ul li.dropdown .dropdown-menu li a.active-dropdown-child { 
        background-color: var(--primary-teal); 
        color: var(--neutral-white);
        font-weight: 600;
    }
    /* Remove bottom border from the last sub-item WITHIN ITS OWN SUBMENU */
    header nav.active ul li.dropdown .dropdown-menu li:last-child a {
        border-bottom: none;
    }
    
    /* Ensure the last actual menu link (before any potential CTA) has no bottom border */
    header nav.active > ul > li:last-of-type:not(.mobile-nav-cta-item) > a:not(.dropdown > a), 
    header nav.active > ul > li.dropdown:last-of-type:not(.mobile-nav-cta-item) > ul.dropdown-menu > li:last-of-type > a {
      border-bottom: none;
    }


    .footer-top {flex-direction: column;align-items: center;text-align: center;}
    .footer-logo-area, .footer-links, .footer-contact, .footer-social {width: 100%;max-width: 300px; margin-bottom: var(--spacing-unit);}
    .footer-social {margin-top: var(--spacing-unit);}
    .footer-social a {font-size: 1.8rem; }
}

@media (max-width: 767px) {
    :root {--spacing-unit: 0.875rem; --header-horizontal-padding: var(--spacing-unit); }
    #header-logo {max-height: 40px; }
    header nav.active ul > li > a {font-size: 1.05rem; padding: calc(var(--spacing-unit) * 1.1);}
    header nav.active ul li.dropdown .dropdown-menu li a {font-size: 0.95rem;padding: calc(var(--spacing-unit) * 0.9) var(--header-horizontal-padding) calc(var(--spacing-unit) * 0.9) calc(var(--header-horizontal-padding) + var(--spacing-unit) * 1.0);}

    h1 { font-size: 1.9rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.25rem; }

    .btn-large {padding: calc(var(--spacing-unit) * 0.9) calc(var(--spacing-unit) * 1.8);font-size: 0.95rem;}
    .section-padding {padding-top: calc(var(--spacing-unit) * 2.5);padding-bottom: calc(var(--spacing-unit) * 2.5);}
}