/* Navigation Toolbar - Premium sticky nav with mega menus */

.navigation-toolbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  cursor: pointer;
}

.toolbar-container {
  position: relative;
  z-index: 3;
  margin: 0 auto;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 2.5%;
  /* background: rgba(214, 232, 255, 0.82); */
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(180, 205, 240, 0.55);
  box-shadow: 0 1px 12px rgba(0, 60, 130, 0.05);
}

/* ── Logo (right corner in RTL, left in LTR) ───── */

.nav-logo {
  text-decoration: none;
  flex-shrink: 0;
  padding-inline: var(--space-lg);
  margin-inline-end: var(--space-xs);
  cursor: pointer;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: center;
}

.nav-logo .logo-10x-mark {
  height: 30px;
}

.nav-logo:hover {
  opacity: 0.72;
}

/* ── Desktop Nav Items ─────────────────────────── */

.nav-items {
  display: flex;
  gap: 0;
  align-items: center;
  direction: rtl;
  /* `safe center` keeps the items centered when they fit, but falls back
     to start-alignment once they overflow so the leading items stay
     reachable (plain `center` would clip them symmetrically and make the
     scroll start unreachable). */
  justify-content: safe center;
  /* Take the space left by the logo and shrink below content size so the
     overflow scrolls *inside* this row instead of clipping the toolbar. */
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  /* Hide the horizontal scrollbar - scrolling stays available via
     trackpad / shift-wheel; the row never wraps. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: 0;
  padding-inline-start: 20px;
  /* Reserve room on the physical LEFT (inline-end in RTL) for the pinned
     CTA as real layout space (margin, not padding) so the scrollable row
     never slides *under* the CTA - this also keeps the inline-end fade
     hint visible just inside the CTA rather than occluded behind it.
     ~200px clears the "הרשמה ליום הפתוח" pill plus its 20px offset. */
  margin-inline-end: 200px;
}

.nav-items::-webkit-scrollbar {
  display: none;
}

/* Edge-fade hint: when the row overflows, fade the items into the bar at
   whichever inline edge still hides content, signalling that the nav
   scrolls. Classes are toggled from JS (overflowLeft / overflowRight in
   NavigationToolbar.vue); `is-overflow-left` means hidden content on the
   physical left, `is-overflow-right` on the physical right. */
.nav-items.is-overflow-left.is-overflow-right {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

.nav-items.is-overflow-left:not(.is-overflow-right) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px);
  mask-image: linear-gradient(to right, transparent 0, #000 28px);
}

.nav-items.is-overflow-right:not(.is-overflow-left) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  text-decoration: none;
  color: var(--text-color);
  transition: color 0.2s ease;
  position: relative;
  min-height: 72px;
  gap: 5px;
  cursor: pointer;
}

.nav-item:hover,
.nav-item.open {
  color: var(--primary-color);
}

.nav-item.active {
  color: var(--primary-color);
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 2px;
  background: var(--primary-color);
}

.nav-label {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: -0.01em;
  font-family: var(--font-body);
}

.nav-home-icon {
  opacity: 0.6;
  flex-shrink: 0;
}

/* Dropdown chevron */
.nav-chevron {
  transition: transform 0.3s ease;
  margin-top: 1px;
  opacity: 0.5;
}

.nav-has-dropdown.open .nav-chevron {
  transform: rotate(180deg);
}

/* ── CTA Button in Nav ─────────────────────────────────────────
   UX notes:
   • Pinned to the far left of the toolbar (RTL-safe via
     `margin-inline-start: auto`) so it sits opposite the logo and
     doesn't compete with the informational nav links.
   • Warm terracotta (#C4551A) - complementary to the site's cool
     #0071E3 primary so the CTA is the only warm element in the
     chrome. Passes WCAG AA on white text (~4.95:1) - brighter ambers
     from the brand gradient fail contrast.
   • Slight elevation + directional arrow to reinforce affordance.
   ────────────────────────────────────────────────────────────────*/

.nav-cta-btn {
  /* Absolutely positioned at the far (physical) left of the toolbar so it
     sits opposite the logo and stays pinned while `.nav-items` scrolls
     horizontally underneath it on narrow desktop widths. */
  position: absolute;
  left: 20px;
  top: 50%;
  --cta-y: -50%;
  transform: translateY(var(--cta-y));

  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: #6462EA;
  color: #fff;
  border-radius: var(--radius-full);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--font-body);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.01em;
  box-shadow:
    0 1px 2px rgba(56, 54, 180, 0.2),
    0 4px 14px rgba(100, 98, 234, 0.28);
  transition: background 0.2s ease,
              transform 0.2s ease,
              box-shadow 0.2s ease;
}

.nav-cta-btn__label {
  line-height: 1;
}

.nav-cta-btn__arrow {
  transition: transform 0.25s ease;
  opacity: 0.95;
}

.nav-cta-btn:hover {
  background: #5957DC;
  --cta-y: calc(-50% - 1px);
  box-shadow:
    0 0 0 3px rgba(100, 98, 234, 0.22),
    0 2px 4px rgba(56, 54, 180, 0.24),
    0 10px 24px rgba(100, 98, 234, 0.36);
}

.nav-cta-btn:hover .nav-cta-btn__arrow {
  transform: translateX(-3px);  /* In RTL, arrow points left → forward motion */
  opacity: 1;
}

.nav-cta-btn:active {
  --cta-y: -50%;
  box-shadow:
    0 1px 2px rgba(56, 54, 180, 0.28),
    0 2px 6px rgba(100, 98, 234, 0.3);
}

.nav-cta-btn:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
  box-shadow:
    0 0 0 4px rgba(100, 98, 234, 0.28),
    0 4px 14px rgba(56, 54, 180, 0.24);
}

/* ── Secondary CTA: "upcoming dates & cost" ────────────────────────
   An outlined "ghost" pill that lives inline among the text nav items
   but reads as a call to action. Deliberately lighter than the solid
   `.nav-cta-btn` (open-day registration) so the two don't compete:
   solid indigo = primary action, indigo outline = secondary action.
   The pill is drawn on the inner `.nav-label` (not the link) so the
   link keeps the full 72px hit target while the pill stays compact. */
.nav-next-cta {
  padding-inline: 14px;
}

.nav-next-cta .nav-label {
  padding: 7px 16px;
  border: .5px solid var(--primary-color);
  border-radius: 40px;
  color: var(--primary-color);
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  background: var(--primary-color);
  /* color: white; */
  background: #0071e30a;
}

.nav-next-cta:hover .nav-label,
.nav-next-cta.active .nav-label {
  background: #6462EA;
  color: #fff;
  border-color: #6462EA;
}

/* Suppress the standard nav underline indicator - the filled pill is
   this item's own active/hover affordance. */
.nav-next-cta.active::after {
  display: none;
}

/* ── Mega Menu Panel ───────────────────────────── */

.mega-panel {
  position: absolute;
  /* Matches .toolbar-container height (72px desktop/tablet) */
  top: 72px;
  left: 0;
  right: 0;
  z-index: 2;
  background: rgba(239, 246, 255, 0.98);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border-light);
  box-shadow: var(--shadow-lg);
}

.mega-panel-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 40px 32px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  direction: rtl;
}

.mega-panel-course .mega-curriculum-featured {
  grid-column: 1 / -1;
  margin-bottom: 8px;
}

.mega-panel-narrow {
  max-width: 480px;
  grid-template-columns: repeat(2, 1fr);
}

.mega-panel-narrow .mega-curriculum-featured {
  grid-column: 1 / -1;
  margin-bottom: 8px;
}

.mega-link {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background 0.2s ease;
}

.mega-link:hover {
  background: rgba(0, 113, 227, 0.04);
}

/* Active subitem - matches the section the user is currently scrolled into
   on the hub page (/course, /about-lecturer). Written by the scroll-spy
   into useNavStore.activeSectionId and resolved here via isCourseItemActive
   / isLecturerItemActive in NavigationToolbar.vue. */
.mega-link.is-active {
  background: rgba(0, 113, 227, 0.08);
  box-shadow: inset 3px 0 0 var(--primary-color);
}

.mega-link.is-active .mega-link-title {
  color: white;
}

.mega-link--ccdd.is-active {
  background:
    radial-gradient(ellipse 120% 100% at 100% 0%, rgba(212, 165, 116, 0.3) 0%, transparent 70%),
    linear-gradient(180deg, #13141C 0%, #1A1B27 100%);
  box-shadow: inset 3px 0 0 #D4A574;
}

.mega-link-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 3px;
  font-family: var(--font-body);
}

.mega-link-desc {
  font-size: 13px;
  color: var(--text-tertiary);
  font-weight: 400;
  font-family: var(--font-body);
  line-height: 1.4;
}

/* ── Claude Code - dark + gold variant ──
   Lifts the palette of the Claude Code teasers/pages (#0B0C12 → #13141C
   base with a #D4A574 gold ambient glow) so the "Claude Code" entry
   signals the central course tool. Flat - no border, no shadow - and
   sized to the sibling `.mega-link` rhythm so it sits seamlessly inside
   the mega panel grid. */
.mega-link--ccdd {
  position: relative;
  background:
    radial-gradient(ellipse 120% 100% at 100% 0%, rgba(212, 165, 116, 0.16) 0%, transparent 70%),
    linear-gradient(180deg, #0B0C12 0%, #13141C 100%);
  overflow: hidden;
  isolation: isolate;
  transition: background 0.25s ease;
}

.mega-link--ccdd:hover {
  background:
    radial-gradient(ellipse 120% 100% at 100% 0%, rgba(212, 165, 116, 0.24) 0%, transparent 70%),
    linear-gradient(180deg, #13141C 0%, #1A1B27 100%);
}

.mega-link--ccdd .mega-link-title {
  color: rgba(255, 255, 255, 0.96);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mega-link--ccdd .mega-link-title::after {
  content: "Core Tool";
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #D4A574;
  background: rgba(212, 165, 116, 0.10);
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 1.2;
}

.mega-link--ccdd .mega-link-desc {
  color: rgba(255, 255, 255, 0.62);
}

/* ── Curriculum Mega Panel ──────────────────────
   Side-by-side two-track layout: Developer on the right (RTL natural
   reading order), Architect on the left, separated by a vertical
   3-stop brand-gradient hairline. Slim bundle banner at the bottom.
   Each track has a clickable header (Logo10x / Logo10xArchitect +
   factual lede) that doubles as the "see all modules" link into
   /curriculum/{developer,architect}. */

.mega-panel-curriculum {
  max-width: 1240px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 22px;
  padding-bottom: 24px;
}

.mega-tracks-row {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 28px;
  align-items: start;
}

/* Vertical 3-stop brand-gradient divider between the two tracks.
   Faded at top/bottom so it reads as a brand mark, not a rule. */
.mega-tracks-row::before {
  content: '';
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  width: 1px;
  min-height: 100%;
  background: linear-gradient(
    180deg,
    rgba(8, 148, 255, 0) 0%,
    rgba(8, 148, 255, 0.4) 14%,
    rgba(189, 50, 214, 0.4) 50%,
    rgba(255, 163, 4, 0.4) 86%,
    rgba(255, 163, 4, 0) 100%
  );
}

.mega-track {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.mega-track-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 4px 8px;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: opacity 0.2s ease;
}

.mega-track-header:hover {
  opacity: 0.78;
}

.mega-track-header:hover .mega-curriculum-featured-arrow {
  transform: translateX(-4px);
  opacity: 1;
}

.mega-track-header-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mega-track-header-title {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.mega-track-logo {
  height: 20px;
}

.mega-track-header-desc {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-secondary);
  font-family: var(--font-body);
  letter-spacing: -0.005em;
  line-height: 1.4;
}

/* Bundle banner - full-width row with a 3px brand-gradient inline-start
   hairline (the canonical bonus-card mark from the bundle tab) so it reads
   as the same product surface without competing with the two tracks. */
.mega-bundle-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px 10px 14px;
  text-decoration: none;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(8, 148, 255, 0.06) 0%, rgba(189, 50, 214, 0.04) 50%, rgba(255, 163, 4, 0.05) 100%);
  border: 1px solid rgba(0, 60, 130, 0.06);
  overflow: hidden;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.mega-bundle-banner::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
}

.mega-bundle-banner:hover {
  background: linear-gradient(135deg, rgba(8, 148, 255, 0.10) 0%, rgba(189, 50, 214, 0.08) 50%, rgba(255, 163, 4, 0.09) 100%);
  border-color: rgba(0, 60, 130, 0.12);
}

.mega-bundle-banner:hover .mega-curriculum-featured-arrow {
  transform: translateX(-4px);
  opacity: 1;
}

.mega-bundle-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mega-bundle-banner-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-color);
  font-family: var(--font-body);
  letter-spacing: -0.005em;
}

.mega-bundle-banner-desc {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-tertiary);
  font-family: var(--font-body);
  line-height: 1.4;
}

.mega-curriculum-featured {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  text-decoration: none;
  background: linear-gradient(135deg, var(--primary-light) 0%, rgba(0, 113, 227, 0.02) 100%);
  border: 1px solid var(--primary-border);
  transition: all 0.2s ease;
}

.mega-curriculum-featured:hover {
  background: rgba(0, 113, 227, 0.08);
  border-color: rgba(0, 113, 227, 0.3);
}

.mega-curriculum-featured-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mega-curriculum-featured-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary-color);
  font-family: var(--font-body);
}

.mega-curriculum-featured-desc {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 400;
  font-family: var(--font-body);
}

.mega-curriculum-featured-arrow {
  flex-shrink: 0;
  color: var(--primary-color);
  opacity: 0.6;
  transition: transform 0.2s ease;
}

.mega-curriculum-featured:hover .mega-curriculum-featured-arrow {
  transform: translateX(-4px);
  opacity: 1;
}

.mega-curriculum-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

/* Two-column grid used inside the side-by-side track layout. The compact
   card variant drops the description and tightens vertical padding so the
   panel reads as a quick-scan list rather than a feature page. */
.mega-curriculum-grid--2col {
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}

.mega-curriculum-grid--2col .mega-module-card {
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
  padding: 7px 12px;
}

.mega-curriculum-grid--2col .mega-module-num {
  margin-bottom: 0;
  flex: 0 0 auto;
  min-width: 18px;
  font-size: 10.5px;
}

.mega-curriculum-grid--2col .mega-module-title {
  margin-bottom: 0;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  font-weight: 500;
}

/* Compact CCDD: drop the "Deep Dive" chip (no room in a single-line row)
   and tint the number gold so the gold treatment still reads. */
.mega-curriculum-grid--2col .mega-module-card--ccdd .mega-module-title::after {
  content: '';
  display: none;
}

.mega-curriculum-grid--2col .mega-module-card--ccdd .mega-module-num {
  color: #D4A574;
}

.mega-module-card {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background 0.2s ease;
}

.mega-module-card:hover {
  background: rgba(0, 113, 227, 0.04);
}

.mega-module-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-color);
  font-family: var(--font-body);
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  opacity: 0.5;
}

.mega-module-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 3px;
  font-family: var(--font-body);
}

.mega-module-desc {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 400;
  font-family: var(--font-body);
  line-height: 1.4;
}

/* ── Curriculum module card - Claude Code Deep Dive variant ──
   Matches the dark editorial palette of /course/claude-code-deep-dive
   (#0B0C12 → #13141C base with a #D4A574 gold ambient glow) and sits
   flat inside the curriculum mega grid - no border, no shadow, no lift,
   same padding/radius/row-height as its sibling `.mega-module-card`
   items. Mirrors the treatment of `.mega-link--ccdd` in the course
   panel so both entry points read as the same destination. */
.mega-module-card--ccdd {
  background:
    radial-gradient(ellipse 120% 100% at 100% 0%, rgba(212, 165, 116, 0.16) 0%, transparent 70%),
    linear-gradient(180deg, #0B0C12 0%, #13141C 100%);
  overflow: hidden;
  isolation: isolate;
  transition: background 0.25s ease;
}

.mega-module-card--ccdd:hover {
  background:
    radial-gradient(ellipse 120% 100% at 100% 0%, rgba(212, 165, 116, 0.24) 0%, transparent 70%),
    linear-gradient(180deg, #13141C 0%, #1A1B27 100%);
}

.mega-module-card--ccdd .mega-module-num {
  color: #D4A574;
  opacity: 0.9;
}

.mega-module-card--ccdd .mega-module-title {
  color: rgba(255, 255, 255, 0.96);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mega-module-card--ccdd .mega-module-title::after {
  content: "Deep Dive";
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #D4A574;
  background: rgba(212, 165, 116, 0.10);
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 1.2;
}

.mega-module-card--ccdd .mega-module-desc {
  color: rgba(255, 255, 255, 0.62);
}

/* Mega panel transitions */
.mega-enter-active {
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.mega-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.mega-enter-from,
.mega-leave-to {
  opacity: 0;
  transform: translateY(-8px);
}

/* Backdrop (teleported to body) - clicking anywhere closes the mega-menu. */
.mega-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(25, 26, 35, 0.2);
  z-index: 999;
  cursor: pointer;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* ── Hamburger Button (hidden on desktop) ──────── */

.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1100;
  flex-shrink: 0;
}

.hamburger-line {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--text-color);
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger-btn.is-open .hamburger-line:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.hamburger-btn.is-open .hamburger-line:nth-child(2) {
  opacity: 0;
}
.hamburger-btn.is-open .hamburger-line:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ── Mobile Drawer ─────────────────────────────── */

.drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(25, 26, 35, 0.35);
  z-index: 1050;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.drawer-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  display: none;
  position: fixed;
  top: 0;
  right: -320px;
  width: 320px;
  height: 100dvh;
  background: var(--bg-surface);
  z-index: 1060;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(25, 26, 35, 0.12);
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.drawer.is-open {
  right: 0;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1.5rem;
  border-bottom: 1px solid var(--border-light);
}

.drawer-logo {
  height: 28px;
}

.drawer-nav {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0;
}

.drawer-item {
  display: block;
  padding: 16px 28px;
  text-decoration: none;
  color: var(--text-color);
  font-size: 17px;
  font-weight: 500;
  font-family: var(--font-body);
  direction: rtl;
  transition: background 0.2s ease;
}

.drawer-item:hover {
  background: var(--fsp-hover-bg);
}

.drawer-item.active {
  color: var(--primary-color);
  font-weight: 600;
}

.drawer-item--home {
  display: flex;
  align-items: center;
  gap: 16px;
}

.drawer-home-icon {
  opacity: 0.6;
  flex-shrink: 0;
  margin-inline-end: 4px;
}

.drawer-item,
.drawer-item-toggle,
.drawer-cta {
  touch-action: manipulation;
}

.drawer-sub-item {
  padding-right: 44px;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-secondary);
}

/* Track header inside the drawer's curriculum sub-list. Sits as a
   non-indented row carrying the Logo10x or Logo10xArchitect mark, and
   a subtle 3-stop brand-gradient hairline below to separate it from the
   following modules. Tapping the row opens the syllabus tab. */
.drawer-track-header {
  display: flex;
  align-items: center;
  padding-right: 28px;
  padding-top: 18px;
  padding-bottom: 12px;
  position: relative;
  font-weight: 600;
}

.drawer-track-header::after {
  content: '';
  position: absolute;
  inset-inline-start: 28px;
  inset-inline-end: 28px;
  bottom: 6px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(8, 148, 255, 0) 0%,
    rgba(8, 148, 255, 0.4) 12%,
    rgba(189, 50, 214, 0.4) 50%,
    rgba(255, 163, 4, 0.4) 88%,
    rgba(255, 163, 4, 0) 100%
  );
}

.drawer-track-header .logo-10x,
.drawer-track-header .logo-10x-architect {
  height: 18px;
}

.drawer-bundle-link {
  margin-top: 14px;
  position: relative;
  padding-right: 32px;
  font-weight: 600;
  color: var(--text-color);
}

.drawer-bundle-link::before {
  content: '';
  position: absolute;
  inset-inline-start: 28px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
}

/* Drawer parent row: split into a navigating link + a dedicated expand button.
   The two touch targets are visually separated by a divider so the expand
   affordance is legible on a tap-only surface. */
.drawer-item-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  direction: rtl;
}

.drawer-item-group.active .drawer-item--has-toggle {
  color: var(--primary-color);
  font-weight: 600;
}

.drawer-item--has-toggle {
  flex: 1 1 auto;
  min-width: 0;
}

.drawer-item-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  padding: 0 12px;
  background: rgba(8, 148, 255, 0.08);
  border: none;
  border-inline-start: 1px solid rgba(8, 148, 255, 0.2);
  cursor: pointer;
  color: var(--primary-color);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.drawer-item-toggle:hover,
.drawer-item-toggle:focus-visible {
  background: rgba(8, 148, 255, 0.16);
  color: var(--primary-color);
  outline: none;
}

/* Expanded state: chevron column matches sub-list background so the two
   read as a single cohesive "L"-shaped block flowing down the drawer. */
.drawer-item-group.expanded .drawer-item-toggle {
  background: var(--bg-secondary);
  border-inline-start-color: rgba(8, 148, 255, 0.28);
}

.drawer-toggle-chevron {
  transition: transform 0.3s ease, opacity 0.2s ease;
  opacity: 0.75;
}

.drawer-item-toggle:hover .drawer-toggle-chevron,
.drawer-item-group.expanded .drawer-toggle-chevron {
  opacity: 1;
}

.drawer-item-group.expanded .drawer-toggle-chevron {
  transform: rotate(180deg);
  color: var(--primary-color);
}

.drawer-sub {
  background: var(--bg-secondary);
  box-shadow: inset 0 1px 0 rgba(8, 148, 255, 0.16);
}

/* Subtle connector: lifts the expanded parent title row on a hairline
   brand-blue rule so the title, chevron column and sub-list read as one
   editorial group rather than three disconnected strips. */
.drawer-item-group.expanded {
  box-shadow: inset 0 -1px 0 rgba(8, 148, 255, 0.16);
}

/* Drawer CTA */
.drawer-cta {
  display: block;
  margin: 20px 28px;
  padding: 16px 28px;
  background: var(--accent-warm);
  color: #fff;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-body);
  text-align: center;
  transition: background 0.25s ease;
}

.drawer-cta:hover {
  background: var(--accent-warm-hover);
}

/* Secondary CTA in the drawer: outlined indigo pill mirroring the
   desktop `.nav-next-cta`. Sits above the solid warm open-day CTA so
   the hierarchy reads the same on mobile - outline = secondary. */
.drawer-next-cta {
  margin: 0px 10px 0px 10px;
  padding: 14px 20px;
  border: .5px solid #6462EA;
  border-radius: var(--radius-md);
  color: var(--primary-color);
  /* font-weight: 600; */
  text-align: right;
  transition: background 0.2s ease, color 0.2s ease;
  background: #0071e30a;
}

.drawer-next-cta:hover,
.drawer-next-cta.active {
  background: #6462EA;
  color: #fff;
}

/* ── Tablet (768px - 1280px) ───────────────────── */

@media (max-width: 1280px) {
  .nav-items {
    display: none;
  }

  /* CTA now lives outside .nav-items, so hide it explicitly on the
     hamburger breakpoint (the open-day CTA is in the drawer instead). */
  .nav-cta-btn {
    display: none;
  }

  .hamburger-btn {
    display: flex;
  }

  .drawer-overlay {
    display: block;
  }

  .drawer {
    display: flex;
  }

  .toolbar-container {
    justify-content: space-between;
    padding: 0 16px;
  }

  .nav-logo {
    padding: 0;
  }

  .mega-panel {
    display: none;
  }
}

/* ── Phone (< 768px) ──────────────────────────── */

@media (max-width: 767px) {
  .toolbar-container {
    height: 48px;
    padding: 0 14px;
  }

  .nav-logo .logo-10x-mark {
    height: 24px;
  }

  .nav-logo {
    padding-inline: var(--space-md);
    margin-inline-end: 0;
  }

  .drawer {
    width: min(300px, calc(100vw - 60px));
    right: calc(-1 * min(300px, calc(100vw - 60px)));
  }

  .drawer.is-open {
    right: 0;
  }

  .drawer-item {
    padding: 5px 24px;
    font-size: 18px;
    min-height: 44px;
  }

  .drawer-item-toggle {
    min-height: 44px;
  }

  .drawer-sub-item {
    padding-right: 40px;
    font-size: 17px;
    min-height: 44px;
  }
}