/* ═══════════════════════════════════════════════════════════════════════
   STUFF CURIOUS — BLOCKS & RECIPE IMAGE PATCH (v6)
   Enqueue after theme-mode.css (or anywhere after style.css).
   Covers:
     1. Recipe body images → match blog post image styling
     2. WP block buttons → theme pill style
     3. WP separator (<hr>) → purple
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   1. RECIPE BODY IMAGES
   Blog posts style images via `.post-content img`, but recipe method content
   lives in `.recipe-steps__content`, so those rules never reached it. Mirror
   the blog treatment here: rounded corners + vertical margin + grayscale
   filter that clears on hover (matching the rest of the theme's imagery).

   Also covers core image blocks (figure.wp-block-image) which recipes often
   use, so captions and alignments behave too.
   ───────────────────────────────────────────────────────────────────────── */
.recipe-steps__content img,
.recipe-steps__content .wp-block-image img,
.recipe-main .wp-block-image img {
    border-radius: var(--radius);
    margin: 1.75rem 0;
    filter: grayscale(20%);
    transition: filter 0.3s ease;
}
.recipe-steps__content img:hover,
.recipe-main .wp-block-image img:hover {
    filter: grayscale(0%);
}

/* Image blocks with captions — keep caption tight to the image, styled like meta */
.recipe-steps__content .wp-block-image,
.recipe-main .wp-block-image {
    margin: 1.75rem 0;
}
.recipe-steps__content .wp-block-image figcaption,
.recipe-main .wp-block-image figcaption,
.post-content .wp-block-image figcaption {
    font-size: 0.8rem;
    color: var(--text-faint);
    text-align: center;
    margin-top: 0.6rem;
    line-height: 1.5;
}
/* When a caption is present, the img already has its own margin — avoid double gap */
.recipe-steps__content .wp-block-image img,
.recipe-main .wp-block-image img {
    margin-top: 0;
    margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   2. WP BLOCK BUTTONS
   Style .wp-block-button__link to match the theme's pill CTAs without the
   editor user needing to touch any block settings. Covers default (fill),
   outline, and hover — plus light-mode via the CSS variables.
   ───────────────────────────────────────────────────────────────────────── */
.wp-block-button__link,
.wp-block-button__link.wp-element-button {
    background-color: var(--accent-purple);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.75rem 1.6rem;
    border-radius: var(--radius-pill);
    border: none;
    box-shadow: 0 4px 14px rgba(139, 93, 246, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    text-decoration: none;
}
.wp-block-button__link:hover,
.wp-block-button__link.wp-element-button:hover {
    background-color: var(--accent-purple-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 93, 246, 0.45);
}
.wp-block-button__link:active,
.wp-block-button__link.wp-element-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(139, 93, 246, 0.4);
}

/* Outline button variant — purple border + text, fills on hover */
.wp-block-button.is-style-outline .wp-block-button__link,
.is-style-outline .wp-block-button__link.wp-element-button {
    background-color: transparent;
    color: var(--accent-purple);
    border: 2px solid var(--accent-purple);
    box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--accent-purple);
    color: #fff;
}

/* Keyboard focus ring (works with the a11y patch) */
.wp-block-button__link:focus-visible {
    outline: 3px solid var(--accent-purple);
    outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────────────────
   3. WP SEPARATOR (<hr class="wp-block-separator">)
   Default the horizontal rule to the brand purple. Covers the default,
   the wide "has-alpha-channel-opacity" variant, and the dots style.
   ───────────────────────────────────────────────────────────────────────── */
.wp-block-separator {
    border: none;
    border-top: 2px solid var(--accent-purple);
    color: var(--accent-purple);
    opacity: 0.6;
    max-width: 4rem;              /* short centered rule — feels intentional, not a full divider */
    margin: 2.5rem auto;
}

/* Full-width variant keeps the purple but spans the content width */
.wp-block-separator.is-style-wide {
    max-width: 100%;
    opacity: 0.35;
}

/* Dots variant — purple dots instead of a line */
.wp-block-separator.is-style-dots {
    border-top: none;
    max-width: none;
    opacity: 1;
}
.wp-block-separator.is-style-dots::before {
    color: var(--accent-purple);
    font-size: 1.5rem;
    letter-spacing: 1rem;
}

/* The alpha-channel-opacity class WP adds shouldn't flatten our color */
.wp-block-separator.has-alpha-channel-opacity {
    opacity: 0.6;
}
.wp-block-separator.is-style-wide.has-alpha-channel-opacity {
    opacity: 0.35;
}