/* ==========================================================================
   Mega menu interaction states
   (base layout lives in site-header-footer.css; this file is the small,
   focused stylesheet for open/closed/focus states so mega-menu.js has a
   single, predictable set of classes/attributes to toggle)
   ========================================================================== */

.de-menu-item.de-has-dropdown[aria-expanded="true"] > .de-menu-link .de-menu-caret,
.de-menu-item.de-open > .de-menu-link .de-menu-caret{
  transform:rotate(225deg); margin-top:2px;
}
.de-menu-caret{ transition:transform .15s ease; }

/* Visible focus for every interactive nav element — required by the a11y spec. */
.de-menu-link:focus-visible,
.de-header__whatsapp:focus-visible,
.de-header__cta:focus-visible,
.de-header__burger:focus-visible,
.de-mobile-nav__close:focus-visible{
  outline:2px solid var(--de-teal);
  outline-offset:2px;
}

/* Mobile accordion open state */
.de-mobile-menu .de-menu-item.de-open > .de-dropdown,
.de-mobile-menu .de-menu-item.de-open > .de-mega-panel{
  display:block !important;
  columns:1 !important;
}
.de-mobile-menu .de-mega-heading{ break-before:auto !important; }

@media (prefers-reduced-motion: reduce){
  .de-menu-caret{ transition:none; }
}