/*
 * Utils — observatorio-cero-theme
 *
 * Layer 2 of the 3-layer CSS architecture:
 *   Layer 1: Design tokens in theme.json (generates --wp--custom--* properties)
 *   Layer 2: Reusable utility classes (this file)
 *   Layer 3: Block Styles via register_block_style() in inc/block-styles.php
 *
 * All values reference design tokens from theme.json via CSS custom properties.
 * No hardcoded values. Components apply these classes instead of redeclaring
 * the same effects.
 *
 * Each utility also targets its corresponding block style class
 * (e.g. .oc-glass also styles .wp-block-group.is-style-glass) so the
 * visual effect is defined in a single place.
 *
 * Candidates (per D5):
 *   E1  — Glassmorphism
 *   E2  — Button shadow + hover elevation
 *   E3  — Image zoom on hover
 *   H2  — Card hover (shadow + border accent)
 *   H3  — "Read more" link hover (translateX + scale)
 *   A1  — Focus visible outline
 *   A2  — Reduced motion (global)
 */

/* ═══════════════════════════════════════════
 * Visual Effects
 * ═══════════════════════════════════════════ */

/* E1 — Glassmorphism (backdrop-filter + translucent bg + subtle border) */
.oc-glass,
.wp-block-group.is-style-glass {
	backdrop-filter: blur(var(--wp--custom--site-header--glass-blur));
	-webkit-backdrop-filter: blur(var(--wp--custom--site-header--glass-blur));
	background-color: color-mix(in srgb, var(--wp--preset--color--surface) var(--wp--custom--blend--glass), transparent);
	border: var(--wp--custom--ui--decoration--border) solid color-mix(in srgb, var(--wp--preset--color--outline-variant) var(--wp--custom--blend--border), transparent);
}

/* E2 — Button shadow + hover elevation
 * Apply to a core/button block from Gutenberg via
 * "Additional CSS classes" → the class lands on the .wp-block-button
 * wrapper. The real visual effect is applied to .wp-block-button__link.
 * Also supports the class placed directly on the link itself.
 *
 * IMPORTANT: do NOT apply border/box-shadow to the wrapper; the link already
 * has its own border-radius and border from the block, so adding a border to
 * the wrapper creates a double-ring effect. */
.wp-block-button.oc-button-shadow .wp-block-button__link,
.wp-block-button__link.oc-button-shadow {
	border: var(--wp--custom--ui--border-width--medium) solid color-mix(in srgb, var(--wp--preset--color--on-primary) var(--wp--custom--blend--border-strong), transparent);
	box-shadow:
		0 var(--wp--custom--ui--shadow--button-base-offset-y) var(--wp--custom--ui--shadow--button-base-blur) color-mix(in srgb, var(--wp--preset--color--on-surface) var(--wp--custom--blend--shadow--primary), transparent),
		0 var(--wp--custom--ui--shadow--button-base-offset-y-secondary) var(--wp--custom--ui--shadow--button-base-blur-secondary) color-mix(in srgb, var(--wp--preset--color--on-surface) var(--wp--custom--blend--shadow--secondary), transparent);
	transition:
		transform var(--wp--custom--mode-transitions--duration) var(--wp--custom--mode-transitions--timing),
		box-shadow var(--wp--custom--mode-transitions--duration) var(--wp--custom--mode-transitions--timing),
		background-color var(--wp--custom--mode-transitions--duration) var(--wp--custom--mode-transitions--timing),
		border-color var(--wp--custom--mode-transitions--duration) var(--wp--custom--mode-transitions--timing);
}

.wp-block-button.oc-button-shadow .wp-block-button__link:hover,
.wp-block-button.oc-button-shadow .wp-block-button__link:focus-visible,
.wp-block-button__link.oc-button-shadow:hover,
.wp-block-button__link.oc-button-shadow:focus-visible {
	transform: scale(var(--wp--custom--ui--scale--text));
	box-shadow:
		0 var(--wp--custom--ui--shadow--button-hover-offset-y) var(--wp--custom--ui--shadow--button-hover-blur) color-mix(in srgb, var(--wp--preset--color--on-surface) var(--wp--custom--blend--shadow-hover--primary), transparent),
		0 var(--wp--custom--ui--shadow--button-hover-offset-y-secondary) var(--wp--custom--ui--shadow--button-hover-blur-secondary) color-mix(in srgb, var(--wp--preset--color--on-surface) var(--wp--custom--blend--shadow-hover--secondary), transparent);
}

/* Outline Button Global Style (fixes elements.button solid background conflict) */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button__link.is-style-outline,
.wp-block-button.is-style-outline a.wp-block-button__link {
	background-color: transparent !important;
	background: transparent !important;
	border-style: solid !important;
	border-width: var(--wp--custom--ui--border-width--thin) !important;
	border-color: currentColor !important;
	color: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
.wp-block-button__link.is-style-outline:hover,
.wp-block-button__link.is-style-outline:focus-visible,
.wp-block-button.is-style-outline a.wp-block-button__link:hover,
.wp-block-button.is-style-outline a.wp-block-button__link:focus-visible {
	background-color: color-mix(in srgb, var(--wp--preset--color--surface-container-low) 80%, transparent) !important;
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary) !important;
}

/* Contextual Outline Buttons inside On-Primary containers (Heros, Banners) */
.has-on-primary-color .wp-block-button.is-style-outline .wp-block-button__link,
.has-on-primary-color .wp-block-button__link.is-style-outline,
.wp-block-cover.has-on-primary-color .wp-block-button.is-style-outline .wp-block-button__link,
.has-oceanic-hero-gradient-background .wp-block-button.is-style-outline .wp-block-button__link,
.oc-hero-banner .wp-block-button.is-style-outline .wp-block-button__link,
.oc-hero-page .wp-block-button.is-style-outline .wp-block-button__link,
.oc-hero .wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link.has-on-primary-color {
	color: var(--wp--preset--color--on-primary);
	border-color: var(--wp--preset--color--on-primary);
	background-color: transparent !important;
}

[data-theme="dark"] .has-on-primary-color .wp-block-button.is-style-outline .wp-block-button__link,
[data-theme="dark"] .has-on-primary-color .wp-block-button__link.is-style-outline,
[data-theme="dark"] .wp-block-cover.has-on-primary-color .wp-block-button.is-style-outline .wp-block-button__link,
[data-theme="dark"] .has-oceanic-hero-gradient-background .wp-block-button.is-style-outline .wp-block-button__link,
[data-theme="dark"] .oc-hero-banner .wp-block-button.is-style-outline .wp-block-button__link,
[data-theme="dark"] .oc-hero-page .wp-block-button.is-style-outline .wp-block-button__link,
[data-theme="dark"] .oc-hero .wp-block-button.is-style-outline .wp-block-button__link,
[data-theme="dark"] .wp-block-button.is-style-outline .wp-block-button__link.has-on-primary-color {
	color: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary) !important;
}

[data-theme="high-contrast"] .has-on-primary-color .wp-block-button.is-style-outline .wp-block-button__link,
[data-theme="high-contrast"] .has-on-primary-color .wp-block-button__link.is-style-outline,
[data-theme="high-contrast"] .wp-block-cover.has-on-primary-color .wp-block-button.is-style-outline .wp-block-button__link,
[data-theme="high-contrast"] .has-oceanic-hero-gradient-background .wp-block-button.is-style-outline .wp-block-button__link,
[data-theme="high-contrast"] .oc-hero-banner .wp-block-button.is-style-outline .wp-block-button__link,
[data-theme="high-contrast"] .oc-hero-page .wp-block-button.is-style-outline .wp-block-button__link,
[data-theme="high-contrast"] .oc-hero .wp-block-button.is-style-outline .wp-block-button__link,
[data-theme="high-contrast"] .wp-block-button.is-style-outline .wp-block-button__link.has-on-primary-color {
	color: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary) !important;
}

.has-on-primary-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-on-primary-color .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
.has-on-primary-color .wp-block-button__link.is-style-outline:hover,
.has-on-primary-color .wp-block-button__link.is-style-outline:focus-visible,
.wp-block-cover.has-on-primary-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-cover.has-on-primary-color .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
.has-oceanic-hero-gradient-background .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-oceanic-hero-gradient-background .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
.oc-hero-banner .wp-block-button.is-style-outline .wp-block-button__link:hover,
.oc-hero-banner .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
.oc-hero-page .wp-block-button.is-style-outline .wp-block-button__link:hover,
.oc-hero-page .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
.oc-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
.oc-hero .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
.wp-block-button.is-style-outline .wp-block-button__link.has-on-primary-color:hover,
.wp-block-button.is-style-outline .wp-block-button__link.has-on-primary-color:focus-visible {
	background-color: color-mix(in srgb, var(--wp--preset--color--on-primary) 15%, transparent) !important;
	color: var(--wp--preset--color--on-primary);
	border-color: var(--wp--preset--color--on-primary);
}

[data-theme="dark"] .has-on-primary-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
[data-theme="dark"] .has-on-primary-color .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
[data-theme="dark"] .has-on-primary-color .wp-block-button__link.is-style-outline:hover,
[data-theme="dark"] .has-on-primary-color .wp-block-button__link.is-style-outline:focus-visible,
[data-theme="dark"] .wp-block-cover.has-on-primary-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
[data-theme="dark"] .wp-block-cover.has-on-primary-color .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
[data-theme="dark"] .has-oceanic-hero-gradient-background .wp-block-button.is-style-outline .wp-block-button__link:hover,
[data-theme="dark"] .has-oceanic-hero-gradient-background .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
[data-theme="dark"] .oc-hero-banner .wp-block-button.is-style-outline .wp-block-button__link:hover,
[data-theme="dark"] .oc-hero-banner .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
[data-theme="dark"] .oc-hero-page .wp-block-button.is-style-outline .wp-block-button__link:hover,
[data-theme="dark"] .oc-hero-page .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
[data-theme="dark"] .oc-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
[data-theme="dark"] .oc-hero .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
[data-theme="dark"] .wp-block-button.is-style-outline .wp-block-button__link.has-on-primary-color:hover,
[data-theme="dark"] .wp-block-button.is-style-outline .wp-block-button__link.has-on-primary-color:focus-visible {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 15%, transparent) !important;
	color: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary) !important;
}

[data-theme="high-contrast"] .has-on-primary-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
[data-theme="high-contrast"] .has-on-primary-color .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
[data-theme="high-contrast"] .has-on-primary-color .wp-block-button__link.is-style-outline:hover,
[data-theme="high-contrast"] .has-on-primary-color .wp-block-button__link.is-style-outline:focus-visible,
[data-theme="high-contrast"] .wp-block-cover.has-on-primary-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
[data-theme="high-contrast"] .wp-block-cover.has-on-primary-color .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
[data-theme="high-contrast"] .has-oceanic-hero-gradient-background .wp-block-button.is-style-outline .wp-block-button__link:hover,
[data-theme="high-contrast"] .has-oceanic-hero-gradient-background .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
[data-theme="high-contrast"] .oc-hero-banner .wp-block-button.is-style-outline .wp-block-button__link:hover,
[data-theme="high-contrast"] .oc-hero-banner .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
[data-theme="high-contrast"] .oc-hero-page .wp-block-button.is-style-outline .wp-block-button__link:hover,
[data-theme="high-contrast"] .oc-hero-page .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
[data-theme="high-contrast"] .oc-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
[data-theme="high-contrast"] .oc-hero .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
[data-theme="high-contrast"] .wp-block-button.is-style-outline .wp-block-button__link.has-on-primary-color:hover,
[data-theme="high-contrast"] .wp-block-button.is-style-outline .wp-block-button__link.has-on-primary-color:focus-visible {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent) !important;
	color: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary) !important;
}

/* Explicit color classes on outline buttons */
.wp-block-button.is-style-outline .wp-block-button__link.has-secondary-color {
	color: var(--wp--preset--color--secondary) !important;
	border-color: var(--wp--preset--color--secondary) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link.has-tertiary-color {
	color: var(--wp--preset--color--tertiary) !important;
	border-color: var(--wp--preset--color--tertiary) !important;
}

/* Keep the wrapper free of border/shadow; only match the link shape so the
 * scaled button does not visually overflow its container. */
.wp-block-button.oc-button-shadow {
	border-radius: var(--wp--custom--border-radius--lg);
}

/* E3 — Image zoom on hover is now defined in the
 * "Block Styles — core/image" section (IMP-08) as is-style-zoom-on-hover,
 * with backward-compat selectors for the legacy oc-image-zoom-hover class. */

/* ═══════════════════════════════════════════
 * Hover Interactions
 * ═══════════════════════════════════════════ */

/* H2 — Card hover (elevated shadow + primary border accent) */
.oc-card-hover:hover {
	box-shadow: var(--wp--preset--shadow--elevated);
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) var(--wp--custom--blend--border), transparent);
}

/* H3 — "Read more" link hover (translateX + scale + primary color)
 * Also targets native WordPress block selectors for post-excerpt "more" links */
.oc-read-more-hover a,
.wp-block-post-excerpt__more-text a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	color: inherit;
	text-decoration: none;
	transition: transform var(--wp--custom--mode-transitions--duration) var(--wp--custom--mode-transitions--timing),
		color var(--wp--custom--mode-transitions--duration) var(--wp--custom--mode-transitions--timing);
}

.oc-read-more-hover a:hover,
.wp-block-post-excerpt__more-text a:hover {
	transform: translateX(var(--wp--custom--ui--decoration--transform-translate-lg)) scale(var(--wp--custom--ui--scale--text));
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* ═══════════════════════════════════════════
 * Accessibility
 * ═══════════════════════════════════════════ */

/* WCAG 2.4.7 / 2.4.11 / 2.4.13 — Foco visible universal con anillo dual (dual-ring halo) para contraste >= 3:1 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
.wp-block-button__link:focus-visible,
.oc-filter-pill:focus-visible,
.oc-tag-pill:focus-visible,
.page-numbers:focus-visible,
.wp-block-navigation-item__content:focus-visible,
.oc-member-card__name a:focus-visible,
.oc-post-card__title a:focus-visible,
.oc-actualidad-card__title a:focus-visible,
.oc-card-title a:focus-visible,
.oc-focus-visible:focus-visible {
	outline: var(--wp--custom--focus--width, 2px) solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--focus--offset, 2px);
	box-shadow: 0 0 0 calc(var(--wp--custom--focus--width, 2px) + 2px) var(--wp--preset--color--surface);
}

/* Foco contextual sobre contenedores de fondo primario / degradados oscuros */
.has-on-primary-color a:focus-visible,
.has-on-primary-color button:focus-visible,
.has-on-primary-color input:focus-visible,
.has-on-primary-color .wp-block-button__link:focus-visible,
.has-oceanic-hero-gradient-background a:focus-visible,
.has-oceanic-hero-gradient-background button:focus-visible,
.has-oceanic-hero-gradient-background .wp-block-button__link:focus-visible,
.oc-hero-banner a:focus-visible,
.oc-hero-page a:focus-visible,
.oc-hero a:focus-visible {
	outline: var(--wp--custom--focus--width, 2px) solid var(--wp--preset--color--on-primary);
	outline-offset: var(--wp--custom--focus--offset, 2px);
	box-shadow: 0 0 0 calc(var(--wp--custom--focus--width, 2px) + 2px) rgba(0, 0, 0, 0.4);
}

/* Supresión de contorno en clics de ratón/touch y en contenedores no interactivos con tabindex="-1" */
:focus:not(:focus-visible),
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible,
.oc-archive-results-region:focus,
.oc-archive-results-region:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* Modo High-Contrast — Contorno reforzado (3px) para cumplimiento AAA */
html[data-theme="high-contrast"] a:focus-visible,
html[data-theme="high-contrast"] button:focus-visible,
html[data-theme="high-contrast"] input:focus-visible,
html[data-theme="high-contrast"] select:focus-visible,
html[data-theme="high-contrast"] textarea:focus-visible,
html[data-theme="high-contrast"] [tabindex]:not([tabindex="-1"]):focus-visible,
html[data-theme="high-contrast"] .wp-block-button__link:focus-visible,
html[data-theme="high-contrast"] .oc-filter-pill:focus-visible,
html[data-theme="high-contrast"] .oc-tag-pill:focus-visible,
html[data-theme="high-contrast"] .page-numbers:focus-visible,
html[data-theme="high-contrast"] .wp-block-navigation-item__content:focus-visible {
	outline: var(--wp--custom--focus--width-high-contrast, 3px) solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--focus--offset, 2px);
	box-shadow: 0 0 0 5px var(--wp--preset--color--surface);
}

/* Estándar W3C del Sistema Operativo — Windows High Contrast / Forced Colors */
@media (forced-colors: active) {

	a:focus-visible,
	button:focus-visible,
	input:focus-visible,
	select:focus-visible,
	textarea:focus-visible,
	[tabindex]:not([tabindex="-1"]):focus-visible,
	.wp-block-button__link:focus-visible,
	.oc-filter-pill:focus-visible,
	.oc-tag-pill:focus-visible,
	.page-numbers:focus-visible,
	.wp-block-navigation-item__content:focus-visible,
	.oc-member-card__name a:focus-visible,
	.oc-post-card__title a:focus-visible,
	.oc-actualidad-card__title a:focus-visible {
		outline: 3px solid Highlight !important;
		outline-offset: 2px !important;
		box-shadow: none !important;
	}
}

/* Skip link — WCAG 2.4.1: visible only on keyboard focus (Tab) */
.skip-link .screen-reader-text {
	position: absolute;
	left: var(--wp--custom--ui--offset--off-screen, -9999px);
	z-index: var(--wp--custom--ui--z-index--focusRing, 9999);
	padding: var(--wp--preset--spacing--20, 0.75rem) var(--wp--preset--spacing--30, 1rem);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	text-decoration: none;
	font-weight: 700;
	border-radius: var(--wp--custom--border-radius--md, 0.5rem);
	box-shadow: var(--wp--preset--shadow--elevated, 0 4px 12px rgba(0, 0, 0, 0.15));
}

.skip-link .screen-reader-text:focus,
.skip-link .screen-reader-text:focus-visible {
	left: var(--wp--preset--spacing--30, 1rem);
	top: var(--wp--preset--spacing--30, 1rem);
	outline: 2px solid var(--wp--preset--color--on-primary);
	outline-offset: 2px;
}

/* WCAG 1.4.3 / 1.4.11 / AAA — Aspa de borrado de campos de búsqueda adaptable a todos los modos de color */
input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	width: var(--wp--custom--site-header--search-clear-icon--size, 1rem);
	height: var(--wp--custom--site-header--search-clear-icon--size, 1rem);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") center / contain no-repeat;
	background-color: var(--wp--preset--color--on-surface-variant);
	cursor: pointer;
	transition: background-color var(--wp--custom--ui--interaction--fast, 0.15s ease);
}

input[type="search"]::-webkit-search-cancel-button:hover {
	background-color: var(--wp--preset--color--on-surface);
}

/* ═══════════════════════════════════════════
 * Base States
 * ═══════════════════════════════════════════ */

/* T3 — Scale base for elements that scale on hover */
.oc-scale-base {
	transform: scale(var(--wp--custom--ui--scale--unity));
}

/* Editorial section header & eyebrow styles (absorbed from editorial.css) */
.oc-editorial__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
}

.oc-editorial__eyebrow {
	display: block;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--typography--letter-spacing--eyebrow);
	font-size: var(--wp--preset--font-size--label-md);
	color: var(--wp--preset--color--surface-tint);
	margin-bottom: var(--wp--preset--spacing--20);
}

/* ═══════════════════════════════════════════
 * Block Styles — core/heading (IMP-08)
 * Native editor styles replacing manual oc-heading-banner-* classes.
 * ═══════════════════════════════════════════ */

/* Heading Banner Primary — H2 with solid primary background and white text */
.wp-block-heading.is-style-banner-primary,
.oc-heading-banner-primary {
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--on-primary) !important;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) !important;
	border-radius: var(--wp--custom--border-radius--lg) !important;
}

/* Heading Banner Container — H3 with primary-container background */
.wp-block-heading.is-style-banner-container,
.oc-heading-banner-container {
	background-color: var(--wp--preset--color--primary-container) !important;
	color: var(--wp--preset--color--on-primary) !important;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) !important;
	border-radius: var(--wp--custom--border-radius--md) !important;
}

/* Heading Banner Subcontainer — H4/H5 with surface-container-high background, on-surface text, and subtle primary border accent */
.wp-block-heading.is-style-banner-subcontainer,
.oc-heading-banner-subcontainer {
	background-color: var(--wp--preset--color--surface-container-high) !important;
	color: var(--wp--preset--color--on-surface) !important;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20) !important;
	border-radius: var(--wp--custom--border-radius--sm) !important;
	border-left: var(--wp--custom--ui--border-width--large) solid var(--wp--preset--color--primary) !important;
}

/* ═══════════════════════════════════════════
 * Block Styles — core/paragraph (IMP-08)
 * Native editor styles replacing manual oc-highlight-box / oc-callout-accent.
 * ═══════════════════════════════════════════ */

/* Highlight — surface-container-low background with rounded corners */
.wp-block-paragraph.is-style-highlight,
.wp-block-group.is-style-highlight-box,
.oc-highlight-box {
	background-color: var(--wp--preset--color--surface-container-low) !important;
	color: var(--wp--preset--color--on-surface);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) !important;
	border-radius: var(--wp--custom--border-radius--xl) !important;
}

/* Callout Accent — left accent border with surface-container-low background */
.wp-block-paragraph.is-style-callout-accent,
.wp-block-group.is-style-callout-accent,
.oc-callout-accent,
.oc-stereotype-box {
	background-color: var(--wp--preset--color--surface-container-low) !important;
	color: var(--wp--preset--color--on-surface);
	border-left: var(--wp--custom--ui--border-width--large) solid var(--wp--preset--color--secondary) !important;
	border-radius: 0 var(--wp--custom--border-radius--lg) var(--wp--custom--border-radius--lg) 0 !important;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) !important;
}

/* ═══════════════════════════════════════════
 * Image Decorators (IMP-05)
 * Stackable utility classes (oc-zoom-on-hover, oc-invert-dark-mode)
 * with legacy is-style-* support for existing content.
 * ═══════════════════════════════════════════ */

/* Zoom on Hover — image scales on hover; wrapper clips overflow */
.wp-block-image.is-style-zoom-on-hover,
.wp-block-image.oc-zoom-on-hover,
.wp-block-image.oc-image-zoom-hover,
.oc-image-zoom-hover {
	overflow: hidden;
}

.wp-block-image.is-style-zoom-on-hover img,
.wp-block-image.oc-zoom-on-hover img,
.wp-block-image.oc-image-zoom-hover img,
.oc-image-zoom-hover img {
	transition: transform var(--wp--custom--image-zoom--duration) ease;
}

.wp-block-image.is-style-zoom-on-hover:hover img,
.wp-block-image.oc-zoom-on-hover:hover img,
.wp-block-image.oc-image-zoom-hover:hover img,
.oc-image-zoom-hover:hover img {
	transform: scale(var(--wp--custom--image-zoom--scale));
}

/* Invert in Dark Mode — for icons/drawings with transparent background
 * that need inversion in dark/high-contrast modes. */
.wp-block-image.is-style-invert-dark-mode img,
.wp-block-image.oc-invert-dark-mode img {
	transition: filter var(--wp--custom--mode-transitions--duration) ease;
}

[data-theme="dark"] .wp-block-image.is-style-invert-dark-mode img,
[data-theme="dark"] .wp-block-image.oc-invert-dark-mode img,
[data-theme="high-contrast"] .wp-block-image.is-style-invert-dark-mode img,
[data-theme="high-contrast"] .wp-block-image.oc-invert-dark-mode img {
	filter: invert(1) brightness(1.5);
}

/* ═══════════════════════════════════════════
 * Block Styles — Composite Components
 * ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
 * Single Post — Reusable Components
 * ═══════════════════════════════════════════ */

/* Tag Pill — badge for post tags with hover transition */
.oc-tag-pill {
	display: inline-flex;
	align-items: center;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--surface-container);
	color: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--border-radius--full);
	font-size: var(--wp--preset--font-size--label-sm);
	font-weight: var(--wp--custom--typography--font-weight--label-sm);
	line-height: var(--wp--custom--typography--line-height--label-sm);
	text-decoration: none;
	transition:
		background-color var(--wp--custom--ui--interaction--medium),
		color var(--wp--custom--ui--interaction--medium),
		transform var(--wp--custom--ui--interaction--medium);
}

.oc-tag-pill:hover,
.oc-tag-pill:focus-visible {
	background-color: var(--wp--preset--color--primary-container);
	color: var(--wp--preset--color--on-primary-container);
	transform: translateX(var(--wp--custom--ui--decoration--transform-translate));
	text-decoration: none;
}

/* Share Button — icon without circle, zoom on hover (like footer social icons) */
.oc-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	line-height: 1;
	color: var(--wp--preset--color--on-surface-variant);
	cursor: pointer;
	transition:
		color var(--wp--custom--ui--interaction--fast),
		transform var(--wp--custom--ui--interaction--medium);
	transform: scale(var(--wp--custom--ui--scale--unity));
}

.oc-share-btn:hover,
.oc-share-btn:focus-visible {
	color: var(--wp--preset--color--primary);
	transform: scale(var(--wp--custom--ui--scale--icon));
	outline: none;
}

.oc-share-btn:focus-visible {
	outline: var(--wp--custom--ui--focus--width) solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--ui--focus--offset);
}

.oc-share-btn svg {
	width: var(--wp--custom--ui--sizes--icon-lg);
	height: var(--wp--custom--ui--sizes--icon-lg);
	fill: currentColor;
	display: block;
}

.oc-share-buttons,
.oc-print-button-wrap {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

/* Print Legal Footer — Hidden on screen, shown only via print.css in @media print */
.oc-print-footer {
	display: none;
}

/* Post Featured Image — wrapper for single post hero image */
.oc-post-featured-img {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	border-radius: var(--wp--custom--border-radius--xl);
	margin-bottom: var(--wp--preset--spacing--60);
}

.oc-post-featured-img img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--wp--custom--ui--aspect-ratio--hero);
	object-fit: cover;
	display: block;
}

/* Query grids — equal-height cards in the same row.
 * Applied to all query containers that use observatorio-cero/post-card inside
 * a post-template grid (archive pages, publicaciones, front-page, related posts).
 * The card block styles themselves are flex columns; these rules make the
 * .wp-block-post wrapper stretch to the grid row height and pass that height
 * to the card. */
.oc-archive-posts-grid .wp-block-post-template,
.oc-recent-posts .wp-block-post-template,
.oc-related-posts-section .wp-block-post-template {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-items: stretch;
}

/* Archive posts pattern: explicit responsive columns. */
.oc-archive-posts-grid .wp-block-post-template {
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.oc-archive-posts-grid .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.oc-archive-posts-grid .wp-block-post-template {
		grid-template-columns: repeat(3, 1fr);
	}
}

.oc-archive-posts-grid .wp-block-post,
.oc-recent-posts .wp-block-post,
.oc-related-posts-section .wp-block-post {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	margin-block-start: 0;
	margin-block-end: 0;
}

.oc-archive-posts-grid .wp-block-post>.wp-block-observatorio-cero-post-card,
.oc-recent-posts .wp-block-post>.wp-block-observatorio-cero-post-card,
.oc-related-posts-section .wp-block-post>.wp-block-observatorio-cero-post-card {
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
}

/* Related Post Card — vertical card with image + title + date for related posts */
.wp-block-group.is-style-related-post-card {
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--surface-container-lowest);
	border: var(--wp--custom--ui--decoration--border) solid color-mix(in srgb, var(--wp--preset--color--outline-variant) var(--wp--custom--blend--border), transparent);
	border-radius: var(--wp--custom--border-radius--xl);
	overflow: hidden;
	text-decoration: none;
	color: var(--wp--preset--color--on-surface);
	transition:
		box-shadow var(--wp--custom--mode-transitions--duration) var(--wp--custom--mode-transitions--timing),
		border-color var(--wp--custom--mode-transitions--duration) var(--wp--custom--mode-transitions--timing);
}

.wp-block-group.is-style-related-post-card:hover,
.wp-block-group.is-style-related-post-card:focus-visible {
	box-shadow: var(--wp--preset--shadow--elevated);
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) var(--wp--custom--blend--border), transparent);
}

.wp-block-group.is-style-related-post-card .oc-related-post-card__image {
	overflow: hidden;
	aspect-ratio: var(--wp--custom--ui--aspect-ratio--video);
	margin: 0;
}

.wp-block-group.is-style-related-post-card .oc-related-post-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--wp--custom--image-zoom--duration) ease;
}

.wp-block-group.is-style-related-post-card:hover .oc-related-post-card__image img {
	transform: scale(var(--wp--custom--image-zoom--scale));
}

.wp-block-group.is-style-related-post-card>.wp-block-group {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
}

.wp-block-group.is-style-related-post-card .wp-block-post-title {
	font-size: var(--wp--preset--font-size--headline-sm);
	font-weight: var(--wp--custom--typography--font-weight--headline-sm);
	color: var(--wp--preset--color--on-surface);
	margin: 0 0 var(--wp--preset--spacing--20);
	line-height: var(--wp--custom--typography--line-height--headline-sm);
}

.wp-block-group.is-style-related-post-card .wp-block-post-title a {
	text-decoration: none;
	color: inherit;
	transition: color var(--wp--custom--ui--interaction--medium);
}

.wp-block-group.is-style-related-post-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
}

.wp-block-group.is-style-related-post-card .wp-block-post-date time {
	font-size: var(--wp--preset--font-size--label-sm);
	color: var(--wp--preset--color--on-surface-variant);
	text-transform: capitalize;
}

/* Sidebar Card — compact card for sidebar Cards and other sidebar content.
 * Apply to core/group. Features soft background, border, and hover elevation. */
.wp-block-group.is-style-sidebar-card {
	background-color: var(--wp--preset--color--surface-container-low);
	border: var(--wp--custom--ui--decoration--border) solid color-mix(in srgb, var(--wp--preset--color--outline-variant) var(--wp--custom--blend--border), transparent);
	border-radius: var(--wp--custom--border-radius--lg);
	padding: var(--wp--preset--spacing--40);
	transition:
		box-shadow var(--wp--custom--mode-transitions--duration) var(--wp--custom--mode-transitions--timing),
		border-color var(--wp--custom--mode-transitions--duration) var(--wp--custom--mode-transitions--timing);
}

.wp-block-group.is-style-sidebar-card:hover {
	box-shadow: var(--wp--preset--shadow--medium);
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) var(--wp--custom--blend--border), transparent);
}

/* Tag Cloud fallback message */
.oc-tag-cloud-no-results {
	text-align: center;
	padding: var(--wp--preset--spacing--20) 0;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--on-surface-variant);
}

/* ═══════════════════════════════════════════
 * Pagination — Accessible & Responsive
 * ═══════════════════════════════════════════ */

.oc-archive-pagination {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--wp--custom--ui--decoration--border) solid color-mix(in srgb, var(--wp--preset--color--outline-variant) var(--wp--custom--blend--hairline), transparent);
}

.oc-archive-pagination .wp-block-query-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	flex-wrap: wrap;
}

.oc-archive-pagination .wp-block-query-pagination-numbers {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.oc-archive-pagination .wp-block-query-pagination a,
.oc-archive-pagination .wp-block-query-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--wp--custom--ui--sizes--icon-2xl);
	height: var(--wp--custom--ui--sizes--icon-2xl);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--border-radius--default);
	font-size: var(--wp--preset--font-size--label-md);
	font-weight: var(--wp--custom--typography--font-weight--label-md);
	line-height: var(--wp--custom--typography--line-height--label-md);
	text-decoration: none;
	transition:
		background-color var(--wp--custom--ui--interaction--medium),
		color var(--wp--custom--ui--interaction--medium),
		transform var(--wp--custom--ui--interaction--medium);
}

.oc-archive-pagination .wp-block-query-pagination a {
	background-color: transparent;
	color: var(--wp--preset--color--on-surface-variant);
}

.oc-archive-pagination .wp-block-query-pagination a:hover {
	background-color: var(--wp--preset--color--surface-container);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.oc-archive-pagination .wp-block-query-pagination a:focus-visible {
	outline: var(--wp--custom--ui--focus--width) solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--ui--focus--offset);
}

/* Current page — primary filled */
.oc-archive-pagination .wp-block-query-pagination .page-numbers.current,
.oc-archive-pagination .wp-block-query-pagination-numbers>span.current {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	box-shadow: var(--wp--preset--shadow--soft);
}

/* Previous/Next buttons */
.oc-archive-pagination .wp-block-query-pagination-previous,
.oc-archive-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--label-md);
	font-weight: var(--wp--custom--typography--font-weight--label-md);
	color: var(--wp--preset--color--on-surface-variant);
	text-decoration: none;
	border-radius: var(--wp--custom--border-radius--default);
	transition:
		color var(--wp--custom--ui--interaction--medium),
		transform var(--wp--custom--ui--interaction--medium);
}

.oc-archive-pagination .wp-block-query-pagination-previous:hover,
.oc-archive-pagination .wp-block-query-pagination-next:hover {
	color: var(--wp--preset--color--primary);
}

/* First/Last buttons */
.oc-archive-pagination .wp-block-query-pagination-first,
.oc-archive-pagination .wp-block-query-pagination-last {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--label-sm);
	font-weight: var(--wp--custom--typography--font-weight--label-md);
	color: var(--wp--preset--color--on-surface-variant);
	text-decoration: none;
	border-radius: var(--wp--custom--border-radius--default);
	transition:
		background-color var(--wp--custom--ui--interaction--medium),
		color var(--wp--custom--ui--interaction--medium);
}

.oc-archive-pagination .wp-block-query-pagination-first:hover,
.oc-archive-pagination .wp-block-query-pagination-last:hover {
	background-color: var(--wp--preset--color--surface-container);
	color: var(--wp--preset--color--primary);
}

/* Dots separator */
.oc-archive-pagination .wp-block-query-pagination-numbers .dots,
.oc-archive-pagination .wp-block-query-pagination-numbers>span.dots {
	color: var(--wp--preset--color--on-surface-variant);
	min-width: auto;
	padding: 0 var(--wp--preset--spacing--10);
}

/* ═══════════════════════════════════════════
 * Reduced Motion (global)
 * ═══════════════════════════════════════════ */

/* A2 — Disable all utility/block-style transitions for reduced-motion users */
@media (prefers-reduced-motion: reduce) {

	.wp-block-button.oc-button-shadow,
	.wp-block-button.oc-button-shadow .wp-block-button__link,
	.wp-block-button__link.oc-button-shadow,
	.oc-image-zoom-hover img,
	.wp-block-image.is-style-zoom-on-hover img,
	.wp-block-image.oc-zoom-on-hover img,
	.wp-block-image.is-style-invert-dark-mode img,
	.wp-block-image.oc-invert-dark-mode img,
	.oc-card-hover,
	.oc-read-more-hover a,
	.wp-block-post-excerpt__more-text a,
	.oc-scale-base,
	.oc-tag-pill,
	.oc-share-btn,
	.wp-block-group.is-style-glass,
	.wp-block-observatorio-cero-post-card.oc-post-card,
	.wp-block-observatorio-cero-post-card.oc-post-card>.wp-block-observatorio-cero-image-fx .oc-image-fx__frame>figure img,
	.wp-block-observatorio-cero-post-card.oc-post-card .wp-block-post-title a,
	.wp-block-observatorio-cero-post-card.oc-post-card .oc-post-card__tags a,
	.wp-block-group.is-style-related-post-card,
	.wp-block-group.is-style-related-post-card .oc-related-post-card__image img,
	.oc-related-posts-query .wp-block-post,
	.oc-related-posts-query .oc-related-post-card__image img,
	.wp-block-group.is-style-sidebar-card,
	.wp-block-observatorio-cero-sidebar-cta,
	.wp-block-observatorio-cero-sidebar-cta .oc-sidebar-cta-card,
	.wp-block-observatorio-cero-sidebar-cta .oc-sidebar-cta-card .wp-block-heading,
	.wp-block-observatorio-cero-sidebar-cta .oc-sidebar-cta-card p,
	.oc-archive-pagination .wp-block-query-pagination a,
	.oc-archive-pagination .wp-block-query-pagination-previous,
	.oc-archive-pagination .wp-block-query-pagination-next,
	.oc-archive-pagination .wp-block-query-pagination-first,
	.oc-archive-pagination .wp-block-query-pagination-last {
		transition: none !important;
		animation: none !important;
	}

	.wp-block-observatorio-cero-post-card.oc-post-card:hover>.wp-block-observatorio-cero-image-fx .oc-image-fx__frame>figure img,
	.wp-block-observatorio-cero-post-card.oc-post-card .wp-block-post-title a:hover,
	.wp-block-observatorio-cero-post-card.oc-post-card .oc-post-card__tags a,
	.wp-block-group.is-style-related-post-card:hover .oc-related-post-card__image img,
	.oc-related-posts-query .wp-block-post:hover .oc-related-post-card__image img,
	.oc-related-posts-query .wp-block-post:hover,
	.wp-block-button.oc-button-shadow .wp-block-button__link:hover,
	.wp-block-button__link.oc-button-shadow:hover,
	.wp-block-observatorio-cero-sidebar-cta .oc-sidebar-cta-card:hover,
	.wp-block-observatorio-cero-sidebar-cta .oc-sidebar-cta-card .oc-read-more-hover a:hover,
	.wp-block-observatorio-cero-sidebar-cta .oc-sidebar-cta-card .wp-block-post-excerpt__more-text a:hover,
	.oc-archive-pagination .wp-block-query-pagination a:hover,
	.oc-archive-pagination .wp-block-query-pagination-previous:hover,
	.oc-archive-pagination .wp-block-query-pagination-next:hover,
	.oc-archive-pagination .wp-block-query-pagination-first:hover,
	.oc-archive-pagination .wp-block-query-pagination-last:hover {
		transform: none !important;
	}
}

/* ═══════════════════════════════════════════
 * Touch Ergonomics & Accessibility Utilities
 * ═══════════════════════════════════════════ */

/* Minimum touch target size (44x44px per WCAG 2.5.5 / 2.5.8) */
.oc-touch-target {
	min-width: var(--wp--custom--touch--min-target, 44px);
	min-height: var(--wp--custom--touch--min-target, 44px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

@media (pointer: coarse) {

	.oc-touch-target-coarse,
	.oc-tag-pill,
	.oc-share-btn,
	.oc-archive-pagination .wp-block-query-pagination a,
	.oc-archive-pagination .wp-block-query-pagination-numbers .page-numbers {
		min-width: var(--wp--custom--touch--min-target, 44px);
		min-height: var(--wp--custom--touch--min-target, 44px);
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* ═══════════════════════════════════════════
 * Card Graphic Elements & Proportions
 * ═══════════════════════════════════════════ */
.oc-card--variant-idea .oc-card-image img,
.oc-card--variant-idea-featured .oc-card-image img,
.oc-card--variant-action .oc-card-image img,
.oc-card--variant-stat .oc-card-image img,
.oc-card-image--icon img,
.is-style-idea-card-icon img {
	max-width: var(--wp--custom--ui--icon-size--card, 6rem);
	max-height: var(--wp--custom--ui--icon-size--card, 6rem);
	width: auto;
	height: auto;
	object-fit: contain;
	margin: 0 auto;
}

@media (max-width: 767px) {

	.oc-card--variant-idea .oc-card-image img,
	.oc-card--variant-idea-featured .oc-card-image img,
	.oc-card--variant-action .oc-card-image img,
	.oc-card--variant-stat .oc-card-image img,
	.oc-card-image--icon img,
	.is-style-idea-card-icon img {
		max-width: var(--wp--custom--ui--icon-size--card-mobile, 4.5rem);
		max-height: var(--wp--custom--ui--icon-size--card-mobile, 4.5rem);
	}
}

/* Media Cards: Full size photos */
.oc-card--variant-media-horizontal .oc-card-image img,
.oc-card--variant-media-vertical .oc-card-image img,
.wp-block-observatorio-cero-static-card.oc-card--variant-media-horizontal figure img,
.wp-block-observatorio-cero-static-card.oc-card--variant-media-vertical figure img {
	max-width: 100%;
	max-height: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 767px) {
	.oc-post-actions__label {
		display: none;
	}
}

/* ═══════════════════════════════════════════
 * Accessible Tables & Multimedia (WCAG 2.1 AA)
 * ═══════════════════════════════════════════ */

/* Responsive table wrapper for touch devices and narrow viewports */
.wp-block-table,
figure.wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--50);
}

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	font-size: var(--wp--preset--font-size--body-md);
}

.wp-block-table table caption {
	caption-side: top;
	text-align: left;
	font-weight: var(--wp--custom--typography--font-weight--semibold, 600);
	font-size: var(--wp--preset--font-size--label-md, 0.875rem);
	color: var(--wp--preset--color--on-surface-variant);
	padding-bottom: var(--wp--preset--spacing--20);
}

.wp-block-table th {
	background-color: var(--wp--preset--color--surface-container);
	color: var(--wp--preset--color--on-surface);
	font-weight: var(--wp--custom--typography--font-weight--semibold, 600);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-bottom: 2px solid var(--wp--preset--color--outline);
}

.wp-block-table td {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--outline-variant);
	color: var(--wp--preset--color--on-surface);
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--wp--preset--color--surface-container-low);
}

/* Accessible Collapsible Video Transcript (R6.13) */
details.oc-video-transcript {
	margin-top: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--surface-container-low);
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--border-radius--md, 0.5rem);
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--on-surface);
}

details.oc-video-transcript summary {
	font-weight: var(--wp--custom--typography--font-weight--semibold, 600);
	cursor: pointer;
	color: var(--wp--preset--color--primary);
	outline-offset: 2px;
}

details.oc-video-transcript summary:focus-visible {
	outline: var(--wp--custom--focus--width, 2px) solid var(--wp--preset--color--primary);
}

details.oc-video-transcript[open] summary {
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Accessible Code Blocks — Prevent inaccessible scroll regions (WCAG 2.1 SC 2.1.1) */
.wp-block-code,
.wp-block-code code {
	white-space: pre-wrap !important;
	word-break: break-word !important;
	overflow-wrap: break-word !important;
	overflow-x: visible !important;
}