/* ==========================================================================
   Gratituity.com — site styles
   Order: tokens > base > layout > hero + nav > sections > footer > modal + cards
   ========================================================================== */

:root {
	--bg: #ecfefe;
	--ink: #5b5b5b;
	--heading: #483949;
	--teal: #4a9d9d;
	--coral: #df7366;
	--coral-hover: #ef8376;
	--plum: #2b252c;
	--max: 1200px;
	--pad: clamp(1rem, 4vw, 2rem);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 1rem; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: 'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;
	font-weight: 300;
	font-size: clamp(12pt, 9pt + 0.55vw, 15pt);
	line-height: 1.7;
	-webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0 0 0.5em; color: var(--heading); font-weight: 400; line-height: 1.25; }
h2 { font-size: 2.6em; }
h3 { font-size: 1.25em; }
p { margin: 0 0 1em; }
strong, b { font-weight: 600; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--coral-hover); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

.sr-only {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Buttons ---------- */
.button {
	display: inline-block;
	background: var(--coral);
	color: #fff;
	border: 0;
	border-radius: 0.5em;
	padding: 0.65em 2.5em;
	font: inherit;
	font-weight: 300;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.button:hover { background: var(--coral-hover); color: #fff; }

/* ---------- Layout ---------- */
.container { width: min(var(--max), 100% - 2 * var(--pad)); margin-inline: auto; }
.section { padding: 4.5rem 0 2rem; }

.section-head { text-align: center; margin-bottom: 2.5rem; }
.section-head h3 { margin-bottom: 1rem; }
.divider {
	height: 12px; border: 0; margin: 0 auto;
	background-image: linear-gradient(to right, transparent, #888, transparent);
}

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: 2rem;
}
.card {
	background: #ecfefe;
	border-radius: 0.75rem;
	padding: 1.75rem;
	box-shadow: 0 2px 12px rgba(72, 57, 73, 0.08);
}
.card-centered { text-align: center; }
.card-icon { display: block; font-size: 3.5rem; color: var(--teal); margin-bottom: 0.5rem; }
.card-logo { display: block; margin: 0 auto; max-height: 8rem; width: auto; }

/* ---------- Hero + nav ---------- */
.hero {
	position: relative;
	isolation: isolate;
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	place-items: center;
	padding: 5.5rem var(--pad) 2.5rem;
	background: var(--teal) url("../images/header-gradient.jpg") center / cover no-repeat;
	color: #fff;
	text-align: center;
}

/* Dark overlay that fades away once the page has loaded (see js/app.js) */
.hero::after {
	content: "";
	position: absolute; inset: 0; z-index: 0;
	background: #1c0920;
	opacity: 0;
	pointer-events: none;
	transition: opacity 2.5s ease-in-out;
}
.is-preload .hero::after { opacity: 1; transition: none; }

.hero-content {
	position: relative; z-index: 1;
	display: flex; flex-direction: column; align-items: center;
	gap: clamp(1rem, 4vh, 2.5rem);
}
.hero-logo {
	display: block;
	width: auto; height: auto;
	max-width: min(1100px, 92vw);
	max-height: 50vh;
	max-height: 50svh;
}
.start-button {
	display: grid; place-items: center;
	width: 6rem; height: 6rem;
	border-radius: 50%;
	background: var(--coral);
	color: #fff;
	font-size: 1.5rem;
	transition: background-color 0.3s ease;
}
.start-button:hover { background: var(--coral-hover); color: #fff; }

.site-nav {
	position: absolute; top: 0; left: 0; right: 0; z-index: 2;
	padding: 1.25rem var(--pad);
	text-align: center;
}
.site-nav ul {
	display: inline-flex; flex-wrap: wrap; justify-content: center;
	padding: 0.25rem 0.5rem;
	border-inline: 1px solid rgba(192, 192, 192, 0.35);
}
.site-nav li a {
	display: block;
	margin: 0 0.4rem;
	padding: 0.35rem 0.85rem;
	border: 1px solid transparent;
	border-radius: 0.5rem;
	color: #fff;
	transition: color 0.3s ease, border-color 0.3s ease;
}
.site-nav li a:hover { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.nav-toggle { display: none; }

/* ---------- Page sections ---------- */
.intro { background: #ecfefe; text-align: center; padding: 4.5rem var(--pad); }
.intro p { max-width: 42rem; margin-inline: auto; }
.intro strong { font-weight: 600; }

.video-section { padding: 2rem var(--pad); }
.video-frame {
	width: 100%; max-width: 960px;
	aspect-ratio: 16 / 9;
	margin: 0 auto;
	background: #000;
	border-radius: 0.5rem;
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

.video-play {
	position: relative; display: block;
	width: 100%; height: 100%;
	padding: 0; border: 0;
	background: #000; cursor: pointer;
}
.video-play img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-play-icon {
	position: absolute; top: 50%; left: 50%;
	width: 68px; height: 48px;
	transform: translate(-50%, -50%);
	border-radius: 14px;
	background: rgba(33, 33, 33, 0.85);
	transition: background-color 0.2s ease;
}
.video-play-icon::before {
	content: "";
	position: absolute; top: 50%; left: 50%;
	transform: translate(-40%, -50%);
	border: solid transparent; border-width: 10px 0 10px 18px;
	border-left-color: #fff;
}
.video-play:hover .video-play-icon,
.video-play:focus-visible .video-play-icon { background: #f00; }

/* How it works: video + handbook side by side, stacked on small screens */
.how-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
	max-width: var(--max);
	margin: 0 auto;
	align-items: start;
}
@media (max-width: 736px) { .how-grid { grid-template-columns: minmax(0, 1fr); } }
.how-card { display: grid; gap: 0.5rem; text-align: center; min-width: 0; }
.how-card h3 { margin: 0.5rem 0 0; color: var(--heading); }
.how-tag {
	justify-self: center;
	font-size: 0.75em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
	color: #fff; background: var(--coral);
	padding: 0.2em 0.7em; border-radius: 999px;
}
.how-card p { margin: 0; }
.handbook-open {
	display: grid; place-items: center; align-content: center; gap: 0.75rem;
	width: 100%; aspect-ratio: 16 / 9;
	border: 0; border-radius: 0.5rem;
	background: var(--teal); color: #fff;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	cursor: pointer; font: inherit;
	transition: background-color 0.2s ease;
}
.handbook-open .fa-book-open { font-size: clamp(3rem, 8vw, 5rem); }
.handbook-open-label { font-weight: 600; font-size: 1.1rem; }
.handbook-open:hover, .handbook-open:focus-visible { background: #3d8585; }

/* Handbook pop-up */
.handbook-modal {
	position: fixed; inset: 0;
	background: rgba(20, 78, 74, 0.65);
	z-index: 9999;
	display: flex; align-items: center; justify-content: center;
	padding: 1rem;
}
.handbook-modal[hidden] { display: none; }
.handbook-modal-inner {
	position: relative;
	width: 100%; max-width: 1600px;
	height: calc(100vh - 2rem);
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.handbook-frame { display: block; width: 100%; height: 100%; border: 0; }
.handbook-modal-close {
	position: absolute; top: 0.5rem; right: 0.75rem; z-index: 1;
	width: 2.25rem; height: 2.25rem;
	border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, 0.9); color: var(--heading);
	font-size: 1.6rem; line-height: 1; cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.handbook-modal-close:hover, .handbook-modal-close:focus-visible { background: #fff; color: var(--coral); }
body.handbook-open-lock { overflow: hidden; }

.status { text-align: center; }

/* Fundraiser cards are rendered into this grid by js/app.js */
.fundraiser-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 22rem));
	justify-content: center;
	gap: 2rem;
}

/* ---------- Footer ---------- */
.site-footer {
	margin-top: 4rem;
	padding: 5rem 0 3rem;
	background: var(--plum);
	color: #fff;
	text-align: center;
}
.site-footer h3 { color: #fff; }
.donate-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 3rem; }
.site-footer .contact { padding-top: 3rem; border-top: 1px solid rgba(192, 192, 192, 0.25); }
.social {
	display: inline-flex; gap: 0.25rem;
	padding: 0.35rem 0.75rem;
	border-radius: 4rem;
	background: rgba(255, 255, 255, 0.07);
	font-size: 1.25rem;
}
.social a {
	display: grid; place-items: center;
	width: 2.5rem; height: 2.5rem;
	border-radius: 50%;
	color: #fff;
}
.social a:hover { color: var(--coral-hover); }
.legal { margin-top: 3rem; color: rgba(255, 255, 255, 0.55); font-size: 0.8em; }
.legal p { margin: 0 0 0.5em; }

/* ---------- Small screens ---------- */
@media (max-width: 736px) {
	h2 { font-size: 2em; }
	.start-button { width: 5rem; height: 5rem; font-size: 1.25rem; }
	.hero { padding-top: 4.5rem; }

	.site-nav { padding: 0; }
	.nav-toggle {
		display: block;
		position: absolute; top: 0.75rem; right: 0.75rem;
		padding: 0.4rem 1rem;
		background: rgba(43, 37, 44, 0.75);
		color: #fff; border: 0; border-radius: 0.5rem;
		font: inherit; cursor: pointer;
	}
	.site-nav ul {
		display: none;
		position: absolute; top: 3.5rem; left: 0.75rem; right: 0.75rem;
		flex-direction: column;
		padding: 0.5rem;
		border: 0; border-radius: 0.75rem;
		background: var(--plum);
	}
	.site-nav ul.is-open { display: flex; }
	.site-nav li a { margin: 0; padding: 0.75rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ==========================================================================
   Donation modal + fundraiser cards (carried over unchanged)
   ========================================================================== */

/* Donation Modal */
.donation-modal {
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(20,78,74,0.65);
	z-index: 9999;
	align-items: flex-start;
	justify-content: center;
	overflow-y: auto;
	padding: 1rem;
}

.donation-modal-inner {
	background: #ecfefe;
	border-radius: 12px;
	width: 100%;
	max-width: 27em;
	margin: auto;
	font-size: clamp(12pt, 9pt + 0.55vw, 15pt);
	position: relative;
	padding-bottom: 1.5em;
}

.donation-tabs {
	display: flex;
	border-radius: 12px 12px 0 0;
	overflow: hidden;
}

.donation-tab {
	flex: 1;
	text-align: center;
	padding: 0.9em 0;
	font-size: 0.97em;
	font-weight: 500;
	text-decoration: none;
	position: relative;
	background: #ecfefe;
	color: #9bb3b1;
}

.donation-tab-active {
	background: #137e83;
	color: #ffffff;
}

.donation-tab-label {
	position: absolute;
	bottom: 2px;
	right: 8px;
	font-size: 0.71em;
	color: #cce5e3;
	font-style: italic;
}

.donation-bubble {
	position: absolute;
	top: -56px;
	right: 8px;
	background: #144e4a;
	color: #ffffff;
	font-size: 0.83em;
	padding: 8px 12px;
	border-radius: 8px;
	max-width: 13em;
	line-height: 1.4;
	display: none;
}

.donation-panel {
	display: none;
	padding: 1.5em;
}

.donation-panel-active {
	display: block;
}

.donation-label {
	font-size: 0.90em;
	color: #5f5e5a;
	margin: 0 0 0.4em;
}

.donation-frequency {
	display: flex;
	gap: 6px;
	margin-bottom: 1em;
}

.donation-freq-option {
	flex: 1;
	text-align: center;
	padding: 0.4em 0;
	border-radius: 6px;
	background: #e8f3f2;
	color: #144e4a;
	font-size: 0.83em;
	text-decoration: none;
}

.donation-freq-active {
	background: #137e83;
	color: #ffffff;
	font-weight: 500;
}

.donation-amount-wrap {
	position: relative;
	margin-bottom: 1em;
}

.donation-currency-prefix {
	position: absolute;
	left: 0.75em;
	top: 50%;
	transform: translateY(-50%);
	color: #144e4a;
	font-size: 1.10em;
	pointer-events: none;
}

.donation-amount-input {
	width: 100%;
	border: 1px solid #6ab2ad;
	border-radius: 6px;
	padding: 0.65em 0.75em 0.65em 1.5em;
	font-size: 1.10em;
	color: #144e4a;
	box-sizing: border-box;
}

.donation-fee-line, .donation-total-line {
	display: flex;
	justify-content: space-between;
	font-size: 0.90em;
	color: #5f5e5a;
	margin-bottom: 0.6em;
}

.donation-total-line {
	font-size: 1.03em;
	font-weight: 500;
	color: #144e4a;
	border-top: 1px solid #cce5e3;
	padding-top: 0.7em;
	margin-top: 0.5em;
	margin-bottom: 1em;
}

.donation-checkbox-line {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.90em;
	color: #5f5e5a;
	margin-bottom: 0.8em;
}

.donation-checkbox-line label {
	flex: 1;
}

.donation-tooltip {
	width: 1.3em;
	height: 1.3em;
	border-radius: 50%;
	background: #cce5e3;
	color: #144e4a;
	font-size: 0.84em;
	text-align: center;
	line-height: 1.3em;
	cursor: help;
	flex-shrink: 0;
}

.donation-checkout-btn {
	display: block;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
}

.donation-legal-links {
	text-align: center;
	font-size: 0.76em;
	color: #9bb3b1;
	margin-top: 1em;
}

.donation-legal-links a {
	color: #9bb3b1;
}

.donation-checkbox-line input[type="checkbox"] {
	-webkit-appearance: checkbox;
	-moz-appearance: checkbox;
	appearance: checkbox;
	width: 1.1em;
	height: 1.1em;
	flex-shrink: 0;
}
.donation-checkout-btn.donation-checkout-disabled {
	opacity: 0.4;
	pointer-events: none;
	cursor: not-allowed;
}		
.donation-modal-close {
	position: absolute;
	top: 0.5em;
	right: 0.75em;
	font-size: 1.66em;
	line-height: 1;
	color: #9bb3b1;
	cursor: pointer;
}
/* Card shell — one fundraiser = one card */
.fundraiser-card {
	background: #ecfefe;
	border-radius: 12px;
	border: 1px solid #e2e2e2;
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Top image area of the card. Fixed height so cards line up evenly
in a grid even when descriptions vary in length. */
.fundraiser-media {
	position: relative;
	width: 100%;
	height: 250px;
	background: #f4f4f2;
	overflow: hidden;
	flex-shrink: 0
}

.fundraiser-media img {
	width: 100%;
	height: 100%;
	object-fit: contain; /* crops to fill the box instead of squishing */
	background: #f4f4f2; /* fills empty space with the card's neutral bg */
	display: block;
}

/* Shown instead of an image when a fundraiser has zero pictures set */
.fundraiser-media-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
	font-size: 13px;
}

/* Pending / active status badge, floats over the top-left of the image */
.fundraiser-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 20px;
}

.fundraiser-badge-pending {
	background: #FAEEDA; /* soft amber */
	color: #854F0B;
}

.fundraiser-badge-approved {
	background: #EAF3DE; /* soft green */
	color: #27500A;
}

/* Small dots at the bottom of the image showing how many pictures
exist. Currently decorative only — no click/swipe behavior yet.
Only rendered by the JS if 2+ pictures actually exist. */
.fundraiser-gallery-dots {
	position: absolute;
	bottom: 10px;
	left: 12px;
	display: flex;
	gap: 5px;
}

.fundraiser-gallery-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255,255,255,0.5);
}

.fundraiser-gallery-dot.is-active {
	background: #ffffff;
}

/* Text content area below the image */
.fundraiser-body {
	padding: 1.25rem 1.5rem;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.fundraiser-title {
	font-size: 30px;
	font-weight: 600;
	line-height: 1.35em;
	margin: 0 0 6px;
}

.fundraiser-desc {
	font-size: 17px;
	color: #555;
	margin: 0 0 4px;
	line-height: 1.4;
	flex-grow: 1;
}

/* "$X raised" / "of $Y" line directly above the progress bar */
.fundraiser-progress-row {
	display: flex;
	justify-content: space-between;
	font-size: 22px;
	margin-bottom: 6px;
}

.fundraiser-progress-raised {
	font-weight: 600;
}

.fundraiser-progress-goal {
	color: #666;
}

/* Progress bar track + fill. Fill width is set inline via JS
based on raised/goal percentage. */
.fundraiser-progress-bar-container {
	width: 100%;
	height: 8px;
	border-radius: 20px;
	background: #f4f4f2;
	overflow: hidden;
}

.fundraiser-progress-bar-fill {
	height: 100%;
	background: #1D9E75;
	transition: width 0.4s ease;
}

/* Footer — replaces what used to be a donate button. Donations
happen site-wide, not per-fundraiser, so this is just a small
trust/status line now, nothing clickable. */
.fundraiser-footer {
	margin-top: 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 11px;
	color: #999;
}

.fundraiser-verified {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* --------------------------------------------------------------
FUTURE FIELDS (not in this deploy):
When stretchGoals and updates exist in Webiny, their CSS classes
(.fundraiser-stretch-goals, .fundraiser-updates, etc.) can be
pulled back from the earlier draft file and dropped in here —
nothing about this current CSS needs to change to accommodate
them later, they just add new sections to .fundraiser-body.
-------------------------------------------------------------- */