/**
 * Title: Fullscreen Hamburger Menu Styles
 *
 * Description:
 * Styles Elementor hamburger dropdown menus as fullscreen panels positioned
 * below the visual bottom edge of the containing Elementor header. Includes
 * first-level staggered animation, body scroll locking support, submenu
 * safeguards, and WPML menu-item styling.
 */

/* =========================================================
   1. SITE CONFIGURATION
   Edit these values when adapting the component to another site.
   ========================================================= */

:root {
  /*
   * Runtime fallback. JavaScript writes the measured header bottom offset
   * both on :root and directly on the associated dropdown.
   */
  --fullscreen-menu-header-offset: 0px;

  /* Fullscreen panel */
  --fullscreen-menu-background: rgb(243 240 234);
  --fullscreen-menu-z-index: 1;
  --fullscreen-menu-padding-block: 2rem;
  --fullscreen-menu-padding-inline: 1.5rem;
  --fullscreen-menu-content-shift-y: -20%;

  /* First-level links */
  --fullscreen-menu-font-size: clamp(2rem, 4vw, 3rem);
  --fullscreen-menu-line-height: 1.2;
  --fullscreen-menu-link-color: var(--color-red, #a21c26);

  /* Submenu links */
  --fullscreen-submenu-margin-top: 0.5rem;
  --fullscreen-submenu-font-size: 1.2rem;
  --fullscreen-submenu-opacity: 0.8;

  /* Entrance animation */
  --fullscreen-menu-item-offset: 12px;
  --fullscreen-menu-item-duration: 420ms;
  --fullscreen-menu-item-easing: ease;

  /* WPML items included in the Elementor menu */
  --fullscreen-language-gap: 20px;
  --fullscreen-language-font-size: 1.2rem;
  --fullscreen-language-color: var(--color-black, #222222);
  --fullscreen-language-link-padding: 6px;
  --fullscreen-language-separator-width: 2px;
  --fullscreen-language-separator-padding: 12px;
}

/* =========================================================
   2. FULLSCREEN PANEL
   The menu fills the viewport area below the measured header bottom edge.
   ========================================================= */

header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
  position: fixed !important;
  top: var(--fullscreen-menu-header-offset, 0px) !important;
  right: 0 !important;
  left: 0 !important;
  z-index: var(--fullscreen-menu-z-index);

  box-sizing: border-box;
  width: 100vw !important;
  max-width: none !important;

  height: calc(100vh - var(--fullscreen-menu-header-offset, 0px)) !important;
  max-height: calc(100vh - var(--fullscreen-menu-header-offset, 0px)) !important;
  height: calc(100dvh - var(--fullscreen-menu-header-offset, 0px)) !important;
  max-height: calc(100dvh - var(--fullscreen-menu-header-offset, 0px)) !important;

  margin: 0 !important;

  background-color: var(--fullscreen-menu-background) !important;

  display: flex;
  flex-direction: column;

  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* =========================================================
   3. MAIN MENU LIST
   ========================================================= */

header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
  > .elementor-nav-menu {
  box-sizing: border-box;
  width: 100%;

  margin: auto 0;
  padding:
    var(--fullscreen-menu-padding-block)
    var(--fullscreen-menu-padding-inline);

  text-align: center;
  transform: translateY(var(--fullscreen-menu-content-shift-y));
}

header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
  > .elementor-nav-menu
  > li {
  text-align: center;
}

/* =========================================================
   4. TYPOGRAPHY
   ========================================================= */

header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
  > .elementor-nav-menu
  > li
  > a.elementor-item {
  font-size: var(--fullscreen-menu-font-size);
  line-height: var(--fullscreen-menu-line-height);
  color: var(--fullscreen-menu-link-color);
  fill: currentColor;
}

header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
  .sub-menu {
  margin-top: var(--fullscreen-submenu-margin-top);
}

header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
  .sub-menu
  li {
  text-align: center;
}

header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
  .sub-menu
  a {
  font-size: var(--fullscreen-submenu-font-size);
  opacity: var(--fullscreen-submenu-opacity);
}

/* =========================================================
   5. LINK BACKGROUND STATES
   Keep all first-level and submenu links transparent in every state.
   ========================================================= */

header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
  a.elementor-item,
header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
  a.elementor-sub-item,
header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
  a.elementor-item:hover,
header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
  a.elementor-sub-item:hover,
header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
  a.elementor-item:focus,
header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
  a.elementor-sub-item:focus,
header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
  a.elementor-item:active,
header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
  a.elementor-sub-item:active,
header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
  a.elementor-item.elementor-item-active,
header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
  a.elementor-sub-item.elementor-item-active,
header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
  a.elementor-item.highlighted,
header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
  a.elementor-sub-item.highlighted,
header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
  .current-menu-item
  > a,
header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
  .current-menu-ancestor
  > a {
  background: transparent !important;
}

/* =========================================================
   6. FIRST-LEVEL STAGGERED ANIMATION
   ========================================================= */

header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
  > .elementor-nav-menu
  > li {
  opacity: 0;
  transform: translateY(var(--fullscreen-menu-item-offset));
  will-change: transform, opacity;
}

header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container.is-fullscreen-menu-open
  > .elementor-nav-menu
  > li {
  animation-name: fullscreenMenuItemIn;
  animation-duration: var(--fullscreen-menu-item-duration);
  animation-timing-function: var(--fullscreen-menu-item-easing);
  animation-fill-mode: forwards;
  animation-delay: var(--fullscreen-menu-stagger-delay, 0ms);
}

@keyframes fullscreenMenuItemIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Keep items visible whenever the fullscreen animation is inactive. */
header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container:not(.is-fullscreen-menu-open)
  > .elementor-nav-menu
  > li {
  opacity: 1;
  transform: none;
  animation: none;
}

/* Keep submenus outside the first-level animation logic. */
header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
  .sub-menu,
header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
  .sub-menu
  li,
header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
  .sub-menu
  a {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  will-change: auto !important;
}

/* =========================================================
   7. BODY SCROLL LOCK STATE
   JavaScript also fixes the body for iOS-safe position retention.
   ========================================================= */

body.fullscreen-menu-open {
  overflow: hidden;
}

/* =========================================================
   8. WPML ITEMS INSIDE THE ELEMENTOR MENU
   ========================================================= */

header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
  > .elementor-nav-menu
  > li.wpml-ls-item {
  display: inline-flex !important;
  align-items: center;
  flex: 0 0 auto;

  width: auto !important;
  margin: var(--fullscreen-language-gap) 0 0 !important;

  vertical-align: middle;
}

header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
  > .elementor-nav-menu
  > li.wpml-ls-item
  > a.elementor-item {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: auto !important;
  padding: 0 var(--fullscreen-language-link-padding) !important;

  font-size: var(--fullscreen-language-font-size) !important;
  color: var(--fullscreen-language-color);
}

header.elementor-location-header
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
  > .elementor-nav-menu
  > li.wpml-ls-item
  + li.wpml-ls-item
  > a.elementor-item {
  border-left:
    var(--fullscreen-language-separator-width)
    solid currentColor;

  padding-left:
    var(--fullscreen-language-separator-padding) !important;
}

/* =========================================================
   9. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  header.elementor-location-header
    nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
    > .elementor-nav-menu
    > li,
  header.elementor-location-header
    nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
    .sub-menu
    li {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}