/* ==========================================================================
   hamburger.css — State-Driven Hamburger Navigation (Gap J)
   Part of Mosaiq Studio Mobile Responsive Hardening

   5-State Machine:
     CLOSED ──T1──> EXPANDING ──T2──> EXPANDED ──T3──> COLLAPSING ──T4──> CLOSED
                       |                                    |
                       +──── FORCE_CLOSING (from any open) ──+

   State hooks (both supported):
     [data-hamburger-state="CLOSED|EXPANDING|EXPANDED|COLLAPSING|FORCE_CLOSING"]
       — Direct state attribute (used in test fixtures / SSR)
     aria-expanded="true|false" on toggle
       — ARIA bridge for JS-driven state machine
     aria-hidden="false|true" on drawer/overlay
       — ARIA bridge, mirrors drawer visibility

   Dual attribute naming (both supported):
     data-hamburger-toggle  AND  [data-hamburger="button"]
     data-hamburger-drawer  AND  [data-hamburger="drawer"]
     data-hamburger-overlay AND  [data-hamburger="overlay"]
     data-hamburger-close   AND  [data-hamburger="close"]

   Breakpoints: XS (<576px) and SM (576-767px) only
     Hidden on MD+ via @media (min-width: 768px)
   ========================================================================== */


/* ═══════════════════════════════════════════════════════════════════════════
   1. BASE STATES — Defaults for all elements
      These apply outside any media query so the cascade is predictable.
      Visible on mobile, hidden on desktop via the min-width media query.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- Toggle button (hamburger icon) ---------------------------------- */
.hamburger__button,
[data-hamburger-toggle],
[data-hamburger="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* sizing */
  width: var(--rh-hamburger-hit-area, 44px);
  height: var(--rh-hamburger-hit-area, 44px);
  min-width: var(--rh-hamburger-hit-area, 44px);
  min-height: var(--rh-hamburger-hit-area, 44px);
  padding: 0;
  /* reset button styles */
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
  font-size: var(--rh-hamburger-icon-size, 24px);
  line-height: 1;
  /* z-index above drawer overlay */
  z-index: var(--hamburger-button-z-index, 1001);
  position: relative;
  /* ARIA: cursor style for clickable state */
  -webkit-tap-highlight-color: transparent;
}

.hamburger__button:focus-visible,
[data-hamburger-toggle]:focus-visible,
[data-hamburger="button"]:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, #4a90d9);
  outline-offset: var(--focus-ring-offset, 2px);
}

/* Hamburger icon — the ☰ / ✕ character */
.hamburger__icon,
[data-hamburger-toggle] .hamburger__icon,
[data-hamburger="button"] .hamburger__icon {
  pointer-events: none;
  user-select: none;
}


/* ---- Drawer (slides in from left) ------------------------------------ */
.hamburger__drawer,
[data-hamburger-drawer],
[data-hamburger="drawer"] {
  position: fixed;
  top: 52px;
  left: 0;
  width: var(--hamburger-drawer-width, 280px);
  max-width: 85vw;
  height: calc(100% - 52px);
  height: calc(100dvh - 52px); /* below toolbar */
  z-index: var(--rh-drawer-z-index, 2100);
  background: var(--rh-drawer-bg, #fff);
  box-shadow: var(--rh-drawer-shadow, 2px 0 12px rgba(0, 0, 0, 0.15));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* CLOSED state: off-screen */
  transform: translateX(-100%);
  visibility: visible;

  /* Transition: COLLAPSING uses 200ms ease-in, EXPANDING uses 300ms ease-out,
     FORCE_CLOSING uses none.  We set the default to the slowest transition
     and override per-state below. */
  transition: transform 300ms ease-out;

  /* Safe area padding for notched devices */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}


/* ---- Overlay (backdrop behind drawer) -------------------------------- */
.hamburger__overlay,
[data-hamburger-overlay],
[data-hamburger="overlay"] {
  position: fixed;
  inset: 0;
  z-index: var(--rh-overlay-z-index, 2000);
  background: var(--responsive-overlay-bg, rgba(0, 0, 0, 0.4));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);

  /* CLOSED state: hidden */
  opacity: 0;
  pointer-events: none;

  /* Transition: matches drawer timing */
  transition: opacity 300ms ease-out;
}


/* ---- Close button (inside drawer) ------------------------------------ */
.hamburger__close,
[data-hamburger-close],
[data-hamburger="close"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--rh-hamburger-hit-area, 44px);
  height: var(--rh-hamburger-hit-area, 44px);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  position: absolute;
  top: 0;
  right: 0;
  -webkit-tap-highlight-color: transparent;
}

.hamburger__close:focus-visible,
[data-hamburger-close]:focus-visible,
[data-hamburger="close"]:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, #4a90d9);
  outline-offset: var(--focus-ring-offset, 2px);
}


/* ---- Nav menu items (inside drawer) ---------------------------------- */
.hamburger__menuitem,
[data-hamburger-menu] a,
[data-hamburger="drawer"] a {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--responsive-text-color, #1a1a1a);
  border-bottom: 1px solid var(--responsive-border-color, #e0e0e0);
  transition: background-color 150ms ease;
}

.hamburger__menuitem:hover,
[data-hamburger-menu] a:hover,
[data-hamburger="drawer"] a:hover {
  background: var(--responsive-hover-bg, #f5f5f5);
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. STATE-DRIVEN STYLES — via data-hamburger-state attribute
      Used when the state machine is driven via a state attribute on
      the container element (e.g. test fixtures, SSR).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- EXPANDED state -------------------------------------------------- */
/* Drawer: slide onto screen */
[data-hamburger-state="EXPANDED"] .hamburger__drawer,
[data-hamburger-state="EXPANDED"] [data-hamburger-drawer],
[data-hamburger-state="EXPANDED"] [data-hamburger="drawer"],
/* Also support state on the elements themselves */
.hamburger__drawer[data-hamburger-state="EXPANDED"],
[data-hamburger-drawer][data-hamburger-state="EXPANDED"],
[data-hamburger="drawer"][data-hamburger-state="EXPANDED"] {
  transform: translateX(0);
}

/* Overlay: fade in */
[data-hamburger-state="EXPANDED"] .hamburger__overlay,
[data-hamburger-state="EXPANDED"] [data-hamburger-overlay],
[data-hamburger-state="EXPANDED"] [data-hamburger="overlay"],
.hamburger__overlay[data-hamburger-state="EXPANDED"],
[data-hamburger-overlay][data-hamburger-state="EXPANDED"],
[data-hamburger="overlay"][data-hamburger-state="EXPANDED"] {
  opacity: 1;
  pointer-events: all;
}


/* ---- EXPANDING state (transitioning in) ------------------------------ */
/* 300ms ease-out transition is already set as the default above.
   No additional transform/opacity changes — the EXPANDED styles apply
   once the attribute changes.  If the state attribute is set to EXPANDING
   before EXPANDED, ensure the transition is active. */
[data-hamburger-state="EXPANDING"] .hamburger__drawer,
[data-hamburger-state="EXPANDING"] [data-hamburger-drawer],
[data-hamburger-state="EXPANDING"] [data-hamburger="drawer"],
.hamburger__drawer[data-hamburger-state="EXPANDING"],
[data-hamburger-drawer][data-hamburger-state="EXPANDING"],
[data-hamburger="drawer"][data-hamburger-state="EXPANDING"] {
  transition: transform 300ms ease-out;
}

[data-hamburger-state="EXPANDING"] .hamburger__overlay,
[data-hamburger-state="EXPANDING"] [data-hamburger-overlay],
[data-hamburger-state="EXPANDING"] [data-hamburger="overlay"],
.hamburger__overlay[data-hamburger-state="EXPANDING"],
[data-hamburger-overlay][data-hamburger-state="EXPANDING"],
[data-hamburger="overlay"][data-hamburger-state="EXPANDING"] {
  transition: opacity 300ms ease-out;
}


/* ---- COLLAPSING state (transitioning out) ---------------------------- */
/* 200ms ease-in for slide-out */
[data-hamburger-state="COLLAPSING"] .hamburger__drawer,
[data-hamburger-state="COLLAPSING"] [data-hamburger-drawer],
[data-hamburger-state="COLLAPSING"] [data-hamburger="drawer"],
.hamburger__drawer[data-hamburger-state="COLLAPSING"],
[data-hamburger-drawer][data-hamburger-state="COLLAPSING"],
[data-hamburger="drawer"][data-hamburger-state="COLLAPSING"] {
  transition: transform 200ms ease-in;
  transform: translateX(-100%);
}

[data-hamburger-state="COLLAPSING"] .hamburger__overlay,
[data-hamburger-state="COLLAPSING"] [data-hamburger-overlay],
[data-hamburger-state="COLLAPSING"] [data-hamburger="overlay"],
.hamburger__overlay[data-hamburger-state="COLLAPSING"],
[data-hamburger-overlay][data-hamburger-state="COLLAPSING"],
[data-hamburger="overlay"][data-hamburger-state="COLLAPSING"] {
  transition: opacity 200ms ease-in;
  opacity: 0;
}


/* ---- FORCE_CLOSING state (instant close, no transition) -------------- */
[data-hamburger-state="FORCE_CLOSING"] .hamburger__drawer,
[data-hamburger-state="FORCE_CLOSING"] [data-hamburger-drawer],
[data-hamburger-state="FORCE_CLOSING"] [data-hamburger="drawer"],
.hamburger__drawer[data-hamburger-state="FORCE_CLOSING"],
[data-hamburger-drawer][data-hamburger-state="FORCE_CLOSING"],
[data-hamburger="drawer"][data-hamburger-state="FORCE_CLOSING"] {
  transition: none;
  transform: translateX(-100%);
}

[data-hamburger-state="FORCE_CLOSING"] .hamburger__overlay,
[data-hamburger-state="FORCE_CLOSING"] [data-hamburger-overlay],
[data-hamburger-state="FORCE_CLOSING"] [data-hamburger="overlay"],
.hamburger__overlay[data-hamburger-state="FORCE_CLOSING"],
[data-hamburger-overlay][data-hamburger-state="FORCE_CLOSING"],
[data-hamburger="overlay"][data-hamburger-state="FORCE_CLOSING"] {
  transition: none;
  opacity: 0;
}

/* ---- CLOSED state (explicit) ----------------------------------------- */
[data-hamburger-state="CLOSED"] .hamburger__drawer,
[data-hamburger-state="CLOSED"] [data-hamburger-drawer],
[data-hamburger-state="CLOSED"] [data-hamburger="drawer"],
.hamburger__drawer[data-hamburger-state="CLOSED"],
[data-hamburger-drawer][data-hamburger-state="CLOSED"],
[data-hamburger="drawer"][data-hamburger-state="CLOSED"] {
  transform: translateX(-100%);
}

[data-hamburger-state="CLOSED"] .hamburger__overlay,
[data-hamburger-state="CLOSED"] [data-hamburger-overlay],
[data-hamburger-state="CLOSED"] [data-hamburger="overlay"],
.hamburger__overlay[data-hamburger-state="CLOSED"],
[data-hamburger-overlay][data-hamburger-state="CLOSED"],
[data-hamburger="overlay"][data-hamburger-state="CLOSED"] {
  opacity: 0;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. ARIA-DRIVEN STATE STYLES
      aria-expanded="true" on toggle → expanded state (JS bridge)
      aria-expanded="false" on toggle → closed state (JS bridge)
      aria-hidden="false" on drawer/overlay → expanded state (JS bridge)
      aria-hidden="true" on drawer/overlay → closed state (JS bridge)

      These mirror the data-hamburger-state styles above but use
      standard WAI-ARIA attributes as the state hook.  They work
      whether the JS sets them or SSR emits them.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- Expanded via ARIA attributes ------------------------------------ */
/* When toggle says expanded AND drawer says not-hidden → expanded */
[aria-expanded="true"][aria-controls] + .hamburger__drawer,
[aria-expanded="true"][aria-controls] ~ .hamburger__drawer,
[aria-expanded="true"][aria-controls] + [data-hamburger-drawer],
[aria-expanded="true"][aria-controls] ~ [data-hamburger-drawer],
[aria-expanded="true"][aria-controls] + [data-hamburger="drawer"],
[aria-expanded="true"][aria-controls] ~ [data-hamburger="drawer"] {
  transform: translateX(0);
}

[aria-expanded="true"][aria-controls] + .hamburger__overlay,
[aria-expanded="true"][aria-controls] ~ .hamburger__overlay,
[aria-expanded="true"][aria-controls] + [data-hamburger-overlay],
[aria-expanded="true"][aria-controls] ~ [data-hamburger-overlay],
[aria-expanded="true"][aria-controls] + [data-hamburger="overlay"],
[aria-expanded="true"][aria-controls] ~ [data-hamburger="overlay"] {
  opacity: 1;
  pointer-events: all;
}

/* When drawer / overlay have aria-hidden="false" — expanded */
.hamburger__drawer[aria-hidden="false"],
[data-hamburger-drawer][aria-hidden="false"],
[data-hamburger="drawer"][aria-hidden="false"] {
  transform: translateX(0);
}

.hamburger__overlay[aria-hidden="false"],
[data-hamburger-overlay][aria-hidden="false"],
[data-hamburger="overlay"][aria-hidden="false"] {
  opacity: 1;
  pointer-events: all;
}

/* ---- Closed via ARIA attributes -------------------------------------- */
.hamburger__drawer[aria-hidden="true"],
[data-hamburger-drawer][aria-hidden="true"],
[data-hamburger="drawer"][aria-hidden="true"] {
  transform: translateX(-100%);
}

.hamburger__overlay[aria-hidden="true"],
[data-hamburger-overlay][aria-hidden="true"],
[data-hamburger="overlay"][aria-hidden="true"] {
  opacity: 0;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3b. BEM MODIFIER CLASSES
       Modifier classes for explicit JS-driven state toggles (used by
       viewport-manager.js / hamburger.js as an alternative to the
       data-hamburger-state attribute pattern above).

       These follow strict BEM naming: Block__Element--Modifier
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- Active toggle button -------------------------------------------- */
.hamburger__button--active {
  /* Active state color / highlight when drawer is open */
  background: var(--responsive-hover-bg, rgba(0, 0, 0, 0.05));
  color: var(--accent, #10b981);
}

/* Expanded drawer — visible on screen (translate to natural position) */
.hamburger__drawer--expanded {
  transform: translateX(0);
}

/* Visible overlay — fully opaque and interactive */
.hamburger__overlay--visible {
  opacity: 1;
  pointer-events: all;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. MOBILE-ONLY — Visible only on XS and SM breakpoints
      Hidden on MD+ (tablet and desktop viewports).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Desktop: force-hide hamburger elements (MD, LG, XL) */
@media (min-width: 768px) {
  .hamburger__button,
  .hamburger__drawer,
  .hamburger__overlay,
  .hamburger__close,
  [data-hamburger-toggle],
  [data-hamburger-drawer],
  [data-hamburger-overlay],
  [data-hamburger-close],
  [data-hamburger="button"],
  [data-hamburger="drawer"],
  [data-hamburger="overlay"],
  [data-hamburger="close"] {
    display: none !important;
  }
}

/* Mobile: show hamburger UI */
@media (max-width: 767px) {
  .hamburger__button,
  [data-hamburger-toggle],
  [data-hamburger="button"] {
    display: inline-flex;
  }

  .hamburger__drawer,
  [data-hamburger-drawer],
  [data-hamburger="drawer"] {
    display: block;
  }

  .hamburger__overlay,
  [data-hamburger-overlay],
  [data-hamburger="overlay"] {
    display: block;
  }

  /* Board column collapse and grid !important rules are delegated to
     board-collapse.css and overrides.css — they use higher-specificity
     selectors ([data-responsive-board-columns]) for cleaner cascades. */
}

/* Extra small phones (<=480px): drawer takes full viewport width.
   Overrides the 280px/320px default drawer width for the tightest screens. */
@media (max-width: 480px) {
  .hamburger__drawer,
  [data-hamburger-drawer],
  [data-hamburger="drawer"] {
    width: 100%;
  }

  /* Tighten content padding to 8px on the smallest screens */
  main {
    padding-left: 8px;
    padding-right: 8px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. PREFERS-REDUCED-MOTION OVERRIDE
      When the user prefers reduced motion, transitions complete instantly.
      Matches the hamburger.js AC-9 behavior (timers set to 0ms).
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .hamburger__drawer,
  .hamburger__overlay,
  [data-hamburger-drawer],
  [data-hamburger-overlay],
  [data-hamburger="drawer"],
  [data-hamburger="overlay"] {
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. HIGH CONTRAST / FORCED COLORS
      Ensure the backdrop overlay preserves darkness even in forced-color
      modes.  The overlay acts as a visual scrim, not a color indicator.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (forced-colors: active) {
  .hamburger__overlay,
  [data-hamburger-overlay],
  [data-hamburger="overlay"] {
    /* In forced-colors mode, background:rgba may not render — use
       CanvasText with opacity as a workaround.  If that also fails,
       fall back to a semi-transparent overlay via opacity on a
       pseudo-element. */
    background: Canvas;
    opacity: 0.3;
  }
}