/* ============================================================
   site-menu.css — THE MASTER HEADER MENU's look (Session 12)
   The only place the menu is styled. site-menu.js (loaded right after
   the empty <nav class="top-nav-bar"> on each page) writes the links.
     • Inner pages (<html class="mm-split-page">): logo dead centre,
       Home / Visitors / About on the left, Connect / Events / More… on
       the right, each --mm-gap from the logo; page title in CAPITALS
       centred under the logo (fades out when the page scrolls).
     • Homepage: its own black bar (index.html); links together on the right.
     • Phones (760px and narrower): the header menu is hidden — the
       slide-out MENU tab (nav.js) is the phone menu.
   ============================================================ */
nav.top-nav-bar { display: none; }
@media (min-width: 761px) {
  /* inner pages: the menu sits over the page's black .top-bar */
  .mm-split-page nav.top-nav-bar { display: block; position: fixed; top: 0; left: 0; right: 0; height: 90px; z-index: 902; }
  html:not(.mm-split-page) nav.top-nav-bar { display: flex; }   /* homepage bar itself: index.html */

  /* links + "More..." dropdown */
    .top-nav-links { display: flex; align-items: center; gap: 30px; }
    .top-nav-links a {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 500;
      font-size: 16pt;
      color: #ffffff;
      text-decoration: none;
      white-space: nowrap;
    }
    .top-nav-links a:hover { color: #c3fba2; }
    /* "More..." dropdown (Session 07). Button styled to match the links.
       Opens on hover/keyboard focus, or on click (touch tablets). The
       panel starts at the bottom edge of the 90px bar; the ::before strip
       bridges the gap so the panel doesn't close while the mouse moves
       down to it. */
    .top-nav-more { position: relative; }
    .top-nav-more-btn {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 500;
      font-size: 16pt;
      color: #ffffff;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      white-space: nowrap;
    }
    .top-nav-more-btn::after {
      content: "";
      display: inline-block;
      width: 7px; height: 7px;
      margin-left: 8px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: translateY(-4px) rotate(45deg);
      transition: transform 0.2s ease;
    }
    .top-nav-more:hover .top-nav-more-btn,
    .top-nav-more.open .top-nav-more-btn { color: #c3fba2; }
    .top-nav-more:hover .top-nav-more-btn::after,
    .top-nav-more.open .top-nav-more-btn::after { transform: translateY(0) rotate(225deg); }
    .top-nav-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 29px);
      right: -16px;
      min-width: 220px;
      padding: 8px 0;
      background: rgba(0, 0, 0, 0.85);
      border-top: 3px solid #c3fba2;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    }
    .top-nav-dropdown::before {
      content: "";
      position: absolute;
      left: 0; right: 0;
      top: -32px; height: 32px;
    }
    .top-nav-more:hover .top-nav-dropdown,
    .top-nav-more:focus-within .top-nav-dropdown,
    .top-nav-more.open .top-nav-dropdown { display: block; }
    .top-nav-links .top-nav-dropdown a {
      display: block;
      padding: 10px 22px;
      font-size: 15pt;
      color: #ffffff;
    }
    .top-nav-links .top-nav-dropdown a:hover,
    .top-nav-links .top-nav-dropdown a:focus {
      color: #c3fba2;
      background: rgba(255, 255, 255, 0.06);
      outline: none;
    }
}

.top-nav-links a[aria-current="page"] { color: #c3fba2; }

@media (min-width: 761px) {
  /* menu font a little smaller (was 18pt) */
  nav.top-nav-bar .top-nav-links > a,
  nav.top-nav-bar .top-nav-more-btn { font-size: 16pt !important; }
  nav.top-nav-bar, nav.top-nav-bar .top-nav-links { gap: 26px; }

  /* split menu around the centred logo (inner pages) */
  .mm-split-page { --mm-logo: clamp(52px, 5.5vw, 72px); --mm-gap: 80px; }
  .mm-split-page nav.top-nav-bar { left: 0; right: 0 !important; width: 100%; padding: 0; pointer-events: none; background: none; }
  .mm-split-page nav.top-nav-bar .top-nav-links { position: absolute; top: 0; height: 90px; display: flex; align-items: center; pointer-events: auto; }
  .mm-split-page .mm-left  { right: calc(50% + var(--mm-logo) / 2 + var(--mm-gap)); }
  .mm-split-page .mm-right { left:  calc(50% + var(--mm-logo) / 2 + var(--mm-gap)); }
  /* logo always dead centre (pages used to slide it left on narrower screens) */
  .mm-split-page .top-bar { justify-content: center !important; padding-left: 48px !important; padding-right: 48px !important; }
}
@media (min-width: 761px) and (max-width: 1180px) {
  nav.top-nav-bar .top-nav-links > a,
  nav.top-nav-bar .top-nav-more-btn { font-size: 14pt !important; }
  nav.top-nav-bar, nav.top-nav-bar .top-nav-links { gap: 20px; }
}
/* very narrow tablets: tuck the halves in so they never meet the Back button */
@media (min-width: 761px) and (max-width: 880px) { .mm-split-page { --mm-gap: 40px; } }

/* page title centred under the logo, in CAPITALS (all screen sizes) */
.mm-split-page .top-bar-brand { position: relative; }
.mm-split-page .top-bar-brand .bar-title {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px;
  font-size: 1.45rem; letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; pointer-events: none;
  text-shadow: 0 2px 6px rgba(0,0,0,0.35); transition: opacity 0.3s ease;
}
/* the title hangs below the black bar, so it fades out once the page scrolls */
html.mm-split-page.is-scrolled .top-bar-brand .bar-title { opacity: 0; }
@media (max-width: 760px) { .mm-split-page .top-bar-brand .bar-title { font-size: 1.1rem; margin-top: 4px; } }

/* Session 13: bigger page titles. The green header grows by the same
   amount so the title never touches the white tips of the wave.
   (Homepage untouched — it has no .mm-split-page.) */
.mm-split-page .top-bar-brand .bar-title { font-size: 1.95rem; margin-top: 4px; }
.mm-split-page .page-header { --header-h: 174px; }
@media (max-width: 760px) {
  .mm-split-page .top-bar-brand .bar-title { font-size: 1.4rem; margin-top: 3px; }
  .mm-split-page .page-header { --header-h: 124px; }  /* +4px for the 52px phone logo (Session 14) */
}

/* Session 15 (Doug): no wavy, swaying edge on the green page header —
   a plain straight bottom edge, no motion. WEBSITE ONLY: the phone app
   (html.nc-app) keeps its own header from nav.js, untouched. */
html:not(.nc-app) .page-header {
  -webkit-mask-image: none !important; mask-image: none !important;
  -webkit-animation: none !important; animation: none !important;
}