/*
 * Baseline for the navigation slot of a model-authored header.
 *
 * The slot renders the website's real WordPress menu as plain wp_nav_menu() markup —
 * nav.io-design-navigation > ul.menu > li.menu-item(.menu-item-has-children > ul.sub-menu) — which replaces the
 * starter's mega menu together with its styling. Without this file that menu is a vertical list with every
 * dropdown item shown inline, which is how a live header redesign rendered on 2026-09-15. Hover and focus open
 * dropdowns here; ai-site-motion.js adds tap-to-open, the small-screen Menu button and Escape.
 *
 * This prints before the design's own CSS, so a design restyles it with rules of equal or higher specificity.
 * .page_item_has_children/.children are wp_page_menu()'s names for the same things when no menu is assigned.
 */
.io-design-navigation ul { list-style: none; margin: 0; padding: 0; }
.io-design-navigation .menu, .io-design-navigation .menu > ul { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.io-design-navigation .menu-item, .io-design-navigation .page_item { position: relative; }
.io-design-navigation a { display: block; color: inherit; text-decoration: none; }
.io-design-navigation .menu-item-has-children > a::after, .io-design-navigation .page_item_has_children > a::after {
    content: ""; display: inline-block; width: 0.4em; height: 0.4em; margin-left: 0.45em;
    border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-0.15em) rotate(45deg);
}
.io-design-navigation .sub-menu, .io-design-navigation .children {
    display: none; position: absolute; top: 100%; left: 0; z-index: 50; min-width: 14rem; padding: 0.5rem 0;
    border-radius: 0.375rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
/* The dropdown is its own surface. A design colours its header links without knowing about dropdowns — the
   demo header's white links on this panel's white background were invisible — so the panel sets both colours
   at three-class specificity and its links inherit. A design restyles it by targeting these same selectors. */
.io-design-navigation .menu .sub-menu, .io-design-navigation .menu .children { background: #fff; color: #222; }
.io-design-navigation .menu .sub-menu a, .io-design-navigation .menu .children a { color: inherit; background: transparent; }
.io-design-navigation .menu .sub-menu a:hover, .io-design-navigation .menu .sub-menu a:focus,
.io-design-navigation .menu .children a:hover, .io-design-navigation .menu .children a:focus { background: rgba(0, 0, 0, 0.06); }
.io-design-navigation .sub-menu .sub-menu, .io-design-navigation .children .children { top: 0; left: 100%; }
.io-design-navigation .sub-menu a, .io-design-navigation .children a { padding: 0.5rem 1.25rem; white-space: nowrap; }
.io-design-navigation .menu-item-has-children:hover > .sub-menu,
.io-design-navigation .menu-item-has-children:focus-within > .sub-menu,
.io-design-navigation .menu-item-has-children.is-open > .sub-menu,
.io-design-navigation .page_item_has_children:hover > .children,
.io-design-navigation .page_item_has_children:focus-within > .children,
.io-design-navigation .page_item_has_children.is-open > .children { display: block; }
.io-design-nav-toggle { display: none; }

@media (max-width: 47.99rem) {
    .io-design-nav-toggle {
        display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid currentColor;
        border-radius: 0.375rem; background: transparent; color: inherit; font: inherit; cursor: pointer;
    }
    .io-design-navigation .menu, .io-design-navigation .menu > ul { display: none; flex-direction: column; align-items: stretch; gap: 0; padding-top: 0.5rem; }
    .io-design-navigation.is-open .menu, .io-design-navigation.is-open .menu > ul { display: flex; }
    .io-design-navigation .sub-menu, .io-design-navigation .children, .io-design-navigation .sub-menu .sub-menu, .io-design-navigation .children .children {
        position: static; min-width: 0; padding: 0 0 0 1rem; box-shadow: none;
    }
    /* Inside the opened list the dropdown is part of the header again, so it takes the header's colours. */
    .io-design-navigation .menu .sub-menu, .io-design-navigation .menu .children { background: transparent; color: inherit; }
    .io-design-navigation .sub-menu a, .io-design-navigation .children a { white-space: normal; }
    /* Touch has no hover: the first tap opens (is-open, from the script), the second follows the link. */
    .io-design-navigation .menu-item-has-children:hover > .sub-menu, .io-design-navigation .menu-item-has-children:focus-within > .sub-menu,
    .io-design-navigation .page_item_has_children:hover > .children, .io-design-navigation .page_item_has_children:focus-within > .children { display: none; }
    .io-design-navigation .menu-item-has-children.is-open > .sub-menu, .io-design-navigation .page_item_has_children.is-open > .children { display: block; }
}

/*
 * CSS-driven motion classes. ai-site-motion.js adds is-inview when an element scrolls into view (at once when
 * there is no IntersectionObserver); everything else is a transition here, so content is never hidden without
 * the script. Reduced motion shows the final state immediately.
 */
.io-design .io-fade-up, .io-design .io-slide-left, .io-design .io-slide-right, .io-design .io-zoom-in {
    opacity: 0; transition: opacity 0.7s ease, transform 0.7s ease; will-change: opacity, transform;
}
.io-design .io-fade-up { transform: translateY(2rem); }
.io-design .io-slide-left { transform: translateX(-3rem); }
.io-design .io-slide-right { transform: translateX(3rem); }
.io-design .io-zoom-in { transform: scale(0.92); }
.io-design .io-fade-up.is-inview, .io-design .io-slide-left.is-inview, .io-design .io-slide-right.is-inview, .io-design .io-zoom-in.is-inview {
    opacity: 1; transform: none;
}
.io-design .io-float { animation: io-float 6s ease-in-out infinite; }
@keyframes io-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.75rem); } }
@media (prefers-reduced-motion: reduce) {
    .io-design .io-fade-up, .io-design .io-slide-left, .io-design .io-slide-right, .io-design .io-zoom-in {
        opacity: 1; transform: none; transition: none;
    }
    .io-design .io-float { animation: none; }
}

/*
 * Baseline for the cart slot of a model-authored header (IO-37137).
 *
 * The slot renders IOAiSitePolicy::cartMarkup(): button.io-ai-cart-trigger.io-design-cart with an icon, a label
 * and an item-count badge ai-site-motion.js fills from the site's cart. Without this it was a browser-default
 * <button> in every generated header until 2026-09-17. It inherits the header's colour and font so it belongs
 * to any design; a design restyles it through these classes at equal or higher specificity.
 */
.io-design .io-ai-cart-trigger { -webkit-appearance: none; appearance: none; }
.io-design .io-design-cart {
    display: inline-flex; align-items: center; gap: 0.5em; padding: 0.55em 1em;
    border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit;
    font: inherit; font-weight: 600; line-height: 1; cursor: pointer; text-decoration: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.io-design .io-design-cart:hover { opacity: 0.8; }
.io-design .io-design-cart:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.io-design .io-design-cart:active { transform: scale(0.97); }
.io-design .io-design-cart__icon { width: 1.2em; height: 1.2em; flex: none; }
.io-design .io-design-cart__label { white-space: nowrap; }
.io-design .io-design-cart__count {
    min-width: 1.6em; padding: 0 0.4em; border: 1px solid currentColor; border-radius: 999px;
    font-size: 0.75em; line-height: 1.6em; text-align: center;
}
.io-design .io-design-cart__count[hidden] { display: none; }

/*
 * The search slot: the website's own search form in a plain, inheriting box. A design restyles it through
 * .io-design-search, .io-design-search .search-field and .io-design-search .search-submit.
 */
.io-design-search form { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.io-design-search .search-field { min-width: 10rem; padding: 0.4rem 0.6rem; border: 1px solid currentColor; border-radius: 0.375rem; background: transparent; color: inherit; font: inherit; }
.io-design-search .search-submit { padding: 0.4rem 0.75rem; border: 1px solid currentColor; border-radius: 0.375rem; background: transparent; color: inherit; font: inherit; cursor: pointer; }