/* -----------------------------------------------------------------------------
   Single Team Member — "Care Details" panels
   Markup produced by includes/team-care-details-shortcodes.php:
     [fcc_ages_treated] [fcc_areas_focus] [fcc_treatment_approach]
     [fcc_languages_spoken] [fcc_insurance_accepted]

   Elementor's HTML widget doesn't apply the kit's "Text" typography to raw
   markup the way native widgets do, so font-family is set explicitly here —
   confirmed via computed styles on fccwellbeing.local that body/heading copy
   site-wide renders in the "Poppins" kit font, this shortcode output was
   silently falling back to the browser default without it.

   Design tokens below are the site's actual Elementor kit colors (read from
   computed --e-global-color-* custom properties on a live page), not guesses:
     --e-global-color-969937c  #0D466C  (eyebrow/accent blue)
     --e-global-color-primary  #021223  (near-black navy — body/heading text)
     --e-global-color-text     #021223
     --e-global-color-f42da9f  #E1ECE9  (light border/divider)

   All box chrome (background, padding, radius, shadow) for the four Care
   Details boxes lives here rather than in Elementor's Style tab — see the
   ".fcc-provider-care-box" rules — so nothing about their appearance is set in the
   builder. Elementor is only responsible for placing an Icon + Heading (the
   two boxes that use one) and an HTML widget inside a container carrying the
   matching CSS class; see the body_class filter in
   includes/team-care-details-shortcodes.php for the full class list and the
   empty-section hide/expand contract.
   ----------------------------------------------------------------------------- */
.fcc-bio-location-link.elementor-widget-heading .elementor-heading-title[class*=elementor-size-] a {
	color: var(--e-global-color-969937c);
    text-decoration: underline;
}
.fcc-bio-location-link.elementor-widget-heading .elementor-heading-title[class*=elementor-size-] a:hover {
	color: var(--e-global-color-209c682);
}
.fcc-bio-location-link.elementor-widget-heading .elementor-heading-title[class*=elementor-size-] a:is(:hover, :focus, :focus-visible) {
	text-decoration: none;
}
.fcc-provider-care-section {
	font-family: var( --e-global-typography-text-font-family, "Poppins" ), sans-serif;
}

.leading-none {
	line-height: 1;
}


/* ==========================================================================
    Team Members
    ========================================================================== */
.fcc-bio-details .elementor-icon-box-wrapper .elementor-icon-box-content .elementor-icon-box-title {
	margin: 0;
}
.fcc-bio-details .elementor-widget-text-editor:has(> .fcc-bio-single-location) {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	padding-top: 10px;
}
.fcc-bio-details h3 {
	font-size: 20px;
	line-height: 28px;
	display: inline-flex;
	margin: 0 0 9px;
}
.fcc-bio-details h3:has(a:hover, a:focus, a:focus-visible) {
	border-color: transparent;
}
.fcc-bio-details a:hover, a:focus, a:focus-visible {
	text-decoration: none !important;
}
.fcc-bio-single-location h3 {
	margin-bottom: 8px;
}
.fcc-bio-single-location p {
	margin: 0;
}

@media only screen and (max-width: 1024px) {
	.fcc-bio-details .elementor-widget-text-editor:has(> .fcc-bio-single-location) {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media only screen and (max-width: 540px) {
	.fcc-bio-details .elementor-widget-text-editor:has(> .fcc-bio-single-location) {
		grid-template-columns: 1fr;
	}
}

.fcc-bio-bio .elementor-icon-box-wrapper .elementor-icon-box-content .elementor-icon-box-title {
    margin: 0;
}
.fcc-bio-bio .elementor-widget-text-editor:has(> .fcc-bio-single-location) {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 10px;
}
.fcc-bio-bio h3 {
    font-size: 20px;
    line-height: 28px;

    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: var(--e-global-color-969937c);
    display: inline-flex;
    margin: 0 0 9px;
}
.fcc-bio-bio h3:has(a:hover, a:focus, a:focus-visible) {
    border-color: transparent;
}
.fcc-bio-single-location p {
    margin: 0;
}

/* ============================================================================
   CARE DETAILS BOXES — chrome, spacing, empty-state hide
   ============================================================================

   Aug 2026 redesign (FCC / Trevor Clevenger handoff): five uniform boxes,
   full width, all the same width, stacked. White fill, thin light-blue
   rounded border, NO shadow, NO fill tint. Each box holds a small uppercase
   blue label above a plain two-column, column-major list of values in bold
   dark navy — nothing that reads as a button/pill/card. Empty field → the
   whole box hides (body_class hooks below). */

.fcc-provider-care-box {
	box-sizing: border-box;
	background-color: #fff;
	border: 1px solid var( --e-global-color-f42da9f, #E1ECE9 );
	border-radius: 16px;
	padding: 1.75rem;
}

@media only screen and (max-width: 767px) {
	.fcc-provider-care-box {
		padding: 1.25rem;
		border-radius: 14px;
	}
}

/* Empty-section hiding, driven by body classes computed in PHP (see
   fcc_get_provider_terms() usage in the body_class filter) rather than
   guessed from rendered DOM emptiness. !important guards against Elementor's
   own container display rules winning a specificity tie. */
body.fcc-provider-care-hide-age .fcc-provider-care-box--age,
body.fcc-provider-care-hide-focus .fcc-provider-care-box--focus,
body.fcc-provider-care-hide-approach .fcc-provider-care-box--approach,
body.fcc-provider-care-hide-language .fcc-provider-care-box--language,
body.fcc-provider-care-hide-insurance .fcc-provider-care-box--insurance {
	display: none !important;
}

/* Team members with no Ages Treated at all (admin/support roles — the
   signal that they don't see patients directly) lose the whole Care
   Details block, not just one box. Requires that outermost wrapping
   container to carry fcc-provider-care-root. */
body.fcc-provider-care-hide-section .fcc-provider-care-root {
	display: none !important;
}

/* Quick-facts strip empty (no derived Ages Served range): hide its whole
   Elementor HTML widget so no empty shell/padding is left. The widget must
   carry the fcc-provider-quick-facts-widget class (Advanced → CSS Classes);
   the marker lands on the same node as .elementor-widget-html. */
body.fcc-provider-hide-quick-facts .fcc-provider-quick-facts-widget {
	display: none !important;
}

/* ============================================================================
   SECTION HEADING — small uppercase blue label (no icon)
   ============================================================================ */

.fcc-provider-care-heading {
	margin: 0 0 1rem;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --e-global-color-969937c, #0D466C );
}

/* ============================================================================
   VALUE LIST — two columns, column-major, bold dark navy, plain text
   ============================================================================

   CSS multi-column fills the left column top-to-bottom before the right,
   matching the handoff ("ordered column-major") and the mockup. Columns
   balance by height, so a value that wraps to two lines (e.g. "Addiction
   Disorders (alcohol, illicit substances, sexual behaviors)") is accounted
   for without hand-splitting the list. */

.fcc-provider-care-list {
	margin: 0;
	padding: 0;
	list-style: none;
	column-count: 2;
	column-gap: 2.5rem;
}

.fcc-provider-care-item {
	/* Keep each value whole within its column instead of splitting a
	   multi-line value across the column break. */
	break-inside: avoid;
	margin: 0 0 0.625rem;
	font-size: 0.9375rem;
	line-height: 1.45;
	font-weight: 600;
	color: var( --e-global-color-primary, #021223 );
	/* Long unbroken tokens (e.g. "Schizophrenia/Psychotic",
	   "Maternal/Pregnancy") would otherwise overflow the column — only
	   overflow-wrap:anywhere is spec'd to break inside such a token. */
	overflow-wrap: anywhere;
}

.fcc-provider-care-item:last-child {
	margin-bottom: 0;
}

/* Mobile: single column — the second column's items stack below the first
   (per handoff: "the top item in the second column drops below the first
   column"). */
@media only screen and (max-width: 767px) {
	.fcc-provider-care-list {
		column-count: 1;
	}
}

/* Jump-link targets. scroll-margin keeps the target clear of the sticky
   header when scrolled to — the care boxes (quick-facts "View accepted plans")
   and the location blocks (the "Located at Gilbert" city links). */
.fcc-provider-care-section,
.fcc-bio-single-location {
	scroll-margin-top: 120px;
}

/* ============================================================================
   QUICK-FACTS STRIP — top-of-page module ([fcc_provider_quick_facts])
   ============================================================================

   Aug 2026 handoff §1: a compact row that sits high on the page (under the
   role) surfacing the two highest-intent facts — Ages Served and Accepts
   Insurance — plus the Schedule Appointment CTA. Follows the LifeStance
   pattern: short label/value pairs where the value anchors down to its full
   detail box. Icons are optional (icons="no") so FCC can compare. */

.fcc-provider-quick-facts {
	font-family: var( --e-global-typography-text-font-family, "Poppins" ), sans-serif;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.fcc-provider-quick-facts__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

/* Thin vertical rule between items (not before the first), matching the
   mockup's column dividers. */
.fcc-provider-quick-facts__item + .fcc-provider-quick-facts__item {
	padding-left: .5rem;
	border-left: 1px solid var( --e-global-color-f42da9f, #E1ECE9 );
}

.fcc-provider-quick-facts__icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: var( --e-global-color-969937c, #0D466C );
}

.fcc-provider-quick-facts__icon svg {
	width: 28px;
	height: 28px;
}

.fcc-provider-quick-facts__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.fcc-provider-quick-facts__label {
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.2;
	color: var( --e-global-color-primary, #021223 );
}

.fcc-provider-quick-facts__value {
	font-size: 0.8125rem;
	line-height: 1.25;
	color: var( --e-global-color-primary, #021223 );
	overflow-wrap: anywhere;
}

.fcc-provider-quick-facts__link {
	color: var( --e-global-color-969937c, #0D466C );
	font-weight: 600;
	text-decoration: none;
}

.fcc-provider-quick-facts__link:hover,
.fcc-provider-quick-facts__link:focus-visible {
	text-decoration: underline;
}

/* Schedule Appointment CTA: the markup is a standard Elementor button, so its
   color/radius/hover come from the kit's global .elementor-button rule. Only
   the size is trimmed here to sit compactly in the single-line strip — the
   `a.elementor-button` selector (0,2,1) outranks the kit rule (0,2,0) so the
   smaller padding/font-size win without !important. */
.fcc-provider-quick-facts__item--cta .elementor-button-wrapper {
	line-height: 0;
}

.fcc-provider-quick-facts__item--cta a.elementor-button {
	padding: 11px 20px;
	font-size: 0.8125rem;
}

/* Tablet / small desktop (440–1024px): Ages Served + Accepts Insurance stay
   together on the first line; the CTA drops to its own line below. Forcing the
   CTA to a full-width flex basis makes it wrap while the first two share the
   line above; the strip's row-gap supplies the vertical spacing. */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	/* Compound selector (two classes) so it outranks the base divider rule
	   `.fcc-provider-quick-facts__item + .fcc-provider-quick-facts__item` and
	   actually clears the CTA's left padding/border on its own line. */
	.fcc-provider-quick-facts .fcc-provider-quick-facts__item--cta {
		flex-basis: 100%;
		padding-left: 0;
		border-left: 0;
	}
}


@media only screen and (max-width: 767px) {
	.fcc-provider-quick-facts {
		gap: 0.5rem;
		justify-content: center;
	}
	.fcc-provider-quick-facts__item + .fcc-provider-quick-facts__item {
    	padding-left: .25rem;
	}
}

/* Phone (≤439px): one item per line — swap the vertical dividers for
   horizontal ones so the stack still reads as separated rows. */
@media only screen and (max-width: 600px) {
	.fcc-provider-quick-facts {
        gap: 10px 6px;
	}
	.fcc-provider-quick-facts__item {
		gap: 0.25rem;
	}
	/*
	.fcc-provider-quick-facts__item + .fcc-provider-quick-facts__item {
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid var( --e-global-color-f42da9f, #E1ECE9 );
	}
	*/
	.fcc-provider-quick-facts .fcc-provider-quick-facts__item--cta {
		flex-basis: 100%;
		padding-left: 0;
		border-left: 0;
		justify-content: center;
	}
}
@media only screen and (max-width: 400px) {
	.fcc-provider-quick-facts {
		align-items: start;
		gap: 10px 0;
        justify-content: space-between;
    }
	.fcc-provider-quick-facts__item {
		align-items: start;
	}
	.fcc-provider-quick-facts__item + .fcc-provider-quick-facts__item {
		border-left: 0;
		padding-left: 0;
	}
	.fcc-provider-quick-facts__label, .fcc-provider-quick-facts__value {
        font-size: 3.5vw;
		letter-spacing: -0.02em;
	}
	.fcc-provider-quick-facts__icon svg {
		width: 6vw;
		height: 6vw;
	}
	.fcc-provider-quick-facts__item.fcc-provider-quick-facts__item--ages {
		flex-basis: 37%;
	}
	.fcc-provider-quick-facts__item.fcc-provider-quick-facts__item--insurance {
		flex-basis: 60%;
	}
}


/* ----------------------------------------------------------------------------
   "Located at [city]" city link — jump link on MOBILE ONLY (HS #81256, Aug 2026).
   On desktop the city jump link was shifting the bio layout, so render it as
   plain, non-interactive text there; keep it an active jump link on mobile
   (<= 767px). Targets the Elementor heading widget .fcc-bio-location-link.
   ------------------------------------------------------------------------- */
@media only screen and ( min-width: 768px ) {
	.fcc-bio-location-link a,
	.fcc-bio-location-link .elementor-heading-title a {
		color: inherit;
		text-decoration: none !important;
		pointer-events: none;
		cursor: text;
	}
}