/* ===========================
   CUSTOM NAV MENU — v4
   v2 look + v3 opening motion + new submenu hover (accent dash)
   Colors: --brand-* tokens in style.css
   =========================== */

.custom-nav-wrap {
    display: flex !important;
    align-items: center !important;
}

/* Square corners everywhere */
.custom-nav-menu,
.custom-nav-menu *,
.custom-nav-menu *::before,
.custom-nav-menu *::after {
    border-radius: 0 !important;
}

/* Top level list */
.custom-nav-menu {
    display: flex !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 4px !important;
}

/* All list items */
.custom-nav-menu li {
    position: relative !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* All links (base) */
.custom-nav-menu a {
    font-family: inherit !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

/* ---------- TOP LEVEL ---------- */

.custom-nav-menu > li > a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    letter-spacing: 0.08em !important;
    text-transform: capitalize !important;
    color: #111111 !important;
    transition: color 0.25s ease !important;
}

/* Arrow ↗ slides in after the label on hover.
   Sits in the link's own right padding, so nothing in the menu shifts.
   Dropdown parents keep their chevron instead. */
.custom-nav-menu > li:not(.menu-item-has-children) > a::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    right: 2px !important;
    width: 12px !important;
    height: 12px !important;
    margin-top: -6px !important;
    background: var(--brand-accent) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat !important;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat !important;
    opacity: 0 !important;
    transform: translate(-6px, 6px) !important;
    transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.65, 0, 0.35, 1) !important;
    pointer-events: none !important;
}

.custom-nav-menu > li:not(.menu-item-has-children):is(:hover, :focus-within) > a::before {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}

/* Hover colour */
.custom-nav-menu > li:is(:hover, :focus-within) > a {
    color: #000000 !important;
}

/* Current page — accent colour */
.custom-nav-menu > .current-menu-item > a,
.custom-nav-menu > .current-menu-ancestor > a {
    color: var(--brand-accent) !important;
}

@media (prefers-reduced-motion: reduce) {
    .custom-nav-menu > li > a::before {
        transition: opacity 0.01ms !important;
        transform: none !important;
    }
}

/* ---------- DROPDOWNS (all levels) ---------- */

.custom-nav-menu .sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 240px !important;
    margin: 0 !important;
    padding: 10px 0 6px !important;
    list-style: none !important;
    background: transparent !important;
    border: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: visibility 0s linear 0.3s !important;
    z-index: 999 !important;
}

/* Panel — drops down from the menu item */
.custom-nav-menu .sub-menu::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    background: #ffffff !important;
    border: 1px solid #ECECEC !important;
    border-top: 3px solid var(--brand-accent) !important;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.18) !important;
    transform: scaleY(0) !important;
    transform-origin: top center !important;
    transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1) !important;
}

/* Items fade in once the panel has dropped */
.custom-nav-menu .sub-menu > li {
    opacity: 0 !important;
    transform: translateY(-6px) !important;
    transition: opacity 0.15s ease, transform 0.15s ease !important;
}

/* Open on hover + keyboard focus */
.custom-nav-menu li:hover > .sub-menu,
.custom-nav-menu li:focus-within > .sub-menu {
    visibility: visible !important;
    pointer-events: auto !important;
    transition-delay: 0s !important;
}

.custom-nav-menu li:hover > .sub-menu::before,
.custom-nav-menu li:focus-within > .sub-menu::before {
    transform: scaleY(1) !important;
}

.custom-nav-menu li:hover > .sub-menu > li,
.custom-nav-menu li:focus-within > .sub-menu > li {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 0.25s ease 0.12s, transform 0.25s ease 0.12s !important;
}

/* 3rd level — opens to the right, wipes in sideways */
.custom-nav-menu .sub-menu .sub-menu {
    top: -10px !important;
    left: 100% !important;
}

.custom-nav-menu .sub-menu .sub-menu::before {
    transform: scaleX(0) !important;
    transform-origin: left center !important;
}

.custom-nav-menu .sub-menu li:hover > .sub-menu::before,
.custom-nav-menu .sub-menu li:focus-within > .sub-menu::before {
    transform: scaleX(1) !important;
}

/* Dropdown links */
.custom-nav-menu .sub-menu a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 11px 28px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #4d4d4d !important;
    background: transparent !important;
    border-bottom: 1px solid #F2F2F2 !important;
    transition: color 0.3s ease,
                padding 0.35s cubic-bezier(0.65, 0, 0.35, 1) !important;
}

.custom-nav-menu .sub-menu li:last-child > a {
    border-bottom: none !important;
}

/* Accent dash — draws in before the text */
.custom-nav-menu .sub-menu a::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 20px !important;
    width: 14px !important;
    height: 2px !important;
    margin-top: -1px !important;
    background: var(--brand-accent) !important;
    transform: scaleX(0) !important;
    transform-origin: left center !important;
    transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1) !important;
}

/* Hover / focus / active — text darkens, dash draws in, text slides over
   (padding total stays the same, so the panel never changes width) */
.custom-nav-menu .sub-menu li:hover > a,
.custom-nav-menu .sub-menu li:focus-within > a,
.custom-nav-menu .sub-menu .current-menu-item > a,
.custom-nav-menu .sub-menu .current-menu-ancestor > a {
    color: #000000 !important;
    padding: 11px 14px 11px 42px !important;
}

.custom-nav-menu .sub-menu li:hover > a::before,
.custom-nav-menu .sub-menu li:focus-within > a::before,
.custom-nav-menu .sub-menu .current-menu-item > a::before,
.custom-nav-menu .sub-menu .current-menu-ancestor > a::before {
    transform: scaleX(1) !important;
}

/* ---------- RIGHT-EDGE FLIP ----------
   Rightmost item (or any item given the "submenu-left" CSS class
   in Appearance > Menus) — dropdowns open leftwards */

.custom-nav-menu > li:is(:last-child, .submenu-left) > .sub-menu {
    left: auto !important;
    right: 0 !important;
}

.custom-nav-menu > li:is(:last-child, .submenu-left) .sub-menu .sub-menu {
    left: auto !important;
    right: 100% !important;
}

.custom-nav-menu > li:is(:last-child, .submenu-left) .sub-menu .sub-menu::before {
    transform-origin: right center !important;
}

/* ---------- ARROWS ---------- */

.custom-nav-menu .menu-item-has-children > a::after {
    content: '' !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    width: 6px !important;
    height: 6px !important;
    margin-left: 8px !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: translateY(-2px) rotate(45deg) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Top level: flip up when open */
.custom-nav-menu > .menu-item-has-children:hover > a::after,
.custom-nav-menu > .menu-item-has-children:focus-within > a::after {
    transform: translateY(2px) rotate(-135deg) !important;
}

/* Sub levels: point right */
.custom-nav-menu .sub-menu .menu-item-has-children > a::after {
    transform: rotate(-45deg) !important;
}

/* Flipped dropdowns: point left */
.custom-nav-menu > li:is(:last-child, .submenu-left) .sub-menu .menu-item-has-children > a::after {
    transform: rotate(135deg) !important;
}

/* ---------- ACCESSIBILITY ---------- */

.custom-nav-menu a:focus-visible {
    outline: 2px solid var(--brand-accent) !important;
    outline-offset: -2px !important;
}

@media (prefers-reduced-motion: reduce) {
    .custom-nav-menu *,
    .custom-nav-menu *::before,
    .custom-nav-menu *::after {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
}