/* MaxWealth shared burger menu (task 665) - used by the app (_Layout, _Public) AND the static
   marketing site. CANONICAL COPY: Projects\HomeFin\BudgetControl\BudgetControl.Site\wwwroot\css\mw-nav.css.
   Marketing\deploy.ps1 copies this file to the marketing site root - edit it here, nowhere else.

   Markup contract:
     <button type="button" class="mw-burger" aria-expanded="false" aria-controls="mw-menu">
       <span class="mw-burger-bars" aria-hidden="true"></span><span class="mw-burger-text">Menu</span></button>
     <nav|div id="mw-menu" class="mw-menu"> ...links... </nav|div>
   Below 768px the menu hides behind the button. The hiding only happens once mw-nav.js has put
   .mw-nav-js on <html>, so without script the full menu stays visible. Host-specific layout of the
   open menu lives with the host (marketing site.css, app maxwealth.css). */
.mw-burger { display: none; }

@media (max-width: 767.98px) {
    .mw-nav-js .mw-burger {
        display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
        min-width: 44px; min-height: 44px; padding: .45rem .8rem; margin: 0;
        border: 2px solid currentColor; border-radius: 10px; background: transparent; color: inherit;
        font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer;
        -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    }
    .mw-nav-js .mw-burger:focus-visible { outline: 3px solid #D99A2B; outline-offset: 2px; }
    .mw-burger-bars, .mw-burger-bars::before, .mw-burger-bars::after {
        display: block; width: 20px; height: 2px; background: currentColor; border-radius: 1px;
        transition: transform .15s ease, background-color .15s ease;
    }
    .mw-burger-bars { position: relative; }
    .mw-burger-bars::before, .mw-burger-bars::after { content: ""; position: absolute; left: 0; }
    .mw-burger-bars::before { top: -6px; }
    .mw-burger-bars::after { top: 6px; }
    .mw-burger[aria-expanded="true"] .mw-burger-bars { background: transparent; }
    .mw-burger[aria-expanded="true"] .mw-burger-bars::before { transform: translateY(6px) rotate(45deg); }
    .mw-burger[aria-expanded="true"] .mw-burger-bars::after { transform: translateY(-6px) rotate(-45deg); }

    .mw-nav-js .mw-menu { display: none; }
    .mw-nav-js .mw-menu.is-open { display: block; flex: 1 1 100%; width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mw-burger-bars, .mw-burger-bars::before, .mw-burger-bars::after { transition: none; }
}