/*
 * Premium Class Properties
 * Mobile UI 1.0.0
 *
 * Scope:
 * - Mobile viewport stability
 * - WPResidence mobile header
 * - WPResidence slideout navigation
 * - Polylang language selector
 */

:root {
    --pcp-mobile-black: #030303;
    --pcp-mobile-panel: #080808;
    --pcp-mobile-panel-alt: #101010;
    --pcp-mobile-gold: #cbb26a;
    --pcp-mobile-text: #ffffff;
    --pcp-mobile-muted: #dddddd;
    --pcp-mobile-border: rgba(203, 178, 106, 0.42);
}


/* ==========================================================
   MOBILE ONLY
   ========================================================== */

@media (max-width: 1199.98px) {

    /*
     * Prevent accidental horizontal document movement.
     *
     * WPResidence intentionally translates #all_wrapper when
     * opening the drawer. The page itself should never become
     * horizontally scrollable while the drawer is closed.
     */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    #all_wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        touch-action: pan-y;
    }

    @supports (overflow-x: clip) {
        html,
        body,
        #all_wrapper {
            overflow-x: clip !important;
        }
    }


    /* ======================================================
       MOBILE HEADER
       ====================================================== */

    .mobile_header {
        height: 64px !important;
        margin-top: 0 !important;
        background-color: var(--pcp-mobile-black) !important;
        border-bottom: 1px solid var(--pcp-mobile-border);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    }

    .mobile_header.mobile_header_sticky_yes {
        top: 0 !important;
    }

    .mobile_header .mobile-logo img {
        max-height: 52px !important;
        max-width: 165px !important;
        width: auto !important;
        top: 50% !important;
    }

    .mobile_header .mobile-trigger,
    .mobile_header .mobile-trigger-user {
        width: 56px !important;
        height: 64px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .mobile_header .mobile-trigger {
        left: 0;
    }

    .mobile_header .mobile-trigger-user {
        right: 0;
    }

    .mobile_header .mobile-trigger i,
    .mobile_header .mobile-trigger-user > i {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 19px !important;
        color: var(--pcp-mobile-gold) !important;
    }


    /* ======================================================
       DRAWER
       Keep 256px because WPResidence Slideout.js translates
       #all_wrapper exactly 256px.
       ====================================================== */

    #mobilewrapper_links {
        width: 256px !important;

        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;

        overflow: hidden !important;

        background: var(--pcp-mobile-black);
    }

    @supports (height: 100dvh) {
        #mobilewrapper_links {
            height: 100dvh !important;
            min-height: 100dvh !important;
            max-height: 100dvh !important;
        }
    }

    #mobilewrapper_links .snap-drawers {
        width: 256px !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    #mobilewrapper_links .snap-drawer-left {
        width: 256px !important;
        height: 100% !important;

        top: 0 !important;
        bottom: 0 !important;

        padding: 0 !important;

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

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

        background: var(--pcp-mobile-black) !important;

        scrollbar-width: thin;
        scrollbar-color: var(--pcp-mobile-gold) var(--pcp-mobile-panel);
    }

    #mobilewrapper_links .snap-drawer-left::-webkit-scrollbar {
        width: 4px;
    }

    #mobilewrapper_links .snap-drawer-left::-webkit-scrollbar-track {
        background: var(--pcp-mobile-panel);
    }

    #mobilewrapper_links .snap-drawer-left::-webkit-scrollbar-thumb {
        background: var(--pcp-mobile-gold);
        border-radius: 4px;
    }


    /* ======================================================
       CLOSE BAR
       ====================================================== */

    #mobilewrapper_links .mobilemenu-close {
        position: sticky !important;

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

        z-index: 50;

        width: 100% !important;
        height: 38px !important;

        padding: 0 12px !important;

        display: flex !important;
        align-items: center;
        justify-content: flex-end;

        color: var(--pcp-mobile-gold) !important;
        background: rgba(3, 3, 3, 0.97) !important;

        border-bottom: 1px solid var(--pcp-mobile-border);
    }

    #mobilewrapper_links .mobilemenu-close i {
        margin: 0 !important;
        padding: 0 !important;

        font-size: 17px !important;

        color: var(--pcp-mobile-gold) !important;
    }


    /* ======================================================
       MAIN MENU
       ====================================================== */

    #mobilewrapper_links .mobilex-menu {
        width: 100% !important;

        float: none !important;

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

        background: var(--pcp-mobile-black);
    }

    #mobilewrapper_links .mobilex-menu li {
        position: relative;

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

        list-style: none;

        font-size: 14px !important;
        font-weight: 500;

        border-bottom:
            1px solid rgba(203, 178, 106, 0.32) !important;
    }

    #mobilewrapper_links .mobilex-menu li > a {
        width: 100% !important;
        min-height: 44px;

        margin: 0 !important;
        padding: 11px 17px !important;

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

        line-height: 1.25 !important;

        color: var(--pcp-mobile-text) !important;
        background: var(--pcp-mobile-black) !important;

        text-decoration: none !important;

        transition:
            background-color 0.15s ease,
            color 0.15s ease;
    }

    #mobilewrapper_links
    .mobilex-menu
    li.menu-item-has-children > a {
        padding-right: 52px !important;
    }


    /*
     * Disable WPResidence's old descendant arrow.
     * PCP inserts an accessible button instead.
     */

    #mobilewrapper_links
    .mobilex-menu
    .menu-item-has-children > a::after {
        display: none !important;
        content: none !important;
    }


    /*
     * Correct WPResidence hover cascade.
     * The original rule colors every descendant anchor.
     */

    #mobilewrapper_links
    .mobilex-menu
    li:hover > a,

    #mobilewrapper_links
    .mobilex-menu
    li:focus-within > a {
        color: var(--pcp-mobile-gold) !important;
        background: var(--pcp-mobile-panel-alt) !important;
    }

    #mobilewrapper_links
    .mobilex-menu
    li:hover .sub-menu a {
        color: var(--pcp-mobile-muted) !important;
        background: var(--pcp-mobile-panel) !important;
    }


    /* Current page */

    #mobilewrapper_links
    .mobilex-menu
    > li.current-menu-item > a,

    #mobilewrapper_links
    .mobilex-menu
    > li.current_page_item > a {
        color: #050505 !important;
        background: var(--pcp-mobile-gold) !important;
        font-weight: 600;
    }


    /* Open parent */

    #mobilewrapper_links
    .mobilex-menu
    li.pcp-submenu-open > a {
        color: var(--pcp-mobile-gold) !important;
        background: var(--pcp-mobile-panel-alt) !important;
    }


    /* ======================================================
       PCP SUBMENU BUTTON
       ====================================================== */

    #mobilewrapper_links
    .pcp-mobile-submenu-toggle {
        appearance: none;
        -webkit-appearance: none;

        position: absolute;

        z-index: 5;

        top: 3px;
        right: 5px;

        width: 38px;
        height: 38px;

        margin: 0;
        padding: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        border: 0;
        border-radius: 4px;

        outline: 0;

        color: var(--pcp-mobile-gold);
        background: transparent;

        cursor: pointer;
    }

    #mobilewrapper_links
    .pcp-mobile-submenu-toggle::before {
        content: "";

        width: 7px;
        height: 7px;

        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;

        transform: rotate(45deg) translate(-1px, -1px);

        transition: transform 0.16s ease;
    }

    #mobilewrapper_links
    li.pcp-submenu-open
    > .pcp-mobile-submenu-toggle::before {
        transform: rotate(225deg) translate(-1px, -1px);
    }

    #mobilewrapper_links
    .pcp-mobile-submenu-toggle:hover,

    #mobilewrapper_links
    .pcp-mobile-submenu-toggle:focus-visible {
        color: #050505;
        background: var(--pcp-mobile-gold);
    }


    /* ======================================================
       NORMAL SUBMENUS
       ====================================================== */

    #mobilewrapper_links
    .mobilex-menu .sub-menu {
        width: 100% !important;

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

        background: var(--pcp-mobile-panel) !important;

        border-top:
            1px solid rgba(203, 178, 106, 0.22) !important;
    }

    #mobilewrapper_links
    .mobilex-menu .sub-menu li {
        background: var(--pcp-mobile-panel) !important;

        border-bottom:
            1px solid rgba(203, 178, 106, 0.17) !important;
    }

    #mobilewrapper_links
    .mobilex-menu .sub-menu li > a {
        min-height: 39px !important;

        padding:
            9px 48px 9px 29px !important;

        font-size: 13px !important;
        font-weight: 400;

        line-height: 1.25 !important;

        color: var(--pcp-mobile-muted) !important;
        background: var(--pcp-mobile-panel) !important;
    }

    #mobilewrapper_links
    .mobilex-menu
    .sub-menu
    li:not(.menu-item-has-children) > a {
        padding-right: 16px !important;
    }

    #mobilewrapper_links
    .mobilex-menu
    .sub-menu
    .sub-menu li > a {
        padding-left: 39px !important;
    }

    #mobilewrapper_links
    .mobilex-menu
    .sub-menu
    li.current-menu-item > a,

    #mobilewrapper_links
    .mobilex-menu
    .sub-menu
    li.current_page_item > a {
        color: #050505 !important;
        background: var(--pcp-mobile-gold) !important;
    }


    /* ======================================================
       POLYLANG LANGUAGE MENU
       ====================================================== */

    #mobilewrapper_links
    .mobilex-menu
    .pll-parent-menu-item > .sub-menu {
        padding: 6px !important;

        background: #0b0b0b !important;
    }

    /*
     * Two compact columns.
     * Keep display:block so WPResidence/jQuery slide animations
     * remain compatible.
     */

    #mobilewrapper_links
    .mobilex-menu
    .pll-parent-menu-item > .sub-menu::after {
        content: "";
        display: table;
        clear: both;
    }

    #mobilewrapper_links
    .mobilex-menu
    .pll-parent-menu-item > .sub-menu > li {
        float: left !important;

        width: 50% !important;

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

        border: 0 !important;

        background: transparent !important;
    }

    /*
     * Parent already displays the current language.
     * Do not waste another row repeating it.
     */

    #mobilewrapper_links
    .mobilex-menu
    .pll-parent-menu-item
    > .sub-menu
    > li.current-lang {
        display: none !important;
    }

    #mobilewrapper_links
    .mobilex-menu
    .pll-parent-menu-item
    > .sub-menu
    > li > a {
        width: calc(100% - 4px) !important;
        min-height: 38px !important;

        margin: 2px !important;
        padding: 8px 7px !important;

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

        border-radius: 4px;

        font-size: 12px !important;
        font-weight: 500;

        line-height: 1.15 !important;

        color: var(--pcp-mobile-text) !important;
        background: #111111 !important;

        white-space: nowrap;
    }

    #mobilewrapper_links
    .mobilex-menu
    .pll-parent-menu-item
    > .sub-menu
    > li > a:hover {
        color: #050505 !important;
        background: var(--pcp-mobile-gold) !important;
    }

    #mobilewrapper_links
    .mobilex-menu
    .pll-parent-menu-item img {
        flex: 0 0 16px;

        width: 16px !important;
        height: 11px !important;

        margin: 0 5px 0 0 !important;
    }

    #mobilewrapper_links
    .mobilex-menu
    .pll-parent-menu-item span {
        min-width: 0;

        margin-left: 0 !important;

        overflow: hidden;
        text-overflow: ellipsis;
    }


    /* ======================================================
       LEGACY GTRANSLATE MOBILE OVERFLOW
       ====================================================== */

    .gt_white_content {
        left: 50% !important;
        right: auto !important;

        width: calc(100vw - 24px) !important;
        max-width: 479px !important;
        max-height: calc(100vh - 24px) !important;

        margin: 0 !important;

        transform: translate(-50%, -50%) !important;

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

    @supports (height: 100dvh) {
        .gt_white_content {
            max-height: calc(100dvh - 24px) !important;
        }
    }

}


/* Very narrow devices */

@media (max-width: 340px) {

    #mobilewrapper_links
    .mobilex-menu
    .pll-parent-menu-item
    > .sub-menu
    > li > a {
        font-size: 11.5px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

}