/* Shortcodex — WPDholder (term-first picture card).
   Styles the standard heading, image, and text blocks it holds, so the card
   looks designed while the content stays plain, editable, and Yoast-readable.
   Inherits Blogineer design tokens when present, with neutral fallbacks. */

.scx-wpd {
	--scx-accent: var(--accent, #4b5563);
	--scx-accent-ink: var(--accent-ink, #374151);
	--scx-soft: var(--accent-soft, #eef1f5);
	--scx-surface: var(--surface, #ffffff);
	--scx-ink: var(--ink, #1b1a17);
	--scx-muted: color-mix(in srgb, var(--scx-ink) 64%, transparent);
	--scx-line: var(--line, #e6e3dc);
	--scx-radius: var(--radius, 16px);
	--scx-shadow: 0 1px 2px rgba(17, 17, 20, .05), 0 14px 30px -18px rgba(17, 17, 20, .28);

	box-sizing: border-box;
	margin: 1.7em 0;
	padding: 1.25em 1.4em 1.35em;
	border: 1px solid var(--scx-line);
	border-radius: var(--scx-radius);
	background: var(--scx-surface);
	box-shadow: var(--scx-shadow);
	color: var(--scx-ink);
}

.scx-wpd *,
.scx-wpd *::before,
.scx-wpd *::after { box-sizing: border-box; }

/* Compact centers a trim card; full spans the content column. */
.scx-wpd--compact { max-width: 460px; margin-inline: auto; }
.scx-wpd--full { max-width: none; }

/* ---- Accent schemes — recolor the term rule, markers, and links only. ---- */
.scx-wpd.is-blue    { --scx-accent: #2563eb; --scx-accent-ink: #1d4ed8; --scx-soft: #dbeafe; }
.scx-wpd.is-emerald { --scx-accent: #059669; --scx-accent-ink: #065f46; --scx-soft: #d1fae5; }
.scx-wpd.is-violet  { --scx-accent: #7c3aed; --scx-accent-ink: #6d28d9; --scx-soft: #ede9fe; }
.scx-wpd.is-slate   { --scx-accent: #334155; --scx-accent-ink: #0f172a; --scx-soft: #e2e8f0; }

/* First and last child never fight the card padding. */
.scx-wpd > :first-child,
.scx-wpd .block-editor-inner-blocks > .block-editor-block-list__layout > :first-child { margin-top: 0; }
.scx-wpd > :last-child { margin-bottom: 0; }

/* ---- Term (a real core heading, or paragraph if switched) ---- */
.scx-wpd h1,
.scx-wpd h2,
.scx-wpd h3,
.scx-wpd h4 {
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.015em;
	color: var(--scx-ink);
	margin: 0 0 .55em;
}
.scx-wpd > h1:not(:empty),
.scx-wpd > h2:not(:empty),
.scx-wpd > h3:not(:empty),
.scx-wpd > h4:not(:empty) {
	padding-bottom: .4em;
	border-bottom: 2px solid color-mix(in srgb, var(--scx-accent) 40%, var(--scx-line));
}
.scx-wpd :is(h1, h2, h3, h4):empty { display: none; }
.scx-wpd h2 { font-size: clamp(1.32rem, 1.1rem + 1vw, 1.65rem); }
.scx-wpd h3 { font-size: clamp(1.16rem, 1rem + 0.6vw, 1.36rem); }
.scx-wpd h4 { font-size: 1.14rem; }

/* ---- Image: held at its own dimensions, never enlarged, cropped, or distorted ----
   A square source shows as a square, a portrait as a portrait. The figure hugs
   the image and centers it; the width/height/aspect-ratio resets defeat any
   theme or core rule that would otherwise stretch or squeeze the picture.
   Wide and full alignments keep their intended span. */
.scx-wpd figure.wp-block-image {
	margin: 0 auto 1.05em;
	max-width: 100%;
	text-align: center;
}
.scx-wpd figure.wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
	width: fit-content;
}
.scx-wpd figure.wp-block-image:not(.alignwide):not(.alignfull) img {
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: 100%;
	aspect-ratio: auto !important;
	margin-inline: auto;
	border-radius: 12px;
}
.scx-wpd figure.wp-block-image figcaption {
	margin-top: .5em;
	font-size: .82rem;
	line-height: 1.45;
	color: var(--scx-muted);
	text-align: center;
}
.scx-wpd .wp-block-image.alignleft { margin-inline: 0 1.2em; }
.scx-wpd .wp-block-image.alignright { margin-inline: 1.2em 0; }

/* ---- Description text ---- */
.scx-wpd p {
	margin: 0 0 .7em;
	font-size: clamp(1rem, 0.96rem + 0.22vw, 1.1rem);
	line-height: 1.66;
	color: var(--scx-ink);
}
.scx-wpd p:last-child { margin-bottom: 0; }

.scx-wpd ul,
.scx-wpd ol {
	margin: .7em 0;
	padding-inline-start: 1.45em;
	font-size: clamp(1rem, 0.96rem + 0.22vw, 1.1rem);
	line-height: 1.6;
}
.scx-wpd ul { list-style: disc outside; }
.scx-wpd ul ul { list-style: circle outside; }
.scx-wpd ol { list-style: decimal outside; }
.scx-wpd ol ol { list-style: lower-alpha outside; }
.scx-wpd li { margin: .32em 0; }
.scx-wpd li::marker { color: var(--scx-accent); }

.scx-wpd strong { font-weight: 700; }
.scx-wpd a {
	color: var(--scx-accent-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.scx-wpd blockquote {
	margin: .8em 0;
	padding: .15em 0 .15em 1em;
	border-inline-start: 3px solid var(--scx-accent);
	font-style: italic;
	color: var(--scx-muted);
}

/* ---- Ad & foreign-element isolation ---- */
.scx-wpd ins.adsbygoogle,
.scx-wpd [id*="google_ads"],
.scx-wpd [class*="ad-inserter"],
.scx-wpd [class*="adinserter"],
.scx-wpd [class*="advanced-ads"],
.scx-wpd [data-ad],
.scx-wpd iframe[src*="doubleclick"],
.scx-wpd iframe[src*="googlesyndication"] { display: none !important; }

/* ---- Dark mode — follows the site theme's dark scheme by default ----
   Common dark-mode signals are matched inside :where(), so the ancestor prefix
   carries no specificity and a per-block Light or Dark choice always overrides
   it. prefers-color-scheme covers themes that defer to the visitor's system. */
:where( [data-theme="dark"], [data-color-scheme="dark"], [data-mode="dark"], html.dark, .dark-mode, .is-dark, .is-dark-theme, .wp-dark-mode-active, body.dark, .theme-dark, .darkmode--activated ) .scx-wpd {
	--scx-surface: #1e1c18;
	--scx-ink: #f0ece4;
	--scx-line: #38332e;
	--scx-soft: #2a2620;
	--scx-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 34px -20px rgba(0, 0, 0, .7);
}
@media (prefers-color-scheme: dark) {
	.scx-wpd {
		--scx-surface: #1e1c18;
		--scx-ink: #f0ece4;
		--scx-line: #38332e;
		--scx-soft: #2a2620;
		--scx-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 34px -20px rgba(0, 0, 0, .7);
	}
}
:where( [data-theme="dark"], [data-color-scheme="dark"], [data-mode="dark"], html.dark, .dark-mode, .is-dark, .is-dark-theme, .wp-dark-mode-active, body.dark, .theme-dark, .darkmode--activated ) .scx-wpd[class*="is-"] {
	--scx-accent-ink: color-mix(in srgb, var(--scx-accent) 52%, #ffffff);
}
@media (prefers-color-scheme: dark) {
	.scx-wpd[class*="is-"] {
		--scx-accent-ink: color-mix(in srgb, var(--scx-accent) 52%, #ffffff);
	}
}

/* ---- Per-block color mode override (System / Light / Dark) ---- */
.scx-wpd[data-scx-mode="dark"] {
	--scx-surface: #1e1c18;
	--scx-ink: #f0ece4;
	--scx-line: #38332e;
	--scx-soft: #2a2620;
	--scx-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 34px -20px rgba(0, 0, 0, .7);
}
.scx-wpd[data-scx-mode="dark"][class*="is-"] {
	--scx-accent-ink: color-mix(in srgb, var(--scx-accent) 52%, #ffffff);
}
.scx-wpd[data-scx-mode="light"] {
	--scx-surface: #ffffff;
	--scx-ink: #1b1a17;
	--scx-line: #e6e3dc;
	--scx-soft: #eef1f5;
	--scx-shadow: 0 1px 2px rgba(17, 17, 20, .05), 0 14px 30px -18px rgba(17, 17, 20, .28);
}
@media (prefers-color-scheme: dark) {
	.scx-wpd[data-scx-mode="light"] {
		--scx-surface: #ffffff;
		--scx-ink: #1b1a17;
		--scx-line: #e6e3dc;
		--scx-soft: #eef1f5;
	}
}
[data-theme="dark"] .scx-wpd[data-scx-mode="light"] {
	--scx-surface: #ffffff;
	--scx-ink: #1b1a17;
	--scx-line: #e6e3dc;
	--scx-soft: #eef1f5;
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
	.scx-wpd { padding: 1.05em 1.1em 1.15em; }
	.scx-wpd p, .scx-wpd ul, .scx-wpd ol { font-size: 1.04rem; }
}

/* ---- Reduced motion / print ---- */
@media (prefers-reduced-motion: reduce) {
	.scx-wpd, .scx-wpd * { transition: none !important; animation: none !important; }
}
@media print {
	.scx-wpd { break-inside: avoid; box-shadow: none; border-color: #999; }
}