/*
 * Developer docs — content styles for the doc-* classes the importer assigns.
 * Code blocks and code tabs are styled by the theme's own block styles.
 */

.doc-body {
	--doc-line: var(--wp--preset--color--light-grey, #e1e7eb);
	--doc-muted: var(--wp--preset--color--text-muted, #68787c);
	--doc-subtle: var(--wp--preset--color--surface-subtle, #f3f5f7);
	--doc-ink: var(--wp--preset--color--dark-blue, #041c38);
}

.doc-body > * + * {
	margin-block-start: 1.25rem;
}

.doc-body h2 {
	margin-block-start: 3.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--doc-line);
	font-size: var(--wp--preset--font-size--large);
	scroll-margin-top: 2rem;
}

.doc-body h3 {
	margin-block-start: 2.25rem;
	font-size: 1.25rem;
	scroll-margin-top: 2rem;
}

.doc-body h4 {
	margin-block-start: 1.75rem;
	font-size: 1.05rem;
}

.doc-body .lede {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--doc-muted);
	line-height: 1.6;
}

.doc-body :not(pre) > code {
	padding: 0.1em 0.35em;
	border-radius: 4px;
	background: var(--doc-subtle);
	color: var(--doc-ink);
	font-size: 0.875em;
}

/* ---------- Tables ---------- */

.doc-body .wp-block-table {
	overflow-x: auto;
}

.doc-body .wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.9rem;
}

.doc-body .wp-block-table th,
.doc-body .wp-block-table td {
	padding: 0.6rem 0.85rem;
	border: 0;
	border-bottom: 1px solid var(--doc-line);
	text-align: left;
	vertical-align: top;
}

.doc-body .wp-block-table thead th {
	border-bottom: 2px solid var(--doc-ink);
	font-weight: 600;
}

.doc-body .wp-block-table tbody tr:hover {
	background: var(--doc-subtle);
}

/* ---------- Callouts ---------- */

.doc-body .doc-callout {
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--wp--preset--color--accent-blue, #287cd5);
	border-radius: 0 6px 6px 0;
	background: #eaf2fb;
}

.doc-body .doc-callout.is-warning {
	border-left-color: var(--wp--preset--color--primary, #fc8902);
	background: #fff4e5;
}

.doc-body .doc-callout > * + * {
	margin-block-start: 0.6rem;
}

.doc-body .doc-callout > :first-child {
	margin-block-start: 0;
}

/* ---------- API members ---------- */

.doc-body .doc-member {
	padding: 1rem 1.25rem;
	border: 1px solid var(--doc-line);
	border-radius: 8px;
}

.doc-body .doc-member > * + * {
	margin-block-start: 0.5rem;
}

.doc-body .doc-signature code,
.doc-body .doc-code-title code {
	padding: 0;
	background: none;
	font-weight: 600;
}

.doc-body .doc-code-title {
	margin-block-end: -0.75rem;
	font-size: 0.8rem;
	color: var(--doc-muted);
}

.doc-body .doc-code-title code {
	color: var(--doc-muted);
	font-weight: 500;
}

/* ---------- Badges & inline annotations ---------- */

.doc-body .badge {
	display: inline-block;
	padding: 0.05rem 0.5rem;
	border-radius: 999px;
	background: var(--doc-subtle);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	vertical-align: middle;
}

.doc-body .badge-deprecated {
	background: #fde8e8;
	color: #a32020;
}

.doc-body .au-name,
.doc-body .au-note {
	display: block;
	font-size: 0.85em;
	color: var(--doc-muted);
}

.doc-body .au-note {
	font-style: italic;
}

/* ---------- Cards ---------- */

.doc-body .doc-cards {
	gap: 1rem;
}

.doc-body .doc-card {
	position: relative;
	padding: 1.25rem;
	border: 1px solid var(--doc-line);
	border-radius: 8px;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.doc-body .doc-card:hover {
	border-color: var(--wp--preset--color--accent-blue, #287cd5);
	box-shadow: 0 2px 10px rgba(4, 28, 56, 0.06);
}

.doc-body .doc-card h3 {
	margin: 0 0 0.4rem;
	font-size: 1rem;
}

/* Whole card is clickable via the heading link. */
.doc-body .doc-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.doc-body .doc-card p {
	margin: 0;
	font-size: 0.9rem;
	color: var(--doc-muted);
}

/* ---------- Pipeline diagram ---------- */

.doc-body .doc-pipeline {
	gap: 0.5rem;
	align-items: stretch;
}

.doc-body .doc-pipeline__stage {
	flex: 1 1 8rem;
	margin: 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--doc-line);
	border-radius: 8px;
	background: var(--doc-subtle);
	font-size: 0.85rem;
	color: var(--doc-muted);
	line-height: 1.4;
}

.doc-body .doc-pipeline__stage strong {
	color: var(--doc-ink);
}

.doc-body .doc-pipeline__arrow {
	flex: none;
	align-self: center;
	margin: 0;
	color: var(--doc-muted);
}

/* ---------- FAQ ---------- */

.doc-body .wp-block-details {
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--doc-line);
}

.doc-body .wp-block-details + .wp-block-details {
	margin-block-start: 0;
}

.doc-body .wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
}

.doc-body .wp-block-details > :not(summary) {
	margin-block-start: 0.75rem;
}

@media (max-width: 600px) {
	.doc-body .doc-pipeline__arrow {
		display: none;
	}
}

/* Long signatures and tables must not enlarge the page on narrow screens. */
.doc-body { min-width: 0; overflow-wrap: anywhere; }
.doc-body :is(pre, .wp-block-table) { max-width: 100%; }
@media (pointer: coarse), (max-width: 900px) {
	.doc-body [role="tab"], .doc-body button { min-height: 44px; }
}

/* Native video controls work with touch, keyboard, and without JavaScript. */
.doc-body video.au-clip, .doc-body video.metric-clip {
	display: block;
	width: 240px;
	max-width: 100%;
	min-height: 120px;
	border-radius: 6px;
	background: #eef1f4;
	object-fit: contain;
}
.doc-body video.metric-clip { width: 330px; margin-top: .5rem; }
.doc-body td:has(> video.au-clip) { min-width: 200px; }
.doc-body td:has(> video.metric-clip) { min-width: 240px; }

.doc-body .wp-block-table:has(video.metric-clip) table { table-layout: fixed; min-width: 900px; }
.doc-body .wp-block-table:has(video.metric-clip) :is(th, td):nth-child(1) { width: 360px; }
.doc-body .wp-block-table:has(video.metric-clip) :is(th, td):nth-child(2),
.doc-body .wp-block-table:has(video.metric-clip):has(th:nth-child(4)) :is(th, td):nth-child(3) { width: 90px; }
.doc-body .wp-block-table:has(video.au-clip) table { table-layout: fixed; min-width: 800px; }
.doc-body .wp-block-table:has(video.au-clip) :is(th, td):nth-child(1) { width: 240px; }
.doc-body .wp-block-table:has(video.au-clip) :is(th, td):nth-child(2) { width: 150px; }
.doc-body .wp-block-table:has(video.au-clip) :is(th, td):nth-child(4) { width: 190px; }