/**
 * mobile-menu.css
 * ---------------
 * VIS-1c.1: Minimal visibility states for the mobile navigation drawer.
 *
 * Why these rules exist:
 * The mobile nav panel uses the HTML `hidden` attribute as its default
 * closed state. Some CSS resets or utility frameworks override `[hidden]`
 * with `display: inherit` or remove the rule entirely, which means the
 * panel would be visible on load even before JS runs. The `!important`
 * guard here ensures the panel stays hidden until mobile-menu.js
 * explicitly removes the attribute and adds the `.is-open` class.
 *
 * Only visibility/display rules live here — visual design (colours,
 * spacing, shadows) belongs in app-header.css / site.css.
 */

/* Default closed state — panel is hidden when no .is-open class is present.
   This ensures the panel is not visible even if the `hidden` attribute is
   absent (e.g. after a JS error or mis-set server-side default). */
[data-mobile-menu-panel] {
    display: none;
}

/* Ensure the panel is hidden when the `hidden` attribute is present.
   !important overrides any framework reset that clears [hidden]. */
[data-mobile-menu-panel][hidden] {
    display: none !important;
}

/* Panel open state — toggled by mobile-menu.js on button click. */
[data-mobile-menu-panel].is-open {
    display: block;
}