/* ==========================================================
   Emerald / Helix Ultimate 2
   Fullscreen vertical offcanvas menu
   ========================================================== */


/* ==========================================================
   1. Offcanvas layout
   ========================================================== */

.offcanvas-menu.left-1 .offcanvas-inner {
    display: flex !important;
    flex-direction: column !important;
}

/* Logo */
.offcanvas-menu.left-1 .offcanvas-inner > .ge-module-logo {
    order: 1 !important;
    align-self: center !important;
}

/* Main menu */
.offcanvas-menu.left-1 .offcanvas-inner > .sp-module:has(.mod-menu) {
    order: 2 !important;
}

/* Contact information */
.offcanvas-menu.left-1 .offcanvas-inner > .ge-module-contact-offcanvas {
    order: 3 !important;
}

/* Language switcher */
.offcanvas-menu.left-1 .offcanvas-inner > .ge-lang-switcher-offcanvas {
    order: 4 !important;
}


/* ==========================================================
   2. Contact information
   ========================================================== */

.ge-module-contact-offcanvas hr {
    color: var(--ge-primary);
    opacity: 1;
}


/* ==========================================================
   3. Offcanvas toggler
   ========================================================== */

/* One hamburger for all screen widths: the template renders its toggler with "d-lg-none" for the
   mega menu type (hidden from 992px), so it is forced to be visible here. It stays fixed in the
   top left corner and is vertically centred in the toolbar. The horizontal position comes from
   the template container, so it lines up with the toolbar content on every screen width. */
#offcanvas-toggler {
    position: fixed !important;
    top: 0;
    height: var(--ge-header-height) !important;
    display: inline-flex !important;
    align-items: center;
}


/* ==========================================================
   4. Fullscreen offcanvas
   ========================================================== */

.offcanvas-menu.left-1 {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;

    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;

    z-index: 99999 !important;

    transform: translate3d(0, -100%, 0) !important;

    transition: transform .45s ease-in-out !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    contain: layout paint style;
}


/* Open state */

.offcanvas-active .offcanvas-menu.left-1 {
    transform: translate3d(0, 0, 0) !important;
}


/* ==========================================================
   5. Content width
   ========================================================== */

.offcanvas-menu.left-1 .offcanvas-inner {
    width: 100% !important;
    max-width: 1320px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 30px !important;
    padding-right: 30px !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   6. Close button
   ========================================================== */

/* The close button lies exactly on top of the hamburger, so the menu can be closed again without
   moving the mouse. Its burger icon turns into a cross through the template's .offcanvas-active
   animation, just like the hamburger itself.

   Header row: sticks to the top of the scrolling offcanvas and takes no space,
   it only serves as the positioning context of the close button. */
.offcanvas-menu.left-1 > .d-flex {
    display: block !important;
    position: sticky !important;
    top: 0;
    z-index: 2;

    width: 100% !important;
    max-width: none !important;
    height: 0;

    margin: 0 !important;
    padding: 0 !important;
}

/* Close button: top/left/width/height are copied from the hamburger by custom.js
   (section "Offcanvas Close Button"); the values here are only the fallback for small screens. */
.offcanvas-menu.left-1 > .d-flex > .close-offcanvas {
    position: absolute !important;
    top: 0;
    left: 15px;
    right: auto !important;
    height: var(--ge-header-height);

    display: inline-flex !important;
    align-items: center;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* Same colour as the hamburger */
.offcanvas-menu.left-1 > .d-flex > .close-offcanvas .burger-icon > span {
    background-color: var(--ge-primary) !important;
}

/* No extra top padding for the menu content: .offcanvas-inner is limited to the viewport height
   minus the header by the template and scrolls itself, so any extra padding would cause a
   scrollbar on common laptop screens. The centred logo does not collide with the cross anyway. */


/* ==========================================================
   7. Main menu grid
   ========================================================== */

.offcanvas-menu.left-1 .sp-module-content > ul.mod-menu {
    display: grid !important;

    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    width: 100% !important;

    margin: 0 auto !important;
    padding: 0 !important;

    gap: 40px !important;

    text-align: center !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   8. Main menu items
   ========================================================== */

.offcanvas-menu.left-1 .sp-module-content > ul.mod-menu > li {
    display: block !important;

    width: auto !important;

    float: none !important;
    position: static !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Main menu headings */

.offcanvas-menu.left-1 .sp-module-content > ul.mod-menu > li > a {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    font-size: 1.6rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;

    padding: 0 0 15px !important;
    margin: 0 0 15px !important;

    text-align: center !important;

    box-sizing: border-box !important;
}


/* Remove Helix submenu toggler */

.offcanvas-menu.left-1 .menu-toggler {
    display: none !important;
}


/* ==========================================================
   9. Submenus
   ========================================================== */

.offcanvas-menu.left-1 .sp-module-content > ul.mod-menu > li > ul {
    display: block !important;

    position: static !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    box-shadow: none !important;
}


/* Submenu items */

.offcanvas-menu.left-1 .sp-module-content > ul.mod-menu > li > ul > li {
    display: block !important;

    width: auto !important;

    float: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================
   10. Submenu links
   ========================================================== */

.offcanvas-menu.left-1 .sp-module-content > ul.mod-menu > li > ul > li > a {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    font-size: 1.25rem !important;
    line-height: 1.5 !important;

    padding: 5px 0 !important;

    text-align: center !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   11. External links
   ========================================================== */

.offcanvas-menu.left-1 .sp-module-content > ul.mod-menu a[target="_blank"] {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    text-align: center !important;
}


/* External-link icon */

.offcanvas-menu.left-1 .sp-module-content > ul.mod-menu a[target="_blank"] > span.fa-solid {
    order: 2 !important;

    flex: 0 0 auto !important;

    margin-left: .5rem !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ==========================================================
   12. Logo
   ========================================================== */

.offcanvas-menu.left-1 .ge-module-logo {
    margin-top: 30px;
}

.offcanvas-menu.left-1 .ge-module-logo img {
    display: block;

    max-width: 200px;

    height: auto;
}


/* ==========================================================
   13. Contact
   ========================================================== */

.offcanvas-menu.left-1 .ge-module-contact-offcanvas {
    margin-top: 25px;
}


/* ==========================================================
   14. Language switcher
   ========================================================== */

.offcanvas-menu.left-1 .ge-lang-switcher-offcanvas {
    margin-top: 40px;
}


/* ==========================================================
   15. Tablet
   ========================================================== */

@media (max-width: 1199px) {

    .offcanvas-menu.left-1 .sp-module-content > ul.mod-menu {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

}


/* ==========================================================
   16. Small tablets
   ========================================================== */

@media (max-width: 767px) {

    .offcanvas-menu.left-1 .sp-module-content > ul.mod-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* ==========================================================
   17. Smartphones
   ========================================================== */

@media (max-width: 575px) {

    .offcanvas-menu.left-1 .sp-module-content > ul.mod-menu {
        grid-template-columns: 1fr !important;
    }
}