/* ==========================================================================
   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-header,
.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>ul.elementor-nav-menu>li:not(.drilldown-root-link)>a,
.drilldown-active nav.elementor-nav-menu--dropdown ul.sub-menu>li>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);
}

/* ==========================================================================
   10a. TOP BAR (Back Position = "Top bar")
   ==========================================================================
   One bar above the levels instead of a back row inside each one: back on the
   left, the current level's name centred, the × on the right — the × itself is
   untouched, still absolutely positioned by its own controls. The bar is a
   <nav> child placed right before the root UL, so the levels (absolute inside
   that UL) start below it and nothing scrolls underneath.

   Three columns, the outer two always the same width, which is what keeps the
   title centred on the panel. That width is the wider of what they hold — the
   back button on one side, the ×'s footprint on the other — measured by the JS
   into --drilldown-header-side. The widget's Side Width control can widen it
   (so the title wraps sooner) but never narrow it below that, so the three
   never overlap. The title gets the rest and wraps to a second line inside it.

   Height comes from the × as well (--drilldown-header-min-height), so the three
   pieces share one line whatever size and offset the × is given. */
/* The divider is the bar's own, not the item Separator Color: a design can
   drop the lines between items and still want this one. A neutral grey at
   20% reads on light and dark panels alike; Top Bar › Divider Color / Weight
   set the variables (weight 0 hides it). */
.drilldown-active .drilldown-header {
    display: none;
    border-bottom: var(--drilldown-header-divider-width, 1px) solid
                   var(--drilldown-header-divider-color, rgba(128, 128, 128, 0.2));
}

.drilldown-active.drilldown-in-submenu .drilldown-header {
    --drilldown-header-side-track: max(var(--drilldown-header-side-width, 0px), var(--drilldown-header-side, 88px));
    display: grid;
    grid-template-columns:
        var(--drilldown-header-side-track)
        minmax(0, 1fr)
        var(--drilldown-header-side-track);
    /* Row 1 is exactly the ×'s line and holds the back button, so the two stay
       level. The title spans both rows, top-aligned: its first line shares
       row 1, and a wrapped title grows into the auto row below instead of
       pushing the back button off the ×'s line. */
    grid-template-rows: var(--drilldown-header-min-height, 64px) auto;
    align-items: center;
    column-gap: 8px;
    padding: 0 10px;
    box-sizing: border-box;
    flex-shrink: 0;
    background: transparent;
}

/* Root level with no logo: the bar stays as an empty row, so the × gets a line
   of its own instead of sitting on the first item — level 0 of the design.
   With a logo, the logo row already gives it one. It keeps the divider, as in
   the design, and box-sizing matches the sub-level bar so the items start at
   the same height on every level. */
.drilldown-active.drilldown-back-header.drilldown-at-root:not(.drilldown-has-logo) .drilldown-header {
    display: block;
    min-height: var(--drilldown-header-min-height, 64px);
    box-sizing: content-box;
    flex-shrink: 0;
}

.drilldown-active.drilldown-at-root .drilldown-header .drilldown-back-link {
    display: none !important;
}

/* While drilled in, the bar is the top row; the logo would stack a second
   header above it. It comes back with the root level. */
.drilldown-active.drilldown-back-header.drilldown-in-submenu .drilldown-logo {
    display: none;
}

/* Hugs its label instead of spanning the row like the in-list back row. The
   widget's back Padding control is !important and still wins. */
.drilldown-active .drilldown-header .drilldown-back-link {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    width: auto;
    padding: 8px;
    white-space: nowrap;
}

/* Same mirrored item font as every injected piece; the Top Bar controls
   override it. No line clamp: the title is the "where am I" cue, and cutting
   words off defeats it. How many lines it takes is decided by the column width
   (Side Width, the back label's size), not by hiding the rest. */
.drilldown-active .drilldown-header-title {
    grid-column: 2;
    grid-row: 1 / 3;
    /* Top-aligned, not centred: the FIRST line sits on the back button / ×
       line and any further lines run downwards. The padding is half of what
       row 1 has left around one line of the title's own font (1lh), which
       puts that first line dead on the ×'s centre and leaves the same gap
       under the last line. A one-line title comes out exactly as tall as the
       row, so the bar only grows when the title wraps.
       On the title, not the bar: padding on the bar would push row 1 — and the
       back button with it — off the ×'s line. The 6px is for browsers without
       the lh unit; max() stops a font taller than the row going negative. */
    align-self: start;
    padding-block: 6px;
    padding-block: max(0px, calc((var(--drilldown-header-min-height, 64px) - 1lh) / 2));
    text-align: center;
    overflow-wrap: anywhere;
    color: var(--drilldown-item-color, inherit);
    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);
}

.drilldown-active .drilldown-header-title:empty {
    display: none;
}

/* ==========================================================================
   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;
}

/* Polylang's list, served inside the same .wpml-ls shell so every rule above
   and every Language Switcher style control applies to it as well (see
   render_polylang_switcher() in the PHP). Polylang spaces the name from the
   flag with an inline margin; the link's own gap already does that. */
.drilldown-active .drilldown-pll-switcher a > span {
    margin-left: 0 !important;
}

/* ==========================================================================
   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);
}

/* The × stays on the physical right in RTL too, and the grid's first column
   is now the right one: move the back button to the far (left) column so the
   two never land on each other. Both side columns are the same width, so the
   track list itself needs no mirroring. */
[dir="rtl"] .drilldown-active .drilldown-header .drilldown-back-link {
    grid-column: 3;
    justify-self: end;
}

/* 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;
}

/* Second group. The gap is spent on both sides of the line, so with the
   divider on the rule reads as centred between the two groups. */
.drilldown-active nav.elementor-nav-menu--dropdown li.drilldown-root-links .drilldown-root-links-list + .drilldown-root-links-list {
    margin-top: var(--drilldown-root-links-group-gap, 24px);
}

.drilldown-active nav.elementor-nav-menu--dropdown li.drilldown-root-links .drilldown-root-links-list--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-group-gap, 24px);
}

.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;
}

/* The column is what keeps the labels in one line. Its width is a setting of
   its own, so a row drawn at a different size — or with no icon at all —
   scales the glyph inside the box instead of pushing its own label out. */
.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-column, var(--drilldown-root-links-icon-size, 16px));
    width: var(--drilldown-root-links-icon-column, 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: var(--drilldown-root-links-icon-size, 16px);
    height: auto;
    fill: currentColor;
    /* Per-row, set inline by the render. The rotation stays inside the column,
       so turning an icon never moves the text next to it. */
    transform: rotate(var(--drilldown-root-link-icon-rotate, 0deg));
}

.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;
}

/* The language switcher when it lives in the block rather than in the footer.
   Its markup is WPML's, so it cannot carry the row classes: what it gets here
   is the same row height, the same icon gap and the same colour, and nothing
   of the menu-item geometry it would otherwise inherit. */
.drilldown-active nav.elementor-nav-menu--dropdown li.drilldown-root-links .drilldown-root-link--wpml .wpml-ls,
.drilldown-active nav.elementor-nav-menu--dropdown li.drilldown-root-links .drilldown-root-link--wpml .wpml-ls > ul {
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.drilldown-active nav.elementor-nav-menu--dropdown li.drilldown-root-links .drilldown-root-link--wpml .wpml-ls a {
    display: flex;
    align-items: center;
    gap: var(--drilldown-root-links-icon-gap, 12px);
    min-height: var(--drilldown-root-links-row-height, 44px);
    padding: 0;
    border: 0;
    background: none;
    text-decoration: none;
    color: var(--drilldown-root-links-color, inherit);
}

/* WPML's legacy dropdown ships as a fake <select>: a 15.5em box with a grey
   border and a solid-border triangle pinned to its right edge. In a row of
   plain links that reads as a stray form field, and once the box is only as
   wide as the label the triangle lands on top of the text. */
.drilldown-active nav.elementor-nav-menu--dropdown li.drilldown-root-links .drilldown-root-link--wpml .wpml-ls-legacy-dropdown,
.drilldown-active nav.elementor-nav-menu--dropdown li.drilldown-root-links .drilldown-root-link--wpml .wpml-ls-legacy-dropdown-click {
    width: auto;
}

.drilldown-active nav.elementor-nav-menu--dropdown li.drilldown-root-links .drilldown-root-link--wpml a.wpml-ls-item-toggle {
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

/* The same pseudo-element, reused as a chevron: two 1px sides turned 45deg,
   which follows the text colour instead of carrying its own.

   Taken out of absolute positioning on purpose. Pinned to the right edge it
   needed padding reserved for it, and in a row as narrow as a language code
   that lands the arrow on top of the letters. As a flex item it queues after
   the label and the row's own icon gap does the spacing. */
.drilldown-active nav.elementor-nav-menu--dropdown li.drilldown-root-links .drilldown-root-link--wpml a.wpml-ls-item-toggle::after {
    position: static;
    display: block;
    flex: 0 0 auto;
    /* Optical centring: a square turned 45deg hangs low by half its border. */
    margin-top: -0.18em;
    width: 0.38em;
    height: 0.38em;
    border: 0;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    border-image: none;
    transform: rotate(45deg);
}

.drilldown-active nav.elementor-nav-menu--dropdown li.drilldown-root-links .drilldown-root-link--wpml .wpml-ls-sub-menu {
    /* Downwards, clear of the row it opens from. The block is the last thing
       in the panel and the empty space below it is where this belongs; opening
       upwards covers the rows above, which is worse than it sounds when the
       list is two languages and the row above is a link. */
    top: calc(100% + 6px);
    bottom: auto;
    right: auto;
    left: 0;
    z-index: 5;
    /* Hugs the language code. At 100% of a row that spans the panel the box
       reads as a banner, not as a dropdown. */
    min-width: max-content;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.drilldown-active nav.elementor-nav-menu--dropdown li.drilldown-root-links .drilldown-root-link--wpml .wpml-ls-sub-menu a {
    /* !important because the block's own switcher rule flattens every link in
       it to padding:0 — right for the toggle, wrong for a dropdown item. */
    padding: 8px 14px !important;
    min-height: 0 !important;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    white-space: nowrap;
}

/* The logo is not a menu item: Elementor's dropdown hover colour reaches every
   anchor in the panel, and on a wide logo link that paints a band across the
   top of the open menu. */
.drilldown-active nav.elementor-nav-menu--dropdown .drilldown-logo a:hover,
.drilldown-active nav.elementor-nav-menu--dropdown .drilldown-logo a:focus {
    background: none !important;
}