/* ==========================================================================
   GovState - Admissions Sub Menu
   Horizontal secondary navigation, sits between the breadcrumb and the hero.

   Desktop (768px and up): horizontal bar, level 2 panels open on hover and
   keyboard focus. CSS only.

   Mobile (below 768px): collapses behind a hamburger button on the right.
   Parent items get their own expand button. Requires admissions-subnav.js,
   which injects the buttons and adds .is-enhanced to the container.
   Without the JS, mobile shows the full menu stacked and expanded, so the
   links are never lost.

   Markup it targets (Site Studio menu template output):

     div.admissions-subnav
       ul.menu
         li.menu-item.menu-item--expanded
           a
           ul.menu                <- level 2
         li.menu-item             <- no children

   Markup the JS adds:

     div.admissions-subnav.is-enhanced(.is-open)
       div.admissions-subnav__bar
         span.admissions-subnav__label
         button.admissions-subnav__toggle
       ul.menu
         li.menu-item(.is-expanded)
           a
           button.admissions-subnav__subtoggle
           ul.menu

   Scoped entirely to .admissions-subnav, set in the container's "..." tab
   under Classes and ID. Nothing keys to a coh-ce-* hash.
   ========================================================================== */

.admissions-subnav {
  /* Change these tokens, not the rules below */
  --subnav-bg: #f1f1f1;
  --subnav-text: #2b2b2b;
  --subnav-text-hover: #1b63b0;
  --subnav-accent: #1b63b0;
  --subnav-active-bg: #ffffff;
  --subnav-hover-bg: #f7f7f7;

  --subnav-panel-bg: #ffffff;
  --subnav-panel-text: #2b2b2b;
  --subnav-panel-hover-bg: #f4f7fb;
  --subnav-panel-hover-text: #1b63b0;
  --subnav-panel-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);

  --subnav-max-width: none;     /* set a px value to constrain the bar */
  --subnav-edge-pad: 0;
  --subnav-pad-y: 1.05rem;
  --subnav-pad-x: 1.75rem;

  --subnav-font-size: 1rem;
  --subnav-weight: 600;
  --subnav-indicator: 3px;
  --subnav-caret: none;         /* inline-block to show carets on desktop */

  /* Mobile */
  --subnav-mobile-pad-x: 1.25rem;
  --subnav-mobile-divider: #dcdcdc;
  --subnav-mobile-sub-bg: #f8f8f8;
  --subnav-tap: 2.75rem;        /* 44px minimum touch target */

  /* Stacking. Must sit ABOVE the hero but BELOW the main nav mega menu.
     On mobile the menu opens in normal flow and pushes content down,
     so this value doesn't matter there. */
  --subnav-z: 1;

  position: relative;
  z-index: var(--subnav-z);
  background: var(--subnav-bg);
}

/* --------------------------------------------------------------------------
   Shared (all widths)
   -------------------------------------------------------------------------- */

.admissions-subnav ul.menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admissions-subnav ul.menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admissions-subnav ul.menu li::marker {
  content: none;
}

/* Kill the theme's global underline in every state */
.admissions-subnav a,
.admissions-subnav a:hover,
.admissions-subnav a:focus {
  text-decoration: none;
}

.admissions-subnav a:focus-visible,
.admissions-subnav button:focus-visible {
  outline: 2px solid var(--subnav-accent);
  outline-offset: -2px;
}

/* JS-injected controls are hidden until the mobile query shows them */
.admissions-subnav__bar,
.admissions-subnav__subtoggle {
  display: none;
}

/* ==========================================================================
   DESKTOP: 768px and up
   ========================================================================== */

@media (min-width: 768px) {

  /* Level 1 list */
  .admissions-subnav > ul.menu {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    max-width: var(--subnav-max-width);
    margin: 0 auto;
    padding: 0 var(--subnav-edge-pad);
  }

  .admissions-subnav > ul.menu > li.menu-item {
    position: relative;
    display: flex;
    align-items: stretch;
  }

  /* Level 1 links */
  .admissions-subnav > ul.menu > li.menu-item > a {
    position: relative;
    display: flex;
    align-items: center;
    padding: var(--subnav-pad-y) var(--subnav-pad-x);
    color: var(--subnav-text);
    font-family: inherit;
    font-size: var(--subnav-font-size);
    font-weight: var(--subnav-weight);
    line-height: 1.2;
    white-space: nowrap;
    transition: color 0.15s ease, background-color 0.15s ease;
  }

  /* Indicator bar under the tab */
  .admissions-subnav > ul.menu > li.menu-item::after {
    content: "";
    position: absolute;
    left: var(--subnav-pad-x);
    right: var(--subnav-pad-x);
    bottom: 0;
    height: var(--subnav-indicator);
    background: var(--subnav-accent);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
  }

  .admissions-subnav > ul.menu > li.menu-item:hover > a {
    color: var(--subnav-text-hover);
    background: var(--subnav-hover-bg);
  }

  /* Open, active trail, and current page get the white tab treatment */
  .admissions-subnav > ul.menu > li.menu-item:focus-within > a,
  .admissions-subnav > ul.menu > li.menu-item.menu-item--active-trail > a,
  .admissions-subnav > ul.menu > li.menu-item > a.is-active,
  .admissions-subnav > ul.menu > li.menu-item > a[aria-current="page"] {
    color: var(--subnav-text-hover);
    background: var(--subnav-active-bg);
  }

  .admissions-subnav > ul.menu > li.menu-item:focus-within::after,
  .admissions-subnav > ul.menu > li.menu-item.menu-item--active-trail::after {
    opacity: 1;
  }

  /* Level 2 panels */
  .admissions-subnav > ul.menu > li.menu-item > ul.menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 40;
    min-width: 17rem;
    padding: 0.75rem 0;
    background: var(--subnav-panel-bg);
    box-shadow: var(--subnav-panel-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(3px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  }

  .admissions-subnav > ul.menu > li.menu-item:hover > ul.menu,
  .admissions-subnav > ul.menu > li.menu-item:focus-within > ul.menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .admissions-subnav > ul.menu > li.menu-item > ul.menu a {
    display: block;
    padding: 0.75rem var(--subnav-pad-x);
    color: var(--subnav-panel-text);
    font-size: var(--subnav-font-size);
    font-weight: 400;
    line-height: 1.35;
    white-space: normal;
    transition: color 0.15s ease, background-color 0.15s ease;
  }

  .admissions-subnav > ul.menu > li.menu-item > ul.menu a:hover,
  .admissions-subnav > ul.menu > li.menu-item > ul.menu a:focus-visible {
    color: var(--subnav-panel-hover-text);
    background: var(--subnav-panel-hover-bg);
  }

  .admissions-subnav > ul.menu > li.menu-item > ul.menu a.is-active,
  .admissions-subnav > ul.menu > li.menu-item > ul.menu a[aria-current="page"] {
    color: var(--subnav-panel-hover-text);
    font-weight: 600;
  }

  /* Flip the last panels so they can't push the page wide */
  .admissions-subnav > ul.menu > li.menu-item:last-child > ul.menu,
  .admissions-subnav > ul.menu > li.menu-item:nth-last-child(2) > ul.menu {
    left: auto;
    right: 0;
  }

  /* Optional caret, off by default */
  .admissions-subnav > ul.menu > li.menu-item--expanded > a::after {
    content: "";
    display: var(--subnav-caret);
    width: 0.42em;
    height: 0.42em;
    margin-left: 0.55em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.14em) rotate(45deg);
    transition: transform 0.2s ease;
  }

  .admissions-subnav > ul.menu > li.menu-item--expanded:hover > a::after,
  .admissions-subnav > ul.menu > li.menu-item--expanded:focus-within > a::after {
    transform: translateY(0.08em) rotate(-135deg);
  }
}

/* ==========================================================================
   MOBILE: below 768px
   ========================================================================== */

@media (max-width: 767.98px) {

  /* Toggle bar: section label left, hamburger right */
  .admissions-subnav__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0.5rem 0.25rem var(--subnav-mobile-pad-x);
  }

  .admissions-subnav__label {
    color: var(--subnav-text);
    font-size: var(--subnav-font-size);
    font-weight: var(--subnav-weight);
    line-height: 1.2;
    display:none;
  }

  .admissions-subnav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--subnav-tap);
    height: var(--subnav-tap);
    margin: 0;
    padding: 0;
    color: var(--subnav-text);
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
  }

  .admissions-subnav__toggle:hover {
    color: var(--subnav-accent);
  }

  /* Hamburger icon: middle bar is the span, top and bottom are pseudos */
  .admissions-subnav__icon,
  .admissions-subnav__icon::before,
  .admissions-subnav__icon::after {
    display: block;
    width: 1.375rem;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.2s ease, background-color 0.2s ease;
  }

  .admissions-subnav__icon {
    position: relative;
  }

  .admissions-subnav__icon::before,
  .admissions-subnav__icon::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .admissions-subnav__icon::before { top: -7px; }
  .admissions-subnav__icon::after  { top: 7px; }

  /* Morph to an X when open */
  .admissions-subnav.is-open .admissions-subnav__icon {
    background-color: transparent;
  }

  .admissions-subnav.is-open .admissions-subnav__icon::before {
    transform: translateY(7px) rotate(45deg);
  }

  .admissions-subnav.is-open .admissions-subnav__icon::after {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* The list opens in normal flow and pushes the hero down */
  .admissions-subnav > ul.menu {
    display: block;
    background: var(--subnav-panel-bg);
    border-top: 1px solid var(--subnav-mobile-divider);
  }

  .admissions-subnav.is-enhanced:not(.is-open) > ul.menu {
    display: none;
  }

  /* Each level 1 row: link fills the row, expand button on the right,
     level 2 list wraps underneath at full width */
  .admissions-subnav > ul.menu > li.menu-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: stretch;
    border-bottom: 1px solid var(--subnav-mobile-divider);
  }

  .admissions-subnav > ul.menu > li.menu-item > a {
    display: flex;
    align-items: center;
    min-height: var(--subnav-tap);
    padding: 0.75rem var(--subnav-mobile-pad-x);
    color: var(--subnav-panel-text);
    font-size: var(--subnav-font-size);
    font-weight: var(--subnav-weight);
    line-height: 1.3;
  }

  .admissions-subnav > ul.menu > li.menu-item > a:hover {
    color: var(--subnav-panel-hover-text);
    background: var(--subnav-panel-hover-bg);
  }

  /* Current page and active trail: accent text plus a left marker */
  .admissions-subnav > ul.menu > li.menu-item.menu-item--active-trail > a,
  .admissions-subnav > ul.menu > li.menu-item > a.is-active,
  .admissions-subnav > ul.menu > li.menu-item > a[aria-current="page"] {
    color: var(--subnav-accent);
    box-shadow: inset var(--subnav-indicator) 0 0 var(--subnav-accent);
  }

  /* Expand button for parent items */
  .admissions-subnav__subtoggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    min-height: var(--subnav-tap);
    margin: 0;
    padding: 0;
    color: var(--subnav-text);
    background: transparent;
    border: 0;
    border-left: 1px solid var(--subnav-mobile-divider);
    cursor: pointer;
  }

  .admissions-subnav__subtoggle:hover {
    color: var(--subnav-accent);
    background: var(--subnav-panel-hover-bg);
  }

  .admissions-subnav__subtoggle::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.15rem) rotate(45deg);
    transition: transform 0.2s ease;
  }

  .admissions-subnav li.is-expanded > .admissions-subnav__subtoggle::before {
    transform: translateY(0.15rem) rotate(-135deg);
  }

  /* Level 2 */
  .admissions-subnav > ul.menu > li.menu-item > ul.menu {
    grid-column: 1 / -1;
    padding: 0.25rem 0 0.5rem;
    background: var(--subnav-mobile-sub-bg);
    border-top: 1px solid var(--subnav-mobile-divider);
  }

  .admissions-subnav.is-enhanced > ul.menu > li.menu-item:not(.is-expanded) > ul.menu {
    display: none;
  }

  .admissions-subnav > ul.menu > li.menu-item > ul.menu a {
    display: block;
    padding: 0.7rem var(--subnav-mobile-pad-x) 0.7rem calc(var(--subnav-mobile-pad-x) + 1rem);
    color: var(--subnav-panel-text);
    font-size: var(--subnav-font-size);
    font-weight: 400;
    line-height: 1.35;
  }

  .admissions-subnav > ul.menu > li.menu-item > ul.menu a:hover {
    color: var(--subnav-panel-hover-text);
    background: var(--subnav-panel-hover-bg);
  }

  .admissions-subnav > ul.menu > li.menu-item > ul.menu a.is-active,
  .admissions-subnav > ul.menu > li.menu-item > ul.menu a[aria-current="page"] {
    color: var(--subnav-panel-hover-text);
    font-weight: 600;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admissions-subnav *,
  .admissions-subnav *::before,
  .admissions-subnav *::after {
    transition: none !important;
  }
}

/* ==========================================================================
   OPTION: show carets on parent items (desktop).
   ==========================================================================

.admissions-subnav {
  --subnav-caret: inline-block;
}
*/

/* ==========================================================================
   OPTION: constrain the bar to the site container instead of full bleed.
   ==========================================================================

.admissions-subnav {
  --subnav-max-width: 1280px;
  --subnav-edge-pad: 1.5rem;
}
*/

.admissions-subnav__bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.25rem 0.5rem;
  }