/**
 * Base typography and post content (show notes, posts, pages) including core blocks.
 * Loaded on the front end and inside the block editor so writing looks like the result.
 */

/* ── Base ─────────────────────────────────────────────────────────────── */

body,
.editor-styles-wrapper {
	background-color: var(--ot-bg);
	color: var(--ot-text);
	font-family: var(--ot-font-body);
	font-size: var(--ot-step-0);
	line-height: var(--ot-line-height);
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	accent-color: var(--ot-accent);
}

::selection {
	background: var(--ot-selection);
	color: var(--ot-text);
}

:where(h1, h2, h3, h4, h5, h6),
.editor-styles-wrapper .wp-block-post-title,
.editor-styles-wrapper .editor-post-title__input {
	margin: 0;
	color: inherit;
	font-family: var(--ot-font-heading);
	font-weight: var(--ot-heading-weight);
	letter-spacing: var(--ot-heading-tracking);
	line-height: var(--ot-leading-snug);
	text-transform: var(--ot-heading-case);
	text-wrap: balance;
	font-synthesis-weight: none;
}

:where(p, li, dd, blockquote, figcaption) {
	text-wrap: pretty;
}

:where(a) {
	color: var(--ot-accent-ink);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.2em;
	transition: color var(--ot-fast) var(--ot-ease), text-decoration-color var(--ot-fast) var(--ot-ease);
}

:where(a:hover) {
	color: var(--ot-text);
}

:where(img, svg, video, canvas, iframe) {
	max-width: 100%;
	height: auto;
}

:where(code, kbd, samp, pre) {
	font-family: var(--ot-font-mono);
	font-size: 0.9em;
}

:where(hr) {
	border: 0;
	border-top: 1px solid var(--ot-border);
}

/* ── Content flow ─────────────────────────────────────────────────────── */

.ot-prose {
	--ot-flow: var(--ot-space-5);
	font-size: var(--ot-step-0);
}

.ot-prose > * {
	max-width: var(--ot-content-width);
	margin-block: 0;
	margin-inline: auto;
}

.ot-prose > * + * {
	margin-block-start: var(--ot-flow);
}

.ot-prose > .alignwide {
	max-width: var(--ot-wide-width);
}

.ot-prose > .alignfull {
	max-width: none;
	margin-inline: calc(-1 * var(--ot-gutter));
}

.ot-prose > .alignleft,
.ot-prose > .alignright {
	max-width: min(50%, calc(var(--ot-content-width) / 2));
	margin-block-end: var(--ot-space-4);
}

.ot-prose > .alignleft {
	float: left;
	margin-inline: max(0px, calc((100% - var(--ot-content-width)) / 2)) var(--ot-space-5);
}

.ot-prose > .alignright {
	float: right;
	margin-inline: var(--ot-space-5) max(0px, calc((100% - var(--ot-content-width)) / 2));
}

.ot-prose > .aligncenter {
	text-align: center;
}

.ot-prose::after {
	content: "";
	display: table;
	clear: both;
}

:is(.ot-prose, .editor-styles-wrapper .is-root-container) > :is(h2, h3, h4) {
	margin-block-start: var(--ot-space-7);
}

:is(.ot-prose, .editor-styles-wrapper .is-root-container) > :is(h2, h3, h4) + * {
	margin-block-start: var(--ot-space-3);
}

:is(.ot-prose, .editor-styles-wrapper .is-root-container) > :first-child {
	margin-block-start: 0;
}

/* Element rules use :where() so theme components placed in content (players, episode lists) keep their own styles. */
:where(.ot-prose, .editor-styles-wrapper) h1 { font-size: var(--ot-step-5); line-height: var(--ot-leading-tight); }
:where(.ot-prose, .editor-styles-wrapper) h2 { font-size: var(--ot-step-3); line-height: var(--ot-leading-snug); }
:where(.ot-prose, .editor-styles-wrapper) h3 { font-size: var(--ot-step-2); }
:where(.ot-prose, .editor-styles-wrapper) h4 { font-size: var(--ot-step-1); }
:where(.ot-prose, .editor-styles-wrapper) h5 { font-size: var(--ot-step-0); }
:where(.ot-prose, .editor-styles-wrapper) h6 {
	font-size: var(--ot-step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

:where(.ot-prose, .editor-styles-wrapper) :where(ul, ol):not([class*="wp-block-"], [class*="ot-"]),
:where(.ot-prose, .editor-styles-wrapper) :where(ul, ol).wp-block-list {
	padding-inline-start: 1.35em;
}

:where(.ot-prose, .editor-styles-wrapper) :where(ul, ol):not([class*="ot-"]) > li + li {
	margin-block-start: var(--ot-space-2);
}

:where(.ot-prose, .editor-styles-wrapper) :where(ul, ol):not([class*="ot-"]) > li::marker {
	color: var(--ot-accent);
}

:where(.ot-prose, .editor-styles-wrapper) :where(strong, b) {
	font-weight: 650;
}

/* A first paragraph with the "lead" style or the theme's large size reads as an introduction. */
:is(.ot-prose, .editor-styles-wrapper) .is-style-lead,
:is(.ot-prose, .editor-styles-wrapper) p.has-large-font-size {
	font-size: var(--ot-step-1);
	line-height: 1.5;
	color: var(--ot-text);
}

/* ── Quotes ───────────────────────────────────────────────────────────── */

:is(.ot-prose, .editor-styles-wrapper) blockquote,
:is(.ot-prose, .editor-styles-wrapper) .wp-block-quote {
	margin-inline: auto;
	padding: 0 0 0 var(--ot-space-5);
	border-inline-start: 3px solid var(--ot-accent);
	font-family: var(--ot-font-heading);
	font-size: var(--ot-step-1);
	line-height: 1.45;
}

:is(.ot-prose, .editor-styles-wrapper) blockquote cite,
:is(.ot-prose, .editor-styles-wrapper) .wp-block-quote cite,
:is(.ot-prose, .editor-styles-wrapper) .wp-block-pullquote cite {
	display: block;
	margin-block-start: var(--ot-space-3);
	font-family: var(--ot-font-body);
	font-size: var(--ot-step--1);
	font-style: normal;
	color: var(--ot-muted);
}

:is(.ot-prose, .editor-styles-wrapper) .wp-block-pullquote {
	padding: var(--ot-space-7) var(--ot-space-5);
	border-block: 1px solid var(--ot-border);
	text-align: center;
}

:is(.ot-prose, .editor-styles-wrapper) .wp-block-pullquote blockquote {
	padding: 0;
	border: 0;
	font-size: var(--ot-step-3);
	line-height: 1.25;
}

/* ── Code ─────────────────────────────────────────────────────────────── */

:is(.ot-prose, .editor-styles-wrapper) :not(pre) > code {
	padding: 0.12em 0.38em;
	border-radius: var(--ot-radius-sm);
	background: var(--ot-surface-2);
}

:is(.ot-prose, .editor-styles-wrapper) pre,
:is(.ot-prose, .editor-styles-wrapper) .wp-block-code {
	overflow-x: auto;
	padding: var(--ot-space-5);
	border: 1px solid var(--ot-border);
	border-radius: var(--ot-radius);
	background: var(--ot-surface);
	line-height: 1.6;
}

/* ── Media ────────────────────────────────────────────────────────────── */

:is(.ot-prose, .editor-styles-wrapper) :is(.wp-block-image, .wp-block-video, .wp-block-embed, .wp-block-gallery, figure) {
	margin-inline: auto;
}

:is(.ot-prose, .editor-styles-wrapper) .wp-block-image img,
:is(.ot-prose, .editor-styles-wrapper) .wp-block-video video,
:is(.ot-prose, .editor-styles-wrapper) .wp-block-gallery img {
	border-radius: var(--ot-radius);
}

:is(.ot-prose, .editor-styles-wrapper) .alignfull img,
:is(.ot-prose, .editor-styles-wrapper) .alignfull video {
	border-radius: 0;
}

:is(.ot-prose, .editor-styles-wrapper) figcaption,
:is(.ot-prose, .editor-styles-wrapper) .wp-element-caption {
	margin-block-start: var(--ot-space-2);
	color: var(--ot-muted);
	font-size: var(--ot-step--1);
	text-align: center;
}

:is(.ot-prose, .editor-styles-wrapper) .wp-block-embed__wrapper iframe,
:is(.ot-prose, .editor-styles-wrapper) .wp-block-embed iframe {
	border-radius: var(--ot-radius);
}

:is(.ot-prose, .editor-styles-wrapper) .wp-block-audio audio {
	width: 100%;
}

:is(.ot-prose, .editor-styles-wrapper) .wp-block-cover {
	border-radius: var(--ot-radius);
	overflow: hidden;
}

:is(.ot-prose, .editor-styles-wrapper) .wp-block-cover.alignfull {
	border-radius: 0;
}

:is(.ot-prose, .editor-styles-wrapper) .wp-block-media-text__media img {
	border-radius: var(--ot-radius);
}

/* ── Groups & columns with a background get comfortable padding and corners ── */

:is(.ot-prose, .editor-styles-wrapper) :is(.wp-block-group, .wp-block-column, .wp-block-columns).has-background {
	padding: var(--ot-space-6);
	border-radius: var(--ot-radius);
}

:is(.ot-prose, .editor-styles-wrapper) .wp-block-group.has-background.alignfull {
	border-radius: 0;
	padding-inline: var(--ot-gutter);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

:is(.ot-prose, .editor-styles-wrapper) .wp-block-button__link,
:is(.ot-prose, .editor-styles-wrapper) .wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ot-space-2);
	padding: calc(var(--ot-space-3) * 1.05) var(--ot-space-5);
	border-radius: var(--ot-button-radius);
	font-family: var(--ot-font-body);
	font-size: var(--ot-step--1);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--ot-fast) var(--ot-ease), color var(--ot-fast) var(--ot-ease), transform var(--ot-fast) var(--ot-ease);
}

:is(.ot-prose, .editor-styles-wrapper) .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
	background-color: var(--ot-accent);
}

:is(.ot-prose, .editor-styles-wrapper) .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-text-color) {
	color: var(--ot-on-accent);
}

:is(.ot-prose, .editor-styles-wrapper) .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover {
	background-color: var(--ot-accent-hover);
}

:is(.ot-prose, .editor-styles-wrapper) .wp-block-button.is-style-outline .wp-block-button__link {
	border: 1.5px solid currentColor;
	background: transparent;
	color: var(--ot-text);
}

:is(.ot-prose, .editor-styles-wrapper) .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--ot-surface);
}

/* ── Tables, details, separators, files ──────────────────────────────── */

:is(.ot-prose, .editor-styles-wrapper) .wp-block-table table,
:is(.ot-prose, .editor-styles-wrapper) table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ot-step--1);
	font-variant-numeric: tabular-nums;
}

:is(.ot-prose, .editor-styles-wrapper) :is(th, td) {
	padding: var(--ot-space-3) var(--ot-space-3);
	border-bottom: 1px solid var(--ot-border);
	text-align: start;
}

:is(.ot-prose, .editor-styles-wrapper) th {
	color: var(--ot-muted);
	font-weight: 600;
}

:is(.ot-prose, .editor-styles-wrapper) .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: var(--ot-surface);
}

:is(.ot-prose, .editor-styles-wrapper) .wp-block-table.is-style-stripes {
	border-bottom: 0;
}

:is(.ot-prose, .editor-styles-wrapper) .wp-block-separator {
	width: 100%;
	border: 0;
	border-top: 1px solid var(--ot-border);
	opacity: 1;
}

:is(.ot-prose, .editor-styles-wrapper) .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
	max-width: 6rem;
}

:is(.ot-prose, .editor-styles-wrapper) .wp-block-separator.is-style-dots::before {
	color: var(--ot-subtle);
	letter-spacing: 1.5em;
}

:is(.ot-prose, .editor-styles-wrapper) .wp-block-details {
	padding: var(--ot-space-4) var(--ot-space-5);
	border: 1px solid var(--ot-border);
	border-radius: var(--ot-radius);
}

:is(.ot-prose, .editor-styles-wrapper) .wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
}

:is(.ot-prose, .editor-styles-wrapper) .wp-block-details[open] summary {
	margin-block-end: var(--ot-space-3);
}

:is(.ot-prose, .editor-styles-wrapper) .wp-block-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ot-space-3);
	padding: var(--ot-space-4);
	border: 1px solid var(--ot-border);
	border-radius: var(--ot-radius);
}

:is(.ot-prose, .editor-styles-wrapper) .wp-block-file .wp-block-file__button {
	margin: 0 0 0 auto;
	padding: var(--ot-space-2) var(--ot-space-4);
	border-radius: var(--ot-button-radius);
	background: var(--ot-accent);
	color: var(--ot-on-accent);
	font-size: var(--ot-step--1);
}

/* WordPress core alignment classes for classic content. */
.ot-prose .wp-caption {
	max-width: 100%;
}

.ot-prose .screen-reader-text {
	position: absolute;
}