/* Theme 25 — Desktop nav-toggle overrides.
   Loaded at min-width: 961px by the live website runtime via <link media>.
   The @media wrapper is intentionally absent — the <link media> attribute
   already gates this file to 961px+, making an inner query redundant.
   When JS adds body.nav-overflow (nav overlaps the logo), these rules
   switch from horizontal nav to the mobile drawer at desktop widths.
   Includes full visual parity with the mobile opened drawer UI. */

#notification-bottom > a {
    pointer-events: visible;
}

body.nav-overflow #container #navigation_can {
    bottom: 0 !important;
    display: block !important;
    height: 100% !important;
    left: 0 !important;
    margin: 0 auto !important;
    max-width: 55rem !important;
    pointer-events: auto !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1001 !important;
}

body.nav-overflow #container #navigation {
    align-items: stretch;
    background: #f3f4f4;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    box-shadow: none;
    flex-direction: column !important;
    height: 100dvh !important;
    max-width: 400px !important;
    padding: 0 !important;
    position: fixed !important;
    right: -400px !important;
    top: 0 !important;
    transition: right 0.3s ease;
    width: 100% !important;
    z-index: 1003 !important;
}

body.nav-overflow #container #navigation.opened {
    background: #f3f4f4;
    opacity: 1 !important;
    right: 0 !important;
    visibility: visible !important;
}

body.nav-overflow #container #navigation::before,
body.nav-overflow #container #navigation.opened::before {
    content: none;
    display: none;
    opacity: 0;
    visibility: hidden;
}

body.nav-overflow #container #navigation.closed {
    opacity: 0 !important;
    visibility: hidden !important;
}

body.nav-overflow #container #navigation_can #nav-toggle {
    display: block !important;
    pointer-events: auto !important;
    position: fixed !important;
    right: max(1.25rem, calc((100vw - 55rem) / 2)) !important;
    top: calc(var(--sticky-top, 0px) + 1.15rem) !important;
    visibility: visible !important;
    z-index: 1004 !important;
}

@media (min-width: 80rem) {
    body.nav-overflow #container #navigation_can {
        max-width: 75rem !important;
    }

    body.nav-overflow #container #navigation_can #nav-toggle {
        right: max(1.25rem, calc((100vw - 75rem) / 2)) !important;
    }
}

body.nav-overflow #container #navigation.opened + #nav-toggle {
    display: block !important;
    position: fixed !important;
}

body.nav-overflow #container #navigation > ul#nav {
    flex: 1 1 auto !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0;
}

body.nav-overflow #container #nav > li,
body.nav-overflow #container #nav > .nav_placeholder,
body.nav-overflow #container #nav > .nav_placeholder > ul > li {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    opacity: 1 !important;
    padding: 0 !important;
    position: relative !important;
    width: 100% !important;
}

body.nav-overflow #container #nav > .nav_placeholder {
    position: static !important;
}

body.nav-overflow #container #nav > .nav_placeholder > ul {
    background: #fff;
    box-shadow: none;
    display: block !important;
    left: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
    position: static !important;
    right: auto !important;
    width: 100% !important;
    z-index: auto !important;
}

body.nav-overflow #container #nav > .nav_placeholder > ul:before,
body.nav-overflow #container #nav > .nav_placeholder > ul:after {
    content: none;
    display: none;
}

body.nav-overflow #container #nav > .nav_placeholder > ul li {
    background: transparent;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    text-align: left;
    width: 100% !important;
}

body.nav-overflow #container #navigation.opened #nav {
    background: #fff;
    list-style: none;
    padding: 0 !important;
}

body.nav-overflow #container #navigation.opened #nav > li,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li {
    border-left: 0;
    border-top: 1px solid #d5d9dc;
    margin: 0 !important;
    padding: 0 !important;
    padding-left: 0;
}

body.nav-overflow #container #navigation.opened #nav > li:first-child,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li:first-child {
    border-top: 0;
}

body.nav-overflow #container #navigation.opened #nav > li > a,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > a {
    align-items: center;
    background: none;
    border-radius: 0;
    color: #1f2328;
    display: flex !important;
    font-size: 0.92rem;
    font-weight: 650;
    justify-content: space-between;
    letter-spacing: 0.09em;
    line-height: 1.3;
    padding: 0.92rem 1.35rem;
    position: relative;
    text-decoration: none;
    text-shadow: none;
    text-transform: uppercase;
    transition: background 0.15s ease, color 0.15s ease;
}

body.nav-overflow #container #navigation.opened #nav li,
body.nav-overflow #container #navigation.opened #nav ul {
    list-style: none;
}

body.nav-overflow #container #navigation.opened #nav > li + li::before,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li + li::before {
    content: none;
    display: none;
}

body.nav-overflow #container #navigation.opened #nav > li.active > a,
body.nav-overflow #container #navigation.opened #nav > li > a.active,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li.active > a,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > a.active {
    background: #e3eaec;
    color: #4f8088;
}

body.nav-overflow #container #navigation.opened #nav > li > ul,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > ul {
    background: #eaeff0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: block !important;
    margin: 0 !important;
    min-width: 0 !important;
    opacity: 1 !important;
    padding: 0 !important;
    position: static !important;
    visibility: visible !important;
}

body.nav-overflow #container #navigation.opened #nav > li > ul > li,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > ul > li {
    border-left: 3px solid #c8ddde;
    margin: 0 0 0 1.5rem !important;
    padding: 0 !important;
    width: 100% !important;
}

body.nav-overflow #container #navigation.opened #nav > li > ul > li.active,
body.nav-overflow #container #navigation.opened #nav > li > ul > li:has(> a.active),
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > ul > li.active,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > ul > li:has(> a.active) {
    border-left-color: #4f8088;
}

body.nav-overflow #container #navigation.opened #nav > li > ul > li > a,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > ul > li > a {
    border-top: 1px solid #d7dbde;
    color: #4f8088;
    display: block !important;
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1.3;
    padding: 0.64rem 1.35rem !important;
    text-transform: uppercase;
    white-space: normal !important;
}

body.nav-overflow #container #navigation.opened #nav > li > ul > li:first-child > a,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > ul > li:first-child > a {
    border-top: 0;
}

body.nav-overflow #container #navigation.opened #nav > li > ul > li.active > a,
body.nav-overflow #container #navigation.opened #nav > li > ul > li > a.active,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > ul > li.active > a,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > ul > li > a.active {
    background: #dce5e6;
    font-weight: 800;
}

body.nav-overflow #container #navigation.opened #nav > li > a.nav_drop::after,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > a.nav_drop::after {
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    content: "";
    display: inline-block;
    flex-shrink: 0;
    height: 8px;
    margin-left: auto;
    opacity: 0.5;
    transform: rotate(45deg);
    width: 8px;
}

body.nav-overflow #container #navigation.opened #header_contact,
body.nav-overflow #container #navigation.opened .notification-contact {
    display: none !important;
}

body.nav-overflow #container #navigation.opened #nav li.nav-contact-in-footer {
    display: none !important;
}

body.nav-overflow #container #navigation.opened #nav a.btn,
body.nav-overflow #container #navigation.opened #nav .btn {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #202226;
    display: flex;
    justify-content: space-between;
    padding: 1.05rem 1.5rem;
    text-transform: uppercase;
}

body.nav-overflow #container #navigation .nav-drawer-header,
body.nav-overflow #container #navigation .nav-drawer-footer {
    display: block !important;
}

body.nav-overflow #container #navigation .nav-drawer-header {
    border-bottom: 1px solid #d5d9dc;
    padding: 1.25rem 1.5rem 1rem;
}

body.nav-overflow #container #navigation .nav-drawer-header .company-branding {
    display: block;
    padding-right: 2rem;
}

body.nav-overflow #container #navigation.opened .header_logo img {
    display: none !important;
}

body.nav-overflow #container #navigation .nav-drawer-header .company-name {
    color: #1f2328;
    display: block;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.3;
    text-transform: none;
}

body.nav-overflow #container #navigation .nav-drawer-header .company-tagline {
    color: #4f8088;
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    margin-top: 0.15rem;
    text-transform: uppercase;
}

body.nav-overflow #container #navigation .nav-drawer-footer {
    border-top: 1px solid #d5d9dc;
    margin-top: auto;
    padding: 1.25rem 1.5rem 1.5rem;
    width: 100%;
}

body.nav-overflow #container #navigation .nav-drawer-phone {
    margin-bottom: 0.6rem;
}

body.nav-overflow #container #navigation .nav-drawer-phone .phone-call {
    align-items: center;
    border: 2px solid #4f8088;
    border-radius: 4px;
    color: #4f8088;
    display: flex;
    font-size: 0.9rem;
    font-weight: 600;
    gap: 0.5rem;
    justify-content: center;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    text-decoration: none;
    width: 100%;
}

body.nav-overflow #container #navigation .nav-drawer-phone .phone-call::before {
    align-items: center;
    content: "\f4b9";
    display: flex;
    flex-shrink: 0;
    font-family: "Ionicons";
    font-size: 21px;
    height: 21px;
    justify-content: center;
    width: 21px;
}

body.nav-overflow #container #navigation.opened .nav-drawer-contact a {
    background: #4f8088;
    border-radius: 5px;
    color: #fff;
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    padding: 0.9rem 1rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 100%;
}

body.nav-overflow #container #navigation.opened + #nav-toggle {
    background: #e4e6e8;
    border: 1px solid #d1d5d8;
    border-radius: 999px;
    height: 32px !important;
    margin-top: 0;
    right: 1rem !important;
    top: 1.2rem !important;
    width: 32px !important;
}

body.nav-overflow #container #navigation.opened + #nav-toggle:before,
body.nav-overflow #container #navigation.opened + #nav-toggle:after {
    background: #666b72;
    height: 2px;
    right: 7px;
    width: 16px;
}

/* ── Hover feedback on top-level drawer items (desktop mice) ── */
body.nav-overflow #container #navigation.opened #nav > li > a:hover,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > a:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* Keep dropdown chevrons visually static on hover/focus */
body.nav-overflow #container #navigation.opened #nav > li > a.nav_drop:hover::after,
body.nav-overflow #container #navigation.opened #nav > li > a.nav_drop:focus-visible::after,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > a.nav_drop:hover::after,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > a.nav_drop:focus-visible::after {
    content: "";
    opacity: 0.5;
    transform: rotate(45deg);
    transition: none;
}

/* ── Active / tap feedback on top-level items ── */
body.nav-overflow #container #navigation.opened #nav > li > a:active,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > a:active {
    background: rgba(0, 0, 0, 0.07);
}

/* ── Hover + active feedback on sub-level items ── */
body.nav-overflow #container #navigation.opened #nav > li > ul > li > a:hover,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > ul > li > a:hover {
    background: #d8e4e5;
    color: #3d6870;
}

body.nav-overflow #container #navigation.opened #nav > li > ul > li > a:active,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > ul > li > a:active {
    background: #d0dbdc;
}

/* ── Drawer footer interactive states ── */
body.nav-overflow #container #navigation .nav-drawer-phone .phone-call:hover {
    background: rgba(79, 128, 136, 0.08);
}

body.nav-overflow #container #navigation .nav-drawer-phone .phone-call:active {
    background: rgba(79, 128, 136, 0.15);
}

body.nav-overflow #container #navigation.opened .nav-drawer-contact a:hover {
    background: #3a6068;
}

body.nav-overflow #container #navigation.opened .nav-drawer-contact a:active {
    background: #2f4e54;
}

/* ── Neutralise desktop animated underline ::after on top-level links ── */
body.nav-overflow #container #nav > li > a::after,
body.nav-overflow #container #nav > .nav_placeholder > ul > li > a::after,
body.nav-overflow #container #nav > .nav_placeholder > ul > li.nav_placeholder > a:before {
    content: none;
    display: none;
}

/* ── Neutralise desktop ::before hover-underline (60–80 rem range) ── */
body.nav-overflow #container #nav > li > a:before,
body.nav-overflow #container #nav > li:hover > a:before,
body.nav-overflow #container #nav > .nav_placeholder > ul > li > a:before,
body.nav-overflow #container #nav > .nav_placeholder > ul > li:hover > a:before {
    display: none;
    width: 0;
}

/* ── Neutralise desktop hover background on top-level links ── */
body.nav-overflow #container #nav > li > a:hover,
body.nav-overflow #container #nav > .nav_placeholder > ul > li > a:hover {
    background: transparent;
}

/* ── Neutralise desktop dropdown hover background on sub-links ── */
body.nav-overflow #container #nav > li > ul > li > a:hover,
body.nav-overflow #container #nav > .nav_placeholder > ul > li > ul > li > a:hover {
    background: transparent;
    color: inherit;
}
