/* 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; }
}

/* Task 718 (Johan msg 1058): no amount may overflow its box. Grid/flex children may shrink below their
   content, amounts and inputs never exceed their container. mw-nav.js lets an over-wide table scroll
   (mw-fit-scroll). Task 732: a boxed figure is NEVER wrapped - it stays on one line and mw-nav.js
   shrinks its font until it fits. These only bite when something would otherwise spill, so values that
   fit look exactly as designed. */
.kpis > *, .tool-tiles > *, .board > *, .board-cards > *, .verdict > *, .two > *, .kpi, .tool, .card { min-width: 0; }
.kpi .val, .verdict .big, .tool .stat, .bars .amt, .tool-score, .tool-tile-value, .kpis .val, .tile .val, .mwl-out .big, [data-mw-fit] { min-width: 0; max-width: 100%; white-space: nowrap; overflow-wrap: normal; }
.tool .stat small, .verdict .big small { white-space: normal; }   /* block captions under a figure still wrap */
.bars li > * { min-width: 0; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { max-width: 100%; }
table.mw-fit-scroll { display: block; max-width: 100%; overflow-x: auto; }

/* Task 732 (Johan): a number in prose is bold and never split across a line - mw-nav.js wraps each one
   in <strong class="mw-n">; the sentence wraps around it instead (overflow-wrap:anywhere), so a long
   word can never push a phone page sideways either. Design rule: Projects\MaxWealth\Designs\design-rules.md. */
.mw-n { white-space: nowrap; font-weight: 700; }
p, li, dd, dt, figcaption, blockquote, h1, h2, h3, h4, [data-mw-prose] { overflow-wrap: anywhere; }