/*
 * Flaveo base: tokens and shared components.
 * Override: <theme>/blocks/override/_base/style.css (replace) or extend.css (add).
 */
@layer theme, base, components, utilities;

:root {
    /* Derived from the current text color: work on any background. */
    /* --flaveo-soft-mix is computed per background (includes/tokens.php) for a 4.6:1 contrast. */
    --flaveo-soft: color-mix(in oklab, currentColor var(--flaveo-soft-mix, 70%), transparent);
    --flaveo-line: color-mix(in oklab, currentColor 15%, transparent);
    --flaveo-tint: color-mix(in oklab, currentColor 6%, transparent);

    --flaveo-radius: 1rem;
    --flaveo-radius-sm: 0.75rem;
    --flaveo-gap: 1.5rem;
    --flaveo-flow: 1.25rem;
    --flaveo-section-padding: var(--wp--preset--spacing--60, clamp(4rem, 8vw, 6rem));
    --flaveo-mono: var(--wp--preset--font-family--mono, ui-monospace, monospace);

    /*
     * Space kept above an anchored element: admin bar + sticky header + sticky anchor nav + breathing room.
     * --flaveo-header-height and --flaveo-sticky-offset are measured by the theme (scroll-offset.js).
     */
    --flaveo-header-height: 4rem;
    --flaveo-sticky-offset: 0px;
    --flaveo-scroll-offset: calc(var(--wp-admin--admin-bar--height, 0px) + var(--flaveo-header-height) + var(--flaveo-sticky-offset) + 1.5rem);
}

/* Anchored elements (headings, sections…) stop below the sticky header instead of under it. */
:where([id]) {
    scroll-margin-top: var(--flaveo-scroll-offset);
}

/* Visually hidden, still read by screen readers. */
.flaveo-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@layer components {
    /* Section */
    .flaveo-section {
        padding-block: var(--flaveo-section-padding);
    }

    /* Vertical rhythm of InnerBlocks content */
    .flaveo-flow > * {
        margin-block: 0;
    }

    /* --flow is set per child (below, and in block styles): reset it, without specificity, so nested flows
       don't inherit the spacing their container got from its own parent. */
    :where(.flaveo-flow) > * {
        --flow: initial;
    }

    .flaveo-flow > * + * {
        margin-block-start: var(--flow, var(--flaveo-flow));
    }

    .flaveo-flow > :is(h1, h2, h3) + p {
        --flow: 1rem;
    }

    .flaveo-flow > :is(.wp-block-buttons, .wp-block-group, .wp-block-columns, [class*="wp-block-flaveo-"]) {
        --flow: 2.5rem;
    }

    .flaveo-flow > p:not([class]) {
        max-width: 65ch;
    }

    .flaveo-flow > .has-text-align-center {
        margin-inline: auto;
    }

    /* Text helpers */
    .flaveo-eyebrow {
        font-family: var(--flaveo-mono);
        font-size: 0.75rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--flaveo-soft);
    }

    /* Buttons: same look as core/button (theme.json), for ACF links */
    .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        border-radius: 9999px;
        padding: 0.625rem 1.25rem;
        background-color: var(--flaveo-fg);
        color: var(--flaveo-surface);
        font-size: 0.9375rem;
        font-weight: 500;
        text-decoration: none;
        transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;

        &:hover {
            opacity: 0.85;
        }
    }

    .btn-outline {
        background-color: transparent;
        color: inherit;
        box-shadow: inset 0 0 0 1px currentColor;

        &:hover {
            opacity: 1;
            background-color: var(--flaveo-tint);
        }
    }

    .btn-icon {
        display: grid;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 9999px;
        box-shadow: inset 0 0 0 1px var(--flaveo-line);
        transition: background-color 0.2s, opacity 0.2s;

        &:hover {
            background-color: var(--flaveo-tint);
        }

        &.disabled {
            opacity: 0.35;
            pointer-events: none;
        }
    }

    /* Icons (wp_get_icon): WordPress strips fill="currentColor" from <svg>, so the color comes from here. */
    .flaveo-icon {
        width: var(--flaveo-icon-size, 1.25em);
        height: var(--flaveo-icon-size, 1.25em);
        flex-shrink: 0;
        fill: currentColor;
    }

    /* Pause / play buttons: both icons rendered, the visible one follows aria-pressed. */
    [aria-pressed="true"] > .flaveo-icon-pause,
    [aria-pressed="false"] > .flaveo-icon-play,
    :not([aria-pressed]) > .flaveo-icon-play {
        display: none;
    }

    /* Slidable row (flaveo/row, flaveo/posts, slider preview) */
    .slidable-inner {
        display: flex;
        gap: var(--flaveo-gap);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-bottom: 0.25rem;

        &::-webkit-scrollbar {
            display: none;
        }

        > * {
            flex: 0 0 80%;
            scroll-snap-align: start;
            margin: 0 !important;
        }

        @media (min-width: 600px) {
            > * {
                flex-basis: calc((100% - var(--flaveo-gap)) / 2);
            }
        }

        @media (min-width: 960px) {
            > * {
                flex-basis: calc((100% - (var(--cols, 3) - 1) * var(--flaveo-gap)) / var(--cols, 3));
            }
        }

        &.dragging {
            cursor: grabbing;
            scroll-snap-type: none;
            user-select: none;
        }

        > .block-list-appender {
            flex: 0 0 auto;
            align-self: center;
        }
    }

    .slidable-enabled .slidable-inner {
        cursor: grab;
    }

    /* Slider controls (flaveo/slider, flaveo/posts) */
    /* 24px hit area (WCAG 2.5.8), the visible dot is the pseudo-element. */
    .dot-navigation .dot {
        display: grid;
        place-items: center;
        min-width: 1.5rem;
        height: 1.5rem;

        &::before {
            content: "";
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 9999px;
            background-color: var(--flaveo-line);
            transition: background-color 0.2s, width 0.2s;
        }

        &.active::before {
            width: 1.5rem;
            background-color: currentColor;
        }
    }

    /* Filters (flaveo/posts) */
    .flaveo-filter {
        border-radius: 9999px;
        padding: 0.375rem 1rem;
        font-size: 0.875rem;
        box-shadow: inset 0 0 0 1px var(--flaveo-line);
        transition: background-color 0.2s, color 0.2s;

        &:hover {
            background-color: var(--flaveo-tint);
        }

        &.active {
            background-color: var(--flaveo-fg);
            color: var(--flaveo-surface);
            box-shadow: none;
        }
    }

    /* Editor hints */
    .flaveo-placeholder,
    .flaveo-label {
        font-family: var(--flaveo-mono);
        font-size: 0.75rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--flaveo-soft);
    }

    .flaveo-placeholder {
        padding: 2rem;
        border: 1px dashed var(--flaveo-line);
        border-radius: var(--flaveo-radius-sm);
        text-align: center;
    }

    .flaveo-label {
        margin-bottom: 0.75rem;
    }
}

/*
 * Entrance animations (includes/animations.php + theme animations.js).
 * Hidden only when html.flaveo-anim is set (JS on, motion allowed). Failsafe: shown after 2.5 s
 * if the script never takes over.
 */
.flaveo-anim [data-animate] {
    opacity: 0;
    animation: flaveo-anim-failsafe 0.6s ease 2.5s forwards;
}

@keyframes flaveo-anim-failsafe {
    to {
        opacity: 1;
    }
}

/*
 * Core image CSS (unlayered) adds a bottom margin to figures: spacing comes from the flow only.
 */
.flaveo-flow > :is(.wp-block-image, .wp-block-gallery, .wp-block-table, .wp-block-embed, .wp-block-video) {
    margin-block-end: 0;
}

/*
 * Button icons (includes/button-icons.php). Unlayered: core button CSS (display: inline-block) is too.
 */
.wp-block-button__link.has-flaveo-icon,
.has-flaveo-icon-preview > .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
}

.flaveo-button-icon {
    display: inline-flex;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.flaveo-button-icon svg {
    width: 1.15em;
    height: 1.15em;
}

.wp-block-button__link.is-icon-after:hover .flaveo-button-icon {
    transform: translateX(3px);
}

/* Editor preview: same SVG as a mask. */
.has-flaveo-icon-preview.is-icon-after > .wp-block-button__link::after,
.has-flaveo-icon-preview.is-icon-before > .wp-block-button__link::before {
    content: "";
    flex-shrink: 0;
    width: 1.15em;
    height: 1.15em;
    background-color: currentColor;
    mask: var(--flaveo-button-icon) center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
    .flaveo-button-icon {
        transition: none;
    }
}