/* ============================================================
   Nav Menu — root bar (dark variant)
   ============================================================ */

/* Background color lives here (the module root Divi's native Background
   design field targets via {{selector}}) rather than on .orbisk-nav2-menu
   below it — the inner div has no background of its own so the native field
   is actually what's visible, instead of being hidden behind a hardcoded one. */
.orbisk_nav_menu_v2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: #13382A;
}

/* "Transparent Until Scroll" (transparentHeader toggle, default off). Applies
   from first paint (not JS-driven) so there's no flash of the configured
   solid background before nav-menu-v2.js's scroll listener has a chance to run.
   !important is required to beat Divi's own native Background design field,
   which targets this exact same {{selector}} — nav-menu-v2.js only ever adds the
   .orbisk-nav2-scrolled class on scroll, which stops this rule from matching
   at all and lets Divi's own (non-important) background rule show through
   again, whatever colour it's set to. The transition lives on the unconditional
   .orbisk-nav2-transparent-header rule (not the :not() one below) so it applies
   both ways — fading in on scroll down and fading back out on scroll back up
   to the top — rather than only animating one direction. */
.orbisk_nav_menu_v2.orbisk-nav2-transparent-header {
    transition: background-color 0.4s ease;
}

.orbisk_nav_menu_v2.orbisk-nav2-transparent-header:not(.orbisk-nav2-scrolled) {
    background-color: transparent !important;
}

/* Grid (not flex) so the primary nav sits in a track of its own that's
   genuinely centered on the whole bar — with flex's `justify-content: center`
   on a `flex: 1` middle item, "centered" only means centered within the
   leftover space after the logo/utility widths, which visibly drifts
   off-centre whenever those two aren't the same width. The 1fr/auto/1fr grid
   keeps the two outer tracks equal width regardless of their content, which
   pins the middle (auto) track to the true horizontal centre of the bar. */
.orbisk-nav2-menu {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    padding: 16px 40px;
    font-family: 'Poppins', sans-serif;
}

.orbisk-nav2-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-self: start;
}

.orbisk-nav2-logo-img {
    display: block;
    height: 32px;
    width: auto;
    max-width: 140px;
}

.orbisk-nav2-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
}

.orbisk-nav2-utility {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-self: end;
}

/* ============================================================
   Nav Menu — primary items
   ============================================================ */

.orbisk-nav2-item {
    position: relative;
}

.orbisk-nav2-item-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
    color: var(--orbisk-nav2-link-color, #13382A);
    padding: 8px 0 6px;
    text-decoration: none;
}

/* Animated hover underline — sits right at the trigger's own bottom edge,
   which the 6px bottom padding above already offsets from the text. Scales
   in from the left on hover/open instead of a plain opacity fade. */
.orbisk-nav2-item-trigger::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: var(--orbisk-nav2-link-hover-color, #B5E37C);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.orbisk-nav2-item:hover .orbisk-nav2-item-trigger::after,
.orbisk-nav2-item--open .orbisk-nav2-item-trigger::after {
    transform: scaleX(1);
}

.orbisk-nav2-item-chevron {
    display: inline-flex;
    color: inherit;
    /* The source SVG points up — rotated 180° at rest so it points down
       (collapsed), then un-rotated on hover/open to point back up. */
    transform: rotate(180deg);
    transition: transform 0.6s ease;
}

.orbisk-nav2-item-chevron svg {
    display: block;
    width: 10px;
    height: auto;
}

.orbisk-nav2-item:hover .orbisk-nav2-item-chevron,
.orbisk-nav2-item--open .orbisk-nav2-item-chevron {
    transform: rotate(0deg);
}

/* ============================================================
   Nav Menu — dropdown (desktop)
   ============================================================ */

/* Open/close state is driven by JS (nav-menu-v2.js) with a hover-intent delay,
   not raw CSS :hover — a straight :hover close is unforgiving of diagonal or
   hesitant mouse movement toward the dropdown.

   Always rendered as `display: grid` (never toggled to `none`) so open/close
   can transition on opacity/transform instead of just popping in and out —
   this also means moving from one primary item straight to the next animates
   as a graceful crossfade (old one's :hover/--open drops off and it fades +
   slides out at the same time the new one's fades + slides in), rather than
   the old dropdown vanishing before the new one appears. `visibility` rides
   along so it's unreachable by keyboard/hidden from screen readers while
   closed, with its own transition delayed on the closing side only, so it
   still hides instantly-ish on open but isn't yanked away mid-close-transition. */
.orbisk-nav2-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    display: block;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    /* Padding lives on each .orbisk-nav2-dropdown-section instead of here, so a
       section's own background (e.g. the card's) fills its full grid cell
       top-to-bottom rather than stopping at an outer padding edge. overflow:
       hidden clips those section backgrounds to this radius. */
    overflow: hidden;
    /* Width follows the total column count (list columns + card) — see the
       data-columns/data-card rules right after this block. 3 columns keeps
       v1's 1080px. Capped to the viewport (minus a 20px gutter each side)
       so a 4-column dropdown can't spill past the screen edge on narrower
       desktops; nav-menu-v2.js centres it on the viewport. */
    width: min(var(--orbisk-nav2-dropdown-width, 1080px), calc(100vw - 40px));
    /* No CSS hover-bridge needed for this gap, unlike the WPML dropdown —
       this one is driven by a JS hover-intent grace period (CLOSE_DELAY in
       nav-menu-v2.js), not raw CSS :hover, so a few extra px of empty space is
       trivial to cross within that window. */
    margin-top: 22px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    /* `height` transitions independently of opacity/transform/visibility —
       it stays active even during a switch (see --instant below), animated
       via animateDropdownHeight() in nav-menu-v2.js since two different items'
       dropdowns can have different natural (auto) content heights and
       `auto` itself isn't transitionable, only an explicit px value is. */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s, height 0.62s ease;
}

/* Total columns = data-columns (list columns) + data-card (0/1). */
.orbisk-nav2-dropdown[data-columns="1"][data-card="0"] { --orbisk-nav2-dropdown-width: 420px; }
.orbisk-nav2-dropdown[data-columns="1"][data-card="1"],
.orbisk-nav2-dropdown[data-columns="2"][data-card="0"] { --orbisk-nav2-dropdown-width: 760px; }
.orbisk-nav2-dropdown[data-columns="2"][data-card="1"],
.orbisk-nav2-dropdown[data-columns="3"][data-card="0"] { --orbisk-nav2-dropdown-width: 1080px; }
.orbisk-nav2-dropdown[data-columns="3"][data-card="1"] { --orbisk-nav2-dropdown-width: 1240px; }

/* :hover opens instantly (snappy); .orbisk-nav2-item--open (set by JS with a
   close delay) keeps it open through the hover-intent grace period after the
   mouse leaves — see initDesktopDropdowns() in nav-menu-v2.js. */
.orbisk-nav2-item:hover .orbisk-nav2-dropdown,
.orbisk-nav2-item--open .orbisk-nav2-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s, height 0.62s ease;
}

/* Set by nav-menu-v2.js only while switching straight from one open dropdown to
   another — the outer box's fade/slide-down is reserved for opening from a
   fully-closed nav, since it visibly fights the inner content's directional
   slide during a switch. `height` is deliberately left animating (that's the
   whole point — the box should still gracefully grow/shrink to the new
   item's content height instead of snapping), only opacity/transform/
   visibility are killed. This replaces the whole transition list (rather
   than just adding `!important` per-property) specifically so those three
   are removed entirely instead of merely instant — a `0s` transition still
   technically transitions and can occasionally flash. */
.orbisk-nav2-dropdown.orbisk-nav2-dropdown--instant {
    transition: height 0.62s ease !important;
}

/* The grid lives here (not on .orbisk-nav2-dropdown itself) so
   nav-menu-v2.js can slide just the inner content horizontally when
   switching straight from one open dropdown to another, independently of
   the outer box's own fade/slide-down on first open — same as v1.

   Unlike v1's fixed 3-column template, the column count follows what
   actually rendered: NavMenuV2.php sets data-columns (1–3 list columns,
   from the menu_columns repeater) and data-card (0/1) on
   .orbisk-nav2-dropdown. List columns share the width equally; the card,
   always last, gets a slightly narrower track. */
.orbisk-nav2-dropdown-inner {
    display: grid;
    grid-template-columns: repeat(var(--orbisk-nav2-list-columns, 1), minmax(0, 1fr));
    gap: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.orbisk-nav2-dropdown[data-columns="2"] { --orbisk-nav2-list-columns: 2; }
.orbisk-nav2-dropdown[data-columns="3"] { --orbisk-nav2-list-columns: 3; }

.orbisk-nav2-dropdown[data-card="1"] .orbisk-nav2-dropdown-inner {
    grid-template-columns: repeat(var(--orbisk-nav2-list-columns, 1), minmax(0, 1fr)) minmax(0, 0.8fr);
}

.orbisk-nav2-dropdown-section {
    padding: 44px 28px;
    height: 100%;
}

/* Outer edge padding goes on whichever column is actually first/last,
   rather than on fixed section numbers like v1. */
.orbisk-nav2-dropdown-section:first-child {
    padding-left: 40px;
}

.orbisk-nav2-dropdown-section:last-child {
    padding-right: 40px;
}

/* Divider between neighbouring list columns only — the card is separated
   by its own background instead. */
.orbisk-nav2-dropdown-section--list + .orbisk-nav2-dropdown-section--list {
    border-left: 1px solid #E5E5E5;
}

.orbisk-nav2-dropdown-section--card {
    background-color: #FAF9F7;
}

.orbisk-nav2-column-title,
.orbisk-nav2-card-title {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 150%;
    color: #666666;
    margin-bottom: 12px;
}

.orbisk-nav2-dropdown-children {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ============================================================
   Nav Menu v2 — link rows (one renderer for every column)
   ============================================================ */

/* Base look = v1's Section 1 row. Icon, sub content and pill are each
   optional per link item, so any column can mix rows with and without them. */
.orbisk-nav2-link-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    background-color: transparent;
}

.orbisk-nav2-link-row:hover {
    background-color: #ECF4EC;
}

.orbisk-nav2-link-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.orbisk-nav2-link-text {
    display: block;
    min-width: 0;
}

.orbisk-nav2-link-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}

.orbisk-nav2-link-title {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.25px;
    color: #002314;
}

.orbisk-nav2-link-sub {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 150%;
    color: #13382ACC;
    margin-top: 0;
}

/* Arrow is hidden until the row is hovered (desktop). margin-left: auto
   pushes it to the far right. */
.orbisk-nav2-link-arrow {
    display: inline-flex;
    flex-shrink: 0;
    width: 16px;
    color: #13382A;
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.orbisk-nav2-link-arrow svg {
    display: block;
    width: 100%;
    height: auto;
}

.orbisk-nav2-link-row:hover .orbisk-nav2-link-arrow {
    opacity: 1;
}

/* Mobile has no hover — arrow is always visible for every link row. */
.orbisk-nav2-mobile-panel .orbisk-nav2-link-arrow {
    opacity: 1;
}

.orbisk-nav2-pill-wrap {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
    border-radius: 9999px;
    padding: 4px 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 500;
}

.orbisk-nav2-pill-wrap--green {
    background-color: #B5E37C;
    color: #004737;
}

.orbisk-nav2-pill-wrap--orange {
    background-color: #FFE4D6;
    color: #FD712B;
}

/* ============================================================
   Nav Menu v2 — Quick start card (always the last column)
   ============================================================ */

.orbisk-nav2-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.orbisk-nav2-card-heading {
    font-size: 15px;
    line-height: 1.4;
    color: #13382A;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.orbisk-nav2-card-image {
    width: 210px;
    max-width: 100%;
    height: 148px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    margin-bottom: 12px;
}

.orbisk-nav2-card-link-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #13382A;
}

/* Always visible (unlike the rows' hover-revealed arrow) — shifts 4px on
   card hover instead of appearing/disappearing. */
.orbisk-nav2-card-arrow {
    display: inline-flex;
    flex-shrink: 0;
    width: 16px;
    color: #13382A;
    transition: transform 0.2s ease;
}

.orbisk-nav2-card-arrow svg {
    display: block;
    width: 100%;
    height: auto;
}

.orbisk-nav2-card:hover .orbisk-nav2-card-arrow {
    transform: translateX(4px);
}

/* ============================================================
   Nav Menu — utility (login / wpml / cta)
   ============================================================ */

/* Same link styling/colour source as the primary nav items (--orbisk-nav2-link-color
   / --orbisk-nav2-link-hover-color, set on .orbisk-nav2-menu) — only the CTA
   button/text is excluded from this shared treatment. */
.orbisk-nav2-login {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
    color: var(--orbisk-nav2-link-color, #13382A);
    padding: 8px 0 6px;
    text-decoration: none;
}

/* No arrow at all on desktop (opacity:0 alone still reserves the gap/width) —
   scoped to the desktop utility bar only, so the mobile-cloned Login (inside
   .orbisk-nav2-mobile-utility) keeps its always-visible arrow. */
.orbisk-nav2-utility .orbisk-nav2-login .orbisk-nav2-link-arrow {
    display: none;
}

.orbisk-nav2-login::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: var(--orbisk-nav2-link-hover-color, #B5E37C);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.orbisk-nav2-login:hover::after {
    transform: scaleX(1);
}

/* WPML's [wpml_language_selector_widget] shortcode renders its own markup
   (.wpml-ls-*), so these rules restyle WPML's own classes to match the rest
   of the nav instead of using WPML's default theme. Recolours + hover/open
   behaviour reuse the same tokens as the primary items and Login link
   (--orbisk-nav2-link-color / --orbisk-nav2-link-hover-color); the submenu card
   reuses the dropdown's own hover/typography pattern (#ECF4EC hover, Poppins,
   #13382A text). !important is needed throughout to beat WPML's bundled CSS. */
.orbisk-nav2-wpml {
    display: flex;
    align-items: center;
    position: relative;
    max-width: 100px;
}

.orbisk-nav2-wpml .wpml-ls-statics-shortcode_actions,
.orbisk-nav2-wpml .wpml-ls-statics-shortcode_actions ul,
.orbisk-nav2-wpml .wpml-ls-statics-shortcode_actions .wpml-ls-sub-menu {
    background-color: transparent !important;
    padding: 0 !important;
    border: 0 !important;
}

.orbisk-nav2-wpml .wpml-ls-item-legacy-dropdown {
    position: relative !important;
    list-style: none;
}

.orbisk-nav2-wpml .wpml-ls-item-toggle,
.orbisk-nav2-wpml .wpml-ls-item-toggle span,
.orbisk-nav2-wpml .wpml-ls-item-toggle .wpml-ls-native {
    color: var(--orbisk-nav2-link-color, #13382A) !important;
    background: transparent !important;
    border: none !important;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.4s ease-in-out;
    text-decoration: none !important;
    position: relative;
}

/* No JS, no delay, no grace-period class — plain instant :hover/:focus-within
   only. Any JS-driven open class here (even fully standalone, not shared with
   the primary items) reproduced a fade glitch, so this widget gets zero JS
   involvement in its open/close state, full stop. */
.orbisk-nav2-wpml:hover .wpml-ls-item-toggle,
.orbisk-nav2-wpml:focus-within .wpml-ls-item-toggle {
    opacity: 0.7;
}

/* Desktop: flag + abbreviated code (EN, FR, ...), full native name hidden.
   The code isn't its own element — WPML puts it on the toggle link's own
   `lang` attribute, so it's pulled from there via attr() into ::before. Flex
   `order` places it right after the flag, ahead of the ::after chevron. */
.orbisk-nav2-wpml .wpml-ls-item-toggle .wpml-ls-native {
    display: none !important;
}

.orbisk-nav2-wpml .wpml-ls-item-toggle .wpml-ls-flag {
    order: 1;
}

.orbisk-nav2-wpml .wpml-ls-item-toggle::before {
    order: 2;
    content: attr(lang);
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
    color: var(--orbisk-nav2-link-color, #13382A);
}

.orbisk-nav2-wpml .wpml-ls-item-toggle::after,
.orbisk-nav2-wpml .wpml-ls-arrow {
    display: none !important;
}

/* WPML's own arrow stays hidden entirely — chevron is now a real injected
   <svg> sibling of the shortcode output (.orbisk-nav2-wpml-chevron, added in
   NavMenuV2.php via chevron_svg()), not a CSS mask-image. The mask version
   looked faded at small sizes because of anti-aliasing on the masked edges;
   an actual <svg fill="currentColor"> renders crisp at any size and is
   pixel-identical to the primary items' chevron. Only shown when there's
   actually another language to switch to. */
.orbisk-nav2-wpml-chevron {
    display: none;
}

.orbisk-nav2-wpml:has(.wpml-ls-sub-menu li) .orbisk-nav2-wpml-chevron {
    display: inline-flex;
    position: relative;
    z-index: 2;
    width: 10px;
    color: var(--orbisk-nav2-link-color, #13382A);
    margin-left: -40px;
    /* aria-hidden decorative element — never steal hover/clicks from whatever
       it now visually overlaps because of the negative margin; rotation is
       driven purely by :hover on .orbisk-nav2-wpml (below), not on this
       element itself, so it doesn't need to receive pointer events at all. */
    pointer-events: none;
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.orbisk-nav2-wpml-chevron svg {
    display: block;
    width: 100%;
    height: auto;
}

.orbisk-nav2-wpml:hover .orbisk-nav2-wpml-chevron,
.orbisk-nav2-wpml:focus-within .orbisk-nav2-wpml-chevron {
    transform: rotate(0deg);
}

.orbisk-nav2-wpml .wpml-ls-item-legacy-dropdown:has(.wpml-ls-sub-menu li) .wpml-ls-arrow {
    display: inline-block !important;
}

.orbisk-nav2-wpml .wpml-ls-flag {
    width: 18px;
    height: auto;
}

/* Belt-and-braces against inherited transitions (Divi applies blanket element
   transitions in places) making background-color visibly fade while
   display/visibility snap instantly. Real fix for both this and the padding
   below lives in forceWpmlStyles() in nav-menu-v2.js — WPML renders this exact
   element with its own inline `style="padding: 8px !important"`, and an
   inline !important cannot be beaten by anything in an external stylesheet,
   only by setting the same inline style property again via JS. The CSS here
   is a harmless fallback for if that inline style ever isn't present.
   .wpml-ls-sub-menu itself is deliberately excluded — see below and
   forceWpmlStyles() in nav-menu-v2.js. */
.orbisk-nav2-wpml .wpml-ls-sub-menu * {
    transition: none !important;
}

/* Same graceful fade/slide-down as the primary mega-dropdown's first open
   (.orbisk-nav2-dropdown in nav-menu.css) — always `display: block` (never
   toggled to `none`, same reasoning as that dropdown) so opacity/transform
   can transition, gated by opacity/visibility/pointer-events instead. This
   is still pure CSS :hover/:focus-within with zero JS involvement — the
   documented fade/flicker bug here was specifically from a JS-driven
   grace-period class toggle, not from a transition existing at all. */
.orbisk-nav2-wpml .wpml-ls-sub-menu {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: #ffffff !important;
    min-width: 200px !important;
    margin-top: 23px !important;
    padding: 21px 8px !important;
    z-index: 99999 !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s !important;
}

/* Gated on :has(.wpml-ls-sub-menu li) — same condition the chevron below
   already uses — so a page with no other active languages (WPML still
   renders the shortcode's wrapper markup, just with an empty submenu) shows
   no hoverable empty white box at all, matching the chevron's own
   already-conditional visibility. */
.orbisk-nav2-wpml:has(.wpml-ls-sub-menu li):hover .wpml-ls-sub-menu,
.orbisk-nav2-wpml:has(.wpml-ls-sub-menu li):focus-within .wpml-ls-sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s !important;
}

/* Pure-CSS hover bridge — no JS, no delay. Once the submenu is visible
   (triggered by hovering the toggle), this invisible pseudo-element renders
   right along with it and exactly covers the 23px margin-top gap, so the
   mouse never crosses genuinely empty space on the way down into the
   submenu and :hover on .orbisk-nav2-wpml never breaks. Must stay in sync
   with margin-top above — the bridge only covers exactly its own height, so
   changing the gap without matching this back to it reopens the dead zone
   in the leftover uncovered strip. */
.orbisk-nav2-wpml .wpml-ls-sub-menu::before {
    content: '';
    position: absolute;
    top: -23px;
    left: 0;
    right: 0;
    height: 23px;
    background: transparent;
}

.orbisk-nav2-wpml .wpml-ls-sub-menu li {
    list-style: none;
}

.orbisk-nav2-wpml .wpml-ls-sub-menu .wpml-ls-link,
.orbisk-nav2-wpml .wpml-ls-sub-menu .wpml-ls-link span {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 12px !important;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px !important;
    line-height: 150%;
    color: #13382A !important;
    background: transparent !important;
    white-space: nowrap;
    text-decoration: none !important;
}

.orbisk-nav2-wpml .wpml-ls-sub-menu .wpml-ls-link:hover {
    background: #ECF4EC !important;
}

.orbisk-nav2-cta {
    display: inline-flex;
    align-items: center;
    background-color: var(--orbisk-nav2-cta-background-color, #B5E37C);
    color: var(--orbisk-nav2-cta-text-color, #13382A);
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
    padding: 8px 16px;
    border-radius: 12px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.orbisk-nav2-cta:hover {
    background-color: var(--orbisk-nav2-cta-hover-color, #BDE689);
}

/* ============================================================
   Nav Menu — mobile toggle
   ============================================================ */

.orbisk-nav2-mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.orbisk-nav2-mobile-toggle-bar {
    width: 22px;
    height: 2px;
    background-color: var(--orbisk-nav2-link-color, #13382A);
    transform-origin: center;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Morph the 2 bars into an X — each rotates and translates 3.5px toward the
   midpoint (half of bar height + gap: (2px + 5px) / 2) to meet in the centre. */
.orbisk-nav2-mobile-toggle--open .orbisk-nav2-mobile-toggle-bar:nth-child(1) {
    transform: translateY(3.5px) rotate(45deg);
}

.orbisk-nav2-mobile-toggle--open .orbisk-nav2-mobile-toggle-bar:nth-child(2) {
    transform: translateY(-3.5px) rotate(-45deg);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1025px) {
    .orbisk-nav2-primary,
    .orbisk-nav2-utility .orbisk-nav2-login,
    .orbisk-nav2-utility .orbisk-nav2-wpml,
    .orbisk-nav2-utility .orbisk-nav2-cta {
        display: none;
    }

    .orbisk-nav2-mobile-toggle {
        display: flex;
    }

    /* Only the logo + hamburger are visible at this width (primary/utility
       are hidden above) — back to a simple 2-item flex bar instead of the
       desktop 3-column grid, so the toggle sits flush at the right edge. */
    .orbisk-nav2-menu {
        display: flex;
        justify-content: space-between;
        padding: 14px 20px;
    }

    /* Mobile drop-down panel (built by nav-menu-v2.js). `top` and `max-height` are
       set inline by nav-menu-v2.js to the nav bar's own rendered height, so the
       panel always starts directly below the nav instead of a hardcoded value. */
    .orbisk-nav2-mobile-panel {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        background: #ffffff;
        transform: translateY(-16px);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s ease;
        z-index: 10000;
        overflow-y: auto;
        padding: 24px;
    }

    .orbisk-nav2-mobile-panel.orbisk-nav2-mobile-panel--open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    /* The dropdown markup is cloned straight from the desktop version —
       reset its desktop-only positioning/sizing so it renders inline and
       stacked instead of staying hidden (opacity/visibility/pointer-events
       are only ever flipped to visible by the desktop :hover/--open ancestor
       selectors, which don't exist in this cloned, un-nested mobile context)
       or a fixed-width grid. The grid itself lives on the nested
       .orbisk-nav2-dropdown-inner, so that needs its own reset too. */
    .orbisk-nav2-mobile-panel .orbisk-nav2-dropdown {
        display: block;
        position: static;
        width: auto;
        min-width: 0;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        margin-top: 16px;
        height: auto;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    .orbisk-nav2-mobile-panel .orbisk-nav2-dropdown-inner {
        display: block;
        grid-template-columns: none;
        transform: none;
    }

    .orbisk-nav2-mobile-panel .orbisk-nav2-dropdown-section {
        height: auto;
        padding: 20px 0;
    }

    /* Stacked list columns: the vertical divider becomes a horizontal one. */
    .orbisk-nav2-mobile-panel .orbisk-nav2-dropdown-section--list + .orbisk-nav2-dropdown-section--list {
        border-left: none;
        border-top: 1px solid #E5E5E5;
    }

    /* Grey column labels are hidden on mobile — the divider above takes
       over as the visual separator between columns instead, same as v1. */
    .orbisk-nav2-mobile-panel .orbisk-nav2-column-title {
        display: none;
    }

    /* One padding for every row in the mobile drawer, whatever the column
       style, so arrows line up at the same X position once stacked. */
    .orbisk-nav2-mobile-panel .orbisk-nav2-link-row {
        padding: 12px 16px;
    }

    .orbisk-nav2-mobile-panel .orbisk-nav2-dropdown-section--card {
        padding: 20px 16px;
        border-radius: 12px;
    }

    /* Card on mobile: image left (64x64, 8px radius), grey heading + content
       heading stacked to its right, link text hidden entirely. */
    .orbisk-nav2-mobile-panel .orbisk-nav2-card {
        display: grid;
        grid-template-columns: 64px 1fr;
        align-items: center;
        column-gap: 12px;
    }

    .orbisk-nav2-mobile-panel .orbisk-nav2-card-title {
        grid-column: 2;
        grid-row: 1;
        margin-bottom: 2px;
    }

    .orbisk-nav2-mobile-panel .orbisk-nav2-card-heading {
        grid-column: 2;
        grid-row: 2;
        margin-bottom: 0;
        font-size: 12px;
        font-weight: 400;
        line-height: 150%;
    }

    .orbisk-nav2-mobile-panel .orbisk-nav2-card-image {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 64px;
        height: 64px;
        border-radius: 8px;
        margin-bottom: 0;
    }

    .orbisk-nav2-mobile-panel .orbisk-nav2-card-link-text {
        display: none;
    }

    .orbisk-nav2-mobile-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 0;
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: 24px;
        line-height: 120%;
        color: #13382A;
        cursor: pointer;
    }

    .orbisk-nav2-mobile-back {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: 'Poppins', sans-serif;
        font-weight: 500;
        font-size: 14px;
        line-height: 150%;
        color: #666666;
        margin-bottom: 16px;
        cursor: pointer;
    }

    /* Sized off the 14px font, not the icon's own native 6x11 — grey,
       matching grey_cheveron.svg's own fill rather than the heading text colour. */
    .orbisk-nav2-mobile-back-chevron {
        display: inline-flex;
        flex-shrink: 0;
        width: 5px;
        color: #666666;
    }

    .orbisk-nav2-mobile-back-chevron svg {
        display: block;
        width: 100%;
        height: auto;
    }

    .orbisk-nav2-mobile-view {
        display: none;
    }

    /* flex column + min-height so the utility block (CTA/Login/WPML) can be
       pushed to the bottom of the drawer via margin-top: auto below, instead
       of just sitting directly under however many rows there happen to be. */
    .orbisk-nav2-mobile-view--active {
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }

    .orbisk-nav2-mobile-cta {
        display: block;
        text-align: center;
        margin-top: 24px;
    }

    .orbisk-nav2-mobile-utility {
        margin-top: auto;
        padding-top: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    /* Cloned straight from .orbisk-nav2-utility (Login, WPML, CTA in that DOM
       order) — reordered visually for mobile without touching the JS clone. */
    .orbisk-nav2-mobile-utility .orbisk-nav2-cta {
        order: 1;
        padding: 14px 53px;
    }

    .orbisk-nav2-mobile-utility .orbisk-nav2-login {
        order: 2;
    }

    .orbisk-nav2-mobile-utility .orbisk-nav2-wpml {
        order: 3;
    }

    .orbisk-nav2-mobile-utility .orbisk-nav2-login,
    .orbisk-nav2-mobile-utility .orbisk-nav2-wpml {
        color: #13382A;
    }

    /* Mobile drawer copy of the language switcher: our drawer is a light
       panel (unlike the original dark-drawer reference this was adapted
       from), so text/chevron colour stays the drawer's fixed #13382A rather
       than following --orbisk-nav2-link-color like the desktop header does. */
    .orbisk-nav2-mobile-utility .orbisk-nav2-wpml {
        max-width: none;
    }

    .orbisk-nav2-mobile-utility .orbisk-nav2-wpml .wpml-ls-item-toggle .wpml-ls-native {
        display: flex !important;
        align-items: center;
    }

    /* Full native name shows on mobile — cancel the desktop-only abbreviated
       ::before so it isn't duplicated alongside it. */
    .orbisk-nav2-mobile-utility .orbisk-nav2-wpml .wpml-ls-item-toggle::before {
        content: none;
    }

    .orbisk-nav2-mobile-utility .orbisk-nav2-wpml-chevron {
        color: #13382A;
    }

    /* The desktop version is always `display: block` (opacity/visibility
       driven, for the hover fade — see .orbisk-nav2-wpml .wpml-ls-sub-menu
       above) so it still occupies real layout space even while closed. That's
       harmless for the desktop dropdown (position: absolute, out of flow),
       but this mobile copy is flattened to position: static, i.e. actually
       in-flow — left as display:block it permanently inflates the drawer's
       flex column with an invisible block, which was pushing the CTA/Login/
       WPML group (pinned to the bottom via margin-top: auto on
       .orbisk-nav2-mobile-utility) back up to wherever it happened to fall in
       flow instead. Force it back to display:none/block instead of the fade,
       since mobile has no meaningful hover state for this to fade on anyway. */
    .orbisk-nav2-mobile-utility .orbisk-nav2-wpml .wpml-ls-sub-menu {
        display: none !important;
        position: static !important;
        background: transparent !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .orbisk-nav2-mobile-utility .orbisk-nav2-wpml:has(.wpml-ls-sub-menu li):hover .wpml-ls-sub-menu,
    .orbisk-nav2-mobile-utility .orbisk-nav2-wpml:has(.wpml-ls-sub-menu li):focus-within .wpml-ls-sub-menu {
        display: block !important;
    }

    /* The desktop hover bridge is meaningless once the submenu is flattened
       to position:static in the drawer — drop it. */
    .orbisk-nav2-mobile-utility .orbisk-nav2-wpml .wpml-ls-sub-menu::before {
        content: none;
    }

    .orbisk-nav2-mobile-utility .orbisk-nav2-wpml .wpml-ls-item-toggle,
    .orbisk-nav2-mobile-utility .orbisk-nav2-wpml .wpml-ls-item-toggle span,
    .orbisk-nav2-mobile-utility .orbisk-nav2-wpml .wpml-ls-item-toggle .wpml-ls-native,
    .orbisk-nav2-mobile-utility .orbisk-nav2-wpml .wpml-ls-sub-menu .wpml-ls-link,
    .orbisk-nav2-mobile-utility .orbisk-nav2-wpml .wpml-ls-sub-menu .wpml-ls-link span {
        color: #13382A !important;
    }
}