/* ============================================================
   header.css — Site Header & Navigation Styles
   ============================================================ */


/* ── 1. CSS Custom Properties (Design Tokens) ─────────────── */
:root {
    --color-primary: #024a26;
    --color-primary-light: #06763e;
    --color-bg-header: rgb(238, 255, 241);

    --color-indicator-bg: rgb(138, 197, 138);
    --color-indicator-fg: rgb(4, 110, 4);

    --color-nav-link: #080000;
    --color-nav-hover-bg: #ffffff;
    --color-nav-hover-text: #024a26;

    --color-menu-bg: linear-gradient(135deg, #362f2fa9 25%, #949c89b2 75%);
    --color-menu-border: rgb(0, 0, 0);
    --color-menu-shadow: rgba(0, 0, 0, 0.575);

    --shadow-soft: 0 2px 4px rgba(0, 0, 0, 0.2),
        0 8px 20px rgba(0, 0, 0, 0.1);

    --logo-size: 60px;
    --header-gap: 10px;
    --header-upper: 50px;
    --header-lower: 100px;
    --transition-speed: 0.3s;
}


/* ── 2. Base Reset ────────────────────────────────────────── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ── 3. Header Layout ─────────────────────────────────────── */

header {
    padding: 0;
    margin: 0;
}

header h4, p {
    margin: 0;
    font-size: 12px;
}

.header-upper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: white;
    background-color: #003C22;
    padding: 10px 50px;
    height: var(--header-contact);
}

.header-contact {
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    gap: var(--header-gap);
}

.header-contact a {
    display: inline-block;
    text-decoration: none;
}

.header-social-icons {
    height: 20px;
    width: 20px;
    color: #ffffff;
}

.header-social-icons path {
    fill: #ffffff;
}

.header-contact p {
    margin: 0;
}

.header-lower {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2% 1%;
    /* background-color: var(--color-bg-header); */
    background-color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--header-lower);
}


/* ── 4. Logo / Brand Section ──────────────────────────────── */
#name-div {
    display: flex;
    align-items: center;
    margin-left: 2%;
}

#School_logo {
    border-radius: 50%;
    width: var(--logo-size);
    height: var(--logo-size);
    margin-right: 15px;
}

#Name p {
    font-size: 3rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 0;
}

#Name #tag {
    font-size: 0.95rem;
    color: var(--color-primary-light);
}


/* ── 5. Navigation List ───────────────────────────────────── */
#navigation-buttons-div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    margin-right: 3%;
    margin-bottom: 0;
    gap: var(--header-gap);
}


/* ── 6. Nav Item ──────────────────────────────────────────── */
.li-btn {
    position: relative;
    list-style: none;
    display: inline-block;
    background-color: transparent;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    color: var(--color-primary);
    cursor: pointer;
    border-radius: 0px;
    transition: background-color var(--transition-speed) ease,
        color var(--transition-speed) ease,
        border-radius var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease;
}

.li-btn:hover {
    background-color: var(--color-nav-hover-bg);
    color: var(--color-nav-hover-text) !important;
    border-radius: 10px;
    box-shadow: var(--shadow-soft);
}


/* ── 7. Nav Item — Corner Accents on Hover (desktop only) ─── */
/*
   ::before → top-left corner accent
   ::after  → bottom-right corner accent
   Scoped to desktop so they don't interfere with mobile menu
*/
@media (min-width: 1287px) {
   
    .li-btn::before,
    .li-btn::after {
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        border-color: var(--color-primary);
        border-style: solid;
        opacity: 0;
        transition: opacity var(--transition-speed) ease,
            transform var(--transition-speed) ease;
    }

    /* Top-left corner */
    .li-btn::before {
        top: 4px;
        left: 4px;
        border-width: 2px 0 0 2px;
        border-radius: 3px 0 0 0;
        transform: translate(-4px, -4px);
    }

    /* Bottom-right corner */
    .li-btn::after {
        bottom: 4px;
        right: 4px;
        border-width: 0 2px 2px 0;
        border-radius: 0 0 3px 0;
        transform: translate(4px, 4px);
    }

    .li-btn:hover::before,
    .li-btn:hover::after {
        opacity: 1;
        transform: translate(0, 0);
    }
}


/* ── 8. Nav Links ─────────────────────────────────────────── */
.li-btn a {
    text-decoration: none;
    color: var(--color-nav-link);
    transition: color var(--transition-speed) ease;
}

.li-btn:hover a {
    color: var(--color-nav-hover-text);
}


/* ── 9. Active Tab State ──────────────────────────────────── */
.li-btn.active a {
    color: var(--color-primary);
}

.li-btn.active:hover a {
    color: var(--color-nav-hover-text);
}


/* ── 10. Active Tab Indicator Bar ─────────────────────────── */
.li-btn .indicator {
    margin-top: 10px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 3px;
    background-color: var(--color-indicator-bg);
    visibility: hidden;
}

.li-btn .indicator::after {
    content: '';
    border-radius: 10px;
    width: 60%;
    height: 7px;
    background-color: var(--color-indicator-fg);
    position: relative;
    top: -50%;
}

.li-btn.active .indicator {
    visibility: visible;
}


/* ── 11. Login Button ─────────────────────────────────────── */
.li-btn.login {
    background-color: var(--color-nav-hover-text);
    color: var(--color-nav-hover-bg) !important;
    border-radius: 10px;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* ── 12. Hamburger Icon ───────────────────────────────────── */
#menu-div-div {
    display: none;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
    cursor: pointer;
}

#menu-div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: transform var(--transition-speed) ease;
}

/* Each bar transitions individually for X animation */
.hr-tag {
    width: 24px;
    height: 3px;
    background-color: var(--color-primary);
    border: none;
    border-radius: 5px;
    margin: 0;
    transform-origin: center;
    transition: transform var(--transition-speed) ease,
        opacity var(--transition-speed) ease,
        width var(--transition-speed) ease;
}

/* Animate 3 bars into an X when active */
#menu-div.active .hr-tag:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

#menu-div.active .hr-tag:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

#menu-div.active .hr-tag:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/* ── 13. Responsive — Tablet / Mobile (≤ 1286px) ─────────── */
@media (max-width: 1286px) {
    .header-upper{
        display: none;
    }
    #menu-div-div {
        display: flex;
    }

    /* ── Dropdown menu — hidden state ── */
    #navigation-buttons-div {
        position: absolute;
        top: 80px;
        right: 20px;
        flex-direction: column;
        align-items: stretch;
        /* full-width items */
        gap: 4px;
        background: var(--color-menu-bg);
        padding: 12px;
        border-radius: 12px;
        border: 2px solid var(--color-menu-border);
        box-shadow: 0 8px 20px var(--color-menu-shadow);
        min-width: 180px;

        display: flex;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px) scale(0.97);
        pointer-events: none;
        transition: opacity var(--transition-speed) ease,
            visibility var(--transition-speed) ease,
            transform var(--transition-speed) ease;
    }

    /* ── Dropdown menu — visible state ── */
    #navigation-buttons-div.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    /* ── Nav items: reset to block layout in dropdown ── */
    .li-btn {
        display: block;
        width: 100%;
        border-radius: 8px;
        color: #ffffff;
        padding: 0.6rem 1rem;

        /* Start offscreen for stagger animation */
        opacity: 0;
        transform: translateX(20px);
        transition: background-color var(--transition-speed) ease,
            color var(--transition-speed) ease,
            border-radius var(--transition-speed) ease,
            box-shadow var(--transition-speed) ease;
        /* NOTE: opacity/transform handled by animation below */
    }

    /* ── Staggered slide-in when menu opens ── */
    #navigation-buttons-div.show .li-btn {
        animation: slideInRight 0.35s ease forwards;
    }

    #navigation-buttons-div.show .li-btn:nth-child(1) {
        animation-delay: 0.04s;
    }

    #navigation-buttons-div.show .li-btn:nth-child(2) {
        animation-delay: 0.09s;
    }

    #navigation-buttons-div.show .li-btn:nth-child(3) {
        animation-delay: 0.14s;
    }

    #navigation-buttons-div.show .li-btn:nth-child(4) {
        animation-delay: 0.19s;
    }

    #navigation-buttons-div.show .li-btn:nth-child(5) {
        animation-delay: 0.24s;
    }

    #navigation-buttons-div.show .li-btn:nth-child(6) {
        animation-delay: 0.29s;
    }

    /* ── Nav links white inside dark dropdown ── */
    .li-btn a {
        color: #ffffff;
        display: block;
    }

    .li-btn:hover {
        background-color: rgba(255, 255, 255, 0.15);
        color: #ffffff !important;
        border-radius: 8px;
        box-shadow: none;
    }

    .li-btn:hover a {
        color: #ffffff;
    }

    /* ── Hide indicator bar in mobile (doesn't fit dropdown) ── */
    .li-btn .indicator {
        display: none;
    }

    /* ── Login button inside mobile menu ── */
    .li-btn.login {
        background-color: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.4);
        color: #ffffff !important;
        margin-bottom: 0;
        margin-top: 4px;
    }

    .login-btn {
        display: none;
    }
}

/* ── Keyframe: slide in from right ── */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* ── 14. Responsive — Small Mobile (≤ 435px) ─────────────── */
@media (max-width: 435px) {
    .header-upper{
        display: none;
    }
    #Name p {
        font-size: 1.2rem;
    }

    #navigation-buttons-div {
        right: 10px;
        top: 70px;
        min-width: 160px;
    }
}