/* Header navigation in four groups (port/nav_groups.py). Desktop: <details> dropdowns. Phones: Menu button,
   then the same groups as expandable sections. Without JavaScript the phone menu stays expanded. */
.prep-nav-groups .prep-nav-inner { align-items: center; padding-block: 6px; }
.prep-nav-groups .prep-nav-menu { flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.prep-nav-dd { position: relative; }
.prep-nav-dd > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 6px 12px; border-radius: 8px;
  color: #d8e2ed; font-size: 0.95rem; font-weight: 650; white-space: nowrap;
}
.prep-nav-dd > summary::-webkit-details-marker { display: none; }
.prep-nav-dd > summary::after { content: "\25BE"; font-size: 0.8em; opacity: 0.85; transition: transform .15s; }
.prep-nav-dd[open] > summary::after { transform: rotate(180deg); }
.prep-nav-dd > summary:hover, .prep-nav-dd[open] > summary { color: #fff; background: rgba(255, 255, 255, 0.08); }
.prep-nav-dd > summary:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; color: #fff; }
.prep-nav-dd.is-current-group > summary { color: #fff; box-shadow: inset 0 -2px 0 var(--blue-400); }
.prep-nav-dd-links {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  display: grid; gap: 2px; min-width: 230px; padding: 10px;
  background: var(--navy-900, #0a1828); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}
.prep-nav-dd-wide { grid-template-columns: repeat(2, minmax(220px, 1fr)); column-gap: 8px; min-width: 470px; }
.prep-nav-groups .prep-nav-dd-links a {
  display: block; padding: 8px 10px; border-radius: 6px; color: #d8e2ed; text-decoration: none; font-size: 0.93rem; white-space: nowrap;
}
.prep-nav-groups .prep-nav-dd-links a:hover, .prep-nav-groups .prep-nav-dd-links a:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.08); }
.prep-nav-groups .prep-nav-dd-links a:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 1px; }
.prep-nav-groups .prep-nav-dd-links a[aria-current="page"] { color: #fff; font-weight: 750; box-shadow: inset 3px 0 0 var(--blue-400); }
/* the last groups open toward the left so they stay on screen */
.prep-nav-dd:nth-last-child(-n+2) > .prep-nav-dd-links { left: auto; right: 0; }
.prep-nav-dd:nth-child(2) > .prep-nav-dd-links { left: 0; right: auto; }

@media (max-width: 760px) {
  .prep-nav-groups .prep-nav-inner { align-items: stretch; padding-block: 10px; }
  /* without JS: menu expanded, no Menu button */
  .prep-nav-groups .prep-nav-toggle { display: none; }
  .prep-nav-groups .prep-nav-menu { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding-top: 0; }
  .prep-nav-groups.js-nav .prep-nav-toggle { display: block; }
  .prep-nav-groups.js-nav .prep-nav-menu { display: none; padding-top: 6px; }
  .prep-nav-groups.js-nav .prep-nav-menu.is-open { display: flex; }
  .prep-nav-dd > summary { display: flex; justify-content: space-between; width: 100%; min-height: 44px; padding: 10px 12px; }
  .prep-nav-dd-links, .prep-nav-dd-wide, .prep-nav-dd:nth-last-child(-n+2) > .prep-nav-dd-links {
    position: static; display: block; min-width: 0; padding: 2px 0 8px 12px;
    background: none; border: 0; box-shadow: none; grid-template-columns: none;
  }
  .prep-nav-groups .prep-nav-dd-links a { padding: 10px 12px; white-space: normal; }
}
@media print { .prep-nav-groups { display: none !important; } }