/* =====================================================================
   ATLANTA CANCER CARE — PAGE EXTRAS
   File:   salient-child/css/acc/acc-page-extras.css
   Loads:  every page, after acc-components.css (inc/acc/acc-page-extras.php)
   Needs:  acc-tokens.css, acc-base.css, acc-components.css

   1  Leaf headers (sizes: large / medium / slim; colors by section)
   2  Large: the dark green band
   3  Small leaf before every small label (kicker)
   4  End-of-page band (template-parts/acc/prefooter.php)
   5  Stat strip (template-parts/acc/stat-strip.php)
   6  Icon cards (template-parts/acc/icon-cards.php)
   7  Landing pages (acc-templates/template-acc-landing.php)
   8  Phones

   The leaf images are set per page by acc-page-extras.php as
   --acc-leaves-light (cream headers) and --acc-leaves-dark (dark band).
   Colors on dark green are hex with !important and -webkit-text-fill-color,
   because the Salient Custom CSS forces heading and paragraph colors (same
   approach as acc-home.css).
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Leaf headers
   Every page's header, whichever template built it, gets the leaf cluster
   in its top right corner, behind its own content (a photo or card in the
   header covers the leaves, so they peek out around it). The header list
   is wrapped in :where() so the size rules below always win over it.
   --------------------------------------------------------------------- */
body.acc-x :where(
	.acc-page-header,
	.acc-intro,
	.accq__hero,
	.accc__hero,
	.accn__hero,
	.accfd__hero,
	.acc-ct__hero,
	.acc-bp__hero,
	.acc-rl__hero,
	.acc-cg__hero,
	.acc-rx__hero,
	.acc-osw__hero,
	.accs__hero,
	.acc-loc__hero,
	.acc-hero,
	.wpb_row.template-top
) {
	--acc-x-leaf-size: 190px;
	position: relative;
	isolation: isolate;
}
body.acc-x :where(
	.acc-page-header,
	.acc-intro,
	.accq__hero,
	.accc__hero,
	.accn__hero,
	.accfd__hero,
	.acc-ct__hero,
	.acc-bp__hero,
	.acc-rl__hero,
	.acc-cg__hero,
	.acc-rx__hero,
	.acc-osw__hero,
	.accs__hero,
	.acc-loc__hero,
	.acc-hero,
	.wpb_row.template-top
)::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: clamp(0.5rem, 2vw, 1.5rem);
	right: 0;
	width: var(--acc-x-leaf-size);
	aspect-ratio: 1 / 1;
	background: var(--acc-leaves-light) no-repeat center / contain;
	pointer-events: none;
}
/* The shared header spans the page: keep its leaves inside the content width */
body.acc-x .acc-page-header::after { right: max(1.5rem, calc((100% - var(--acc-container, 1200px)) / 2)); }
/* Leave room so a header's words never run under the leaves */
body.acc-x .accn__hero { padding-right: calc(var(--acc-x-leaf-size) + 1rem); max-width: none; }

body.acc-x--slim :is(.acc-page-header, .acc-intro, .accs__hero, .acc-loc__hero, .wpb_row.template-top) { --acc-x-leaf-size: 130px; }
body.acc-x--large :is(.acc-page-header, .acc-intro, .accc__hero, .accn__hero, .accfd__hero) { --acc-x-leaf-size: clamp(200px, 22vw, 290px); }


/* ---------------------------------------------------------------------
   2. Large: the dark green band (main landing pages)
   The band runs edge to edge even when the header sits inside a narrower
   wrapper (box-shadow + clip-path), and only the header's own words turn
   light: cards and photos inside it keep their colors.
   --------------------------------------------------------------------- */
body.acc-x--large :is(.acc-page-header, .acc-intro, .accc__hero, .accn__hero, .accfd__hero) {
	background: #16291F;
	box-shadow: 0 0 0 100vmax #16291F;
	clip-path: inset(0 -100vmax);
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) !important;
	margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem) !important;
	border-bottom: 0;
}
body.acc-x--large :is(.acc-page-header, .acc-intro, .accc__hero, .accn__hero, .accfd__hero)::after {
	top: 50%;
	width: auto;
	height: min(80%, var(--acc-x-leaf-size));
	transform: translateY(-50%);
	background-image: var(--acc-leaves-dark);
}
body.acc-x--large .acc-page-header::after { right: max(2rem, calc((100% - var(--acc-container, 1200px)) / 2 + 1rem)); }
/* Words: the header's own column only */
html body.acc-x--large :is(.acc-page-header__main, .acc-intro > div:first-child, .accc__hero > div:first-child, .accn__hero, .accfd__hero > div:first-child) :is(h1, h1 *) {
	color: #FAF6EE !important;
	-webkit-text-fill-color: #FAF6EE !important;
}
html body.acc-x--large :is(.acc-page-header__main, .acc-intro > div:first-child, .accc__hero > div:first-child, .accn__hero, .accfd__hero > div:first-child) > p:not([class*="kicker"]):not([class*="eyebrow"]) {
	color: #E7EEE5 !important;
	-webkit-text-fill-color: #E7EEE5 !important;
}
html body.acc-x--large :is(.acc-page-header__main, .acc-intro > div:first-child, .accc__hero > div:first-child, .accn__hero, .accfd__hero > div:first-child) > :is(.acc-kicker, [class*="__kicker"], .acc-eyebrow) {
	color: #C7A96B !important;
	-webkit-text-fill-color: #C7A96B !important;
}
/* Breadcrumbs on the band */
html body.acc-x--large :is(.acc-page-header, .acc-intro) :is(.acc-crumbs, .acc-breadcrumbs, nav[aria-label="Breadcrumb"]) :is(a, span, li) {
	color: #C9D3C7 !important;
	-webkit-text-fill-color: #C9D3C7 !important;
}
html body.acc-x--large :is(.acc-page-header, .acc-intro) :is(.acc-crumbs, .acc-breadcrumbs, nav[aria-label="Breadcrumb"]) [aria-current] {
	color: #FAF6EE !important;
	-webkit-text-fill-color: #FAF6EE !important;
}
body.acc-x--large :is(.acc-page-header, .acc-intro) :is(.acc-crumbs, .acc-breadcrumbs) li { list-style: none !important; }
body.acc-x--large :is(.acc-page-header, .acc-intro) :is(.acc-crumbs, .acc-breadcrumbs) li::marker { content: none; }
/* Solid buttons in the shared header (Learn search) turn gold on the band */
html body.acc-x--large .acc-page-header :is(a, button).acc-btn:not(.acc-btn--outline):not(.acc-btn--ghost-light),
html body.acc-x--large #ajax-content-wrap .acc-page-header :is(a, button).acc-btn:not(.acc-btn--outline):not(.acc-btn--ghost-light) { background: #C7A96B !important; border-color: #C7A96B !important; color: #16291F !important; -webkit-text-fill-color: #16291F !important; }
/* Announcements: the selected filter would vanish into the band */
html body.acc-x--large .acc-intro .acc-filters button[aria-pressed="true"] { background: #C7A96B !important; border-color: #C7A96B !important; color: #16291F !important; -webkit-text-fill-color: #16291F !important; }
/* The band starts right under the site header: drop the wrapper's top gap */
body.acc-x--large :is(.accfd__wrap, .accn__wrap, .accc__wrap) { padding-top: 0 !important; }
/* Careers: the outline button turns light on the band */
html body.acc-x--large .accc__hero .accc__btn.outline { color: #FAF6EE !important; -webkit-text-fill-color: #FAF6EE !important; border-color: rgba(250, 246, 238, 0.6) !important; background: transparent !important; }
html body.acc-x--large .accc__hero .accc__btn.solid { background: #C7A96B !important; border-color: #C7A96B !important; color: #16291F !important; -webkit-text-fill-color: #16291F !important; }


/* ---------------------------------------------------------------------
   3. Small leaf before every small label
   Replaces the short gold line in front of kickers ("PATIENT RESOURCES")
   with one small gold leaf, on every page including the homepage.
   --------------------------------------------------------------------- */
:is(.acc-kicker, .acc-nhci-hero__kicker, .acc-hero__kicker)::before,
:is(.accq__kicker, .accc__kicker, .accn__kicker, .accfd__kicker, .acc-eyebrow)::before {
	content: "";
	flex: none;
	width: 0.95em;
	height: 0.95em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 100 C0 40 40 0 100 0 C100 60 60 100 0 100 Z' fill='%23C7A96B'/%3E%3C/svg%3E") no-repeat center / contain;
	border: 0;
}
:is(.accq__kicker, .accc__kicker, .accn__kicker, .accfd__kicker) { display: inline-flex !important; align-items: center; gap: 0.55em; }
.acc-eyebrow:not(.acc-feature__eyebrow):not(.acc-event__eyebrow) { display: inline-flex; align-items: center; gap: 0.55em; }
.acc-feature__eyebrow::before,
.acc-event__eyebrow::before { content: none; }


/* ---------------------------------------------------------------------
   4. End-of-page band ("Ready to talk with our team?")
   --------------------------------------------------------------------- */
.acc.acc-x-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
	background: #24402F;     /* a step lighter than the footer, so the two read apart */
	border: 0;
}
.acc-x-band::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: -80px;
	right: -60px;
	width: 180px;
	aspect-ratio: 1 / 1;
	background: var(--acc-leaves-dark, none) no-repeat center / contain;
	opacity: 0.9;
	pointer-events: none;
}
.acc .acc-x-band__head {
	display: grid;
	gap: var(--acc-space-5);
	align-items: end;
	margin-bottom: var(--acc-space-7);
}
@media (min-width: 900px) {
	.acc .acc-x-band__head { grid-template-columns: minmax(0, 1.4fr) auto; gap: var(--acc-space-8); }
}
.acc-x-band__words { max-width: 44rem; }
.acc.acc-x-band .acc-kicker { color: #C7A96B !important; -webkit-text-fill-color: #C7A96B !important; }
.acc.acc-x-band .acc-prefooter__title {
	margin: 0 0 var(--acc-space-3) !important;
	font-size: var(--acc-fs-h2) !important;
	color: #FAF6EE !important;
	-webkit-text-fill-color: #FAF6EE !important;
}
.acc.acc-x-band :is(.acc-x-band__text, .acc-x-band__note) {
	margin: 0 0 var(--acc-space-2) !important;
	color: #E7EEE5 !important;
	-webkit-text-fill-color: #E7EEE5 !important;
}
.acc.acc-x-band .acc-x-band__note { font-size: var(--acc-fs-sm); color: #C9D3C7 !important; -webkit-text-fill-color: #C9D3C7 !important; }
/* The ID matches acc-base.css (#ajax-content-wrap .acc .acc-btn), which would win otherwise */
html body .acc-x-band a.acc-btn:not(.acc-btn--outline),
html body #ajax-content-wrap .acc-x-band a.acc-btn:not(.acc-btn--outline) {
	background: #C7A96B !important;
	border-color: #C7A96B !important;
	color: #16291F !important;
	-webkit-text-fill-color: #16291F !important;
}
html body .acc-x-band a.acc-btn.acc-btn--outline,
html body #ajax-content-wrap .acc-x-band a.acc-btn.acc-btn--outline {
	background: transparent !important;
	border-color: rgba(250, 246, 238, 0.6) !important;
	color: #FAF6EE !important;
	-webkit-text-fill-color: #FAF6EE !important;
}
html body .acc-x-band a.acc-btn:hover,
html body #ajax-content-wrap .acc-x-band a.acc-btn:hover { background: #FAF6EE !important; border-color: #FAF6EE !important; color: #16291F !important; -webkit-text-fill-color: #16291F !important; }
.acc .acc-x-band__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: var(--acc-space-3);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.acc .acc-x-band__list li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 !important;
	padding: var(--acc-space-4) !important;
	list-style: none !important;
	background: rgba(250, 246, 238, 0.06);
	border: 1px solid rgba(250, 246, 238, 0.14);
	border-radius: 14px;
}
html body .acc-x-band .acc-prefooter__name { font-family: var(--acc-font-head) !important; font-size: var(--acc-fs-h5); color: #FAF6EE !important; -webkit-text-fill-color: #FAF6EE !important; text-decoration: none !important; }
html body .acc-x-band .acc-prefooter__tel { font-weight: var(--acc-fw-bold); color: #C7A96B !important; -webkit-text-fill-color: #C7A96B !important; text-decoration: none !important; }
html body .acc-x-band :is(.acc-prefooter__name, .acc-prefooter__tel):hover { text-decoration: underline !important; text-underline-offset: 0.18em; }
.acc-x-band a:focus-visible { outline-color: #FFFFFF; }


/* ---------------------------------------------------------------------
   5. Stat strip (landing pages): the homepage tiles + the QOPI seal
   --------------------------------------------------------------------- */
.acc-x-stats { position: relative; z-index: 1; margin-bottom: clamp(1rem, 0.5rem + 2vw, 2rem); }
/* The cards sit just below the green header, with clear space between. */
body.acc-x--large .acc-page-header + .acc-x-stats { margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); }
.acc .acc-x-stats__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--acc-space-3);
	margin: 0 !important;
}
/* Four stats + the QOPI seal: the seal gets its own full-width row until there is room for all five */
.acc-x-stat--seal { grid-column: 1 / -1; }
@media (min-width: 900px) {
	.acc .acc-x-stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--acc-space-4); }
}
@media (min-width: 1200px) {
	.acc .acc-x-stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.15fr); }
	.acc-x-stat--seal { grid-column: auto; }
}
.acc-x-stat {
	display: flex;
	flex-direction: column-reverse;
	justify-content: center;
	gap: var(--acc-space-2);
	min-width: 0;
	padding: clamp(1rem, 0.75rem + 1vw, 1.75rem);
	border-radius: 18px;
	background: #C7A96B;
}
.acc-x-stat:nth-child(2) { background: #16291F; }
.acc-x-stat:nth-child(3) { background: #E8A87C; }
.acc-x-stat--seal { background: #FAF6EE; border: 1px solid var(--acc-line); flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap: var(--acc-space-4); }
.acc .acc-x-stat__value {
	margin: 0 !important;
	font-family: var(--acc-font-head) !important;
	font-size: clamp(2.5rem, 2rem + 2vw, 4rem) !important;
	line-height: 0.95 !important;
	font-weight: var(--acc-fw-medium) !important;
	color: #16291F !important;
	-webkit-text-fill-color: #16291F !important;
}
.acc .acc-x-stat__label {
	margin: 0 !important;
	font-size: var(--acc-fs-sm) !important;
	font-weight: var(--acc-fw-bold) !important;
	line-height: 1.35 !important;
	color: #16291F !important;
	-webkit-text-fill-color: #16291F !important;
}
.acc .acc-x-stat:nth-child(2) .acc-x-stat__value { color: #C7A96B !important; -webkit-text-fill-color: #C7A96B !important; }
.acc .acc-x-stat:nth-child(2) .acc-x-stat__label { color: #FAF6EE !important; -webkit-text-fill-color: #FAF6EE !important; }
.acc .acc-x-stat--seal .acc-x-stat__value img { display: block; width: 64px !important; height: auto !important; margin: 0 !important; }
.acc .acc-x-stat--seal .acc-x-stat__label { font-family: var(--acc-font-head) !important; font-size: var(--acc-fs-h5) !important; font-weight: var(--acc-fw-medium) !important; }


/* ---------------------------------------------------------------------
   6. Icon cards
   --------------------------------------------------------------------- */
.acc .acc-x-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: var(--acc-space-4);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.acc .acc-x-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--acc-space-3);
	height: 100%;
	margin: 0 !important;
	padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) !important;
	list-style: none !important;
	background: var(--acc-white);
	border: 1px solid var(--acc-line);
	border-radius: 18px;
}
.acc .acc-x-card--plain { background: var(--acc-cream); }
.acc-x-card__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #E7EEE5;
	color: #16291F;
}
.acc-x-card__icon--1 { background: #F3E6CC; color: #16291F; }
.acc-x-card__icon--2 { background: #F7DCC8; color: #16291F; }
.acc-x-card__icon--3 { background: #16291F; color: #C7A96B; }
.acc-x-card__icon .acc-x-icon { width: 26px; height: 26px; }
.acc .acc-x-card__title {
	margin: 0 !important;
	font-family: var(--acc-font-head) !important;
	font-size: var(--acc-fs-h5) !important;
	line-height: 1.25 !important;
}
.acc .acc-x-card__text {
	margin: 0 !important;
	font-size: var(--acc-fs-sm);
	line-height: 1.55;
	color: var(--acc-muted) !important;
	-webkit-text-fill-color: var(--acc-muted) !important;
}
.acc .acc-x-card .acc-resource-card__label { margin-top: auto; }


/* ---------------------------------------------------------------------
   7. Landing pages
   --------------------------------------------------------------------- */
.acc-x-landing { background: var(--acc-cream); }
.acc-x-section--alt { background: var(--acc-sage-light); }
.acc-x-section__head { margin-bottom: var(--acc-space-6); }
.acc .acc-x-section__head p { max-width: 44rem; }
.acc-x-prose { max-width: 46rem; }
.acc .acc-x-prose p { margin-bottom: var(--acc-space-4) !important; }
.acc-x-split { display: grid; gap: var(--acc-space-6); align-items: start; }
@media (min-width: 900px) {
	.acc-x-split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--acc-space-8); }
}
.acc .acc-x-aside {
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	background: var(--acc-white);
	border-radius: 18px;
	border-top: 4px solid #C7A96B;
}
.acc .acc-x-aside p:not(.acc-kicker) { margin: 0 !important; color: var(--acc-ink); }

/* Quote band: mission statement, our promise */
.acc .acc-x-quote {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #16291F;
}
.acc-x-quote::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: -30px;
	top: 50%;
	transform: translateY(-50%) scaleX(-1);
	width: clamp(160px, 18vw, 260px);
	aspect-ratio: 1 / 1;
	background: var(--acc-leaves-dark, none) no-repeat center / contain;
	opacity: 0.55;
}
.acc-x-quote__inner { max-width: 48rem; margin-inline: auto; text-align: center; }
.acc .acc-x-quote .acc-kicker { color: #C7A96B !important; -webkit-text-fill-color: #C7A96B !important; }
.acc .acc-x-quote h2 { margin-bottom: var(--acc-space-4) !important; color: #FAF6EE !important; -webkit-text-fill-color: #FAF6EE !important; }
.acc .acc-x-quote p:not(.acc-kicker) { margin: 0 !important; font-size: var(--acc-fs-lg); color: #E7EEE5 !important; -webkit-text-fill-color: #E7EEE5 !important; }

/* Big quick-action buttons (Patient Resources) */
.acc-x-actions { padding-block: var(--acc-space-5) 0; }
.acc .acc-x-actions__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--acc-space-3);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.acc .acc-x-actions__list li { margin: 0 !important; list-style: none !important; }
html body .acc a.acc-x-action {
	display: flex;
	align-items: center;
	gap: var(--acc-space-3);
	padding: var(--acc-space-4) var(--acc-space-5);
	background: var(--acc-white);
	border: 1px solid var(--acc-line);
	border-radius: 14px;
	font-weight: var(--acc-fw-bold);
	text-decoration: none !important;
	color: #16291F !important;
	-webkit-text-fill-color: #16291F !important;
	transition: border-color var(--acc-dur) var(--acc-ease), box-shadow var(--acc-dur) var(--acc-ease);
}
html body .acc a.acc-x-action:hover { border-color: #4B7A5E; box-shadow: var(--acc-shadow); }
.acc-x-action__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #16291F; color: #C7A96B; flex: none; }
.acc-x-action__icon .acc-x-icon { width: 20px; height: 20px; }
.acc-x-page { padding-bottom: var(--acc-section-y, 4rem); }


/* ---------------------------------------------------------------------
   8. Phones: smaller leaves, tucked into the corner
   --------------------------------------------------------------------- */
@media (max-width: 699px) {
	body.acc-x :where(.acc-page-header, .acc-intro, .accq__hero, .accc__hero, .accn__hero, .accfd__hero, .acc-ct__hero, .acc-bp__hero, .acc-rl__hero, .acc-cg__hero, .acc-rx__hero, .acc-osw__hero, .accs__hero, .acc-loc__hero, .acc-hero, .wpb_row.template-top) { --acc-x-leaf-size: 96px !important; }
	body.acc-x :where(.acc-page-header, .acc-intro, .accq__hero, .accc__hero, .accn__hero, .accfd__hero, .acc-ct__hero, .acc-bp__hero, .acc-rl__hero, .acc-cg__hero, .acc-rx__hero, .acc-osw__hero, .accs__hero, .acc-loc__hero, .acc-hero, .wpb_row.template-top)::after {
		top: 0.5rem !important;
		transform: none !important;
		opacity: 0.85;
	}
	body.acc-x .accn__hero { padding-right: 0; }
	.acc-x-band::after { width: 130px; top: -50px; right: -50px; opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
	html body .acc a.acc-x-action { transition: none; }
}


/* ---------------------------------------------------------------------
   9. Homepage "What's new": the Featured card's photo
   The photo chosen in the Announcements page's "Featured card" box runs
   edge to edge across the top of the green card (focal point respected).
   --------------------------------------------------------------------- */
.acc .acc-news-feature--photo { --acc-x-pad: clamp(1.75rem, 1rem + 3vw, 3.5rem); }
.acc .acc-news-feature--photo .acc-news-feature__photo {
	display: block;
	width: calc(100% + 2 * var(--acc-x-pad)) !important;
	max-width: none !important;
	height: auto !important;
	aspect-ratio: 16 / 8;
	margin: calc(-1 * var(--acc-x-pad)) calc(-1 * var(--acc-x-pad)) var(--acc-space-2) !important;
	object-fit: cover;
}
.acc .acc-news-feature--photo .acc-news-feature__date { margin-top: var(--acc-space-2) !important; }