/* Shared RAV menu in Apple Liquid Glass style. Buttons are placeholders until routes are ready.
   Layers: .rav-menu-glass (bar surface, injected by JS) → .rav-menu-lens (selection) → buttons.
   Chromium also gets edge refraction (.rav-refract, SVG displacement built in site-menu.js). */
.rav-site-menu {
  --rav-glass-tint: rgba(18, 28, 46, .14);
  --rav-glass-blur: 3px;
  --rav-pad: 5px;
  --rav-item-h: 46px;
  position: fixed;
  z-index: 160;
  top: max(16px, env(safe-area-inset-top, 0px));
  left: 50%;
  display: flex;
  align-items: center;
  gap: 2px;
  width: max-content;
  max-width: calc(100% - 288px);
  box-sizing: border-box;
  padding: var(--rav-pad);
  border-radius: 999px;
  transform: translateX(-50%);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ---- Glass surface: clear body, light blur, bright specular rim ---- */
.rav-menu-glass, .rav-menu-lens {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  box-sizing: border-box;
}
.rav-menu-glass {
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0) 55%, rgba(255,255,255,.04)),
    var(--rav-glass-tint);
  -webkit-backdrop-filter: blur(var(--rav-glass-blur)) saturate(190%) brightness(1.08);
  backdrop-filter: blur(var(--rav-glass-blur)) saturate(190%) brightness(1.08);
  box-shadow:
    inset 0 0 0 .5px rgba(255,255,255,.22),
    inset 0 1.5px 1px -1px rgba(255,255,255,.75),
    inset 0 -1.5px 1px -1px rgba(255,255,255,.35),
    inset 0 0 18px rgba(255,255,255,.07),
    0 10px 30px -6px rgba(0,8,24,.45),
    0 2px 6px rgba(0,8,24,.18);
}
/* Chromium: the rim bends the page behind it like a thick lens. */
.rav-refract .rav-menu-glass {
  -webkit-backdrop-filter: url(#rav-glass-bar) saturate(190%) brightness(1.08);
  backdrop-filter: url(#rav-glass-bar) saturate(190%) brightness(1.08);
}
.rav-refract .rav-menu-lens {
  -webkit-backdrop-filter: url(#rav-glass-lens) saturate(150%) brightness(1.12);
  backdrop-filter: url(#rav-glass-lens) saturate(150%) brightness(1.12);
}
/* Specular rim: light from the top-left, a softer bounce at the bottom-right. */
.rav-menu-glass::before, .rav-menu-lens::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(125deg,
    rgba(255,255,255,.95) 0%, rgba(255,255,255,.28) 14%, rgba(255,255,255,0) 32%,
    rgba(255,255,255,0) 66%, rgba(255,255,255,.22) 84%, rgba(255,255,255,.7) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Soft sheen across the upper half, like light caught in thick glass. */
.rav-menu-glass::after {
  content: '';
  position: absolute;
  inset: 1px 8% 52% 8%;
  border-radius: 999px 999px 40% 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,0));
  filter: blur(1px);
}

/* ---- Selection lens: a quiet fill at rest, a clear magnifying drop in motion ---- */
.rav-menu-lens {
  z-index: 1;
  top: var(--rav-pad);
  left: 0;
  height: var(--rav-item-h);
  width: 0;
  opacity: 0;
  background: rgba(255,255,255,var(--rav-lens-fill, .13));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 0 10px rgba(255,255,255,calc(var(--rav-lens-glow, 0) * .28)),
    0 6px 18px rgba(0,8,24,calc(var(--rav-lens-glow, 0) * .35));
  transform-origin: 50% 50%;
  will-change: transform, width;
}
.rav-menu-lens::before { opacity: calc(.35 + var(--rav-lens-glow, 0) * .65); }

/* ---- Items ---- */
.rav-menu-item {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 0 0 auto;
  height: var(--rav-item-h);
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,.8);
  font-family: var(--mont, 'Montserrat', 'Montserrat Fallback', -apple-system, sans-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.01em;
  text-shadow: 0 1px 8px rgba(0,8,24,.45);
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  transition: color .25s ease;
}
.rav-menu-item:hover { color: #fff; }
@media (hover: hover) {
  .rav-menu-item:not(.is-selected):hover { background: rgba(255,255,255,.06); }
}
.rav-menu-item.is-selected { color: #fff; }
.rav-menu-item:focus-visible { outline: 2px solid #39a8ff; outline-offset: 2px; }
.rav-menu-icon, .rav-menu-label { pointer-events: none; }
.rav-menu-icon { display: none; width: 24px; height: 24px; }
.rav-menu-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rav-menu-label { display: block; white-space: nowrap; }
.rav-menu-brand { font-style: inherit; }
.rav-menu-brand em { color: #39a8ff; font-style: inherit; }

/* Leave the logo and telephone visible beside the desktop pill. */
@media (min-width: 901px) {
  .rav-menu-page { --top-h: 92px; }
  .rav-menu-page .top-logo { top: 24px; }
}
@media (min-width: 901px) and (max-width: 1399px) {
  .rav-menu-page .site-top .logo span, .rav-menu-page .site-top .top-phone span,
  .rav-menu-page .top-logo span { display: none; }
}
/* Program story pages keep breadcrumbs top-right; drop them below the pill where they would meet. */
@media (min-width: 901px) and (max-width: 1799px) {
  .hs .rav-menu-page .s-hero .crumbs { top: 84px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .rav-menu-item { padding: 0 14px; font-size: 14px; }
}

/* ---- Phone: iOS-style floating tab bar, icon over a small label ---- */
@media (max-width: 900px) {
  .rav-menu-page { --rav-menu-clearance: calc(76px + max(14px, env(safe-area-inset-bottom, 0px))); padding-bottom: var(--rav-menu-clearance); }
  .rav-site-menu {
    --rav-pad: 4px;
    --rav-item-h: 56px;
    top: auto;
    bottom: max(14px, env(safe-area-inset-bottom, 0px));
    width: min(420px, calc(100% - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    max-width: none;
    gap: 0;
  }
  .rav-menu-item {
    flex: 1 1 0;
    gap: 3px;
    padding: 0 2px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    color: rgba(255,255,255,.82);
  }
  .rav-menu-icon { display: block; }
  .rav-menu-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  /* "Академия RAV" does not fit a tab; the full name stays in aria-label. */
  .rav-menu-item:nth-of-type(3) .rav-menu-brand { display: none; }
  .rav-menu-item.is-selected { color: #39a8ff; }
  .rav-menu-item.is-selected .rav-menu-brand em { color: inherit; }
  /* Phone: the number sits next to the handset in the header and is tappable (tel: link). */
  .rav-menu-page .site-top .top-phone span { display: inline; }
  .rav-menu-page .site-top .top-phone { gap: 7px; padding: 0 2px; font-size: 14px; letter-spacing: -.01em; }
  /* Full-screen presentations reserve a strip for the floating menu. */
  .js:not(.no-gsap) .rav-menu-page > .app { height: calc(100dvh - var(--rav-menu-clearance)); }
  .rav-menu-page .story .scene { padding-bottom: calc(28px + var(--rav-menu-clearance)); }
}
/* Phone turned sideways: a bottom bar would eat a third of the height, so the menu moves up
   into the header row (logo · icon pill · phone) and the page gets the full height below it. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .rav-menu-page { --rav-menu-clearance: 0px; }
  .rav-site-menu {
    --rav-pad: 3px;
    --rav-item-h: 40px;
    top: max(5px, env(safe-area-inset-top, 0px));
    bottom: auto;
    width: auto;
  }
  .rav-menu-item { flex: 0 0 auto; width: 52px; }
  .rav-menu-label { display: none; }
  .rav-menu-icon { width: 21px; height: 21px; }
}

/* Without backdrop blur the glass would be unreadable, so fall back to a solid tint. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rav-menu-glass { background: rgba(10,22,42,.94); }
}
@media (prefers-reduced-transparency: reduce) {
  .rav-menu-glass { background: rgba(10,22,42,.94); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rav-site-menu, .rav-site-menu * { animation: none !important; transition: none !important; }
}