/* ProDev — utilities beyond theme.json. Tokens come from CSS vars; no hardcoded brand colors. */

.prodev-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--card);
	transition: transform var(--wp--custom--motion--enter), box-shadow var(--wp--custom--motion--enter);
}

/* Lift only cards that are actually clickable — hover motion implies affordance. */
.prodev-card:has(a):hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--custom--shadow--card-hover);
}

/* Whole-card click target: stretch the card's link over the card. */
.prodev-card {
	position: relative;
}

.prodev-card :where(.prodev-card-link, .wp-block-post-title) a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.prodev-pill {
	display: inline-block;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	padding: 9px 14px;
	font-weight: 700;
	color: var(--wp--preset--color--muted);
}

.prodev-eyebrow {
	color: var(--wp--preset--color--primary);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: var(--wp--preset--font-size--small);
}

.prodev-btn-secondary .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--accent);
}

.prodev-btn-secondary .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-shade);
	color: var(--wp--preset--color--white);
}

.prodev-btn-dark .wp-block-button__link {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* FAQ accordion via core/details */
.prodev-faq details {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 16px 0;
}

.prodev-faq summary {
	font-weight: 900;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	list-style: none;
}

.prodev-faq summary::-webkit-details-marker {
	display: none;
}

/* Chevron state indicator (consistent across browsers, animates on open). */
.prodev-faq summary::after {
	content: "";
	width: 9px;
	height: 9px;
	flex-shrink: 0;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--wp--custom--motion--enter);
}

.prodev-faq details[open] summary::after {
	transform: rotate(-135deg);
}

.prodev-faq summary:hover,
.prodev-faq details[open] summary {
	color: var(--wp--preset--color--primary);
}

.prodev-faq details > :where(:not(summary)) {
	padding-top: 10px;
}

/* Visible focus everywhere (WCAG 2.4.7) */
:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Focus ring is invisible on primary surfaces — switch to accent there. */
.has-primary-background-color :where(a, button, summary, input, select, textarea):focus-visible {
	outline-color: var(--wp--preset--color--accent);
}

/* Default (primary) buttons on a primary surface are invisible — render them as secondary.
   Also covers old pattern markup already baked into post content in the DB. */
.has-primary-background-color .wp-block-button:not(.prodev-btn-dark) .wp-block-button__link:not(.has-background) {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
}

.has-primary-background-color .wp-block-button:not(.prodev-btn-dark) .wp-block-button__link:not(.has-background):hover {
	background: var(--wp--preset--color--accent-shade);
	color: var(--wp--preset--color--white);
}

/* Footer: global link color (primary) is ~1.6:1 on the dark background — inherit light text instead. */
footer.wp-block-group a:where(:not(.wp-element-button)) {
	color: currentColor;
	text-decoration: underline;
	text-underline-offset: 2px;
}

footer.wp-block-group a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--white);
}

/* Readability: cap text measure inside main content (60–75ch rule). */
main :where(p, ul, ol) {
	max-width: 70ch;
}

/* Breadcrumb (styled like the eyebrow it replaces) */
.prodev-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.prodev-breadcrumb a:hover {
	text-decoration: underline;
}

/* Sticky header — keeps the CTA reachable on long landings. */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 100;
}

body.admin-bar .wp-site-blocks > header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .wp-site-blocks > header {
		top: 46px;
	}
}

/* Compact header on small phones so logo + burger + CTA never overflow. */
@media (max-width: 480px) {
	.wp-site-blocks > header .wp-block-site-logo img {
		max-width: 120px;
		height: auto;
	}

	.wp-site-blocks > header .wp-block-button__link {
		padding: 10px 16px;
		font-size: var(--wp--preset--font-size--small);
	}
}

/* Calculator (inputs ≥16px font so iOS doesn't auto-zoom; ≥44px touch target) */
.prodev-calc {
	padding: 28px;
}

.prodev-calc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 12px;
}

[data-prodev-calculator] label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

[data-prodev-calculator] input {
	width: 100%;
	font-size: 1rem;
	min-height: 44px;
	padding: 10px 12px;
	margin-top: 4px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

.prodev-calc-result {
	font-size: 42px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}