/* ============================================================================
   MASON'S VISION — DESKTOP MEGA MENU
   Desktop-only (≥1024px). On smaller viewports this whole module is inert —
   the existing burger drawer (design-system.css / _header.html) takes over.
   Depends on the brand tokens in design-system.css (--mv-ink / --mv-default /
   --mv-highlight / fonts / motion). Enqueue AFTER design-system.css.

   Contents
   ─────────
   1. Trigger (nav item that owns a panel)
   2. Panel shell (full-width, flush under the header)
   3. Columns + hairline dividers
   4. Category links
   5. Featured rail (image + linkable highlight)
   6. Open/close states + motion
   7. Reduced-motion + focus
   ========================================================================== */

/* The module only exists at desktop. Everything is wrapped so mobile is untouched. */
@media (min-width: 1024px) {

  /* 0. POSITIONING CONTEXT --------------------------------------------------
     The panel is full-bleed and anchored to the header, so the header (or the
     nav row) must be the positioning context. Add .mv-has-mega to <header>. */
  .mv-has-mega { position: sticky; top: 0; z-index: var(--mv-z-header, 50); }

  /* 1. TRIGGER --------------------------------------------------------------
     A nav item that opens a panel. It reuses .mv-navlink visuals but is a
     <button> for accessibility. The fade-underline is shared with .mv-navlink. */
  .mv-mega { position: static; display: inline-flex; }
  .mv-mega__trigger {
    position: relative;
    font-family: var(--mv-sans);
    font-size: var(--mv-fs-ui, 0.6875rem);
    letter-spacing: var(--mv-ls-wide, 0.32em);
    text-transform: uppercase;
    color: var(--mv-default);
    opacity: 0.82;
    padding-bottom: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    cursor: pointer;
    transition: opacity var(--mv-dur-fg, .25s) var(--mv-ease, ease);
  }
  .mv-mega__trigger::after {
    content: "";
    position: absolute; left: 50%; bottom: 0; width: 0; height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--mv-highlight) 30%, var(--mv-highlight) 70%, transparent);
    transition: width var(--mv-dur-bg, .35s) var(--mv-ease, ease);
  }
  /* Caret */
  .mv-mega__caret { width: 9px; height: 9px; transition: transform var(--mv-dur-bg, .35s) var(--mv-ease, ease); opacity: 0.7; }

  /* Open / hover / focus on the trigger */
  .mv-mega:hover .mv-mega__trigger,
  .mv-mega:focus-within .mv-mega__trigger,
  .mv-mega__trigger[aria-expanded="true"] { opacity: 1; }
  .mv-mega:hover .mv-mega__trigger::after,
  .mv-mega:focus-within .mv-mega__trigger::after,
  .mv-mega__trigger[aria-expanded="true"]::after { width: 130%; }
  .mv-mega__trigger[aria-expanded="true"] .mv-mega__caret { transform: rotate(180deg); opacity: 1; }

  /* 2. PANEL SHELL ----------------------------------------------------------
     Full viewport width, flush to the left edge, sitting directly under the
     header. Square corners, no shadow — only a gold hairline top + bottom. */
  .mv-mega__panel {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: var(--mv-ink);
    border-top: 1px solid var(--mv-line, rgba(206,199,187,0.14));
    border-bottom: 1px solid var(--mv-line-strong, rgba(206,199,187,0.28));
    /* closed state */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity var(--mv-dur-bg, .35s) var(--mv-ease, ease),
                transform var(--mv-dur-bg, .35s) var(--mv-ease, ease),
                visibility var(--mv-dur-bg, .35s);
  }
  /* Gold hairline that reads as the brand divider, pinned to the panel top */
  .mv-mega__panel::before {
    content: "";
    position: absolute; left: 0; right: 0; top: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--mv-highlight) 20%, var(--mv-highlight) 80%, transparent);
    opacity: 0.45;
  }

  .mv-mega__inner {
    max-width: var(--mv-maxw, 1440px);
    margin-inline: auto;
    padding: var(--mv-s12, 48px) var(--mv-gutter, 48px) var(--mv-s16, 64px);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 0.9fr;   /* 3 link blocks + featured */
    gap: var(--mv-s10, 40px);
  }
  @media (min-width: 1280px) {
    .mv-mega__inner { gap: var(--mv-s16, 64px); }
  }

  /* 3. COLUMNS + DIVIDERS ---------------------------------------------------
     A vertical gold hairline sits on the left edge of every column after the
     first, drawn with a border so it hugs the gap. */
  .mv-mega__col { position: relative; padding-left: var(--mv-s10, 40px); }
  .mv-mega__col:first-child { padding-left: 0; }
  .mv-mega__col:not(:first-child)::before {
    content: "";
    position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px;
    background: linear-gradient(180deg, transparent, var(--mv-highlight) 18%, var(--mv-highlight) 82%, transparent);
    opacity: 0.30;
  }
  .mv-mega__col-title {
    font-family: var(--mv-sans);
    font-weight: 300;
    font-size: 0.625rem;
    letter-spacing: var(--mv-ls-wide, 0.32em);
    text-transform: uppercase;
    color: var(--mv-highlight);
    margin: 0 0 var(--mv-s6, 24px);
  }

  /* 4. CATEGORY LINKS -------------------------------------------------------
     Serif, generous leading. Gold gem-dot fades in on hover/focus and the
     label nudges right — quiet, no underline. */
  .mv-mega__list { display: flex; flex-direction: column; gap: 2px; }
  .mv-mega__link {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    font-family: var(--mv-serif);
    font-weight: 400;
    font-size: 1.375rem;
    line-height: 1.15;
    color: var(--mv-default);
    transition: color var(--mv-dur-fg, .25s) var(--mv-ease, ease),
                transform var(--mv-dur-bg, .35s) var(--mv-ease, ease);
  }
  .mv-mega__link::before {
    content: "";
    flex: 0 0 auto;
    width: 4px; height: 4px;
    margin-bottom: 4px;
    background: var(--mv-highlight);
    transform: rotate(45deg) scale(0);          /* gold lozenge, hidden */
    transition: transform var(--mv-dur-bg, .35s) var(--mv-ease, ease);
  }
  .mv-mega__link:hover,
  .mv-mega__link:focus-visible {
    color: var(--mv-highlight);
    transform: translateX(6px);
    outline: none;
  }
  .mv-mega__link:hover::before,
  .mv-mega__link:focus-visible::before { transform: rotate(45deg) scale(1); }
  .mv-mega__link .mv-mega__count {
    font-family: var(--mv-mono);
    font-size: 0.5625rem;
    letter-spacing: var(--mv-ls-meta, 0.20em);
    color: var(--mv-faint, rgba(206,199,187,0.4));
    align-self: center;
  }

  /* Secondary link under a column (e.g. "View all") */
  .mv-mega__more {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: var(--mv-s6, 24px);
    font-family: var(--mv-sans);
    font-size: var(--mv-fs-ui, 0.6875rem);
    letter-spacing: var(--mv-ls-caps, 0.28em);
    text-transform: uppercase;
    color: var(--mv-default);
    position: relative; padding-bottom: 4px;
    transition: color var(--mv-dur-fg, .25s) var(--mv-ease, ease);
  }
  .mv-mega__more::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 30%; height: 1px;
    background: linear-gradient(90deg, var(--mv-highlight), transparent);
    transition: width var(--mv-dur-bg, .35s) var(--mv-ease, ease);
  }
  .mv-mega__more:hover { color: var(--mv-highlight); }
  .mv-mega__more:hover::after { width: 100%; }

  /* 5. FEATURED RAIL --------------------------------------------------------
     Image + linkable highlight. Square, no shadow; gold hairline under copy. */
  .mv-mega__featured { display: flex; flex-direction: column; }
  .mv-mega__featured-media {
    display: block;                 /* span is inline by default — force block so aspect-ratio applies */
    position: relative;
    width: 100%;
    aspect-ratio: 4/5;
    margin-bottom: var(--mv-s5, 20px);
    overflow: hidden;
  }
  .mv-mega__featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mv-mega__featured-tag {
    position: absolute; top: 14px; left: 14px;
    font-family: var(--mv-mono);
    font-size: 0.5625rem; letter-spacing: var(--mv-ls-meta, 0.20em);
    text-transform: uppercase; color: var(--mv-highlight);
    padding: 4px 8px; border: 1px solid var(--mv-highlight);
    background: rgba(20,19,15,0.55);
  }
  .mv-mega__featured-eyebrow {
    display: block;
    font-family: var(--mv-sans); font-weight: 300;
    font-size: 0.625rem; letter-spacing: var(--mv-ls-wide, 0.32em);
    text-transform: uppercase; color: var(--mv-highlight);
    margin: 0 0 var(--mv-s2, 8px);
  }
  .mv-mega__featured-title {
    display: block;
    font-family: var(--mv-serif); font-weight: 300;
    font-size: 1.75rem; line-height: 1.05; letter-spacing: -0.01em;
    color: var(--mv-default); margin: 0 0 var(--mv-s3, 12px);
  }
  .mv-mega__featured-title em { font-style: italic; color: var(--mv-highlight); }
  .mv-mega__featured-link { display: block; color: inherit; }
  .mv-mega__featured-link:hover .mv-mega__featured-title { color: var(--mv-highlight); }
  .mv-mega__featured-link:hover .mv-mega__featured-media img { transform: scale(1.03); }
  .mv-mega__featured-media img { transition: transform .8s var(--mv-ease, ease); }
  .mv-mega__featured-cta {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mv-sans); font-size: var(--mv-fs-ui, 0.6875rem);
    letter-spacing: var(--mv-ls-caps, 0.28em); text-transform: uppercase;
    color: var(--mv-default);
  }
  .mv-mega__featured-link:hover .mv-mega__featured-cta { color: var(--mv-highlight); }

  /* 5b. PLATING ROW ---------------------------------------------------------
     A full-width row under the columns: shop the whole house by finish. Each
     link carries WooCommerce's layered-nav query var (inc/archive-filters.php),
     so it opens a genuinely filtered shop archive — the same filter the category
     bar's chips drive. Spans every column, hairline divider, no shadow. */
  .mv-mega__plating {
    grid-column: 1 / -1;
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--mv-s4, 16px) var(--mv-s6, 24px);
    padding-top: var(--mv-s8, 32px);
    border-top: 1px solid var(--mv-line, rgba(206,199,187,0.14));
  }
  .mv-mega__plating-title {
    margin: 0;
    font-family: var(--mv-sans);
    font-size: 0.5625rem;
    letter-spacing: var(--mv-ls-caps, 0.28em);
    text-transform: uppercase;
    color: var(--mv-highlight);
  }
  .mv-mega__plating-links { display: flex; flex-wrap: wrap; gap: var(--mv-s2, 8px); }
  /* .mv-chip is authored for <button>; these are anchors, so restate the box. */
  .mv-mega__plating-links .mv-chip { display: inline-flex; align-items: center; }

  /* 6. OPEN STATE -----------------------------------------------------------
     Opened by hover (CSS) OR by JS adding .is-open (keyboard/focus + hover
     intent). Both paths reveal the panel. */
  .mv-mega:hover .mv-mega__panel,
  .mv-mega.is-open .mv-mega__panel,
  .mv-mega__panel:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* 7. REDUCED MOTION & FOCUS ----------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mv-mega__panel,
    .mv-mega__link,
    .mv-mega__featured-media img,
    .mv-mega__caret { transition: opacity .15s linear, visibility .15s linear; transform: none !important; }
  }
  .mv-mega__trigger:focus-visible { outline: 2px solid var(--mv-highlight); outline-offset: 4px; }

} /* end @media ≥1024 */

/* Below 1024px the desktop trigger is hidden entirely; burger drawer handles nav. */
@media (max-width: 1023.98px) {
  .mv-mega { display: none; }
}