/* The main menu: content/chrome/header.html (.ybh-nav) and content/chrome/mobile-menu.html (.ybh-mnav),
   the site's own markup since 2026-10-22 (top-nav lane). Sizes, colours and the white notch follow the
   lifted theme's header (content/static/theme/css/main.css, `header .menu`), which no longer matches
   anything. What is new: each section's dropdown opens from a button as well as on hover, so a keyboard
   or a touch screen reaches it (src/scripts/nav.js); a chevron says which items have one; the current
   section is drawn from the link render.mjs marks aria-current="page"; links that leave the site carry
   an arrow; Contact is a button. The drawer (#mobile-menu-holder) and its trigger stay the theme's. */

.ybh-nav { width: calc(100% - 400px); }
.ybh-nav-list {
  display: flex; justify-content: space-between; align-items: center;
  list-style: none; margin: 0; padding: 0;
  font-family: "futura-pt", sans-serif; font-weight: 600; font-style: normal;
}
.ybh-nav-item {
  position: relative; display: flex; align-items: center;
  padding: 32px 0 38px 0; transition: padding 0.4s ease;
}
.ybh-nav-link {
  display: block; font-size: 20px; line-height: 20px; color: #666666; text-align: center;
  transition: color 0.4s ease;
}

/* The chevron: a button of its own beside the link, which still goes to the section's page. */
.ybh-nav-toggle {
  appearance: none; -webkit-appearance: none; background: none; border: 0; margin: 0 0 0 7px; padding: 0;
  width: 14px; height: 20px; color: #666666; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ybh-nav-toggle::before {
  content: ""; width: 7px; height: 7px; box-sizing: border-box;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg); transition: transform 0.2s ease;
}
.ybh-nav-item.is-open > .ybh-nav-toggle::before { transform: translateY(2px) rotate(-135deg); }

/* The theme's white notch under the current section, and under the one being pointed at or opened. */
.ybh-nav-item::after {
  content: ""; position: absolute; width: 0; height: 0; margin-left: -18px; bottom: 0; left: 50%;
  box-sizing: border-box; border: 12px solid white; border-color: transparent transparent #fff #fff;
  transform-origin: 0 0; transform: rotate(-45deg); box-shadow: -3px 3px 4px 0 rgba(0, 0, 0, 0.06);
  transition: all 0.4s ease; opacity: 0; z-index: 96; pointer-events: none;
}
.ybh-nav-item:has([aria-current="page"])::after,
.ybh-nav-item.is-open::after { opacity: 1; bottom: -23px; }

.ybh-nav-panel {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 190px;
  background: #EEEEEE; box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.06);
  opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; z-index: 95;
}
#ybh-nav-screenit { width: 220px; }
/* Opening shows the panel at once (its links take Tab straight away) and fades it in; closing fades
   it out, then hides it. */
.ybh-nav-item.is-open > .ybh-nav-panel { opacity: 1; visibility: visible; transition: opacity 0.4s ease, visibility 0s; }
.ybh-nav-panel ul { margin: 0; list-style: none; padding: 30px 20px; font-size: 16px; line-height: 20px; }
.ybh-nav-panel li { margin-bottom: 15px; }
.ybh-nav-panel li:last-child { margin: 0; }
.ybh-nav-panel a { color: #666666; transition: color 0.4s ease; }
.ybh-nav-panel a:hover, .ybh-nav-panel a[aria-current="page"] { color: #4A8EC9; }
/* Links that leave yourbrainhealth.io: set apart under a rule, each with an arrow. */
.ybh-nav-panel li:not(.ybh-nav-out) + .ybh-nav-out { border-top: 1px solid #D5D5D5; padding-top: 15px; }
.ybh-nav-out-icon { display: inline-block; margin-left: 6px; vertical-align: 1px; }

/* Hover opens a section only where there is a real pointer; a touch screen uses the chevron. */
@media (hover: hover) and (pointer: fine) {
  .ybh-nav-item:hover::after { opacity: 1; bottom: -23px; }
  .ybh-nav-item:hover > .ybh-nav-panel { opacity: 1; visibility: visible; transition: opacity 0.4s ease, visibility 0s; }
}

/* Contact: the one call to action, a button rather than a sixth label. The labels sit 3px above the
   bar's middle (the theme's 32/38 and 17/23 paddings); 6px under the button puts it on their line. */
.ybh-nav-item.ybh-nav-cta { padding: 0 0 6px 0; }
.ybh-nav-item.ybh-nav-cta::after { display: none; }
.ybh-nav-cta .ybh-nav-link {
  background: #DB239A; color: #fff; padding: 11px 22px; border-radius: 4px; transition: background 0.3s ease;
}
.ybh-nav-cta .ybh-nav-link:hover, .ybh-nav-cta .ybh-nav-link[aria-current="page"] { background: #B81D81; }

.ybh-nav a:focus-visible, .ybh-nav-toggle:focus-visible,
.ybh-mnav a:focus-visible, .ybh-mnav-toggle:focus-visible { outline: 2px solid #4A8EC9; outline-offset: 3px; border-radius: 2px; }
.ybh-mnav a:focus-visible, .ybh-mnav-toggle:focus-visible { outline-color: #fff; }

/* The theme's shrink once the page has scrolled (scripts.js adds .off-top). */
header.off-top .ybh-nav-item { padding: 17px 0 23px 0; }
header.off-top .ybh-nav-item.ybh-nav-cta { padding: 0 0 6px 0; }

@media only screen and (max-width: 1239px) {
  .ybh-nav { width: calc(100% - 300px); }
}

/* The drawer, under the theme's 1020px breakpoint. */
@media only screen and (max-width: 1019px) {
  .ybh-nav { display: none; }
  #mobile-menu-holder { overflow-y: auto; overscroll-behavior: contain; }
}
.ybh-mnav-list {
  font-family: "futura-pt", sans-serif; font-weight: 600; font-style: normal;
  font-size: 26px; line-height: 32px; list-style: none; margin: 0; padding: 0;
}
.ybh-mnav-item { padding: 20px 0; border-bottom: 1px solid #fff; }
.ybh-mnav-item:last-child { border: 0; }
.ybh-mnav-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ybh-mnav a { color: #fff; }
.ybh-mnav a:hover, .ybh-mnav a[aria-current="page"] { text-decoration: underline; }
.ybh-mnav-toggle {
  appearance: none; -webkit-appearance: none; background: none; border: 0; margin: -6px -10px -6px 0; padding: 0;
  width: 44px; height: 44px; flex: none; color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ybh-mnav-toggle::before {
  content: ""; width: 12px; height: 12px; box-sizing: border-box;
  border-right: 3px solid currentColor; border-bottom: 3px solid currentColor;
  transform: translateY(-3px) rotate(45deg); transition: transform 0.2s ease;
}
.ybh-mnav-toggle[aria-expanded="true"]::before { transform: translateY(3px) rotate(-135deg); }
.ybh-mnav-sub { list-style: none; margin: 10px 0 0 0; padding: 0 0 0 16px; font-size: 20px; line-height: 26px; }
.ybh-mnav-sub[hidden] { display: none; }
.ybh-mnav-sub li { padding: 8px 0; }

@media (prefers-reduced-motion: reduce) {
  .ybh-nav-item, .ybh-nav-item::after, .ybh-nav-panel, .ybh-nav-toggle::before, .ybh-mnav-toggle::before { transition: none; }
}