/* ==========================================================================
   Silly Singularity — Post embed card
   --------------------------------------------------------------------------
   Styles the iframe WordPress serves at /<post>/embed/ (the card shown when a
   post URL is pasted into an Embed block, here or on another WordPress site).
   Loaded after core's wp-embed-template.css and only overrides its colors,
   type and accents; core's layout is left alone.

   <html data-scheme="dark|light|system"> is set by theme7312_embed_scheme_attr()
   and the visitor's saved toggle choice is applied by the bootstrap script, as
   on the main site. Colors come from tokens.css; the Customizer's per-scheme
   overrides are printed into the embed head too.
   ========================================================================== */

/* Palette and fonts come from tokens.css (loaded first). */
:root {
	--embed-bg: var(--color-surface);
}
:root[data-scheme="light"] {
	--embed-bg: var(--color-bg);
}
@media (prefers-color-scheme: light) {
	:root[data-scheme="system"] {
		--embed-bg: var(--color-bg);
	}
}

/*
 * The page itself stays transparent and color-scheme is set on the card, not
 * the root: an iframe whose root color-scheme differs from the host page's
 * gets an opaque canvas painted behind it. tokens.css sets it on the root, so
 * reset it there (same specificity as its scheme selectors, loaded later).
 */
:root,
:root[data-scheme] {
	color-scheme: normal;
}
html,
body {
	background: transparent;
}

/* ── Card ─────────────────────────────────────────────────────────────── */

.wp-embed {
	color-scheme: dark;
	font-family: var(--font-family);
	color: var(--color-muted);
	background: var(--embed-bg);
	border: 1px solid var(--color-border);
	border-top: 3px solid var(--color-primary);
	border-radius: 4px;
	box-shadow: var(--shadow);
}
:root[data-scheme="light"] .wp-embed {
	color-scheme: light;
}
@media (prefers-color-scheme: light) {
	:root[data-scheme="system"] .wp-embed {
		color-scheme: light;
	}
}

.wp-embed a {
	color: var(--color-muted);
}

.wp-embed-heading {
	font-family: var(--font-family-heading);
	letter-spacing: .01em;
}

.wp-embed-heading a {
	color: var(--color-heading);
	transition: color .2s ease, text-shadow .2s ease;
}

.wp-embed-heading a:hover,
.wp-embed-heading a:focus {
	color: var(--color-primary);
	text-shadow: var(--glow-text);
}

.wp-embed-excerpt,
.wp-embed-excerpt p {
	color: var(--color-text);
}

.wp-embed .wp-embed-more {
	font-family: var(--font-mono);
	color: var(--color-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wp-embed .wp-embed-more:hover,
.wp-embed .wp-embed-more:focus {
	color: var(--color-accent);
}

.wp-embed-footer {
	border-top: 1px dashed var(--color-border);
	padding-top: 14px;
}

.wp-embed-site-title a {
	font-family: var(--font-mono);
	color: var(--color-heading);
}

.wp-embed-meta a:hover,
.wp-embed-meta a:focus,
.wp-embed-site-title a:hover,
.wp-embed-site-title a:focus {
	color: var(--color-primary);
}

.wp-embed-share-dialog-open .dashicons,
.wp-embed-comments a .dashicons {
	color: var(--color-muted);
}

/* ── Share dialog: always the terminal panel, in either scheme ─────────── */

.wp-embed-share-dialog {
	background-color: rgba(6, 10, 7, .95);
	color: #c9f5d4;
	border-radius: 4px;
}

.wp-embed-share-dialog .dashicons {
	color: #c9f5d4;
}

.wp-embed-share-tab-button button {
	font-family: var(--font-mono);
	color: #7fae8c;
}

.wp-embed-share-tab-button [aria-selected="true"],
.wp-embed-share-tab-button button:hover {
	color: #33ff66;
}

.wp-embed-share-tab-button + .wp-embed-share-tab-button,
html[dir="rtl"] .wp-embed-share-tab-button + .wp-embed-share-tab-button {
	border-color: #1c3a25;
}

.wp-embed-share-input {
	font-family: var(--font-mono);
	color: #c9f5d4;
	background: #0a110c;
	border: 1px solid #1c3a25;
	border-radius: 4px;
}

p.wp-embed-share-description {
	color: #7fae8c;
}

.wp-embed-share-dialog-open:focus .dashicons,
.wp-embed-share-dialog-close:focus .dashicons,
.wp-embed-share-input:focus {
	box-shadow: 0 0 0 1.5px var(--color-primary);
}