/* =============================================================================
   BizBee Mega-Menu — accessible header dropdowns.
   Loaded AFTER bizbee-style, so it relies on the CSS variables defined globally
   in style.css (--ink, --honey, --amber, --cream, --white, --border, radii, etc.)
   and layers over the base .site-header / .primary-nav / .mobile-nav rules.
   Desktop: hover + focus-within open panels (works without JS); JS enhances with
   click/keyboard/ESC. Mobile: <details> accordion inside the existing drawer.
   ========================================================================== */

/* ----------------------------------------------------------- shared bits */
.mm-caret{ width:10px; height:6px; flex:0 0 auto; }
.mm-caret path{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

.mm-title{
  margin:0 0 6px; padding:0;
  font:500 11.5px/1 var(--font-body);
  letter-spacing:.13em; text-transform:uppercase; color:var(--slate);
}

/* ============================================================ DESKTOP (≥1024px)
   Base (mobile) keeps panels hidden — the drawer handles small screens. */
.primary-nav .mm-panel{ display:none; }

@media (min-width:1024px){
  .primary-nav .mm-bar{
    list-style:none; display:flex; align-items:center; gap:4px; margin:0; padding:0;
  }
  .mm-item{ position:relative; display:flex; }

  /* Top-level label = a real link to the hub; the panel is supplementary. */
  .primary-nav .mm-trigger{
    display:inline-flex; align-items:center; gap:6px;
    color:var(--ink); text-decoration:none;
    font:500 15px var(--font-body);
    padding:10px 12px; border-radius:var(--radius);
    line-height:1.2;
  }
  .primary-nav .mm-trigger:hover{ color:var(--amber); background:var(--cream); }
  .mm-item:hover .mm-caret,
  .mm-item:focus-within .mm-caret{ transform:rotate(180deg); }
  .mm-caret{ transition:transform .18s ease; }

  /* Panel — brand card: white surface, honey top accent, navy text. CLS-safe:
     absolute, no layout shift; z-index above the sticky header (z-index:50). */
  .primary-nav .mm-panel{
    display:block;                 /* present in flow but visually hidden */
    position:absolute; top:calc(100% + 8px); left:0;
    z-index:60;
    min-width:240px;
    background:var(--white);
    border:1px solid var(--border);
    border-top:3px solid var(--honey);
    border-radius:var(--radius-card);
    box-shadow:0 12px 32px -12px rgba(19,41,61,.28);
    padding:18px 20px;
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
    pointer-events:none;
  }
  /* small hover-bridge so the gap under the trigger doesn't drop the panel */
  .primary-nav .mm-panel::before{
    content:""; position:absolute; top:-11px; left:0; right:0; height:11px;
  }

  /* Mega panels can be wider / multi-column */
  .primary-nav .mm-mega{ min-width:380px; }

  /* Keep the last items' panels from overflowing the viewport edge */
  .mm-bar .mm-item:nth-last-child(-n+2) .mm-panel{ left:auto; right:0; }

  .mm-inner{ display:flex; gap:28px; }
  .mm-mini .mm-inner{ display:block; }
  .mm-col{ min-width:150px; }
  .mm-col ul{ list-style:none; margin:0; padding:0; }
  .mm-col li{ margin:0; }
  .mm-col a{
    display:block; padding:8px 10px; margin:0 -10px;
    color:var(--ink); text-decoration:none;
    font:400 15px var(--font-body);
    border-radius:var(--radius);
    min-height:auto;
  }
  .mm-col a:hover,
  .mm-col a:focus-visible{ background:var(--cream); color:var(--amber); }

  /* OPEN — via hover, keyboard focus-within (no-JS), or JS toggled aria-expanded */
  .mm-item:hover  > .mm-panel,
  .mm-item:focus-within > .mm-panel,
  .mm-trigger[aria-expanded="true"] + .mm-panel{
    opacity:1; visibility:visible; transform:translateY(0);
    pointer-events:auto;
    transition:opacity .16s ease, transform .16s ease, visibility 0s linear 0s;
  }
}

/* ============================================================ MOBILE (<1024px)
   Existing hamburger drawer, now an accordion via <details>/<summary>.
   Works without JS; tap targets >=44px. */
.mm-accordion{ list-style:none; margin:0; padding:6px 0; }
.mm-accordion > li{ border-bottom:1px solid var(--border); }
.mm-accordion > li:last-child{ border-bottom:0; }

.mm-acc > summary{
  list-style:none;
  display:flex; align-items:stretch; justify-content:space-between; gap:8px;
  cursor:pointer;
}
.mm-acc > summary::-webkit-details-marker{ display:none; }

.mm-acc-hub{
  flex:1 1 auto; display:flex; align-items:center;
  min-height:48px; padding:12px 16px;
  color:var(--ink); text-decoration:none;
  font:500 16px var(--font-body);
}
.mm-acc-hub:hover{ background:var(--cream); }

/* The caret is the disclosure target; it must be a comfortable tap target. */
.mm-acc-toggle{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:52px; min-height:48px;
  color:var(--slate);
}
.mm-acc[open] .mm-acc-toggle .mm-caret{ transform:rotate(180deg); }
.mm-acc-toggle .mm-caret{ transition:transform .18s ease; width:12px; height:8px; }

.mm-acc-body{ padding:0 16px 10px; background:var(--cream); }
.mm-acc-body .mm-col{ padding-top:6px; }
.mm-acc-body .mm-title{ padding-top:8px; }
.mm-acc-body ul{ list-style:none; margin:0; padding:0; }
.mm-acc-body a{
  display:flex; align-items:center;
  min-height:44px; padding:10px 12px;
  color:var(--ink); text-decoration:none;
  font:400 15px var(--font-body);
  border-radius:var(--radius);
}
.mm-acc-body a:hover{ background:var(--white); color:var(--amber); }

/* ----------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  .primary-nav .mm-panel,
  .mm-caret,
  .mm-acc-toggle .mm-caret{ transition:none !important; }
}