
/* ------------------------------
 * Navigation Header Style
 * ------------------------------ */

nav.is-style-base-nav-header {
    color: var(--wp--preset--color--base);
    background-color: var(--wp--preset--color--primary);
}

/* -------------------- main nav links -------------------- */

/* active (current) menu item */

nav.is-style-primary-nav-header .current-menu-item,
nav.is-style-base-nav-header .current-menu-item {
    padding: 15px 20px 13px 20px;
    color: var(--wp--preset--color--secondary);
    border-bottom: 2px solid var(--wp--preset--color--secondary);
}

/* inactive menu items */

nav.is-style-primary-nav-header .wp-block-navigation-item:not(.current-menu-item),
nav.is-style-base-nav-header .wp-block-navigation-item:not(.current-menu-item) {
    padding: 15px 20px;
}

nav.is-style-primary-nav-header .wp-block-navigation-item:not(.current-menu-item) {
    color: var(--wp--preset--color--primary);
}

nav.is-style-base-nav-header .wp-block-navigation__responsive-dialog:not([aria-label="Menu"]) > .wp-block-navigation-item:not(.current-menu-item):not(.wp-block-navigation__submenu-container) {
    color: var(--wp--preset--color--base) !important;
}

/* hover effect for inactive items */

nav.is-style-primary-nav-header .wp-block-navigation-item:not(.current-menu-item):hover,
nav.is-style-base-nav-header .wp-block-navigation__submenu-container
    .wp-block-navigation-item:not(.current-menu-item):hover {
        background-color: color-mix(in srgb, var(--wp--preset--color--secondary) 5%, transparent);
}

nav.is-style-base-nav-header .wp-block-navigation-item:not(.current-menu-item):hover {
    background-color: color-mix(in srgb, var(--wp--preset--color--secondary) 15%, transparent);
}

/* change text and icon color on hover */

nav.is-style-primary-nav-header .wp-block-navigation-item:not(.current-menu-item):hover > a,
nav.is-style-primary-nav-header .wp-block-navigation-item:not(.current-menu-item):hover .wp-block-navigation__submenu-icon svg,
nav.is-style-base-nav-header .wp-block-navigation-item:not(.current-menu-item):hover > a,
nav.is-style-base-nav-header .wp-block-navigation-item:not(.current-menu-item):hover .wp-block-navigation__submenu-icon svg {
    color: var(--wp--preset--color--secondary);
}

/* remove padding from logo and title inside mobile menu */

nav.is-style-primary-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"]
    .wp-block-navigation__container > .wp-block-navigation-item:has(.custom-logo-link),
nav.is-style-primary-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"]
    .wp-block-navigation__container > .wp-block-navigation-item:has(.wp-block-site-title),
nav.is-style-base-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"]
    .wp-block-navigation__container > .wp-block-navigation-item:has(.custom-logo-link),
nav.is-style-base-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"]
    .wp-block-navigation__container > .wp-block-navigation-item:has(.wp-block-site-title) {
        padding: 0 !important;
}

/* remove padding on submenu items */

nav.is-style-primary-nav-header .wp-block-navigation__submenu-container >
    .wp-block-navigation-item > .wp-block-navigation-item__content,
nav.is-style-base-nav-header .wp-block-navigation__submenu-container >
    .wp-block-navigation-item > .wp-block-navigation-item__content {
        padding: 0;
}

/* -------------------- search icon (desktop) -------------------- */

nav.is-style-primary-nav-header .wp-block-search:hover button {
    background-color: color-mix(in srgb, var(--wp--preset--color--secondary) 20%, transparent);
}

nav.is-style-base-nav-header .wp-block-search:hover button {
    background-color: color-mix(in srgb, var(--wp--preset--color--base) 20%, transparent);
}

nav.is-style-primary-nav-header .wp-block-search:hover button,
nav.is-style-base-nav-header .wp-block-search:hover button {
    transition: background-color 0.1s ease, color 0.1s ease;
}

nav.is-style-primary-nav-header .wp-block-search:hover button svg,
nav.is-style-base-nav-header .wp-block-search:hover button svg {
    color: var(--wp--preset--color--secondary);
    transition: color 0.1s ease;
}

/* --------------- icon styles (burger, close, dropdown) --------------- */

/* open menu (burger icon) */

nav.is-style-primary-nav-header button[aria-label="Open menu"] svg {
    fill: var(--wp--preset--color--primary);
}

nav.is-style-base-nav-header button[aria-label="Open menu"] svg {
    fill: var(--wp--preset--color--base);
}

/* close menu (X icon) */

nav.is-style-primary-nav-header button[aria-label="Close menu"] svg,
nav.is-style-base-nav-header button[aria-label="Close menu"] svg {
    fill: var(--wp--preset--color--secondary);
}

/* dropdown submenu chevron icons */

nav.is-style-primary-nav-header .wp-block-navigation__submenu-icon svg {
    color: var(--wp--preset--color--primary);
}

nav.is-style-base-nav-header .wp-block-navigation__submenu-icon svg {
    color: var(--wp--preset--color--base);
}

/* force background transparency on dropdown container */

nav.is-style-primary-nav-header .wp-block-navigation .wp-block-navigation__submenu-icon,
nav.is-style-base-nav-header .wp-block-navigation .wp-block-navigation__submenu-icon {
    background-color: transparent !important;
}

/* -------------------- site logo & title -------------------- */

/* logo size on open menu */

nav.is-style-primary-nav-header img.custom-logo,
nav.is-style-base-nav-header img.custom-logo {
    height: 120px !important;
    width: auto;
}

/* site title font size */

nav.is-style-primary-nav-header .wp-block-site-title,
nav.is-style-base-nav-header .wp-block-site-title {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: var(--wp--preset--font-size--x-large);
}

nav.is-style-primary-nav-header .wp-block-site-title a,
nav.is-style-base-nav-header .wp-block-site-title a {
    color: var(--wp--preset--color--primary) !important;
}

nav.is-style-primary-nav-header .wp-block-site-title a:hover,
nav.is-style-base-nav-header .wp-block-site-title a:hover {
    color: var(--wp--preset--color--secondary) !important;
}

/* ---------- remove logo/title (in slide-in mobile menu area) ---------- */

/* hide logo and title in "non-menu" dialogs (mobile sidebar or header overlap) */

nav.is-style-primary-nav-header .wp-block-navigation__responsive-dialog:not([aria-label="Menu"]) img.custom-logo,
nav.is-style-primary-nav-header .wp-block-navigation__responsive-dialog:not([aria-label="Menu"]) .wp-block-site-logo,
nav.is-style-primary-nav-header .wp-block-navigation__responsive-dialog:not([aria-label="Menu"]) .wp-block-site-title,
nav.is-style-base-nav-header .wp-block-navigation__responsive-dialog:not([aria-label="Menu"]) img.custom-logo,
nav.is-style-base-nav-header .wp-block-navigation__responsive-dialog:not([aria-label="Menu"]) .wp-block-site-logo,
nav.is-style-base-nav-header .wp-block-navigation__responsive-dialog:not([aria-label="Menu"]) .wp-block-site-title {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* hide logo and title in other responsive dialogs */

nav.is-style-primary-nav-header .wp-block-navigation__responsive-dialog:not([aria-label="Menu"])
    .wp-block-navigation__container > .wp-block-navigation-item:has(.custom-logo-link),
nav.is-style-primary-nav-header .wp-block-navigation__responsive-dialog:not([aria-label="Menu"])
    .wp-block-navigation__container > .wp-block-navigation-item:has(.wp-block-site-title),
nav.is-style-base-nav-header .wp-block-navigation__responsive-dialog:not([aria-label="Menu"])
    .wp-block-navigation__container > .wp-block-navigation-item:has(.custom-logo-link),
nav.is-style-base-nav-header .wp-block-navigation__responsive-dialog:not([aria-label="Menu"])
    .wp-block-navigation__container > .wp-block-navigation-item:has(.wp-block-site-title) {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
}

/* -------------------- show logo/title in slide-in menu -------------------- */

nav.is-style-primary-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"] img.custom-logo,
nav.is-style-primary-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"] .wp-block-site-title,
nav.is-style-base-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"] img.custom-logo,
nav.is-style-base-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"] .wp-block-site-title {
    display: block;
    margin-top: 0;
    padding: 0;
}

/* -------------------- mobile menu items -------------------- */

/* mobile menu navigation items gap */

nav.is-style-primary-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"] .wp-block-navigation__container,
nav.is-style-base-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"] .wp-block-navigation__container {
    gap: 5px !important;
}

/* make all items in the responsive menu full-width */

nav.is-style-primary-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"]
    .wp-block-navigation__container > .wp-block-navigation-item,
nav.is-style-primary-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"]
    .wp-block-navigation-item > a,
nav.is-style-primary-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"]
    .wp-block-search,
nav.is-style-base-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"]
    .wp-block-navigation__container > .wp-block-navigation-item,
nav.is-style-base-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"]
    .wp-block-navigation-item > a,
nav.is-style-base-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"]
    .wp-block-search {
        display: block;
        width: 100%;
}

/* highlight style for current menu item (not logo/title) */

nav.is-style-primary-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"] 
    .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item:not(:has(.custom-logo-link)):not(:has(.wp-block-site-title)),
nav.is-style-base-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"] 
    .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item:not(:has(.custom-logo-link)):not(:has(.wp-block-site-title)) {
        color: var(--wp--preset--color--secondary) !important;
        background-color: color-mix(in srgb, var(--wp--preset--color--secondary) 5%, transparent) !important;
        border-left: 4px solid var(--wp--preset--color--secondary);
        border-bottom: none;
}

/* left indent for inactive mobile items */

nav.is-style-primary-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"] 
    .wp-block-navigation-item:not(.current-menu-item),
nav.is-style-base-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"] 
    .wp-block-navigation-item:not(.current-menu-item) {
        padding-left: 24px;
}

/* color for inactive submenu links (mobile) */

nav.is-style-primary-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"]
    .wp-block-navigation-submenu .wp-block-navigation-item:not(.current-menu-item) > a,
nav.is-style-base-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"]
    .wp-block-navigation-submenu .wp-block-navigation-item:not(.current-menu-item) > a {
        color: var(--wp--preset--color--contrast);
}

/* hover effect for inactive items */

nav.is-style-primary-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"] 
    .wp-block-navigation-item:not(.current-menu-item):hover,
nav.is-style-base-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"] 
    .wp-block-navigation-item:not(.current-menu-item):hover {
        padding-left: 20px;
        border-left: 4px solid var(--wp--preset--color--primary);
}

/* remove hover left border for logo and title */

nav.is-style-primary-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"]
    .wp-block-navigation__container > .wp-block-navigation-item:has(.custom-logo-link):hover,
nav.is-style-primary-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"]
    .wp-block-navigation__container > .wp-block-navigation-item:has(.wp-block-site-title):hover,
nav.is-style-base-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"]
    .wp-block-navigation__container > .wp-block-navigation-item:has(.custom-logo-link):hover,
nav.is-style-base-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"]
    .wp-block-navigation__container > .wp-block-navigation-item:has(.wp-block-site-title):hover {
        border-left: none;
}

/* hover text color for inactive items */

nav.is-style-primary-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"] 
    .wp-block-navigation-item:not(.current-menu-item):hover > a,
nav.is-style-base-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"] 
    .wp-block-navigation-item:not(.current-menu-item):hover > a {
        color: var(--wp--preset--color--primary);
}

/* highlight style for active submenu items in mobile */

nav.is-style-primary-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"]
    .wp-block-navigation-submenu .wp-block-navigation-item.current-menu-item,
nav.is-style-base-nav-header .wp-block-navigation__responsive-dialog[aria-label="Menu"]
    .wp-block-navigation-submenu .wp-block-navigation-item.current-menu-item {
        color: var(--wp--preset--color--secondary) !important;
        background-color: color-mix(in srgb, var(--wp--preset--color--secondary) 5%, transparent) !important;
        border-left: 4px solid var(--wp--preset--color--secondary);
        border-bottom: none;
}





/* ------------------------------
 * Navigation Footer Style
 * ------------------------------ */

nav.is-style-nav-footer {
    color: var(--wp--preset--color--base);
    background-color: var(--wp--preset--color--primary);
}

nav.is-style-nav-footer .wp-block-navigation__responsive-container-content,
nav.is-style-nav-footer .wp-block-navigation__container {
    display: flex;
    flex-direction: column;
}

nav.is-style-nav-footer .wp-block-navigation__container {
    gap: 10px;
}

nav.is-style-nav-footer .wp-block-navigation__responsive-dialog[aria-label="Menu"] .wp-block-navigation__container {
    gap: 5px !important;
}

/* -------------------- main nav links -------------------- */

/* active (current) menu item */

nav.is-style-nav-footer .current-menu-item {
    padding: 6px 18px;
    border: 2px solid var(--wp--preset--color--base);
    border-radius: 20px;
}

/* inactive menu items */

nav.is-style-nav-footer .wp-block-navigation-item:not(.current-menu-item):not(:has(.custom-logo-link)):not(:has(.wp-block-site-title)) {
    padding: 8px 20px;
    background-color: transparent;
}

/* hover effect for inactive items */

nav.is-style-nav-footer .wp-block-navigation-item:not(.current-menu-item):not(:has(.custom-logo-link)):not(:has(.wp-block-site-title)):hover {
    padding: 8px 20px;
    color: var(--wp--preset--color--primary);
    background-color: color-mix(in srgb, var(--wp--preset--color--base) 80%, transparent);
    border-radius: 20px;
}

/* -------------------- search icon (desktop) -------------------- */

/* desktop search icon on hover */

nav.is-style-nav-footer .wp-block-search:hover button {
    padding-left: 9px;
    background-color: var(--wp--preset--color--base);
    border-left: 1px solid var(--wp--preset--color--primary);
    transition: background-color 0.1s ease, color 0.1s ease;
}

/* mobile menu search icon on hover */

nav.is-style-nav-footer .wp-block-navigation__responsive-dialog[aria-label="Menu"] .wp-block-search:hover button {
    padding: 9px;
    background-color: var(--wp--preset--color--base);
    border: 1px solid var(--wp--preset--color--primary);
    transition: background-color 0.1s ease, color 0.1s ease;
}

/* --------------- icon styles (burger, close, dropdown) --------------- */

/* force background transparency on dropdown icon */

nav.is-style-nav-footer .wp-block-navigation .wp-block-navigation__submenu-icon {
    background-color: transparent !important;
}

/* remove border and apply rounding to submenu containers */

nav.is-style-nav-footer .wp-block-navigation__responsive-dialog:not([aria-label="Menu"]) .wp-block-navigation__submenu-container {
    border: none !important;
    border-radius: 20px !important;
}

/* -------------------- site logo & title -------------------- */

/* logo size */

nav.is-style-nav-footer img.custom-logo {
    height: 120px !important;
    width: auto;
}

/* logo filter on desktop */

nav.is-style-nav-footer .wp-block-navigation__responsive-dialog:not([aria-label="Menu"]) img.custom-logo {
    filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(5795%) hue-rotate(69deg) brightness(115%) contrast(101%);
}

/* site title margins and font */

nav.is-style-nav-footer .wp-block-site-title {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: var(--wp--preset--font-size--x-large);
}

/* site title color (mobile) */

nav.is-style-nav-footer .wp-block-navigation__responsive-dialog[aria-label="Menu"] .wp-block-site-title a {
    color: var(--wp--preset--color--primary) !important;
}

/* site title hover color (mobile) */

nav.is-style-nav-footer .wp-block-navigation__responsive-dialog[aria-label="Menu"] .wp-block-site-title a:hover {
    color: var(--wp--preset--color--primary) !important;
}

/* site title color (desktop) */

nav.is-style-nav-footer .wp-block-navigation__responsive-dialog:not([aria-label="Menu"]) .wp-block-site-title a {
    color: var(--wp--preset--color--base);
}

/* site title hover color (desktop) */

nav.is-style-nav-footer .wp-block-navigation__responsive-dialog:not([aria-label="Menu"]) .wp-block-site-title a:hover {
    color: var(--wp--preset--color--base) !important;
}

/* -------------------- mobile menu items -------------------- */

/* make items in responsive menu full-width */

nav.is-style-nav-footer .wp-block-navigation__responsive-dialog[aria-label="Menu"]
    .wp-block-navigation__container > .wp-block-navigation-item,
nav.is-style-nav-footer .wp-block-navigation__responsive-dialog[aria-label="Menu"]
    .wp-block-navigation-item > a,
nav.is-style-nav-footer .wp-block-navigation__responsive-dialog[aria-label="Menu"]
    .wp-block-search {
        display: block;
        width: 100%;
}

/* hover style for current item (excluding logo/title) */

nav.is-style-nav-footer .wp-block-navigation__responsive-dialog[aria-label="Menu"] 
    .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item:not(:has(.custom-logo-link)):not(:has(.wp-block-site-title)) {
        color: var(--wp--preset--color--primary) !important;
        background-color: color-mix(in srgb, var(--wp--preset--color--primary) 5%, transparent) !important;
        border-left: 4px solid var(--wp--preset--color--primary);
}

/* hover text color for inactive items */

nav.is-style-nav-footer .wp-block-navigation__responsive-dialog[aria-label="Menu"] 
    .wp-block-navigation-item:not(.current-menu-item):hover > a {
        color: var(--wp--preset--color--primary);
}
