/* ==========================================================================
   Square Loop — mobile menu (≤1024px)
   Modelled on zoho.com/en-us/crm: dark overlay, floating white card (10px
   radius, deep shadow), grey search bar, accordion with caret, "overview"
   link, dotted sub-lists and contact actions. Hamburger stays top right.
   ========================================================================== */

.sl-mm { display: none; }

@media (max-width: 1024px) {

    /* The ElementsKit off-canvas menu is replaced by this panel. */
    .sl-header .elementskit-menu-offcanvas-elements { display: none !important; }
    .sl-header .elementskit-menu-overlay { display: none !important; }

    .sl-mm { display: block; position: fixed; inset: 0; z-index: 9990; pointer-events: none; }
    .sl-mm.is-open .sl-mm__overlay, .sl-mm.is-open .sl-mm__panel { pointer-events: auto; }

    /* Overlay below the header (the header and hamburger stay usable). */
    .sl-mm__overlay {
        position: fixed; left: 0; right: 0; bottom: 0; top: var(--sl-mm-top, 76px);
        background: rgba(0, 0, 0, 0); transition: background .3s ease-in;
    }
    .sl-mm.is-open .sl-mm__overlay { background: rgba(0, 0, 0, .75); }

    /* Floating card */
    .sl-mm__panel {
        position: fixed; left: 10px; right: 10px; top: calc(var(--sl-mm-top, 76px) + 10px);
        width: auto;
        max-height: calc(100svh - var(--sl-mm-top, 76px) - 20px);
        display: flex; flex-direction: column;
        background: #fff; border-radius: 10px; overflow: hidden;
        box-shadow: 40px 40px 300px 100px rgba(0, 0, 0, .4);
        opacity: 0; transform: translateY(-16px); visibility: hidden;
        transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
        font-family: "Inter", sans-serif;
    }
    .sl-mm.is-open .sl-mm__panel { opacity: 1; transform: none; visibility: visible; transition: opacity .3s ease, transform .3s ease; }

    /* Search bar */
    .sl-mm__search { flex: none; height: 50px; padding: 10px 15px; background: #f9f9f9; border-bottom: 1px solid #efefef; }
    .sl-mm__search form { position: relative; height: 100%; margin: 0; }
    .sl-mm__search-input {
        width: 100%; height: 100%; border: 0 !important; background: transparent !important; box-shadow: none !important;
        padding: 5px 50px 5px 10px !important; font-size: 15px; color: #333; outline: 0; -webkit-appearance: none; border-radius: 0 !important;
    }
    .sl-mm__search-input::placeholder { color: #878787; }
    .sl-mm__search-btn {
        position: absolute; top: 0; right: 0; bottom: 0; width: 40px; padding: 0; border: 0; background: transparent !important;
        color: #6b6b6b !important; font-size: 15px; cursor: pointer;
    }
    .sl-mm__search-btn::before { content: ""; position: absolute; left: -5px; top: 0; bottom: 0; margin: auto; width: 1px; height: 15px; background: #d4d4d4; }

    /* Scrollable list */
    .sl-mm__body { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; }
    .sl-mm ul { list-style: none; margin: 0; padding: 0; }
    .sl-mm__list { padding: 12px 20px 10px 25px !important; }
    .sl-mm__list li { list-style: none; }

    .sl-mm__item > a, .sl-mm__toggle {
        display: block; position: relative; width: 100%; text-align: left;
        padding: 10px 25px 10px 0 !important; margin: 0 !important; font-size: 16px; line-height: 1.4; font-weight: 500; font-family: inherit; letter-spacing: 0; text-transform: none; box-shadow: none !important; min-height: 0;
        color: #333 !important; background: none !important; border: 0; border-radius: 0; cursor: pointer; text-decoration: none;
    }
    .sl-mm__item > a:hover, .sl-mm__toggle:hover { color: var(--sl-primary, #223197) !important; }

    /* Caret (CSS triangle that flips when open) */
    .sl-mm__caret { position: absolute; right: 10px; top: 19px; width: 10px; height: 6px; transition: transform .3s ease; }
    .sl-mm__caret::after {
        content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
        border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #000;
    }
    .sl-mm__item--parent.is-active > .sl-mm__toggle { color: var(--sl-primary, #223197) !important; }
    .sl-mm__item--parent.is-active .sl-mm__caret { transform: rotate(180deg); }

    /* Dropdown */
    .sl-mm__dropdown { display: none; padding: 2px 0 8px !important; }
    .sl-mm__item--parent.is-active > .sl-mm__dropdown { display: block; animation: sl-mm-fade .2s ease; }
    .sl-mm__sub > a { display: block; padding: 7px 0 7px 12px; font-size: 15px; line-height: 1.4; color: #333 !important; text-decoration: none; white-space: normal; }
    .sl-mm__sub > a:hover { color: #0067ff !important; }
    .sl-mm__sub--overview > a { color: var(--sl-primary, #223197) !important; font-weight: 600; }

    /* Third level: dotted list (as on Zoho) */
    .sl-mm__sub--has > .sl-mm__hub { font-weight: 600; }
    .sl-mm__subdrop { padding: 0 0 4px 30px !important; }
    .sl-mm__subdrop li { position: relative; }
    .sl-mm__subdrop li::before { content: ""; position: absolute; left: -10px; top: 0; bottom: 0; margin: auto; width: 4px; height: 4px; border-radius: 3px; background: #000; }
    .sl-mm__subdrop a { display: block; padding: 3px 0; font-size: 13.5px; line-height: 1.45; color: #333 !important; text-decoration: none; }
    .sl-mm__subdrop a:hover { color: #0067ff !important; }

    /* Contact actions */
    .sl-mm__item--login { margin-top: 6px; border-top: 1px solid #efefef; }
    .sl-mm__item--login > a, .sl-mm__item--wa > a { display: flex; align-items: center; gap: 10px; font-size: 15px; }
    .sl-mm__item--login i { color: var(--sl-primary, #223197); width: 16px; }
    .sl-mm__item--wa i { color: #25D366; width: 16px; font-size: 17px; }

    .sl-mm__cta { flex: none; padding: 12px 15px 15px; border-top: 1px solid #efefef; background: #fff; }
    .sl-mm__cta-btn {
        display: block; text-align: center; padding: 12px 16px; border-radius: 8px;
        background: var(--sl-primary, #223197); color: #fff !important; font-weight: 600; font-size: 15px; text-decoration: none;
    }
    .sl-mm__cta-btn:hover { background: var(--sl-primary-600, #1B2780); }

    /* While open: lock page scroll, hide the bottom action bar. */
    html.sl-mm-open { overflow: hidden; }
    html.sl-mm-open .sl-mobile-bar { display: none !important; }

    /* Hamburger turns into a close (X) while the panel is open. */
    .sl-header .elementskit-menu-hamburger .elementskit-menu-hamburger-icon { transition: transform .25s ease, opacity .25s ease; transform-origin: center; }
    html.sl-mm-open .sl-header .elementskit-menu-hamburger .elementskit-menu-hamburger-icon:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    html.sl-mm-open .sl-header .elementskit-menu-hamburger .elementskit-menu-hamburger-icon:nth-child(2) { opacity: 0; }
    html.sl-mm-open .sl-header .elementskit-menu-hamburger .elementskit-menu-hamburger-icon:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

@keyframes sl-mm-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .sl-mm__panel, .sl-mm__overlay, .sl-mm__caret { transition: none !important; }
    .sl-mm__dropdown { animation: none !important; }
}

/* --------------------------------------------------------------------------
   Hamburger: "Fries" icon (top and bottom full width, middle shorter, right
   aligned). No box by default, logo blue lines; on hover a logo-blue box with
   white lines. Standard 44px tap target, 24 × 3px lines.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .sl-header .elementskit-menu-hamburger {
        width: 44px !important; height: 44px !important; padding: 0 !important; margin: 0 !important;
        display: inline-flex !important; flex-direction: column; align-items: flex-end; justify-content: center; gap: 5px;
        background: transparent !important; border: 0 !important; border-radius: 10px !important; box-shadow: none !important;
        padding-right: 10px !important; cursor: pointer; transition: background-color .2s ease;
    }
    .sl-header .elementskit-menu-hamburger .elementskit-menu-hamburger-icon {
        display: block !important; width: 24px !important; height: 3px !important; margin: 0 !important;
        background: #223197 !important; border-radius: 3px !important; opacity: 1 !important;
        transition: transform .25s ease, opacity .2s ease, width .2s ease, background-color .2s ease !important;
    }
    .sl-header .elementskit-menu-hamburger .elementskit-menu-hamburger-icon:nth-child(2) { width: 16px !important; }

    .sl-header .elementskit-menu-hamburger:hover,
    .sl-header .elementskit-menu-hamburger:focus-visible { background: #223197 !important; outline: 0; }
    .sl-header .elementskit-menu-hamburger:hover .elementskit-menu-hamburger-icon,
    .sl-header .elementskit-menu-hamburger:focus-visible .elementskit-menu-hamburger-icon { background: #fff !important; }

    /* Open state: lines become an X (lines are 8px apart: 3px line + 5px gap). */
    html.sl-mm-open .sl-header .elementskit-menu-hamburger .elementskit-menu-hamburger-icon:nth-child(1) { transform: translateY(8px) rotate(45deg) !important; }
    html.sl-mm-open .sl-header .elementskit-menu-hamburger .elementskit-menu-hamburger-icon:nth-child(2) { opacity: 0 !important; width: 0 !important; }
    html.sl-mm-open .sl-header .elementskit-menu-hamburger .elementskit-menu-hamburger-icon:nth-child(3) { transform: translateY(-8px) rotate(-45deg) !important; }
}

/* --------------------------------------------------------------------------
   Updates: search hidden for now, no focus outlines on tap, arrows instead of
   bullets for every submenu item.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .sl-mm__search { display: none !important; }
    .sl-mm__list { padding-top: 14px !important; }

    /* No black border / outline / tap flash when an item is clicked. */
    .sl-mm, .sl-mm *, .sl-header .elementskit-menu-hamburger { -webkit-tap-highlight-color: transparent; }
    .sl-mm a, .sl-mm button,
    .sl-mm a:focus, .sl-mm button:focus, .sl-mm a:focus-visible, .sl-mm button:focus-visible, .sl-mm a:active, .sl-mm button:active,
    .sl-header .elementskit-menu-hamburger:focus, .sl-header .elementskit-menu-hamburger:active {
        outline: none !important; box-shadow: none !important; border: 0 !important;
    }
    .sl-mm__toggle:focus { background: none !important; }

    /* Arrows (chevrons) for all submenu items, replacing dots. */
    .sl-mm__subdrop li::before { content: none !important; display: none !important; }
    .sl-mm__subdrop { padding: 0 0 4px 14px !important; }
    .sl-mm__sub > a, .sl-mm__subdrop a { display: flex !important; align-items: center; gap: 10px; }
    .sl-mm__sub > a::before, .sl-mm__subdrop a::before {
        content: ""; flex: none; width: 6px; height: 6px;
        border-top: 2px solid var(--sl-primary, #223197); border-right: 2px solid var(--sl-primary, #223197);
        transform: rotate(45deg); border-radius: 1px; transition: transform .2s ease;
    }
    .sl-mm__subdrop a::before { width: 5px; height: 5px; border-width: 1.5px; opacity: .8; }
    .sl-mm__sub > a:hover::before, .sl-mm__subdrop a:hover::before { transform: translateX(2px) rotate(45deg); }
}