/* ==========================================================
   HEADER CONTROL BUTTON RESETS
   ========================================================== */

button.top-header-search-icon,
button.cross-icons,
button.hamIcon {
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    cursor: pointer;
    font: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    /* width: auto; */
    min-width: 0;
    min-height: 0;
}

button.top-header-search-icon:hover,
button.top-header-search-icon:active,
button.top-header-search-icon:focus,
button.cross-icons:hover,
button.cross-icons:active,
button.cross-icons:focus,
button.hamIcon:hover,
button.hamIcon:active,
button.hamIcon:focus {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
}

button.top-header-search-icon:focus-visible,
button.cross-icons:focus-visible,
button.hamIcon:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

button.top-header-search-icon img,
button.cross-icons img,
button.hamIcon img {
    display: block;
    pointer-events: none;
}

/* ==========================================================
   ACCESSIBLE DESKTOP SUBMENU TOGGLE
   ========================================================== */

:is(#menu-main-nav, #menu-main-nav-spanish) > li > button.submenu-toggle {
    appearance: none;
    -webkit-appearance: none;

    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    color: inherit !important;

    cursor: pointer;

    font: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: 1 !important;

    margin: 0 !important;
    padding: 0 !important;

    width: 24px !important;
    height: 24px !important;

    min-width: 24px !important;
    min-height: 24px !important;

    /*
     * IMPORTANT:
     * Remove the button from the navigation's normal
     * layout so it cannot change the menu height.
     */
    position: absolute !important;

    top: 50%;
    transform: translateY(-50%);

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    z-index: 10;
}

@media (min-width: 961px) {
    /*
     * Invisible toggle anchor only while closed. Mega menus in style.css require
     * position: static on the top-level li:hover (see .genesis-nav-menu .menu-item:hover).
     */
    :is(#menu-main-nav, #menu-main-nav-spanish) > li.menu-item-has-children:not(:hover):not(.submenu-open) {
        position: relative;
    }

    /*
     * Keyboard-only control; mouse users still use hover rules in style.css.
     */
    :is(#menu-main-nav, #menu-main-nav-spanish) > li.menu-item-has-children > button.submenu-toggle {
        right: 0;
        left: auto;
        opacity: 0;
        pointer-events: none;
    }

    :is(#menu-main-nav, #menu-main-nav-spanish) > li.menu-item-has-children > button.submenu-toggle:focus-visible {
        pointer-events: auto;
        opacity: 1;
    }

    .genesis-nav-menu .menu-item.button-cta {
        z-index: 2;
    }
}


/* Visible keyboard focus */

:is(#menu-main-nav, #menu-main-nav-spanish) > li > button.submenu-toggle:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 3px;
}


/* Remove global button appearance */

:is(#menu-main-nav, #menu-main-nav-spanish) > li > button.submenu-toggle:hover,
:is(#menu-main-nav, #menu-main-nav-spanish) > li > button.submenu-toggle:active {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* ==========================================================
   OPEN SUBMENU
   ========================================================== */

@media (min-width: 961px) {
    :is(#menu-main-nav, #menu-main-nav-spanish) > li.menu-item-has-children:hover,
    :is(#menu-main-nav, #menu-main-nav-spanish) > li.submenu-open {
        position: static;
    }

    :is(#menu-main-nav, #menu-main-nav-spanish) > li.menu-item-has-children:hover > .sub-menu,
    :is(#menu-main-nav, #menu-main-nav-spanish) > li.submenu-open > .sub-menu {
        left: auto;
        opacity: 1;
        display: block;
        visibility: visible;
    }

    /*
     * Closed submenus are off-screen in style.css; visibility: hidden keeps
     * links out of the tab order until hover or .submenu-open.
     */
    :is(#menu-main-nav, #menu-main-nav-spanish) > li:not(:hover):not(.submenu-open) > .sub-menu {
        visibility: hidden;
    }

    /* Two-column mega menu (match style.css hover rules + keyboard open) */
    :is(#menu-main-nav, #menu-main-nav-spanish) > li.two-cols:not(.threeCols):is(:hover, .submenu-open) > .sub-menu {
        right: 100px;
        max-width: 640px;
        width: max-content;
    }

    /* Three-column mega menu */
    :is(#menu-main-nav, #menu-main-nav-spanish) > li.threeCols:is(:hover, .submenu-open) > .sub-menu {
        margin: 0;
        max-width: 640px;
        display: grid;
        width: 100%;
        right: 100px;
        grid-template-columns: 34% 36% 30%;
    }

    /* Books mega menu */
    :is(#menu-main-nav, #menu-main-nav-spanish) > li.books-cols:is(:hover, .submenu-open) > .sub-menu {
        left: 0;
        right: 0;
    }

    :is(#menu-main-nav, #menu-main-nav-spanish) > li.menu-item-has-children:is(:hover, .submenu-open) > .sub-menu::after {
        left: -9999px;
        right: -9999px;
        background: #fff;
        top: 0;
        bottom: -162px;
        content: "";
        position: absolute;
        z-index: -1;
    }
}


/* ==========================================================
   DESKTOP LOGIN DROPDOWN
   Theme button styles are reset only inside .Login-dropdown.
   ========================================================== */

/*
 * Match legacy .Login-dropdown span styling in style.css.
 * Global theme button rules (purple CTA) must not apply here.
 */
.Login-dropdown > button {
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: #525252 !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 4px solid transparent !important;
    text-transform: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: inherit !important;
    margin: 0 31px 0 0 !important;
    padding: 0 0 20px 0 !important;
    width: auto !important;
    min-width: 0;
    min-height: 0;
    display: inline-block !important;
    cursor: pointer;
    letter-spacing: normal;
}

.Login-dropdown > button:hover,
.Login-dropdown > button:focus,
.Login-dropdown > button:active {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: #525252 !important;
}

.Login-dropdown:hover > button,
.Login-dropdown:focus-within > button {
    border-bottom-color: #822582 !important;
}

.Login-dropdown > button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* Replaces .Login-dropdown span:hover ul after markup becomes button + ul */
.Login-dropdown:hover ul,
.Login-dropdown:focus-within ul,
.Login-dropdown.is-open ul {
    display: block;
}

@media (min-width: 961px) {
    button.hamIcon {
        position: absolute;
        padding-left: 18px;
        right: 30px;
        top: 35px;
        width: 40px;
        height: 40px;
        display: none;
        padding-bottom: 10px;
        padding-top: 20px;
        text-align: left;
        align-items: center;
        justify-content: flex-end;
    }
}

@media (max-width: 960px) {
    button.hamIcon {
        position: absolute;
        padding-left: 18px;
        right: 30px;
        top: 35px;
        width: 40px;
        height: 40px;
        display: flex;
        padding-bottom: 10px;
        padding-top: 20px;
        text-align: left;
        align-items: center;
        justify-content: flex-end;
    }
}

/* ==========================================================
   YOAST FAQ QUESTION BUTTON
   The question is rendered as a native button by
   korn_accessible_faq_block(). Its appearance stays with the FAQ
   styles in style.css, so only the theme's global button styling
   is neutralized here. The two color values repeat style.css
   because the global button rules set color with !important and
   change the background on hover.
   ========================================================== */

button.schema-faq-question {
    appearance: none;
    -webkit-appearance: none;
    background-color: #eae1d5;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #111 !important;
    cursor: pointer;
    font-family: inherit;
    font-style: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    min-height: 0;
    min-width: 0;
    text-align: inherit;
    text-transform: none;
    width: 100%;
}

button.schema-faq-question:hover,
button.schema-faq-question:focus,
button.schema-faq-question:active {
    background-color: #eae1d5;
    box-shadow: none;
    color: #111 !important;
}

button.schema-faq-question:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* ==========================================================
   DO NOT CREATE TOGGLES FOR NESTED SUBMENUS
   ========================================================== */

:is(#menu-main-nav, #menu-main-nav-spanish) .sub-menu .submenu-toggle {
    display: none !important;
}