/* ============================================================
 * Axismundi — blocks.css
 * v0.1.0 — Phase 2A: WordPress core block mapping
 *
 * Maps `.wp-block-*` core blocks + WP alignment helpers to the
 * Axismundi M3 system. Composes on top of base.css element
 * defaults + prose.css long-form rhythm — does NOT redefine
 * typography. Adds only block-specific chrome (alignment,
 * variant skins, layout helpers) that WP itself emits.
 *
 * Source of truth: docs/B-track/BLOCK-COMPONENT-MAP.md §3.
 *
 * Sections:
 *   §1  WP alignment system (.alignleft/alignright/alignwide…)
 *   §2  Text blocks — paragraph / heading / list (chrome only)
 *   §3  Quote / Pullquote
 *   §4  Code / Preformatted
 *   §5  Separator + 5 style variants
 *   §6  Table — WP variants layered on prose.css
 *   §7  Image / Gallery / Video / Icon
 *   §8  Columns / Row / Stack / Grid / Group + card variants
 *   §9  Buttons (core/button) + 5 style variants (PHP-composed —
 *       see §9 header for ax-button class wiring note)
 *   §10 Search — is-style-filled-search
 *   §11 Widgets — Social Icons / Tag Cloud
 *   §12 Theme identity blocks
 *   §13 List — is-style-list-segmented
 *   §14 Query Loop / Post Template inner blocks
 *   §15 Pagination — Query + Post Navigation
 *   §16 Widget lists
 *   §17 Navigation
 *   §18 Comments
 *
 * Specificity: rules sit at (0,1,0)–(0,2,0). When wrapped in
 * `.prose .entry-content`, prose layer wins on shared elements
 * (correct — prose owns typography, blocks owns block chrome).
 * ============================================================ */

/* ============================================================
 * §1 WP alignment system
 *
 * WP core emits `.alignleft / .alignright / .aligncenter` for
 * inline-flow alignment, `.alignwide / .alignfull` for content-
 * width breakouts. Per-block text alignment uses
 * `.has-text-align-*`. Authors expect literal left/right intent
 * (WP doesn't expose logical "start/end" in editor UI).
 * ============================================================ */
.alignleft {
  float: left;
  margin-inline-end:   var(--space-md);
  margin-block-end:    var(--space-md);
}
.alignright {
  float: right;
  margin-inline-start: var(--space-md);
  margin-block-end:    var(--space-md);
}
.aligncenter {
  display: block;
  margin-inline: auto;
}

/* alignwide / alignfull — content-width breakout helpers.
 *
 * Both rely on a BOUNDED PARENT to read sensibly:
 *   - alignwide expects parent's max-inline-size to be set
 *     (e.g. 65ch for prose) so removing it widens the block
 *     within the layout column, not across the viewport.
 *   - alignfull uses the `calc(50% - 50vw)` margin trick which
 *     ASSUMES the parent has a max-inline-size narrower than
 *     the viewport. If the parent already spans 100vw, the
 *     negative margin pushes the block off-screen.
 *
 * Phase 3 wiring: theme.json's `settings.layout.contentSize` /
 * `wideSize` make the layout container apply max-inline-size
 * to its children automatically — alignwide/full breakouts then
 * "just work" in the editor + front-end.
 *
 * Phase 2A standalone preview: ensure these classes are used
 * inside a container that has its own max-inline-size set, e.g.
 * `<main style="max-inline-size: 65ch; margin-inline: auto;">`.
 * Without that, alignfull may overflow horizontally. */
.alignwide {
  inline-size: 100%;
  max-inline-size: none;
}
.alignfull {
  inline-size: 100vw;
  max-inline-size: none;
  margin-inline: calc(50% - 50vw);
}

/* Per-block text alignment helpers.
 *
 * INTENTIONALLY physical (left/right, not start/end) — this matches
 * the WP block editor toolbar's mental model. When an author picks
 * "right align" in RTL contexts, they want literal right alignment,
 * NOT direction-flipped end-alignment. Converting to logical would
 * break author intent in mixed-direction sites. See §1 header. */
.has-text-align-left   { text-align: left; }
.has-text-align-center { text-align: center; }
.has-text-align-right  { text-align: right; }

/* ============================================================
 * §2 Text blocks — paragraph / heading / list
 *
 * Typography (font, size, line-height) flows from prose.css
 * when wrapped in `.prose`. This section adds only WP-specific
 * chrome — drop-cap support, list block defaults.
 * ============================================================ */
.wp-block-paragraph.has-drop-cap::first-letter {
  float: left;
  font-family: var(--md-ref-typeface-brand);
  font-size: 4em;
  line-height: 0.85;
  font-weight: var(--md-ref-typeface-weight-medium);
  margin-inline-end: var(--space-sm);
  margin-block-start: var(--space-xs);
  color: var(--md-sys-color-primary);
}

/* core/list — base.css §9 already sets padding-inline-start.
 * Block wrapper just normalises margin to 0 (prose owns rhythm). */
.wp-block-list {
  margin-block: 0;
}

/* ============================================================
 * §3 Quote / Pullquote
 *
 * core/quote → maps to <blockquote>; prose.css §6 already styles
 * with primary-bordered emphasis. Block wrapper just opts into
 * a citation row.
 *
 * core/pullquote → distinct visual: large headline-medium type,
 * centered, with top + bottom dividers. Per BLOCK-COMPONENT-MAP §3.
 * ============================================================ */
.wp-block-quote {
  /* prose.css owns the bar + padding; nothing to add */
}
.wp-block-quote cite {
  /* WP outputs <cite> as a sibling of <p>, not nested. prose.css
   * §6 cite styles still apply. */
  display: block;
}

.wp-block-pullquote {
  margin-block: var(--space-xl);
  padding-block: var(--space-lg);
  border-block-start: 1px solid var(--md-sys-color-outline-variant);
  border-block-end:   1px solid var(--md-sys-color-outline-variant);
  text-align: center;
  color: var(--md-sys-color-on-surface);
}
.wp-block-pullquote p {
  font-family:    var(--md-sys-typescale-headline-medium-font);
  font-size:      var(--md-sys-typescale-headline-medium-size);
  line-height:    var(--md-sys-typescale-headline-medium-line-height);
  font-weight:    var(--md-sys-typescale-headline-medium-weight);
  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
  font-style: italic;
}
.wp-block-pullquote cite {
  display: block;
  margin-block-start: var(--space-md);
  font-family: var(--md-sys-typescale-body-small-font);
  font-size:   var(--md-sys-typescale-body-small-size);
  font-style: normal;
  color: var(--md-sys-color-on-surface-variant);
}

/* ============================================================
 * §4 Code / Preformatted
 *
 * base.css §11 already styles <pre> + <code>. WP emits these
 * with class hooks; respect them but inherit base styling.
 * ============================================================ */
.wp-block-code,
.wp-block-preformatted {
  /* base <pre> already provides padding + bg + radius + overflow */
  margin-block: var(--space-md);
  border: 0;
}
.wp-block-code code {
  /* base.css §11 strips inline-pill from `pre code`; preserve */
}

.wp-block-verse {
  /* core/verse — preserves whitespace, serif family per spec */
  margin-block: var(--space-md);
  padding: var(--space-md);
  white-space: pre-wrap;
  font-family: var(--md-ref-typeface-serif);
}

/* ============================================================
 * §5 Separator — 5 style variants
 *
 * core/separator emits <hr class="wp-block-separator …"> with
 * built-in WP variants (is-style-default, is-style-wide,
 * is-style-dots) plus 2 Axismundi-registered styles
 * (is-style-divider-inset, is-style-divider-middle-inset).
 * base.css §8 owns the basic <hr>; this layer adds variant skin.
 * ============================================================ */
.wp-block-separator {
  /* base.css §8 sets the 1px outline-variant line */
  inline-size: 25%;          /* default WP look — short centered rule */
  margin-inline: auto;
  block-size: 1px;
  border: 0;
  background-color: var(--md-sys-color-outline-variant);
}
.wp-block-separator.is-style-wide {
  inline-size: 100%;
}
.wp-block-separator.is-style-dots {
  inline-size: auto;
  background: none;          /* override base bg */
  block-size: auto;
  text-align: center;
  color: var(--md-sys-color-on-surface-variant);
}
.wp-block-separator.is-style-dots::before {
  content: "···";
  letter-spacing: var(--space-sm);
  font-size: 1.5em;
}

/* Axismundi block-styles (registered via PHP register_block_style) */
.wp-block-separator.is-style-divider-inset {
  inline-size: calc(100% - 2 * var(--space-md));
  margin-inline: var(--space-md);
}
.wp-block-separator.is-style-divider-middle-inset {
  inline-size: calc(100% - 2 * var(--space-xl));
  margin-inline: var(--space-xl);
}

/* ============================================================
 * §6 Table — WP variants layered on prose.css
 *
 * prose.css §11 owns the full table styling INSIDE `.prose`
 * (cells, header bg, row separators, wrapper containment).
 * This section:
 *   1. Re-applies wrapper containment for `.wp-block-table` used
 *      OUTSIDE `.prose` (sidebars, widget areas, full-site-editor
 *      page templates without prose wrap).
 *   2. Adds WP-specific class hooks not covered by prose:
 *        .has-fixed-layout                  → table-layout: fixed
 *        .is-style-stripes                  → zebra rows
 *        .has-subtle-light-background-color → WP built-in tint
 *
 * Rules below are idempotent — when a `.wp-block-table` IS inside
 * `.prose`, prose.css's identical containment styles apply at
 * higher specificity (`.prose figure:has(> table)` = 0,2,1) but
 * the visual outcome is the same.
 * ============================================================ */

/* core/table renders as <figure class="wp-block-table"><table>…</table></figure>.
 * The figure is rhythm only. The table owns the visual frame so an optional
 * figcaption remains outside the bordered/radius table surface. */
.wp-block-table {
  margin-block: var(--space-md);
}

/* table owns frame + radius (figure is rhythm only) */
.wp-block-table table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  inline-size: 100%;
}

.wp-block-table thead tr:first-child > th:first-child {
  border-start-start-radius: calc(var(--md-sys-shape-corner-small) - 1px);
}
.wp-block-table thead tr:first-child > th:last-child {
  border-start-end-radius: calc(var(--md-sys-shape-corner-small) - 1px);
}

.wp-block-table thead th {
  border-block-end: 1px solid var(--md-sys-color-outline);
}

.wp-block-table tfoot tr:first-child > th,
.wp-block-table tfoot tr:first-child > td {
  border-block-start: 1px solid var(--md-sys-color-outline);
}

.wp-block-table tfoot tr:last-child > th,
.wp-block-table tfoot tr:last-child > td {
  border-block-end: 0;
}

.wp-block-table .has-fixed-layout {
  table-layout: fixed;
  inline-size: 100%;
}

.wp-block-table th,
.wp-block-table td {
  border: 0;
  padding-block: var(--space-sm);
  padding-inline: var(--space-md);
  border-block-end: 1px solid var(--md-sys-color-outline-variant);
  border-inline-end: 1px solid var(--md-sys-color-outline-variant);
}

/* Last cell in each row — prevent double border with wrapper outline */
.wp-block-table tr > th:last-child,
.wp-block-table tr > td:last-child {
  border-inline-end: 0;
}

.wp-block-table tbody tr:last-child > th,
.wp-block-table tbody tr:last-child > td {
  border-block-end: 0;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd),
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) > th,
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) > td {
  background-color: transparent;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(even) {
  /* Match the prose `th` header band tone (surface-container-high) so the
   * zebra rhythm reads as a continuous alternation starting FROM the header:
   *   header  (stripe tone)
   *   row 1   (base / no fill)
   *   row 2   (stripe tone)  ← same as header
   *   row 3   (base)
   *   row 4   (stripe tone)
   * If we used a different shade here, the pattern would visually "restart"
   * at row 2 and the header would feel disconnected from the stripe rhythm.
   *
   * surface-container-high (not -low) chosen so the stripe tone remains
   * visible when the table is rendered inside the styleguide's `.sg-demo`
   * container (which has `background-color: surface-container-low`).
   * Stripes/header at -low would be invisible against that backdrop.
   * Keep prose.css §11.4 `.prose th` background in sync with this value. */
  background-color: var(--md-sys-color-surface-container-high);
}

.wp-block-table.is-style-stripes tbody tr:nth-child(even) > th,
.wp-block-table.is-style-stripes tbody tr:nth-child(even) > td {
  background-color: var(--md-sys-color-surface-container-high);
}
/* Stripes variant drops the row separator (the bg banding does the job) */
.wp-block-table.is-style-stripes th,
.wp-block-table.is-style-stripes td {
  border: 0;
  border-block-end: 0;
}
.wp-block-table.is-style-stripes tfoot tr:first-child > th,
.wp-block-table.is-style-stripes tfoot tr:first-child > td {
  border-block-start: 1px solid var(--md-sys-color-outline-variant);
}

/* ----- is-style-row-separators -----
 * Strips column separators — horizontal row lines only.
 * Use for dense data tables where vertical grid adds visual noise,
 * or when the outer wrapper border gives enough structure. */
.wp-block-table.is-style-row-separators th,
.wp-block-table.is-style-row-separators td {
  border-inline-end: 0;
}

/* ============================================================
 * §6.x Post metadata blocks
 *
 * Theme template context only (Query Loop / Single post template).
 * Not available in regular post content editor.
 *
 *   core/post-terms        → chip row
 *   core/post-time-to-read → label + schedule icon
 * ============================================================ */

/* --- core/post-terms ---
 * <div class="wp-block-post-terms">
 *   <a>Term</a>
 *   <span class="wp-block-post-terms__separator">, </span>
 *   <a>Term</a>
 * </div>
 * Chip gap replaces separator — hide the text separator. */
.wp-block-post-terms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  margin-block: var(--space-sm);
}

.wp-block-post-terms a {
  display: inline-flex;
  align-items: center;
  padding-block: var(--space-xs);
  padding-inline: var(--space-sm);
  border-radius: var(--md-sys-shape-corner-full);
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  font-family:    var(--md-sys-typescale-label-medium-font);
  font-size:      var(--md-sys-typescale-label-medium-size);
  line-height:    var(--md-sys-typescale-label-medium-line-height);
  font-weight:    var(--md-sys-typescale-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  text-decoration: none;
  transition: background-color 150ms;
}

.wp-block-post-terms a:hover {
  background-color: var(--md-sys-color-surface-container-high);
}

/* Separator hidden — chip gap handles spacing */
.wp-block-post-terms__separator {
  display: none;
}

/* --- core/post-time-to-read ---
 * <p class="wp-block-post-time-to-read">5 minute read</p>
 * schedule icon injected via ::before (Material Symbols — theme chrome scope). */
.wp-block-post-time-to-read {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-block: var(--space-sm);
  font-family:    var(--md-sys-typescale-label-medium-font);
  font-size:      var(--md-sys-typescale-label-medium-size);
  line-height:    var(--md-sys-typescale-label-medium-line-height);
  font-weight:    var(--md-sys-typescale-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

.wp-block-post-time-to-read::before {
  content: 'schedule';
  font-family: 'Material Symbols Rounded', sans-serif;
  font-style:  normal;
  font-size:   16px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  line-height: 1;
  color: inherit;
}

/* ============================================================
 * §7 Image / Gallery / Video / Icon
 *
 * core/image → <figure class="wp-block-image"><img>[<figcaption>]</figure>.
 * Default image style uses Axismundi's medium radius. The registered
 * `is-style-rounded` variant is explicitly re-declared here so this later
 * stylesheet does not override WP core's rounded style by source order.
 * ============================================================ */
.wp-block-image {
  margin-block: var(--space-md);
}
.wp-block-image img {
  border-radius: var(--md-sys-shape-corner-medium);
  max-inline-size: 100%;
  block-size: auto;
}
/* is-style-rounded — WP core source-order guard. */
.wp-block-image.is-style-rounded img {
  border-radius: var(--md-sys-shape-corner-full);
}
.wp-block-image.size-thumbnail img { inline-size: auto; }
.wp-block-image.is-resized img      { inline-size: auto; }

/* core/gallery — <ul> grid of <figure> items. WP emits .columns-N. */
.wp-block-gallery {
  display: grid;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin-block: var(--space-md);
}
.wp-block-gallery.columns-1 { grid-template-columns: 1fr; }
.wp-block-gallery.columns-2 { grid-template-columns: repeat(2, 1fr); }
.wp-block-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
.wp-block-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
.wp-block-gallery.columns-5 { grid-template-columns: repeat(5, 1fr); }
.wp-block-gallery.columns-6 { grid-template-columns: repeat(6, 1fr); }
.wp-block-gallery.columns-7 { grid-template-columns: repeat(7, 1fr); }
.wp-block-gallery.columns-8 { grid-template-columns: repeat(8, 1fr); }

.wp-block-gallery .wp-block-image {
  margin: 0; /* gap owns spacing */
}

/* ============================================================
 * §7.x Video
 *
 * core/video → <figure class="wp-block-video">
 *                <video controls src="…"><track>…</video>
 *                [<figcaption>]
 *              </figure>
 *
 * Browser-native controls — Axismundi sets geometric frame only.
 * <track> (subtitles / captions) is structural HTML, no CSS contract.
 * ============================================================ */
.wp-block-video {
  margin-block: var(--space-md);
}

.wp-block-video video {
  border-radius: var(--md-sys-shape-corner-medium);
  max-inline-size: 100%;
  block-size: auto;
  display: block;
}

/* core/icon — SVG icon block. WP owns the SVG source; Axismundi owns
 * theme-token sizing and currentColor inheritance only. */
.wp-block-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--md-sys-color-on-surface);
  line-height: 0;
}

.wp-block-icon svg {
  inline-size: 1.5em;
  block-size: 1.5em;
  fill: currentColor;
}

/* ============================================================
 * §8 Columns / Row / Stack / Grid / Group + card style variants
 *
 * core/columns / core/group / core/row / core/stack / core/grid
 * produce layout wrappers with no chrome by default — surface only.
 * Card variants (per BLOCK-COMPONENT-MAP §0.3) skin a Group as M3 Card.
 * ============================================================ */
.wp-block-columns {
  display: flex;
  gap: var(--space-md);
  margin-block: var(--space-md);
}
.wp-block-columns.is-not-stacked-on-mobile {
  /* keep horizontal even on narrow viewports — author opt-in */
}
.wp-block-column {
  flex: 1 1 0;
  min-inline-size: 0;
}

@media (max-inline-size: 600px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-direction: column;
  }
}

.wp-block-group {
  /* No chrome by default — just surface */
}

/* Row / Stack / Grid — theme-level gap normalisation only.
 * WP layout support owns the final flex/grid display and alignment attrs. */
.wp-block-row,
.wp-block-group.is-layout-flex {
  gap: var(--space-md);
}

.wp-block-stack,
.wp-block-group.is-vertical {
  gap: var(--space-md);
}

.wp-block-grid,
.wp-block-group.is-layout-grid {
  gap: var(--space-md);
}

/* core/accordion — WP 6.9+ coordinated disclosure list.
 * Interactivity API owns expanded/collapsed behavior. This layer sets
 * neutral M3 surfaces, spacing, and typography. */
.wp-block-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block: var(--space-md);
}

.wp-block-accordion-item {
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background-color: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
}

.wp-block-accordion-heading {
  margin: 0;
  font-family:    var(--md-sys-typescale-title-medium-font);
  font-size:      var(--md-sys-typescale-title-medium-size);
  line-height:    var(--md-sys-typescale-title-medium-line-height);
  font-weight:    var(--md-sys-typescale-title-medium-weight);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
}

.wp-block-accordion-heading__toggle {
  gap: var(--space-sm);
  padding: var(--space-md);
}

.wp-block-accordion-heading__toggle:focus-visible {
  outline: 3px solid var(--md-sys-color-secondary);
  outline-offset: -3px;
}

.wp-block-accordion-heading__toggle-icon {
  color: var(--md-sys-color-on-surface-variant);
}

.wp-block-accordion-panel {
  padding: 0 var(--space-md) var(--space-md);
  color: var(--md-sys-color-on-surface-variant);
}

.wp-block-accordion-item:not(.is-open) .wp-block-accordion-panel {
  display: none;
}

/* Card style variants — registered via register_block_style().
 * Mirror .ax-card / .card--filled / --elevated / --outlined from
 * components.css §3, scoped to core/group blocks. */
.wp-block-group.is-style-card-filled,
.wp-block-group.is-style-card-elevated,
.wp-block-group.is-style-card-outlined {
  padding: var(--comp-card-padding);
  border-radius: var(--comp-card-radius);
}
.wp-block-group.is-style-card-filled {
  background-color: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface);
}
.wp-block-group.is-style-card-elevated {
  background-color: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--md-sys-elevation-shadow-level1);
}
.wp-block-group.is-style-card-outlined {
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  outline: 1px solid var(--md-sys-color-outline-variant);
  outline-offset: -1px; /* sits on the box edge, not outside */
}

/* ============================================================
 * §9 Buttons — core/button + 5 style variants + interaction states
 *
 * WP core already owns the `fill` and `outline` Button styles.
 * Axismundi maps those native slugs to M3 Filled / Outlined, then registers
 * only the missing M3 styles: tonal, elevated, and text.
 *
 * core/button renders as an anchor, so this contract documents visual states
 * with state classes / aria attributes. For real toggle semantics, prefer the
 * component button layer; for post content links, keep core/button as a link.
 * ============================================================ */
.wp-block-button {
  margin-block: var(--space-xs);
}
.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block: var(--space-md);
}

/* Core link — common reset (matches .ax-button base) */
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  block-size: var(--comp-button-height);
  padding-inline: var(--space-lg);
  border: 0;
  border-radius: var(--comp-button-radius);
  font-family:    var(--md-sys-typescale-label-large-font);
  font-size:      var(--md-sys-typescale-label-large-size);
  line-height:    var(--md-sys-typescale-label-large-line-height);
  font-weight:    var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  transition:
    border-radius
      var(--md-sys-motion-curve-fast-spatial-duration)
      var(--md-sys-motion-curve-fast-spatial),
    background-color
      var(--md-sys-motion-curve-fast-effects-duration)
      var(--md-sys-motion-curve-fast-effects),
    color
      var(--md-sys-motion-curve-fast-effects-duration)
      var(--md-sys-motion-curve-fast-effects),
    box-shadow
      var(--md-sys-motion-curve-fast-effects-duration)
      var(--md-sys-motion-curve-fast-effects);
}

/* State layer — same opacity contract as components.css §0. */
.wp-block-button__link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity
      var(--md-sys-motion-curve-fast-effects-duration)
      var(--md-sys-motion-curve-fast-effects);
}

.wp-block-button__link:hover,
.wp-block-button__link.is-hovered {
  text-decoration: none;
}

.wp-block-button__link:hover::before,
.wp-block-button__link.is-hovered::before {
  opacity: var(--md-sys-state-hover-state-layer-opacity);
}

.wp-block-button__link:focus-visible,
.wp-block-button__link.is-focus-visible {
  outline: 3px solid var(--md-sys-color-secondary);
  outline-offset: 2px;
}

.wp-block-button__link:focus-visible::before,
.wp-block-button__link.is-focus-visible::before {
  opacity: var(--md-sys-state-focus-state-layer-opacity);
}

.wp-block-button__link:active,
.wp-block-button__link.is-pressed,
.wp-block-button__link[aria-pressed="true"] {
  border-radius: var(--md-sys-shape-corner-small);
}

.wp-block-button__link:active::before,
.wp-block-button__link.is-pressed::before,
.wp-block-button__link[aria-pressed="true"]::before {
  opacity: var(--md-sys-state-pressed-state-layer-opacity);
}

.wp-block-button__link .material-symbols-rounded {
  font-size: 18px;
  line-height: 1;
  --md-icon-opsz: 20;
  pointer-events: none;
}

.wp-block-button__link > span {
  position: relative;
}

/* 5 variant fallbacks. Defaults to filled when no style set. */
.wp-block-button .wp-block-button__link,
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button.is-style-filled .wp-block-button__link {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.wp-block-button.is-style-tonal .wp-block-button__link {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.wp-block-button.is-style-elevated .wp-block-button__link {
  background-color: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-primary);
  box-shadow: var(--md-sys-elevation-shadow-level1);
}
.wp-block-button.is-style-elevated .wp-block-button__link:hover,
.wp-block-button.is-style-elevated .wp-block-button__link.is-hovered {
  box-shadow: var(--md-sys-elevation-shadow-level2);
}
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outlined .wp-block-button__link {
  background-color: transparent;
  color: var(--md-sys-color-on-surface-variant);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
}
.wp-block-button.is-style-text .wp-block-button__link {
  background-color: transparent;
  color: var(--md-sys-color-primary);
  padding-inline: var(--space-md);
}

/* Toggle selected states — static visual contract for core/button links. */
.wp-block-button.is-style-fill .wp-block-button__link[aria-pressed="true"],
.wp-block-button.is-style-filled .wp-block-button__link[aria-pressed="true"] {
  background-color: var(--md-sys-color-secondary);
  color: var(--md-sys-color-on-secondary);
}
.wp-block-button.is-style-tonal .wp-block-button__link[aria-pressed="true"] {
  background-color: var(--md-sys-color-secondary);
  color: var(--md-sys-color-on-secondary);
}
.wp-block-button.is-style-elevated .wp-block-button__link[aria-pressed="true"] {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  box-shadow: var(--md-sys-elevation-shadow-level0);
}
.wp-block-button.is-style-outline .wp-block-button__link[aria-pressed="true"],
.wp-block-button.is-style-outlined .wp-block-button__link[aria-pressed="true"] {
  background-color: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  box-shadow: inset 0 0 0 1px transparent;
}

/* Disabled links use aria-disabled because core/button is an anchor.
 * Repeat the block wrapper in the selector so disabled beats variant styles. */
.wp-block-button .wp-block-button__link[aria-disabled="true"],
.wp-block-button .wp-block-button__link.is-disabled {
  pointer-events: none;
  cursor: default;
  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
  box-shadow: none;
}

.wp-block-button.is-style-text .wp-block-button__link[aria-disabled="true"],
.wp-block-button.is-style-text .wp-block-button__link.is-disabled {
  background-color: transparent;
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}

/* ============================================================
 * §10 Search
 *
 * core/search block contracts. Four button-position modifiers
 * (button-outside / button-inside / no-button / button-only)
 * × two styles (default outlined / is-style-filled-search)
 * + icon-button variant (has-icon on button element).
 *
 * WP always adds one of the four button-position classes.
 * Pilot fixture: hidden-search.php — showLabel:false, button-outside.
 * ============================================================ */

/* §10.0 screen-reader-text polyfill (WP core owns this in prod;
   lab needs it to faithfully render label-hidden specimens) */
.wp-block-search .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- 10.1 Label ---- */
.wp-block-search__label {
  flex: 0 0 100%;
  font-family: var(--md-sys-typescale-label-large-font);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  font-weight: var(--md-sys-typescale-label-large-weight);
  color: var(--md-sys-color-on-surface-variant);
}

/* ---- 10.2 Default input — outlined pill, 48px ---- */
.wp-block-search__input {
  min-inline-size: 0;
  min-block-size: 48px;
  padding-inline: var(--space-md);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
}

.wp-block-search__input::placeholder {
  color: var(--md-sys-color-on-surface-variant);
}

.wp-block-search__input:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: -1px;
  border-color: var(--md-sys-color-primary);
}

/* ---- 10.3 Button base — tonal pill ---- */
.wp-block-search__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: var(--comp-button-radius);
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  min-block-size: var(--comp-button-height);
  padding-inline: var(--space-lg);
  font-family: var(--md-sys-typescale-label-large-font);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  font-weight: var(--md-sys-typescale-label-large-weight);
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  transition:
    border-radius
      var(--md-sys-motion-curve-fast-spatial-duration)
      var(--md-sys-motion-curve-fast-spatial),
    box-shadow
      var(--md-sys-motion-curve-fast-effects-duration)
      var(--md-sys-motion-curve-fast-effects);
}

.wp-block-search__button:hover {
  text-decoration: none;
}

.wp-block-search__button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: currentColor;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity
      var(--md-sys-motion-curve-fast-effects-duration)
      var(--md-sys-motion-curve-fast-effects);
}

.wp-block-search__button:hover::after {
  opacity: var(--md-sys-state-hover-state-layer-opacity);
}

.wp-block-search__button:focus-visible::after {
  opacity: var(--md-sys-state-focus-state-layer-opacity);
}

.wp-block-search__button:active {
  border-radius: var(--md-sys-shape-corner-medium);
}

.wp-block-search__button:active::after {
  opacity: var(--md-sys-state-pressed-state-layer-opacity);
}

/* ---- 10.4 Icon button (has-icon) ---- */
.wp-block-search__button.has-icon {
  min-inline-size: 40px;
  min-block-size: 40px;
  padding-inline: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background-color: transparent;
  color: var(--md-sys-color-on-surface-variant);
  box-shadow: none;
}

.wp-block-search__button.has-icon:hover {
  background-color: color-mix(in srgb, currentColor 8%, transparent);
}

.wp-block-search__button.has-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex-shrink: 0;
}

.wp-block-search__button.has-icon .material-symbols-rounded {
  font-size: 20px;
  --md-icon-opsz: 20;
  pointer-events: none;
  line-height: 1;
}

/* ---- 10.5 Button-outside — Connected layout ---- */
.wp-block-search__button-outside {
  display: flex;
  align-items: center;
  column-gap: 0;
  row-gap: var(--space-xs);
  flex-wrap: wrap;
}

.wp-block-search__button-outside .wp-block-search__inside-wrapper {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.wp-block-search__button-outside .wp-block-search__input {
  inline-size: 100%;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  border-inline-end: 0;
}

.wp-block-search__button-outside .wp-block-search__button {
  min-block-size: 48px;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--md-sys-shape-corner-full);
  border-end-end-radius: var(--md-sys-shape-corner-full);
}

/* ---- 10.6 Button-inside layout ---- */
.wp-block-search__button-inside .wp-block-search__inside-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  min-block-size: 48px;
  padding-inline: var(--space-md) var(--space-xs);
  overflow: hidden;
}

.wp-block-search__button-inside .wp-block-search__input {
  border: 0;
  border-radius: 0;
  padding: 0;
  min-block-size: auto;
  flex: 1 1 auto;
}

.wp-block-search__button-inside .wp-block-search__input:focus-visible {
  outline: none;
}

.wp-block-search__button-inside .wp-block-search__button {
  min-block-size: 40px;
  background-color: transparent;
  color: var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-full);
  box-shadow: none;
}

.wp-block-search__button-inside .wp-block-search__button:hover {
  background-color: color-mix(in srgb, currentColor 8%, transparent);
}

.wp-block-search__button-inside .wp-block-search__button.has-icon {
  min-inline-size: 40px;
  min-block-size: 40px;
  padding-inline: 0;
  color: var(--md-sys-color-on-surface-variant);
}

/* ---- 10.7 No-button layout ---- */
.wp-block-search__no-button {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* ---- 10.8 Button-only layout ---- */
.wp-block-search__button-only {
  display: flex;
}

/* ============================================================
 * §10.9 is-style-filled-search — MD3 Search Bar surface
 *
 * Filled pill: surface-container-high + elevation-shadow-level3.
 * "Pill surface" lands on different elements per button position:
 *   button-inside  → form root  (button + input share the pill)
 *   button-outside → __inside-wrapper  (button floats right)
 *   no-button      → __inside-wrapper  (input-only pill)
 *   button-only    → governed by button-base (§10.3/10.4)
 * ============================================================ */

/* Shared filled-input reset (overrides outlined defaults §10.2) */
.wp-block-search.is-style-filled-search .wp-block-search__input {
  border: 0;
  border-radius: 0;
  padding: 0;
  min-block-size: auto;
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
}

.wp-block-search.is-style-filled-search .wp-block-search__input::placeholder {
  color: var(--md-sys-color-on-surface-variant);
}

.wp-block-search.is-style-filled-search .wp-block-search__input:focus-visible {
  outline: none;
}

/* Filled — button-inside (canonical MD3 search bar) */
.wp-block-search.is-style-filled-search.wp-block-search__button-inside {
  background-color: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-full);
  box-shadow: var(--md-sys-elevation-shadow-level3);
  color: var(--md-sys-color-on-surface);
}

.wp-block-search.is-style-filled-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  inline-size: 100%;
  min-block-size: 56px;
  padding-inline: var(--space-xs) var(--space-md);
  border: 0;
}

.wp-block-search.is-style-filled-search.wp-block-search__button-inside .wp-block-search__input {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.wp-block-search.is-style-filled-search.wp-block-search__button-inside .wp-block-search__button {
  min-block-size: 40px;
  background-color: transparent;
  color: var(--md-sys-color-primary);
  box-shadow: none;
}

.wp-block-search.is-style-filled-search.wp-block-search__button-inside .wp-block-search__button.has-icon {
  order: -1;
  min-inline-size: 40px;
  min-block-size: 40px;
  padding-inline: 0;
  color: var(--md-sys-color-on-surface-variant);
}

/* Filled — button-outside (pill on wrapper; button floats right) */
.wp-block-search.is-style-filled-search.wp-block-search__button-outside {
  color: var(--md-sys-color-on-surface);
}

.wp-block-search.is-style-filled-search.wp-block-search__button-outside .wp-block-search__inside-wrapper {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  align-items: center;
  min-block-size: 56px;
  padding-inline: var(--space-md);
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background-color: var(--md-sys-color-surface-container-high);
  box-shadow: var(--md-sys-elevation-shadow-level3);
}

/* Filled — no-button (pill on wrapper; input fills it) */
.wp-block-search.is-style-filled-search.wp-block-search__no-button .wp-block-search__inside-wrapper {
  display: flex;
  align-items: center;
  min-block-size: 56px;
  padding-inline: var(--space-md);
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background-color: var(--md-sys-color-surface-container-high);
  box-shadow: var(--md-sys-elevation-shadow-level3);
}

.wp-block-search.is-style-filled-search.wp-block-search__no-button .wp-block-search__input {
  flex: 1 1 auto;
  min-inline-size: 0;
}

/* ---- 10.10 Responsive ---- */
@media (max-inline-size: 600px) {
  .wp-block-search__button-outside .wp-block-search__button {
    padding-inline: var(--space-md);
  }
}

/* ============================================================
 * §11 Widgets — Social Icons / Tag Cloud
 *
 * CSS-only widget contracts that do not require template context.
 * Brand-specific social colors remain WP core responsibility; Axismundi
 * defines only neutral default surfaces and geometry.
 * ============================================================ */
.wp-block-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: 0;
  margin-block: var(--space-md);
  list-style: none;
}

.wp-block-social-link {
  display: inline-flex;
}

.wp-block-social-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--md-sys-shape-corner-full);
  background-color: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
}

.wp-block-social-link a:hover {
  background-color: var(--md-sys-color-surface-container-highest);
}

.wp-block-social-link svg {
  inline-size: 20px;
  block-size: 20px;
  fill: currentColor;
}

.wp-block-social-links.is-style-logos-only .wp-block-social-link a {
  background-color: transparent;
}

.wp-block-social-links.is-style-pill-shape .wp-block-social-link a {
  inline-size: auto;
  padding-inline: var(--space-md);
}

.wp-block-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  margin-block: var(--space-md);
}

.wp-block-tag-cloud a,
.wp-block-tag-cloud .tag-cloud-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding-block: var(--space-xs);
  padding-inline: var(--space-sm);
  border-radius: var(--md-sys-shape-corner-full);
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  font-family:    var(--md-sys-typescale-label-medium-font);
  font-size:      var(--md-sys-typescale-label-medium-size) !important;
  line-height:    var(--md-sys-typescale-label-medium-line-height);
  font-weight:    var(--md-sys-typescale-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  text-decoration: none;
}

.wp-block-tag-cloud a:hover,
.wp-block-tag-cloud .tag-cloud-link:hover {
  background-color: var(--md-sys-color-surface-container-high);
}

.wp-block-tag-cloud.is-style-outline a,
.wp-block-tag-cloud.is-style-outline .tag-cloud-link {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
}

/* ============================================================
 * §12 Theme identity blocks
 *
 * CSS-only theme blocks that can be represented without rendering an
 * actual template. Navigation / Query Loop / Template Part remain routed
 * to the pattern/template styleguide.
 * ============================================================ */
.wp-block-site-title {
  margin-block: 0;
  font-family:    var(--md-sys-typescale-title-large-font);
  font-size:      var(--md-sys-typescale-title-large-size);
  line-height:    var(--md-sys-typescale-title-large-line-height);
  font-weight:    var(--md-sys-typescale-title-large-weight);
  letter-spacing: var(--md-sys-typescale-title-large-tracking);
}

.wp-block-site-title a {
  color: inherit;
  text-decoration: none;
}

.wp-block-site-tagline {
  margin-block: 0;
  color: var(--md-sys-color-on-surface-variant);
  font-family:    var(--md-sys-typescale-body-medium-font);
  font-size:      var(--md-sys-typescale-body-medium-size);
  line-height:    var(--md-sys-typescale-body-medium-line-height);
  font-weight:    var(--md-sys-typescale-body-medium-weight);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}

.wp-block-site-logo {
  margin-block: 0;
  line-height: 0;
}

.wp-block-site-logo img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

.wp-block-site-logo.is-style-rounded img {
  border-radius: var(--md-sys-shape-corner-full);
}

/* ============================================================
 * §13 List — is-style-list-segmented
 *
 * Axismundi block style (registered via register_block_style on
 * core/list). Mirrors .ax-list--segmented from components.css §26 —
 * 2px gap between items + per-item large radius + container fill.
 * ============================================================ */
.wp-block-list.is-style-list-segmented {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wp-block-list.is-style-list-segmented > li {
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  padding: var(--space-md);
  border-radius: var(--md-sys-shape-corner-large);
}
/* Reset task-list bullet behavior inside segmented list (base §9 :has rule
 * still applies; segmented already has list-style: none). */
.wp-block-list.is-style-list-segmented > li > input[type="checkbox"]:first-child {
  margin-inline-end: var(--space-sm);
}

/* ============================================================
 * §14 Query Loop / Post Template inner blocks
 *
 * CSS contract for theme-template post lists:
 *   core/query                  → no chrome
 *   core/post-template          → list reset
 *   core/post-featured-image    → image frame
 *   core/post-title             → linked title
 *   core/post-date              → metadata label
 *   core/post-excerpt           → constrained supporting copy
 *   core/post-author-name       → metadata label
 *   core/avatar                 → circular author media
 * ============================================================ */
.wp-block-query {
  /* Query itself is a data container; child blocks own visuals. */
}

.wp-block-post-template {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wp-block-post-featured-image {
  margin-block: 0;
  overflow: hidden;
  border-radius: var(--md-sys-shape-corner-medium);
}

.wp-block-post-featured-image img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.wp-block-post-title a {
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
}

.wp-block-post-title a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.wp-block-post-date {
  color: var(--md-sys-color-on-surface-variant);
  font-family:    var(--md-sys-typescale-label-medium-font);
  font-size:      var(--md-sys-typescale-label-medium-size);
  line-height:    var(--md-sys-typescale-label-medium-line-height);
  font-weight:    var(--md-sys-typescale-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
}

.wp-block-post-date a {
  color: inherit;
  text-decoration: none;
}

.wp-block-post-excerpt__excerpt {
  display: -webkit-box;
  overflow: hidden;
  color: var(--md-sys-color-on-surface-variant);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.wp-block-post-excerpt__more-link {
  color: var(--md-sys-color-primary);
  font-family:    var(--md-sys-typescale-label-medium-font);
  font-size:      var(--md-sys-typescale-label-medium-size);
  line-height:    var(--md-sys-typescale-label-medium-line-height);
  font-weight:    var(--md-sys-typescale-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  text-decoration: none;
}

.wp-block-post-author-name {
  color: var(--md-sys-color-on-surface-variant);
  font-family:    var(--md-sys-typescale-label-medium-font);
  font-size:      var(--md-sys-typescale-label-medium-size);
  line-height:    var(--md-sys-typescale-label-medium-line-height);
  font-weight:    var(--md-sys-typescale-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
}

.wp-block-post-author-name a {
  color: inherit;
  text-decoration: none;
}

.wp-block-avatar img {
  display: block;
  border-radius: var(--md-sys-shape-corner-full);
}

/* ============================================================
 * §15 Pagination — Query Pagination + Post Navigation Link
 *
 * Query pagination is a chip row. Single-post navigation is a paired
 * text-button surface; layout wrappers can decide left/right placement.
 * ============================================================ */
.wp-block-query-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.wp-block-query-pagination-previous a,
.wp-block-query-pagination-next a {
  display: inline-flex;
  gap: var(--space-xs);
  align-items: center;
  padding-block: var(--space-xs);
  padding-inline: var(--space-sm);
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-primary);
  font-family:    var(--md-sys-typescale-label-large-font);
  font-size:      var(--md-sys-typescale-label-large-size);
  line-height:    var(--md-sys-typescale-label-large-line-height);
  font-weight:    var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  text-decoration: none;
  transition: background-color 150ms;
}

.wp-block-query-pagination-previous a:hover,
.wp-block-query-pagination-next a:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}

.wp-block-query-pagination-numbers {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
}

.wp-block-query-pagination-numbers .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 36px;
  min-block-size: 36px;
  padding-inline: var(--space-sm);
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface);
  font-family:    var(--md-sys-typescale-label-large-font);
  font-size:      var(--md-sys-typescale-label-large-size);
  line-height:    var(--md-sys-typescale-label-large-line-height);
  font-weight:    var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  text-decoration: none;
  transition: background-color 150ms;
}

.wp-block-query-pagination-numbers a.page-numbers:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}

.wp-block-query-pagination-numbers .page-numbers.current {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.wp-block-query-pagination-numbers .page-numbers.dots {
  min-inline-size: auto;
  padding-inline: var(--space-xs);
  color: var(--md-sys-color-on-surface-variant);
}

.wp-block-post-navigation-link {
  font-family:    var(--md-sys-typescale-label-large-font);
  font-size:      var(--md-sys-typescale-label-large-size);
  line-height:    var(--md-sys-typescale-label-large-line-height);
  font-weight:    var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
}

.wp-block-post-navigation-link a {
  display: inline-flex;
  gap: var(--space-xs);
  align-items: center;
  padding-block: var(--space-sm);
  padding-inline: var(--space-md);
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
  transition: background-color 150ms;
}

.wp-block-post-navigation-link a:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}

/* ============================================================
 * §16 Widget lists
 *
 * Shared contract for sidebar/footer information lists.
 * The list widgets all use the same reset + link token + metadata label
 * pattern; Calendar and RSS remain outside this contract.
 *
 *   core/latest-posts    → <ul class="wp-block-latest-posts">
 *   core/archives        → <ul class="wp-block-archives">
 *   core/categories      → <ul class="wp-block-categories">
 *   core/page-list       → <ul class="wp-block-page-list">
 *   core/latest-comments → <ol class="wp-block-latest-comments">
 * ============================================================ */
.wp-block-latest-posts,
.wp-block-archives,
.wp-block-categories,
.wp-block-page-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: 0;
  margin: 0;
  list-style: none;
}

.wp-block-page-list .wp-block-page-list,
.wp-block-categories .children {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-inline-start: var(--space-md);
  margin-block-start: var(--space-xs);
  list-style: none;
}

.wp-block-latest-posts a,
.wp-block-archives a,
.wp-block-categories a,
.wp-block-page-list .wp-block-pages-list__item__link {
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-body-medium-font);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  text-decoration: none;
}

.wp-block-latest-posts a:hover,
.wp-block-archives a:hover,
.wp-block-categories a:hover,
.wp-block-page-list .wp-block-pages-list__item__link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.wp-block-latest-posts__post-date,
.wp-block-latest-posts__post-author {
  display: block;
  margin-block-start: 2px;
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-sys-typescale-label-small-font);
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: var(--md-sys-typescale-label-small-line-height);
  font-weight: var(--md-sys-typescale-label-small-weight);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
}

.wp-block-latest-posts__post-excerpt {
  margin-block-start: var(--space-xs);
}

.wp-block-latest-posts__post-excerpt p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-sys-typescale-body-small-font);
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line-height);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.wp-block-latest-posts__featured-image {
  display: block;
  overflow: hidden;
  margin-block-end: var(--space-xs);
  border-radius: var(--md-sys-shape-corner-small);
}

.wp-block-latest-posts__featured-image img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.wp-block-archives-dropdown select,
.wp-block-categories-dropdown select {
  inline-size: 100%;
  padding-block: var(--space-sm);
  padding-inline: var(--space-md);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-body-medium-font);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
}

.wp-block-latest-comments {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 0;
  margin: 0;
  list-style: none;
}

.wp-block-latest-comments__comment-meta {
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-sys-typescale-label-small-font);
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: var(--md-sys-typescale-label-small-line-height);
  font-weight: var(--md-sys-typescale-label-small-weight);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
}

.wp-block-latest-comments__comment-author,
.wp-block-latest-comments__comment-link {
  color: var(--md-sys-color-on-surface);
  font-weight: 500;
  text-decoration: none;
}

.wp-block-latest-comments__comment-author:hover,
.wp-block-latest-comments__comment-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wp-block-latest-comments__comment-date {
  display: block;
  margin-block-start: 2px;
}

.wp-block-latest-comments__comment-excerpt p {
  display: -webkit-box;
  margin: var(--space-xs) 0 0;
  overflow: hidden;
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-sys-typescale-body-small-font);
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line-height);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* ============================================================
 * §17 Navigation — core/navigation
 *
 * WP core block styles handle: positioning, z-index, hidden-by-default,
 * hamburger show/hide, submenu absolute positioning, and responsive menu
 * state. Axismundi adds visual token contract only.
 *
 * Mobile overlay visual tokens are set here, but toggle state
 * (`is-menu-open`) is WP Interactivity API. Verify on the Pilot WP
 * instance before marking mobile navigation PASS.
 *
 * TT5 uses overlayBackgroundColor:"base" / overlayTextColor:"contrast".
 * Those slugs are not in axismundi-pilot/theme.json, so the overlay uses
 * explicit MD3 sys tokens below.
 * ============================================================ */
.wp-block-navigation-item__content {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding-block: var(--space-xs);
  padding-inline: var(--space-sm);
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface);
  font-family:    var(--md-sys-typescale-label-large-font);
  font-size:      var(--md-sys-typescale-label-large-size);
  line-height:    var(--md-sys-typescale-label-large-line-height);
  font-weight:    var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  text-decoration: none;
  transition: background-color 150ms;
}

.wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.wp-block-navigation-item.is-item-focused > .wp-block-navigation-item__content {
  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}

.wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation-item[class*="current-menu"] > .wp-block-navigation-item__content {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.wp-block-navigation-submenu__toggle {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
}

.wp-block-navigation__submenu-container {
  padding-block: var(--space-xs);
  border-radius: var(--md-sys-shape-corner-medium);
  background-color: var(--md-sys-color-surface-container-high);
  box-shadow: var(--md-sys-elevation-shadow-level2);
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  inline-size: 100%;
  border-radius: var(--md-sys-shape-corner-small);
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs);
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: none;
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  transition: background-color 150ms;
}

.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-close:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}

.wp-block-navigation__responsive-container {
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}

.wp-block-navigation__responsive-container .wp-block-navigation-item__content {
  inline-size: 100%;
  border-radius: var(--md-sys-shape-corner-small);
}

/* ============================================================
 * §18 Comments
 *
 * core/comments block family. Pilot fixture: patterns/comments.php
 *
 * Block map:
 *   wp-block-comments            → outer wrapper (spacing only, WP owns)
 *   wp-block-comments-title      → "N thoughts on…" heading
 *   wp-block-avatar              → circle crop
 *   wp-block-comment-date        → body-small, on-surface-variant
 *   wp-block-comment-author-name → label-medium, on-surface
 *   wp-block-comment-content     → body-medium (inherits)
 *   wp-block-comment-reply-link  → text button, primary
 *   wp-block-comment-edit-link   → text button, primary (admin)
 *   wp-block-comments-pagination → same token set as §15 query pagination
 *   wp-block-post-comments-form  → outlined inputs + filled submit
 *
 * WP owns: nested threading (ol.children indent), avatar fetch,
 * comment moderation state, form validation, AJAX submit.
 * Axismundi: visual token layer only.
 * ============================================================ */
.wp-block-comments-title {
  color: var(--md-sys-color-on-surface-variant);
}

.wp-block-avatar img {
  display: block;
  border-radius: var(--comp-avatar-radius);
}

.wp-block-comment-date a {
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-sys-typescale-body-small-font);
  font-size:   var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line-height);
  text-decoration: none;
}

.wp-block-comment-author-name a {
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-label-medium-font);
  font-size:   var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line-height);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  text-decoration: none;
}

.wp-block-comment-content {
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-body-medium-font);
  font-size:   var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
}

.wp-block-comment-reply-link a,
.wp-block-comment-edit-link a {
  padding-block: var(--space-xs);
  padding-inline: var(--space-xs);
  border-radius: var(--md-sys-shape-corner-small);
  color: var(--md-sys-color-primary);
  font-family: var(--md-sys-typescale-label-medium-font);
  font-size:   var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line-height);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  text-decoration: none;
  transition: background-color 150ms;
}

.wp-block-comment-reply-link a:hover,
.wp-block-comment-edit-link a:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}

.wp-block-comments-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.wp-block-comments-pagination-previous a,
.wp-block-comments-pagination-next a {
  display: inline-flex;
  gap: var(--space-xs);
  align-items: center;
  padding-block: var(--space-xs);
  padding-inline: var(--space-sm);
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-primary);
  font-family: var(--md-sys-typescale-label-large-font);
  font-size:   var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  font-weight: var(--md-sys-typescale-label-large-weight);
  text-decoration: none;
  transition: background-color 150ms;
}

.wp-block-comments-pagination-previous a:hover,
.wp-block-comments-pagination-next a:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}

.comment-form label {
  display: block;
  margin-block-end: var(--space-xs);
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-sys-typescale-label-large-font);
  font-size:   var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  font-weight: var(--md-sys-typescale-label-large-weight);
}

.comment-form .required {
  color: var(--md-sys-color-error);
}

.comment-form p {
  margin-block: 0 var(--space-md);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
  display: block;
  inline-size: 100%;
  min-block-size: 48px;
  padding-inline: var(--space-md);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-body-large-font);
  font-size:   var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
}

.comment-form input[type="text"]:focus-visible,
.comment-form input[type="email"]:focus-visible,
.comment-form input[type="url"]:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: -1px;
  border-color: var(--md-sys-color-primary);
}

.comment-form textarea {
  display: block;
  inline-size: 100%;
  min-block-size: 120px;
  padding-block: var(--space-sm);
  padding-inline: var(--space-md);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-medium);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-body-large-font);
  font-size:   var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  resize: vertical;
}

.comment-form textarea:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: -1px;
  border-color: var(--md-sys-color-primary);
}

.comment-form .submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--comp-button-height);
  padding-inline: var(--space-lg);
  border: 0;
  border-radius: var(--comp-button-radius);
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font-family: var(--md-sys-typescale-label-large-font);
  font-size:   var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  font-weight: var(--md-sys-typescale-label-large-weight);
  cursor: pointer;
  transition: filter 150ms;
}

.comment-form .submit:hover {
  filter: brightness(0.92);
}