/* ─── Core-markup normalization (always-loaded) ─────────────────────────────
   WordPress emits a handful of class names into content that IT does not
   fully style — it either leaves them to the active theme, or (in the emoji
   case) ships the rule from a hook a plugin can unhook. This engine replaces
   the theme, and hozio-studio.php's "Frontend cleanup" section unhooks core
   defaults. Between those two facts sits a gap: core-generated markup sitting
   in client post_content with no CSS owner at all.

   That gap is not theoretical. On 2026-08-28 (v1.11.1) eight pasted
   `<img class="emoji">` tags rendered at 667 px square on a live client page
   because the engine had unhooked print_emoji_styles and nothing else claimed
   the rule. This sheet claims them, under our own handle, so the fleet stops
   depending on core winning a race against every other plugin on the site.

   SCOPE — only markup that (a) core generates, (b) is broken or invisible
   without CSS, and (c) is not already owned by an .hzo-* component. Core BLOCK
   styles (wp-block-*) are deliberately NOT re-implemented here: per-block CSS
   still loads correctly for anything rendered through render_block(), and
   guessing at core's block output would calcify that guess into every client
   site — the failure mode CLAUDE.md's "Before touching CSS" section is about.
   ────────────────────────────────────────────────────────────────────────── */

/* ─── WP emoji / smiley images ──────────────────────────────────────────────
   Byte-for-byte the rule core's wp_enqueue_emoji_styles() emits, re-declared
   under our handle. Deliberate duplication: core's copy covers a client whose
   components/ folder is missing (the primitives.css fallback path in
   hzostudio_enqueue_components(), where no _base sheet enqueues at all), ours
   covers any other plugin on the site unhooking core's. Either alone is a
   single point of failure; together, neither is.

   `!important` is core's own choice here and is kept for the same reason it
   exists there: these tags land inside arbitrary content, and the rule has to
   outrank whatever generic `img` rule a theme, page builder or client
   custom.css has already declared. It is scoped to two exact class tokens on
   one element type, so it cannot leak.

   The matching PHP (includes/core-markup-normalize.php) removes these tags
   from rendered output entirely — this sheet is what catches the ones it
   deliberately declines to touch (an emoji <img> with an empty alt), plus
   anything reaching the browser through a path that filter does not run on. */
img.wp-smiley,
img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 0.07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}

/* ─── .screen-reader-text ───────────────────────────────────────────────────
   Core's visually-hidden class — emitted by get_search_form(), comment forms,
   nav markup and pagination, and by this engine at
   includes/wc-shortcodes.php:275 (the WooCommerce quantity label). Themes are
   expected to style it; unstyled it does not degrade quietly, it renders the
   hidden label as visible body copy in the middle of the page.

   Same clip technique as .hzo-sr-only in sr-only.css — kept in sync with it
   deliberately rather than aliased, because that file documents the utility we
   author against and this one documents markup we merely receive. If the
   technique changes there, change it here too. */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Focus reveal — core ships .screen-reader-text on skip links, which become a
   silent keyboard trap if they stay hidden while focused. */
.screen-reader-text:focus,
.screen-reader-text:focus-within {
    position: static !important;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
}

/* ─── Classic caption + alignment classes ───────────────────────────────────
   [caption] shortcode output and the classic alignment classes. This fleet
   forces the raw-text Classic editor, so both still appear in authored content
   and in anything pasted from an older site. Core emits the markup and leaves
   the styling to the theme; with no theme in that role, an uncaptioned float
   collapses to full width and caption text renders as an unstyled paragraph.

   Tokens only, no fixed sizes: the caption inherits the type ladder and steps
   down relatively, so it tracks whatever context it lands in. */
.wp-caption {
    max-width: 100%;
    margin-bottom: var(--space-md);
}

.wp-caption img {
    display: block;
    max-width: 100%;
    height: auto;
}

.wp-caption-text,
.wp-caption .wp-caption-text {
    margin-top: var(--space-xs);
    margin-bottom: 0;
    font-size: 0.875em;
    line-height: var(--lh-snug);
    color: var(--text-muted);
}

.alignnone {
    max-width: 100%;
    height: auto;
}

.aligncenter {
    display: block;
    margin-inline: auto;
    max-width: 100%;
    height: auto;
}

.alignleft {
    float: left;
    max-width: 100%;
    height: auto;
    margin: 0 var(--space-md) var(--space-sm) 0;
}

.alignright {
    float: right;
    max-width: 100%;
    height: auto;
    margin: 0 0 var(--space-sm) var(--space-md);
}

/* Floats are a content-flow primitive with no owner further down the cascade —
   without a clear, the next section's heading rides up beside a floated image.
   Scoped to the engine's section skeleton so it cannot affect component
   internals that use float deliberately. */
.hzo-section::after {
    content: "";
    display: table;
    clear: both;
}

/* Narrow viewports: a floated image beside body copy leaves neither enough
   measure to read. Drop both floats to full-width blocks at the same
   breakpoint long-form-content.css uses for its table reflow. */
@media (max-width: 767px) {
    .alignleft,
    .alignright {
        float: none;
        display: block;
        margin-inline: auto;
        margin-bottom: var(--space-md);
    }
}