/* ============================================================
   Press Start CoLab — shared styles for the Elementor widgets
   Colours, sizes, fonts & positions are overridden per-widget
   by Elementor controls; this file holds structure + motion.
   ============================================================ */

.ps-display {
	font-family: "Bricolage Grotesque", sans-serif;
}

.ps-body {
	font-family: "Manrope", sans-serif;
}

.ps-section ::selection {
	background: #F4B731;
	color: #211D1A;
}

/* ---------- keyframes ---------- */
@keyframes ps-float {

	0%,
	100% {
		transform: translateY(0)
	}

	50% {
		transform: translateY(-12px)
	}
}

@keyframes ps-floaty {

	0%,
	100% {
		transform: translateY(0) rotate(0)
	}

	50% {
		transform: translateY(-9px) rotate(2.5deg)
	}
}

@keyframes ps-spin {
	to {
		transform: rotate(360deg)
	}
}

@keyframes ps-twinkle {

	0%,
	100% {
		transform: scale(1)
	}

	50% {
		transform: scale(.72)
	}
}

.ps-anim-float {
	animation: ps-float 6s ease-in-out infinite;
}

.ps-anim-floaty {
	animation: ps-floaty 7s ease-in-out infinite;
}

.ps-anim-spin {
	animation: ps-spin 26s linear infinite;
}

.ps-anim-twinkle {
	animation: ps-twinkle 4.5s ease-in-out infinite;
}

/* ---------- scroll reveal ---------- */
.ps-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .9s cubic-bezier(.22, .61, .36, 1), transform .9s cubic-bezier(.22, .61, .36, 1);
	transition-delay: var(--ps-d, 0ms);
	will-change: opacity, transform;
}

.ps-reveal--left {
	transform: translateX(-34px);
}

.ps-reveal--right {
	transform: translateX(34px);
}

.ps-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* In the Elementor editor everything is shown immediately (covers BOTH the
   ps-reveal widgets and the theme's .reveal widgets so nothing stays hidden
   while editing). */
.elementor-editor-active .ps-reveal,
.elementor-editor-preview .ps-reveal,
.elementor-editor-active .reveal,
.elementor-editor-preview .reveal {
	opacity: 1 !important;
	transform: none !important;
}

@media (prefers-reduced-motion: reduce) {

	.ps-anim-float,
	.ps-anim-floaty,
	.ps-anim-spin,
	.ps-anim-twinkle {
		animation: none !important;
	}

	.ps-reveal {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.ps-header {
	position: relative;
	width: 100%;
	padding: 20px 0;
}

.ps-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: min(93%, 1100px);
	margin: 0 auto;
	background: #fff;
	border-radius: 999px;
	padding: 14px 32px;
	box-shadow: 0 10px 35px -12px rgba(33, 29, 26, .25);
}

.ps-nav__logo img {
	display: block;
	height: 38px;
	width: auto;
}

.ps-nav__logo,
.ps-nav__logo *,
.ps-nav__logo:hover,
.ps-nav__logo:hover * {
	transform: none !important;
	transition: none !important;
	animation: none !important;
}

.ps-header .elementor-widget-container,
.ps-header .elementor-widget-container:hover {
	transform: none !important;
	transition: none !important;
}

.ps-nav__links {
	display: flex;
	align-items: center;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ps-nav__links a {
	position: relative;
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	color: #211D1A;
	white-space: nowrap;
}

.ps-nav__links a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -5px;
	height: 2px;
	width: 100%;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.ps-nav__links a:hover::after,
.ps-nav__links a.is-active::after,
.ps-nav__links a.active::after {
	transform: scaleX(1);
}

.ps-nav__links a.is-active,
.ps-nav__links a.active {
	color: #211D1A;
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}

@media (max-width: 880px) {
	.ps-nav__links {
		display: none;
	}
}

/* Fallback nav — .nav-link is the class applied directly to <a> elements
   in press_start_fallback_header_desktop/mobile. These rules mirror the
   .ps-nav__links a rules so the active underline works without needing
   the ps-nav__links parent class on the <ul>. */
a.nav-link {
	position: relative;
	text-decoration: none;
}

a.nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -5px;
	height: 2px;
	width: 100%;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

a.nav-link:hover::after,
a.nav-link.active::after {
	transform: scaleX(1);
}

a.nav-link.active {
	color: #211D1A;
	font-weight: 700;
}

a.nav-link.active::after {
	background: #E56A54;
}

/* ============================================================
   HERO
   ============================================================ */
.ps-hero {
	position: relative;
	overflow-x: clip;
	background: #FAF5EF;
	padding: 120px 0 64px;
}

.ps-hero__inner {
	position: relative;
	z-index: 10;
	width: min(92%, 1320px);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 40px;
	align-items: center;
}

.ps-hero__collage {
	position: absolute;
	left: -14%;
	top: 40px;
	pointer-events: none;
	user-select: none;
	width: 100%;
	max-width: 680px;
	height: auto;
}

.ps-hero__collage-wrap {
	width: 100%;
	position: relative;
	height: 300px;
}

.ps-hero__heading {
	margin: 0;
	line-height: 1.04;
	letter-spacing: -.02em;
	font-weight: 800;
	color: #211D1A;
	font-size: clamp(2.2rem, 6vw, 3.4rem);
}

.ps-hero__sub {
	margin: 28px 0 0;
	max-width: 30rem;
	line-height: 1.6;
	font-size: 1.125rem;
	color: rgba(33, 29, 26, .7);
}

.ps-hero__copy {
	width: 100%;
	position: relative;
	z-index: 2;
}

@media (min-width: 1024px) {
	.ps-hero {
		padding: 180px 0 80px;
	}

	.ps-hero__inner {
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.ps-hero__collage {
		width: 100%;
		max-width: 780px;
		left: -22%;
		top: 0;
	}

	.ps-hero__collage-wrap {
		width: 50%;
		height: 500px;
		position: relative;
	}

	.ps-hero__copy {
		width: 46%;
		margin-left: auto;
	}
}



/* ============================================================
   GRANT FUNDING
   ============================================================ */
.ps-grant {
	position: relative;
	overflow: hidden;
	background: #FAF5EF;
	padding: 16px 0 96px;
}

.ps-grant__wrap {
	width: min(94%, 1240px);
	margin: 0 auto;
}

.ps-grant__card {
	border-radius: 40px;
	background: #94A4E9;
	color: #211D1A;
	padding: 56px;
	box-shadow: 0 24px 60px -30px rgba(91, 121, 227, .45);
}

.ps-grant__title {
	margin: 0;
	font-weight: 800;
	letter-spacing: -.02em;
	font-size: clamp(1.8rem, 4vw, 2.25rem);
}

.ps-grant__body {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(33, 29, 26, .8);
}

.ps-grant__body p {
	margin: 0;
}

.ps-grant__note {
	margin-top: 24px;
	font-size: 12px;
	color: rgba(33, 29, 26, .5);
}

.ps-grant__piggy {
	position: relative;
	margin: 48px auto 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 92%;
	max-width: 440px;
	height: 360px;
}

.ps-grant__piggy-img {
	position: relative;
	z-index: 10;
	width: 78%;
	max-width: 300px;
	height: auto;
	user-select: none;
	filter: drop-shadow(0 22px 34px rgba(33, 29, 26, .18));
}

.ps-shape {
	position: absolute;
	z-index: 0;
}

.ps-shape--circle {
	border-radius: 999px;
	background: #E2614E;
}

.ps-shape--square {
	border-radius: 5px;
	background: #5B79E3;
}

.ps-shape--tri {
	background: #5B79E3;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.ps-shape--tri-coral {
	background: #E2614E;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.ps-c1 {
	right: 14%;
	top: 2%;
	width: 176px;
	height: 176px;
}

.ps-c2 {
	left: 6%;
	top: 30%;
	width: 44px;
	height: 44px;
}

.ps-c3 {
	left: 1%;
	top: 52%;
	width: 48px;
	height: 48px;
}

.ps-c4 {
	right: 10%;
	bottom: 12%;
	width: 40px;
	height: 40px;
}

.ps-spark {
	width: 12px;
	height: 12px;
	border-radius: 999px;
	background: #F4B731;
}

.ps-spark--2 {
	width: 10px;
	height: 10px;
	background: #E9A6BE;
}

@media (min-width: 1024px) {
	.ps-grant {
		padding-top: 0;
		min-height: 640px;
	}

	.ps-grant__card {
		width: 53%;
	}

	.ps-grant__piggy {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		margin: 0;
		width: 50%;
		max-width: 720px;
		height: 580px;
		justify-content: flex-end;
	}

	.ps-grant__piggy-img {
		margin-right: 40px;
		width: 74%;
		max-width: 520px;
	}

	.ps-c1 {
		width: 320px;
		height: 320px;
	}
}

/* ============================================================
   ELEMENTOR INTEGRATION
   Every Press Start widget's <section> was authored to sit
   directly on <body> (full-viewport width, its own
   `mx-auto w-[min(..)]` doing the centring). Elementor instead
   drops it inside a boxed, padded column, which clamps the width
   and shifts every percentage-based position in the hero.
   Fix: turn each widget-container into a 100vw stand-in for
   <body>, then strip Elementor's boxing/padding/gaps so the
   original markup lays out pixel-for-pixel.
   ============================================================ */

/* 1 — widget-container becomes a full-viewport canvas (= <body>) */
[class*="elementor-widget-press-start-"]:not(.elementor-widget-press-start-partners)>.elementor-widget-container {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	padding: 0 !important;
}

/* 2 — strip the boxing / padding / vertical gaps Elementor adds */
.elementor-widget[class*="elementor-widget-press-start-"]:not(.elementor-widget-press-start-partners) {
	margin: 0 !important;
}

.elementor-section:has([class*="elementor-widget-press-start-"]:not(.elementor-widget-press-start-partners)),
.elementor-section:has([class*="elementor-widget-press-start-"]:not(.elementor-widget-press-start-partners))>.elementor-container {
	max-width: none !important;
	padding: 0 !important;
}

.elementor-column:has([class*="elementor-widget-press-start-"]:not(.elementor-widget-press-start-partners))>.elementor-widget-wrap {
	padding: 0 !important;
}

/* 3 — nothing in the chain may clip the full-bleed sections */
.elementor-section:has([class*="elementor-widget-press-start-"]:not(.elementor-widget-press-start-partners)),
.elementor-section:has([class*="elementor-widget-press-start-"]:not(.elementor-widget-press-start-partners))>.elementor-container,
.elementor-column:has([class*="elementor-widget-press-start-"]:not(.elementor-widget-press-start-partners))>.elementor-widget-wrap {
	overflow: visible !important;
}

/* 4 — the 100vw bleed must never spawn a horizontal scrollbar
   (matches the standalone page's `overflow-x: clip` on <body>;
   clip — not hidden — keeps the sub-focus sticky cards working) */
body {
	overflow-x: clip;
}

/* FAQ answer (Elementor WYSIWYG) — restore paragraph spacing that Tailwind's
   preflight removes, so multi-paragraph answers read correctly. */
.ps-faq-a p+p {
	margin-top: 1rem;
}

.ps-faq-a ul,
.ps-faq-a ol {
	margin: .75rem 0;
	padding-left: 1.25rem;
	list-style: revert;
}

/* Rich body text — WYSIWYG body fields render inside a .ps-rich <div> (not a
   <p>, to avoid nested-paragraph breakage). Keep paragraph rhythm, links and
   lists looking right while inheriting the wrapper's size/colour. */
.ps-rich>p {
	margin: 0;
}

.ps-rich>p+p {
	margin-top: 1em;
}

.ps-rich a {
	text-decoration: underline;
}

.ps-rich strong,
.ps-rich b {
	font-weight: 700;
}

.ps-rich em,
.ps-rich i {
	font-style: italic;
}

.ps-rich ul,
.ps-rich ol {
	margin: .5em 0;
	padding-left: 1.25em;
	list-style: revert;
}

/* Inside the Elementor editor canvas the 100vw full-bleed pushes widgets off
   to the side (the iframe/column geometry differs from the live page), making
   sections look blank. Neutralise the bleed in the editor so every widget is
   visible and editable; the live front-end keeps the full-bleed layout. */
.elementor-editor-active [class*="elementor-widget-press-start-"]:not(.elementor-widget-press-start-partners)>.elementor-widget-container,
.elementor-editor-preview [class*="elementor-widget-press-start-"]:not(.elementor-widget-press-start-partners)>.elementor-widget-container {
	width: auto !important;
	left: auto !important;
	right: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ---------- HERO (collage + heading) — its own section ----------
   The collage is a normal-flow image at 100% width, so the section's height simply
   follows the artwork's own aspect ratio: full-bleed and perfectly proportional at
   every screen size, with nothing stretched, cropped or pinned to a fixed canvas.
   The heading is overlaid in %, so it scales in lockstep with the art. Font sizes
   are in vw for the same reason — the whole hero scales as one piece.
   (The grant card + piggy now live in their own widget; see .ps-grant-* below.) */
@media (min-width: 1024px) {
	.ps-hero-heading-wrap {
		position: absolute !important;
		left: 55%;
		top: 26%;
		margin: 0 !important;
		width: 40%;
		max-width: none !important;
		padding: 0 !important;
	}
	.ps-hero-title {
		font-size: 46px !important;   /* 54.4px at the 1440 design width */
		line-height: 1.05 !important;
		max-width: none !important;
	}
	.ps-hero-heading-wrap .ps-rich {
		font-size: 1.18vw !important;   /* 17px at the 1440 design width */
		max-width: none !important;
	}
	.ps-hero-bg-img {
		width: 100% !important;
		height: auto !important;
		max-width: none !important;
	}
}

/* ---------- GRANT ($25k card + piggy) — its own section ----------
   The card is in normal flow so the section height always follows its real content
   (text can never be clipped); the piggy is only absolutely positioned from lg up,
   and stacks underneath on smaller screens. */

/* Base colours, matching the widget's Style-control defaults. The controls override
   these through their own `selectors` rules, so changing them in Elementor still wins. */
.ps-grant-card  { background-color: #A5BAF1; }
.ps-grant-title { color: #211D1A; }
.ps-grant-body  { color: rgba(33,29,26,.8); }
.ps-grant-note  { color: rgba(33,29,26,.5); }

@media (min-width: 1024px) {
	/* Pull the grant section up into the hero's empty lower area (the artwork's bottom is
	   mostly blank), and drop its top padding, so the card sits right under the collage
	   instead of after a large gap. In vw so the overlap scales with the hero artwork —
	   a fixed px value would leave a growing gap on wider screens. Overridden by the
	   widget's "Pull Up Into Hero" control. */
	.ps-grant-sec {
		margin-top: -16vw;
	}
	.ps-grant-inner {
		padding-top: 0;
	}
	.ps-grant-piggy-wrap {
		position: absolute !important;
		top: 50% !important;
		margin: 0 !important;
		max-width: none !important;
		transform: translateY(-50%) !important;
	}
}

/* Small laptop / large tablet (1024–1279 px).
   The hero's own type no longer needs a size override here — it is sized in vw, so it
   scales down to this range on its own. */
@media (min-width: 1024px) and (max-width: 1279px) {
	/* Align Educators card exactly with Grant card */
	#educators {
		width: 100% !important;
		max-width: none !important;
	}
	#educators > div > div.reveal-left {
		margin-left: 5.6% !important;
		width: 56.6% !important;
	}
	#educators > div > img.reveal-right {
		right: 2% !important;
	}
}

@media (max-width: 1023px) {
	#program {
		padding-bottom: 80px;
	}
}

/* ---------- subfocus mobile sticky layout ---------- */
@media (max-width: 1023px) {
	.ps-subfocus-card-sticky {
		position: sticky !important;
		top: var(--mobile-top, 235px);
		z-index: calc(20 + var(--index, 0));
	}
}

/* ---------- subfocus desktop sticky + gap (replaces lg:top-[Xpx] Tailwind arbitrary classes) ---------- */
@media (min-width: 1024px) {
	.ps-sfcard-sticky {
		position: sticky;
		top: var(--sf-top, 175px);
		filter: drop-shadow(0 20px 25px rgba(33,29,26,.12));
	}
	.ps-sfcard-gap {
		margin-bottom: 12vh;
	}
}

/* ---------- subfocus hands layout fix ---------- */
.ps-subfocus__hands {
	width: 88%;
	max-width: 520px;
}
@media (min-width: 1024px) {
	.ps-subfocus__hands {
		margin-left: 0;
		margin-right: -6rem !important;
		width: 125% !important;
		max-width: none !important;
		transform: translateY(1rem) !important;
	}
}

/* ---------- subfocus card scroll reveal ---------- */
.ps-subfocus-card-sticky {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--index, 0) * 130ms),
	            transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--index, 0) * 130ms);
}
.ps-subfocus-card-sticky.in {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.ps-subfocus-card-sticky {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------- hero: force all inline-colour text to pure black ---------- */
.ps-hero-heading-wrap .ps-rich,
.ps-hero-grant-wrap h2,
.ps-hero-grant-wrap div[style*="color"],
.ps-hero-grant-wrap p {
	color: #000000 !important;
}

/* ---------- partners marquee: hover pause override ---------- */
.marquee.no-pause:hover {
	animation-play-state: running !important;
}

/* ---------- social icon images — always pure black ---------- */
img[src*="icon-linkedin"],
img[src*="icon-website"],
img[src*="icon-instagram"],
img[src*="icon-sq"],
img[src*="icon-circle"] {
	filter: brightness(0);
}

/* ---------- Royal Addons conflict fix ---------- */
body,
body.wpr-offcanvas-open,
body.wpr-offcanvas-push,
body.wpr-push-left,
body.wpr-push-right {
	-webkit-transform: none !important;
	transform: none !important;
	margin-left: 0 !important;
	left: 0 !important;
	overflow-x: hidden;
}
[class*="wpr-offcanvas"],
.wpr-offcanvas-toggle-btn,
.wpr-offcanvas-overlay {
	display: none !important;
}