.menu-item {
    position: relative;
    display: flex;
    align-items: center;
}

.menu-item > a {
    display: block;
}

.submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 30px;
    padding: 0;
    border: 0;
    color: var(--navy);
    background: transparent;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.submenu {
    position: absolute;
    z-index: 40;
    top: 100%;
    left: 0;
    display: none;
    min-width: 225px;
    padding: 8px;
    border-top: 3px solid var(--gold);
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(4, 31, 48, 0.18);
}

.menu-item:hover .submenu,
.menu-item:focus-within .submenu,
.menu-item.submenu-open .submenu {
    display: block;
}

.submenu a {
    display: block;
    padding: 11px 12px;
    color: var(--navy);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

.submenu a:hover,
.submenu a.active {
    color: #ffffff;
    background: var(--navy);
}

.footer-child-link {
    margin-left: 11px !important;
    color: #d2e1e8 !important;
    font-size: 11px !important;
}

@media (max-width: 570px) {
    .menu.mobile-open .menu-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
    }

    .menu.mobile-open .menu-item > a {
        flex: 1 1 auto;
    }

    .menu.mobile-open .submenu-toggle {
        width: 38px;
        color: var(--navy);
    }

    .menu.mobile-open .submenu {
        position: static;
        flex: 0 0 100%;
        width: 100%;
        margin-top: 5px;
        box-shadow: none;
    }

    .menu.mobile-open .menu-item:hover .submenu {
        display: none;
    }

    .menu.mobile-open .menu-item.submenu-open .submenu {
        display: block;
    }
}


/* Online Admission dropdown button */
.nav > .wrap > .menu-item.has-children:has(> a.apply) {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 44px;
    padding: 0;
    background: var(--gold);
}

/* Restore compact original button appearance */
.nav > .wrap > .menu-item.has-children > a.apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-height: 44px;
    padding: 0 7px 0 16px;
    background: transparent;
    color: #19313d;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

/* Arrow must appear inside the gold button */
.nav > .wrap > .menu-item.has-children:has(> a.apply)
.submenu-toggle {
    width: 27px;
    height: 44px;
    margin: 0;
    padding: 0;
    color: #19313d;
    background: transparent;
}

/* Hover over entire button */
.nav > .wrap > .menu-item.has-children:has(> a.apply):hover {
    background: var(--navy);
}

.nav > .wrap > .menu-item.has-children:has(> a.apply):hover > a,
.nav > .wrap > .menu-item.has-children:has(> a.apply):hover
.submenu-toggle {
    color: #ffffff;
}

/* Keep dropdown aligned with the button */
.nav > .wrap > .menu-item.has-children:has(> a.apply) > .submenu {
    top: 100%;
    left: 0;
}

/* ==========================================
   QURTUBA — PROFESSIONAL NAVIGATION TYPOGRAPHY
   ========================================== */

/* Match LOGIN typography to the main menu */
.nav > .wrap > .menu-item.has-children:not(:has(> a.apply)) > a {
    font-family: inherit;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: var(--navy);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

/* Align text and arrow on the same horizontal line */
.nav > .wrap > .menu-item.has-children {
    align-items: center;
    gap: 3px;
}

/* Small, consistent dropdown arrows */
.nav > .wrap > .menu-item.has-children > .submenu-toggle {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

/* Keep LOGIN hover styling consistent */
.nav > .wrap > .menu-item.has-children:not(:has(> a.apply)):hover > a {
    color: var(--gold);
}

/* Ensure ONLINE ADMISSION retains its gold button */
.nav > .wrap > .menu-item.has-children:has(> a.apply) {
    gap: 0;
}

/* ==========================================
   QURTUBA — CLEAN DROPDOWN HOVER STYLING
   ========================================== */

/* Disable main navigation underline inside dropdowns */
.nav .submenu a::after,
.nav .submenu a::before {
    display: none !important;
    content: none !important;
}

/* Clean submenu links */
.nav .submenu a {
    position: relative;
    display: block;
    padding: 12px 15px;
    color: var(--navy);
    background: transparent;
    text-decoration: none;
    border: none;
    box-shadow: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Professional hover and active appearance */
.nav .submenu a:hover,
.nav .submenu a:focus-visible,
.nav .submenu a.active {
    background: var(--navy);
    color: #ffffff;
    text-decoration: none;
}

/* Prevent decorative underline from crossing dropdown text */
.nav .submenu a:hover::after,
.nav .submenu a.active::after {
    display: none !important;
}