/* ARYF Home — refined hand-built template.
 * Single continuous dark background so sections flow without hard edges. */

.aryf-home {
	/* Break out of The7's constrained content container so hero + section
	 * gradients flow edge-to-edge. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 0;

	--c-bg-top:     #1f1858;
	--c-bg-mid:     #0d1130;
	--c-bg-low:     #060815;
	--c-bg-card:    rgba(255, 255, 255, 0.035);
	--c-bg-card-h:  rgba(255, 255, 255, 0.06);
	--c-text:       #f1f3f8;
	--c-text-soft:  #adb6c5;
	--c-text-mute:  #6e7686;
	--c-border:     rgba(255, 255, 255, 0.08);
	--c-border-h:   rgba(255, 255, 255, 0.18);
	--c-blue:       #5db1ff;
	--c-purple:     #b97cff;
	--c-teal:       #34d4a8;
	--c-amber:      #fbbf24;
	--c-pink:       #ff6f9e;
	--c-cta-1:      #7dd3fc;
	--c-cta-2:      #38bdf8;
	--r-card:       18px;
	--r-pill:       999px;

	background:
		linear-gradient(180deg,
			var(--c-bg-top)  0%,
			var(--c-bg-mid) 28%,
			var(--c-bg-mid) 70%,
			var(--c-bg-low) 100%);
	color: var(--c-text);
	font-family: 'Sora', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
	overflow-x: hidden;
}

.aryf-home *,
.aryf-home *::before,
.aryf-home *::after { box-sizing: border-box; }

/* ============================================================
 * HERO
 * ============================================================ */

.aryf-home-hero {
	position: relative;
	padding: clamp(64px, 9vh, 170px) 24px clamp(64px, 10vh, 200px);
	display: flex;
	align-items: center;
	justify-content: center;
	/* No overflow:hidden — we want __bg to extend up behind the theme header. */
	isolation: isolate;
}

/* Soft ambient glow — three radial gradients, all fading to transparent
 * so the hero blends seamlessly into the body gradient below. */
.aryf-home-hero__bg {
	position: absolute;
	/* Extend ABOVE the hero so the glow continues up to (and behind) the
	 * theme header, eliminating any dark band on tall mobile viewports. */
	inset: -160px 0 0 0;
	background:
		linear-gradient(180deg,
			rgba(99, 91, 200, 0.42) 0%,
			rgba(99, 91, 200, 0.22) 25%,
			transparent 70%),
		radial-gradient(70% 60% at 30% 30%, rgba(120, 91, 255, 0.55), transparent 65%),
		radial-gradient(70% 60% at 75% 30%, rgba(168, 85, 247, 0.45), transparent 65%),
		radial-gradient(60% 50% at 55% 90%, rgba( 45, 212, 191, 0.16), transparent 70%);
	z-index: -2;
	filter: blur(4px);
	pointer-events: none;
}

/* Subtle starfield, very low opacity */
.aryf-home-hero__stars {
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,255,255,0.7), transparent 60%),
		radial-gradient(1.1px 1.1px at 32% 48%, rgba(255,255,255,0.5), transparent 60%),
		radial-gradient(1.6px 1.6px at 58% 18%, rgba(255,255,255,0.6), transparent 60%),
		radial-gradient(1.0px 1.0px at 72% 62%, rgba(255,255,255,0.45), transparent 60%),
		radial-gradient(1.3px 1.3px at 88% 28%, rgba(255,255,255,0.55), transparent 60%),
		radial-gradient(1.0px 1.0px at 18% 76%, rgba(255,255,255,0.4), transparent 60%),
		radial-gradient(1.2px 1.2px at 48% 88%, rgba(255,255,255,0.5), transparent 60%),
		radial-gradient(1.4px 1.4px at 90% 80%, rgba(255,255,255,0.45), transparent 60%);
	background-repeat: no-repeat;
	z-index: -1;
	pointer-events: none;
	opacity: 0.85;
}

/* The fade-out at the bottom of the hero — guarantees a perfect, smooth
 * transition into the next section regardless of what's there. */
.aryf-home-hero__fade {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 25%;
	background: linear-gradient(180deg, transparent 0%, var(--c-bg-mid) 100%);
	z-index: -1;
	pointer-events: none;
}

.aryf-home-hero__inner {
	max-width: 920px;
	width: 100%;
	text-align: center;
	position: relative;
	z-index: 1;
}

.aryf-home-hero__eyebrow {
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--c-blue);
	margin: 0 0 1.25rem;
	opacity: 0.9;
}

.aryf-home-hero__title {
	font-size: clamp(2.4rem, 5.5vw, 4.2rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.025em;
	margin: 0 0 1.6rem;
	color: var(--c-text);
}

.aryf-home-hero__title-accent {
	display: block;
	background: linear-gradient(135deg, #93c5fd 0%, #c084fc 55%, #f0abfc 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	margin-top: 0.15em;
}

.aryf-home-hero__pills {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.6rem;
	justify-content: center;
	font-size: 0.98rem;
	font-weight: 500;
}

.aryf-home-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--c-text);
}

.aryf-home-pill__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	box-shadow: 0 0 12px currentColor;
	background-color: currentColor;
}

.aryf-home-pill--blue   { color: var(--c-blue); }
.aryf-home-pill--purple { color: var(--c-purple); }
.aryf-home-pill--teal   { color: var(--c-teal); }

.aryf-home-pill .aryf-home-pill__dot + *,
.aryf-home-pill {
	color: var(--c-text);
}
.aryf-home-pill .aryf-home-pill__dot {
	background-color: currentColor;
}
.aryf-home-pill--blue .aryf-home-pill__dot   { background: var(--c-blue);   color: var(--c-blue); }
.aryf-home-pill--purple .aryf-home-pill__dot { background: var(--c-purple); color: var(--c-purple); }
.aryf-home-pill--teal .aryf-home-pill__dot   { background: var(--c-teal);   color: var(--c-teal); }

.aryf-home-hero__ctas {
	display: inline-flex;
	gap: 0.8rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 0.4rem;
}

/* ============================================================
 * CTAs (shared)
 * ============================================================ */

.aryf-cta-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.85rem 1.5rem;
	background: linear-gradient(135deg, var(--c-cta-1) 0%, var(--c-cta-2) 100%);
	color: #0a1830;
	border-radius: var(--r-pill);
	font-weight: 600;
	font-size: 0.96rem;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
	box-shadow: 0 8px 24px rgba(56, 189, 248, 0.32);
	white-space: nowrap;
}
.aryf-cta-primary:hover,
.aryf-cta-primary:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 12px 32px rgba(56, 189, 248, 0.5);
	filter: brightness(1.05);
	color: #0a1830;
	text-decoration: none;
}

.aryf-cta-ghost {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.85rem 1.4rem;
	background: transparent;
	color: var(--c-text);
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
	font-weight: 500;
	font-size: 0.95rem;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.aryf-cta-ghost:hover,
.aryf-cta-ghost:focus-visible {
	background-color: rgba(255, 255, 255, 0.06);
	border-color: var(--c-border-h);
	color: var(--c-text);
	text-decoration: none;
	transform: translateY(-1px);
}

/* ============================================================
 * Section scaffolding
 * ============================================================ */

.aryf-home-section {
	padding: clamp(56px, 9vh, 130px) 24px;
	position: relative;
}

.aryf-home-section__inner {
	max-width: 1120px;
	margin: 0 auto;
	position: relative;
}
.aryf-home-section__inner--narrow {
	max-width: 760px;
}

.aryf-home-section__heading {
	max-width: 760px;
	margin: 0 auto clamp(2.5rem, 5vw, 3.6rem);
	text-align: center;
}

.aryf-home-section__cta {
	margin-top: clamp(2rem, 4vw, 3rem);
	text-align: center;
}
.aryf-home-section__cta--row {
	display: flex;
	gap: 0.8rem;
	flex-wrap: wrap;
	justify-content: center;
}

.aryf-home-eyebrow {
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--c-blue);
	margin: 0 0 0.9rem;
}
.aryf-home-eyebrow--center { text-align: center; }

.aryf-home-h2 {
	font-size: clamp(1.85rem, 3.4vw, 2.6rem);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.018em;
	margin: 0 0 1.2rem;
	color: var(--c-text);
}
.aryf-home-h2--center { text-align: center; }

.aryf-home-p {
	font-size: 1.025rem;
	line-height: 1.7;
	color: var(--c-text-soft);
	margin: 0 0 1.1rem;
}
.aryf-home-p:last-child { margin-bottom: 0; }
.aryf-home-p--center {
	text-align: center;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}
.aryf-home-p--lead {
	font-size: 1.1rem;
	color: var(--c-text);
}
.aryf-home-p--small {
	font-size: 0.96rem;
	line-height: 1.65;
}

/* Section dividers — extremely subtle radial accent on top */
.aryf-home-section:not(.aryf-home-hero)::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 360px;
	max-width: 60%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
	pointer-events: none;
}

/* ============================================================
 * Split section (New Era)
 * ============================================================ */

.aryf-home-split {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.aryf-home-split__media {
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: rgba(255, 255, 255, 0.04);
	position: relative;
	box-shadow:
		0 0 0 1px var(--c-border),
		0 30px 60px -20px rgba(99, 102, 241, 0.35),
		0 10px 30px -10px rgba(0, 0, 0, 0.5);
}
.aryf-home-split__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 60%, rgba(13, 17, 48, 0.45) 100%);
	pointer-events: none;
}
.aryf-home-split__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 880px) {
	.aryf-home-split {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.aryf-home-split__media {
		max-width: 420px;
		margin: 0 auto;
	}
}

/* ============================================================
 * Learn. Create. Innovate. — domain cards + ways list
 * ============================================================ */

.aryf-home-domains {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.aryf-home-domain {
	position: relative;
	background: var(--c-bg-card);
	border: 1px solid var(--c-border);
	border-radius: var(--r-card);
	padding: 1.8rem 1.5rem;
	transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
	overflow: hidden;
	isolation: isolate;
}
.aryf-home-domain::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, transparent 50%, currentColor 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}
.aryf-home-domain:hover {
	background: var(--c-bg-card-h);
	transform: translateY(-3px);
	border-color: var(--c-border-h);
}
.aryf-home-domain:hover::before { opacity: 1; }

.aryf-home-domain--blue   { color: var(--c-blue); }
.aryf-home-domain--purple { color: var(--c-purple); }
.aryf-home-domain--teal   { color: var(--c-teal); }

.aryf-home-domain__icon {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, currentColor 15%, transparent);
	color: inherit;
	margin-bottom: 1.1rem;
}

.aryf-home-domain__h {
	font-size: 1.15rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
	color: var(--c-text);
	letter-spacing: -0.01em;
}

.aryf-home-domain__p {
	font-size: 0.96rem;
	line-height: 1.6;
	color: var(--c-text-soft);
	margin: 0;
}

@media (max-width: 820px) {
	.aryf-home-domains { grid-template-columns: 1fr; }
}

/* Ways list */
.aryf-home-ways {
	margin: clamp(2.5rem, 5vw, 3.6rem) auto 0;
	max-width: 760px;
}
.aryf-home-ways__title {
	text-align: center;
	font-size: 1rem;
	font-weight: 500;
	color: var(--c-text-soft);
	margin: 0 0 1.2rem;
}
.aryf-home-ways__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.7rem;
}
.aryf-home-ways__list > li {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 0.95rem 1.15rem;
	background: var(--c-bg-card);
	border: 1px solid var(--c-border);
	border-radius: 12px;
	font-size: 0.98rem;
	line-height: 1.55;
	color: var(--c-text-soft);
	transition: background-color 0.18s ease, border-color 0.18s ease;
}
.aryf-home-ways__list > li:hover {
	background: var(--c-bg-card-h);
	border-color: var(--c-border-h);
}
.aryf-home-ways__list > li strong { color: var(--c-text); font-weight: 600; }
.aryf-home-ways__icon {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: rgba(93, 177, 255, 0.12);
	color: var(--c-blue);
}

/* ============================================================
 * Nonprofit section
 * ============================================================ */

.aryf-home-nonprofit {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.aryf-home-fund {
	margin: 1.5rem 0 1.5rem;
	padding: 1.4rem 1.6rem;
	background: var(--c-bg-card);
	border: 1px solid var(--c-border);
	border-radius: 14px;
	border-left: 3px solid var(--c-blue);
}

.aryf-home-fund__title {
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--c-text);
	margin: 0 0 0.6rem;
	letter-spacing: -0.01em;
}

/* 501(c)(3) seal — CSS-only badge */
.aryf-home-nonprofit__seal {
	display: flex;
	justify-content: center;
}
.aryf-home-seal {
	position: relative;
	width: 220px;
	height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.aryf-home-seal__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background:
		radial-gradient(circle at center, rgba(56, 189, 248, 0.18), transparent 65%),
		conic-gradient(from 0deg, var(--c-blue), var(--c-purple), var(--c-teal), var(--c-blue));
	-webkit-mask: radial-gradient(circle, transparent 56%, #000 57%, #000 72%, transparent 73%);
	        mask: radial-gradient(circle, transparent 56%, #000 57%, #000 72%, transparent 73%);
	opacity: 0.85;
}
.aryf-home-seal__inner {
	position: relative;
	width: 64%;
	height: 64%;
	border-radius: 50%;
	background:
		radial-gradient(circle at 30% 30%, rgba(93, 177, 255, 0.25), transparent 60%),
		var(--c-bg-mid);
	border: 1px solid var(--c-border-h);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	text-align: center;
	box-shadow: 0 12px 28px -10px rgba(0,0,0,0.6);
}
.aryf-home-seal__big {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--c-text);
	letter-spacing: -0.01em;
}
.aryf-home-seal__small {
	font-size: 0.72rem;
	color: var(--c-text-soft);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

@media (max-width: 880px) {
	.aryf-home-nonprofit {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	/* Mobile: body first, seal as a decorative accent below it */
	.aryf-home-nonprofit__seal { order: 1; }
	.aryf-home-seal {
		width: 160px;
		height: 160px;
	}
	.aryf-home-seal__big { font-size: 1.15rem; }
}

/* ============================================================
 * Mission section
 * ============================================================ */

.aryf-home-section--mission {
	padding-bottom: clamp(40px, 6vh, 60px);
}

/* ============================================================
 * Recognition slot at the bottom
 * ============================================================ */

.aryf-home-section--recognition {
	padding-top: clamp(40px, 6vh, 60px);
	padding-bottom: clamp(80px, 10vh, 120px);
}

/* ============================================================
 * The7 hooks
 * ============================================================ */

/* Hero is the title — kill The7's default title bar on every template that
 * uses our home design system. */
.page-template-page-home #page-title,
.page-template-page-home .page-title-area,
.page-template-page-home .full-width-wrap > .stripe-section,
.page-template-page-about #page-title,
.page-template-page-about .page-title-area,
.page-template-page-about .full-width-wrap > .stripe-section,
.page-template-page-ways-to-help #page-title,
.page-template-page-ways-to-help .page-title-area,
.page-template-page-ways-to-help .full-width-wrap > .stripe-section,
.page-template-page-donate #page-title,
.page-template-page-donate .page-title-area,
.page-template-page-donate .full-width-wrap > .stripe-section,
.page-template-page-contact #page-title,
.page-template-page-contact .page-title-area,
.page-template-page-contact .full-width-wrap > .stripe-section { display: none; }

/* The7 reserves padding-top:70px on #main to clear the fixed header AND
 * has some bottom spacing before the footer. The body's bg shows through
 * both strips. Paint the body with a vertical gradient so the top strip
 * matches the hero purple and the bottom strip matches the dark footer.
 * Anchor the transition to viewport so the colors hit predictably
 * regardless of page length. */
body.page-template-page-home,
body.page-template-page-about,
body.page-template-page-ways-to-help,
body.page-template-page-donate,
body.page-template-page-contact {
	background-color: #060812 !important;
	background-image: linear-gradient(
		180deg,
		#2a1f6a 0,
		#2a1f6a 80px,           /* solid purple through the header-padding strip */
		#1f1858 200px,          /* still purple as the hero glow starts */
		#060812 100vh           /* fully dark by one viewport-height down */
	) !important;
	background-repeat: no-repeat !important;
	background-attachment: scroll !important;
}
body.page-template-page-home #main,
body.page-template-page-about #main,
body.page-template-page-ways-to-help #main,
body.page-template-page-donate #main,
body.page-template-page-contact #main {
	background: transparent;
}

/* Kill The7's 1px border below the sticky header — it creates a hard seam
 * against the hero gradient on this template. */
body.page-template-page-home .elementor-location-header .the7-e-sticky-row-anchor,
body.page-template-page-about .elementor-location-header .the7-e-sticky-row-anchor,
body.page-template-page-ways-to-help .elementor-location-header .the7-e-sticky-row-anchor,
body.page-template-page-donate .elementor-location-header .the7-e-sticky-row-anchor,
body.page-template-page-contact .elementor-location-header .the7-e-sticky-row-anchor,
body.page-template-page-home .elementor-location-header [class*="the7-e-sticky-row"],
body.page-template-page-about .elementor-location-header [class*="the7-e-sticky-row"],
body.page-template-page-ways-to-help .elementor-location-header [class*="the7-e-sticky-row"],
body.page-template-page-donate .elementor-location-header [class*="the7-e-sticky-row"],
body.page-template-page-contact .elementor-location-header [class*="the7-e-sticky-row"],
body.page-template-page-about .elementor-location-header [class*="the7-e-sticky-row"] {
	border-bottom: 0 !important;
}