/* Header nav responsive font sizing - MUST load after tailwind.css to override lg:text-base xl:text-lg
   Below 1024px: mobile header takes over via lg: breakpoint */

/* Dropdown overlay: position below header so nav items remain hoverable when moving between dropdowns */
.header-dropdown-overlay {
  position: fixed !important;
  top: 150px !important; /* Start below header (logo + nav bar) - keeps nav bar hoverable */
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 40;
}



/* 1536px+ - Large screens: comfortable spacing */
@media (min-width: 1536px) {
  .aegov-header .header-desktop .header-navs .menu.nav-menu {
    gap: 0.5rem !important;
  }
  .aegov-header .header-desktop .header-navs .menu.nav-menu .menu-item button,
  .aegov-header .header-desktop .header-navs .menu.nav-menu .menu-item > a {
    font-size: 1.12rem !important;
  }
}

/* 1366px+ - Standard size */
@media (min-width: 1366px) {

    .aegov-header .header-desktop .header-navs .menu.nav-menu .menu-item button,
    .aegov-header .header-desktop .header-navs .menu.nav-menu .menu-item > a {
        font-size: 1rem !important;
    }

    .aegov-header[dir="rtl"] .header-desktop .header-navs .menu.nav-menu {
        gap: 0.3rem !important;
    }

        .aegov-header[dir="rtl"] .header-desktop .header-navs .menu.nav-menu .menu-item button,
        .aegov-header[dir="rtl"] .header-desktop .header-navs .menu.nav-menu .menu-item > a {
            font-size: clamp(0.73rem, 0.84vw, 1rem) !important;
        }
}



/* 1024px - 1149px - Compact */
@media (min-width: 1024px) and (max-width: 1150px) {
  /* Give the nav more horizontal space near 1149px */
  .aegov-header .header-desktop .header-navs .container {
    max-width: 100% !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .aegov-header .header-desktop .header-navs .menu.nav-menu {
    gap: 0.05rem !important;
  }
  .aegov-header .header-desktop .header-navs .menu.nav-menu .menu-item button,
  .aegov-header .header-desktop .header-navs .menu.nav-menu .menu-item > a {
    font-size: 0.7rem !important;
    padding-left: 0.3rem !important;
    padding-right: 0.3rem !important;
  }
  .aegov-header .header-desktop .header-navs .menu.nav-menu .menu-item button svg,
  .aegov-header .header-desktop .header-navs .menu.nav-menu .menu-item > a svg {
    width: 0.7rem !important;
    height: 0.7rem !important;
  }
  .aegov-header .header-desktop .header-navs .menu.nav-menu .menu-item button {
    height: 3rem !important;
  }

  /* Apply Now CTA: make it tighter so it doesn't force wrap */
  .aegov-header .header-desktop .header-navs .menu.nav-menu .menu-item:last-child > a {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    font-size: 0.7rem !important;
  }
}

.top-icon-design{
  display: flex !important;
}

/* ======================================================================
   Active page navigation highlighting
   Extends the design system's .menu-item.active-page > a rule to cover:
   - <button> triggers (Academic Programs, Military, Admission dropdowns)
   - Mobile accordion trigger buttons/divs
   - Active sub-items inside dropdown panels / mobile accordions
   Uses the same color as the design system: rgb(93 59 38) = primary-800
   ====================================================================== */

/* Desktop: submenu trigger baseline
   Use one consistent underline only: no top/left/right border and a fixed
   transparent 2px bottom border. This avoids browser default button borders
   and overrides variable Tailwind border widths from the markup. */
.main-navigation .menu-item > button.military-dropdown-btn,
.main-navigation .menu-item > a.military-dropdown-btn {
    border: none !important;
    border-radius: 0 !important;
    border-bottom: solid 4px transparent !important;
}

/* Desktop: active grouped parent items */
.main-navigation .menu-item.active-page > button.military-dropdown-btn,
.main-navigation .menu-item.active-page > a.military-dropdown-btn {
    color: rgb(93 59 38) !important;
    border: none !important;
    border-bottom: solid 4px rgb(93 59 38) !important;
}

/* Mobile: accordion trigger labels — both <button> and the flex <div> wrapper */
.main-navigation .menu-item.active-page .military-mobile-btn {
    color: rgb(93 59 38) !important;
}

/* Mobile: Cadet Life & Media Center — the <a> lives inside the trigger div */
.main-navigation .menu-item.active-page .military-mobile-btn > a {
    color: rgb(93 59 38) !important;
}

/* Desktop dropdown: active sub-item (bg-gray-50 is applied via Tailwind when active) */
[role="menu"] a.bg-gray-50 {
    color: rgb(93 59 38) !important;
}

/* Mobile accordion content: active sub-item */
.nav-sub-active {
    color: rgb(93 59 38) !important;
    background-color: rgb(249 250 251) !important; /* equivalent to bg-gray-50 */
}

/* 1150px - 1535px: ensure header stays on a single line */
@media (min-width: 1150px) and (max-width: 1535px) {
  /* Let the nav use full viewport width and reduce side padding */
  .aegov-header .header-desktop .header-navs .container {
    max-width: 100% !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .aegov-header .header-desktop .header-navs .menu-main-menu-container {
    column-gap: 0.25rem;
  }

  .aegov-header .header-desktop .header-navs .menu.nav-menu > li > a,
  .aegov-header .header-desktop .header-navs .menu.nav-menu > li > button {
    font-size: 0.75rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }

  .aegov-header .header-desktop .header-navs .menu.nav-menu > li > a span {
    font-size: 0.75rem;
  }

  .aegov-header .header-desktop .header-navs .menu.nav-menu li:last-child > a {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
  }

  /* Right-side icon menu (login, language) – make more compact */
  .aegov-header .header-desktop .header-navs .menu.nav-menu:last-of-type .menu-item > a {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }

  .aegov-header .header-desktop .header-navs .menu.nav-menu:last-of-type .menu-item > a svg {
    width: 1.1rem !important;
    height: 1.1rem !important;
  }
}

/* 1150px - 1263px RTL: Arabic labels are longer, so compress more */
@media (min-width: 1150px) and (max-width: 1264px) {
  .aegov-header[dir="rtl"] .header-desktop .header-navs .container {
    max-width: 100% !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .aegov-header[dir="rtl"] .header-desktop .header-navs .menu-main-menu-container {
    column-gap: 0.12rem !important;
  }

  .aegov-header[dir="rtl"] .header-desktop .header-navs .menu.nav-menu > li > a,
  .aegov-header[dir="rtl"] .header-desktop .header-navs .menu.nav-menu > li > button {
    font-size: 0.68rem !important;
    padding-left: 0.28rem !important;
    padding-right: 0.28rem !important;
  }

  .aegov-header[dir="rtl"] .header-desktop .header-navs .menu.nav-menu > li > a span {
    font-size: 0.68rem !important;
  }

  .aegov-header[dir="rtl"] .header-desktop .header-navs .menu.nav-menu li:last-child > a {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

/* 1280px - 1307px RTL: Arabic labels are longer, so compress more */
@media (min-width: 1280px) and (max-width: 1308px) {
  .aegov-header[dir="rtl"] .header-desktop .header-navs .container {
    max-width: 100% !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .aegov-header[dir="rtl"] .header-desktop .header-navs .menu-main-menu-container {
    column-gap: 0.15rem !important;
  }

  .aegov-header[dir="rtl"] .header-desktop .header-navs .menu.nav-menu > li > a,
  .aegov-header[dir="rtl"] .header-desktop .header-navs .menu.nav-menu > li > button {
    font-size: 0.7rem !important;
    padding-left: 0.3rem !important;
    padding-right: 0.3rem !important;
  }

  .aegov-header[dir="rtl"] .header-desktop .header-navs .menu.nav-menu > li > a span {
    font-size: 0.7rem !important;
  }

  .aegov-header[dir="rtl"] .header-desktop .header-navs .menu.nav-menu li:last-child > a {
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
  }
}

/* 1309px - 1378px RTL: keep Arabic header on one line (avoid wrap in this range) */
@media (min-width: 1309px) and (max-width: 1378px) {
  .aegov-header[dir="rtl"] .header-desktop .header-navs .container {
    max-width: 100% !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .aegov-header[dir="rtl"] .header-desktop .header-navs .menu-main-menu-container {
    column-gap: 0.12rem !important;
    flex-wrap: nowrap !important;
  }

  .aegov-header[dir="rtl"] .header-desktop .header-navs .menu.nav-menu {
    gap: 0.2rem !important;
    flex-wrap: nowrap !important;
  }

  .aegov-header[dir="rtl"] .header-desktop .header-navs .menu.nav-menu > li > a,
  .aegov-header[dir="rtl"] .header-desktop .header-navs .menu.nav-menu > li > button {
    font-size: 0.7rem !important;
    padding-left: 0.28rem !important;
    padding-right: 0.28rem !important;
    white-space: nowrap !important;
  }

  .aegov-header[dir="rtl"] .header-desktop .header-navs .menu.nav-menu > li > a span {
    font-size: 0.7rem !important;
  }

  .aegov-header[dir="rtl"] .header-desktop .header-navs .menu.nav-menu li:last-child > a {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

/* 1920px+ RTL: keep Arabic header on one line at large screens */
@media (min-width: 1589px) {
  .aegov-header[dir="rtl"] .header-desktop .header-navs .container {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .aegov-header[dir="rtl"] .header-desktop .header-navs .menu-main-menu-container {
    column-gap: 0.25rem !important;
    flex-wrap: nowrap !important;
  }

  .aegov-header[dir="rtl"] .header-desktop .header-navs .menu.nav-menu {
    gap: 0.3rem !important;
    flex-wrap: nowrap !important;
  }

  .aegov-header[dir="rtl"] .header-desktop .header-navs .menu.nav-menu .menu-item button,
  .aegov-header[dir="rtl"] .header-desktop .header-navs .menu.nav-menu .menu-item > a {
    font-size: 0.9rem !important;
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
    white-space: nowrap !important;
  }

  .aegov-header[dir="rtl"] .header-desktop .header-navs .menu.nav-menu > li > a span {
    font-size: 0.9rem !important;
  }
}