/*
==========================================================
CALLOUT BLOCK — callout.css
==========================================================
WHAT IT IS:
A highlighted content box with a border and subtle
background to draw attention to important information.

WHAT IT DOES:
Wraps any ACF WYSIWYG content in a styled container.
Great for tips, warnings, key takeaways, or callouts.

HOW TO USE:
1. In the WordPress block editor add the "Highlighted
   Content" block to any page or post.
2. Type or paste your content into the WYSIWYG field.
3. Optional: small label (Message tab); Box color and
   Text style (Box look tab); Section ID (Advanced).
4. Save and preview the page.
Editor organization: BATCH_8_PLAN.md §31.

All values use boilerplate CSS tokens from style.css.
==========================================================
*/

.special_callout {
    margin: var(--space-8) 0;
}

.special_callout .special_callout_inner {
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    padding: var(--space-8);
    border-radius: var(--radius-md);
}

.special_callout_inner > :first-child {
    margin-top: 0;
    padding-top: 0;
}

.special_callout_inner > :last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

.special_callout_inner p {
    font-size: var(--text-md);
    color: var(--color-primary);
    font-weight: var(--weight-bold);
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .special_callout .special_callout_inner {
        padding: var(--space-6);
    }
}

@media (max-width: 480px) {
    .special_callout .special_callout_inner {
        padding: var(--space-4);
    }
}

/* ==========================================================
   Batch 8H — Highlighted Content (BATCH_8_PLAN.md §31)
   Every rule below needs a class that is only added when the editor
   changes a setting, so saved boxes look exactly as before.
   ========================================================== */

/* ── Small label ───────────────────────────────────────────
   Two classes beat the bold ".special_callout_inner p" rule above; the
   Text style / Box color paragraph rules below skip the label and the
   editor note (:not(...)), so they keep their own look. Written as
   chained :not()s and plain heading lists (not :not(a, b) / :is()), so
   older browsers don't drop these rules. */
.special_callout_inner .special_callout_label {
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent);
    margin: 0 0 var(--space-3) 0;
}

/* ── Text style: Regular ───────────────────────────────────
   Normal-weight body text with space between paragraphs, for longer
   notices. Bold (no class) is the original look. */
.special_callout.special_callout_text_regular .special_callout_inner p:not(.special_callout_label):not(.special_callout_preview_empty) {
    font-size: var(--text-base);
    font-weight: var(--weight-normal);
    color: var(--color-text);
    margin-bottom: var(--space-4);
}

.special_callout.special_callout_text_regular .special_callout_inner p:not(.special_callout_label):not(.special_callout_preview_empty):last-child {
    margin-bottom: 0;
}

/* ── Box color ─────────────────────────────────────────────
   White: white with the usual border. Brand color / Dark: light words.
   Following the theme's dark-background rules: headings and the bold
   statement use --color-text-inverse; Regular body text on Dark uses
   --color-text-inverse-soft (on Brand color it stays full
   --color-text-inverse, the softer white is too faint on a mid-tone
   brand color); p and li inherit. Links take the text color and are
   underlined, since the brand-color link would vanish on a Brand color
   box and is too dark on Dark. Colors typed with the editor's color
   picker still override, as everywhere. */
.special_callout.special_callout_box_white .special_callout_inner {
    background: var(--color-bg);
}

.special_callout.special_callout_box_accent .special_callout_inner {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text-inverse);
}

.special_callout.special_callout_box_dark .special_callout_inner {
    background: var(--color-bg-dark);
    border-color: var(--color-bg-dark);
    color: var(--color-text-inverse-soft);
}

.special_callout.special_callout_box_accent .special_callout_inner p:not(.special_callout_label):not(.special_callout_preview_empty),
.special_callout.special_callout_box_accent .special_callout_inner li,
.special_callout.special_callout_box_dark .special_callout_inner p:not(.special_callout_label):not(.special_callout_preview_empty),
.special_callout.special_callout_box_dark .special_callout_inner li {
    color: inherit;
}

.special_callout.special_callout_box_accent .special_callout_inner h1,
.special_callout.special_callout_box_accent .special_callout_inner h2,
.special_callout.special_callout_box_accent .special_callout_inner h3,
.special_callout.special_callout_box_accent .special_callout_inner h4,
.special_callout.special_callout_box_accent .special_callout_inner h5,
.special_callout.special_callout_box_accent .special_callout_inner h6,
.special_callout.special_callout_box_dark .special_callout_inner h1,
.special_callout.special_callout_box_dark .special_callout_inner h2,
.special_callout.special_callout_box_dark .special_callout_inner h3,
.special_callout.special_callout_box_dark .special_callout_inner h4,
.special_callout.special_callout_box_dark .special_callout_inner h5,
.special_callout.special_callout_box_dark .special_callout_inner h6,
.special_callout.special_callout_box_dark:not(.special_callout_text_regular) .special_callout_inner p:not(.special_callout_label):not(.special_callout_preview_empty) {
    color: var(--color-text-inverse);
}

.special_callout.special_callout_box_accent .special_callout_inner a,
.special_callout.special_callout_box_dark .special_callout_inner a,
.special_callout.special_callout_box_accent .special_callout_inner a:hover,
.special_callout.special_callout_box_dark .special_callout_inner a:hover {
    color: inherit;
    text-decoration: underline;
}

.special_callout.special_callout_box_accent .special_callout_inner .special_callout_label,
.special_callout.special_callout_box_dark .special_callout_inner .special_callout_label {
    color: var(--color-text-inverse);
}

/* ── Label look: Rounded tag (Batch 8H §28 / §31) ──────────
   Added only when the editor picks Rounded tag; Plain text (the default)
   adds nothing. Uses the label's own color (currentColor). The first
   border line is the fallback for browsers without color-mix().
   BOILERPLATE NOTE: the same rule lives in style.css §10c. Kept here so
   this block works when copied to a new project on its own; on a live
   project with §10c in place this copy can be removed. */
.special_callout_inner .special_callout_label.special_callout_label_pill {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid currentColor;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: var(--radius-full);
    background-color: color-mix(in srgb, currentColor 8%, transparent);
    line-height: var(--leading-tight);
}

/* ── Editor-only messages ──────────────────────────────────
   Printed by callout.php in the editor preview only. */
.special_callout_preview_empty,
.special_callout_inner .special_callout_preview_empty {
    box-sizing: border-box;
    margin: var(--space-4) auto;
    padding: var(--space-3) var(--space-6);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    text-align: center;
}

/* ==========================================================
   Section background (shared six-choice pattern, BATCH_8_PLAN.md §35)
   Only added when Background color is chosen; Standard adds nothing, so
   the section looks as before. The colour fills the section and its
   space moves from margin to padding so the colour surrounds the content.
   Nothing sits directly on the section: the box keeps its own Box color and words.
   ========================================================== */
.special_callout.special_callout_sbg {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}

.special_callout_sbg_background     { background-color: var(--color-bg); }
.special_callout_sbg_alt_background { background-color: var(--color-bg-alt); }
.special_callout_sbg_dark           { background-color: var(--color-bg-dark); }
.special_callout_sbg_accent         { background-color: var(--color-accent); }
.special_callout_sbg_custom         { background-color: var(--special_callout-section-bg, var(--color-bg)); }

/* ==========================================================
   Custom box colour + Content look (BATCH_8_PLAN.md §40)
   Box color “Pick my own color” fills the box with the saved colour;
   special_callout_box_ondark is added for a light-text custom colour, and
   for Flat on a dark section. Flat removes the box's fill and border; the
   message sits on the section background.
   ========================================================== */
.special_callout.special_callout_box_custom .special_callout_inner {
    background: var(--special_callout-box-bg, var(--color-bg-alt));
    border-color: var(--special_callout-box-bg, var(--color-border));
}

.special_callout.special_callout_look_flat .special_callout_inner {
    background: transparent;
    border-color: transparent;
    border-radius: 0;
}

.special_callout.special_callout_box_ondark .special_callout_inner {
    color: var(--color-text-inverse-soft);
}

.special_callout.special_callout_box_ondark .special_callout_inner p:not(.special_callout_label):not(.special_callout_preview_empty),
.special_callout.special_callout_box_ondark .special_callout_inner li {
    color: inherit;
}

.special_callout.special_callout_box_ondark .special_callout_inner h1,
.special_callout.special_callout_box_ondark .special_callout_inner h2,
.special_callout.special_callout_box_ondark .special_callout_inner h3,
.special_callout.special_callout_box_ondark .special_callout_inner h4,
.special_callout.special_callout_box_ondark .special_callout_inner h5,
.special_callout.special_callout_box_ondark .special_callout_inner h6,
.special_callout.special_callout_box_ondark:not(.special_callout_text_regular) .special_callout_inner p:not(.special_callout_label):not(.special_callout_preview_empty),
.special_callout.special_callout_box_ondark .special_callout_inner .special_callout_label {
    color: var(--color-text-inverse);
}

.special_callout.special_callout_box_ondark .special_callout_inner a,
.special_callout.special_callout_box_ondark .special_callout_inner a:hover {
    color: inherit;
    text-decoration: underline;
}

.special_callout.special_callout_box_ondark .special_callout_inner a:focus-visible {
    outline: 2px solid var(--color-text-inverse);
    outline-offset: 2px;
}