/* ==========================================================================
   Elementor Drilldown Mobile Menu v1.22.5
   Author: Agencia SEO Orbitalia — orbitalia.com

   All rules scoped under .drilldown-active — zero desktop impact.

   Structure (Elementor nav-menu widget):
   ┌ div.elementor-widget-nav-menu  ← $widget (.drilldown-active added here)
   │  ├ nav.elementor-nav-menu--main  ← desktop nav (hidden on mobile)
   │  ├ div.elementor-menu-toggle     ← hamburger button
   │  └ nav.elementor-nav-menu--dropdown  ← MOBILE dropdown container
   │     └ ul.elementor-nav-menu        ← root UL (Level 0)
   │        ├ li.menu-item > a
   │        └ li.menu-item-has-children > a
   │           └ ul.sub-menu            ← Level 1 (also has .elementor-nav-menu--dropdown!)
   │              └ li.menu-item-has-children > a
   │                 └ ul.sub-menu      ← Level 2+
   ========================================================================== */

/* ==========================================================================
   1. DROPDOWN NAV CONTAINER — override Elementor inline styles
   ========================================================================== */

.drilldown-active nav.elementor-nav-menu--dropdown {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    /* Flush to edges — no gap from Elementor container padding/margin */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    /* Nav itself doesn't scroll — the root UL flex child handles scrolling */
    overflow: hidden !important;
    /* Prevent double-tap zoom delay on mobile */
    touch-action: manipulation;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    /* Reset Elementor's inline --menu-height */
    --menu-height: 100vh !important;
    /* Default dark bg — uses background-color (not shorthand) so Elementor's
       Group_Control_Background can override with background-color/background-image */
    background-color: #1a2332;
    background-image: none;
    color: #e8ecf1;
}

/* ── While the panel closes ──
   .drilldown-active is dropped the moment the panel closes, which switches
   every rule in this file off; Elementor then spends its whole slide-up
   animation rendering the stock anchored dropdown — menu items in the theme's
   own colours and the injected back/close <button>s wearing Hello Elementor's
   reset (`border:1px solid #c36`, the pink box). Nothing in there is worth
   seeing on the way out, so the JS marks the widget for the length of that
   animation and the nav simply stops painting. Elementor finishes by writing
   its own inline display:none, so removing the class changes nothing. */
.drilldown-closing nav.elementor-nav-menu--dropdown {
    display: none !important;
}

/* ── Injected elements only exist for the panel ──
   Everything the JS adds stays in the widget's DOM for good, but only the
   fullscreen panel gives it a position: the close <button> is prepended to the
   <nav>, so with .drilldown-active off it is not the floating × in the corner,
   it is the dropdown's first block-level child, sitting in normal flow under
   the site logo. And Hello Elementor styles every <button> — `border:1px solid
   #c36`, and a solid `#c36` fill on :hover/:focus, which a just-tapped control
   has. That filled pink chip under the header logo, visible for as long as
   Elementor's slide lasts, is exactly that button.
   Restyling it is the wrong fix: outside the panel it has no place at all.
   Written as :not(.drilldown-active) so the rule cannot reach into the open
   panel — no specificity race with the styles below, which is why !important is
   safe here. */
.elementor-widget:not(.drilldown-active) .drilldown-close-btn,
.elementor-widget:not(.drilldown-active) .drilldown-logo,
.elementor-widget:not(.drilldown-active) .drilldown-back,
.elementor-widget:not(.drilldown-active) .drilldown-visit-parent,
.elementor-widget:not(.drilldown-active) .drilldown-root-links,
.elementor-widget:not(.drilldown-active) .drilldown-footer {
    display: none !important;
}

/* Belt and braces for the same pink, for any state the rule above cannot cover
   (a widget that never got the wrapper class, an aborted mount): neutralize the
   theme reset on the injected <button>s. The state selectors are not optional —
   Hello's fill lives on `button:hover`/`button:focus`, which outranks a plain
   single-class selector. Still no !important, so the scoped rules and every
   widget control keep winning inside the panel. */
.drilldown-close-btn,
.drilldown-close-btn:hover,
.drilldown-close-btn:focus,
.drilldown-close-btn:active,
.drilldown-back-link,
.drilldown-back-link:hover,
.drilldown-back-link:focus,
.drilldown-back-link:active {
    background: none;
    border: none;
    color: inherit;
}

/* ==========================================================================
   2. ROOT UL (Level 0)
   ========================================================================== */

.drilldown-active nav.elementor-nav-menu--dropdown>ul.elementor-nav-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    /* position:relative so sub-menus (position:absolute) are contained within this UL,
       which already sits below the logo/close thanks to the nav's flex layout */
    position: relative !important;
    flex: 1;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    /* Allow vertical scroll gestures on mobile */
    touch-action: pan-y;
    overscroll-behavior: contain;
    /* Flex column so WPML switcher can use margin-top:auto to stick to bottom */
    display: flex !important;
    flex-direction: column !important;
    /* The widget's desktop "Align" control emits justify-content / align-items on
       this same UL (it is the horizontal main-menu list on desktop). Flipping the
       axis to column reinterprets those on the vertical axis, so `Align: right`
       became "push every item to the bottom of the screen" and `center` shrank the
       rows. Pin both axes back — the drilldown owns this layout. */
    justify-content: flex-start !important;
    align-items: stretch !important;
}

/* ==========================================================================
   3. SUB-MENUS — hidden off-screen to the right
   ========================================================================== */

/* Sub-menus: hidden off-screen, positioned relative to the <nav> (fixed container).
   High specificity to beat Elementor's .elementor-nav-menu--dropdown styles on these ULs. */
.drilldown-active ul.sub-menu,
.drilldown-active ul.sub-menu.elementor-nav-menu--dropdown,
.drilldown-active nav.elementor-nav-menu--dropdown ul.sub-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Absolute inside the root UL (which is position:relative and sits below the logo).
       No JS-calculated offset needed — the root UL already starts after the logo. */
    position: absolute !important;
    top: 0 !important;
    left: -9999px !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    /* CRITICAL: override SmartMenus + Elementor */
    display: block !important;
    /* Hidden by default — drilldown-level-active brings it on screen */
    visibility: hidden !important;
    pointer-events: none !important;
    /* Default background — same as nav. Widget controls override via
       Elementor's generated CSS (selector targets both nav and ul.sub-menu) */
    background-color: #1a2332;
    background-image: none;
    color: #e8ecf1;
    /* Reset Elementor sub-menu styles */
    min-width: 0 !important;
    max-width: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    right: auto !important;
    bottom: auto !important;
}

/* ==========================================================================
   4. ANIMATION CLASSES (fade-based, no lateral movement)
   ========================================================================== */

/* Parent level: hide when a sub-menu is active.
   CRITICAL constraints on this rule:
   - Do NOT use opacity:0 — compositing context makes ALL descendants invisible
   - Do NOT use height:0 + overflow:hidden — clips position:absolute sub-menu children
   - USE visibility:hidden — children CAN override with visibility:visible
   - USE pointer-events:none — prevents interaction with hidden items */
.drilldown-active .drilldown-slide-out-left {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Direct children <li> of the hidden level: fully collapse them so they don't
   take up space, but sub-menu <ul> children (position:absolute) remain unaffected */
.drilldown-active .drilldown-slide-out-left > li {
    height: 0 !important;
    overflow: hidden !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Active sub-menu: bring on-screen, instant show */
.drilldown-active ul.sub-menu.drilldown-level-active,
.drilldown-active ul.sub-menu.elementor-nav-menu--dropdown.drilldown-level-active,
.drilldown-active nav.elementor-nav-menu--dropdown ul.sub-menu.drilldown-level-active {
    left: 0 !important;
    visibility: visible !important;
    display: block !important;
    pointer-events: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding-bottom: 60px !important;
}

/* Going back: hide sub-menu instantly */
.drilldown-active ul.sub-menu.drilldown-slide-out-right {
    left: -9999px !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Parent level re-appearing after back */
.drilldown-active .drilldown-slide-in-left {
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Restore <li> items of a level coming back into view */
.drilldown-active .drilldown-slide-in-left > li {
    height: auto !important;
    overflow: visible !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================================
   5. MENU ITEMS — base styles for good touch targets
   ========================================================================== */

.drilldown-active nav.elementor-nav-menu--dropdown li {
    display: block !important;
    position: static !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    float: none !important;
    width: auto !important;
    /* Reset Elementor's default — NO !important so widget controls can override */
    background: none;
}

/* :not(.drilldown-root-link) keeps the first-level extras out of the menu-item
   geometry. Those rows are a list of their own — the 48px chevron gutter and
   the 48px tap height belong to navigation items, not to them. */
.drilldown-active nav.elementor-nav-menu--dropdown li:not(.drilldown-root-link)>a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 48px !important;
    /* Extra left padding so text aligns with back-link text (after chevron + gap) */
    padding: 14px 20px 14px 48px;
    text-decoration: none !important;
    color: inherit;
    box-sizing: border-box !important;
    font-size: 15px;
    line-height: 1.4;
    /* Reset Elementor's link styles — NO !important on overridable props */
    background: transparent;
    border: none;
    white-space: normal !important;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.05);
    transition: background-color 0.15s ease;
}

.drilldown-active nav.elementor-nav-menu--dropdown li>a:hover,
.drilldown-active nav.elementor-nav-menu--dropdown li>a:focus {
    background-color: rgba(255, 255, 255, 0.06);
    outline: none;
}

.drilldown-active nav.elementor-nav-menu--dropdown li>a:active {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Current/active page item — no !important so widget Active Item BG control wins */
.drilldown-active nav.elementor-nav-menu--dropdown li.current-menu-item>a,
.drilldown-active nav.elementor-nav-menu--dropdown li.current_page_item>a {
    background-color: rgba(59, 130, 246, 0.15);
    font-weight: 600;
}

/* Elementor's generated highlight background is desktop-only. In the mobile
   drilldown its persistent (non-hover) states paint items nobody tapped — the
   auto-focused first item (:focus), the current page (.elementor-item-active)
   and SmartMenus (.highlighted) — which stacks awkwardly under the back-row
   band. Suppress those here; :hover is left intact for tap feedback, and
   .drilldown-active only exists on mobile so desktop keeps the widget highlight. */
.drilldown-active nav.elementor-nav-menu--dropdown a.elementor-item:focus,
.drilldown-active nav.elementor-nav-menu--dropdown a.elementor-item-active,
.drilldown-active nav.elementor-nav-menu--dropdown a.highlighted {
    background-color: transparent !important;
}

/* ==========================================================================
   6. HIDE SmartMenus .sub-arrow (Elementor's chevron-down)
   ========================================================================== */

.drilldown-active span.sub-arrow {
    display: none !important;
}

/* ==========================================================================
   7. CSS CHEVRON FALLBACK (when no custom icons set)
   ========================================================================== */

/* Level 0: right chevron on parent items */
.drilldown-active li.menu-item-has-children>a::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 12px;
    opacity: 0.5;
}

/* Hide CSS fallback chevrons when custom icons exist */
.drilldown-active.drilldown-has-custom-icons li.menu-item-has-children>a::after {
    display: none !important;
}

.drilldown-active.drilldown-has-custom-icons .drilldown-chevron-back {
    display: none !important;
}

/* ==========================================================================
   8. CUSTOM ICONS
   ========================================================================== */

.drilldown-active .drilldown-custom-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

.drilldown-active .drilldown-custom-icon svg {
    fill: currentColor;
}

/* Submenu arrow & expand/collapse — pushed to the right */
.drilldown-active .drilldown-submenu-icon,
.drilldown-active .drilldown-expand-icon {
    margin-left: auto;
    padding-left: 12px;
    opacity: 0.6;
}

.drilldown-active .drilldown-back-icon {
    margin-right: 6px;
    opacity: 0.7;
}

/* ==========================================================================
   9. LOGO
   ========================================================================== */

.drilldown-active .drilldown-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    text-align: center;
}

.drilldown-active .drilldown-logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Height comes from the "Logo Height" control as a custom property, so the
   responsive values Elementor emits per breakpoint just redefine the variable
   — no specificity race with this rule, and nothing written inline on the img.
   Note max-width still caps a wide logo: past a certain height the width limit
   is what decides, and the logo stops growing. */
.drilldown-active .drilldown-logo img {
    max-width: var(--drilldown-logo-max-width, 70%);
    height: var(--drilldown-logo-height, 40px);
    width: auto;
    display: block;
    object-fit: contain;
}

/* ==========================================================================
   10. BACK BUTTON
   ========================================================================== */

/* No background of its own: the back row is meant to look like any other menu
   row out of the box. The widget's "Botón Volver" section has a Background
   Color control for setting a header band when one is wanted. */
.drilldown-active .drilldown-back {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
}

.drilldown-active .drilldown-back-link {
    display: flex !important;
    align-items: center !important;
    width: 100%;
    min-height: 48px !important;
    padding: 14px 20px;
    text-decoration: none !important;
    /* Matches Elementor's menu Text Color (set as a var in JS on activate);
       falls back to inherit when the var is unset. */
    color: var(--drilldown-item-color, inherit);
    gap: 8px;
    transition: background-color 0.15s ease;
    /* Button reset (now <button> instead of <a> for SEO). font-* must be reset
       explicitly: UA stylesheets give <button> their own font, they don't inherit. */
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Typography defaults: identical to a menu item. A <button> does NOT inherit
   the UA font, and Elementor's Dropdown › Typography is written against
   .elementor-item / .elementor-sub-item, classes this button doesn't carry —
   so `inherit` alone left the back row in a different typeface. The JS mirrors
   the computed font of a real menu link onto these custom properties on
   activate(), the same mechanism the footer CTA uses.
   Kept at low specificity (2 classes) with no !important so the widget's
   "Typography (Botón Volver)" group control — emitted with the Elementor
   wrapper classes — overrides any single property when set. */
.drilldown-active .drilldown-back-link {
    font-family: var(--drilldown-item-font-family, inherit);
    font-size: var(--drilldown-item-font-size, inherit);
    font-weight: var(--drilldown-item-font-weight, inherit);
    font-style: var(--drilldown-item-font-style, inherit);
    letter-spacing: var(--drilldown-item-letter-spacing, inherit);
    word-spacing: var(--drilldown-item-word-spacing, inherit);
    text-transform: var(--drilldown-item-text-transform, none);
    line-height: var(--drilldown-item-line-height, inherit);
}

/* :focus-visible (not :focus) so the programmatic auto-focus on drill-in and
   touch taps don't paint the "selected" background — only keyboard focus does,
   keeping the a11y indicator. */
.drilldown-active .drilldown-back-link:hover,
.drilldown-active .drilldown-back-link:focus-visible {
    background-color: rgba(0, 0, 0, 0.1);
}

.drilldown-active .drilldown-chevron-back {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* "Visit parent" link (e.g. "All Diving Courses")

   Injected by the JS, so it carries neither .elementor-item nor
   .elementor-sub-item and the widget's Dropdown > Typography never reaches it:
   without these vars it dropped to the UA font while the rows around it kept
   the menu's. Same mirroring the back row and the footer CTA already use.
   Low specificity and no !important, so the Parent Link > Typography group
   control overrides any single property when set. */
.drilldown-active .drilldown-visit-parent>a {
    opacity: 0.85;
    font-family: var(--drilldown-item-font-family, inherit);
    font-size: var(--drilldown-item-font-size, inherit);
    font-weight: var(--drilldown-item-font-weight, inherit);
    font-style: var(--drilldown-item-font-style, inherit);
    letter-spacing: var(--drilldown-item-letter-spacing, inherit);
    word-spacing: var(--drilldown-item-word-spacing, inherit);
    text-transform: var(--drilldown-item-text-transform, none);
    line-height: var(--drilldown-item-line-height, inherit);
}

/* ==========================================================================
   10b. SUB-LEVEL INDENT + MARKER (opt-in)
   ==========================================================================
   Reads the sub-level as a list hanging off its parent: the back row and the
   parent link stay flush, the actual children step in and can carry a bullet.

   The indent is padding on the <li>, NOT on the <a>. The widget's "Item
   Padding" control emits `li:not(.drilldown-back) > a { padding: … !important }`,
   so any padding-left written here for the link would either lose to it or have
   to overwrite all four sides and discard the user's value. Indenting the row
   itself composes with that control instead of fighting it.

   The indent does NOT compound with depth, even though the markup nests: every
   ul.sub-menu is `position:absolute` against the root UL (the <li> in between is
   forced `position:static`), so a level-2 list is its own full-width screen and
   its rows are offset once, exactly like level 1. */

.drilldown-active.drilldown-child-indent nav.elementor-nav-menu--dropdown ul.sub-menu > li:not(.drilldown-back):not(.drilldown-visit-parent) {
    padding-left: var(--drilldown-child-indent, 10px);
}

/* The glyph is set through a class rather than interpolated into `content` from
   a control value: the select is a closed list, so nothing user-typed reaches
   the stylesheet. */
.drilldown-active.drilldown-marker-bullet  { --drilldown-child-marker-glyph: "\2022"; }  /* • */
.drilldown-active.drilldown-marker-dash    { --drilldown-child-marker-glyph: "\2013"; }  /* – */
.drilldown-active.drilldown-marker-emdash  { --drilldown-child-marker-glyph: "\2014"; }  /* — */
.drilldown-active.drilldown-marker-middot  { --drilldown-child-marker-glyph: "\00B7"; }  /* · */
.drilldown-active.drilldown-marker-hyphen  { --drilldown-child-marker-glyph: "-"; }
.drilldown-active.drilldown-marker-chevron { --drilldown-child-marker-glyph: "\203A"; }  /* › */

/* The link is a flex row, so the marker is just its first flex item — no
   absolute positioning, and a wrapping label stays clear of it. */
.drilldown-active.drilldown-child-marker nav.elementor-nav-menu--dropdown ul.sub-menu > li:not(.drilldown-back):not(.drilldown-visit-parent) > a::before {
    content: var(--drilldown-child-marker-glyph, "\2022");
    flex: 0 0 auto;
    align-self: flex-start;
    margin-right: var(--drilldown-child-marker-gap, 8px);
    /* Matches the line box of the label so the bullet sits on the first line
       when the text wraps to two. */
    line-height: inherit;
    opacity: 0.6;
}

/* ==========================================================================
   10c. CENTER LOGO IN THE DESKTOP MENU
   ==========================================================================
   NOT scoped under .drilldown-active: this one is a desktop feature and the
   markup is server-rendered, so it must be styled from the first paint — a
   JS-added class would mean a visible reflow in the header.

   The item is a real <li> emitted by the menu walker, so Elementor's own item
   styles (padding, pointers, hover colours) land on it like on any other. The
   rules below undo the ones that make no sense for an image. */

li.orb-menu-logo-item {
    display: flex;
    align-items: center;
}

li.orb-menu-logo-item > a,
li.orb-menu-logo-item > a:hover,
li.orb-menu-logo-item > a:focus {
    display: flex !important;
    align-items: center;
    /* Vertical padding off so the logo height alone drives the row height; the
       horizontal value is the widget's "Side Spacing" control. */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: none !important;
    border: none !important;
    /* Elementor's item underline/overline animation is drawn on the <a>; on an
       image it reads as a stray line. */
    text-decoration: none !important;
}

/* Elementor paints its "pointer" (underline, background, framed…) with these
   pseudo-elements. */
li.orb-menu-logo-item > a::before,
li.orb-menu-logo-item > a::after {
    display: none !important;
    content: none !important;
}

li.orb-menu-logo-item .orb-menu-logo-image {
    display: block;
    height: var(--orb-menu-logo-height, 48px);
    width: auto;
    max-width: none;
    object-fit: contain;
}

/* The drilldown builds its own header logo, and the desktop <li> would show up
   as a stray image in the middle of the list. Belt and braces: the item is only
   injected into the first (desktop) wp_nav_menu call anyway. */
.drilldown-active nav.elementor-nav-menu--dropdown li.orb-menu-logo-item {
    display: none !important;
}

/* ==========================================================================
   11. CLOSE BUTTON
   ========================================================================== */

.drilldown-active .drilldown-close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    background: none !important;
    border: none !important;
    color: inherit;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 8px;
    opacity: 0.6;
    transition: opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.drilldown-active .drilldown-close-btn:hover,
.drilldown-active .drilldown-close-btn:focus {
    opacity: 1;
}

/* Custom icon (Font Awesome <i> or uploaded <svg>). Sized in em so the existing
   "Icon Size" control — which emits font-size — drives both flavours, and
   fill:currentColor keeps the colour controls working on SVG uploads. */
.drilldown-active .drilldown-close-btn--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.drilldown-active .drilldown-close-btn--icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.drilldown-active .drilldown-close-btn--icon i {
    font-size: inherit;
    line-height: 1;
}

/* Hide Elementor's own toggle when drilldown is fullscreen */
.drilldown-active .elementor-menu-toggle {
    display: none !important;
}

/* ==========================================================================
   12. WPML LANGUAGE SWITCHER
   ========================================================================== */

/* Switcher is now a flush block inside .drilldown-footer — the footer owns
   the outer padding, so this element resets its own. */
.drilldown-active .drilldown-wpml-switcher {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* WPML wraps its switcher in a child div with its own padding — strip it */
.drilldown-active .drilldown-wpml-switcher > div {
    padding: 0 !important;
}

/* Reset WPML's own list styles inside the drilldown */
.drilldown-active .drilldown-wpml-switcher .wpml-ls ul {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.drilldown-active .drilldown-wpml-switcher .wpml-ls li {
    border-bottom: none !important;
    padding: 0;
}

.drilldown-active .drilldown-wpml-switcher .wpml-ls a {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 0 !important;
    min-height: auto !important;
    border-radius: 4px;
    opacity: 1;
    /* WPML prints this link, so it carries none of Elementor's item classes and
       the Dropdown > Typography never reached it either — the language name
       rendered in the UA font under a menu in the site's. Same mirrored vars as
       the back row, overridable by Language Switcher > Typography. */
    font-family: var(--drilldown-item-font-family, inherit);
    font-size: var(--drilldown-item-font-size, inherit);
    font-weight: var(--drilldown-item-font-weight, inherit);
    font-style: var(--drilldown-item-font-style, inherit);
    letter-spacing: var(--drilldown-item-letter-spacing, inherit);
    word-spacing: var(--drilldown-item-word-spacing, inherit);
    text-transform: var(--drilldown-item-text-transform, none);
    line-height: var(--drilldown-item-line-height, inherit);
}

.drilldown-active .drilldown-wpml-switcher .wpml-ls a:hover,
.drilldown-active .drilldown-wpml-switcher .wpml-ls a:focus {
    background-color: rgba(255, 255, 255, 0.06);
}

.drilldown-active .drilldown-wpml-switcher .wpml-ls-flag {
    width: 20px;
    height: auto;
}

/* ==========================================================================
   12b. FOOTER (CTA button + social icons + language switcher)
   ========================================================================== */

/* The single wrapper that holds the CTA, the social row and the WPML switcher.
   margin-top:auto sticks the whole block to the bottom. Padding here is the ONE
   controllable outer padding; inner blocks are flush.

   Two flavours, same class so every style control keeps working:
   - li.drilldown-footer      → inside the root UL (default). Scrolls away on drill.
   - .drilldown-footer--sticky → a <div> child of the nav. Survives every level. */
.drilldown-active nav.elementor-nav-menu--dropdown li.drilldown-footer,
.drilldown-active nav.elementor-nav-menu--dropdown > .drilldown-footer--sticky {
    margin-top: auto !important;
    padding: 16px 20px;
    list-style: none;
    border-bottom: none !important;
    height: auto !important;
    width: auto !important;
    flex-shrink: 0;
    background: none;
    /* Social icons and language switcher sit in the same row, flag after icons —
       DOM order (social appended before wpml) drives visual order. */
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    /* Fallback only. The widget splits this into two controls, because the two
       axes are unrelated distances here: column-gap separates the social icons
       from the language flag, row-gap separates the CTA line from that row. */
    gap: 12px;
}

/* The sticky footer is a nav flex child, so it is pinned below the scrolling UL
   and the sub-menu levels — which are absolute *inside* that UL — cannot reach
   it. margin-top:auto is redundant here but harmless (the UL's flex:1 already
   pushes it down); z-index guards against any level that overflows its box. */
.drilldown-active nav.elementor-nav-menu--dropdown > .drilldown-footer--sticky {
    position: relative;
    z-index: 5;
    width: 100% !important;
    box-sizing: border-box;
}

/* Left in the DOM after deactivate() — must not paint over the desktop nav. */
nav.elementor-nav-menu--dropdown > .drilldown-footer--sticky {
    display: none;
}

/* ── Scroll affordance ──
   Fade sitting directly above the sticky footer, hinting that the level
   continues underneath it. Only meaningful in sticky mode: a non-sticky footer
   scrolls away with the content, so there is nothing for the content to slide
   under. Painted as a ::before anchored to the footer's top edge rather than a
   separate element, so it inherits the footer's stacking and needs no DOM.

   --drilldown-fade-color is set by the JS from the footer's own computed
   background (falling back to the nav's), so the fade always matches whatever
   the Background controls produced. */
.drilldown-active nav.elementor-nav-menu--dropdown > .drilldown-footer--sticky::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: var(--drilldown-fade-height, 36px);
    background: linear-gradient(to top, var(--drilldown-fade-color, #1a2332), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* .drilldown-can-scroll is toggled by the JS whenever the active level has
   room left to scroll down — so short levels never imply hidden content. */
.drilldown-active.drilldown-can-scroll nav.elementor-nav-menu--dropdown > .drilldown-footer--sticky::before {
    opacity: 1;
}

/* Opt-out via the widget control. */
.drilldown-active.drilldown-no-fade nav.elementor-nav-menu--dropdown > .drilldown-footer--sticky::before {
    display: none;
}

/* ── Footer CTA button ── */

/* flex-basis 100% inside the footer's `flex-wrap: wrap` row claims a full line,
   so the CTA sits on its own row and the social + language icons wrap onto the
   next one — no change to the footer's existing row layout. */
.drilldown-active .drilldown-cta {
    flex: 0 0 100%;
    width: 100%;
    display: flex;
}

/* Visibility per level. The depth classes are set by the JS on every drill;
   the attribute carries the widget setting, so no JS branch is needed. */
.drilldown-active[data-drilldown-cta-visibility="submenus"].drilldown-at-root .drilldown-cta,
.drilldown-active[data-drilldown-cta-visibility="root"].drilldown-in-submenu .drilldown-cta {
    display: none;
}

/* Defaults only — every property here is overridden by the widget's
   "Boton CTA (Movil)" controls, which carry the Elementor wrapper classes
   and therefore outrank this file. No !important for that reason. */
.drilldown-active nav.elementor-nav-menu--dropdown .drilldown-cta > a.drilldown-cta-button {
    display: flex;
    /* Deliberately NOT flex:1 — the "Ancho Completo" control emits that, and a
       switcher emits nothing when off. Baking it in here would make the off
       state fall back to full width, i.e. the toggle would do nothing. */
    flex: 0 1 auto;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 16px 24px;
    border: none;
    border-radius: 4px;
    background-color: #1155cc;
    color: #ffffff;
    text-align: center;
    text-decoration: none !important;
    /* Font mirrored from a real menu link. Elementor's Dropdown › Typography is
       written against .elementor-item / .elementor-sub-item — classes only the
       WordPress menu links carry — so it never reaches this injected <a>, which
       then fell back to the nav's font and looked like a different typeface. The
       JS resolves the item's computed font on activate() and republishes it as
       these custom properties; each falls back to inherit if unset.
       "Typography (Items)" still wins over this rule when configured, and so does
       the "Boton Ultimo (Movil)" uppercase toggle, which is !important. */
    font-family: var(--drilldown-item-font-family, inherit);
    font-size: var(--drilldown-item-font-size, inherit);
    font-weight: var(--drilldown-item-font-weight, inherit);
    font-style: var(--drilldown-item-font-style, inherit);
    letter-spacing: var(--drilldown-item-letter-spacing, inherit);
    word-spacing: var(--drilldown-item-word-spacing, inherit);
    text-transform: var(--drilldown-item-text-transform, none);
    line-height: var(--drilldown-item-line-height, 1.3);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ── Social row ── */
.drilldown-active nav.elementor-nav-menu--dropdown .drilldown-social {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.drilldown-active nav.elementor-nav-menu--dropdown .drilldown-social .drilldown-social-list {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.drilldown-active nav.elementor-nav-menu--dropdown .drilldown-social .drilldown-social-list li {
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0;
    height: auto !important;
    width: auto !important;
}

/* Extra classes (.drilldown-social-list) raise specificity above the
   widget's "Item Padding" control selector (li:not(.drilldown-back) > a,
   !important, default 14 20 14 48) so the icon links stay flush. */
.drilldown-active nav.elementor-nav-menu--dropdown .drilldown-social .drilldown-social-list > li > a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: auto !important;
    padding: 0 !important;
    font-size: 22px;
    color: inherit;
    opacity: 0.85;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.drilldown-active nav.elementor-nav-menu--dropdown .drilldown-social .drilldown-social-list > li > a:hover,
.drilldown-active nav.elementor-nav-menu--dropdown .drilldown-social .drilldown-social-list > li > a:focus {
    opacity: 1;
    background: none !important;
}

.drilldown-active nav.elementor-nav-menu--dropdown .drilldown-social .drilldown-social-list > li > a svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* ==========================================================================
   13. BODY SCROLL LOCK
   ========================================================================== */

/* Reserve the scrollbar gutter permanently so locking body overflow when the
   menu opens does NOT change viewport width — which reflowed the full-width
   sticky header right/left and produced a visible CLS "jump" on open/close.
   Must live on html unconditionally: the gutter has to exist before AND during
   the lock to hold the space. */
html {
    scrollbar-gutter: stable;
}

/* overflow:hidden alone doesn't stop iOS Safari's rubber-band scroll on the
   underlying page — pin body at its scroll offset (set via JS custom property)
   so there's nothing behind the fixed nav left to drag. */
body.drilldown-menu-open {
    overflow: hidden !important;
    position: fixed !important;
    top: var(--drilldown-scroll-y, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}

/* ==========================================================================
   13. RTL SUPPORT
   ========================================================================== */

[dir="rtl"] .drilldown-active ul.sub-menu {
    left: auto !important;
    right: 100% !important;
}

[dir="rtl"] .drilldown-active ul.sub-menu.drilldown-level-active {
    right: 0 !important;
    left: auto !important;
}

[dir="rtl"] .drilldown-active ul.sub-menu.drilldown-slide-out-right {
    right: 100% !important;
    left: auto !important;
}

[dir="rtl"] .drilldown-active li.menu-item-has-children>a::after {
    transform: rotate(135deg);
    margin-left: 0;
    margin-right: auto;
    padding-left: 0;
    padding-right: 12px;
}

[dir="rtl"] .drilldown-active .drilldown-chevron-back {
    transform: rotate(-135deg);
}

[dir="rtl"] .drilldown-active .drilldown-submenu-icon,
[dir="rtl"] .drilldown-active .drilldown-expand-icon {
    margin-left: 0;
    margin-right: auto;
    padding-left: 0;
    padding-right: 12px;
}

[dir="rtl"] .drilldown-active .drilldown-back-icon {
    margin-right: 0;
    margin-left: 6px;
}

[dir="rtl"] .drilldown-active.drilldown-child-indent nav.elementor-nav-menu--dropdown ul.sub-menu > li:not(.drilldown-back):not(.drilldown-visit-parent) {
    padding-left: 0;
    padding-right: var(--drilldown-child-indent, 10px);
}

[dir="rtl"] .drilldown-active.drilldown-child-marker nav.elementor-nav-menu--dropdown ul.sub-menu > li:not(.drilldown-back):not(.drilldown-visit-parent) > a::before {
    margin-right: 0;
    margin-left: var(--drilldown-child-marker-gap, 8px);
}

/* Debug panel styles live in drilldown-debug.css — enqueued only when the
   widget's Debug Mode switch is on, so production pages never load them. */


/* ==========================================================================
   Root links — first-level extras
   ==========================================================================

   An <li> of the root UL holding icon + label rows (log in, register, a
   configurator...). Being a root <li> is the whole mechanism: the sub-menu
   levels are absolutely positioned inside that UL, so one drill takes this
   block off screen with the rest of level 0. The sticky footer is the opposite
   trade — a nav child that survives every level.

   Every value is a custom property with a fallback, because the block is
   injected after Elementor has printed its CSS: the widget's Style controls
   set the variables, and nothing here needs !important to win. */
.drilldown-active nav.elementor-nav-menu--dropdown li.drilldown-root-links {
    /* In flow right under the menu by default. The Pin to Bottom control sets
       the variable to auto, which hands the block the leftover space instead. */
    margin-top: var(--drilldown-root-links-margin-top, 0);
    padding: var(--drilldown-root-links-padding, 0 20px);
    list-style: none;
    border-bottom: none !important;
    height: auto !important;
    width: auto !important;
    flex-shrink: 0;
    background: none;
}

/* Only one block may claim the leftover space. When both are present the links
   win, and the footer (the language switcher) reads as the row underneath. */
.drilldown-has-root-links.drilldown-active nav.elementor-nav-menu--dropdown li.drilldown-footer {
    margin-top: 0 !important;
}

.drilldown-active nav.elementor-nav-menu--dropdown li.drilldown-root-links.drilldown-root-links--divided {
    border-top: var(--drilldown-root-links-divider-width, 1px) solid
                var(--drilldown-root-links-divider-color, rgba(0, 0, 0, 0.12));
    padding-top: var(--drilldown-root-links-divider-gap, 24px);
}

.drilldown-active nav.elementor-nav-menu--dropdown li.drilldown-root-links .drilldown-root-links-list {
    display: flex;
    flex-direction: column;
    gap: var(--drilldown-root-links-gap, 18px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.drilldown-active nav.elementor-nav-menu--dropdown li.drilldown-root-links .drilldown-root-link {
    list-style: none;
    border: 0 !important;
    padding: 0;
    margin: 0;
    width: 100%;
}

.drilldown-active nav.elementor-nav-menu--dropdown li.drilldown-root-links .drilldown-root-link > a {
    display: flex;
    align-items: center;
    gap: var(--drilldown-root-links-icon-gap, 12px);
    /* !important because the widget's Item Padding control writes its own
       !important rule; that selector excludes these rows, but a stale cached
       stylesheet from before this version would not. */
    padding: 0 !important;
    min-height: var(--drilldown-root-links-row-height, 44px);
    border: 0;
    background: none;
    text-decoration: none;
    color: var(--drilldown-root-links-color, inherit);
}

.drilldown-active nav.elementor-nav-menu--dropdown li.drilldown-root-links .drilldown-root-link > a:hover,
.drilldown-active nav.elementor-nav-menu--dropdown li.drilldown-root-links .drilldown-root-link > a:focus-visible {
    color: var(--drilldown-root-links-color-hover, var(--drilldown-root-links-color, inherit));
    background: none;
}

.drilldown-active nav.elementor-nav-menu--dropdown li.drilldown-root-links .drilldown-root-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--drilldown-root-links-icon-size, 16px);
    width: var(--drilldown-root-links-icon-size, 16px);
    color: var(--drilldown-root-links-icon-color, currentColor);
}

.drilldown-active nav.elementor-nav-menu--dropdown li.drilldown-root-links .drilldown-root-link-icon svg {
    width: 100%;
    height: auto;
    fill: currentColor;
}

.drilldown-active nav.elementor-nav-menu--dropdown li.drilldown-root-links .drilldown-root-link-icon i {
    font-size: var(--drilldown-root-links-icon-size, 16px);
    line-height: 1;
}

/* Trims the font's internal leading so the label lines up with the icon
   instead of riding a couple of pixels low. Progressive enhancement: browsers
   without text-box (Firefox today) just keep the default leading. */
.drilldown-active nav.elementor-nav-menu--dropdown li.drilldown-root-links .drilldown-root-link-text {
    text-box: trim-both cap alphabetic;
}