/**
 * Native block editor content styling so blog/page content matches the
 * design system — loaded both on the front end (via wp_enqueue_style)
 * and inside the block editor iframe (via add_editor_style), so what
 * an editor sees while writing matches what gets published.
 *
 * Selectors are intentionally NOT scoped under .entry-content: the
 * editor iframe wraps content in .editor-styles-wrapper instead, so a
 * .entry-content-prefixed rule would only ever apply on the front end,
 * not while editing. Bare wp-block-* classes are safe to use unscoped
 * since this theme never reuses WordPress's own block class names
 * elsewhere.
 */

.wp-block-heading,
h1, h2, h3, h4 {
	font-family: var(--font-heading);
	color: var(--color-navy);
}

.wp-block-image { margin-block: var(--space-md); }
.wp-block-image img { border-radius: var(--radius); }

/* ---------- Embeds (YouTube, Vimeo, etc. via the core Embed block) ---------- */
.wp-block-embed {
	margin-block: var(--space-md);
}

.wp-block-embed__wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	overflow: hidden;
}

.wp-block-embed__wrapper iframe {
	width: 100%;
	height: 100%;
	display: block;
}

/* ---------- Video (self-hosted, core Video block) ---------- */
.wp-block-video {
	margin-block: var(--space-md);
}

.wp-block-video video {
	width: 100%;
	border-radius: var(--radius);
	display: block;
}

/* ---------- Gallery (multiple images) ---------- */
.wp-block-gallery {
	margin-block: var(--space-md);
	/* Default gap if the editor hasn't set one explicitly — a real
	   inline gap value from the block's own UI still takes precedence
	   over this custom property default. */
	--wp--style--gallery-gap-default: var(--space-sm);
}

.wp-block-gallery .wp-block-image img { border-radius: var(--radius-sm); }

/* ---------- Media & Text (image beside text) ---------- */
.wp-block-media-text {
	margin-block: var(--space-md);
	border-radius: var(--radius);
	overflow: hidden;
}

.wp-block-media-text .wp-block-media-text__content {
	padding: var(--space-md);
}

/* ---------- Columns ---------- */
.wp-block-columns {
	gap: var(--space-md);
	margin-block: var(--space-md);
}

.wp-block-quote {
	border-left: 4px solid var(--color-ocean);
	padding-left: var(--space-sm);
	font-style: italic;
}

.wp-block-button__link {
	background: var(--color-ocean);
	border-radius: var(--radius);
	font-weight: 700;
	padding: 0.85rem 1.7rem;
}

.wp-block-separator { border-color: var(--border); }

.wp-block-pullquote { border-top: 2px solid var(--color-navy); border-bottom: 2px solid var(--color-navy); }

table { width: 100%; border-collapse: collapse; }
table th, table td { border: 1px solid var(--border); padding: 0.6rem 0.8rem; }

figcaption { color: var(--color-text-muted); font-size: 0.85rem; text-align: center; margin-top: 0.4rem; }

/* Wide / full alignment support (front end only — .alignwide/.alignfull
   are resolved differently inside the editor, WordPress handles that
   automatically via its own layout styles). */
.entry-content .alignwide { width: 100%; max-width: calc(var(--container-width) - 2 * var(--space-md)); margin-inline: auto; }
.entry-content .alignfull { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }

/* True edge-to-edge bleed only makes sense when there's no sidebar
   competing for the same row. On templates with a sidebar (single
   blog posts, blog archives), a "full width" image would otherwise
   overlap the sidebar column entirely — cap it at the content column's
   own width instead, same treatment as alignwide. */
.content-with-sidebar .entry-content .alignfull {
	width: 100%;
	max-width: 100%;
	position: static;
	left: auto;
	right: auto;
	margin-left: 0;
	margin-right: 0;
}

/* ---------- Block style variations (registered in inc/block-styles.php) ---------- */
.is-style-ssc-card {
	background: var(--surface);
	border-radius: var(--radius);
	padding: var(--space-md);
	box-shadow: var(--shadow-sm);
}

.is-style-ssc-card.wp-block-gallery .wp-block-image img {
	border-radius: var(--radius-sm);
}

.is-style-ssc-outline.wp-block-button .wp-block-button__link {
	background: transparent;
	color: var(--color-ocean);
	border: 2px solid var(--color-ocean);
}

.is-style-ssc-outline.wp-block-button .wp-block-button__link:hover {
	background: var(--color-ocean);
	color: var(--color-white);
}