/**
 * Custom child-theme overrides.
 * This file is conditionally enqueued by functions.php if it exists.
 * Add brand-specific styles here.
 */

/* --- Animated counter: use the block's own text color (Primary / Accent) ---
 * voyager/animated-counter hardcodes `.counter-number { color: var(--accent, #6366f1) }`
 * in its style-index.css, which overrides the has-*-color the pattern sets via the
 * block's `textColor`. Make the number inherit the wrapper's chosen color instead so
 * "1,200+" is Primary (coral) and "4.9" is Accent (sea teal).
 * (Root fix belongs in voyager-blocks; this is the client-scoped override.)
 */
.wp-block-voyager-animated-counter.has-text-color .counter-number {
	color: inherit;
}

/* --- Outline button --------------------------------------------------------
 * theme.json sets a coral background on every `.wp-element-button`, which bleeds
 * into the `is-style-outline` variation (the "Our services" secondary CTA). Restore
 * a true outline: transparent fill, plum border + text, filled plum on hover.
 */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--secondary);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--secondary);
	color: #ffffff !important;
}

/* --- Headings use the Heading font (Poppins) -------------------------------
 * theme.json sets elements.heading.fontFamily, but WP emits it at :where() (zero)
 * specificity, so a higher-specificity rule from the parent theme leaves headings
 * on the body font. Pin them to the heading preset.
 */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	font-family: var(--wp--preset--font-family--heading);
}

/* --- Co-brand top bar: keep links legible on the plum background ------------
 * The bar sets its paragraph text to white, but elements.link recolors the link
 * to coral, which fails contrast on plum. Force white for links in the bar.
 */
header .has-secondary-background-color a {
	color: #ffffff;
}

/* --- Hero stat card: give the two counters room so their labels don't collide
 * on narrow viewports (the card ships with blockGap:0). --- */
.wp-block-group:has(> .wp-block-voyager-animated-counter) {
	gap: 1.75rem;
}

/* --- Services "detailed" cards: shrink-wrap the sage icon badge to its glyph.
 * The pattern originally set this inline as `width:min-content`, which isn't a
 * block-attribute-backed style and trips editor block-recovery. Moved here so the
 * group markup stays valid; scoped to a badge that is a direct child of a column
 * so the full-width sage-soft hero band is unaffected. */
.wp-block-column > .wp-block-group.has-sage-soft-background-color {
	width: min-content;
}