/* static/css/base_styles.css */

html {
    font-size: 16px;
    scroll-behavior: smooth;
    box-sizing: border-box;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* No fixed header height variable; rely on intrinsic sizing with safeguards */

*,
*::before,
*::after {
    box-sizing: inherit;
    margin: 0; /* Reset margin for all elements for consistency */
    padding: 0; /* Reset padding for all elements */
}

body {
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.7;
    color: #4A4A4A; /* Darker, more readable grey for body text */
    margin: 0;
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}


/* Generic page container */
.container {
    max-width: 1140px; /* Common container width */
    margin: 0 auto;
    padding: 0 20px;
}

/* Dedicated layout container for chrome (header/footer), kept separate from page-level `.container` rules */
.site-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Ensure nav aligns using the dedicated site-container */
nav.main-nav.site-container { max-width: 1140px; padding-left: 0 !important; padding-right: 0 !important; }
nav.main-nav.site-container *,
nav.main-nav.site-container *::before,
nav.main-nav.site-container *::after { content: none !important; }

/* Main content wrapper should grow to fill space */
.main-content {
    flex: 1;
}

/* Header and Navigation */
.main-header {
    background-color: #ffffff; /* Start with white background */
    padding: 0; /* Avoid fractional totals; header height follows nav */
    /* Use inset box-shadow to simulate a 1px border without affecting layout metrics */
    box-shadow: inset 0 -1px 0 #e7e7e7;
    position: sticky; /* Keep header at the top */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for scroll effects */
    min-height: 58px; /* Ensure consistent minimum visual height across pages */
    display: flex;              /* Center nav vertically within header */
    align-items: center;        /* Vertical centering */
}

/* Normalize navigation elements to avoid 1-2px differences across pages */
.main-nav,
.main-nav ul,
.main-nav ul li,
.main-nav ul li a {
    margin: 0;
    padding: 0;
    line-height: 1; /* explicit line-height for stability */
}

/* Optional: Style for when header is scrolled - can be added with JS */
/* .main-header.scrolled {
    background-color: rgba(20, 20, 20, 0.95); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.main-header.scrolled .nav-logo,
.main-header.scrolled .main-nav ul li a {
    color: #ffffff; 
}
.main-header.scrolled .main-nav ul li a:hover {
    color: #1DB954; /* Example green accent for scrolled header */
/*} *!*/

.main-nav {
    display: block; /* simple wrapper */
    padding: 0; /* header provides vertical centering */
}

/* Invisible baseline to normalize font metrics across pages without fixing height */
/* Remove invisible baseline pseudo-element to avoid extra flex item in header */
.main-nav::before,
.main-nav::after {
    content: none !important; /* Prevent any pseudo-elements from creating extra blocks */
    display: none !important;
}

.nav-logo {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.9em; /* Slightly larger logo */
    font-weight: 700;
    color: #2c3e50; /* Professional dark blue/grey */
    text-decoration: none;
    letter-spacing: -0.5px;
}

.main-nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center; /* center tabs group */
    gap: 24px;
    width: 100%;
}

/* spacing comes from ul gap */

.main-nav ul li { flex: 0 0 auto; }
.main-nav ul li { min-width: 0; }

.main-nav ul li a {
    display: inline-block;
    text-align: center;
    font-size: 0.875rem; /* restore after parent reset */
    text-decoration: none;
    color: #34495e; /* Slightly lighter than logo, good contrast */
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem; /* 14px on a 16px root to avoid fractional em values */
    font-weight: 600; 
    padding: 10px 12px; /* balanced padding */
    line-height: 14px; /* Stable integer line box independent of font loading */
    border-radius: 4px;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    text-transform: uppercase; 
    letter-spacing: 0.8px; /* Slightly more spacing for uppercase */
}

.main-nav ul li a:hover,
.main-nav ul li a.active { /* Assuming an active class can be added via JS/Django */
    color: #1DB954; /* Vibrant Green - Spotify-like, modern tech feel */
    /* background-color: rgba(29, 185, 84, 0.1); */ /* Optional subtle background on hover */
}

/* Footer Styling */
.main-footer {
    background-color: #1c1c1c; /* Very dark grey, almost black */
    color: #a0a0a0; /* Lighter grey text for footer */
    padding: 60px 0 40px; /* More vertical padding */
    margin-top: 80px; /* More space before footer */
    text-align: center;
}

.main-footer p {
    margin: 0 0 10px; /* Space between paragraphs if any */
    font-size: 0.95em;
    font-family: 'Lato', sans-serif;
    line-height: 1.6;
}

/* General Text Elements */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    color: #2c3e50; /* Consistent dark blue/grey for headings */
    font-weight: 700;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 0.75em;
}

h1 { font-size: 3em; letter-spacing: -1px; }
h2 { font-size: 2.4em; letter-spacing: -0.5px; }
h3 { font-size: 1.9em; }
/* ... etc ... */

p {
    margin-bottom: 1.5em; 
    font-size: 1.05rem; /* Slightly larger base paragraph font size */
}

a {
    color: #1DB954; /* Consistent link color - Green */
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #17a048; /* Darker green on hover */
    text-decoration: underline; /* Underline on hover for clear affordance */
}

/* Utility classes */
.text-center {
    text-align: center;
}

/* Buttons */
.btn {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; /* Bolder buttons */
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 2px solid transparent; /* Slightly thicker border for definition */
    padding: 14px 30px; /* More padding */
    font-size: 1em;
    border-radius: 50px; /* Pill-shaped buttons like lucassheehanpt.com */
    transition: all 0.25s ease-in-out;
    text-transform: uppercase;
    letter-spacing: 1px; /* More letter spacing */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.btn-primary {
    color: #fff;
    background-color: #1DB954; /* Green */
    border-color: #1DB954;
}

.btn-primary:hover {
    color: #fff;
    background-color: #17a048; /* Darker Green */
    border-color: #148b3f;
    transform: translateY(-2px); /* Subtle lift effect */
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* Example of a secondary button, if needed */
.btn-secondary {
    color: #1DB954;
    background-color: transparent;
    border-color: #1DB954;
}

.btn-secondary:hover {
    color: #fff;
    background-color: #1DB954;
    border-color: #1DB954;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(29, 185, 84, 0.2);
}

/* Footer Social Links Styling */
.footer-content {
    display: flex;
    flex-direction: column; /* Stack copyright and social links vertically by default */
    align-items: center;
    gap: 15px; /* Space between copyright and social links */
}

.footer-social-links {
    display: flex;
    gap: 20px; /* Space between social icons */
    margin-top: 10px; /* Add some space if they are below copyright */
}

.footer-social-links a {
    color: #a0a0a0; /* Match footer text color */
    font-size: 1.6em; /* Adjust size as needed */
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.footer-social-links a:hover {
    color: #ffffff; /* White on hover */
    transform: scale(1.1);
    text-decoration: none; /* Remove underline from icons */
}

/* On larger screens, make footer content side-by-side */
@media (min-width: 768px) {
    .footer-content {
        flex-direction: row;
        justify-content: space-between;
    }
    .footer-social-links {
        margin-top: 0; /* Reset margin when side-by-side */
    }
}

/* Reveal on Scroll Animation */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(50px); /* Start slightly lower */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform; /* Optimize for animations */
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Page Load Fade-In Animation */
.fade-in-on-load {
    animation: fadeInAnimation 0.8s ease-out forwards;
}

@keyframes fadeInAnimation {
    from {
        opacity: 0;
        transform: translateY(20px); /* Optional: slight upward movement */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Parallax Background Styling */
.parallax-bg {
    background-attachment: fixed; /* This is key for the basic parallax effect, but JS will override position */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative; /* Needed for z-index stacking if content is overlaid */
}

/* Optional: Add an overlay to parallax sections for better text readability */
.parallax-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3); /* Adjust color and opacity as needed */
    z-index: 1;
}

/* Ensure content within parallax is above the overlay */
.parallax-bg > * {
    position: relative;
    z-index: 2;
}