/* ===========================================
   MSL Mega Menu - Base Styles & Reset
   =========================================== */

/* CRITICAL: Ensure parent elements don't clip the dropdown */
/* These override WordPress theme header styles that might have overflow:hidden */
.wp-block-template-part,
.wp-block-group,
header,
.site-header,
[class*="header"],
[class*="Header"] {
  overflow: visible !important;
}

/* Scoped reset for mega menu elements */
.msl-mega-menu-wrapper *,
.msl-mega-menu-wrapper *::before,
.msl-mega-menu-wrapper *::after {
  box-sizing: border-box;
}

/* Typography */
.msl-mega-menu-wrapper h1,
.msl-mega-menu-wrapper h2,
.msl-mega-menu-wrapper h3,
.msl-mega-menu-wrapper h4,
.msl-mega-menu-wrapper h5,
.msl-mega-menu-wrapper h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  margin: 0;
  padding: 0;
}

/* Links */
.msl-mega-menu-wrapper a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.msl-mega-menu-wrapper a:hover {
  text-decoration: underline;
}

/* Focus states for accessibility */
.msl-mega-menu-wrapper a:focus,
.msl-mega-menu-wrapper button:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Modern browsers: only show focus on keyboard navigation */
.msl-mega-menu-wrapper a:focus:not(:focus-visible),
.msl-mega-menu-wrapper button:focus:not(:focus-visible) {
  outline: none;
}

.msl-mega-menu-wrapper a:focus-visible,
.msl-mega-menu-wrapper button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Lists */
.msl-mega-menu-wrapper ul,
.msl-mega-menu-wrapper ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Images */
.msl-mega-menu-wrapper img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Buttons */
.msl-mega-menu-wrapper button {
  font-family: inherit;
  font-size: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

/* Utility: Screen reader only */
.msl-mega-menu-wrapper .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}