/* =====================================================================
   mobile-nav.css
   Mobile-only header treatment for moval.org:
     - Static black social bar above the hamburger (sticky to top)
     - Logo stacked above the hamburger button (column-reverse)
     - Hamburger button: white outline, translucent fill
     - Dropdown menu block: matches the gray logo-bar background
   Desktop (>768px) styles are untouched; everything lives inside the
   mobile media query except the default hidden state for the social bar.
   Works with both .menu-logo-bar (class) and #menu-logo-bar (id),
   which are both used across the site's templates.
   ===================================================================== */

.mobile-social-bar { display: none; }

@media screen and (max-width: 768px) {

  /* ---- Static black top bar with white social icons ---- */
  .mobile-social-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    background-color: #0f1011;
    padding: 10px 12px;
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
  }
  .mobile-social-bar a {
    color: #ffffff;
    font-size: 1.25rem;
    text-decoration: none;
    line-height: 1;
  }
  .mobile-social-bar a:hover,
  .mobile-social-bar a:focus {
    color: #92DEFB;
  }

  /* ---- Stack logo above hamburger on mobile ----
     slicknav is prepended to the logo bar via mv-init-full.js,
     so it sits FIRST in the DOM. column-reverse flips the visual
     order so the logo shows on top and hamburger below. */
  .menu-logo-bar,
  #menu-logo-bar {
    display: flex;
    flex-direction: column-reverse;
  }
  .menu-logo-bar .container,
  #menu-logo-bar .container {
    text-align: center;
    padding: 8px 0;
  }

  /* Logo wrappers vary across templates: most use <div class="logo">,
     mv1-page.dwt has the <a> directly in .container.  Handle both. */
  .menu-logo-bar .logo,
  #menu-logo-bar .logo,
  .menu-logo-bar .container > a,
  #menu-logo-bar .container > a {
    float: none;
    width: auto;
    display: inline-block;
    margin: 0;
  }
  .menu-logo-bar .logo img,
  #menu-logo-bar .logo img,
  .menu-logo-bar .container > a > img,
  #menu-logo-bar .container > a > img {
    max-height: 70px;
    width: auto;
  }

  /* Hide the desktop mega-menu column on mobile (slicknav replaces it) */
  .menu-logo-bar .grid_9,
  #menu-logo-bar .grid_9 {
    display: none !important;
  }

  /* ---- Slicknav menu block: match the gray logo bar background ---- */
  .menu-logo-bar .slicknav_menu,
  #menu-logo-bar .slicknav_menu {
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    background: #354043 !important;
  }

  /* ---- Hamburger button: white outline, translucent fill ---- */
  .menu-logo-bar .slicknav_btn,
  #menu-logo-bar .slicknav_btn {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid #ffffff !important;
    box-shadow: none !important;
    text-shadow: none !important;
    float: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .menu-logo-bar .slicknav_btn:hover,
  .menu-logo-bar .slicknav_btn:focus,
  #menu-logo-bar .slicknav_btn:hover,
  #menu-logo-bar .slicknav_btn:focus {
    background-color: rgba(255, 255, 255, 0.2) !important;
  }
  .menu-logo-bar .slicknav_menu .slicknav_menutxt,
  #menu-logo-bar .slicknav_menu .slicknav_menutxt {
    color: #ffffff;
    text-shadow: none;
  }
  .menu-logo-bar .slicknav_menu .slicknav_icon-bar,
  #menu-logo-bar .slicknav_menu .slicknav_icon-bar {
    background-color: #ffffff !important;
    box-shadow: none !important;
  }
}