/* LKO QUICK ACCESS */
/*
 * LKO Quick Access Menu
 *
 * @package mod_lko_qckxs_menu
 *
 * The module is independent of the active Joomla template. The
 * Joomla module position determines where the trigger is inserted
 * into the page. All quick-access styling is controlled here.
 */


/* MODULE ROOT */

/* This element normally occupies the Joomla module position
    assigned to the module. */

.lko-qckxs-module {
    position: relative;
    width: 100%;
}

/* QUICK ACCESS TRIGGER */

/* The button belongs entirely to this module.
    Desktop: left aligned within the Joomla module position.
    Tablet / smartphone: horizontally centred within the module position. */

.lko-qckxs-trigger {
    position: fixed;
    top: 40px;
    left: 0;
    width: max-content;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 1000;
}

/* Desktop trigger image. */

.lko-qckxs-trigger-image {
    display: block;
    width: auto;
    height: 101px;
    max-width: none;
}

/* Remove browser focus styling while retaining a visible keyboard
   focus indication. */

.lko-qckxs-trigger:focus {
    outline: none;
}

.lko-qckxs-trigger:focus-visible {
    outline: 2px solid #f0ebc3;
    outline-offset: 3px;
}

/*
 * Hide the trigger while the quick-access menu is open.
 *
 * The trigger is a viewport-fixed control. Once the panel
 * is open, the trigger is no longer needed and must not
 * remain visible above the overlay.
 */

.lko-qckxs-module.is-menu-open .lko-qckxs-trigger {
    visibility: hidden;
    pointer-events: none;
}


/* OFF-CANVAS PANEL */

.lko-qckxs-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 100vh;
    height: 100dvh;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: 60px;
    background-color: #5e7e8e;    /* LKOpalette 7012 260928181353 QckXs bg */
    /*
     * The panel is above the overlay.
     */
    z-index: 1003;
    /*
     * Closed state.
     */
    visibility: hidden;

    transition:
        width 0.5s ease,
        visibility 0s linear 0.5s;
}

/* Open state is controlled by JavaScript. */

.lko-qckxs-panel.is-open {
    visibility: visible;
    transition:
        width 0.5s ease,
        visibility 0s linear 0s;
}

/* PAGE OVERLAY / BLUR */

/* The overlay belongs to the module and does not blur itself.
    backdrop-filter blurs whatever is behind it, so the module does
    not need to know anything about the Joomla template DOM. */

.lko-qckxs-overlay {
    position: fixed;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.08);
    /*
     * Original LKO desktop blur.
     */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
    /*
     * Below the panel but above the normal page.
     */
    z-index: 1001;
    transition:
        opacity 0.25s ease,
        visibility 0s linear 0.25s;
}

/* Visible overlay. */

.lko-qckxs-overlay.is-visible {
    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.25s ease,
        visibility 0s linear 0s;
}

/* CLOSE BUTTON */

.lko-qckxs-close {
    position: absolute;
    top: 0;
    right: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 32px;
    line-height: 1;
    color: #f0ebc3;    /* LKOpalette MenuButton basefont */
    cursor: pointer;
}

.lko-qckxs-close:hover,
.lko-qckxs-close:focus {
    color: #ffffff;
}

.lko-qckxs-close:focus {
    outline: none;
}

.lko-qckxs-close:focus-visible {
    outline: 2px solid #f0ebc3;
    outline-offset: 3px;
}

/* MENU LINKS */

.lko-qckxs-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lko-qckxs-navigation li {
    margin: 0;
    padding: 0;
}

.lko-qckxs-navigation a {
    display: block;
    padding: 8px 8px 8px 32px;
    color: #e8ffc9;    /* LKOpalette 7000 260928181353 QckXs Menu basefont */
    text-decoration: none;
    font-size: 24px;
    line-height: 2;
    transition:
        color 0.3s ease,
        background-color 0.3s ease;
}

.lko-qckxs-navigation a:hover,
.lko-qckxs-navigation a:focus {
    color: #ffffff;    /* LKOpalette 7001 260928181353 QckXs Menu highlighted basefont */
}

.lko-qckxs-navigation a:focus {
    outline: none;
}

.lko-qckxs-navigation a:focus-visible {
    outline: 2px solid #f0ebc3;
    outline-offset: -2px;
}

.lko-qckxs-navigation li.active > a {
    background-color: rgba(255, 255, 255, 0.10);
}

/* SEPARATOR */

.lko-qckxs-separator {
    display: block;
    width: 80%;
    padding-left: 4%;
    box-sizing: border-box;
}

.lko-qckxs-separator hr {
    margin: 0;
    border: 0;
    border-top: 1px solid #c1c1c1;
}

/* TABLET / SMARTPHONE */

/* Original LKO breakpoint. On smaller screens the topsign is
   centred at the top. */

@media screen and (max-width: 992px) {
    .lko-qckxs-trigger {
        top: 0;
        left: 50%;
        margin: 0;
        transform: translateX(-50%);
    }

    .lko-qckxs-trigger-image {
        height: 65px;
    }

    .lko-qckxs-overlay {
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
    .lko-qckxs-panel,
    .lko-qckxs-overlay,
    .lko-qckxs-navigation a {
        transition: none;
    }
}

/* END LKO QUICK ACCESS */