/* =========================================================================
Primary navigation (theme-native, replaces the Max Mega Menu front end).
Plain CSS kept in .scss form for consistency with the rest of the theme;
css/nav.css is the shipped copy and must stay identical.

Design values are ported from the old #mega-menu-wrap-primary rules in
consolidated.scss so the menu looks the same. Behavioural differences:
- the panel is positioned/sized purely by CSS (absolute, full header
width); nothing measures or animates width, so no reflow on hover
- a closing panel gets pointer-events:none at once, and visibility flips
after the fade, so it can never be hovered while fading out
========================================================================= */

/* ---- shared ---------------------------------------------------------- */
.aa-nav,
.aa-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.aa-nav a {
    text-decoration: none;
}

.aa-nav .aa-nav__caret,
.aa-nav .aa-nav__mcaret {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    vertical-align: middle;
    transition: transform .3s ease;
}

/* ---- desktop --------------------------------------------------------- */
/* The panel positions against .adrian_header (full width). The header's
   .site_full container is position:relative and capped at 1920px, so on
   very wide screens it would otherwise become the panel's containing block
   and the panel would stop short of the viewport edges. Nothing in the
   desktop bar relies on .site_full being positioned. */
.adrian_header .aa_desktop_menu > .site_full {
    position: static;
}

.aa-nav--desktop {
    position: static; /* the panel positions against .adrian_header */
    text-align: left;
}

.aa-nav .aa-nav__list {
    display: flex;
    align-items: center;
    justify-content: center;
}

.aa-nav .aa-nav__item {
    display: block;
    position: static;
}

.aa-nav .aa-nav__link {
    display: block;
    position: relative;
    padding: 15px 20px;
    color: var(--color-text-black);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    transition: background-color .3s ease, color .3s ease;
}

.aa-nav .aa-nav__link:hover,
.aa-nav .aa-nav__item.is-open > .aa-nav__link {
    background: linear-gradient(to top, var(--color-text-white) -50%, #ffffff 100%);
    color: var(--color-text-black);
}

.aa-nav .aa-nav__item.is-current > .aa-nav__link,
.aa-nav .aa-nav__item.is-ancestor > .aa-nav__link {
    color: var(--color-text-black);
    border-bottom: 1px solid var(--color-text-black);
}

.aa-nav .aa-nav__caret {
    margin-left: 8px;
}

.aa-nav .aa-nav__item.is-open > .aa-nav__link .aa-nav__caret {
    transform: rotate(180deg);
}

/* Panel: full header width, below the bar. Hidden state is inert. */.aa-nav .aa-nav__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--color-text-white);
    z-index: 9999;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}

.aa-nav .aa-nav__item.is-open > .aa-nav__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear 0s;
}

.aa-nav .aa-nav__panel-inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: stretch;
}

.aa-nav .aa-nav__col {
    grid-column: span var(--span, 12);
    padding: 5px;
    margin-top: var(--space-md);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.aa-nav .aa-nav__item--flyout .aa-nav__col {
    grid-column: span 3;
}

/* Widget column: black band that runs on to the right edge of the screen */.aa-nav .aa-nav__col--feature {
    position: relative;
    background: var(--color-text-black);
    color: var(--color-text-white);
    margin-top: 0;
    padding: 0;
}

.aa-nav .aa-nav__col--feature::after {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 100vw;
    height: 100%;
    background: var(--color-text-black);
}

.aa-nav .aa-nav__widgets {
    display: flex;
    flex-direction: row;
    height: 100%;
}

.aa-nav .aa-nav__widget {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
}

/* Link columns */.aa-nav .aa-nav__links {
    display: flex;
    flex-direction: column;
}

.aa-nav .aa-nav__links-item {
    display: flex;
    flex-direction: column;
}

.aa-nav .aa-nav__sublink {
    display: block;
    padding: 8px 0;
    font-size: var(--font-size-lg);
    font-weight: var(--weight-regular);
    line-height: 20px;
    color: var(--color-text-black);
}

.aa-nav .aa-nav__sublink:hover {
    color: var(--color-text-black-light-50);
    text-decoration: underline;
}

.aa-nav .aa-nav__sublinks {
    display: flex;
    flex-direction: column;
}

.aa-nav .aa-nav__subsublink {
    display: block;
    padding: 8px 0;
    font-size: var(--font-size-base);
    line-height: 20px;
    color: var(--color-text-black-light-50);
}

.aa-nav .aa-nav__subsublink:hover {
    color: var(--color-text-black);
    text-decoration: underline;
}

.aa-nav .aa-sale-price a,
.aa-nav .aa-sale-price a strong {
    color: var(--color-sale-red) !important;
    text-decoration: underline;
}

/* Makers A–Z panel: lazy-loaded, dense columns, scrolls inside the panel */
.aa-nav .aa-nav__panel--makers {
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.aa-nav .aa-nav__panel--makers .aa-nav__panel-inner {
    display: block;
}

.aa-nav .aa-nav__loading {
    padding: var(--space-lg) 0;
    color: var(--color-text-black-light-50);
    font-size: var(--font-size-base);
}

.aa-nav .aa-nav__makers {
    padding: 0 0 var(--space-lg);
}

.aa-nav .aa-nav__makers-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 24px;
    padding: var(--space-md) 0 var(--space-sm);
    background: var(--color-text-white);
    border-bottom: 1px solid rgba(14, 17, 17, .12);
}

.aa-nav .aa-nav__makers-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    color: var(--color-text-black);
}

.aa-nav .aa-nav__makers-letters {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.aa-nav .aa-nav__makers-letter-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 2px;
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    line-height: 26px;
    color: var(--color-text-black);
    cursor: pointer;
    text-align: center;
}

.aa-nav .aa-nav__makers-letter-btn:hover,
.aa-nav .aa-nav__makers-letter-btn:focus-visible {
    border-color: var(--color-text-black);
    outline: none;
}

.aa-nav .aa-nav__makers-all {
    margin-left: auto;
    font-size: var(--font-size-base);
    color: var(--color-text-black);
    text-decoration: underline;
}

.aa-nav .aa-nav__makers-all:hover {
    color: var(--color-text-black-light-50);
}

.aa-nav .aa-nav__makers-list {
    columns: 6 200px;
    column-gap: 30px;
    padding-top: var(--space-md);
}

.aa-nav .aa-nav__makers-group {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    padding-bottom: var(--space-md);
}

.aa-nav .aa-nav__makers-letter {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    line-height: 1;
    color: var(--color-text-black);
    padding-bottom: 6px;
}

.aa-nav .aa-nav__makers-links {
    display: block;
}

.aa-nav .aa-nav__makers-links li {
    display: block;
}

.aa-nav .aa-nav__makers-links .aa-nav__subsublink {
    padding: 3px 0;
    line-height: 1.3;
}

.aa-nav .aa-nav__item--makers.is-open > .aa-nav__panel {
    pointer-events: auto;
}

/* Widget cards (output of the [AA_menu_*] shortcodes) */
.aa-nav .menu_product_wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.aa-nav .menu_product_wrapper > a {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.aa-nav .menu_product_wrapper .product_image {
    overflow: hidden;
}

.aa-nav .menu_product_wrapper .product_image img {
    display: block;
    transform: scale(1);
    transition: transform .5s ease 0s;
}

.aa-nav .menu_product_wrapper a:hover .product_image img {
    transform: scale(1.05);
}

.aa-nav .aa-nav__col--feature .woocommerce-loop-product__title.uppercase {
    color: var(--color-text-white);
}

/* Product card (Shop): image left, details right */
.aa-nav .aa-product-card > a.product_link {
    flex-direction: row;
}

.aa-nav .aa-product-card .product_image img {
    height: 100%;
}

.aa-nav .aa-product-card .product_details {
    position: relative;
    padding: var(--space-lg);
    color: var(--color-text-white);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.aa-nav .aa-product-card .product_details .maker_name {
    font-size: var(--font-size-base);
    color: var(--color-text-black-lighter);
}

.aa-nav .aa-product-card .product_details p {
    margin-left: 0;
    margin-right: 0;
    color: var(--color-text-white);
    text-align: left;
    max-width: 350px;
    font-size: var(--font-size-lg);
    text-wrap: balance;
    line-height: normal;
}

.aa-nav .aa-product-card .product_details .btn {
    border: 1px solid var(--color-text-white);
    color: var(--color-text-white);
}

.aa-nav .aa-product-card a.product_link:hover .btn {
    color: var(--color-text-black);
}

.aa-nav .aa-product-card a.product_link:hover .btn:after {
    height: 100%;
    background: var(--color-text-white);
}

@media (max-width: 1250px) {
    .aa-nav .aa-product-card > a.product_link {
        flex-direction: column;
    }
}

/* Journal block: three posts side by side */
.aa-nav .menu_product_wrapper.journal_block {
    flex-direction: row;
}

.aa-nav .menu_product_wrapper.journal_block > a {
    flex: 1 1 0;
}

.aa-nav .menu_product_wrapper.journal_block .category {
    color: var(--color-text-black-lighter);
    font-size: var(--font-size-base);
    font-weight: var(--weight-regular);
    padding: var(--space-sm) 0 0;
    margin: 0 auto;
}

.aa-nav .menu_product_wrapper.journal_block .woocommerce-loop-product__title {
    padding-top: 0;
}

@media all and (min-width: 1101px) {.home .aa-nav .aa-nav__link,
.home .aa-nav .aa-nav__link:hover {
    color: var(--color-text-white);
}

.home-logo .aa-nav .aa-nav__link,
.home-logo .aa-nav .aa-nav__link:hover {
    color: var(--color-text-black);
}

.aa-nav--mobile {
    display: none;
}
}

@media screen and (max-height: 750px) {.aa-nav .aa-nav__sublink,
.aa-nav .aa-nav__subsublink {
    padding: 5px 0;
}
}

/* ---- mobile (matches the theme's 1100px header breakpoint) ----------- */
@media all and (max-width: 1100px) {
    .aa-nav--desktop {
        display: none;
    }

    .aa-nav--mobile {
        display: block;
        height: 22px;
    }

    .aa-nav .aa-nav__toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 22px;
        padding: 0;
        margin: 0;
        background: transparent;
        border: 0;
        outline: 0;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    .aa-nav .aa-nav__burger,
    .aa-nav .aa-nav__burger::before,
    .aa-nav .aa-nav__burger::after {
        display: block;
        width: 24px;
        height: 3px;
        background-color: var(--color-text-black);
        border-radius: 2px;
        transition: transform .3s ease, background-color .3s ease;
    }

    .aa-nav .aa-nav__burger {
        position: relative;
    }

    .aa-nav .aa-nav__burger::before,
    .aa-nav .aa-nav__burger::after {
        content: "";
        position: absolute;
        left: 0;
    }

    .aa-nav .aa-nav__burger::before {
        top: -8px;
    }

    .aa-nav .aa-nav__burger::after {
        top: 8px;
    }

    .home .aa-nav .aa-nav__burger,
    .home .aa-nav .aa-nav__burger::before,
    .home .aa-nav .aa-nav__burger::after {
        background-color: #fff;
    }

    .home-logo .aa-nav .aa-nav__burger,
    .home-logo .aa-nav .aa-nav__burger::before,
    .home-logo .aa-nav .aa-nav__burger::after,
    .home.aa-nav-open .aa-nav .aa-nav__burger,
    .home.aa-nav-open .aa-nav .aa-nav__burger::before,
    .home.aa-nav-open .aa-nav .aa-nav__burger::after {
        background-color: var(--color-text-black);
    }

    body .aa-nav.aa-nav--mobile.is-open .aa-nav__burger {
        background-color: transparent;
    }

    body .aa-nav.aa-nav--mobile.is-open .aa-nav__burger::before {
        top: 0;
        transform: rotate(45deg);
    }

    body .aa-nav.aa-nav--mobile.is-open .aa-nav__burger::after {
        top: 0;
        transform: rotate(-45deg);
    }

    .aa-nav .aa-nav__drawer {
        position: fixed;
        top: 82px;
        left: 0;
        width: 100%;
        height: calc(100vh - 82px);
        height: calc(100dvh - 82px);
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        z-index: 9999;
        padding: 0 15px 30px;
        text-align: left;
    }

    .aa-nav .aa-nav__drawer[hidden] {
        display: none;
    }

    /* the theme makes every header li inline-block; drawer rows are stacked */
    .aa-nav .aa-nav__mlist,
    .aa-nav .aa-nav__mlinks,
    .aa-nav .aa-nav__mitem {
        display: block;
        width: 100%;
    }

    .aa-nav .aa-nav__mrow {
        display: block;
        position: relative;
    }

    .aa-nav .aa-nav__mlink {
        display: block;
        padding: var(--space-sm) 44px var(--space-sm) 0;
        font-size: var(--font-size-lg);
        font-weight: var(--weight-medium);
        line-height: 20px;
        color: var(--color-text-black);
        border-bottom: 1px solid #e1e1e1;
    }

    .aa-nav .aa-nav__mexpand {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 15px;
        margin: 0;
        background: transparent;
        border: 0;
        cursor: pointer;
        color: var(--color-text-black);
        -webkit-appearance: none;
        appearance: none;
    }

    .aa-nav .aa-nav__mcaret {
        border-left-width: 7px;
        border-right-width: 7px;
        border-top-width: 8px;
    }

    .aa-nav .aa-nav__mexpand[aria-expanded="true"] .aa-nav__mcaret {
        transform: rotate(180deg);
    }

    .aa-nav .aa-nav__mpanel[hidden] {
        display: none;
    }

    .aa-nav .aa-nav__mlinks {
        padding-left: var(--space-sm);
    }

    .aa-nav .aa-nav__mlink--toggle {
        width: 100%;
        text-align: left;
        background: transparent;
        border: 0;
        border-radius: 0;
        font-family: var(--font-family-body);
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    .aa-nav .aa-nav__mlinks--makers > .aa-nav__mitem > .aa-nav__mrow > .aa-nav__mlink--toggle {
        font-family: var(--font-family-heading);
        font-size: var(--font-size-md);
        border-bottom: 1px solid #e1e1e1;
    }

    .aa-nav .aa-nav__mpanel .aa-nav__loading {
        padding: var(--space-sm) 0;
    }

    .aa-nav .aa-nav__mlinks .aa-nav__mlink {
        font-size: var(--font-size-base);
        font-weight: var(--weight-regular);
        line-height: 20px;
        padding: var(--space-sm) 44px var(--space-sm) 0;
        border-bottom: 0;
    }

    .aa-nav .aa-nav__mlinks .aa-nav__mlinks {
        background: var(--color-text-white);
        padding-left: var(--space-sm);
    }

    .aa-nav .aa-nav__mlinks .aa-nav__mlinks .aa-nav__mlink {
        color: var(--color-text-black-light-50);
    }

    .aa-nav .aa-nav__mextra {
        padding-top: var(--space-md);
    }

    .aa-nav .aa-nav__mextra ul li {
        display: block;
        padding: 6px 0;
    }

    .aa-nav .aa-nav__mextra ul li a img {
        width: 18px;
        margin-right: 8px;
        vertical-align: middle;
    }

    /* Header state while the drawer is open (ported from the old rules) */
    body.aa-nav-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }

    .home.aa-nav-open .adrian_header {
        background-color: #fff;
    }

    .home.aa-nav-open .adrian_header li.basket .header-cart-count {
        background-color: var(--color-text-black);
        color: var(--color-text-white);
    }

    .home.aa-nav-open .adrian_header li.basket svg {
        stroke: var(--color-text-black);
    }

    .home.aa-nav-open .aalogo a {
        background-image: url(../img/vectorpaint.svg);
        background-repeat: no-repeat;
        background-size: contain;
    }

    .home.aa-nav-open .aalogo img {
        opacity: 0;
    }
}