/* ===== nav_mobile_layout_fix.css =====
   Force clean horizontal (wrapping) nav on mobile.
   Include this file LAST, after all other CSS.
=================================================== */

@media (max-width: 959px){
  /* Header container behaves like a row that can wrap */
  .site-header .container.nav{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    flex-wrap:wrap !important;
  }

  /* Menu is a horizontal row that wraps to multiple lines if needed */
  #main-menu.menu,
  .site-header .menu{
    position:static !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:center !important; /* center the pills under the brand */
    gap:10px !important;
    width:100% !important;   /* full width line under header */
    margin:0 !important;
    padding:4px 0 !important;
    background:transparent !important;
    box-shadow:none !important;
    z-index:2 !important;
  }

  /* Ensure nav pills don't stretch full width */
  .site-header .menu a{
    display:inline-flex !important;
    align-items:center; justify-content:center;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid rgba(15,23,42,.15);
    background: rgba(255,255,255,.85);
    font-weight:700;
    text-decoration:none !important;
    flex:0 0 auto !important;
  }

  /* Order: brand first, nav second, CTAs third (all stay visible) */
  .site-header .brand{ order: 1; }
  .site-header .menu{ order: 2; }
  .site-header .cta-head{ order: 3; width:100%; display:flex; justify-content:center; gap:10px; }

  /* Avoid collision with hero top content */
  .hero{ scroll-margin-top: 72px; }
}

@media (max-width: 360px){
  .site-header .menu a{ padding:8px 10px; font-size: 0.98rem; }
}