/* -------- Tokens / CSS Variables -------- */
:root {
    /* Brand (from project brief) */
    --brand-green: #044c26;   /* Main Color in logo */
    --brand-gold:  #c39933;   /* Secondary Color in logo */

    --brand-gold-dark:  #926c12;

    /* Neutrals */
    --grey-900: #1a1a1a;
    --grey-800: #2a2a2a;
    --grey-700: #4a4a4a;
    --grey-600: #5f5f5f;
    --grey-500: #8a8a8a;
    --grey-300: #e6e6e6;
    --grey-200: #efefef;
    --grey-100: #f7f7f7;
    --white:    #ffffff;

    /* Feedback */
    --success: #2e7d32;
    --warning: #b26a00;
    --error:   #c62828;
    --info:    #1565c0;

    /* Spacing (4/8px scale) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* Radii & Shadows */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;

    --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
    --shadow-sm: 0 2px 6px rgba(0,0,0,.08);
    --shadow-md: 0 8px 24px rgba(0,0,0,.12);

    /* Typography */
    --text-base: 16px;
    --lh: 1.6;
}

/* -------- main-Layout -------- */
/* Header shell */
.site-header {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1000; /* keeps header above hero images */
    background: var(--white, #ffffff);
    border-bottom: 1px solid var(--grey-300, #e6e6e6);
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* Header layout */
.header-grid {
    width: 80%;
    margin-left: 10%;
    display: grid;
    grid-template-columns: auto 1fr auto; /* logo | spacer | toggle/nav */
    align-items: center;
    gap: var(--space-4, 16px);
    padding-block: var(--space-3, 12px);
}

/* Brand link */
.logo {
    /* font-weight: 800;
    text-decoration: none;
    color: var(--grey-900, #1a1a1a);
    letter-spacing: -0.02em; */
    width: 20%;
}

/* Mobile menu button (hamburger) */
.nav-toggle {
    appearance: none;
    border: 1px solid var(--grey-300, #e6e6e6);
    background: var(--white, #ffffff);
    color: var(--grey-900, #1a1a1a);
    border-radius: var(--radius-sm, 6px);
    padding: 10px 12px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}

/* Hamburger bars */
.nav-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--grey-900, #1a1a1a);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle-bar + .nav-toggle-bar { margin-top: 5px; }

/* Primary nav */
.main-nav {
    display: none; /* hidden by default on small screens */
}
.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2, 8px);
    align-items: center;
}
.main-nav li {
    display: flex;
    align-items: center;
}
/* .main-nav a {
    display: inline-block;
    padding: 10px 12px;
    border-radius: var(--radius-sm, 6px);
    color: var(--grey-900, #1a1a1a);
    text-decoration: none;
    font-weight: 700;
    align-items: center;
    line-height: 1; /* keeps baselines from shifting */
.main-nav a {
    display: inline-flex;              /* was inline-block */
    align-items: center;               /* now actually works */
    justify-content: center;
    padding: 10px 12px;
    border-radius: var(--radius-sm, 6px);
    color: var(--grey-900, #1a1a1a);
    text-decoration: none;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;            /* helps if any browser treats as inline */
}

.main-nav a:hover {
    background: var(--grey-100, #f7f7f7);
}

/* Active nav link */
.main-nav a[aria-current="page"]:hover {
    background: var(--grey-100, #f7f7f7);
}
/* underline active link */
.site-header a[aria-current="page"] {
    color: var(--brand-green);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}


/* Open states (works with your JS and also via aria-expanded) */
.site-header.is-open .main-nav,
.nav-toggle[aria-expanded="true"] + .main-nav {
    display: block;
}

/* Animate hamburger → “X” when open */
.site-header.is-open .nav-toggle-bar:nth-child(1),
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.site-header.is-open .nav-toggle-bar:nth-child(2),
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}
.site-header.is-open .nav-toggle-bar:nth-child(3),
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* === Fix: stack hamburger bars vertically on mobile === */
.nav-toggle {
    /* previously: inline-flex row */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;     /* <— stack bars top-to-bottom */
    gap: 5px;                   /* space between bars (replaces margin) */
}

/* Ensure each bar renders as a line and relies on gap (not margins) */
.nav-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--grey-900, #1a1a1a);
    border-radius: 2px;
}
.nav-toggle-bar + .nav-toggle-bar {
    margin-top: 0;              /* gap handles spacing */
}

/* Make sure the nav opens even if there’s a wrapper between
   the button and the <nav> (general-sibling instead of adjacent). */
.site-header.is-open .main-nav,
.nav-toggle[aria-expanded="true"] ~ .main-nav {
    display: block;
}

/* Open-state “X” animation distances assume 2px bar + 5px gap = 7px */
.site-header.is-open .nav-toggle-bar:nth-child(1),
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.site-header.is-open .nav-toggle-bar:nth-child(2),
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}
.site-header.is-open .nav-toggle-bar:nth-child(3),
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* Footer */
.site-footer {
    margin-top: var(--space-8, 64px);
    padding: 10px;
    padding-left: 10%;
    border-top: 1px solid var(--grey-300, #e6e6e6);
    background: var(--grey-100, #f7f7f7);
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.site-footer .container {
    padding-block: var(--space-6, 32px);
    color: var(--grey-700, #4a4a4a);
    font-size: 0.9375rem;
}

/* Responsive: show horizontal nav & hide burger on md+ */
@media (min-width: 768px) {
    .header-grid {
        padding-block: var(--space-4, 16px);
    }
    .nav-toggle {
        display: none;
    }
    .main-nav {
        display: block;
        justify-self: end;
    }
    .main-nav ul {
        display: flex;                     /* override grid */
        gap: var(--space-4, 16px);
        align-items: center;
    }

        /* ============================================================
       Desktop only: nav vertical alignment (fix “Home sits higher”)
       ============================================================ */
    .main-nav li {
        display: flex;
        align-items: stretch;
        margin: 0;
        padding: 0;
    }

    .main-nav a {
        display: flex;
        align-items: center;
        height: 44px;           /* same height for every link */
        padding: 0 12px;        /* consistent box */
        line-height: 1;         /* prevent baseline shifts */
    }
}

@media (max-width: 1080px) {
    .header-grid{
        width: 90%;
        margin-left: 5%;
    }

    .logo{
        width: 45%;

    }

}

@media (max-width: 520px) {

    .header-grid{
        width: 90%;
        margin-left: 5%;
    }
    .site-footer{
        display: flex;
        flex-wrap: wrap;
    }
    .nav-toggle{
        z-index: 5000;
    }
    

    
}