:root {
    /* Brand */
    --brand: #f4ca22;
    --brand-2: #4e2e14;
    --brand-3: #148b6c;
    --accent: #f9f0d3;

    /* Neutrals */
    --bg: #eee6db;
    --surface: #ffffff;
    --text: #F9F9F9;
    --text-light: #fff;
    --muted: #475569;
    --border: #E6F5FC;

    /* Typography */
    /* --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji"; */
    --font-body: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
    --font-display: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
    --font-size-base: 16px;
    --line: 1.5;

    /* Layout */
    --container: 1100px;
    --radius: 5px;

    /* --shadow: 0 10px 30px rgba(2,6,23,.08); */
    --shadow:0 1px 1px rgba(0,0,0,0.05), 
          0 2px 2px rgba(0,0,0,0.05), 
          0 4px 4px rgba(0,0,0,0.05), 
          0 8px 8px rgba(0,0,0,0.05),
          0 16px 16px rgba(0,0,0,0.05);
    --text-shadow: 2px 2px 15px black;

    /* Spacing scale */
    --s-1: 6px;
    --s-2: 10px;
    --s-3: 14px;
    --s-4: 20px;
    --s-5: 28px;
    --s-6: 40px;
    --s-7: 64px;
}

@layer reset {
    /* 1. Universal Box-Sizing */
    *, *::before, *::after {
        box-sizing: border-box;
    }

    /* 2. Global Margin Reset & Typography Fixes */
    * {
        margin: 0;
        padding: 0;
        /*font: inherit;*/ /* Forces form elements to inherit parent fonts */
    }

    /* 3. Root Styling */
    html {
        /* Support system dark mode */
        /*color-scheme: light dark;*/ 
        -webkit-text-size-adjust: none; /* Prevent font-size swelling in iOS */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-size-adjust: none;
        text-rendering: optimizeLegibility;
        scroll-behavior: smooth;
        font-size: var(--font-size-base);
    }

    /* 4. Body Defaults */
    body {
        min-height: 100vh;
        overflow-x: hidden;
        line-height: var(--line); /* Accessible baseline */
    }

    /* 5. Responsive Media & Block Elements */
    :where(img, picture, video, canvas, svg) {
        display: block;
        max-width: 100%;
        height: auto; /* Maintain aspect ratio */
    }

    /* 6. Form & Input Specifics */
    :where(input, button, textarea, select) {
        background: transparent;
        border: none;
        color: inherit;
    }

    /* 7. Typography Wrapping for Readability */
    :where(h1, h2, h3, h4, h5, h6) {
        text-wrap: balance; /* Prevents single-word orphans in headings */
        overflow-wrap: break-word; /* Prevents long words from breaking layout */
    }

    :where(p, li) {
        text-wrap: pretty; /* Better line breaks for body text */
        overflow-wrap: break-word;
    }

    /* 8. Accessibility: Respect Reduced Motion */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}

@layer generals {
    body{
        background-color: var(--bg);
    }

    h1, h2, h3, h4 {
        font-family: var(--font-display);
    }

    p, span {
        font-family: var(--font-body);
    }

    .copyright{
        text-align: center;
    }

    section {
        padding-block: 3rem;
    }

    header {
        /* background-color: var(--accent); */
        z-index: 50;
    }

    footer {
        /* min-height: 30vh; */
        background-color: var(--brand-3);
    }

    .container {
        max-width: var(--container);
        padding-inline: var(--s-3);
        margin-inline: auto;
    }

    .flex {
        display: flex;
        gap: 1rem;
    }
    .grid {
        display: grid;
        gap: 1rem;
        grid-auto-rows: 1fr;
    }
}

h2 {
    font-size: 2rem;
    color: var(--brand-2);
    margin-bottom: 10px;
}

h3 {
    color: var(--brand-3);
}

header {
    height: 0;
    width: 100%;
    overflow: visible;
    position: fixed;    
}

.header-bg-wrapper {
    background: color-mix(in srgb, var(--accent), transparent 75%);
    backdrop-filter: blur(5rem);
    /* border: 1px solid rgba(255, 255, 255, 0.3); */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);

    padding-block: 10px;
    margin: 10px;

    text-align: center;
}

.header-bg-wrapper img {
    height: 40px;
    margin: 0 auto;
}

.hero {
    background-image: url(./assets/media/city-skyline.webp);
    background-size: cover;
    background-position: center;
    min-height: calc(90svh - 85px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
}

.headline {
    /* font-size: 3.5rem; */
    color: var(--brand);
    padding-top: 40px;
    font-size: clamp(2.5rem, 8vw, 4rem);
    /* line-height: 4rem; */
    line-height: clamp(2.5rem, 8vw, 4rem);
    text-shadow: 2px 2px 5px var(--brand-2);
    margin-block: 10px;
}

.subheadline {
    padding-inline: 15px;
    padding-block: 5px;
    color: var(--bg);
    /* color: var(--brand-2); */
    /* background-color: rgba(249, 240, 211, 0.8); */
    background-color: rgba(0, 0, 0, 0.7);
}

.card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background-color: var(--accent);
    /* padding-block: 2rem; */
    /* padding-inline: 1rem; */

    display: flex;
    flex-direction: column;
}

.card > div {
    width: 100%;
}

.card-text{
    padding-block: 2rem;
    padding-inline: 1rem;
}

.card-image {
    width: 100%;
    height: auto;
}

.div-text {
    display: grid;
    justify-content:space-around;
    align-items: center;
    padding-block: 2rem;
    padding-inline: 1rem;
}

footer .content {
    flex-direction: column;
    padding-block: 5rem;
}

.contact,.identity {
    padding-inline: var(--s-7);
    padding-block: var(--s-4);
    align-items: center;
}

footer .identity {
    font-size: 0.85rem;
}

footer .contact {
    justify-content: center;
}

footer a {
    text-decoration: none;
    color: var(--brand);
}

@media (max-width: 768px) {
    .active-initiative {
        background-image: url(./assets/media/traffic-calming.webp);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        
        min-height: 70vh;
    }
    
    .active-initiative .div-image {
        display: none;
    }

    .div-text > div {
        padding-block: 2rem;
        padding-inline: 1rem;
        background-color: rgba(249, 240, 211, 0.7);

        /* background-image: radial-gradient(45deg, rgb(15 31 55), rgb(13 126 156)); */
        border-radius: var(--radius);
        box-shadow: var(--shadow);
    }
}

@media (min-width: 768px) {
    .card {
        flex-direction: row;
    }

    .card > div {
        flex: 1;
    }

    .active-initiative {
        flex-direction: row;
    }

    .contact,.identity {
        flex: 1;
    }

    footer .content {
        flex-direction: row;
    }
}

/* ------- scrolly ------- */
/* Initial state: Hidden and shifted down */
.reveal {
    opacity: 0;
    transform: translateY(100px);
    transition: all 1s ease-out;
    visibility: hidden;
}

/* Active state: Faded in and moved to original position */
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}