/* Unipain front-end supplements.
 * The design system (palette, type scale, spacing) is defined in theme.json.
 * This file holds only behavior and layout rules that theme.json cannot
 * express. Keep it lean — no frameworks, no libraries.
 */

/* Sticky site header. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: #fff;
	box-shadow: 0 1px 0 rgba(27, 29, 32, 0.08);
}

/* Utility bar links inherit the bar's light text. */
.utility-bar a {
	color: #fff;
	text-decoration: none;
}
.utility-bar a:hover {
	color: #fff;
	text-decoration: underline;
}

/* Visible, on-brand keyboard focus for accessibility. */
:focus-visible {
	outline: 3px solid #c02010;
	outline-offset: 2px;
	border-radius: 2px;
}

/* Native details/summary FAQ accordions. */
.wp-block-details {
	transition: border-color 0.15s ease;
}
.wp-block-details summary {
	font-weight: 700;
	cursor: pointer;
	list-style-position: outside;
}
.wp-block-details summary::marker {
	color: #c02010;
}
.wp-block-details[open] {
	border-color: #c02010;
}

/* Card hover lift for pattern card grids. */
.unipain-card {
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.unipain-card:hover {
	transform: translateY(-3px);
	border-color: #c02010;
	box-shadow: 0 12px 28px rgba(27, 29, 32, 0.10);
}

/* Footer link treatment on the charcoal background. */
.site-footer a {
	color: #fff;
	text-decoration: none;
}
.site-footer a:hover {
	color: #fff;
	text-decoration: underline;
}
.site-footer .footer-muted,
.site-footer .footer-muted a {
	color: #c9ced4;
}

/* Keep the hero cover image crisp on large screens. */
.hero-cover img {
	object-position: center 30%;
}

/* Match Mockup C's hero art treatment: the same desaturating grade applied
   to the spine hero image in the approved mockup (grayscale .82, saturate .45,
   contrast 1.08), so it blends into the dark charcoal hero. */
.hero-cover .wp-block-cover__image-background {
	filter: grayscale(.82) saturate(.45) contrast(1.08);
}

/* Provider card portraits: the photo itself is the 88px circle. */
.unipain-provider-photo {
	margin: 0 auto var(--wp--preset--spacing--20);
	text-align: center;
}
.unipain-provider-photo img {
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: 50%;
	display: inline-block;
}

/* Reduced motion: respect users who prefer it. */
@media (prefers-reduced-motion: reduce) {
	.unipain-card,
	.unipain-card:hover {
		transition: none;
		transform: none;
	}
}