/*
 * Servers24 Custom Menu Stylesheet
 *
 * This stylesheet defines the layout and appearance of the custom navigation menu.
 * The menu is built with accessibility and performance in mind. It supports
 * horizontal orientation on desktops and collapses into a vertical off‑canvas
 * drawer on smaller screens. Icons are delivered via Font Awesome.
 */

/* Reset basic list styles for the menu */
.servers24-custom-menu,
.servers24-custom-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Container for toggle button and navigation */
.servers24-menu-wrapper {
    position: relative;
    width: 100%;
    background-color: #ffffff;
    z-index: 999;
    /* No flexbox needed here; toggle button will be absolutely positioned instead */
}

/* Toggle button styling (hamburger) */
.servers24-menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    /* Position toggle absolutely within the wrapper so it can be aligned per direction */
    position: absolute;
    top: 0.5rem;
    z-index: 1001;
}
.servers24-menu-toggle-lines,
.servers24-menu-toggle-lines::before,
.servers24-menu-toggle-lines::after {
    display: block;
    width: 24px;
    height: 2px;
    background: #333;
    border-radius: 2px;
    position: relative;
    transition: all 0.3s ease;
}
.servers24-menu-toggle-lines::before,
.servers24-menu-toggle-lines::after {
    content: '';
    position: absolute;
    left: 0;
}
.servers24-menu-toggle-lines::before {
    top: -8px;
}
.servers24-menu-toggle-lines::after {
    top: 8px;
}

/* Apply transformation when menu is open */
.servers24-menu-wrapper.open .servers24-menu-toggle-lines {
    background-color: transparent;
}
.servers24-menu-wrapper.open .servers24-menu-toggle-lines::before {
    top: 0;
    transform: rotate(45deg);
}
.servers24-menu-wrapper.open .servers24-menu-toggle-lines::after {
    top: 0;
    transform: rotate(-45deg);
}

/* Navigation containers */
.servers24-custom-menu-desktop-container,
.servers24-custom-menu-mobile-container {
    width: 100%;
}

/* Main menu style (common to both desktop and mobile) */
.servers24-custom-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    /* The text direction is controlled via classes servers24-direction-rtl / servers24-direction-ltr */
}

/* When using side orientation, disable flexbox on the top-level menu so that
   each list item becomes a block element. This ensures that absolutely
   positioned submenus are anchored relative to their parent list items,
   instead of the flex container. */
/* In side orientation the top-level menu continues to use flexbox. Submenus will
   still be absolutely positioned relative to their parent list items. */

/* Direction classes to control text flow. Assign one of these to the container via the shortcode dir parameter. */
.servers24-direction-rtl .servers24-custom-menu {
    direction: rtl;
}
.servers24-direction-ltr .servers24-custom-menu {
    direction: ltr;
}
.servers24-custom-menu > li {
    position: relative;
}
/* Style for all menu links at the top level.  Set position relative so pseudo-elements
   such as the arrow are anchored to the link rather than the containing <li>. */
/* Top‑level menu link styling.  Use equal horizontal padding so that left and right margins
   are consistent.  Reducing the right padding from 1.5rem to 1rem keeps the menu compact
   while maintaining a comfortable tap target on touch devices. */
.servers24-custom-menu > li > a {
    display: block;
    padding: 1rem 1rem;
    text-decoration: none;
    color: #333;
    font-size: 1rem;
    font-weight: 600;
    position: relative;
}

/* Ensure links at all levels that have submenus are positioned relative so that
   the arrow pseudo‑element is anchored to the link itself rather than the parent
   list item.  Without this, the arrow can shift vertically when the list
   item’s height changes (for example, when sub‑sub‑menus are expanded).
   The !important flag guarantees our positioning is not reset by themes. */
.servers24-custom-menu .menu-item-has-children > a {
    position: relative !important;
}
.servers24-custom-menu > li:hover > a,
.servers24-custom-menu > li > a:focus {
    background-color: #f3f3f3;
}

/* Submenu arrow indicator using Font Awesome */
/* Submenu arrow indicator using CSS borders instead of external fonts.
   In RTL layouts the arrow is positioned after the text on the left side,
   while in LTR layouts it appears after the text on the right side. */
.servers24-custom-menu .menu-item-has-children > a:before {
    content: '';
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    width: 0.4em;
    height: 0.4em;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    /* Ensure the arrow does not intercept clicks; the anchor should receive
       pointer events so that submenu toggling works properly on touch devices. */
    pointer-events: none;
}
/* Position arrow before the text. In RTL layouts the arrow appears on the right (start of line).
   In LTR layouts the arrow appears on the left. */
.servers24-direction-rtl .servers24-custom-menu .menu-item-has-children > a:before {
    right: 0.5rem;
    left: auto;
}

/*
 * Adjust arrow orientation for nested submenus (sub‑sub‑menus) on desktop.
 * When a nested submenu opens as a fly‑out to the side, the arrow should
 * point toward the direction the submenu appears (left for RTL, right for LTR).
 * These rules rotate the arrow on hover and when the menu item has the
 * `open-submenu` class (used in mobile toggling) so that the orientation is
 * consistent across both interaction modes.  The default orientation (45deg)
 * points downward; rotating to 135deg points left, and rotating to -45deg
 * points right.  Restrict to screens wider than 768px to avoid interfering
 * with mobile dropdown behaviour.
 */
@media (min-width: 769px) {
    /* RTL: nested submenu opens to the left; arrow points left when hovered or open */
    .servers24-direction-rtl .servers24-custom-menu li li.menu-item-has-children.open-submenu > a:before,
    .servers24-direction-rtl .servers24-custom-menu li li.menu-item-has-children:hover > a:before {
        transform: translateY(-50%) rotate(135deg);
    }
    /* LTR: nested submenu opens to the right; arrow points right when hovered or open */
    .servers24-direction-ltr .servers24-custom-menu li li.menu-item-has-children.open-submenu > a:before,
    .servers24-direction-ltr .servers24-custom-menu li li.menu-item-has-children:hover > a:before {
        transform: translateY(-50%) rotate(-45deg);
    }
}
.servers24-direction-ltr .servers24-custom-menu .menu-item-has-children > a:before {
    left: 0.5rem;
    right: auto;
}

/*
 * For top‑level links with submenus we rely on the base horizontal
 * padding (1rem to 1.5rem) defined on `.servers24-custom-menu > li > a` to
 * provide space for the submenu arrow.  Extra padding is unnecessary
 * because the arrow is absolutely positioned within the anchor using
 * `right: 0.5rem` or `left: 0.5rem`.  By omitting additional padding
 * here, submenu links in RTL layouts remain flush to the right edge and
 * in LTR layouts flush to the left.
 */

/* Align hamburger toggle based on text direction. For RTL layouts the toggle should
   appear on the right; for LTR on the left. */
.servers24-direction-rtl .servers24-menu-wrapper {
    justify-content: flex-end;
}
.servers24-direction-ltr .servers24-menu-wrapper {
    justify-content: flex-start;
}

/* Position hamburger toggle on the appropriate side based on RTL/LTR. */
/* Align the hamburger toggle within the wrapper for desktop views (over 768px).  The
   toggle is positioned absolutely inside the wrapper so it sits inside the
   header area.  For smaller widths, mobile rules defined inside the media query
   will override this positioning. */
@media (min-width: 769px) {
    .servers24-direction-rtl .servers24-menu-wrapper .servers24-menu-toggle {
        right: 0.5rem;
        left: auto;
    }
    .servers24-direction-ltr .servers24-menu-wrapper .servers24-menu-toggle {
        left: 0.5rem;
        right: auto;
    }
}

/* Submenu styles */
/* Top‑level submenus (children of the main navigation items) open downward by default.  The parent
   <li> must be positioned relatively so that its submenu positions correctly beneath it. */
/* Ensure every list item that has children is a positioned element. Without an explicit
   positioning context, absolutely positioned submenus may anchor themselves to an ancestor
   further up the DOM, causing the fly‑out to align with the top of the entire dropdown
   rather than the hovered menu row. The `!important` declarations override any theme
   styles that might reset the position back to `static`. */
.servers24-custom-menu li.menu-item-has-children {
    position: relative !important;
}
/* Explicitly target second‑level and deeper menu items with children. Themes sometimes
   override positioning on nested `<li>` elements, so increasing the specificity here
   ensures each sub‑submenu is anchored relative to its immediate parent row. */
.servers24-custom-menu li li.menu-item-has-children {
    position: relative !important;
}
.servers24-custom-menu li > ul {
    position: absolute;
    right: 0;
    top: 100%;
    /* Allow the submenu width to expand to fit its content instead of
       stretching to a fixed width.  This uses the widest child item as
       the width of the dropdown.  A minimum width is kept for very short
       labels. */
    width: max-content;
    min-width: 200px;
    background-color: #ffffff;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    display: none;
    z-index: 1000;
}
.servers24-submenu-side .servers24-custom-menu li.menu-item-has-children {
    position: relative;
}
/*
 * Side orientation rules
 *
 * When the `servers24-submenu-side` class is applied to a navigation container, all
 * nested submenus (second level and deeper) will fly out to the side of their
 * parent list item rather than dropping down.  Top‑level submenus open
 * downward by default.  These rules ensure that any depth of nesting will
 * align to the side of its immediate parent.  Direction‑specific rules set
 * whether the submenu appears to the left (RTL) or right (LTR) of the parent.
 */

/* Base rule for side‑oriented nested submenus.  This applies to any
 * submenu whose parent `<li>` is itself inside another `<li>` (i.e. a
 * sub‑submenu or deeper).  Top‑level dropdowns are unaffected, so they
 * continue to open downward.  Using the `li li > ul` selector means that
 * there must be at least two ancestor `<li>` elements for the rule to
 * apply, which correctly targets the second level and deeper.  The
 * `!important` flag overrides the default dropdown positioning.
 */
.servers24-submenu-side .servers24-custom-menu li li > ul {
    position: absolute;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    z-index: 1000;
}

/* For backward compatibility we still explicitly target list items that have
 * children.  This rule applies the same positioning to `.menu-item-has-children`
 * elements.  It is kept to avoid regressions in themes that rely on the
 * original specificity.
 */
.servers24-submenu-side .servers24-custom-menu li li.menu-item-has-children > ul {
    position: absolute;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    z-index: 1000;
}

/* In RTL layouts nested submenus fly out to the left of their parent */
/* In RTL layouts nested submenus fly out to the left of their parent */
.servers24-direction-rtl .servers24-submenu-side .servers24-custom-menu li li > ul {
    right: 100% !important;
    left: auto !important;
}
.servers24-direction-rtl .servers24-submenu-side .servers24-custom-menu li li.menu-item-has-children > ul {
    right: 100% !important;
    left: auto !important;
}

/* In LTR layouts nested submenus fly out to the right of their parent */
.servers24-direction-ltr .servers24-submenu-side .servers24-custom-menu li li > ul {
    left: 100% !important;
    right: auto !important;
}
.servers24-direction-ltr .servers24-submenu-side .servers24-custom-menu li li.menu-item-has-children > ul {
    left: 100% !important;
    right: auto !important;
}

/*
 * Support nested submenus when WordPress uses the `sub-menu` class for each
 * level.  Without this rule, some themes wrap submenus in additional
 * containers which break the `.li li` selector above.  By targeting
 * `.sub-menu .sub-menu` we ensure that any submenu nested within another
 * submenu (regardless of wrapper elements) is positioned beside its
 * parent item.  The direction-specific rules below set whether the fly-out
 * appears to the right (LTR) or left (RTL).
 */
.servers24-submenu-side .servers24-custom-menu .sub-menu .sub-menu {
    position: absolute;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    z-index: 1000;
}
.servers24-direction-rtl .servers24-submenu-side .servers24-custom-menu .sub-menu .sub-menu {
    right: 100% !important;
    left: auto !important;
}
.servers24-direction-ltr .servers24-submenu-side .servers24-custom-menu .sub-menu .sub-menu {
    left: 100% !important;
    right: auto !important;
}

/*
 * Support nested submenus when a theme or plugin uses a `sub-sub-menu` class
 * rather than nesting `.sub-menu` elements.  Without these rules, such
 * submenus fall back to the default downward positioning because the
 * `.sub-menu .sub-menu` selector above does not match.  The selectors
 * below target both a `.sub-sub-menu` nested within a `.sub-menu` and a
 * standalone `.sub-sub-menu` so that any depth of nesting will fly out
 * beside its parent.  Direction‑specific rules mirror those for
 * `.sub-menu .sub-menu`, positioning fly‑outs to the left in RTL and to
 * the right in LTR layouts.
 */
.servers24-submenu-side .servers24-custom-menu .sub-menu .sub-sub-menu,
.servers24-submenu-side .servers24-custom-menu .sub-sub-menu {
    position: absolute;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    z-index: 1000;
}
.servers24-direction-rtl .servers24-submenu-side .servers24-custom-menu .sub-menu .sub-sub-menu,
.servers24-direction-rtl .servers24-submenu-side .servers24-custom-menu .sub-sub-menu {
    right: 100% !important;
    left: auto !important;
}
.servers24-direction-ltr .servers24-submenu-side .servers24-custom-menu .sub-menu .sub-sub-menu,
.servers24-direction-ltr .servers24-submenu-side .servers24-custom-menu .sub-sub-menu {
    left: 100% !important;
    right: auto !important;
}

/*
 * Robust fly‑out positioning
 *
 * Some themes reset the positioning of nested list items or their submenus,
 * causing fly‑out menus to anchor incorrectly (for example, at the top of
 * the entire dropdown rather than beside the hovered row).  The rules below
 * apply with high specificity to ensure that second‑level and deeper
 * submenus always appear outside of their parent dropdown and align with
 * the current row.  We explicitly target nested list items and their
 * immediate submenus, overriding any theme rules that would otherwise
 * reposition them.  Both `left`/`right` and `top` are set with
 * `!important` to trump competing declarations.
 */
.servers24-submenu-side .servers24-custom-menu li li.menu-item-has-children > ul,
.servers24-submenu-side .servers24-custom-menu li li > ul,
.servers24-submenu-side .servers24-custom-menu .sub-menu .sub-menu,
.servers24-submenu-side .servers24-custom-menu .sub-menu .sub-sub-menu,
.servers24-submenu-side .servers24-custom-menu .sub-sub-menu {
    position: absolute !important;
    top: 0 !important;
    /* reset both horizontal positions before applying direction‑specific rules */
    left: auto !important;
    right: auto !important;
    z-index: 1000;
}
.servers24-direction-rtl .servers24-submenu-side .servers24-custom-menu li li.menu-item-has-children > ul,
.servers24-direction-rtl .servers24-submenu-side .servers24-custom-menu li li > ul,
.servers24-direction-rtl .servers24-submenu-side .servers24-custom-menu .sub-menu .sub-menu,
.servers24-direction-rtl .servers24-submenu-side .servers24-custom-menu .sub-menu .sub-sub-menu,
.servers24-direction-rtl .servers24-submenu-side .servers24-custom-menu .sub-sub-menu {
    right: 100% !important;
    left: auto !important;
}
.servers24-direction-ltr .servers24-submenu-side .servers24-custom-menu li li.menu-item-has-children > ul,
.servers24-direction-ltr .servers24-submenu-side .servers24-custom-menu li li > ul,
.servers24-direction-ltr .servers24-submenu-side .servers24-custom-menu .sub-menu .sub-menu,
.servers24-direction-ltr .servers24-submenu-side .servers24-custom-menu .sub-menu .sub-sub-menu,
.servers24-direction-ltr .servers24-submenu-side .servers24-custom-menu .sub-sub-menu {
    left: 100% !important;
    right: auto !important;
}
.servers24-custom-menu li:hover > ul {
    display: block;
}

/*
 * Fly‑out positioning for sub‑sub‑menus (second level and deeper).  These
 * rules ensure that any submenu with the `sub-sub-menu` class opens to
 * the side of its parent item, while top‑level submenus continue to
 * open downward.  The `top` property aligns the submenu with the row
 * of its parent list item.  Direction‑specific rules set whether the
 * submenu appears to the left (RTL) or right (LTR) of the parent.
 */
.servers24-custom-menu .sub-menu .sub-sub-menu,
.servers24-custom-menu .sub-sub-menu {
    position: absolute;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    z-index: 1000;
}
/* RTL: fly out to the left */
.servers24-direction-rtl .servers24-custom-menu .sub-menu .sub-sub-menu,
.servers24-direction-rtl .servers24-custom-menu .sub-sub-menu {
    right: 100% !important;
    left: auto !important;
}
/* LTR: fly out to the right */
.servers24-direction-ltr .servers24-custom-menu .sub-menu .sub-sub-menu,
.servers24-direction-ltr .servers24-custom-menu .sub-sub-menu {
    left: 100% !important;
    right: auto !important;
}

.servers24-custom-menu li ul li a {
    display: block;
    padding: 0.75rem 1rem;
    color: #333;
    text-decoration: none;
    font-size: 0.9rem;
}
.servers24-custom-menu li ul li a:hover,
.servers24-custom-menu li ul li a:focus {
    background-color: #f3f3f3;
}

/* Responsive behaviour */
@media (max-width: 768px) {
    /* Hide desktop menu on small screens */
    .servers24-custom-menu-desktop-container {
        display: none;
    }
    /* Show hamburger toggle */
    .servers24-menu-toggle {
        display: inline-block;
    }
    /* Collapse mobile menu */
    .servers24-custom-menu-mobile {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        display: none;
    }
    /* Show mobile menu when wrapper has open class */
    .servers24-menu-wrapper.open .servers24-custom-menu-mobile {
        display: flex;
    }
    .servers24-custom-menu-mobile > li {
        width: 100%;
    }
    .servers24-custom-menu-mobile > li > a {
        padding: 0.75rem 1rem;
        width: 100%;
        border-bottom: 1px solid #eee;
    }
    /* Reset submenu positioning for mobile */
    .servers24-custom-menu-mobile li ul {
        position: static;
        width: 100%;
        box-shadow: none;
        display: none;
    }
    /* Prevent hover from automatically displaying submenus on mobile. Without this rule,
       the desktop hover rule `.servers24-custom-menu li:hover > ul` would cause submenus
       to remain open when the user taps a menu item, because the mouse pointer can
       still hover over the <li> in desktop browsers emulating mobile widths.
       Only apply when the submenu is not explicitly opened with the `open-submenu` class. */
    .servers24-custom-menu-mobile li:not(.open-submenu):hover > ul {
        display: none !important;
    }

      /* Add top padding to the mobile nav so it does not overlap the hamburger toggle */
      .servers24-menu-wrapper nav {
          padding-top: 2.5rem;
      }
    /* Show submenu when parent has open-submenu class */
    .servers24-custom-menu-mobile li.open-submenu > ul {
        display: block;
    }
    /* Adjust arrow for submenus in mobile. Place before the text: in RTL the arrow appears on the right,
       in LTR it appears on the left. */
    .servers24-direction-rtl .servers24-custom-menu-mobile .menu-item-has-children > a:before {
        right: 1rem;
        left: auto;
    }
    .servers24-direction-ltr .servers24-custom-menu-mobile .menu-item-has-children > a:before {
        left: 1rem;
        right: auto;
    }

    /*
     * On mobile, do not add extra horizontal padding for links with submenus.
     * The base padding defined on `.servers24-custom-menu-mobile > li > a` (1rem
     * horizontal) provides enough space for the submenu arrow which is
     * positioned absolutely using `right: 1rem` or `left: 1rem` depending
     * on text direction.  Removing the additional 2rem padding keeps
     * submenu links flush with the viewport edge in RTL and LTR layouts.
     */

    /* Off‑canvas mobile menu container. The nav slides in from the side and overlays the page. */
    .servers24-custom-menu-mobile-container {
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        width: 80%;
        max-width: 320px;
        background-color: inherit;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        z-index: 1000;
    }

/*
 * When displaying the off‑canvas mobile menu, arrange the contents of the
 * mobile navigation into a vertical flex layout.  The `.servers24-custom-menu-mobile-container`
 * element itself is the `<nav>` tag used by the plugin.  By assigning a
 * flexbox layout directly to this container we ensure that the menu list
 * expands to fill available space and that any extra content (including
 * bottom buttons) is pushed to the bottom of the panel.  Without these
 * rules, the extra content appears immediately below the menu items rather
 * than sticking to the footer area.
 */
.servers24-custom-menu-mobile-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/*
 * Force mobile mode on desktop when the menu wraps onto multiple lines.
 * When the wrapper element has the `force-mobile` class, apply the same
 * display rules used in the mobile breakpoint regardless of viewport width.
 * This allows the plugin to automatically switch to the off‑canvas mobile
 * navigation if the top‑level menu items no longer fit on a single row.
 */
.servers24-menu-wrapper.force-mobile .servers24-custom-menu-desktop-container {
    display: none !important;
}
.servers24-menu-wrapper.force-mobile .servers24-menu-toggle {
    display: inline-block !important;
}
.servers24-menu-wrapper.force-mobile .servers24-custom-menu-mobile {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    display: none;
}
.servers24-menu-wrapper.force-mobile.open .servers24-custom-menu-mobile {
    display: flex;
}
.servers24-menu-wrapper.force-mobile .servers24-custom-menu-mobile > li {
    width: 100%;
}
.servers24-menu-wrapper.force-mobile .servers24-custom-menu-mobile > li > a {
    padding: 0.75rem 1rem;
    width: 100%;
    border-bottom: 1px solid #eee;
}
.servers24-menu-wrapper.force-mobile nav {
    padding-top: 2.5rem;
}
/* Ensure the mobile menu uses a vertical flex layout.  Do not allow the
   <ul> element to expand beyond its content height so that extra
   content can occupy the remaining space. */
.servers24-custom-menu-mobile-container > ul {
    /* Allow the menu list to grow only as tall as its content. */
    flex: 0 0 auto;
}
/* Place the extra content into its own flex column that fills the
   remaining height of the mobile nav.  This container will expand to
   occupy available space so that the bottom button can stick to the
   bottom while other content stays at the top. */
.servers24-custom-menu-mobile-container > .servers24-mobile-extra-content {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
/* Push the bottom button to the bottom of the extra content.  When
   present, the last button will automatically align at the bottom of
   the mobile menu. */
.servers24-mobile-extra-content .servers24-extra-button-bottom {
    margin-top: auto;
}
    .servers24-menu-wrapper.open .servers24-custom-menu-mobile-container {
        transform: translateX(0);
    }
    /* For LTR, slide the mobile nav in from the left instead of the right */
    .servers24-direction-ltr .servers24-custom-menu-mobile-container {
        right: auto;
        left: 0;
        transform: translateX(-100%);
    }
    .servers24-direction-ltr .servers24-menu-wrapper.open .servers24-custom-menu-mobile-container {
        transform: translateX(0);
    }
    /* Overlay covers the rest of the page when the mobile menu is open */
    .servers24-menu-wrapper .servers24-mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease-in-out;
        z-index: 999;
    }
    .servers24-menu-wrapper.open .servers24-mobile-overlay {
        opacity: 1;
        pointer-events: auto;
    }
    /* Ensure the mobile navigation list takes full height inside the nav */
    .servers24-custom-menu-mobile-container nav,
    .servers24-custom-menu-mobile-container ul {
        height: auto;
    }
    /* Ensure the hamburger toggle remains visible above the overlay.  Place it
       fixed relative to the viewport so that it stays in view even when
       the mobile nav slides in or out.  Use a higher z-index than the
       overlay and mobile nav. */
    .servers24-menu-toggle {
        position: fixed;
        top: 0.75rem;
        z-index: 1003;
    }
    /* Align the hamburger toggle to the appropriate side based on direction */
    .servers24-direction-rtl .servers24-menu-toggle {
        right: 0.75rem;
        left: auto;
    }
    .servers24-direction-ltr .servers24-menu-toggle {
        left: 0.75rem;
        right: auto;
    }
    /* Logo styling at the top of the mobile menu
       Always stick the logo flush to the top of the mobile navigation.  Remove
       any vertical margin and only apply horizontal and bottom padding.  Use
       percentage padding so it scales with the menu’s width. */
    .servers24-mobile-logo {
        text-align: center;
        margin: 0;
        padding: 0 5% 5% 5%;
    }
    .servers24-mobile-logo img {
        max-width: 70%;
        height: auto;
    }

    /* Ensure the mobile logo behaves as a link by inheriting text colour, removing underlines, and
       acting as an inline‑block element. Without this rule, themes may override anchor styles and
       cause unexpected colours or underlining on the logo or site title. */
    .servers24-mobile-logo a {
        color: inherit;
        text-decoration: none;
        display: inline-block;
    }
    /* Extra content below the mobile menu */
    .servers24-mobile-extra-content {
        padding: 1rem;
        font-size: 0.9rem;
        border-top: 1px solid #eee;
    }

/* Styles for predefined mobile extra content templates */
.servers24-mobile-extra-content .servers24-extra-button {
    display: block;
    margin: 0.5rem 0;
    padding: 0.5rem 1rem;
    background: #0073aa;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
}
.servers24-mobile-extra-content .servers24-extra-button a {
    color: inherit;
    text-decoration: none;
}
.servers24-mobile-extra-content .servers24-extra-button:hover {
    background: #005177;
}
.servers24-mobile-extra-content .servers24-extra-address,
.servers24-mobile-extra-content .servers24-extra-phone {
    margin: 0.5rem 0;
}
.servers24-mobile-extra-content .servers24-extra-phone a {
    color: inherit;
    text-decoration: none;
}

    /*
     * Mobile sub‑sub‑menu styling
     * Override desktop fly‑out rules for sub‑sub‑menus on mobile.  The
     * `.sub-sub-menu` should open downward like any other submenu and not
     * fly out to the side.  Use direction‑specific margins to ensure
     * the submenu aligns flush with the appropriate edge.  A subtle
     * box shadow is added for separation.  We separate the base
     * positioning reset from the direction‑specific width and margin rules.
     */
    /* Base override: reset positioning for all sub‑sub‑menus on mobile */
    .servers24-custom-menu-mobile .sub-sub-menu {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
    }
    /* RTL: flush to the right.  No right margin, apply left margin and set width accordingly */
    .servers24-direction-rtl .servers24-custom-menu-mobile .sub-sub-menu {
        margin: 0 0 0 5%;
        width: 95%;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    }
    /* LTR: flush to the left.  No left margin, apply right margin and set width accordingly */
    .servers24-direction-ltr .servers24-custom-menu-mobile .sub-sub-menu {
        margin: 0 5% 0 0;
        width: 95%;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    }

    /*
     * High specificity overrides for sub‑sub‑menus
     * These rules match the desktop fly‑out selectors and override them on mobile.
     * They are split into RTL and LTR blocks to align sub‑sub‑menus flush
     * with the appropriate edge.  Use the same or greater specificity and
     * !important declarations to trump desktop rules.
     */
    /* RTL: override fly‑out positioning and align flush to the right */
    .servers24-direction-rtl .servers24-custom-menu .sub-menu .sub-sub-menu,
    .servers24-direction-rtl .servers24-custom-menu .sub-sub-menu {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        margin: 0 0 0 5% !important;
        width: 95% !important;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    }
    /* LTR: override fly‑out positioning and align flush to the left */
    .servers24-direction-ltr .servers24-custom-menu .sub-menu .sub-sub-menu,
    .servers24-direction-ltr .servers24-custom-menu .sub-sub-menu {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        margin: 0 5% 0 0 !important;
        width: 95% !important;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    }

/*
 * Mobile close button styling
 * The close button appears inside the mobile off‑canvas panel when enabled via
 * the Elementor widget.  By default the button is hidden; it becomes
 * visible when the menu is open.  Position classes (left/right) align it
 * relative to the panel’s edges.  Use flexbox to center the icon within
 * the square button and inherit the text colour from the menu design.
 */
.servers24-mobile-close {
    display: none;
    position: absolute;
    top: 0.5rem;
    z-index: 1002;
    background: transparent;
    border: 2px solid currentColor;
    border-radius: 4px;
    width: 2rem;
    height: 2rem;
    padding: 0;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
}
.servers24-mobile-close i {
    font-size: 1.2rem;
}
.servers24-mobile-close-left {
    left: 0.5rem;
}
.servers24-mobile-close-right {
    right: 0.5rem;
}
/* Show close button only when wrapper is open */
.servers24-menu-wrapper.open .servers24-mobile-close {
    display: flex;
}
/* Hide close button on larger screens */
@media (min-width: 769px) {
    .servers24-mobile-close {
        display: none !important;
    }
}
}

@media (min-width: 769px) {
    /* Hide mobile menu wrapper on large screens */
    .servers24-menu-wrapper {
        display: none;
    }
}