/*
 * Meridian — Global CSS
 *
 * Layout helpers, resets, and utility rules that cannot be expressed
 * in theme.json. Everything decorative lives in theme.json instead.
 * This file is enqueued on both the front-end and in the block editor.
 */

/* -------------------------------------------------------------------------
 * Box sizing reset
 * ---------------------------------------------------------------------- */
*,
*::before,
*::after {
        box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Base resets
 * ---------------------------------------------------------------------- */
html {
        -webkit-text-size-adjust: 100%;
        scroll-behavior: smooth;
        /* NOTE: do NOT add overflow-x: clip/hidden here — iOS Safari uses the
         * html element as the containing block for position:fixed children when
         * overflow is set on it.  The mini-cart drawer, search overlay, and any
         * other fixed panels would misplace to the top-left corner of the page.
         * Horizontal overflow is handled by overflow-x: clip on body alone. */
}

body {
        margin: 0;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow-x: clip; /* belt-and-suspenders: clip on both html and body */
}

img,
video,
svg {
        display: block;
        max-width: 100%;
        height: auto;
}

p {
        margin-block-start: 0;
        margin-block-end: var(--wp--preset--spacing--16);
}

p:last-child {
        margin-block-end: 0;
}

/* -------------------------------------------------------------------------
 * Site layout
 * ---------------------------------------------------------------------- */
/* Announcement bar — needs position:relative so the inline dismiss button
 * (position:absolute) anchors to the bar itself, not the sticky header.   */
.meridian-announcement-bar {
        position: relative;
}

/* NOTE: header sticky/fixed positioning, background, and .is-scrolled
 * treatment live in navigation.css (the authoritative source for
 * header.site-header rules). A duplicate, lower-specificity .site-header
 * rule used to live here with a stale `parchment` background — it was dead
 * weight that risked silently overriding the real header styles depending
 * on enqueue order, so it has been removed. */

.site-main {
        min-height: 60vh;
}

/* -------------------------------------------------------------------------
 * Focus styles — keyboard accessible, on-brand
 * ---------------------------------------------------------------------- */
:focus-visible {
        outline: 2px solid var(--wp--preset--color--accent);
        outline-offset: 3px;
        border-radius: var(--wp--custom--radius--sm);
}

/* -------------------------------------------------------------------------
 * Navigation
 * ---------------------------------------------------------------------- */
.wp-block-navigation a {
        text-decoration: none;
        color: inherit;
        transition: color var(--wp--custom--transition--base);
}

.wp-block-navigation a:hover {
        color: var(--wp--preset--color--accent-deep);
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
        cursor: pointer;
}

/* -------------------------------------------------------------------------
 * Site Logo
 * ---------------------------------------------------------------------- */
.wp-block-site-logo a {
        display: inline-flex;
        text-decoration: none;
}

.wp-block-site-logo img {
        height: auto;
}

/* -------------------------------------------------------------------------
 * Buttons — transition not expressible in theme.json
 * ---------------------------------------------------------------------- */
.wp-element-button,
.wp-block-button__link {
        cursor: pointer;
        transition:
                background-color var(--wp--custom--transition--smooth),
                border-color var(--wp--custom--transition--smooth),
                color var(--wp--custom--transition--smooth);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--wp--preset--spacing--8);
        white-space: nowrap;
}

/* Ghost / outline button variant */
.wp-block-button.is-style-outline .wp-block-button__link {
        background-color: transparent;
        color: var(--wp--preset--color--ink);
        border-color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
        background-color: var(--wp--preset--color--ink);
        color: var(--wp--preset--color--parchment);
}

/* Accent fill button variant */
.wp-block-button.is-style-fill .wp-block-button__link {
        background-color: var(--wp--preset--color--accent);
        border-color: var(--wp--preset--color--accent);
        color: var(--wp--preset--color--surface);
}

.wp-block-button.is-style-fill .wp-block-button__link:hover {
        background-color: var(--wp--preset--color--accent-deep);
        border-color: var(--wp--preset--color--accent-deep);
}

/* -------------------------------------------------------------------------
 * Separator
 * ---------------------------------------------------------------------- */
.wp-block-separator {
        border: none;
        border-top: 1px solid var(--wp--preset--color--neutral-200);
        margin-block: var(--wp--preset--spacing--48);
}

.wp-block-separator.is-style-wide {
        max-width: 100%;
}

/* -------------------------------------------------------------------------
 * Images
 * ---------------------------------------------------------------------- */
.wp-block-image img {
        border-radius: inherit;
}

.wp-block-cover,
.wp-block-cover__image-background {
        object-fit: cover;
}

/* -------------------------------------------------------------------------
 * Search
 * ---------------------------------------------------------------------- */
.site-search .wp-block-search__input {
        border: 1px solid var(--wp--preset--color--neutral-200);
        border-radius: 0;
        padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--12);
        font-family: var(--wp--preset--font-family--body);
        font-size: var(--wp--preset--font-size--sm);
        background: transparent;
        color: var(--wp--preset--color--ink);
        transition: border-color var(--wp--custom--transition--base);
}

.site-search .wp-block-search__input:focus {
        outline: none;
        border-color: var(--wp--preset--color--ink);
}

/* -------------------------------------------------------------------------
 * Scroll-driven sticky header — add .is-scrolled via minimal inline JS
 * or use pure CSS @keyframes with animation-timeline: scroll()
 * (Progressive enhancement: Chrome 115+, Firefox 110+)
 * ---------------------------------------------------------------------- */
@supports (animation-timeline: scroll()) {
        @keyframes header-scroll-reveal {
                from { box-shadow: none; }
                to   { box-shadow: 0 1px 12px rgba(15, 15, 15, 0.07); }
        }

        .site-header {
                animation: header-scroll-reveal linear both;
                animation-timeline: scroll(root block);
                animation-range: 0px 80px;
        }
}

/* -------------------------------------------------------------------------
 * Scroll-driven section entrance animations
 * Progressive enhancement — no-JS, no library
 * (Chrome 115+, Firefox 110+)
 * ---------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
        .meridian-fade-up {
                animation: meridian-fade-in-up linear both;
                animation-timeline: view();
                animation-range: entry 0% entry 30%;
        }

        @keyframes meridian-fade-in-up {
                from {
                        opacity: 0;
                        transform: translateY(24px);
                }
                to {
                        opacity: 1;
                        transform: translateY(0);
                }
        }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
        }
}

/* -------------------------------------------------------------------------
 * Mini Cart
 * ---------------------------------------------------------------------- */
.wc-block-mini-cart__button {
        background: transparent;
        border: none;
        cursor: pointer;
        padding: var(--wp--preset--spacing--4);
        color: var(--wp--preset--color--ink);
        transition: color var(--wp--custom--transition--base);
        position: relative;
        display: inline-flex;
        align-items: center;
}

.wc-block-mini-cart__button:hover {
        color: var(--wp--preset--color--accent-deep);
}

/* .wc-block-mini-cart__quantity-badge is the ICON+BADGE WRAPPER rendered by
 * WooCommerce Blocks (contains the cart SVG and the count bubble) — it must
 * stay in normal flow as the positioning context, not be pulled out of flow
 * itself. Positioning it `absolute` previously yanked the whole icon out of
 * the button's flex layout and pinned it to the button's top-right corner,
 * which (once the price/amount label pushed the button wider) landed on top
 * of the theme-toggle button next to it. */
.wc-block-mini-cart__quantity-badge {
        position: relative;
        display: inline-flex;
        align-items: center;
}

/* .wc-block-mini-cart__badge is the actual small count bubble, anchored to
 * the icon wrapper above — this is what should carry the absolute offset. */
.wc-block-mini-cart__badge {
        position: absolute;
        top: -4px;
        right: -6px;
        background-color: var(--wp--preset--color--accent);
        color: var(--wp--preset--color--surface);
        border-radius: var(--wp--custom--radius--pill);
        font-size: 10px;
        font-weight: 500;
        min-width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        line-height: 1;
}

/* -------------------------------------------------------------------------
 * Utility classes
 * ---------------------------------------------------------------------- */
.u-visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
}

.u-text-balance {
        text-wrap: balance;
}

.u-text-pretty {
        text-wrap: pretty;
}