/* ==========================================================================
   Site Navigation (Mobile Overrides)
   Breakpoint: 860px and below
   - Converts menu into full-screen overlay
   - Stacks submenus inline for touch
   - Enables hamburger toggle visibility
   ========================================================================== */

@media (max-width: 860px) {

  /* ------------------------------
     Header/nav layout adjustments
     ------------------------------ */

  .nav {
    flex-wrap: nowrap;
  }

  .brand {
    flex: 1 1 auto;
  }

  .site-nav__toggle,
  .nav-toggle {
    display: inline-flex;
    margin-left: 8px;
  }

  /* ------------------------------
     Full-screen overlay panel
     ------------------------------ */

  .site-nav__menu,
  .menu {
    display: none; /* hidden by default on mobile */
  }

  header.is-nav-open .site-nav__menu,
  header.open .menu {
    display: flex;

    position: fixed;
    inset: 0;

    background: #ffffff;
    z-index: 1000;

    flex-direction: column;
    align-items: stretch;
    gap: 0;

    padding: 84px 20px 28px; /* room for header area */
    overflow: auto;

    animation: nav-fade 0.18s ease;
  }

  @keyframes nav-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Optional dim backdrop (within same overlay layer) */
  header.is-nav-open .site-nav__menu::before,
  header.open .menu::before {
    content: "";
    position: fixed;
    inset: 0;

    background: rgba(11, 42, 63, 0.04);
    pointer-events: none;
  }

  /* Menu items stack full-width */
  .site-nav__item,
  .menu > li {
    width: 100%;
  }

  .site-nav__link,
  .site-nav__button,
  .menu a,
  .menu button {
    width: 100%;
    text-align: left;

    padding: 14px 12px;
    border-radius: 10px;

    font-size: 18px;
  }

  .site-nav__link:hover,
  .site-nav__button:hover,
  .menu a:hover,
  .menu button:hover {
    background: rgba(27, 121, 165, 0.08);
  }

  /* ------------------------------
     Submenus stack inline for touch
     ------------------------------ */

  .site-nav__submenu,
  .submenu {
    position: static !important;
    display: block !important;

    margin: 0 !important;

    border-left: 4px solid rgba(11, 42, 63, 0.06);
    border-right: 0;
    border-top: 0;
    border-bottom: 0;

    box-shadow: none;
    padding: 0 0 0 8px;
  }

  .site-nav__submenu a,
  .submenu a {
    padding: 10px 12px;
  }

  /* ------------------------------
     Button override inside menu
     (Back-compat: .btn.alt_dark)
     ------------------------------ */

  .menu .btn.alt_dark {
    background: none !important;
    color: var(--teal) !important;

    padding: 6px 10px !important;
    border-radius: 8px !important;

    font-weight: 600 !important;
    box-shadow: none !important;
  }

  .menu .btn.alt_dark:hover {
    background: rgba(27, 121, 165, 0.10) !important;
  }

  /* ------------------------------
     Legacy override: ensure full-viewport overlay
     (Back-compat: #primary-menu + body.nav-open)
     ------------------------------ */

  body.is-nav-open #primary-menu,
  body.nav-open #primary-menu {
    display: flex !important;

    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100vw;
    height: 100vh;

    margin: 0;
    padding: 96px 24px 32px;

    background: #ffffff;
    z-index: 9999 !important;

    flex-direction: column;
    align-items: stretch;
    gap: 0;

    overflow: auto;
  }

  body.is-nav-open #primary-menu::before,
  body.nav-open #primary-menu::before {
    content: "";
    position: fixed;
    inset: 0;

    background: rgba(11, 42, 63, 0.04);
    pointer-events: none;
  }

/* ------------------------------------------------
   Visual separation for secondary actions
   (About + YouTube) in mobile menu
-------------------------------------------------- */

.menu > li:nth-last-child(2),
.menu > li:last-child {
  margin-top: 14px;
}

}