/* narbar-menu-interactions.css */

/* ----------------------------------- */
/* GLOBAL SCROLL + DROPDOWN ANIMATIONS */
/* ----------------------------------- */
html {
    scroll-behavior: smooth; /* Makes page scroll smoothly when using anchor links */
}

/* Dropdown base animation (before opening) */
.dropdown-animate {
    transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth fade + slide animation */
    transform: translateY(-10px); /* Move dropdown slightly up (hidden start) */
    opacity: 0; /* Hidden at first */
    pointer-events: none; /* Prevent clicks when hidden */
}

/* Dropdown active state (when opened) */
.dropdown-animate.active {
    transform: translateY(0); /* Slide dropdown into view */
    opacity: 1; /* Make it visible */
    pointer-events: auto; /* Allow clicking */
}

/* ------------------------------- */
/* EDGE-SAFE HAMBURGER STYLING    */
/* ------------------------------- */
#hamburger-btn {
    position: relative; /* Keep position control inside header */
    background: transparent !important; /* No background behind the button */
    border: none; /* Remove border */
    outline: none; /* Remove outline on click */
    z-index: 9999; /* Keep button above all other elements */
}

#hamburger-btn span {
    display: block; /* Show as a block (bars stacked) */
    width: 100%; /* Each bar stretches full width of button */
    height: 3px; /* Bar thickness */
    background-color: #1e3a8a !important; /* Navy blue color */
    border-radius: 2px; /* Rounded bar corners */
    transition: transform 0.4s, opacity 0.4s, background-color 0.3s ease; /* Smooth animations */
}

/* Hamburger animation (when opened → makes “X”) */
.hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg); /* Move first bar down and rotate */
}
.hamburger.active span:nth-child(2) {
    opacity: 0; /* Hide middle bar */
}
.hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg); /* Move last bar up and rotate */
}

/* Dark mode or high contrast: change bars to white */
@media (prefers-contrast: more), (prefers-color-scheme: dark) {
    #hamburger-btn span {
        background-color: #ffffff !important; /* White bars for visibility */
    }
}

/* ------------------------------- */
/* NAV MENU LINKS + HOVER EFFECTS  */
/* ------------------------------- */
#nav-menu a {
    position: relative; /* Needed for underline animation */
    display: inline-block; /* Keep links side-by-side */
    padding-bottom: 4px; /* Space under text */
    transition: color 0.3s ease; /* Smooth color change on hover */
}

/* Hidden underline for link */
#nav-menu a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0; /* Hidden at first */
    height: 2px;
    background-color: #1e3a8a; /* Navy underline */
    transition: width 0.3s ease; /* Expands smoothly */
}

/* Underline appears on hover */
#nav-menu a:hover::after {
    width: 100%; /* Stretch underline fully */
}

/* Text color changes slightly on hover */
#nav-menu a:hover {
    color: #1d4ed8;
}

/* ------------------------------- */
/* DROPDOWN TITLE & ANIMATION      */
/* ------------------------------- */
.dropdown-trigger {
    display: inline-flex; /* Keep text + arrow inline */
    align-items: center; /* Center vertically */
    gap: 4px; /* Small space between text and arrow */
    position: relative; /* Needed for underline animation */
    padding-bottom: 4px;
    transition: color 0.3s ease; /* Smooth color transition */
    cursor: pointer; /* Make it look clickable */
}

/* Underline for dropdown titles */
.dropdown-trigger::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0; /* Hidden at first */
    height: 2px;
    background-color: #1e3a8a;
    transition: width 0.3s ease;
}

/* Underline + color change when hovered or focused */
.group:hover .dropdown-trigger::after,
.group:focus-within .dropdown-trigger::after {
    width: 100%;
}
.group:hover .dropdown-trigger,
.group:focus-within .dropdown-trigger {
    color: #1d4ed8;
}

/* ------------------------------- */
/* DROPDOWN MENU ITEM STYLING      */
/* ------------------------------- */
.dropdown a {
    display: block; /* Each menu link full width */
    width: 100%;
    padding: 10px 16px; /* Space around text */
    color: #1e3a8a; /* Navy text */
    border-radius: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-decoration: none; /* Remove underline */
}

/* Change color and background on hover */
.dropdown a:hover {
    background-color: #eff6ff; /* Light blue hover */
    color: #1d4ed8;
}

/* Disable link underline effect inside dropdown */
.dropdown a::after {
    content: none !important;
}

/* ------------------------------- */
/* DESKTOP HOVER FIX               */
/* ------------------------------- */
@media (min-width: 768px) {
    .group:hover .dropdown-animate {
        opacity: 1; /* Show dropdown */
        transform: translateY(0); /* Slide into place */
        pointer-events: auto; /* Allow clicking */
        display: block !important;
    }
    .group:hover::after {
        /* Keeps dropdown open when moving mouse between title and menu */
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 10px;
    }
}

/* ------------------------------- */
/* MOBILE NAVBAR ALIGNMENT FIX     */
/* ------------------------------- */
@media (max-width: 767px) {
    /* Make header items line up properly */
    header > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Move hamburger button to right */
    #hamburger-btn {
        margin-left: auto !important;
        margin-right: 1rem !important;
        order: 2;
    }

    nav {
        order: 3; /* Menu appears after hamburger */
    }

    header .flex.items-center.ml-4 {
        order: 1; /* Keep logo first */
    }

    /* Make dropdown trigger take full width */
    .dropdown-trigger {
        display: flex;
        align-items: center;
        position: relative;
        width: 100%;
    }

    .dropdown-trigger span {
        flex-shrink: 0; /* Keep text fixed width */
    }

    /* Style for dropdown arrows */
    .dropdown-trigger svg {
        margin-left: 0.5rem;
        transition: transform 0.3s ease, margin-left 0.3s ease;
        width: 1rem;
        height: 1rem;
    }

    /* Adjust arrow when hamburger is open (X) */
    #hamburger-btn.active ~ nav #nav-menu .dropdown-trigger svg {
        margin-left: auto;
        transform: translateX(-1rem);
    }

    /* ------------------------------- */
    /* MOBILE DROPDOWN MENU - CLEAN STYLE */
    /* ------------------------------- */
    .dropdown.dropdown-animate {
        position: static !important; /* Stay under title */
        display: none; /* Hidden by default */
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        box-shadow: none !important;
        width: 100% !important;
        margin-top: 0 !important;
        max-height: 0; /* Start collapsed */
        overflow: hidden; /* Hide extra content */
        transition: max-height 0.4s ease-out, padding 0.3s ease-out; /* Smooth open/close */
    }

    .dropdown.dropdown-animate.active {
        display: block !important; /* Show dropdown */
        max-height: 600px; /* Enough space for menu items */
        padding-top: 0.5rem; /* Add spacing */
        padding-bottom: 0.5rem;
    }

    /* Each link inside dropdown */
    .dropdown.dropdown-animate a {
        display: block;
        width: 100%;
        padding: 10px 16px;
        color: #1e3a8a;
        border-radius: 0;
        opacity: 0; /* Hidden start */
        transform: translateY(-5px); /* Slightly above */
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .dropdown.dropdown-animate.active a {
        opacity: 1; /* Fade in */
        transform: translateY(0); /* Move into place */
    }

    /* Rotate arrow when dropdown opens */
    .dropdown-trigger svg.rotate-180 {
        transform: rotate(180deg);
    }

    #nav-menu li {
        width: 100%; /* Each item takes full width */
    }

    /* ------------------------------- */
    /* MOBILE DROPDOWN ICON ALIGNMENT  */
    /* ------------------------------- */
    @media (max-width: 767px) {
        /* Control arrow position and size */
        .dropdown-trigger svg {
            width: 1.25rem; /* Make arrow slightly bigger */
            height: 1.25rem;
            position: relative;
            top: 0; /* Keep in line with text */
            margin-left: auto; /* Push to right side */
            margin-right: 1rem; /* Add space from right edge */
            transform: translateX(-14px); /* Move arrow slightly left */
            transition: transform 0.3s ease, margin-right 0.3s ease;
        }

        /* Adjust arrow again when menu is open */
        #hamburger-btn.active ~ nav #nav-menu .dropdown-trigger svg {
            transform: translateX(-16px); /* Move a bit more left to match X icon */
        }
    }
}