/* FILE: style.css (Corrected Version) */

/* --- BRAND COLORS --- */
:root {
    --text-main: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.65);
    --text-accent: rgba(255, 255, 255, 0.3);
    --brand-blue: #5c79ac; /* Lighter Blue Accent */
    --content-padding: 10%; /* Primary horizontal padding for body/footer */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body { 
    background: linear-gradient(160deg, #1e2a4a 0%, #050510 100%);
    color: var(--text-main);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* REMOVED 'align-items: center;' which was incorrectly constraining the width */
    font-family: 'Baskerville', 'Georgia', serif;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 1000px; 
    width: 100%;
    text-align: left; 
    /* ADDED margin: auto to re-center the content block */
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--content-padding); 
    animation: fadeIn 1.5s ease-out;
    margin-top: 5rem;
    
    /* This makes the container grow to fill all available space, pushing the footer down. */
    flex-grow: 1; 
}

/* --- HEADER & NAVIGATION --- */
.header-wrapper {
    /* This element is now a direct child of the body (via placeholder) */
    /* and will correctly span 100% width by default. */
    position: relative; 
    width: 100%;
    z-index: 100;
    background: linear-gradient(160deg, #1e2a4a 0%, #050510 100%); 
}

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem var(--content-padding); 
    width: 100%;
    max-width: 1000px; /* Constrains the header content to match the main container */
    margin: 0 auto; /* Centers the header content */
}
.header-divider {
    height: 1px;
    width: 100%;
    background-color: var(--text-accent);
}

.header-logo-area { display: flex; align-items: center; }
.logo-img { max-width: 100px; height: auto; display: block; filter: invert(1); }
.nav-menu { display: flex; gap: 1.5rem; }
.nav-link {
    font-family: 'Inter', sans-serif; 
    font-size: 0.65rem;
    color: var(--text-muted);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color 0.3s ease;
}
.nav-link:hover, .nav-link.active {
    color: var(--text-main);
    border-bottom: 1px solid var(--brand-blue);
    padding-bottom: 3px;
}

/* --- TYPOGRAPHY --- */
h1 {
    font-family: 'Baskerville', serif; 
    font-weight: 300;
    font-size: 3.5rem;
    margin-bottom: 2.5rem;
    line-height: 1.1;
    color: var(--text-main);
    letter-spacing: -0.02em; 
}
p {
    font-family: 'Baskerville', serif;
    font-weight: 300; 
    font-size: 1.25rem; 
    color: var(--text-muted);
    line-height: 1.8; 
    margin-bottom: 2.5rem;
    max-width: 650px;
}

footer {
    width: 100%; 
    padding: 3rem var(--content-padding); /* Increased vertical padding for a cleaner look */
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center;   /* Center items horizontally */
    gap: 1.5rem;             /* Add space between the links and the copyright notice */
    border-top: 2px solid var(--text-accent); 
    margin-top: auto; 
}

.copyright { 
    font-family: 'Inter', sans-serif; 
    font-size: 0.65rem; 
    color: var(--text-accent); 
    text-transform: uppercase; 
    letter-spacing: 0.1em; 
    text-align: center; /* Ensures text centers correctly if it wraps */
}

.footer-links { 
    display: flex; 
    gap: 2rem; 
}

.footer-links a { 
    font-family: 'Inter', sans-serif; 
    font-size: 0.5rem; 
    color: var(--text-muted); 
    text-decoration: none; 
    text-transform: uppercase; 
    letter-spacing: 0.1em; 
    transition: color 0.3s ease; 
}

.footer-links a:hover { 
    color: var(--text-main); 
}

    


@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    h1 { font-size: 2.5rem; margin-top: 2rem; }
    .container { padding: 0 1.5rem; margin-top: 2rem; }
    
    .main-header { flex-direction: column; align-items: flex-start; padding: 1.25rem 1.5rem; }
    .nav-menu { margin-top: 1rem; }
    
       footer { 
        padding: 3rem 1.5rem; 
        flex-direction: column; /* Keep vertical stacking */
        align-items: center;   /* Ensure it stays centered on mobile */
        gap: 1.5rem; 
        margin-top: 4rem;
    }
    .footer-links { 
        flex-direction: column; /* Stack links vertically on mobile for readability */
        align-items: center;   /* Center the stacked links */
        gap: 1rem;             
    }
}