/*
 * MARS frontend mechanics.
 *
 * Presentation choices such as colors, typography, borders and spacing belong
 * to block/theme styles. This file only keeps interactive UI stable in layout.
 */

/* A Search block configured as "button only" must not enlarge a desktop header
 * when its input opens. The input expands as a popover over the header instead.
 */
.wp-block-navigation .wp-block-search.wp-block-search__button-only {
    position: relative;
    flex: 0 0 auto;
    min-inline-size: 2.75rem;
}

.wp-block-navigation
.wp-block-search.wp-block-search__button-only:not(.wp-block-search__searchfield-hidden)
.wp-block-search__inside-wrapper {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0;
    z-index: 1000;
    inline-size: min(22rem, calc(100vw - 2rem)) !important;
    max-inline-size: calc(100vw - 2rem);
    transform: translateY(-50%);
}

/* Inside WordPress' responsive Navigation overlay there is no header row to
 * protect from layout shift, so let Core Search use its normal flow.
 */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-search.wp-block-search__button-only {
    min-inline-size: 0;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-search.wp-block-search__button-only:not(.wp-block-search__searchfield-hidden)
.wp-block-search__inside-wrapper {
    position: static;
    inline-size: auto !important;
    max-inline-size: 100%;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-navigation .wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper,
    .wp-block-navigation .wp-block-search.wp-block-search__button-only .wp-block-search__input {
        transition: none;
    }
}