/*
 * Main CSS file for the Ovid theme.
 */

/* stylelint-disable selector-class-pattern -- Butler block + core block class names. */

.mobile-header {
    display: none;
}

body.butler-hide-header-breadcrumbs .butler-primary-header > .wp-block-group:first-child {
    padding-bottom: 1.5rem;
}

footer.wp-block-template-part {
    margin-block-start: 0;
}

/* Core's own navigation-link styles set text-decoration: none directly on
   the link, which always wins over the block's inherited typography.textDecoration
   setting (an explicit rule on the element beats an inherited value regardless
   of specificity), so the underline set on this nav block never actually shows
   without an explicit override here. */
nav[aria-label="Footer Menu"] .wp-block-navigation-item__content {
    text-decoration: underline;
}

/*
 * In-content body links: contrast-2 chip on hover/focus.
 * Nav items use per-instance styles from butler-blocks navigation-item-design controls.
 */
.butler-link-hover-custom-contrast-2 a:where(:not(.wp-element-button, .wp-block-navigation-item__content)):is(:hover, :focus) {
    background: var(--wp--preset--color--custom-contrast-2);
    color: var(--wp--preset--color--custom-white) !important;
    text-decoration: none;
    text-decoration-color: var(--wp--preset--color--custom-white) !important;
}

body:is(.hamburger-menu-open, .search-menu-open) .butler-primary-header .wp-block-breadcrumbs,
body:is(.hamburger-menu-open, .search-menu-open) .butler-primary-header .wp-block-breadcrumbs a:not(:hover),
body:is(.hamburger-menu-open, .search-menu-open) .butler-primary-header .wp-block-breadcrumbs span,
body:is(.hamburger-menu-open, .search-menu-open) .butler-primary-header .wp-block-breadcrumbs li::after,
body:is(.hamburger-menu-open, .search-menu-open) .desktop-header .wp-block-navigation-item__content:not(:hover) {
    color: var(--wp--preset--color--custom-primary);
}

/*
 * Default nav-item chip hover when no per-instance state styles are set.
 * Items with custom hover get a wp-states-* class from core; those are excluded
 * so block States colors are not overridden by !important below.
 */
.butler-link-hover-custom-contrast-2 .wp-block-navigation-item:not([class*="wp-states-"]) .wp-block-navigation-item__content:is(:hover, :focus) {
    background: var(--wp--preset--color--custom-contrast-2);
    color: var(--wp--preset--color--custom-white) !important;
    text-decoration: none;
    text-decoration-color: var(--wp--preset--color--custom-white) !important;
}

body:is(.hamburger-menu-open, .search-menu-open) .butler-primary-header .wp-block-group.alignfull:has(.wp-block-breadcrumbs) {
    border-top-color: var(--wp--preset--color--custom-secondary) !important;
}

body:is(.hamburger-menu-open, .search-menu-open) .butler-primary-header .logo-white-filter {
    filter: none;
}

@media (max-width: 768px) {

    .candybox-toggle__label {
        display: none;
    }

    .desktop-header {
        display: none;
    }

    .mobile-header {
        display: block;

        .mobile-header-top-container {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            justify-items: center;

            .flyout-menus {
                gap: 0;
            }
        }

        .mobile-header-bottom-container {
            width: 100%;
            display: block;
        
            .wp-block-navigation__container {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 1px;
                font-family: var(--wp--preset--font-family--field-gothic-condensed);
                font-weight: 500;
                border-top: 1px solid hsla(0, 0%, 100%, .25);
                background: hsla(0, 0%, 100%, .25);
                line-height: 2;
                list-style: none;

                & > li {
                    align-items: center;
                    background-color: var(--wp--preset--color--custom-primary);
                    position: relative;
                    font-size: var(--wp--preset--font-size--large);
                    text-align: center;
                    display: block;
                }
            }
        }
    }
}