/**
 * Documentation tab — frontend.
 *
 * Inherits the theme's text colour, links and typography. Only structural
 * elements a theme may not reach inside a product tab get rules here.
 *
 * Colour strategy (shared with the companion "Changelog" tab plugin so the two
 * tabs read as one system):
 *
 * - Chrome (borders, surfaces) is derived from `currentColor`, so it adapts to
 *   whatever text colour the theme places here — subtle light lines on a dark
 *   theme, subtle dark lines on a light one. No `prefers-color-scheme` guessing.
 *
 * - The single call-to-action box — the access gate — takes the theme's accent
 *   colour instead, so it reads like WooCommerce's own review "verification
 *   required" box. Flatsome and many other themes expose `--primary-color`;
 *   there is a neutral fallback for those that don't.
 *
 * A shop can retune everything via the custom properties below. No `!important`;
 * single-class specificity so theme and shop CSS always win.
 */

.wc-product-documentation {
	/* Accent — the theme's primary colour; neutral translucent fallback. */
	--wc-doc-accent: var( --primary-color, rgba( 127, 127, 127, 0.5 ) );

	/* Neutral chrome — currentColor mixes, with rgba fallbacks below. */
	--wc-doc-border: rgba( 127, 127, 127, 0.28 );
	--wc-doc-surface: rgba( 127, 127, 127, 0.1 );
	--wc-doc-radius: 4px;

	--wc-doc-mono-font: var(
		--wp--preset--font-family--monospace,
		ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace
	);
}

@supports ( color: color-mix( in srgb, currentColor 10%, transparent ) ) {
	.wc-product-documentation {
		--wc-doc-border: color-mix( in srgb, currentColor 22%, transparent );
		--wc-doc-surface: color-mix( in srgb, currentColor 9%, transparent );
	}
}

.wc-product-documentation > :first-child {
	margin-top: 0;
}

.wc-product-documentation > :last-child {
	margin-bottom: 0;
}

.wc-product-documentation img {
	max-width: 100%;
	height: auto;
}

.wc-product-documentation h1,
.wc-product-documentation h2,
.wc-product-documentation h3 {
	line-height: 1.25;
}

.wc-product-documentation a {
	text-decoration: underline;
}

.wc-product-documentation ul {
	list-style: disc outside;
	padding-left: 1.5em;
}

.wc-product-documentation ol {
	list-style: decimal outside;
	padding-left: 1.5em;
}

.wc-product-documentation li {
	margin: 0.25em 0;
}

.wc-product-documentation blockquote {
	margin: 1em 0;
	padding: 0.25em 0 0.25em 1em;
	border-inline-start: 4px solid var( --wc-doc-border );
	font-style: italic;
}

.wc-product-documentation :not( pre ) > code {
	padding: 0.15em 0.35em;
	border-radius: 3px;
	background: var( --wc-doc-surface );
	font-family: var( --wc-doc-mono-font );
	font-size: 0.9em;
}

.wc-product-documentation pre {
	margin: 1em 0;
	padding: 1em;
	overflow-x: auto;
	border: 1px solid var( --wc-doc-border );
	border-radius: var( --wc-doc-radius );
	background: var( --wc-doc-surface );
	font-family: var( --wc-doc-mono-font );
	font-size: 0.9em;
	line-height: 1.5;
	white-space: pre;
	tab-size: 4;
}

.wc-product-documentation pre code {
	padding: 0;
	border-radius: 0;
	background: none;
	font-size: inherit;
}

/* Access gate — mirrors WooCommerce's review "verification required" box:
   a thin bordered panel in the theme accent, generous even padding, no fill. */
.wc-product-documentation__gate {
	margin: 0;
	padding: 30px;
	border: 1px solid var( --wc-doc-accent );
	border-radius: var( --wc-doc-radius );
}

.wc-product-documentation__gate-message {
	margin: 0;
}

.wc-product-documentation__gate-message a {
	white-space: nowrap;
}