/* house-menu.css — owner: kevin-opencode-1.
   Phase 3 (2026-09-24): MOBILE ONLY (<=1364px, plugin breakpoint). Desktop
   stays stock (fresh start). Drawer submenus flattened, dividers removed,
   sentence case, indent hierarchy. Submenus expand natively (expand_all). */
@media only screen and (max-width: 1364px) {
  /* Flatten submenu cards: no white panels, radius, or shadow in the drawer. */
  html #mega-menu-wrap-main #mega-menu-main > li.mega-menu-flyout ul.mega-sub-menu {
    background: transparent;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0 0 8px 0;
  }
  /* No divider lines at any level. */
  html #mega-menu-wrap-main #mega-menu-main li.mega-menu-item > ul.mega-sub-menu li.mega-menu-item {
    border-bottom: 0;
  }
  html #mega-menu-wrap-main #mega-menu-main > li.mega-menu-item > a.mega-menu-link {
    border-bottom: 0;
  }
  /* Sentence case + indent hierarchy for expanded sub items. */
  html #mega-menu-wrap-main #mega-menu-main > li.mega-menu-item > a.mega-menu-link,
  html #mega-menu-wrap-main #mega-menu-main li.mega-menu-item > ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
    text-transform: none;
  }
  html #mega-menu-wrap-main #mega-menu-main li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
    padding-left: 24px;
  }
}

/* Aesthetic pass (2026-09-24): mobile active tick, house easing on flyouts,
   sticky compaction, description styling. All html-anchored to beat the
   plugin's generated selectors without disturbing them. */

/* 3. Flyout easing on the house curve (overrides 200ms ease-in). Desktop + mobile. */
html #mega-menu-wrap-main #mega-menu-main[data-effect="fade_up"] li.mega-menu-item.mega-menu-flyout ul.mega-sub-menu {
  transform: translate(0, 12px);
  transition: opacity 250ms cubic-bezier(0.22, 1, 0.36, 1), transform 250ms cubic-bezier(0.22, 1, 0.36, 1), visibility 250ms;
}
/* 5. Sticky compaction completes the shrink (links 40px -> 36px). */
@media only screen and (min-width: 1365px) {
  html header.sticky-header.sticky-active #mega-menu-wrap-main #mega-menu-main > li.mega-menu-item > a.mega-menu-link {
    height: 36px;
    line-height: 36px;
  }
}
/* 4. Submenu descriptions: quiet second line under item titles. */
html #mega-menu-wrap-main #mega-menu-main ul.mega-sub-menu .mega-menu-title {
  color: #1b1e23;
  font-weight: 600;
}
html #mega-menu-wrap-main #mega-menu-main ul.mega-sub-menu .mega-menu-description,
html #mega-menu-wrap-main #mega-menu-main ul.mega-sub-menu .mega-description-group {
  font-size: 0.82em;
  color: #5b616b;
  font-weight: 400;
}

/* True optical center (desktop only) — re-applied 2026-09-24 after fresh
   start; verified against reverted baseline per owner request. */
@media only screen and (min-width: 1365px) {
  html .header-row { position: relative; }
  html .header-row .mega-menu-wrap {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
  }
}
/* Sticky toggle: keep the hamburger/X pinned and tappable above the open
   drawer (it morphs to X natively; must never scroll under the menu). */
@media only screen and (max-width: 1364px) {
  html #mega-menu-wrap-main .mega-menu-toggle {
    position: sticky; top: 0; z-index: 100;
  }
  html .header-row .mega-menu-wrap { position: static; transform: none; }
}

/* Mobile active marker v2 (absolute bar: zero overlap, zero layout shift). */
@media only screen and (max-width: 1364px) {
  html #mega-menu-wrap-main #mega-menu-main li.mega-menu-item > ul.mega-sub-menu li.mega-current-menu-item > a.mega-menu-link,
  html #mega-menu-wrap-main #mega-menu-main li.mega-menu-item > ul.mega-sub-menu li.mega-current-page-ancestor > a.mega-menu-link {
    position: relative;
  }
  html #mega-menu-wrap-main #mega-menu-main li.mega-menu-item > ul.mega-sub-menu li.mega-current-menu-item > a.mega-menu-link::before,
  html #mega-menu-wrap-main #mega-menu-main li.mega-menu-item > ul.mega-sub-menu li.mega-current-page-ancestor > a.mega-menu-link::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 2px;
    background: #b41d21;
  }
  /* Reclaimed indent funds larger type: top 17px semibold, sub 15px. */
  html #mega-menu-wrap-main #mega-menu-main > li.mega-menu-item > a.mega-menu-link {
    font-size: 17px;
    font-weight: 600;
  }
  html #mega-menu-wrap-main #mega-menu-main li.mega-menu-item > ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
    font-size: 15px;
  }
}
/* Drawer social block (injected by menu-mobile-extras.js): desktop-hidden. */
.menu-mobile-social { display: none; }
@media only screen and (max-width: 1364px) {
  .menu-mobile-social { display: block; padding: 4px 20px 28px 24px; }
  .menu-social-divider { display: block; border-top: 1px solid rgba(0, 0, 0, 0.14); margin: 12px 0 16px; }
  .menu-social-row { display: flex; gap: 4px; }
  .menu-social-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; color: #3a3d43; border-radius: 50%;
  }
  .menu-social-link:hover { color: #b41d21; background: rgba(180, 29, 33, 0.07); }
  .menu-social-link svg { width: 22px; height: 22px; fill: currentColor; }
}