/* ============================================
   SITE-HEADER.CSS
   ============================================ */

.site-header {
    width: 100%;
    background: var(--color-bg);
    box-shadow: var(--effect-shadow);

    position: relative;
    z-index: 999;
}

.site-header-inner {
	max-width: 1200px;
	margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: var(--layout-padding);
    padding-right: var(--layout-padding);
    height: 80px;
}

.site-header-left img {
    height: 60px;
}

/* Desktop nav */
.site-header-right {
    display: flex;
}

.site-header-ul { 			/* Desktop Menu Items*/
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* DESKTOP MENU LINK STYLING */
.site-header-ul li a {
    font-family: var(--font-base);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text);
    text-decoration: none;
    line-height: 80px;
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
}

.site-header-ul li a:hover,
.site-header-ul li.current-menu-item a {
    color: var(--color-accent);
}




/* Hamburger default hidden */
.site-hamburger {
    display: none;
    font-size: 32px;
    cursor: pointer;
    user-select: none;
}

/* ============================================
   MOBILE MENU (works at ALL sizes ≤600px)
   ============================================ */

/* Default hidden */
.site-mobile-menu {
    display: none;           /* hidden until .open */
    position: static;        /* appear BELOW header */
    width: 100%;
    background: var(--color-bg);
    box-shadow: var(--effect-shadow);

    overflow: hidden;
    max-height: 0;
    transition: max-height 1s ease;
}

/* When JS toggles .open */
.site-mobile-menu.open {
    display: block;
    max-height: 500px;       /* slide-down height */
}

/* Mobile menu UL — horizontal row */
.site-mobile-ul {
    list-style: none;
    margin: 0;
    padding: 20px;

    display: flex;
    flex-direction: row;   /* horizontal */
    flex-wrap: wrap;       /* wrap if needed */
    gap: 20px;
	justify-content: center;   /* ← center items horizontally */
    text-align: center;         /* ← center text inside each item */
}

/* Mobile menu link styling (same as desktop) */
.site-mobile-ul li a {
    font-family: var(--font-base);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text);
    text-decoration: none;
    line-height: 20px; /* mobile-friendly */
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
}

.site-mobile-ul li a:hover,
.site-mobile-ul li.current-menu-item a {
    color: var(--color-accent);
}


/* ============================================
   MOBILE BREAKPOINT (≤600px)
   ============================================ */

@media (max-width: 700px) {

    .site-header-inner {
        padding-left: calc(var(--layout-padding) * 0.5);
        padding-right: calc(var(--layout-padding) * 0.5);
    }

    /* Show hamburger */
    .site-hamburger {
        display: block;
    }

    /* Hide desktop nav */
    .site-header-right {
        display: none;
    }
}

/* ============================================
   DESKTOP (>600px)
   ============================================ */

@media (min-width: 701px) {

    /* Hide mobile menu entirely */
    .site-mobile-menu {
        display: none !important;
        max-height: 0 !important;
    }

    /* Show desktop nav */
    .site-header-right {
        display: flex;
    }

    /* Hide hamburger */
    .site-hamburger {
        display: none;
    }
}