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

   CSS only. No JavaScript required. Hidden below 768px, where the mega menu
   already carries the same links.

   Markup it targets:

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

   Scoped entirely to .admissions-subnav, set in the container's "..." tab
   under Classes and ID. Nothing keys to a coh-ce-* hash, since those
   regenerate on rebuild.

   Panels open on hover and on keyboard focus. Parent items carry no caret,
   matching the reference design. See the option at the bottom to add one.
   ========================================================================== */

.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-flex to show carets */

  /* Stacking. Must sit ABOVE the hero but BELOW the main nav mega menu,
     which drops down over this bar. Raise only if the hero covers the
     dropdowns, and check the main nav's z-index before going higher. */
  --subnav-z: 1;

  position: relative; /* anchors the level 2 panels */
  z-index: var(--subnav-z);
  background: var(--subnav-bg);
}

/* Hidden on small screens. The mega menu covers these links there. */
@media (max-width: 767px) {
  .admissions-subnav {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   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);
  list-style: none;
}

.admissions-subnav > ul.menu > li.menu-item {
  position: relative;
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

/* --------------------------------------------------------------------------
   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;
}

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

/* 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;
}

/* Hover */
.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.
   Several selectors because which class lands depends on how the link
   resolves and whether the current page is the trail root or a child. */
.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;
}

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

/* --------------------------------------------------------------------------
   Level 2 panels
   -------------------------------------------------------------------------- */

.admissions-subnav > ul.menu > li.menu-item > ul.menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 40;
  min-width: 17rem;
  margin: 0;
  padding: 0.75rem 0;
  list-style: none;
  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 li.menu-item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.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 cannot 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, drawn in CSS so no icon or markup change is needed.
   Off by default to match the reference design.
   -------------------------------------------------------------------------- */

.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);
}

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

/* ==========================================================================
   OPTION: show carets on parent items.
   ==========================================================================

.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;
}
*/