/* ============================================================
   nav.css — shared "Schools" navbar dropdown (3SC look & feel).
   Token-independent (fallbacks) so it renders on any ground.
   Pages link this; the base .bar/.menu styling stays per-page.
   Base look of the parent link comes from each page's `.menu a`.
   ============================================================ */

/* The nav CTA now inherits the kit button wholesale: .cube-btn matches the
   website's PressButton (no tilt, hover lifts on Y only, press sinks 2/2), so
   the old un-tilt and diagonal-hover overrides are gone. */

.has-sub { position: relative; }
.has-sub .sub-parent { display: inline-flex; align-items: center; gap: 6px; }
.has-sub .chev { width: 11px; height: 11px; transition: transform .2s ease; }
.has-sub.open .chev { transform: rotate(180deg); }

.submenu {
  position: absolute; top: calc(100% + 16px); left: 0; min-width: 258px; z-index: 60;
  background: #fff; border: 2px solid #000; border-radius: 14px; box-shadow: 6px 6px 0 0 #000; padding: 9px;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .16s ease, transform .16s cubic-bezier(0.34,1.56,0.64,1);
}
/* invisible bridge so hover doesn't drop while crossing the gap */
.submenu::before { content: ''; position: absolute; top: -18px; left: 0; right: 0; height: 18px; }
.has-sub.open .submenu,
.has-sub:hover .submenu,
.has-sub:focus-within .submenu { opacity: 1; transform: none; pointer-events: auto; }

/* Selectors are scoped under .has-sub so they out-specify each page's
   own `.menu a` colour (which is light on the dark grounds). The card is
   always white, so its text is hardcoded dark regardless of the ground. */
.has-sub .submenu a {
  display: flex; align-items: center; gap: 13px; padding: 13px 14px; border-radius: 10px;
  font-family: var(--font, 'Poppins', sans-serif); font-size: 14px; font-weight: 600;
  color: #0a0a0a; text-decoration: none; white-space: nowrap; border: 2px solid transparent; background: none;
}
.has-sub .submenu a:hover { background: var(--green, #00ed71); border-color: #000; color: var(--ink, #0a0a0a); }
.has-sub .submenu a .si { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #f1f1ef; border: 2px solid #000; font-size: 16px; line-height: 1; }
.has-sub .submenu a:hover .si { background: #fff; }
.has-sub .submenu a .st { display: flex; flex-direction: column; gap: 1px; }
.has-sub .submenu a .sd { font-size: 11.5px; font-weight: 500; color: #5b5b5b; }
.has-sub .submenu a:hover .sd { color: var(--ink, #0a0a0a); }
.has-sub .submenu a .tag { margin-left: auto; align-self: center; font-family: var(--mono, monospace); font-size: 10px; font-weight: 700; text-transform: uppercase; color: #0a0a0a; background: var(--yellow, #ffd100); border: 2px solid #000; border-radius: 6px; padding: 1px 7px; }