/* ==========================================================================
   y2-nav.css — utility bar, primary nav, mega-menu, mobile overlay
   Redesign Phase 2. Requires y2-tokens.css and y2-components.css.
   Reference render: /nav-preview.html
   --------------------------------------------------------------------------
   Same specificity contract as y2-components.css: every selector carries a
   .y2- class, so this file cannot reach markup that has not opted in.

   The utility bar itself lives in y2-components.css (.y2-utility). This file
   adds the navigation that sits beneath it.

   Focus rings are declared here rather than in the components focus block so
   that each file owns its own selectors, but they read the same
   --y2-focus / --y2-focus-width / --y2-focus-offset tokens, so the ring is
   identical and flips to pencil on ink surfaces the same way.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SHELL — sticky, with an elevation change rather than a size change.
   The plan rules out a shrink animation: a nav that resizes on scroll moves
   its own targets out from under the pointer.
   -------------------------------------------------------------------------- */
.y2-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--y2-white);
  border-bottom: 1px solid var(--y2-line);
  transition: box-shadow var(--y2-dur) var(--y2-ease),
              border-color var(--y2-dur) var(--y2-ease);
}

.y2-nav--stuck {
  box-shadow: var(--y2-shadow);
  border-bottom-color: transparent;
}

.y2-nav__bar {
  max-width: var(--y2-maxw);
  margin-inline: auto;
  min-height: 64px;
  padding-inline: var(--y2-s-2);
  display: flex;
  align-items: center;
  gap: var(--y2-s-3);
}

.y2-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  margin-right: auto;
}
.y2-nav__seal { width: 36px; height: 36px; flex: 0 0 auto; }
.y2-nav__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.y2-nav__wordmark b {
  font-family: var(--y2-display);
  font-optical-sizing: auto;
  font-size: 1.0625rem;
  font-weight: 650;
  color: var(--y2-ink);
  letter-spacing: -0.01em;
}
.y2-nav__wordmark span {
  font-family: var(--y2-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--y2-ink-60);
}

/* --------------------------------------------------------------------------
   TOP-LEVEL LIST — desktop only. Below 1024px everything moves to the overlay.
   -------------------------------------------------------------------------- */
.y2-nav__list {
  display: none;
  align-items: center;
  gap: var(--y2-s-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.y2-nav__item { position: relative; }

.y2-nav__trigger,
.y2-nav__toplink {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 0;
  background: transparent;
  font-family: var(--y2-body);
  font-size: var(--y2-t-small);
  font-weight: 600;
  color: var(--y2-ink);
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--y2-radius-sm);
  transition: background-color var(--y2-dur) var(--y2-ease),
              color var(--y2-dur) var(--y2-ease);
}

.y2-nav__trigger:hover,
.y2-nav__toplink:hover,
.y2-nav__item--open .y2-nav__trigger { background: rgba(20, 38, 76, .06); color: var(--y2-link); }

/* Caret. Rotates on open; the rotation is a transition so reduced-motion
   zeroes it along with everything else. */
.y2-nav__caret {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--y2-dur) var(--y2-ease);
}
.y2-nav__item--open .y2-nav__caret { transform: translateY(1px) rotate(-135deg); }

/* --------------------------------------------------------------------------
   MEGA-MENU PANEL — a panel of links, not a nested list. Hidden with
   [hidden] so it is removed from the accessibility tree, not just visually
   concealed; a display:none-free "hide" leaves the links tabbable.
   -------------------------------------------------------------------------- */
.y2-nav__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 320px;
  /* Safety net: a panel can never be wider than the viewport it sits in, no
     matter where its trigger lands. min-width alone would win over a plain
     max-width, so the two are reconciled here rather than left to chance. */
  max-width: min(560px, calc(100vw - 2rem));
  padding: var(--y2-s-2);
  background: var(--y2-white);
  border: 1px solid var(--y2-line);
  border-radius: var(--y2-radius);
  box-shadow: var(--y2-shadow-lg);
}
.y2-nav__panel[hidden] { display: none; }

/* Right-align the last two panels so they cannot run off the viewport. */
.y2-nav__item--end .y2-nav__panel { left: auto; right: 0; }

.y2-nav__panel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.y2-nav__panel--wide { min-width: 520px; }
.y2-nav__panel--wide .y2-nav__panel-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 2px var(--y2-s-2); }

/* Two labelled columns, used where one panel serves two audiences. The
   Resources panel carries student tools and parent tools; without the labels
   they read as one undifferentiated list. */
.y2-nav__panel-cols { display: grid; grid-template-columns: repeat(2, minmax(230px, 1fr)); gap: var(--y2-s-2); }
.y2-nav__panel-label {
  display: block;
  padding: 0 0.65rem var(--y2-s-1);
  font-family: var(--y2-body);
  font-size: var(--y2-t-eyebrow);
  font-weight: 700;
  letter-spacing: var(--y2-track-eyebrow);
  text-transform: uppercase;
  color: var(--y2-ink-60);
}
.y2-nav__panel-cols .y2-nav__panel-grid { grid-template-columns: 1fr; }

.y2-nav__panel-link {
  display: block;
  min-height: 44px;
  padding: 0.55rem 0.65rem;
  border-radius: var(--y2-radius-sm);
  font-family: var(--y2-body);
  font-size: var(--y2-t-small);
  font-weight: 600;
  color: var(--y2-ink);
  text-decoration: none;
  transition: background-color var(--y2-dur) var(--y2-ease),
              color var(--y2-dur) var(--y2-ease);
}
.y2-nav__panel-link:hover { background: var(--y2-paper); color: var(--y2-link); }
.y2-nav__panel-link small {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--y2-ink-60);
  margin-top: 1px;
}

/* External destinations get a marker, so leaving the site is never a surprise. */
.y2-nav__ext::after {
  content: '↗';
  margin-left: 0.35em;
  font-weight: 400;
  color: var(--y2-ink-60);
}

/* Phone sits beside the CTA, as it did in the outgoing header. Dropping it to
   a dropdown item would bury the primary contact route for a local business. */
.y2-nav__phone {
  display: none;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--y2-body);
  font-size: var(--y2-t-small);
  font-weight: 700;
  color: var(--y2-ink);
  text-decoration: none;
  white-space: nowrap;
  padding: 0 0.5rem;
  min-height: 44px;
  border-radius: var(--y2-radius-sm);
}
.y2-nav__phone:hover { color: var(--y2-link); }
.y2-nav__phone svg { flex: 0 0 auto; }

/* The CTA label must stay on one line. Allowed to wrap it pushed the bar from
   64px to 69px and left the button looking like it was falling out of the
   header. Slightly tighter padding than the standalone button so the bar still
   fits brand + five triggers + phone + CTA at 1280. */
.y2-nav__cta {
  display: none;
  white-space: nowrap;
  padding-inline: 1.1rem;
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   MOBILE TOGGLE
   -------------------------------------------------------------------------- */
.y2-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: -0.5rem;
  border: 0;
  border-radius: var(--y2-radius-sm);
  background: transparent;
  cursor: pointer;
}
.y2-nav__burger {
  position: relative;
  width: 22px;
  height: 2px;
  background: var(--y2-ink);
  display: block;
}
.y2-nav__burger::before,
.y2-nav__burger::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--y2-ink);
}
.y2-nav__burger::before { top: -7px; }
.y2-nav__burger::after  { top: 7px; }

/* --------------------------------------------------------------------------
   MOBILE OVERLAY — full screen, five accordion sections, portal links in the
   footer. Scroll behind is locked by .y2-noscroll on <body>, set in JS.
   -------------------------------------------------------------------------- */
.y2-mobilenav {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--y2-white);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.y2-mobilenav[hidden] { display: none; }

.y2-mobilenav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--y2-s-2);
  min-height: 64px;
  padding: 0 var(--y2-s-2);
  border-bottom: 1px solid var(--y2-line);
  position: sticky;
  top: 0;
  background: var(--y2-white);
}

/* The brand link is a tap target like any other in the overlay, so it takes
   the same 48px floor. Left as its natural 36px in the desktop bar, where
   pointer precision is not the constraint. */
.y2-mobilenav__head .y2-nav__brand { min-height: 48px; }

.y2-mobilenav__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: -0.5rem;
  border: 0;
  border-radius: var(--y2-radius-sm);
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--y2-ink);
  cursor: pointer;
}

.y2-mobilenav__body { padding: var(--y2-s-2); flex: 1 1 auto; }

.y2-mobilenav__section { border-bottom: 1px solid var(--y2-line); }

.y2-mobilenav__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--y2-s-2);
  width: 100%;
  min-height: 56px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--y2-body);
  font-size: var(--y2-t-body);
  font-weight: 700;
  color: var(--y2-ink);
  text-align: left;
  cursor: pointer;
}

.y2-mobilenav__sign {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  position: relative;
}
.y2-mobilenav__sign::before,
.y2-mobilenav__sign::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: var(--y2-ink);
}
.y2-mobilenav__sign::after { transform: rotate(90deg); transition: transform var(--y2-dur) var(--y2-ease); }
.y2-mobilenav__trigger[aria-expanded='true'] .y2-mobilenav__sign::after { transform: rotate(0deg); }

.y2-mobilenav__panel { padding-bottom: var(--y2-s-2); }
.y2-mobilenav__panel[hidden] { display: none; }

.y2-mobilenav__list { list-style: none; margin: 0; padding: 0; }

.y2-mobilenav__link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0.5rem 0;
  font-family: var(--y2-body);
  font-size: var(--y2-t-body);
  color: var(--y2-ink-60);
  text-decoration: none;
}
.y2-mobilenav__link:hover { color: var(--y2-link); }

.y2-mobilenav__cta { padding: var(--y2-s-3) var(--y2-s-2) var(--y2-s-2); }

/* Footer carries what the utility bar shows on desktop — the bar itself is
   display:none below 768px, so without this the portal links would be
   unreachable on a phone. */
.y2-mobilenav__foot {
  margin-top: auto;
  padding: var(--y2-s-3) var(--y2-s-2);
  background: var(--y2-ink);
  --y2-focus: var(--y2-pencil);
}
.y2-mobilenav__foot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--y2-s-1); }
.y2-mobilenav__foot-link {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-family: var(--y2-body);
  font-size: var(--y2-t-body);
  font-weight: 600;
  color: rgba(255, 255, 255, .88);
  text-decoration: none;
}
.y2-mobilenav__foot-link:hover { color: var(--y2-pencil); }

.y2-noscroll { overflow: hidden; }

/* --------------------------------------------------------------------------
   FOCUS — same tokens as the components contract.
   -------------------------------------------------------------------------- */
.y2-nav__brand:focus-visible,
.y2-nav__trigger:focus-visible,
.y2-nav__toplink:focus-visible,
.y2-nav__panel-link:focus-visible,
.y2-nav__toggle:focus-visible,
.y2-mobilenav__close:focus-visible,
.y2-mobilenav__trigger:focus-visible,
.y2-mobilenav__link:focus-visible,
.y2-mobilenav__foot-link:focus-visible {
  outline: var(--y2-focus-width) solid var(--y2-focus);
  outline-offset: var(--y2-focus-offset);
  border-radius: var(--y2-radius-sm);
}

@supports not selector(:focus-visible) {
  .y2-nav__brand:focus,
  .y2-nav__trigger:focus,
  .y2-nav__toplink:focus,
  .y2-nav__panel-link:focus,
  .y2-nav__toggle:focus,
  .y2-mobilenav__close:focus,
  .y2-mobilenav__trigger:focus,
  .y2-mobilenav__link:focus,
  .y2-mobilenav__foot-link:focus {
    outline: var(--y2-focus-width) solid var(--y2-focus);
    outline-offset: var(--y2-focus-offset);
  }
}

/* --------------------------------------------------------------------------
   ANCHOR CLEARANCE — a sticky nav will otherwise cover the top of whatever an
   in-page link jumps to. 64px bar + 32px utility bar + breathing room.
   Applied to the scroll container so it covers every id on the page rather
   than needing to be remembered per target.
   -------------------------------------------------------------------------- */
.y2-has-sticky-nav :target,
.y2-has-sticky-nav [id] { scroll-margin-top: 120px; }

@media (max-width: 1023px) {
  /* Utility bar is not rendered here, so the offset is the bar alone. */
  .y2-has-sticky-nav :target,
  .y2-has-sticky-nav [id] { scroll-margin-top: 84px; }
}

/* --------------------------------------------------------------------------
   BREAKPOINT

   The desktop bar needs roughly 1000px to lay out without wrapping: brand
   (132) + five triggers (515) + CTA (226) + gaps and padding. Switching to it
   at 768px, as this file originally did, left a dead zone from about 768 to
   1000 where the bar wrapped to two rows and the Resources panel hung ~70px
   off the right edge of the viewport. Small laptops and split windows sit
   squarely in that range, so the overlay now covers it.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .y2-nav__list { display: flex; }
  .y2-nav__cta  { display: inline-flex; }
  .y2-nav__toggle { display: none; }
  .y2-mobilenav { display: none !important; }
}

/* The phone needs another ~200px on top of that. Below this it stays reachable
   in the Contact panel and, on mobile, in the overlay. */
@media (min-width: 1200px) {
  .y2-nav__phone { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  .y2-nav__caret,
  .y2-mobilenav__sign::after { transition: none; }
}