/* --- Basic Reset & Setup --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* Enables smooth scrolling when clicking nav links */
    scroll-behavior: smooth;
}

/* UPDATED: Add CSS Variables from the Apple example (Dark Theme) */
body {
    /* --- NEW: Apple Switcher Variables (Dark) --- */
    --c-glass: #bbbbbc;
    --c-light: #fff;
    --c-dark: #000;
    --c-content: #e1e1e1;
    --c-action: #03d5ff; /* This will be your new link color */
    --c-bg: #1b1b1d; /* This is your new body background */
    --glass-reflex-dark: 2;
    --glass-reflex-light: 0.3;
    --saturation: 150%;
    /* --- End New Variables --- */

    font-family: 'Lato', sans-serif;
    line-height: 1.6;
    /* UPDATED: Use variables */
    background-color: var(--c-bg); 
    color: var(--c-content);
    
    /* NEW: Add transition for consistency */
    transition: background 400ms cubic-bezier(1, 0, 0.4, 1),
    color 400ms cubic-bezier(1, 0, 0.4, 1);
}
h1, h2, h3, h4, h5, p, label,
.logo, .nav-links a, .tech-pill {
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 
                 0 0 10px rgba(0, 0, 0, 0.7);
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    /* UPDATED: A bright, off-white for headings */
    color: #f5f5f5;
    margin-bottom: 1rem;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.5rem; }

p {
    margin-bottom: 1rem;
    /* UPDATED: Ensure paragraphs also use the light body color */
    color: var(--c-content);
}

a {
    /* UPDATED: Use the action color variable */
    color: var(--c-action);
    text-decoration: none;
    /* NEW: Add transitions from Apple example */
    text-decoration-thickness: 0.05em;
    text-underline-position: under;
    text-decoration-color: color-mix(in srgb, currentColor, transparent 70%);
    transition: color 160ms, text-decoration-color 160ms;
}

/* NEW: Hover effect from Apple example */
a:hover {
  color: color-mix(in srgb, var(--c-action), var(--c-content) 40%);
  text-decoration-color: color-mix(in srgb, currentColor, transparent 30%);
}


/* --- Layout & Sections --- */
main {
    width: 100%;
}

section {
    padding: 6rem 2rem;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
    background-color: transparent;
}

/*
 * --- THIS RULE IS NOW CORRECTED ---
 * The flex properties that centered content have been removed,
 * as our new sections have their own internal layouts.
 * The min-height is kept for the scroll-trigger animations.
*/
section:not(#about) {
    padding: 2rem;
}



/* --- Add to end of style.css --- */

@media (max-width: 820px) {
    /* Reduce base heading sizes */
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    /* Reduce vertical padding on sections */
    section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

@media (max-width: 480px) {
    /* Further reduce for small phones */
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }
}