@charset "UTF-8";

/* =========================================================================
   ADVOCACY (607) — per-page styles (D34: this file only).
   Bands: title-bar → image hero (.page-hero) → sticky anchor nav →
   intro + anchor buttons → #local (teal, clipped) → #state (white) →
   #federal (dark-teal, clipped) → Commitment / Get Involved.
   Repeatable component: .advocacy-pdf-card (icon-left blurb linking a PDF).
   Shared tokens/classes owned by Mason (creda.css); referenced here.
   Layout units: vw + %. Type: clamp() with vw midpoints.
   ========================================================================= */

/* ----- S2  Anchor nav (page-local; NOT the shared sponsor nav) ---------
   Divi behaviour = appears ON SCROLL, not an in-flow band at rest. So it's
   fixed + hidden (translated off-screen) at page top, revealed once scrolled
   past the hero via .is-visible (toggled by the small inline script in the
   post). Fixed = removed from flow, so no extra band under the hero at rest.
   Capture-safe: at scrollY 0 it stays hidden (matches baseline). */
.advocacy-anchor-nav {
	position: fixed;
	top: 0;              /* JS sets this to the sticky header's height */
	left: 0;
	right: 0;
	z-index: 8000;       /* below .site-header (9000) so it tucks under it */
	background: var(--creda-secondary);
	padding: 5px 3vw;
	transform: translateY(-140%);   /* hidden above, tucked behind the header */
	transition: transform .3s ease;
	will-change: transform;
}
.advocacy-anchor-nav.is-visible { transform: translateY(0); }
.advocacy-anchor-nav .wp-block-columns { gap: 1.4vw; margin: 0; }
.advocacy-anchor-nav .wp-block-column { margin: 0; }
.advocacy-anchor-nav .wp-block-button { width: 100%; }
.advocacy-anchor-nav .wp-block-button__link {
	display: block; width: 100%; text-align: center;
	background: var(--creda-secondary); color: #fff; border-radius: 3px;
	font-family: 'Inter', Helvetica, Arial, sans-serif; font-weight: 500;
	font-size: clamp(1rem, 0.75rem + 0.7vw, 1.5rem);
	padding: 0.5em 1em;
	border: 2px solid #fff;   /* live: white outline around each jump button */
}
/* Trailing down-caret after each anchor-nav label (live Divi jump buttons). */
.advocacy-anchor-nav .wp-block-button__link::after { content: " \25BE"; font-size: 0.8em; }
.advocacy-anchor-nav .wp-block-button__link:hover {
	border-color: #fff; color: var(--creda-pale-teal); transform: scale(1.02);
}

/* ----- S3  Intro + repeated anchor buttons ---------------------------- */
.advocacy-intro { padding: clamp(48px, 4.5vw, 72px) 3vw; }
.advocacy-intro .wp-block-columns { gap: 4vw; align-items: center; }
.advocacy-intro p {
	color: var(--creda-body);
	font-size: clamp(0.95rem, 0.88rem + 0.25vw, 1rem);
	margin-bottom: 1em;
}
.advocacy-intro__nav .wp-block-buttons { gap: 1vw; }
.advocacy-intro__nav .wp-block-button { width: 100%; }
.advocacy-intro__nav .wp-block-button__link {
	display: block; width: 100%; text-align: center;
	background: var(--creda-secondary); color: #fff; border-radius: 3px;
	font-family: 'Inter', Helvetica, Arial, sans-serif; font-weight: 500;
	font-size: clamp(1.2rem, 0.9rem + 0.9vw, 1.875rem);
	padding: 0.7em 1em;
	border: 2px solid #fff;   /* live: white outline around each jump button */
}
/* Trailing down-caret (live has it on both the intro jump buttons and the sticky nav). */
.advocacy-intro__nav .wp-block-button__link::after { content: " \25BE"; font-size: 0.8em; }
.advocacy-intro__nav .wp-block-button__link:hover {
	border-color: #fff; color: var(--creda-pale-teal); transform: scale(1.02);
}

/* ----- S4–S6  Level sections (shared skeleton) ------------------------ */
.advocacy-level {
	padding: clamp(56px, 5.5vw, 90px) 3vw clamp(80px, 8vw, 130px);
	position: relative;
}
.advocacy-level > .wp-block-heading {
	font-family: 'Inter', Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(2rem, 1.1rem + 2.8vw, 2.8125rem);
	line-height: 1.05;
	margin-bottom: 0.8vw;
}
.advocacy-level__intro {
	font-size: clamp(0.95rem, 0.88rem + 0.25vw, 1rem);
	max-width: 62%;
	margin-bottom: 2.4vw;
}
.advocacy-level .wp-block-columns { gap: 3vw; align-items: flex-start; }
.advocacy-level h5 {
	font-family: 'Inter', Helvetica, Arial, sans-serif;
	font-weight: 600;
	font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.125rem);
	line-height: 1.3;
	margin: 0 0 0.6em;
}
.advocacy-level p { font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1rem); margin-bottom: 1em; }
.advocacy-level ul.wp-block-list { list-style: disc; padding-left: 1.2em; margin: 0 0 1.2em; }
.advocacy-level ul.wp-block-list li { font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1rem); line-height: 1.55; margin-bottom: 0.7em; display: list-item; }

/* Local — teal gradient over city silhouette, navy headings */
.advocacy-local {
	background-color: var(--creda-secondary);
	background-image:
		linear-gradient(90deg, #039ca2 57%, rgba(3,156,162,0) 74%),
		url('/wp-content/uploads/2026/06/pittsburgh-bg2.png');
	background-repeat: no-repeat, no-repeat;
	background-position: center, right bottom;
	background-size: auto, 38vw auto;
	color: #fff;
	/* Reserve just enough bottom space for the skyline graphic so content clears it,
	   without a big empty band. */
	padding-bottom: clamp(120px, 15vw, 290px);
}
.advocacy-local > .wp-block-heading,
.advocacy-local h5 { color: var(--creda-primary); }
.advocacy-local p, .advocacy-local li { color: #fff; }
.advocacy-local .advocacy-level__intro { color: #fff; }

/* State — white over faint Keystone, teal headings */
.advocacy-state {
	background-color: #fff;
	background-image: url('/wp-content/uploads/2026/06/Keystone-State-2.png');
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: 30vw auto;
	/* Reserve just enough bottom space for the (slightly smaller) Keystone graphic so
	   the right-column "Tracking…" content clears it, without a big empty band. */
	padding-bottom: clamp(120px, 15vw, 290px);
}
.advocacy-state > .wp-block-heading,
.advocacy-state h5 { color: var(--creda-secondary); }
.advocacy-state p, .advocacy-state li { color: var(--creda-body); }

/* Federal — dark teal over capitol line-art, pale-teal headings */
.advocacy-federal {
	background-color: var(--creda-primary);
	background-image: url('/wp-content/uploads/2026/06/us-capitol-bg.png');
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: 30vw auto;
	color: #fff;
}
.advocacy-federal > .wp-block-heading,
.advocacy-federal h5 { color: var(--creda-pale-teal); }
.advocacy-federal p, .advocacy-federal li { color: #fff; }
.advocacy-federal .advocacy-level__intro { color: #fff; }

/* ----- Repeatable PDF-blurb card -------------------------------------- */
.advocacy-pdf-card {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 1.4vw;
	margin-bottom: 2.4vw;
}
.advocacy-pdf-card__icon { flex: 0 0 auto; margin: 0; }
.advocacy-pdf-card__icon img { display: block; }
.advocacy-pdf-card__text { flex: 1 1 auto; margin: 0; }
.advocacy-pdf-card__title { margin: 0 0 0.6em; }
.advocacy-pdf-card__title a { color: inherit; }
.advocacy-state .advocacy-pdf-card__title a { color: var(--creda-secondary); }
.advocacy-federal .advocacy-pdf-card__title a { color: var(--creda-pale-teal); }
.advocacy-pdf-card__title a:hover { text-decoration: underline; }

/* Highlighted variant — the Local "Mayor's plan" card (pale-teal panel) */
.advocacy-pdf-card.is-highlight {
	align-items: center;
	background: var(--creda-pale-teal);
	padding: 1.6vw 2vw;
	margin-top: 2vw;
}
.advocacy-pdf-card.is-highlight .advocacy-pdf-card__title {
	margin: 0;
	font-weight: 700;
	font-size: clamp(1.4rem, 1rem + 1.4vw, 2.1875rem);
}
.advocacy-pdf-card.is-highlight .advocacy-pdf-card__title a { color: var(--creda-primary); }

/* ----- S7  Commitment / Get Involved ---------------------------------- */
.advocacy-cta { padding: clamp(48px, 4.5vw, 65px) 3vw clamp(90px, 9vw, 135px); }
.advocacy-cta .wp-block-columns { gap: 4vw; align-items: flex-start; }
.advocacy-cta h4 {
	font-family: 'Inter', Helvetica, Arial, sans-serif;
	font-weight: 700;
	color: var(--creda-secondary);
	font-size: clamp(2rem, 1.1rem + 2.8vw, 2.8125rem);
	line-height: 1.05;
	margin-bottom: 1vw;
}
.advocacy-cta p { color: var(--creda-body); font-size: clamp(0.95rem, 0.88rem + 0.25vw, 1rem); margin-bottom: 1em; }

/* ----- Responsive ----------------------------------------------------- */
@media screen and (max-width: 980px) {
	.advocacy-level__intro { max-width: 100%; }
	.advocacy-local { background-size: auto, 70vw auto; }
	.advocacy-state { background-size: 60vw auto; }
	.advocacy-federal { background-size: 55vw auto; }
	.advocacy-intro .wp-block-columns,
	.advocacy-level .wp-block-columns,
	.advocacy-cta .wp-block-columns { flex-wrap: wrap; }
	.advocacy-intro .wp-block-column,
	.advocacy-level .wp-block-column,
	.advocacy-cta .wp-block-column {
		flex-basis: 100% !important; max-width: 100% !important;
	}
	.advocacy-intro .wp-block-column:first-child,
	.advocacy-cta .wp-block-column:first-child { margin-bottom: 5vw; }
	.advocacy-federal .wp-block-column:last-child:empty { display: none; }
}
@media screen and (max-width: 767px) {
	/* Live shows NO sticky jump nav on mobile; our fixed 3-across bar wrapped to a
	   ~140px slab covering the top of the viewport. Hide it — the in-flow
	   .advocacy-intro__nav (stacked buttons) already gives mobile the jump links.
	   !important guards against the .is-visible reveal state. */
	.advocacy-anchor-nav { display: none !important; }
}
@media screen and (max-width: 479px) {
	.advocacy-pdf-card { gap: 3vw; }
}

/* =========================================================================
   INTERACTIONS (page-specific) — President polish. Global button/link
   hover defaults + on-scroll reveal handled in creda.css (don't duplicate).
   Anchor-nav/intro buttons already carry border+scale hover (above); these
   add card + link + button-darken accents. ~.2–.25s ease (D32: tasteful).
   ========================================================================= */
/* PDF-blurb cards — icon nudge + clickable-title fade (whole card links a PDF) */
.advocacy-pdf-card__icon img { transition: transform .25s ease; }
.advocacy-pdf-card:hover .advocacy-pdf-card__icon img { transform: translateY(-2px) scale(1.05); }
.advocacy-pdf-card__title a { transition: color .2s ease, opacity .2s ease; }
.advocacy-pdf-card__title a:hover { opacity: .82; }
/* Highlighted "Mayor's plan" panel (has bg) — lift + shadow like home cards */
.advocacy-pdf-card.is-highlight { transition: transform .25s ease, box-shadow .25s ease; }
.advocacy-pdf-card.is-highlight:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(1,58,73,.22); }
/* Anchor-nav + intro anchor buttons — darken on hover (composes w/ border+scale) */
.advocacy-anchor-nav .wp-block-button__link,
.advocacy-intro__nav .wp-block-button__link { transition: transform .2s ease, border-color .2s ease, color .2s ease, background-color .25s ease; }
.advocacy-anchor-nav .wp-block-button__link:hover,
.advocacy-intro__nav .wp-block-button__link:hover { background-color: var(--creda-tertiary); }

@media (prefers-reduced-motion: reduce) {
	.advocacy-pdf-card:hover .advocacy-pdf-card__icon img,
	.advocacy-pdf-card.is-highlight:hover { transform: none; }
}