/* Core Styling & Global Theme (Navy Blue #002D62 / Silver Gray #A7A9AC) */
* { margin: 0; padding: 0; box-sizing: border-box; }
body, html { font-family: 'Segoe UI', Tahoma, Arial, sans-serif; background-color: #001f40; color: #e6e6e6; }

/* Sticky Header - Updated to White Background */
header { 
    background-color: #ffffff; 
    border-bottom: 2px solid #e0e0e0; /* Subtle gray border for separation */
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    width: 100%; 
}
nav { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 5%; max-width: 1300px; margin: 0 auto; }
.nav-logo { height: 75px; width: auto; }

/* Nav Links - Changed to Navy for visibility on White */
nav ul { display: flex; list-style: none; gap: 2rem; }
nav a { color: #002D62; text-decoration: none; font-weight: 600; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 1px; }
nav a:hover { color: #004a99; }

/* Removes the default link styling from the logo container */
.logo-container a {
    text-decoration: none;
    display: flex;
    align-items: center;
    border: none;
    outline: none;
}

/* Optional: Slight hover effect so users know it's clickable */
.logo-container a:hover {
    opacity: 0.9;
    transition: 0.3s opacity ease;
}

/* The Full Screen Splash (GSA.png) */
.hero-section {
    position: relative;
    height: calc(100vh - 85px); /* Full screen minus nav height */
    width: 100%;
    /* Points back to images folder. Adjust path if necessary */
    background: url('../images/GSA.png') no-repeat center center/cover;
    background-attachment: fixed; /* Creates parallax scroll effect */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

* Update your existing .hero-content class */
.hero-content { 
    width: 100%;             /* Ensure it takes full available width */
    max-width: 950px;        /* Increased from 800px to give the text more "breathing room" */
    margin: 0 auto;
    padding: 0 20px;         /* Prevents text from hitting the screen edges on mobile */
}

/* Add this to prevent the H1 from breaking mid-word or too early */
.hero-section h1 { 
    white-space: normal;     /* Allows natural wrapping */
    word-break: keep-all;    /* Prevents breaking a word in half */
    display: inline-block;   /* Helps with layout stability */
}

/* Update the overlay to ensure it doesn't "pinch" the content */
.hero-overlay { 
    background: rgba(0, 31, 64, 0.75); 
    width: 100%; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    padding: 2rem;
    box-sizing: border-box; /* Ensures padding doesn't shrink the usable space */
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 1.5rem; line-height: 1.1; font-weight: 800; color: #ffffff; }
.tagline-text { font-size: clamp(1rem, 2vw, 1.25rem); color: #A7A9AC; margin-bottom: 1rem; line-height: 1.5; }

/* **Requested Feature: Additional spacing between tagline and CTA buttons** */
.cta-spacer { margin-top: 3.5rem; }

/* Buttons */
.cta-group { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.btn-primary, .btn-secondary { padding: 15px 30px; text-decoration: none; font-weight: bold; border-radius: 4px; }
.btn-primary { background-color: #004a99; color: white; }
.btn-secondary { border: 2px solid #A7A9AC; color: #A7A9AC; }
.btn-primary:hover { background-color: #ffffff; color: #002D62; }
.btn-secondary:hover { border-color: #ffffff; color: #ffffff; }

/* Content Padding for About/Services */
.content-container { padding: 6rem 10%; max-width: 1200px; margin: 0 auto; }
.about-lead, .readiness-block { margin-bottom: 4rem; }
.core-values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.value-card { background: #002D62; padding: 2.5rem; border-radius: 8px; border: 1px solid #333; }
.value-card h3 { color: #ffffff; margin-bottom: 1rem; }

/* Table Styling for About Page */
.data-table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 2rem; 
    background: rgba(255, 255, 255, 0.05); /* Subtle contrast against navy bg */
    border: 1px solid #333; 
}
.data-table th, .data-table td { 
    padding: 15px; 
    text-align: left; 
    border-bottom: 1px solid #333; 
}
.data-table th { 
    background: #004a99; 
    color: white; 
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

/* Update the global background for sub-pages */
.sub-page {
    background: linear-gradient(rgba(0, 31, 64, 0.85), rgba(0, 31, 64, 0.85)), 
                url('../images/GSA.png') no-repeat center center fixed;
    background-size: cover;
    color: #ffffff;
}

/* Ensure the content container is transparent so the background shows through */
.content-container { 
    padding: 120px 10% 6rem 10%; 
    max-width: 1200px; 
    margin: 0 auto; 
    background: transparent; /* Allows GSA.png to show */
}

/* Ensure your table and cards remain legible against the background */
.value-card, .data-table {
    background: rgba(255, 255, 255, 0.05); /* Subtle frosting effect */
    backdrop-filter: blur(5px); /* Modern professional glass effect */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Footer - Updated to White Background */
footer { 
    background-color: #ffffff; 
    border-top: 2px solid #e0e0e0; 
    color: #002D62; /* Navy Blue text */
    padding: 2.5rem; 
    text-align: center; 
}
.compliance-footer span { margin: 0 10px; }

/* Mobile Optimization */
@media (max-width: 768px) {
    nav ul { display: none; }
    h1 { font-size: 2rem; }
}