/* =============================================================
   Mega Menu — Design Tokens (theme-agnostic defaults)
   =============================================================

   Ships with the plugin. Contains NO site-specific values.

   Three layers, in cascade order:
     1. this file          — neutral, AA-safe defaults. Works on any theme.
     2. theme inheritance  — tokens that default to `inherit`/`currentColor`
                             pick up the host theme automatically.
     3. presets/overrides  — per-site values (see docs/EXTENDING.md for how
                             to register a preset, e.g. presets/acme.css),
                             or the plugin's settings screen, which emits
                             the same custom properties inline.

   Nothing here hardcodes a font stack or a brand color. Anything that
   CAN sensibly inherit from the host theme does.

   Contrast: every default text/background pair below meets WCAG 2.1 AA
   (>=4.5:1 normal text). If a site overrides these, the settings screen
   re-checks the pairs and warns — accessibility is not silently lost to
   a color picker.
   ============================================================= */

.mm-root,
:root {
  /* ---- Surfaces ---------------------------------------------------- */

  /* The trigger row sits in the host theme's header, whatever that is.
     Default to transparent + currentColor so the menu adopts the theme's
     existing header treatment — including themes with transparent-over-hero
     headers, sticky color swaps, or dark modes. Override per site only if
     the theme's header color cannot be inherited. */
  --mm-nav-bg:           transparent;
  /* `inherit`, NOT `currentColor`: `color: var(--mm-nav-color)` with the token
     set to currentColor is invalid at computed-value time, so browsers drop the
     declaration and any theme `a { color: … }` rule wins (e.g. a green link
     color bleeding onto the nav). `inherit` survives var() substitution and
     correctly picks up the header's color. */
  --mm-nav-color:        inherit;
  --mm-nav-color-hover:  inherit;

  --mm-panel-bg:         #ffffff;
  --mm-panel-bg-alt:     #f4f6f8;   /* metric block */
  --mm-row-hover-bg:     #f4f6f8;   /* row hover surface — makes the full-width hit area visible */
  --mm-panel-shadow:     0 12px 32px -8px rgba(16, 24, 32, 0.18);

  /* ---- Borders ----------------------------------------------------- */
  --mm-border:           #e3e6ea;   /* hairline row dividers (decorative) */
  /* Outlined-button border. Must reach 3:1 against the panel background —
     WCAG 1.4.11 treats a control's boundary as a UI component, not decoration.
     #c3cad2 measures 2.0:1 and is too faint; this is the lightest value that
     still passes. */
  --mm-border-strong:    #8593a5;   /* 3.13:1 on white */

  /* ---- Text -------------------------------------------------------- */
  --mm-text-primary:     #1f2933;   /* 14.8:1 on white */
  --mm-text-secondary:   #52606d;   /*  7.6:1 on white */
  --mm-text-muted:       #5c6773;   /*  6.5:1 on white — descriptors, kicker.
                                        Reduced emphasis comes from size and
                                        weight, never from dropping contrast. */

  /* ---- Accent ------------------------------------------------------ */
  /* Neutral slate-blue default. Chosen because it passes AA on white at
     small sizes AND takes white text at AA — most brand accents do only one.
     Sites override via preset or settings. */
  --mm-accent:           #2a5f9e;   /* 6.4:1 on white; white on it 6.4:1 */
  --mm-accent-strong:    #1d4877;   /* hover — 9.3:1 */
  --mm-accent-contrast:  #ffffff;
  --mm-accent-soft:      #eef3f9;   /* badge background */
  --mm-star:             #c47f18;   /* decorative glyph only, never text */
  --mm-proofbar-dot:     #4caf50;   /* live-availability dot; deliberately its own
                                        green, not --mm-accent, to read as a status
                                        light rather than a brand color */

  /* ---- Typography -------------------------------------------------- */
  /* Inherit the host theme's family by default — this is the single biggest
     factor in the menu not looking bolted on. */
  --mm-font:             inherit;

  /* Panel type sits one step up from a typical dropdown. At 12.5px the link
     labels read as fine print next to a 15–16px nav, which is the wrong
     signal for the primary navigation of a considered purchase. */
  --mm-fs-kicker:        10.5px;
  --mm-fs-col-header:    15px;
  --mm-fs-col-tag:       10.5px;
  --mm-fs-item:          14px;
  --mm-fs-descriptor:    12px;
  --mm-fs-nav:           inherit;   /* match the theme's existing nav size */
  --mm-fs-btn:           13px;
  --mm-fs-metric:        24px;      /* the panel's most persuasive element */
  --mm-fs-metric-desc:   11.5px;
  --mm-fs-metric-client: 10px;

  --mm-fw-col-header:    600;
  --mm-fw-flagship:      500;
  --mm-fw-item:          400;
  --mm-fw-btn:           600;

  --mm-ls-kicker:        0.6px;
  --mm-lh-tight:         1.15;
  --mm-lh-base:          1.3;
  --mm-lh-copy:          1.45;

  /* ---- Spacing ----------------------------------------------------- */
  /* Trimmed alongside the larger type: the panel has to stay clear of the
     hero on a 13" laptop, where an 80px header plus the panel is the whole
     viewport. Type carries the hierarchy; whitespace no longer has to. */
  --mm-panel-pad-y:      22px;
  --mm-panel-pad-x:      28px;
  --mm-col-gap:          30px;
  --mm-row-pad:          10px;
  --mm-section-gap:      20px;

  /* LOAD-BEARING: keeps flagship rows aligned across columns even when a
     column header wraps to two lines. Long compound labels (German, Dutch,
     Finnish) wrap readily — do not remove. */
  --mm-col-header-minh:  56px;
  --mm-col-header-mb:    10px;

  /* LOAD-BEARING: stops the footer row shifting as the metric rotates.
     Two description lines plus a client line are always reserved.
     Widened from 178px — German proof copy wrapped mid-word at that width. */
  --mm-metric-w:         232px;
  --mm-metric-h:         82px;   /* headroom: German proof copy runs long */
  --mm-metric-desc-h:    32px;

  /* ---- Shape ------------------------------------------------------- */
  /* Default to modest radii that read as neutral rather than opinionated.
     Sites with pill buttons or square buttons override one value. */
  --mm-radius-btn:       6px;

  /* 16px, not a smaller "modest" default like the other two here: verified
     against the plugin's own production lineage (the desktop panel this
     token styles), which has always shipped at 16px -- 10px was a
     mismatch against that value, not a deliberate neutral choice. No
     calc() anywhere derives a different radius from this token (checked
     across every stylesheet), so raising it only ever changes this exact
     visual property everywhere it's used: the desktop panel itself, and
     the Reviews component's bubble/card surfaces that intentionally share
     it as the same "floating surface" family. */
  --mm-radius-panel:     16px;
  --mm-radius-badge:     50px;
  --mm-btn-pad:          10px 20px;

  /* ---- Layout ------------------------------------------------------ */
  /* Panel is centred on the trigger row and clamped to the viewport, so it
     works whether the theme's container is 960px or 1600px. A site can pin
     it to an exact container width via the settings screen. */
  --mm-panel-max-w:      1100px;
  --mm-panel-max-h:      650px;
  --mm-panel-offset:     8px;       /* gap between trigger row and panel top */
  --mm-breakpoint:       1024px;    /* below: hidden + JS unbound (configurable) */

  /* ---- Motion ------------------------------------------------------ */
  --mm-open-dur:         190ms;
  --mm-open-ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --mm-close-dur:        140ms;
  --mm-close-ease:       cubic-bezier(0.4, 0, 1, 1);
  --mm-open-translate:   5px;

  --mm-hover-open-delay:  140ms;
  --mm-hover-close-delay: 300ms;

  --mm-metric-interval:  3800ms;
  --mm-metric-fade:      350ms;

  /* ---- Rail layout (layout = rail) --------------------------------- */
  --mm-rail-w:           272px;    /* category rail column width */
  --mm-rail-bg:          #fafbfc;  /* rail + proof-bar surface */
  --mm-avatar-size:      32px;     /* per-item avatar diameter */
  --mm-panes-minh:       300px;    /* reserved so switching categories never shifts the proof bar */

  /* ---- Header mode (opt-in full header) ---------------------------- */
  --mm-header-h:         80px;
  --mm-header-max-w:     1248px;
  --mm-logo-h:           30px;
  /* Transparent over a hero by default; a solid surface once stuck on scroll.
     Colors inherit so the bar adopts the theme; a site pins exact values. */
  --mm-header-bg:           transparent;
  --mm-header-stuck-bg:     #ffffff;
  --mm-header-color:        inherit;
  --mm-header-stuck-color:  var(--mm-text-primary);
}

/* Motion is opt-out, not opt-in. */
@media (prefers-reduced-motion: reduce) {
  .mm-root,
  :root {
    --mm-open-dur:   0ms;
    --mm-close-dur:  0ms;
    --mm-open-translate: 0px;
  }
  /* Metric rotation must be disabled in JS, not just CSS. */
}