/* ============================================================
   SmartMenus / sm-clean
   Mobile-first navigation styles
   ============================================================ */

:root {
    --nav-mobile-text: #77584B;
    --nav-mobile-active: #191919;
    --nav-desktop-text: #ffffff;
    --nav-desktop-active: #F9EDC5;
    --nav-dropdown-text: #77584B;
    --nav-dropdown-hover: #eeeeee;
    --nav-dropdown-active: #eeeeee;
    --nav-dropdown-border: #bbbbbb;
}

/* ------------------------------------------------------------
   Mobile navigation (below 768px)
   ------------------------------------------------------------ */

.sm-clean {
    background: #eeeeee;
}

    .sm-clean a,
    .sm-clean a:visited,
    .sm-clean a:hover,
    .sm-clean a:focus,
    .sm-clean a:active {
        padding: 13px 58px 13px 20px;
        color: var(--nav-mobile-text);
        font-size: 18px;
        font-weight: 300;
        line-height: 17px;
        text-decoration: none;
        box-sizing: border-box;
    }

        .sm-clean a.current,
        .sm-clean li.current > a {
            color: var(--nav-mobile-active);
            font-weight: 400;
        }

        .sm-clean a.disabled {
            color: #bbbbbb;
        }

        /* Mobile expandable menu controls */
        .sm-clean a .sub-arrow {
            position: absolute;
            top: 50%;
            right: 4px;
            left: auto;
            width: 34px;
            height: 34px;
            margin-top: -17px;
            overflow: hidden;
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.5);
            font: bold 16px/34px monospace !important;
            text-align: center;
            text-shadow: none;
        }

            .sm-clean a .sub-arrow::before {
                content: '+';
            }

        .sm-clean a.highlighted .sub-arrow::before {
            content: '-';
        }

    .sm-clean li {
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }

    .sm-clean > li:first-child {
        border-top: 0;
    }

    .sm-clean ul {
        background: rgba(162, 162, 162, 0.1);
    }

        .sm-clean ul a {
            font-size: 16px;
            border-left: 8px solid transparent;
        }

        /* Indentation for deeper mobile submenu levels */
        .sm-clean ul ul a {
            border-left-width: 16px;
        }

        .sm-clean ul ul ul a {
            border-left-width: 24px;
        }

        .sm-clean ul ul ul ul a {
            border-left-width: 32px;
        }

        .sm-clean ul ul ul ul ul a {
            border-left-width: 40px;
        }

/* ------------------------------------------------------------
   Desktop navigation (768px and wider)
   ------------------------------------------------------------ */

@media (min-width: 768px) {

    /* SmartMenus desktop layout */
    .sm-clean {
        padding: 0 25px 0 0;
        background: none;
    }

        .sm-clean li {
            float: left;
            border-top: 0;
        }

        .sm-clean.sm-rtl li {
            float: right;
        }

        .sm-clean ul li,
        .sm-clean.sm-rtl ul li,
        .sm-clean.sm-vertical li {
            float: none;
        }

        .sm-clean ul {
            position: absolute;
            width: 12em;
        }

        .sm-clean a {
            white-space: nowrap;
        }

        .sm-clean ul a,
        .sm-clean.sm-vertical a {
            white-space: normal;
        }

        .sm-clean .sm-nowrap > li > a,
        .sm-clean .sm-nowrap > li > :not(ul) a {
            white-space: nowrap;
        }

        /* Top-level links: identical geometry in all interaction states */
        .sm-clean > li > a,
        .sm-clean > li > a:visited,
        .sm-clean > li > a:hover,
        .sm-clean > li > a:focus,
        .sm-clean > li > a:active,
        .sm-clean > li > a.highlighted,
        .sm-clean > li > a.current,
        .sm-clean > li.current > a {
            padding: 12px;
            border: 0;
            color: var(--nav-desktop-text);
            font-size: 16px;
            font-weight: 300;
            line-height: 24px;
            box-sizing: border-box;
            text-decoration: none;
            transition: color 0.15s ease;
        }

            .sm-clean > li > a:hover,
            .sm-clean > li > a:focus,
            .sm-clean > li > a:active,
            .sm-clean > li > a.highlighted,
            .sm-clean > li > a.current,
            .sm-clean > li.current > a {
                color: var(--nav-desktop-active);
            }

            .sm-clean > li > a.disabled {
                color: #bbbbbb;
            }

            .sm-clean > li > a.has-submenu {
                padding-right: 24px;
            }

        .sm-clean > li:last-child > a:not(.has-submenu) {
            padding-right: 0;
        }

        /* Home icon: first top-level menu entry only */
        .sm-clean > li:first-child > a {
            font-size: 0 !important;
        }

            .sm-clean > li:first-child > a::before {
                content: "\f015";
                font-family: "Font Awesome 6 Pro";
                font-weight: 300;
                font-size: 19px;
                line-height: 20px;
            }

        /* Top-level dropdown arrows */
        .sm-clean > li > a .sub-arrow {
            top: 50%;
            right: 12px;
            width: 0;
            height: 0;
            margin-top: -2px;
            border: 4px solid transparent;
            border-top-color: currentColor;
            background: transparent;
            border-radius: 0;
        }

        .sm-clean a .sub-arrow::before {
            display: none;
        }

        /* Dropdown panels */
        .sm-clean ul {
            padding: 5px 0;
            border: 1px solid var(--nav-dropdown-border);
            border-radius: 5px;
            background: #ffffff;
            box-shadow: 0 5px 9px rgba(0, 0, 0, 0.2);
        }

            /* Dropdown links: fixed height, padding and font weight */
            .sm-clean ul li > a,
            .sm-clean ul li > a:visited,
            .sm-clean ul li > a:hover,
            .sm-clean ul li > a:focus,
            .sm-clean ul li > a:active,
            .sm-clean ul li > a.highlighted,
            .sm-clean ul li > a.current,
            .sm-clean ul li.current > a {
                padding: 10px 20px;
                border: 0;
                background: transparent;
                color: var(--nav-dropdown-text);
                font-size: 16px;
                font-weight: 300;
                line-height: 22px;
                box-sizing: border-box;
                text-decoration: none;
                transition: background-color 0.15s ease, color 0.15s ease;
            }

                .sm-clean ul li > a:hover,
                .sm-clean ul li > a:focus,
                .sm-clean ul li > a:active,
                .sm-clean ul li > a.highlighted {
                    background: var(--nav-dropdown-hover);
                }

                /* Current submenu page: stronger visual indicator, no size changes */
                .sm-clean ul li > a.current,
                .sm-clean ul li.current > a,
                .sm-clean ul li > a.current:hover,
                .sm-clean ul li > a.current:focus,
                .sm-clean ul li.current > a:hover,
                .sm-clean ul li.current > a:focus {
                    background: var(--nav-dropdown-active);
                    color: var(--nav-dropdown-text);
                    box-shadow: inset 4px 0 0 var(--nav-dropdown-text);
                }

                .sm-clean ul li > a.disabled,
                .sm-clean ul li > a.disabled:hover {
                    background: #ffffff;
                    color: #cccccc;
                }

                /* Arrows in nested dropdown menus */
                .sm-clean ul li > a.has-submenu {
                    padding-right: 28px;
                }

            .sm-clean ul a .sub-arrow {
                top: 50%;
                right: 8px;
                width: 0;
                height: 0;
                margin-top: -5px;
                border: 5px solid transparent;
                border-left-color: currentColor;
                background: transparent;
            }

        /* Dropdown pointer above first-level panels */
        .sm-clean > li > ul::before,
        .sm-clean > li > ul::after {
            content: '';
            position: absolute;
            top: -18px;
            left: 30px;
            width: 0;
            height: 0;
            overflow: hidden;
            border: 9px solid transparent;
            border-bottom-color: var(--nav-dropdown-border);
        }

        .sm-clean > li > ul::after {
            top: -16px;
            left: 31px;
            border-width: 8px;
            border-bottom-color: #ffffff;
        }

        /* SmartMenus scrolling controls */
        .sm-clean .scroll-up,
        .sm-clean .scroll-down {
            position: absolute;
            display: none;
            visibility: hidden;
            height: 20px;
            overflow: hidden;
            background: #ffffff;
        }

            .sm-clean .scroll-up:hover,
            .sm-clean .scroll-down:hover {
                background: #eeeeee;
            }

        .sm-clean .scroll-up-arrow,
        .sm-clean .scroll-down-arrow {
            position: absolute;
            top: 0;
            left: 50%;
            width: 0;
            height: 0;
            margin-left: -6px;
            overflow: hidden;
            border: 6px solid transparent;
            border-bottom-color: #555555;
        }

        .sm-clean .scroll-down-arrow {
            top: 8px;
            border-top-color: #555555;
            border-bottom-color: transparent;
        }

        .sm-clean .scroll-up:hover .scroll-up-arrow {
            border-bottom-color: var(--nav-dropdown-text);
        }

        .sm-clean .scroll-down:hover .scroll-down-arrow {
            border-top-color: var(--nav-dropdown-text);
        }

        /* RTL navigation support */
        .sm-clean.sm-rtl > li > a.has-submenu {
            padding-right: 12px;
            padding-left: 24px;
        }

        .sm-clean.sm-rtl > li > a .sub-arrow {
            right: auto;
            left: 12px;
        }

        .sm-clean.sm-rtl > li > ul::before {
            left: auto;
            right: 30px;
        }

        .sm-clean.sm-rtl > li > ul::after {
            left: auto;
            right: 31px;
        }

        .sm-clean.sm-rtl ul li > a.has-submenu {
            padding-right: 20px;
            padding-left: 28px;
        }

        .sm-clean.sm-rtl ul a .sub-arrow {
            right: auto;
            left: 8px;
            border-left-color: transparent;
            border-right-color: currentColor;
        }

        /* Vertical desktop menus */
        .sm-clean.sm-vertical {
            padding: 10px 0;
            border-radius: 5px;
        }

            .sm-clean.sm-vertical > li > a {
                padding: 10px 20px;
            }

                .sm-clean.sm-vertical > li > a:hover,
                .sm-clean.sm-vertical > li > a.highlighted {
                    background: #ffffff;
                }

            .sm-clean.sm-vertical > li > ul::before,
            .sm-clean.sm-vertical > li > ul::after {
                display: none;
            }
}

/* ------------------------------------------------------------
   Large desktop typography (1024px and wider)
   ------------------------------------------------------------ */

@media (min-width: 1024px) {
    .sm-clean > li > a,
    .sm-clean > li > a:visited,
    .sm-clean > li > a:hover,
    .sm-clean > li > a:focus,
    .sm-clean > li > a:active,
    .sm-clean > li > a.highlighted,
    .sm-clean > li > a.current,
    .sm-clean > li.current > a {
        font-size: 18px;
    }

    .sm-clean ul li > a,
    .sm-clean ul li > a:visited,
    .sm-clean ul li > a:hover,
    .sm-clean ul li > a:focus,
    .sm-clean ul li > a:active,
    .sm-clean ul li > a.highlighted,
    .sm-clean ul li > a.current,
    .sm-clean ul li.current > a {
        font-size: 18px;
    }
}

@media (min-width: 1280px) {
    .sm-clean > li > a,
    .sm-clean > li > a:visited,
    .sm-clean > li > a:hover,
    .sm-clean > li > a:focus,
    .sm-clean > li > a:active,
    .sm-clean > li > a.highlighted,
    .sm-clean > li > a.current,
    .sm-clean > li.current > a {
        font-size: 19px;
    }

    .sm-clean ul li > a,
    .sm-clean ul li > a:visited,
    .sm-clean ul li > a:hover,
    .sm-clean ul li > a:focus,
    .sm-clean ul li > a:active,
    .sm-clean ul li > a.highlighted,
    .sm-clean ul li > a.current,
    .sm-clean ul li.current > a {
        font-size: 18px;
    }

    .sm-clean > li:first-child > a::before {
        font-size: 22px;
        line-height: 24px;
    }
}

@media (min-width: 1400px) {
    .sm-clean > li > a,
    .sm-clean > li > a:visited,
    .sm-clean > li > a:hover,
    .sm-clean > li > a:focus,
    .sm-clean > li > a:active,
    .sm-clean > li > a.highlighted,
    .sm-clean > li > a.current,
    .sm-clean > li.current > a {
        font-size: 21px;
    }

    .sm-clean ul li > a,
    .sm-clean ul li > a:visited,
    .sm-clean ul li > a:hover,
    .sm-clean ul li > a:focus,
    .sm-clean ul li > a:active,
    .sm-clean ul li > a.highlighted,
    .sm-clean ul li > a.current,
    .sm-clean ul li.current > a {
        font-size: 18px;
    }
}
