/* ---------------------------------------------------------------
   BHARCS — mobile burger navigation.

   Shared by the hand-written pages and by the Python builders in
   tools/ (build_library.py, build_stories.py, build_framework.py).
   Pairs with assets/nav.js, which injects the button and the panel.

   Colours come from the design tokens each page already defines
   (--espresso, --cream, --gold-bright, --hairline-dark, --sans), so
   this file inherits light/dark mode for free. The fallbacks keep it
   legible on any page that is missing a token.
   --------------------------------------------------------------- */

/* The three-line button. Hidden until nav.js decides the page's own
   nav has been hidden by a media query — that way this works with the
   720px breakpoint on .topnav pages and the 1120px one on index.html
   without having to know either number. */
.nav-burger {
  display: none;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--hairline-dark, #4A362C);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav-burger.is-visible { display: inline-flex; }

.nav-burger .bar {
  display: block;
  width: 20px;
  height: 1.5px;
  margin: 2.5px auto;
  background: var(--cream, #F2E8D5);
  transition: transform .25s ease, opacity .2s ease;
}

.nav-burger:hover .bar { background: var(--gold-bright, #C6A254); }

/* Three bars fold into a cross while the panel is open. */
.nav-burger[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* The drop-down panel. Animated on max-height so it can size to its
   contents; the value is only an upper bound. */
.nav-panel {
  display: none;
  overflow: hidden;
  max-height: 0;
  background: var(--espresso, #33211A);
  border-top: 1px solid var(--hairline-dark, #4A362C);
  transition: max-height .28s ease;
}

.nav-panel.is-mobile { display: block; }
.nav-panel.is-open { max-height: 80vh; overflow-y: auto; }

.nav-panel ul {
  margin: 0;
  padding: 6px 0;
  list-style: none;
}

.nav-panel li { margin: 0; }

.nav-panel a {
  display: block;
  padding: 13px 28px;
  font-family: var(--sans, "Gill Sans", sans-serif);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--cream, #F2E8D5);
  opacity: 0.9;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nav-panel li:last-child a { border-bottom: 0; }

.nav-panel a:hover,
.nav-panel a:focus-visible {
  opacity: 1;
  color: var(--gold-bright, #C6A254);
  background: rgba(255, 255, 255, 0.04);
}

/* The call-to-action ("Begin Free" on the home page) is pulled into
   the panel too, so it stays reachable on a phone. */
.nav-panel a.is-cta {
  margin: 10px 28px 14px;
  padding: 12px 18px;
  border: 1.5px solid var(--gold, #A8853B);
  border-bottom: 1.5px solid var(--gold, #A8853B);
  color: var(--gold-bright, #C6A254);
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.1em;
}

/* On the three .mast-in pages the nav was never hidden — it just
   wrapped onto extra lines and crowded the bar. Hide it at the same
   720px breakpoint the .topnav pages use so those pages get the
   burger as well, and every page behaves the same way. */
@media (max-width: 720px) {
  .masthead .mast-in > nav { display: none; }
}

/* Keep the masthead on one line once the burger is in play. nav.js adds
   .has-burger only while the burger is actually showing, so these rules
   never affect the desktop bar. */
.masthead.has-burger .masthead-inner,
.masthead.has-burger .mast-in {
  flex-wrap: nowrap;
  gap: 12px;
}

/* The call-to-action is cloned into the panel, so it can leave the bar
   and give the wordmark and the burger room to breathe. */
.masthead.has-burger .masthead-inner > .btn { display: none; }

/* Let the wordmark shrink rather than push the burger off the edge. */
.masthead.has-burger .wordmark {
  min-width: 0;
  flex: 0 1 auto;
}

.masthead.has-burger .wordmark-text { min-width: 0; }

/* The strapline needs two or three lines on a phone and makes the bar
   very tall. The academy name alone is enough at this size. */
@media (max-width: 560px) {
  .masthead.has-burger .wordmark-text small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-panel { transition: none; }
  .nav-burger .bar { transition: none; }
}