/* ==========================================================================
   Payroll Oasis — custom CSS
   Only for things theme.json genuinely can't express. Every color below
   references a theme.json preset variable, so if the palette changes in
   Appearance > Editor > Styles, these shapes update automatically.
   ========================================================================== */

/* --- Signature element: the river wave divider ---------------------------
   A winding-river callback to the flyer, dropped between sections instead
   of a plain <hr>. Two variants (into teal / out of teal) so it reads
   correctly whichever section color sits above and below it. */

.oasis-wave {
	display: block;
	width: 100%;
	height: clamp(40px, 6vw, 90px);
	line-height: 0;
}

.oasis-wave svg {
	width: 100%;
	height: 100%;
	display: block;
}

.oasis-wave--teal-up path {
	fill: var(--wp--preset--color--river-teal);
}

.oasis-wave--cream-up path {
	fill: var(--wp--preset--color--sand-cream);
}

.oasis-wave--dusk-up path {
	fill: var(--wp--preset--color--palm-dusk);
}

/* --- Hero gradient text treatment -----------------------------------------
   Gives the hero headline the same sunset-into-gold blend as "OASIS"
   on the flyer, since a flat text color would flatten the reference. */

.oasis-hero-title {
	background: var(--wp--preset--gradient--sunset-sky);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: none;
}

/* --- Countdown block -------------------------------------------------------
   Structural styling only; numbers are populated by countdown.js. */

.oasis-countdown {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem;
}

.oasis-countdown__unit {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 16px;
	padding: 1rem 1.5rem;
	min-width: 96px;
	text-align: center;
	backdrop-filter: blur(6px);
}

.oasis-countdown__number {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 700;
	color: var(--wp--preset--color--white);
	line-height: 1;
}

.oasis-countdown__label {
	display: block;
	margin-top: 0.35rem;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--golden-hour);
}

/* --- Keynote / speaker cards ------------------------------------------- */

.oasis-speaker-card {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
}

.oasis-speaker-card img {
	transition: transform 0.4s ease;
}

.oasis-speaker-card:hover img {
	transform: scale(1.04);
}

/* --- Petal/leaf rounded corners for feature cards, echoing the flyer's
   hibiscus flowers rather than generic square or fully-round corners. --- */

.oasis-petal-card {
	border-radius: 42px 12px 42px 12px;
}

/* --- Respect reduced motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.oasis-speaker-card img {
		transition: none;
	}
}