/*
 * Block editor content — the WordPress-only half of the prose styles.
 *
 * NOT generated: the Astro site has no blocks, so scripts/theme-assets.mjs has
 * nothing to build this from and does not touch it. Every block allowed in
 * inc/blocks.php is styled here; keep the two lists in step.
 *
 * Scoped to .prose, the one container editor content is rendered into on the
 * site, and to .is-root-container, the block editor's content area — this file
 * is also an editor stylesheet (inc/blocks.php). :where() keeps the scope at
 * zero specificity, so on the site these rules weigh exactly what `.x` would.
 */

/* Floats from aligned images must not leak past the end of the text. */
:where(.prose, .is-root-container) { display: flow-root; }

/* ── Text alignment, from the paragraph and heading toolbars ─────────────── */
:where(.prose, .is-root-container) .has-text-align-left { text-align: start; }
:where(.prose, .is-root-container) .has-text-align-center { text-align: center; }
:where(.prose, .is-root-container) .has-text-align-right { text-align: end; }

/* ── Image ───────────────────────────────────────────────────────────────── */
:where(.prose, .is-root-container) .wp-block-image { margin-inline: 0; }
:where(.prose, .is-root-container) .wp-block-image img {
  margin: 0;
  max-inline-size: 100%;
  block-size: auto;
}
:where(.prose, .is-root-container) :is(.wp-block-image, .wp-block-gallery) figcaption {
  margin-block-start: var(--space-xs);
}

:where(.prose, .is-root-container) .aligncenter {
  margin-inline: auto;
  text-align: center;
}
:where(.prose, .is-root-container) .wp-block-image.aligncenter { display: table; }
:where(.prose, .is-root-container) .wp-block-image.aligncenter > figcaption { display: table-caption; caption-side: bottom; }

/* Side-aligned images sit in the text on a wide screen and stack on a phone. */
:where(.prose, .is-root-container) :is(.alignleft, .alignright) {
  max-inline-size: 50%;
  margin-block: var(--space-2xs) var(--space-md);
}
:where(.prose, .is-root-container) .alignleft { float: left; margin-inline: 0 var(--space-lg); }
:where(.prose, .is-root-container) .alignright { float: right; margin-inline: var(--space-lg) 0; }

@media (max-width: 40rem) {
  :where(.prose, .is-root-container) :is(.alignleft, .alignright) {
    float: none;
    max-inline-size: 100%;
    margin-inline: 0;
  }
}

/* ── Gallery ─────────────────────────────────────────────────────────────── */
:where(.prose, .is-root-container) .wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));
  gap: var(--space-sm);
  margin-inline: 0;
}
:where(.prose, .is-root-container) .wp-block-gallery .wp-block-image { margin: 0; }
:where(.prose, .is-root-container) .wp-block-gallery .wp-block-image img { inline-size: 100%; }
:where(.prose, .is-root-container) .wp-block-gallery.is-cropped .wp-block-image img {
  aspect-ratio: 1;
  object-fit: cover;
}
:where(.prose, .is-root-container) .wp-block-gallery > figcaption { grid-column: 1 / -1; }

/* ── Embed (video) ───────────────────────────────────────────────────────── */
:where(.prose, .is-root-container) .wp-block-embed { margin-inline: 0; }
:where(.prose, .is-root-container) .wp-block-embed iframe {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  border: 0;
}
:where(.prose, .is-root-container) .wp-embed-aspect-16-9 iframe { block-size: auto; aspect-ratio: 16 / 9; }
:where(.prose, .is-root-container) .wp-embed-aspect-4-3 iframe { block-size: auto; aspect-ratio: 4 / 3; }
:where(.prose, .is-root-container) .wp-embed-aspect-1-1 iframe { block-size: auto; aspect-ratio: 1; }
:where(.prose, .is-root-container) .wp-embed-aspect-9-16 iframe { block-size: auto; aspect-ratio: 9 / 16; max-inline-size: 22rem; }
:where(.prose, .is-root-container) .wp-block-embed figcaption { margin-block-start: var(--space-xs); }

/* ── Table ───────────────────────────────────────────────────────────────── */
:where(.prose, .is-root-container) .wp-block-table { margin-inline: 0; overflow-x: auto; }
:where(.prose, .is-root-container) .wp-block-table table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
:where(.prose, .is-root-container) .wp-block-table :is(th, td) {
  padding: var(--space-xs) var(--space-sm);
  border-block-end: var(--rule-hair) solid var(--color-rule);
  text-align: start;
  vertical-align: top;
}
:where(.prose, .is-root-container) .wp-block-table thead th { border-block-end-color: var(--color-rule-firm); font-weight: 600; }
:where(.prose, .is-root-container) .wp-block-table figcaption { margin-block-start: var(--space-xs); }

/* ── Quote ───────────────────────────────────────────────────────────────── */
:where(.prose, .is-root-container) blockquote cite {
  display: block;
  margin-block-start: var(--space-xs);
  font-size: var(--text-sm);
  font-style: normal;
}

/* ── Screen-reader text ──────────────────────────────────────────────────── */
/* WordPress prints this class itself (pagination headings, the password form);
   without the rule those labels show on screen. Core's own definition. */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip-path: none;
  height: auto;
  width: auto;
  display: block;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-paper);
  color: var(--color-ink);
  z-index: 100000;
}