/* =========================================================
   MENU — Mobile fallback (no JS)
   IMPORTANT: keep this file last in the <link> order
========================================================= */


/* =========================================================
   1) Mobile fallback (if JS is disabled)
   - Uses an overlay dropdown panel.
   - These styles ONLY apply if .is-collapsed is NOT present.
========================================================= */
@media (max-width: 768px){
  .menu:not(.is-collapsed){ justify-content: flex-start; padding: 0 14px; }
  .menu:not(.is-collapsed) .menu-toggle{ display: block; }
  .menu:not(.is-collapsed) .menu-list{ display: none; }

  .menu.is-open .menu-list{
    display: flex;
    flex-direction: column;

    position: absolute;
    top: var(--menu-minh);
    left: 0;
    right: 0;

    background: var(--menu-blue);
    padding: 10px 0;
    z-index: 10002;
  }

  .menu.is-open .menu-link{
    height: 48px;
    justify-content: flex-start;
    padding: 0 18px;
    font-size: 16px;
  }

  /* Only in this fallback path: allow dropdowns to render inside the open panel */
  .menu.is-open:not(.is-collapsed) .dropdown {
    position: static;
    transform: none;
    min-width: 0;

    border-radius: 0;
    border: 0;
    box-shadow: none;

    display: block;
    padding: 0 0 10px 0;
    background: transparent;
  }

  .menu.is-open:not(.is-collapsed) .dropdown::before { display: none; }

  .menu.is-open:not(.is-collapsed) .dropdown .menu-link{
    color: #fff;
    padding-left: 32px;
    background: transparent;
    line-height: 1.2;
    white-space: normal;
  }

  .menu.is-open:not(.is-collapsed) .dropdown .menu-link:hover {
    background: rgba(255,255,255,.10);
  }
}