/*
Theme Name: Kadence ASL (Anna Sobol Levy Foundation)
Theme URI: https://annasobollevyfoundation.org
Description: Child theme of Kadence for the Anna Sobol Levy Foundation redesign. Defines the sky-blue brand palette (matching the logo), serif-heading / sans-body typography, editorial header/hero styling, and components. Built by Grimbilas (Kymatos LLC).
Author: Grimbilas / George Grimbilas
Template: kadence
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: kadence-asl
*/

/* ------------------------------------------------------------------ *
 * Brand typography
 * Kadence emits its own body/heading font-family via CSS custom
 * properties. We override those variables here (child stylesheet loads
 * after Kadence's inline CSS) so the whole theme — header, footer,
 * content, headings — uses the brand pairing regardless of Kadence's
 * customizer state. Fonts are enqueued in functions.php.
 *   Headings: Source Serif 4 (institutional serif)
 *   Body:     Source Sans 3 (readable sans)
 * ------------------------------------------------------------------ */
:root {
	--global-body-font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--global-heading-font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

body {
	font-family: var(--global-body-font-family);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
	font-family: var(--global-heading-font-family);
}

/* Keep primary headings in the brand's dark near-black for weight. */
h1, h2, h3 {
	color: var(--global-palette3);
}

/* ================================================================== *
 * Header — editorial sky-blue bar. The wordmark logo is white-on-blue,
 * so we paint the header the EXACT logo blue (#3CA9E1) for a seamless
 * join, then run the primary nav in white with a gold hover underline.
 * ================================================================== */
.site-main-header-wrap .site-header-row-container-inner,
#masthead .kadence-sticky-header.item-is-fixed > .site-header-row-container-inner {
	background: #3CA9E1;
}

.header-navigation .header-menu-container ul li.menu-item > a {
	color: #ffffff;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.header-navigation .header-menu-container ul li.menu-item > a:hover,
.header-navigation .header-menu-container ul li.current-menu-item > a {
	color: #ffffff;
	box-shadow: inset 0 -2px 0 0 #fccd5e;
}

.mobile-toggle-open-container .menu-toggle-open,
.mobile-toggle-open-container .menu-toggle-open:focus {
	color: #ffffff;
}

/* Persistent gold "Apply" CTA in the header nav. */
.header-navigation .menu-item.apply-cta > a {
	background: #fccd5e;
	color: var(--global-palette3) !important;
	border-radius: 3px;
	padding: 0.55em 1.15em !important;
	margin-left: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.header-navigation .menu-item.apply-cta > a:hover {
	background: #EAB949;
	color: var(--global-palette3) !important;
	box-shadow: none !important;
}

/* In the mobile drawer, show it as a full-width gold bar. */
.mobile-navigation .menu-item.apply-cta > a {
	background: #fccd5e;
	color: var(--global-palette3);
	font-weight: 700;
	border-radius: 3px;
	margin: 0.4rem 0;
}

/* Mobile slide-out menu panel: on-brand deep navy (matches the footer/CTA
   bands) instead of Kadence's default near-black. Links stay light for
   contrast; the active item stays sky-blue and clearly marked. */
.drawer-inner {
	background: #16324a !important;
}

.mobile-navigation ul li.menu-item > a {
	color: #ffffff;
}

.mobile-navigation ul li.menu-item > a:hover,
.mobile-navigation ul li.menu-item.current-menu-item > a {
	color: #3caae1;
	font-weight: 700;
	box-shadow: inset 3px 0 0 0 #fccd5e;
}

/* Keep the gold Apply bar unaffected by the active-link treatment above. */
.mobile-navigation .menu-item.apply-cta.current-menu-item > a {
	color: var(--global-palette3);
	box-shadow: none;
}

/* ================================================================== *
 * Hero mastheads — large fluid serif H1 with a gold uppercase eyebrow
 * (kicker) above it: the reference-site editorial device.
 * ================================================================== */
.wp-block-cover__inner-container h1.wp-block-heading {
	font-size: clamp(2.4rem, 5vw, 3.8rem);
	line-height: 1.08;
	color: #ffffff !important;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

/* Hero eyebrow: forced white + shadow so it never disappears on the image
   (beats the dark body-text rule). */
.wp-block-cover__inner-container .hero-kicker {
	color: #ffffff !important;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 700;
	font-size: 0.82rem;
	margin: 0 0 0.6rem;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

/* Small photo-attribution credit, pinned bottom-right of a hero cover. */
.wp-block-cover .hero-credit {
	position: absolute;
	right: 14px;
	bottom: 9px;
	margin: 0;
	z-index: 2;
	font-size: 0.66rem;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.7);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* Home hero "scroll down" chevron. Injected by JS (see functions.php →
   kadence_asl_scroll_cue_js), pinned bottom-centre of the hero cover.
   The hero is position:relative via .wp-block-cover, so this anchors to it.
   Bottom-centre keeps it clear of .hero-credit's bottom-right corner.
   Label + chevron are ONE button. Pure white with a drop-shadow rather than a
   box or pill, so it reads against bright sky without adding furniture. */
.asl-scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-width: 44px;
	min-height: 44px; /* tap target floor; label + chevron make it taller in practice */
	padding: 4px 8px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	box-shadow: none;
	color: #ffffff;
	/* drop-shadow (not box-shadow) so it hugs the glyph + text, not a rectangle */
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45));
	cursor: pointer;
	transition: opacity 0.25s ease;
}

/* Beat the theme's global button styling (bg/shadow/colour) in every state. */
.asl-scroll-cue:hover,
.asl-scroll-cue:focus,
.asl-scroll-cue:focus-visible,
.asl-scroll-cue:active {
	color: #ffffff;
	background: transparent;
	box-shadow: none;
}

.asl-scroll-cue:hover {
	opacity: 0.82;
}

.asl-scroll-cue:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

/* Matches the site's existing small-caps label treatment (cf. .hero-kicker).
   NB: uses the site's loaded sans (Source Sans 3), not Inter, which this site
   does not load; see brand notes before changing. */
.asl-scroll-label {
	font-family: var(--global-body-font-family);
	font-size: 0.7rem; /* ~11px */
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	/* nudge right to offset the trailing letter-space, so it optically centres */
	text-indent: 0.15em;
	color: #ffffff;
}

.asl-scroll-cue svg {
	display: block;
	width: 32px;
	height: 32px;
	animation: asl-scroll-bob 2s ease-in-out infinite;
}

/* Only the chevron bobs, so the keyframes carry no translateX correction. */
@keyframes asl-scroll-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(7px); }
}

/* Reduced motion: keep the cue (it's a real control), drop the bob. */
@media (prefers-reduced-motion: reduce) {
	.asl-scroll-cue svg {
		animation: none;
	}
}

/* Utility: keep a phrase from breaking across lines (e.g. the stats band's
   "Reichman University's RRIS", which otherwise widows "RRIS" onto its own line). */
.nowrap {
	white-space: nowrap;
}

/* The stats band's padding is already symmetric (36px top/bottom), but the core
   .wp-block-columns block ships a 32px bottom margin, which landed *inside* the
   band and made the space below the columns 68px against 36px above. Zero it so
   the band breathes evenly. */
.value-strip .wp-block-columns {
	margin-bottom: 0;
}

/* Footer agency credit — inherits .asl-footer-legal p colour/size, so it stays
   as quiet as the copyright beside it. On ≤781px the legal bar becomes a flex
   column and .asl-legal-sep is hidden, so this drops to its own line. */
.asl-legal-credit {
	white-space: nowrap;
}

/* ================================================================== *
 * Editorial polish — refined sticky sky-blue header with a gold
 * hairline; gold "tick" rules under section headings for rhythm.
 * ================================================================== */
#masthead {
	position: sticky;
	top: 0;
	z-index: 99;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.site-main-header-wrap .site-header-row-container-inner {
	border-bottom: 3px solid #fccd5e;
}

.site-main-header-inner-wrap {
	min-height: 88px;
}

.header-navigation .header-menu-container ul li.menu-item > a {
	letter-spacing: 0.015em;
}

.entry-content h2.wp-block-heading:not(.has-text-align-center)::after {
	content: "";
	display: block;
	width: 52px;
	height: 3px;
	margin-top: 0.6rem;
	background: #fccd5e;
}

.entry-content h2.wp-block-heading.has-text-align-center::after {
	content: "";
	display: block;
	width: 52px;
	height: 3px;
	margin: 0.7rem auto 0;
	background: #fccd5e;
}

/* ================================================================== *
 * Buttons — primary is sky-blue (see theme.json). "is-style-accent"
 * is the sparing gold CTA, reserved for the key conversion action.
 * ================================================================== */
.wp-block-button.is-style-accent > .wp-block-button__link {
	background-color: #fccd5e;
	color: var(--global-palette3);
}

.wp-block-button.is-style-accent > .wp-block-button__link:hover {
	background-color: #EAB949;
	color: var(--global-palette3);
}

/* ================================================================== *
 * Meet the Team — each director is a two-column row: a fixed-size
 * square portrait beside the bio, top-aligned, identical regardless
 * of bio length. Photos are normalized to uniform squares.
 * ================================================================== */
.team-member {
	margin-top: 2.75rem;
}

.team-member .team-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 6px;
}

.team-member h4.wp-block-heading {
	margin-top: 0;
	margin-bottom: 0.15rem;
}

.team-member .team-location {
	margin-top: 0;
	color: var(--global-palette5);
}

/* On mobile the columns stack; keep the portrait from ballooning. */
@media (max-width: 781px) {
	.team-member .team-photo {
		max-width: 190px;
	}
}

/* Team card grid with expandable (accordion) bios. */
.team-unit {
	/* Wrapper holding the card row PLUS the full-width bio panel below it. */
	max-width: 1080px;
	margin: 1.5rem auto 0;
}

.team-grid {
	/* Two headshot cards per row: the 2 Founders sit as a centered pair,
	   the 4 Directors form a balanced 2x2. The expanded bio does NOT open
	   inside the narrow card column — it opens full-width below (.bio-panel). */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
	margin: 0 auto;
	align-items: stretch;
	max-width: 720px;
}

.team-card {
	flex: 0 1 320px;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid #e6e6e6;
	border-radius: 6px;
	padding: 1.5rem;
}

.team-card figure.wp-block-image {
	margin: 0 0 1rem;
}

.team-card figure.wp-block-image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

.team-card h4 {
	margin: 0 0 0.15rem;
	font-size: 1.08rem;
	font-family: var(--global-heading-font-family), Georgia, serif;
	color: #16324a;
	text-wrap: balance;
}

.team-card .team-role {
	color: #18729f;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	margin: 0 0 0.1rem;
}

.team-card .team-loc {
	color: #8a929e;
	font-size: 0.9rem;
	font-style: italic;
	margin: 0 0 0.6rem;
}

.team-card .team-teaser {
	font-size: 0.98rem;
	margin: 0 0 1rem;
}

/* "Read full bio" toggle — text-style button pinned to the card bottom. */
.team-card .bio-toggle {
	margin-top: auto;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	border-top: 1px solid #ececec;
	padding: 0.8rem 0 0;
	color: #18729f;
	font-family: inherit;
	font-weight: 700;
	font-size: 0.9rem;
	cursor: pointer;
}

.team-card .bio-toggle::after { content: " \2193"; }
.team-card .bio-toggle[aria-expanded="true"]::after { content: " \2191"; }
.team-card .bio-toggle:hover { color: #0f5677; }

.team-card.bio-active {
	border-color: #3caae1;
	box-shadow: 0 6px 20px rgba(24, 114, 159, 0.16);
}

/* Full-content-width bio panel opened below the card row. */
.bio-panel {
	margin: 1.5rem auto 0;
	max-width: 1000px;
	background: #ffffff;
	border: 1px solid #d6e3ee;
	border-left: 4px solid #3caae1;
	border-radius: 6px;
	padding: 1.6rem 1.9rem;
	box-shadow: 0 6px 20px rgba(22, 50, 74, 0.08);
}

.bio-panel[hidden] { display: none; }

.bio-panel-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 0.9rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid #eef2f6;
}

.bio-panel-name {
	margin: 0;
	font-size: 1.25rem;
	color: #16324a;
}

.bio-close {
	flex: 0 0 auto;
	background: none;
	border: none;
	color: #18729f;
	font-family: inherit;
	font-weight: 700;
	font-size: 0.85rem;
	cursor: pointer;
	padding: 0.2rem 0.3rem;
	white-space: nowrap;
}
.bio-close:hover { color: #0f5677; }

.bio-panel-body p {
	font-size: 1rem !important;
	line-height: 1.7;
	margin: 0 0 1rem !important;
	max-width: none !important;
}
.bio-panel-body p:last-child { margin-bottom: 0 !important; }
.bio-panel-body a { color: #18729f; text-decoration: underline; }

@media (max-width: 680px) {
	.team-grid { max-width: 340px; }
	.team-card { flex: 0 1 100%; }
	.bio-panel { padding: 1.2rem 1.15rem; }
	.bio-panel-head { flex-wrap: wrap; }
}

.entry-content .wp-block-image.is-style-rounded img {
	border-radius: 6px;
}

/* ================================================================== *
 * Program page — background/context "fact" boxes in an auto-flow grid,
 * a compact multi-column colleges list, and the annual reports list.
 * ================================================================== */
.box-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
	gap: 1.5rem;
}

.fact-box {
	background: #ffffff;
	border: 1px solid #e6e6e6;
	border-top: 3px solid var(--global-palette1);
	border-radius: 4px;
	padding: 1.4rem 1.5rem;
}

.fact-box h3.wp-block-heading {
	font-size: 1.1rem;
	margin-top: 0;
	margin-bottom: 0.5rem;
}

.fact-box p {
	font-size: 0.95rem;
	margin-bottom: 0;
}

/* Colleges: an elevated typographic "wall" — uniform bordered cells of
   school names in serif, hairline dividers. Reads as an affiliations wall
   without the mismatch of 58 disparate university logos. */
/* College affiliations — a uniform grid: each cell shows the school's logo
   (where a free one was obtainable) above its name, or a styled name-tile. */
.college-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
	gap: 1px;
	background: #e3e3e3;
	border: 1px solid #e3e3e3;
	/* No overflow:hidden / border-radius here so the per-cell hover-lift
	   shadow isn't clipped by the grid container. */
	margin-top: 1.5rem;
}

.college-grid .cl-cell {
	position: relative;
	background: #ffffff;
	padding: 1.1rem 0.85rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	text-align: center;
	min-height: 132px;
}

/* lifted college tile sits above its neighbours so its shadow reads */
.college-grid .cl-cell:hover {
	z-index: 2;
}

.college-grid .cl-logo {
	min-height: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.college-grid .cl-logo img {
	max-height: 58px;
	max-width: 100%;
	width: auto;
	object-fit: contain;
}

/* A few compact wordmarks read small in the grid — bump these slightly. */
.college-grid .cl-logo img[src*="uga-ld"],
.college-grid .cl-logo img[src*="iastate-ld"],
.college-grid .cl-logo img[src*="utah-ld"] {
	max-height: 74px;
}

.college-grid .cl-name {
	font-family: var(--global-heading-font-family);
	font-size: 0.82rem;
	line-height: 1.25;
	color: #23272e;
}

.college-grid .cl-noimg .cl-name {
	font-size: 0.98rem;
	font-weight: 600;
}

/* Annual reports — tidy tile grid (year + label), not a plain blue link list. */
ul.reports-grid {
	list-style: none;
	margin: 1.6rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
	gap: 0.9rem;
}

ul.reports-grid li {
	margin: 0;
}

ul.reports-grid li a {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.85rem 1.1rem;
	background: #ffffff;
	border: 1px solid #dfe4ea;
	border-left: 3px solid #3caae1;
	border-radius: 4px;
	text-decoration: none !important;
	color: #23272e !important;
	transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

ul.reports-grid li a:hover {
	border-color: #3caae1;
	transform: translateY(-4px);
	box-shadow: 0 8px 22px rgba(22, 50, 74, 0.13);
}

ul.reports-grid .rpt-yr {
	font-family: var(--global-heading-font-family);
	font-weight: 700;
	font-size: 1.15rem;
	color: #16324a;
	line-height: 1.1;
}

ul.reports-grid .rpt-lbl {
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	color: #6b7280;
}

/* About hero — keep the handshake/faces visible in the wide crop. */
.page-id-6 .wp-block-cover__image-background {
	object-position: 50% 24% !important;
}

ul.reports-list {
	list-style: none;
	padding-left: 0;
}

ul.reports-list li {
	margin-bottom: 0.5rem;
	padding-left: 1.4rem;
	position: relative;
}

ul.reports-list li::before {
	content: "\2193"; /* down arrow — download cue */
	position: absolute;
	left: 0;
	color: var(--global-palette1);
	font-weight: 700;
}

/* ================================================================== *
 * Footer — light bottom bar carrying the transparent blue wordmark,
 * copyright, and Contact / Privacy links (Kadence footer HTML module).
 * ================================================================== */
.site-footer .site-footer-row-container-inner {
	background: #16324a;
}

.site-footer .footer-html {
	color: rgba(255, 255, 255, 0.82);
	text-align: left;
}

.site-footer .footer-html .footer-html-inner {
	max-width: 1120px;
	margin: 0 auto;
}

.asl-footer-cols {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1.4fr;
	gap: 2.5rem;
	padding: 1.25rem 0 2.5rem;
}

.asl-footer-brand .asl-footer-logo {
	margin: 0 0 1rem;
}

.asl-footer-brand img {
	height: 58px;
	width: auto;
}

.asl-footer-brand p {
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.95rem;
	line-height: 1.6;
	max-width: 34ch;
	margin: 0;
}

.asl-footer-col h4 {
	color: #ffffff;
	font-family: var(--global-heading-font-family);
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 0.9rem;
}

.asl-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.asl-footer-col li {
	margin-bottom: 0.5rem;
}

.asl-footer-col p {
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.92rem;
	line-height: 1.65;
	margin: 0 0 0.8rem;
}

.site-footer .footer-html a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	font-weight: 500;
}

.site-footer .footer-html a:hover {
	color: #fccd5e;
}

.asl-footer-legal {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	padding-top: 1.3rem;
}

.asl-footer-legal p {
	color: rgba(255, 255, 255, 0.62);
	font-size: 0.85rem;
	margin: 0;
}

/* Keep the "Contact · Privacy Policy" pair from ever breaking mid-phrase. */
.asl-legal-links {
	white-space: nowrap;
}

@media (max-width: 781px) {
	.asl-footer-cols {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
}

/* On narrow screens, stack the copyright and the links on separate lines
   (instead of jamming onto one wrapping line). Desktop stays single-line. */
@media (max-width: 600px) {
	.asl-footer-legal p {
		display: flex;
		flex-direction: column;
		gap: 0.55rem;
	}
	.asl-legal-sep {
		display: none;
	}
}

/* ================================================================== *
 * Contact form (Contact Form 7) — brand-styled inputs and submit.
 * ================================================================== */
.asl-contact-form .wpcf7-form label {
	display: block;
	font-weight: 600;
	color: var(--global-palette3);
	margin-bottom: 1.1rem;
}

.asl-contact-form input[type="text"],
.asl-contact-form input[type="email"],
.asl-contact-form textarea {
	width: 100%;
	margin-top: 0.35rem;
	padding: 0.7rem 0.85rem;
	border: 1px solid #ccd2da;
	border-radius: 4px;
	background: #fff;
	font-family: inherit;
	font-size: 1rem;
	color: var(--global-palette4);
}

.asl-contact-form textarea {
	min-height: 160px;
}

.asl-contact-form input:focus,
.asl-contact-form textarea:focus {
	outline: none;
	border-color: var(--global-palette1);
	box-shadow: 0 0 0 3px rgba(60, 170, 225, 0.18);
}

.asl-contact-form .wpcf7-submit {
	background: var(--global-palette1);
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 0.8rem 1.9rem;
	font-family: inherit;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
}

.asl-contact-form .wpcf7-submit:hover {
	background: var(--global-palette2);
}

/* ================================================================== *
 * Mobile refinements.
 * ================================================================== */
@media (max-width: 781px) {
	.site-main-header-inner-wrap {
		min-height: 66px;
	}

	.value-strip .wp-block-column:not(:last-child) {
		margin-bottom: 1.75rem;
	}

	.wp-block-cover__inner-container h1.wp-block-heading {
		font-size: clamp(2rem, 8vw, 2.6rem);
	}
}

/* ================================================================== *
 * Homepage & header corrections
 * ================================================================== */

/* Logo-only header: hide the redundant text site title beside the wordmark. */
#masthead .site-title {
	display: none;
}

/* Home: remove the "Home" page-title band and the white gap above content
   so the hero is the first thing visitors see, flush under the header. */
/* Backup to the kadence_post_layout filter: never show Kadence's page-title
   band (we use custom heroes on every page). */
.entry-hero.page-hero-section {
	display: none !important;
}

/* Every hero sits flush under the header, no white band above. */
.content-area {
	margin-top: 0;
}

/* Neutralize the boxed-content padding/shadow on Home so the full-bleed
   hero sits flush under the header with no white band. */
.home .entry-content-wrap {
	padding-top: 0;
}

.home .entry.single-entry {
	box-shadow: none;
}

/* Home hero: a strong, uniform blue-black scrim across the ENTIRE image so
   white text is always legible regardless of the photo's bright areas. */
/* Strong, uniform dark scrim across every hero IMAGE (home + interior) so
   white title + eyebrow are always legible. Scoped to covers that have an
   image (adjacent sibling) so solid-color covers keep their fill. */
.entry-content > .wp-block-cover .wp-block-cover__image-background + .wp-block-cover__background {
	background-color: transparent !important;
	background-image: linear-gradient(180deg, rgba(18, 28, 48, 0.55) 0%, rgba(18, 28, 48, 0.68) 100%) !important;
	opacity: 1 !important;
}

.home .entry-content > .wp-block-cover .wp-block-cover__inner-container h1.wp-block-heading {
	font-size: clamp(2.6rem, 5.5vw, 4.2rem);
	font-weight: 700;
	letter-spacing: -0.015em;
}

/* ================================================================== *
 * Buttons — full appearance defined with literal colors + !important so
 * they always render as real buttons regardless of theme.json / Kadence.
 * ================================================================== */
.entry-content .wp-block-button__link,
.wp-block-button .wp-block-button__link {
	display: inline-block;
	padding: 0.85rem 1.9rem !important;
	border-radius: 4px !important;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-decoration: none;
}

/* Primary = sky blue */
.wp-block-button:not(.is-style-outline):not(.is-style-accent) > .wp-block-button__link {
	background-color: #3caae1 !important;
	color: #ffffff !important;
	border: 2px solid #3caae1 !important;
}

.wp-block-button:not(.is-style-outline):not(.is-style-accent) > .wp-block-button__link:hover {
	background-color: #18729f !important;
	border-color: #18729f !important;
	color: #ffffff !important;
}

/* Accent = gold (sparing CTA) */
.wp-block-button.is-style-accent > .wp-block-button__link,
.wp-block-button.is-style-accent > .wp-block-button__link:visited {
	background-color: #fccd5e !important;
	color: #1b1b1b !important;
	border: 2px solid #fccd5e !important;
}

.wp-block-button.is-style-accent > .wp-block-button__link:hover {
	background-color: #eab949 !important;
	border-color: #eab949 !important;
	color: #1b1b1b !important;
}

/* Outline */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent !important;
	color: #18729f !important;
	border: 2px solid #18729f !important;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: #18729f !important;
	color: #ffffff !important;
}

/* On dark CTA bands + dark hero covers, an outline button reads white. */
.cta-band .wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-cover .wp-block-button.is-style-outline > .wp-block-button__link {
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.7) !important;
}

.cta-band .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-cover .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: #ffffff !important;
	color: #18729f !important;
}

/* ================================================================== *
 * Full-width editorial bands — remove Kadence's boxed content card so
 * sections render as clean full-width bands, not inset white panels.
 * ================================================================== */
.content-style-boxed .site-main .entry-content-wrap {
	padding: 0;
}

.content-style-boxed .site-main .entry.single-entry {
	box-shadow: none;
	background: transparent;
}

/* ================================================================== *
 * Home program cards — the four Fellowship programs as a card grid.
 * ================================================================== */
.program-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 1.25rem;
	margin-top: 1.75rem;
}

.program-card {
	background: #ffffff;
	border: 1px solid #e6e6e6;
	border-top: 3px solid #3caae1;
	border-radius: 6px;
	padding: 1.5rem 1.4rem 1.6rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}

.program-card .program-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 10px;
	background: #eaf4fb;
	color: #18729f;
	margin-bottom: 0.15rem;
}

.program-card .program-icon svg {
	width: 24px;
	height: 24px;
}

.program-card .program-title {
	margin: 0;
	font-family: var(--global-heading-font-family);
	font-weight: 700;
	font-size: 1.12rem;
	line-height: 1.28;
	color: #16324a;
}

.program-card .program-sub {
	font-size: 0.9rem;
	line-height: 1.4;
	color: #5a6472;
}

.program-card .program-chip {
	margin-top: 0.4rem;
	display: inline-block;
	font-family: var(--global-heading-font-family);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #18729f;
	background: #eaf4fb;
	border: 1px solid #d3e7f4;
	border-radius: 999px;
	padding: 0.28rem 0.7rem;
}

/* Field-trip examples — icon card grid (replaces a plain bullet list). */
.trip-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
	gap: 0.9rem;
	margin: 1.4rem 0 0;
}

.trip-card {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	background: #ffffff;
	border: 1px solid #e6e6e6;
	border-left: 3px solid #3caae1;
	border-radius: 5px;
	padding: 0.95rem 1.05rem;
}

.trip-card .trip-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 8px;
	background: #eaf4fb;
	color: #18729f;
	margin-top: 0.05rem;
}

.trip-card .trip-icon svg {
	width: 20px;
	height: 20px;
}

.trip-card .trip-text {
	font-size: 0.94rem;
	line-height: 1.4;
	color: #2a2e35;
}

/* ================================================================== *
 * Typography & hierarchy — darker, larger body; stronger headings;
 * refined in-body links (not default-hyperlink blue).
 * `:not(.has-text-color)` protects white text on dark sections.
 * ================================================================== */
.entry-content p:not(.has-text-color),
.entry-content li:not(.has-text-color) {
	color: #23272e;
}

.entry-content p:not([style*="font-size"]) {
	font-size: 1.1875rem;
	line-height: 1.75;
}

.entry-content li {
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* Keep running text at a comfortable measure (left-aligned, no symmetric
   side gaps); structured content — cards, columns, CTA bands — fills width. */
.entry-content > .wp-block-group p:not(.has-text-align-center):not(.program-num) {
	max-width: 62rem;
}

.entry-content h2.wp-block-heading {
	font-size: clamp(2rem, 3.2vw, 2.6rem);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.entry-content h3.wp-block-heading {
	font-weight: 700;
}

.entry-content a:not(.wp-block-button__link):not(.wp-element-button) {
	color: #18729f;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: rgba(24, 114, 159, 0.45);
	font-weight: 600;
}

.entry-content a:not(.wp-block-button__link):not(.wp-element-button):hover {
	color: #145d80;
	text-decoration-color: currentColor;
}

/* ================================================================== *
 * CRITICAL: Kadence (a classic theme) does not output this child
 * theme.json color palette, so WordPress never generates the
 * .has-*-color utility classes for our brand slugs. We define them
 * here with literal values so section backgrounds, overlays, and
 * accents actually render. (White is a core default and already works.)
 * ================================================================== */
.has-primary-background-color { background-color: #3caae1 !important; }
.has-primary-dark-background-color { background-color: #18729f !important; }
.has-heading-background-color { background-color: #282828 !important; }
.has-light-background-color { background-color: #f5f5f5 !important; }
.has-off-white-background-color { background-color: #f7f9fb !important; }
.has-tint-background-color { background-color: #eef4f8 !important; }
.has-sand-background-color { background-color: #eef4f8 !important; }
.has-white-background-color { background-color: #ffffff !important; }

.has-primary-color { color: #3caae1 !important; }
.has-primary-dark-color { color: #18729f !important; }
.has-accent-color { color: #fccd5e !important; }
.has-heading-color { color: #282828 !important; }
.has-text-color-text { color: #23272e; }
.has-muted-color { color: #6b7280 !important; }

/* ================================================================== *
 * CRITICAL: Full-width section bands + comfortable content width.
 * Kadence pins page content to a narrow 842px container; our alignfull
 * bands must span the viewport and hold their content at ~1120px.
 * ================================================================== */
/* Guard against the 100vw full-bleed causing a horizontal scrollbar.
   overflow-x: clip does not create a scroll container, so the sticky
   header keeps working. */
html {
	overflow-x: clip;
}

.content-container.site-container {
	max-width: 1200px !important;
}

.entry-content > .alignfull {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	padding-left: 0;
	padding-right: 0;
}

/* Center each full-width band's content at a comfortable editorial width. */
.entry-content > .alignfull.is-layout-constrained > :where(:not(.alignfull):not(.alignwide)),
.entry-content > .wp-block-cover.alignfull > .wp-block-cover__inner-container {
	max-width: 1120px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ================================================================== *
 * Flush section bands — remove inter-block vertical margins so colored
 * bands meet edge-to-edge (no white slivers, e.g. hero → value strip).
 * Each band's own padding provides the rhythm.
 * ================================================================== */
.entry-content > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* ================================================================== *
 * "By the Numbers" stats band — big serif gold numerals on deep navy.
 * ================================================================== */
.stats-band .stat-num {
	font-family: var(--global-heading-font-family);
	font-weight: 700;
	color: #fccd5e;
	line-height: 1;
	margin: 0;
}

.stats-band .stat-label {
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	margin: 0.5rem 0 0;
	line-height: 1.35;
}

/* ================================================================== *
 * Placeholder notes — subtle, professional "to confirm" markers.
 * Finished-looking to the client, still visible to us.
 * ================================================================== */
.asl-note {
	border-left: 3px solid #cfd8e0;
	background: #f6f8fa;
	padding: 0.55rem 0.95rem !important;
	margin: 1.4rem 0 !important;
	border-radius: 0 3px 3px 0;
}

.asl-note p {
	font-size: 0.82rem !important;
	line-height: 1.5;
	color: #7b838f !important;
	margin: 0 !important;
	max-width: none !important;
}

.asl-note em {
	font-style: italic;
	font-weight: 600;
	color: #5c6470;
}

/* Privacy / legal pages — narrow, readable body column. */
.entry-content .privacy-body {
	max-width: 720px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.entry-content .privacy-body h2.wp-block-heading {
	font-size: 1.5rem;
	margin-top: 2.2rem;
}

.entry-content .privacy-body h2.wp-block-heading::after {
	display: none;
}

/* ================================================================== *
 * In-page section sub-nav (sticky jump links on Program + About).
 * ================================================================== */
html {
	scroll-behavior: smooth;
}

.section-subnav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #ffffff;
	border-bottom: 1px solid #e3e7ec;
	box-shadow: 0 2px 10px rgba(22, 50, 74, 0.06);
}

.section-subnav-inner {
	max-width: 1120px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.35rem;
	padding: 0.5rem 1rem;
}

.section-subnav a {
	font-family: var(--global-heading-font-family);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: #273755;
	text-decoration: none;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}

.section-subnav a:hover {
	background: #eef4f9;
	color: #18729f;
}

.section-subnav a.active {
	background: #273755;
	color: #ffffff;
}

/* offset in-page anchors so the sticky sub-nav doesn't cover the heading */
.wp-block-heading[id] {
	scroll-margin-top: 84px;
}

@media (max-width: 600px) {
	.section-subnav-inner {
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* Reichman inspirational lead line on the Host University section */
.reichman-lead {
	font-family: var(--global-heading-font-family);
	font-size: 1.5rem;
	line-height: 1.35;
	color: #273755;
	font-style: italic;
	margin: 0 0 1.1rem;
	padding-left: 1rem;
	border-left: 4px solid #FCCD5E;
}

/* "Never Forget" tribute photo — matted like a framed photograph on the
   dark navy band; restrained, somber. Native 300x250 so it is never upscaled. */
.nf-photo {
	max-width: 320px;
	margin: 1.7rem auto 0.4rem;
	background: #ffffff;
	padding: 10px 10px 4px;
	border-radius: 2px;
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
}

.nf-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 1px;
}

.nf-photo figcaption {
	margin: 0.55rem 0 0.25rem;
	text-align: center;
	font-family: var(--global-heading-font-family);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: #5a6472;
}

/* Host University — Reichman campus photo (framed) + logo/heading lockup.
   Now the 2000px-wide flag-walk photo, so the frame can carry more width
   than the old low-res shot allowed without upscaling. */
.ru-photo {
	max-width: 640px;
	margin: 0.6rem auto 1.5rem;
	background: #ffffff;
	padding: 8px;
	border: 1px solid #dfe4ea;
	border-radius: 4px;
	box-shadow: 0 8px 24px rgba(22, 50, 74, 0.12);
}

.ru-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
}

.ru-photo figcaption {
	margin-top: 0.45rem;
	text-align: center;
	font-family: var(--global-heading-font-family);
	font-size: 0.74rem;
	letter-spacing: 0.03em;
	color: #6b7480;
}

.reichman-welcome {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin: 0 0 0.4rem;
}

.reichman-welcome .ru-logo {
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(22, 50, 74, 0.18);
}

.reichman-welcome .ru-welcome-text {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.3;
	color: #16324a;
}

/* Campus photo galleries (Reichman-supplied photography) — Program page.
   Both grids are sized so the images keep their NATIVE aspect ratios: no
   object-fit cropping, so nothing gets sliced off a photo. Heights line up
   because the column ratios match the source ratios. */
.campus-gallery {
	margin: 1.6rem 0 1.5rem;
}

.campus-gallery img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
	box-shadow: 0 6px 18px rgba(22, 50, 74, 0.14);
	cursor: zoom-in; /* all are .bin-zoom → site-wide lightbox */
}

.campus-gallery figcaption {
	margin-top: 0.7rem;
	text-align: center;
	font-family: var(--global-heading-font-family);
	font-size: 0.78rem;
	letter-spacing: 0.03em;
	color: #5a6472;
}

/* Lecture hall + lawn: both native 3:2, so two equal columns line up exactly. */
.campus-pair {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

/* Lone portrait shot (dormitory tower, 0.82:1). Capped and centred so a tall
   image doesn't tower over the section at full content width. */
.campus-solo {
	max-width: 360px;
	margin-left: auto;
	margin-right: auto;
}

/* Match the site's 781px breakpoint: stack rather than shrink to thumbnails. */
@media (max-width: 781px) {
	.campus-pair {
		grid-template-columns: 1fr;
	}
}

/* ================================================================== *
 * Motion — subtle scroll-reveal + consistent card hover-lift.
 * Restrained (fade + small rise). Fully progressive-enhancement:
 *  - No JS  -> `.js-reveal` is never added, content shows statically.
 *  - JS on  -> elements get `.reveal`; IntersectionObserver adds
 *              `.is-shown` as they enter view (staggered via --reveal-i).
 *  - prefers-reduced-motion -> JS bails AND this CSS forces visible.
 * ================================================================== */
html.js-reveal .reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
	transition-delay: calc(var(--reveal-i, 0) * 80ms);
	will-change: opacity, transform;
}

html.js-reveal .reveal.is-shown {
	opacity: 1;
	transform: none;
}

/* Consistent hover-lift across every card type. */
.program-card,
.trip-card,
.fact-box,
.bin-callout,
.team-card,
.college-grid .cl-cell {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.program-card:hover,
.trip-card:hover,
.fact-box:hover,
.bin-callout:hover,
.team-card:hover,
.college-grid .cl-cell:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 22px rgba(22, 50, 74, 0.13);
}

/* Respect reduced-motion: no reveal offset, no hover motion. */
@media (prefers-reduced-motion: reduce) {
	html.js-reveal .reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.program-card,
	.fact-box,
	.bin-callout,
	.team-card,
	.college-grid .cl-cell,
	ul.reports-grid li a {
		transition: none;
	}
	.program-card:hover,
	.fact-box:hover,
	.bin-callout:hover,
	.team-card:hover,
	.college-grid .cl-cell:hover,
	ul.reports-grid li a:hover {
		transform: none;
	}
}

/* ================================================================== *
 * When a page's LAST block is a full-width colored band (e.g. the
 * "Ready to Make a Difference" CTA on Home, or the off-white band on
 * How to Apply), it should flow straight into the footer. Kadence's
 * .entry-content-wrap has 2rem padding all round, and that bottom 2rem
 * shows as a white sliver between the band and the navy footer. Remove
 * it only in that case, so pages ending in normal content keep their
 * breathing room above the footer.
 * ================================================================== */
/* Home (page-id-5) and How to Apply (page-id-8) end in a full-width colored
   band (the "Ready to Make a Difference" CTA / the off-white band). With
   Kadence's boxed content + vertical padding, the bottom spacing —
   .content-area 5rem margin (grey site bg) + .entry-content-wrap 2rem padding
   — shows as a sliver above the navy footer. Collapse it on just those pages
   so the band meets the footer. (Scoped by page-id; :has() didn't apply here.) */
body.page-id-5 .content-area,
body.page-id-8 .content-area {
	margin-bottom: 0;
}

body.page-id-5 .entry-content-wrap,
body.page-id-8 .entry-content-wrap {
	padding-bottom: 0;
}

body.page-id-5 .entry-content > .cta-band:last-child,
body.page-id-5 .entry-content > .wp-block-group.alignfull.has-background:last-child,
body.page-id-8 .entry-content > .wp-block-group.alignfull.has-background:last-child {
	margin-bottom: 0;
}