/*
 * The brand green, made readable.
 *
 * Measured 2026-08-22 and recorded in docs/brand/visual.md: white text on #75c043 is
 * 2.2:1, and #75c043 as text on white is 2.2:1. Both fail WCAG AA at every size, on a
 * site whose readers include people with visual disturbance. It affected the eyebrow
 * heading on every condition page, the announcement banner, the secondary button, the
 * header phone button, the primary button's hover state and the team page's role
 * captions.
 *
 * One rule fixes all of it without changing the green itself: green is a SURFACE, never
 * ink. Text that sits ON the green is the near-black heading colour (8.8:1), which is what
 * the conditions filter bar has done since 2026-09-02. Text that must be green - the
 * eyebrow, the team captions - uses `secondary_accessible`, the same hue and saturation
 * darkened to 4.6:1. Declared in config/brand.yaml; measured by the `green-*` rules in
 * config/style-rules.yaml.
 *
 * Every selector here is at least as specific as the theme's own, so no `!important`
 * except where the value being beaten is an inline style.
 */

:root {
	--anr-green-text: #4f832c;
	--anr-on-green: #070a22;
}

/* --- Green as text --------------------------------------------------------------------- */

/* The eyebrow above every condition and service title. */
.ct-heading .ct-heading-sub,
#content .ct-heading .ct-heading-sub {
	color: var(--anr-green-text);
}

/* The role caption on the team page. `.anr-card__eyebrow` is the card the plugin's own staff
   grid renders (includes/staff-grid.php); the two theme selectors below it are the masonry
   grid that card replaced, kept because the theme still renders it anywhere the shortcode is
   used outside `/our-team/`. Both carry `.item-position`, which is what
   `green-team-captions-are-accessible` in config/style-rules.yaml measures. */
.anr-card--person .anr-card__eyebrow,
.ct-grid-staff .item-position,
.grid-item .item-body .item-position {
	color: var(--anr-green-text);
}

/* The same caption on the person's own page, which this sheet missed until 2026-09-07: the
   theme sets `.single-doctor-position` to the brand green itself, 2.24:1 on white, on all
   twenty-one staff pages. `body.single-staff` because the theme's own rule is a bare class
   and this has to outrank it without `!important`. */
body.single-staff .single-doctor-position {
	color: var(--anr-green-text);
}

/* --- Ink on green -------------------------------------------------------------------------- */

/* The announcement banner. The plugin writes the colour inline on the span. */
body #simple-banner .simple-banner-text,
body #simple-banner .simple-banner-text span,
body #simple-banner .simple-banner-text a {
	color: var(--anr-on-green) !important;
	font-family: Rubik, sans-serif;
	font-weight: 500;
}

/* The secondary button, wherever it appears (sidebar "Contact Us", forms). Its hover state
   is the dark blue with white text and stays as it is. */
.btn.btn-secondary,
a.btn.btn-secondary,
body .btn.btn-secondary {
	color: var(--anr-on-green);
}

/* The primary button turns green on hover: the text turns dark with it. */
.btn:hover,
a.btn:hover,
body .btn:not(.btn-outline):not(.btn-secondary):hover {
	color: var(--anr-on-green);
}

.btn.btn-secondary:hover,
a.btn.btn-secondary:hover,
body .btn.btn-secondary:hover {
	color: #fff;
}

/* The header's phone button. */
body .header-btn-phone,
body .header-btn-phone a {
	color: var(--anr-on-green);
}

/* The Ninja Forms submit button is styled by the child theme as a primary button; its
   hover follows the same rule. */
body .nf-form-cont .nf-form-wrap input[type="button"]:hover {
	color: var(--anr-on-green);
}