/**
 * Pet Calc Engine - embed module styles.
 * Two roles: (a) the collapsed "Embed this calculator" panel rendered on
 * normal calculator pages, (b) embed-document-only rules gated on
 * body[data-pce-embed] so they never leak into the full site.
 */

/* ---------- Snippet panel (full pages) ---------- */

.pce-embed-panel {
	margin: 1.25rem 0 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--pc-border, #dce3df);
	font-size: 0.85rem;
	color: var(--pc-muted, #5b6b62);
}

.pce-embed-summary {
	cursor: pointer;
	display: inline-block;
	padding: 0.15rem 0;
	color: var(--pc-muted, #5b6b62);
	font-size: 0.85rem;
	line-height: 1.4;
	user-select: none;
}

.pce-embed-summary:hover {
	color: var(--pc-ink, #1f2a24);
}

.pce-embed-body {
	margin-top: 0.5rem;
}

.pce-embed-code {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.45;
	color: var(--pc-ink, #1f2a24);
	background: var(--pc-surface, #f5f8fa);
	border: 1px solid var(--pc-border, #dce3df);
	border-radius: var(--pc-radius, 10px);
	padding: 0.6rem 0.7rem;
	min-height: 170px;
	resize: vertical;
	white-space: pre;
	overflow: auto;
}

.pce-embed-code:focus {
	outline: none;
	border-color: var(--pc-accent, #1f6f8b);
}

/* iOS zooms the page when focusing inputs under 16px; a readonly code box
   must not trigger that. */
@media (max-width: 480px) {
	.pce-embed-code {
		font-size: 16px;
	}
}

.pce-embed-copy {
	margin-top: 0.5rem;
	background: var(--pc-accent, #1f6f8b);
	color: var(--pc-accent-ink, #ffffff);
	border: 0;
	border-radius: calc(var(--pc-radius, 10px) - 4px);
	padding: 0.4rem 0.9rem;
	font-size: 0.85rem;
	cursor: pointer;
}

.pce-embed-copy:hover {
	filter: brightness(1.08);
}

.pce-embed-license {
	margin: 0.9rem 0 0;
	padding: 0.4rem 0;
	line-height: 1.5;
	font-size: 0.85rem;
	color: var(--pc-muted, #5b6b62);
}

/* ---------- Embed document only ---------- */

body[data-pce-embed] {
	margin: 0;
	padding: 8px 12px 14px;
	background: #ffffff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-text-size-adjust: 100%;
}

/* The h1 shares the calculator card's max-width with auto margins so title
   and card stay aligned at any frame width. */
.pce-embed-title {
	max-width: 720px;
	margin: 0.25rem auto 0;
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--pc-ink, #1f2a24);
}

/* Hide the wrapper's own duplicate title heading; markup stays identical
   to the shortcode output. */
body[data-pce-embed] .petcalc-title {
	display: none;
}

body[data-pce-embed] .petcalc-container {
	margin: 0.5rem auto 0.75rem;
	--pc-accent: var(--pce-accent, var(--wp--preset--color--primary, #1f6f8b));
}

.pce-embed-handoff {
	margin: 0.9rem 0 0.25rem;
	font-size: 0.9rem;
	line-height: 1.5;
}

.pce-embed-handoff a {
	color: var(--pc-accent, #1f6f8b);
	text-decoration: underline;
}

/* ---------- Dark theme (embed document only) ---------- */

body[data-pce-embed].pce-theme-dark {
	background: #131816;
	color: #e8ece9;
}

body[data-pce-embed].pce-theme-dark .pce-embed-title {
	color: #e8ece9;
}

body[data-pce-embed].pce-theme-dark .petcalc-container {
	--pc-bg: #1a211d;
	--pc-surface: #202924;
	--pc-border: #2e3a33;
	--pc-ink: #e8ece9;
	--pc-muted: #a3b3aa;
	--pc-accent-ink: #ffffff;
}