/**
 *
 L KO 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 itself

 is controlled here.
 */

/* ============================================================
 *
 L KO QUICK ACCESS                                               *

 ============================================================ */

/* ============================================================
 *
 M ODULE ROOT                                                    *

 ============================================================ */

/*
 *
 N ormally this element occupies the Joomla module position      *

 assigned to the module.
 */

.lko-qckxs-module {
    position: relative;

    width: 100%;


}

/* ============================================================
 *
 Q UICK ACCESS TRIGGER                                           *

 ============================================================ */

/*
 *
 T he button belongs entirely to this module.                    *

 Desktop:

 left aligned within the Joomla module position.

 Tablet / smartphone:

 horizontally centred within the Joomla 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;
}

/*
 *
 D esktop trigger image.                                         *
 */

.lko-qckxs-trigger-image {
    display: block;

    width: auto;

    height: 101px;

    max-width: none;


}

/*
 *
 R emove browser focus styling visually,                         *

 while retaining a clear 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;
}


/* ============================================================
 *
 O FF-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;


}

/*
 *
 O pen state is controlled by JavaScript.                        *
 */

.lko-qckxs-panel.is-open {
    visibility: visible;

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


}

/* ============================================================
 *
 P AGE OVERLAY / BLUR                                            *

 ============================================================ */

/*
 *
 T he overlay belongs to the module.                             *

 It does not blur itself.

 backdrop-filter applies the blur to whatever is behind

 the overlay, 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;


}

/*
 *
 V isible overlay.                                               *
 */

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

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


}

/* ============================================================
 *
 C LOSE 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;
}

/* ============================================================
 *
 M ENU 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);
}

/* ============================================================
 *
 S EPARATOR                                                      *

 ============================================================ */

.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
 * ============================================================ */

/*
 *
 O riginal 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);
    }
}

/* ============================================================
 *
 R EDUCED MOTION                                                 *

 ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .lko-qckxs-panel,
    .lko-qckxs-overlay,
    .lko-qckxs-navigation a {
        transition: none;
    }


}

/* ============================================================
 *
 E ND LKO QUICK ACCESS                                           *

 ============================================================ */