/* =============================================================================
   TMD Mega Navigation — Component stylesheet (standalone, any theme)
   -----------------------------------------------------------------------------
   Plugin:  tmd-mega-navigation (slug), class family .tmd-mm__*
   Version: 1.0
   Source reconciliation (priority order):
     1. home-v1-styles.css L326-516 + L1005-1113  — MOCKUP (visual truth, wins)
     2. mega-menu.css                              — legacy tested base
     3. mega-menu-standalone.css                  — badge, viewall, empty, group-heading
   All three sources read; conflicts resolved per "mockup wins" rule (see notes
   at bottom of file). No Elementor dependency. Fonts NOT loaded here (theme owns).

   SEAM: THEME OWNS HEADER-SHELL
   --------------------------------------------------------------
   Everything below the line "== SEAM ==" comment block is NOT in this file.
   The theme (adcolor-child) owns:
     - .site-header sticky positioning + dark fill (#33382F)
     - .header-inner flex layout (logo / tmd-mm / actions)
     - .header-actions absolute re-anchor on mobile (top:0;right:0)
     - .header-search display toggle
     - Dark inversion of bar controls (.site-header .tmd-mm__*)
     - @media (max-width:1024px) header-shell collapse rules (a)-(e) per spec §8.4
   This plugin exports: component bar + panel CSS, the component-level responsive
   rules (panel->accordion, grid->1col, nav stacking inside the drawer), and the
   toggle breakpoint classes. The theme keys off .is-open / .tmd-mm--toggle-{bp}
   / .tmd-mm--mobile-accordion emitted by this plugin's JS+PHP.
   -----------------------------------------------------------------------------
   Target size: < 14 KB (unminified; minifier-ready structure, no nesting depth > 3)
   ============================================================================= */

/* =============================================================================
   1. CSS CUSTOM PROPERTIES — design tokens D2 + --mm-* component variables
   Defined on .tmd-mm so the theme can override via cascade (.tmd-mm { --mm-x: y })
   without touching this file. All values map to D2 "Var & salvie" palette.
   Fallback chain: var(--color-primary, #5E7355) — works standalone (any theme)
   and inherits when the theme sets --color-primary on :root.
   ============================================================================= */

.tmd-mm {

  /* -- D2 palette tokens (standalone defaults, override by theme via :root) -- */
  --color-primary:        #5E7355;
  --color-primary-hover:  #4A5D44;
  --color-primary-active: #3C4D38;
  --color-accent:         #B8A66F;
  --color-surface:        #FFFFFF;
  --color-surface-alt:    #E7E6DC;
  --color-text-primary:   #33382F;
  --color-text-secondary: #5E6357;
  --color-border:         #D8D6C9;
  --color-tint:           #ECEEE3;
  --color-on-primary:     #F6F8F2;
  --color-danger:         #9C463A;
  --color-success:        #4F7A4E;

  /* -- Spacing tokens used inside the component -- */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* -- Typography tokens (fonts NOT loaded here — theme enqueues Marcellus+Mulish) -- */
  --font-display: "Marcellus", serif;
  --font-body:    "Mulish", sans-serif;
  --fw-regular:   400;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fs-small:     0.875rem;
  --fs-eyebrow:   0.8125rem;
  --ls-eyebrow:   0.12em;
  --ls-heading:   -0.01em;
  --lh-heading:   1.25;

  /* -- Radii tokens -- */
  --radius-sm:   4px;
  --radius-md:   10px;
  --radius-lg:   18px;
  --radius-pill: 999px;

  /* -- Touch + header -- */
  --touch-min:  44px;
  --header-h:   72px;
  --transition: 180ms ease;

  /* -- Card curve mask (site signature — same value as body product cards) -- */
  --card-curve-w: 150%;
  --card-curve-h: 100%;
  --card-curve:   radial-gradient(var(--card-curve-w) var(--card-curve-h) at 50% 0%, #000 99.5%, transparent 100%);

  /* -- Transition tokens for curve/zoom/slide animations -- */
  --tr-slide: 320ms cubic-bezier(.4,0,.2,1);
  --tr-zoom:  320ms cubic-bezier(.4,0,.2,1);
  --tr-flood: 240ms ease;

  /* -- Shadow tokens -- */
  --shadow-card:       0 4px 14px rgba(60,64,52,.10);
  --shadow-card-hover: 0 10px 28px rgba(60,64,52,.16);

  /* -- Container -- */
  --container-max: 1280px;
  --container-pad: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  /* -- Z-index -- */
  --z-mega:   250;
  --z-sticky: 200;

  /* ---- Component-level --mm-* variables (override from theme child for retheme) ---- */
  --mm-accent:          var(--color-primary);
  --mm-accent-ink:      var(--color-on-primary);
  --mm-eyebrow-accent:  var(--color-accent);
  --mm-bar-bg:          transparent;           /* bar bg = transparent; header shell provides fill */
  --mm-bar-ink:         var(--color-text-primary);
  --mm-panel-bg:        var(--color-surface);
  --mm-panel-ink:       var(--color-text-primary);
  --mm-muted:           var(--color-text-secondary);
  --mm-card-bg:         var(--color-surface);
  --mm-card-bg-hover:   var(--color-tint);
  --mm-border:          var(--color-border);

  --mm-font-heading:     var(--font-display);
  --mm-font-body:        var(--font-body);
  --mm-font-label:       var(--font-body);
  --mm-weight-heading:   var(--fw-regular);   /* Marcellus = regular in D2 */
  --mm-weight-label:     var(--fw-semibold);

  --mm-tracking-label:   0.06em;
  --mm-fz-nav:           var(--fs-small);
  --mm-fz-eyebrow:       var(--fs-eyebrow);
  --mm-fz-title:         clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
  --mm-fz-card-title:    1.05rem;
  --mm-fz-desc:          var(--fs-small);
  --mm-fz-feature:       clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
  --mm-fz-num:           1.5625rem;

  --mm-maxw:          var(--container-max);
  --mm-bar-h:         calc(var(--header-h) - 16px);   /* 56px — spec §6.3 */
  --mm-bar-pad-x:     0px;
  --mm-panel-pad-y:   var(--space-6);
  --mm-panel-pad-x:   var(--container-pad);
  --mm-gap:           var(--space-4);
  --mm-radius:        var(--radius-lg);
  --mm-radius-card:   var(--radius-md);
  --mm-cols:          4;

  --mm-ease: cubic-bezier(.4,0,.2,1);
  --mm-dur:  240ms;
  /* Animation duration for open_animation=fade/slide variants (override from theme) */
  --tmd-mm-open-anim-dur: 500ms;

  /* Nav divider (optional, controlled by --mm-nav-divider-* vars) */
  --mm-nav-divider-display: none;
  --mm-nav-divider-style:   solid;
  --mm-nav-divider-width:   1px;
  --mm-nav-divider-color:   var(--mm-border);
  --mm-nav-divider-height:  60%;

  /* Positioning context for the absolute panel */
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--mm-font-body);
  color: var(--mm-panel-ink);
}

.tmd-mm *,
.tmd-mm *::before,
.tmd-mm *::after {
  box-sizing: border-box;
}

.tmd-mm a {
  text-decoration: none;
  color: inherit;
}

/* =============================================================================
   2. NAV BAR
   ============================================================================= */

.tmd-mm__bar {
  background: var(--mm-bar-bg);
}

.tmd-mm__bar-inner {
  max-width: none;
  margin: 0;
  padding: 0;
  height: var(--mm-bar-h);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* -- Logo ------------------------------------------------------------------- */

.tmd-mm__logo {
  display: flex;
  align-items: center;
  height: 40px;
  color: var(--mm-bar-ink);
  flex: 0 0 auto;
}

.tmd-mm__logo a {
  display: flex;
  align-items: center;
}

.tmd-mm__logo img,
.tmd-mm__logo-img {
  height: 100%;
  width: auto;
  display: block;
}

.tmd-mm__logo-placeholder {
  font-family: var(--mm-font-label);
  font-size: var(--mm-fz-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: var(--mm-weight-label);
  color: var(--mm-muted);
  border: 1px dashed var(--mm-border);
  border-radius: 6px;
  padding: 8px 14px;
}

/* -- Nav links + trigger --------------------------------------------------- */

.tmd-mm__nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: var(--mm-nav-wrap, wrap);
  overflow-x: var(--mm-nav-overflow, visible);
}

.tmd-mm__navlink,
.tmd-mm__trigger {
  font-family: var(--mm-font-label);
  font-size: var(--mm-fz-nav);
  font-weight: var(--mm-weight-label);
  letter-spacing: var(--mm-tracking-label);
  color: var(--mm-bar-ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
}

.tmd-mm__navlink {
  color: var(--color-text-primary);
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
}

.tmd-mm__navlink:hover {
  color: var(--color-primary);
}

.tmd-mm__navlink:focus-visible,
.tmd-mm__trigger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

/* Active / current nav link */
.tmd-mm__navlink.is-current {
  color: var(--mm-accent);
}

/* Optional divider between nav links */
.tmd-mm__nav .tmd-mm__navlink:not(:last-of-type)::after {
  content: "";
  display: var(--mm-nav-divider-display, none);
  border-right-style: var(--mm-nav-divider-style, solid);
  border-right-width: var(--mm-nav-divider-width, 1px);
  border-right-color: var(--mm-nav-divider-color, var(--mm-border));
  height: var(--mm-nav-divider-height, 60%);
  align-self: center;
  margin-left: 1.1rem;
}

/* -- Trigger wrapper (order:-1 puts it first in the flex nav) --------------- */

.tmd-mm__triggerwrap {
  position: relative;
  order: -1;
}

.tmd-mm__trigger {
  position: relative;
  gap: 7px;
  padding: 0 var(--space-2);
}

/* Accent dot on trigger — appears when open */
.tmd-mm__trigger::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mm-accent);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .2s ease, transform .2s ease;
}

.tmd-mm.is-open .tmd-mm__trigger::after {
  opacity: 1;
  transform: scale(1);
}

/* Underline that extends below the trigger on hover / open */
.tmd-mm__trigger-underline {
  position: absolute;
  left: var(--space-2);
  right: var(--space-4);
  bottom: 6px;
  height: 2px;
  background: var(--mm-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mm-dur) var(--mm-ease);
}

.tmd-mm.is-open .tmd-mm__trigger-underline,
.tmd-mm__trigger:hover .tmd-mm__trigger-underline {
  transform: scaleX(1);
}

/* -- Dropdown indicator (caret) -------------------------------------------- */

.tmd-mm__indicator {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  transition: transform var(--mm-dur) var(--mm-ease);
}

.tmd-mm__indicator .icon {
  width: 1em;
  height: 1em;
}

.tmd-mm__indicator-open {
  display: none;
}

.tmd-mm.is-open .tmd-mm__indicator-closed {
  display: none;
}

.tmd-mm.is-open .tmd-mm__indicator-open {
  display: inline-flex;
}

/* Rotate fallback if no open-icon provided */
.tmd-mm.is-open .tmd-mm__indicator:not(:has(.tmd-mm__indicator-open)) {
  transform: rotate(180deg);
}

/* -- Active icon (optional, inline with title) ------------------------------ */

.tmd-mm__active-icon {
  display: inline-flex;
  align-items: center;
  margin: 0 .35em;
  line-height: 0;
  color: var(--mm-accent);
}

.tmd-mm__active-icon svg {
  width: 1em;
  height: 1em;
}

/* -- CTA button in the bar ------------------------------------------------- */

.tmd-mm__cta-btn {
  font-family: var(--mm-font-label);
  font-size: var(--mm-fz-nav);
  font-weight: var(--mm-weight-label);
  letter-spacing: var(--mm-tracking-label);
  text-transform: uppercase;
  color: var(--mm-accent-ink);
  background: var(--mm-accent);
  padding: 11px 18px;
  border-radius: 8px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: transform .15s ease, filter .2s ease;
}

.tmd-mm__cta-btn:hover {
  filter: brightness(.94);
  transform: translateY(-1px);
}

/* -- Menu toggle (hamburger) ----------------------------------------------- */

.tmd-mm__toggle {
  display: none;              /* shown by media query below the toggle breakpoint */
  align-items: center;
  justify-content: center;
  margin-left: 0;
  width: var(--touch-min);
  height: var(--touch-min);
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--color-text-primary);
  border-radius: var(--radius-md);
  flex: 0 0 auto;
  order: 1;
}

.tmd-mm__toggle:hover {
  background: var(--color-surface-alt, #E7E6DC);
}

.tmd-mm__toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.tmd-mm__toggle .icon {
  width: 1.5em;
  height: 1.5em;
}

.tmd-mm__toggle-close {
  display: none;
}

.tmd-mm.is-open .tmd-mm__toggle-open {
  display: none;
}

.tmd-mm.is-open .tmd-mm__toggle-close {
  display: inline-flex;
}

/* =============================================================================
   3. MEGA PANEL
   Source: mockup L417-431 (wins over mega-menu.css which had position:absolute
   without border-bottom; mockup adds border-bottom + box-shadow token).
   ============================================================================= */

.tmd-mm__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  width: auto;
  background: var(--mm-panel-bg);
  border-top: 1px solid var(--mm-border);
  border-bottom: 1px solid var(--mm-border);
  box-shadow: var(--shadow-card-hover);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  z-index: var(--z-mega);
  transition:
    opacity var(--mm-dur) var(--mm-ease),
    transform var(--mm-dur) var(--mm-ease),
    visibility 0s linear var(--mm-dur);
}

.tmd-mm.is-open .tmd-mm__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity var(--mm-dur) var(--mm-ease),
    transform var(--mm-dur) var(--mm-ease);
}

.tmd-mm__panel-inner {
  max-width: var(--mm-maxw);
  margin: 0 auto;
  padding: var(--mm-panel-pad-y) var(--mm-panel-pad-x);
}

/* Inline demo mode — panel always visible (NOT used in the real plugin) */
.tmd-mm--inline .tmd-mm__panel {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
}

/* =============================================================================
   4. PANEL ANIMATION VARIANTS (open_animation control)
   ============================================================================= */

.tmd-mm--anim-fade .tmd-mm__panel {
  transition:
    opacity var(--tmd-mm-open-anim-dur, 500ms) var(--mm-ease),
    visibility 0s linear var(--tmd-mm-open-anim-dur, 500ms);
  transform: none;
}

.tmd-mm--anim-fade.is-open .tmd-mm__panel {
  transition: opacity var(--tmd-mm-open-anim-dur, 500ms) var(--mm-ease);
}

.tmd-mm--anim-slide .tmd-mm__panel {
  transition:
    opacity var(--tmd-mm-open-anim-dur, 500ms) var(--mm-ease),
    transform var(--tmd-mm-open-anim-dur, 500ms) var(--mm-ease),
    visibility 0s linear var(--tmd-mm-open-anim-dur, 500ms);
}

.tmd-mm--anim-slide.is-open .tmd-mm__panel {
  transition:
    opacity var(--tmd-mm-open-anim-dur, 500ms) var(--mm-ease),
    transform var(--tmd-mm-open-anim-dur, 500ms) var(--mm-ease);
}

/* =============================================================================
   5. PANEL INTRO COLUMN (eyebrow + title + viewall — shared across layouts)
   ============================================================================= */

.tmd-mm__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.tmd-mm__eyebrow,
.tmd-mm__intro-eyebrow {
  font-family: var(--mm-font-label);
  font-size: var(--mm-fz-eyebrow);
  letter-spacing: var(--ls-eyebrow, 0.12em);
  text-transform: uppercase;
  font-weight: var(--fw-bold, 700);
  color: var(--color-primary);
}

.tmd-mm__intro-title {
  font-family: var(--mm-font-heading);
  font-weight: var(--mm-weight-heading);
  font-size: var(--mm-fz-title);
  line-height: var(--lh-heading, 1.25);
  letter-spacing: var(--ls-heading, -0.01em);
  margin: var(--space-2) 0 0;
  color: var(--color-text-primary);
}

.tmd-mm__intro-text {
  font-family: var(--mm-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--mm-muted);
  margin: 0 0 18px;
}

.tmd-mm__intro-link {
  font-family: var(--mm-font-label);
  font-size: var(--mm-fz-nav);
  letter-spacing: var(--mm-tracking-label);
  text-transform: uppercase;
  color: var(--mm-accent);
  font-weight: var(--mm-weight-label);
}

/* =============================================================================
   6. VIEW-ALL LINK
   Source: mockup L504-508 (wins — has focus-visible + min-height);
   mega-menu-standalone adds border-bottom underline on hover (both merged).
   ============================================================================= */

.tmd-mm__viewall {
  font-family: var(--mm-font-label);
  font-size: var(--mm-fz-nav);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--mm-tracking-label);
  color: var(--color-primary);
  align-self: flex-start;
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}

.tmd-mm__viewall:hover,
.tmd-mm__viewall:focus-visible {
  border-bottom-color: var(--color-primary);
  opacity: 0.85;
}

.tmd-mm__viewall:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* =============================================================================
   7. FEATURE / CTA CARD
   Source: mockup L475-501 (wins — gradient bg, auriu eyebrow, btn-onsage pattern).
   mega-menu.css had solid accent bg + white ink on btn; mockup overrides to
   gradient #5E7355->#3C4D38 + on-primary btn. Full detail in reconciliation notes.
   ============================================================================= */

.tmd-mm__feature {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-3);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-active) 100%);
  color: var(--color-on-primary);
  border-radius: var(--mm-radius);
  padding: var(--space-5);
}

.tmd-mm__feature--compact {
  /* Compact variant used inside intro column for images layout */
}

/* Eyebrow in AURIU (--color-accent) on the sage-green feature card */
.tmd-mm__feature-eyebrow {
  font-family: var(--mm-font-label);
  font-size: var(--mm-fz-eyebrow);
  letter-spacing: var(--ls-eyebrow, 0.12em);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--mm-eyebrow-accent);    /* auriu D2 */
}

.tmd-mm__feature-title {
  font-family: var(--mm-font-heading);
  font-weight: var(--mm-weight-heading);
  font-size: var(--mm-fz-feature);
  line-height: var(--lh-heading, 1.25);
  color: #fff;
}

.tmd-mm__feature-text {
  font-family: var(--mm-font-body);
  font-size: var(--fs-small, 0.875rem);
  line-height: 1.5;
  color: #ECEFE6;
  margin: 0;
}

/* Feature button — on-sage pattern: on-primary bg + primary ink (contrast AA) */
.tmd-mm__feature-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--touch-min);
  font-family: var(--mm-font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small, 0.875rem);
  background: var(--color-on-primary);
  border: 1px solid transparent;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  transition: background var(--transition, 180ms ease);
}

/* Specificity (0,2,1) beats .tmd-mm a (0,1,1) — prevents white-on-white */
.tmd-mm a.tmd-mm__feature-btn {
  color: var(--color-primary);
}

.tmd-mm__feature-btn .icon {
  color: var(--color-primary);
  flex: 0 0 auto;
}

.tmd-mm a.tmd-mm__feature-btn:hover {
  background: #fff;
  color: var(--color-primary-hover);
}

.tmd-mm__feature-btn:hover .icon {
  color: var(--color-primary-hover);
}

.tmd-mm a.tmd-mm__feature-btn:focus-visible {
  outline: 2px solid var(--color-on-primary);
  outline-offset: 2px;
  color: var(--color-primary);
}

/* =============================================================================
   8. LAYOUT — IMAGES (cards, default layout for adcolor)
   panel-inner = 2-col grid: 200px intro rail + 1fr card grid
   Source: mockup L438-516 (wins over mega-menu.css which had 226px intro width).
   226px vs 200px: mockup at L439 uses 200px — MOCKUP WINS.
   ============================================================================= */

.tmd-mm--images .tmd-mm__panel-inner {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-6);
  align-items: start;
}

.tmd-mm__grid {
  display: grid;
  grid-template-columns: repeat(var(--mm-cols), 1fr);
  gap: var(--mm-gap);
}

/* -- Card (category card with signature micro-interactions) ----------------- */

.tmd-mm__card {
  position: relative;
  display: block;
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-card);
  overflow: hidden;
  background: var(--mm-card-bg);
  box-shadow: var(--shadow-card);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.tmd-mm__card:hover {
  border-color: var(--mm-accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

.tmd-mm__card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* -- Thumbnail: curved mask (site signature) --------------------------------
   --card-curve-h:135% exactly matches body product cards (spec §6.4).
   Mask applied as -webkit-mask + mask for cross-browser support.
   overflow:hidden keeps zoom inside the curved frame.                        */

.tmd-mm__thumb {
  --card-curve-h: 135%;
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--mm-card-bg-hover);
  overflow: hidden;
  -webkit-mask: var(--card-curve);
  mask: var(--card-curve);
}

.tmd-mm__thumb img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transform-origin: center;
  will-change: transform;
  transition: transform var(--tr-zoom);
}

/* ZOOM-IN-FRAME on hover/focus */
.tmd-mm__card:hover .tmd-mm__thumb img,
.tmd-mm__card:focus-visible .tmd-mm__thumb img {
  transform: scale(1.06);
}

/* COLOR-SLIDE: sage overlay slides top-to-bottom over the thumbnail on hover */
.tmd-mm__thumb::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 55%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--mm-accent) 0%, rgba(94,115,85,0) 100%);
  opacity: 0;
  transform: translateY(-100%);
  transition: transform var(--tr-slide), opacity var(--tr-flood);
}

.tmd-mm__card:hover .tmd-mm__thumb::before,
.tmd-mm__card:focus-visible .tmd-mm__thumb::before {
  opacity: .55;
  transform: translateY(0);
}

/* -- Card body -------------------------------------------------------------- */

.tmd-mm__card-body {
  padding: var(--space-3) var(--space-4) var(--space-4);
}

/* Card title: Marcellus serif, regular weight — D2 convention */
.tmd-mm__card-title {
  font-family: var(--mm-font-heading);
  font-weight: var(--mm-weight-heading);
  font-size: var(--mm-fz-card-title);
  line-height: 1.25;
  color: var(--color-text-primary);
  transition: color .2s ease;
}

.tmd-mm__card:hover .tmd-mm__card-title {
  color: var(--mm-accent);
}

.tmd-mm__card-desc {
  font-family: var(--mm-font-body);
  font-size: var(--mm-fz-desc);
  line-height: 1.45;
  color: var(--mm-muted);
  margin-top: 4px;
}

/* =============================================================================
   9. LAYOUT — ICONS (list of icon + title + desc rows)
   ============================================================================= */

.tmd-mm--icons .tmd-mm__panel-inner {
  display: grid;
  grid-template-columns: 1.55fr 0.85fr;
  gap: 40px;
}

.tmd-mm__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
}

.tmd-mm__row {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 11px;
  border-radius: var(--mm-radius-card);
  transition: transform .22s var(--mm-ease), background .2s ease;
  width: 100%;
}

.tmd-mm__row:hover {
  transform: translateX(8px);
  background: var(--mm-card-bg);
}

.tmd-mm__icon {
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid var(--mm-border);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mm-accent);
  transition: border-color .18s ease;
}

.tmd-mm__row:hover .tmd-mm__icon {
  border-color: var(--mm-accent);
}

.tmd-mm__row-title {
  display: inline-block;
  font-family: var(--mm-font-heading);
  font-weight: var(--mm-weight-heading);
  font-size: var(--mm-fz-card-title);
  color: var(--mm-panel-ink);
  padding: 2px 8px;
  margin-left: -8px;
  border-radius: 5px;
  transition: background .2s ease, color .2s ease;
}

.tmd-mm__row:hover .tmd-mm__row-title {
  background: var(--mm-accent);
  color: var(--mm-accent-ink);
}

.tmd-mm__row-desc {
  display: block;
  font-family: var(--mm-font-label);
  font-size: var(--mm-fz-desc);
  color: var(--mm-muted);
  margin-top: 3px;
  line-height: 1.4;
}

/* =============================================================================
   10. LAYOUT — EDITORIAL (numbered items)
   ============================================================================= */

.tmd-mm--editorial .tmd-mm__panel {
  overflow: hidden;
}

.tmd-mm--editorial .tmd-mm__panel-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 296px;
  gap: 44px;
}

.tmd-mm__watermark {
  position: absolute;
  top: -24px;
  left: 18px;
  font-family: var(--mm-font-heading);
  font-size: 8rem;
  line-height: 1;
  color: var(--mm-panel-ink);
  opacity: .04;
  user-select: none;
  pointer-events: none;
}

.tmd-mm__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
}

.tmd-mm__head-title {
  font-family: var(--mm-font-heading);
  font-weight: var(--mm-weight-heading);
  font-size: var(--mm-fz-title);
  letter-spacing: -0.025em;
  color: var(--mm-panel-ink);
}

.tmd-mm__head-note {
  font-family: var(--mm-font-label);
  font-size: var(--mm-fz-desc);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mm-muted);
}

.tmd-mm__numgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
}

.tmd-mm__numrow {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--mm-border);
  transition: transform .22s var(--mm-ease);
  width: 100%;
}

.tmd-mm__numrow:hover {
  transform: translateX(8px);
}

.tmd-mm__num {
  font-family: var(--mm-font-heading);
  font-size: var(--mm-fz-num);
  color: var(--mm-accent);
  line-height: 1;
  min-width: 46px;
  letter-spacing: -0.02em;
}

.tmd-mm__numname {
  display: inline-block;
  font-family: var(--mm-font-heading);
  font-weight: var(--mm-weight-heading);
  font-size: var(--mm-fz-card-title);
  color: var(--mm-panel-ink);
  line-height: 1.15;
  padding: 2px 9px;
  margin-left: -9px;
  border-radius: 5px;
  transition: background .2s ease, color .2s ease;
}

.tmd-mm__numrow:hover .tmd-mm__numname {
  background: var(--mm-accent);
  color: var(--mm-accent-ink);
}

.tmd-mm__numdesc {
  display: block;
  font-family: var(--mm-font-label);
  font-size: var(--mm-fz-desc);
  color: var(--mm-muted);
  margin-top: 4px;
  line-height: 1.4;
}

/* =============================================================================
   11. BADGE (pill chip on cards/rows — standalone layer addition)
   Source: mega-menu-standalone.css L83-106 (base); D2 badge tokens §6.8.
   --mm-badge-bg is set via style attr from PHP (esc_attr'd hex) per spec §5.5.
   ============================================================================= */

.tmd-mm__badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--mm-font-label);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
  background: var(--mm-badge-bg, var(--mm-accent));
  color: var(--mm-accent-ink);
}

/* Badge inside hover-inverted rows: invert chip for legibility */
.tmd-mm__row:hover .tmd-mm__row-title .tmd-mm__badge,
.tmd-mm__numrow:hover .tmd-mm__numname .tmd-mm__badge {
  background: var(--mm-accent-ink);
  color: var(--mm-accent);
}

/* =============================================================================
   12. GROUP HEADING (manual hierarchy — non-link row that spans the grid)
   Source: mega-menu-standalone.css L65-80
   ============================================================================= */

.tmd-mm__group-heading {
  grid-column: 1 / -1;
  margin: 10px 0 4px;
  font-family: var(--mm-font-label);
  font-size: var(--mm-fz-eyebrow, 0.8125rem);
  font-weight: var(--mm-weight-label, 600);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mm-muted, #6b7280);
}

.tmd-mm__group-heading:first-child {
  margin-top: 0;
}

/* =============================================================================
   13. EMPTY STATE
   Source: mega-menu-standalone.css L134-141
   ============================================================================= */

.tmd-mm__empty {
  padding: 28px 8px;
  font-family: var(--mm-font-body);
  font-size: var(--mm-fz-desc, 0.875rem);
  line-height: 1.5;
  color: var(--mm-muted);
  text-align: center;
}

/* =============================================================================
   14. HEADER MODEL (full-width bar — .tmd-mm--header modifier)
   Source: mega-menu-standalone.css L16-39
   ============================================================================= */

.tmd-mm--header {
  display: block;
  width: 100%;
}

/* Content alignment inside panel — controlled by --mm-content-align */
.tmd-mm--header .tmd-mm__grid,
.tmd-mm--header .tmd-mm__list,
.tmd-mm--header .tmd-mm__numgrid {
  justify-items: var(--mm-content-align, stretch);
}

.tmd-mm--header .tmd-mm__head,
.tmd-mm--header .tmd-mm__intro {
  align-items: var(--mm-content-align, baseline);
}

.tmd-mm--header .tmd-mm__card,
.tmd-mm--header .tmd-mm__row,
.tmd-mm--header .tmd-mm__numrow {
  width: 100%;
}

/* =============================================================================
   15. PANEL WIDTH VARIANTS (full = default, fit = shrink-to-content)
   Source: mega-menu-standalone.css L41-63
   ============================================================================= */

@media (min-width: 1025px) {
  .tmd-mm--pw-fit .tmd-mm__panel {
    left: auto;
    right: auto;
    width: max-content;
    max-width: 92vw;
  }

  .tmd-mm--pw-fit.tmd-mm--ppos-left .tmd-mm__panel {
    left: 0;
  }

  .tmd-mm--pw-fit.tmd-mm--ppos-right .tmd-mm__panel {
    right: 0;
  }

  .tmd-mm--pw-fit.tmd-mm--ppos-center .tmd-mm__panel {
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
  }

  .tmd-mm--pw-fit.tmd-mm--ppos-center.is-open .tmd-mm__panel {
    transform: translateX(-50%);
  }

  /* FIX: desktop >= 1025px — .tmd-mm becomes position:static so the absolute
     panel anchors on the parent header shell (full-width containing block), not
     on the narrow flex-child .tmd-mm. Trigger-underline still works because it
     is scoped to .tmd-mm__triggerwrap (position:relative). [mockup L1016] */
  .tmd-mm {
    position: static;
  }

  .tmd-mm__toggle {
    display: none;
  }
}

/* =============================================================================
   16. TOGGLE BREAKPOINTS (hamburger appears below the configured threshold)
   Classes emitted by PHP renderer on the root div (spec §5.1, §8.2).
   The toggle class activates the hamburger + hides inline nav + switches panel
   to accordion mode below the chosen breakpoint.
   ============================================================================= */

@media (max-width: 1366px) {
  .tmd-mm--toggle-desktop .tmd-mm__toggle {
    display: inline-flex;
  }

  .tmd-mm--toggle-desktop .tmd-mm__nav {
    display: none;
  }

  .tmd-mm--toggle-desktop .tmd-mm.is-open .tmd-mm__nav {
    display: flex;
  }

  .tmd-mm--toggle-desktop.tmd-mm--mobile-accordion .tmd-mm__panel {
    position: static;
    box-shadow: none;
    border-top: 0;
    transform: none;
  }
}

@media (max-width: 1024px) {
  .tmd-mm--toggle-tablet .tmd-mm__toggle {
    display: inline-flex;
  }

  .tmd-mm--toggle-tablet .tmd-mm__nav {
    display: none;
  }

  .tmd-mm--toggle-tablet .tmd-mm.is-open .tmd-mm__nav {
    display: flex;
  }

  .tmd-mm--toggle-tablet.tmd-mm--mobile-accordion .tmd-mm__panel {
    position: static;
    box-shadow: none;
    border-top: 0;
    transform: none;
  }
}

@media (max-width: 767px) {
  .tmd-mm--toggle-mobile .tmd-mm__toggle {
    display: inline-flex;
  }

  .tmd-mm--toggle-mobile .tmd-mm__nav {
    display: none;
  }

  .tmd-mm--toggle-mobile .tmd-mm.is-open .tmd-mm__nav {
    display: flex;
  }

  .tmd-mm--toggle-mobile.tmd-mm--mobile-accordion .tmd-mm__panel {
    position: static;
    box-shadow: none;
    border-top: 0;
    transform: none;
  }
}

/* =============================================================================
   17. COMPONENT-LEVEL RESPONSIVE (panel->accordion, grid->1col, nav stacking)

   *** SEAM: THEME OWNS HEADER-SHELL ***
   The rules below are COMPONENT-INTRINSIC only. They belong to the plugin.
   The following rules are NOT here (they live in adcolor-child theme CSS):
     (a) .header-inner { flex-wrap: wrap; position: relative; }
     (b) .header-search { display: none; }
     (c) .header-actions { position: absolute; top: 0; right: 0; ... }
     (d) .tmd-mm__bar-inner padding-right reservation for actions cluster
     (e) Dark inversion: .site-header .tmd-mm__navlink { color: ... }
   Source: spec §8.4 "Rule split RESOLVED — PM"; mockup L1023-1118 header-shell
   rules are documented as theme-owned.
   *** END SEAM ***

   Source for rules below: mockup L1103-1117 (component-intrinsic subset).
   ============================================================================= */

@media (max-width: 1024px) {

  /* Plugin root becomes a flex container that wraps bar + drawer */
  .tmd-mm {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
  }

  /* Bar takes the first row */
  .tmd-mm__bar {
    flex: 1 1 auto;
    min-width: 0;
    order: 0;
  }

  /* Bar-inner: logo + toggle on line 1; nav on line 2 (via order+basis) */
  .tmd-mm__bar-inner {
    height: auto;
    min-height: var(--mm-bar-h);
    gap: var(--space-3);
    flex-wrap: wrap;
    row-gap: 0;
  }

  /* Logo: stays on line 1 */
  .tmd-mm__logo {
    order: 0;
    flex: 0 0 auto;
  }

  /* Toggle: on line 1, right of logo */
  .tmd-mm__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    width: var(--touch-min);
    height: var(--touch-min);
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-text-primary);
    border-radius: var(--radius-md);
    flex: 0 0 auto;
    order: 1;
  }

  /* Nav: falls to next row as a column drawer */
  .tmd-mm__nav {
    order: 2;
    flex: 1 1 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3) 0;
  }

  /* Nav visible when drawer is open */
  .tmd-mm.is-open .tmd-mm__nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    flex: 1 1 100%;
    order: 2;
  }

  /* Trigger wrapper: full width when in the vertical drawer */
  .tmd-mm.is-open .tmd-mm__nav .tmd-mm__triggerwrap {
    width: 100%;
  }

  /* Nav links + trigger: full-width touch rows (44px) inside the drawer */
  .tmd-mm.is-open .tmd-mm__nav .tmd-mm__navlink,
  .tmd-mm.is-open .tmd-mm__nav .tmd-mm__trigger {
    width: 100%;
    min-height: var(--touch-min);
    display: flex;
    align-items: center;
  }

  .tmd-mm__navlink {
    min-height: var(--touch-min);
    padding: 0 var(--space-3);
  }

  /* Panel: accordion in-flow (no absolute, no scroll) */
  .tmd-mm--mobile-accordion .tmd-mm__panel,
  .tmd-mm--mobile-accordion.is-open .tmd-mm__panel {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-shadow: none;
    border: 0;
    border-top: 1px solid var(--mm-border);
    opacity: 1;
    visibility: visible;
  }

  /* Panel hidden by default in accordion mode; display:block when drawer open */
  .tmd-mm--mobile-accordion .tmd-mm__panel {
    display: none;
    order: 3;
    flex: 1 1 100%;
  }

  .tmd-mm--mobile-accordion.is-open .tmd-mm__panel {
    display: block;
  }

  /* Panel-inner: full-width, no max-width constraint */
  .tmd-mm__panel-inner {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: var(--space-4) 0;
  }

  /* Images layout: single-column panel-inner and grid */
  .tmd-mm--images .tmd-mm__panel-inner {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .tmd-mm__grid {
    grid-template-columns: 1fr;
    width: 100%;
    margin: 0;
  }

  /* Icons + editorial panel-inner: single column */
  .tmd-mm--icons .tmd-mm__panel-inner,
  .tmd-mm--editorial .tmd-mm__panel-inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  /* Icons list: single column on mobile */
  .tmd-mm__list,
  .tmd-mm__numgrid {
    grid-template-columns: 1fr;
  }
}

/* Tablet only: 2-col grid (reduce column count for medium screens) */
@media (max-width: 1024px) and (min-width: 640px) {
  .tmd-mm {
    --mm-cols: 2;
  }
}

/* Mobile-only: 1-col grid, reduced padding */
@media (max-width: 639px) {
  .tmd-mm {
    --mm-cols: 1;
    --mm-panel-pad-x: 18px;
    --mm-panel-pad-y: 22px;
  }

  .tmd-mm__nav {
    gap: 1.2rem;
  }
}

/* =============================================================================
   18. PREFERS-REDUCED-MOTION
   Disables: card lift, zoom-in-frame, color-slide overlay.
   Keeps: static curved mask (non-motion, structural).
   Source: mockup L511-521 (authoritative).
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .tmd-mm__card {
    transition: border-color .01ms, box-shadow .01ms;
  }

  .tmd-mm__card:hover {
    transform: none;
  }

  .tmd-mm__thumb img {
    transition: none;
  }

  .tmd-mm__card:hover .tmd-mm__thumb img,
  .tmd-mm__card:focus-visible .tmd-mm__thumb img {
    transform: none;
  }

  .tmd-mm__thumb::before {
    transition: none;
  }

  .tmd-mm__card:hover .tmd-mm__thumb::before,
  .tmd-mm__card:focus-visible .tmd-mm__thumb::before {
    opacity: 0;
    transform: translateY(-100%);
  }

  /* Panel open animation — instant */
  .tmd-mm__panel {
    transition: opacity .01ms, visibility 0s;
  }

  /* Row/numrow slide animations */
  .tmd-mm__row {
    transition: background .01ms;
  }

  .tmd-mm__row:hover {
    transform: none;
  }

  .tmd-mm__numrow {
    transition: none;
  }

  .tmd-mm__numrow:hover {
    transform: none;
  }

  /* Trigger dot + underline */
  .tmd-mm__trigger::after,
  .tmd-mm__trigger-underline {
    transition: none;
  }
}

/*
 * =============================================================================
 * RECONCILIATION NOTES (required by task spec — stored here for audit trail)
 * =============================================================================
 *
 * Source 1 = home-v1-styles.css (mockup, WINS)
 * Source 2 = mega-menu.css (legacy base)
 * Source 3 = mega-menu-standalone.css (badge/viewall/empty/group-heading)
 *
 * DIFFERENCES FOUND AND HOW RESOLVED:
 *
 * (A) Intro rail width — images layout panel-inner grid
 *   Source 2 (mega-menu.css L318): grid-template-columns: 226px 1fr
 *   Source 1 (mockup L439):        grid-template-columns: 200px 1fr
 *   Resolution: MOCKUP WINS → used 200px.
 *
 * (B) Feature card background
 *   Source 2 (mega-menu.css L262-265): background: var(--mm-accent) [solid]
 *   Source 1 (mockup L477): linear-gradient(135deg, var(--color-primary) 0%,
 *                            var(--color-primary-active) 100%)
 *   Resolution: MOCKUP WINS → gradient #5E7355->#3C4D38 used.
 *
 * (C) Feature button style
 *   Source 2: background: var(--mm-panel-ink); color: var(--mm-panel-bg) [dark btn]
 *   Source 1: background: var(--color-on-primary); color: var(--color-primary)
 *             [btn-onsage pattern, contrast AA 4.6:1]
 *   Resolution: MOCKUP WINS → on-primary bg + primary ink.
 *
 * (D) Feature eyebrow color
 *   Source 2: opacity .72 on accent-ink
 *   Source 1: color: var(--mm-eyebrow-accent) [auriu D2 #B8A66F]
 *   Resolution: MOCKUP WINS → auriu eyebrow (--mm-eyebrow-accent).
 *
 * (E) Bar background
 *   Source 2: background: var(--mm-bar-bg) with default #ffffff
 *   Source 1: background: transparent [theme shell provides the dark fill]
 *   Resolution: MOCKUP WINS → --mm-bar-bg defaults to transparent.
 *
 * (F) Card hover lift
 *   Source 2: translateY(-2px)
 *   Source 1: translateY(-3px)
 *   Resolution: MOCKUP WINS → -3px.
 *
 * (G) panel box-shadow
 *   Source 2: 0 26px 50px -16px rgba(0,0,0,.22) [fixed value]
 *   Source 1: var(--shadow-card-hover) [token]
 *   Resolution: MOCKUP WINS → var(--shadow-card-hover) used.
 *
 * (H) Panel border
 *   Source 2: border-top only
 *   Source 1: border-top + border-bottom (1px var(--mm-border) each)
 *   Resolution: MOCKUP WINS → both borders.
 *
 * (I) viewall / .tmd-mm__viewall definition
 *   Source 1 (mockup L504-508): flex, min-height 44px, focus-visible ring
 *   Source 3 (standalone L111-130): border-bottom underline on hover/focus
 *   No conflict — both merged (standalone adds underline behavior, mockup
 *   adds touch target). Both applied.
 *
 * (J) .tmd-mm position on desktop
 *   Source 2: position: relative (default, never overridden)
 *   Source 1 (mockup L1016): position: static at >= 1025px (FIX for left-panel
 *   cut on laptops — panel anchors on header shell, not the narrow flex child)
 *   Resolution: MOCKUP WINS → position:static at >= 1025px in media query §15.
 *
 * (K) .tmd-mm__navlink text in bar
 *   Source 2: opacity .55, no border-radius
 *   Source 1: color: var(--color-text-primary), padding+border-radius for a11y
 *   Resolution: MOCKUP WINS → color approach + padding used (no opacity hack).
 *
 * NO BLOCKING CONFLICTS found. All 11 differences resolved per "mockup wins" rule.
 *
 * SEAM SUMMARY:
 *   Plugin CSS  → sections 1-18 above
 *   Theme CSS   → .site-header styles, .header-inner layout, .header-actions
 *                 absolute anchor, dark inversion of bar controls on dark header,
 *                 @media (max-width:1024px) header-shell collapse rules (a)-(e)
 * =============================================================================
 */