/**
 * GPR — First Birthday Sale banner (TEMPORARY — remove after 20 Aug 2026).
 *
 * Enqueued from functions.php only while gpr_birthday_sale_is_active() is
 * true, so after the offer closes this file simply stops loading. Safe to
 * delete the whole file + the "FEATURE — First Birthday Sale" block in
 * functions.php + the one render call in header.php once the sale is over.
 *
 * Variants (set on .gpr-bday by functions.php):
 *   .gpr-bday--sale    — logged-in, NOT a lifetime member: offer + countdown
 *   .gpr-bday--thanks  — lifetime member: thank-you message, no CTA
 *
 * The party hat + fireworks key off body.gpr-birthday (added via body_class
 * while the sale is active) so they disappear with the sale too.
 */

/* ---------------------------------------------------------------- banner bar */

.gpr-bday {
	position: relative;
	overflow: hidden;
	z-index: 101;                    /* above .gpr-site-header (100) */
	background:
		radial-gradient(120% 180% at 8% -40%,  rgba(255, 94, 138, 0.22), transparent 55%),
		radial-gradient(120% 180% at 92% -40%, rgba(77, 176, 255, 0.20), transparent 55%),
		#0E1114;
	border-bottom: 1px solid rgba(255, 201, 77, 0.35);
	color: #FFFFFF;
	font-family: inherit;
}

.gpr-bday__inner {
	position: relative;              /* sits above the fireworks layer */
	z-index: 2;
	max-width: 1200px;
	margin: 0 auto;
	padding: 8px 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 16px;
	text-align: center;
}

/* Desktop: the sale variant stays on ONE line — content is progressively
   trimmed at narrower widths (see the breakpoints below) instead of wrapping. */
@media (min-width: 701px) {
	.gpr-bday--sale .gpr-bday__inner { flex-wrap: nowrap; }
	.gpr-bday__msg { white-space: nowrap; }
}
@media (min-width: 701px) and (max-width: 1120px) {
	.gpr-bday__kicker { display: none; }     /* "We're 1!" lives in the CTA row's cake emoji + offer page */
}
@media (min-width: 701px) and (max-width: 900px) {
	.gpr-bday__count-label { display: none; } /* keep just the ticking digits */
}
@media (min-width: 701px) and (max-width: 840px) {
	.gpr-bday__msg-extra { display: none; }   /* price + CTA + digits only */
}

.gpr-bday__kicker {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #FFC94D;
	white-space: nowrap;
}

.gpr-bday__msg {
	font-size: 14px;
	font-weight: 500;
	color: #E6E7EB;
	line-height: 1.35;
}
.gpr-bday__msg strong {
	color: #FFFFFF;
	font-weight: 800;
}

.gpr-bday__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 16px;
	border-radius: 999px;
	background: #FFC94D;
	color: #14161B !important;
	font-size: 13px;
	font-weight: 800;
	text-decoration: none !important;
	white-space: nowrap;
	box-shadow: 0 0 0 0 rgba(255, 201, 77, 0.55);
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.gpr-bday__cta:hover {
	background: #FFD97A;
	transform: translateY(-1px);
	box-shadow: 0 4px 18px rgba(255, 201, 77, 0.35);
	color: #14161B !important;
}

/* ------------------------------------------------------------------ countdown */

.gpr-bday__count {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	color: #9AA0AA;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.gpr-bday__count b {
	display: inline-block;
	min-width: 2ch;
	padding: 2px 5px;
	border-radius: 6px;
	background: #1F2229;
	border: 1px solid #2A2E37;
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 800;
	text-align: center;
	line-height: 1.2;
}
.gpr-bday__count small {
	font-size: 10px;
	font-weight: 700;
	color: #9AA0AA;
	margin-right: 2px;
}

/* --------------------------------------------------------- thank-you variant */

.gpr-bday--thanks .gpr-bday__msg { font-size: 14px; }
.gpr-bday--thanks {
	border-bottom-color: rgba(77, 176, 255, 0.35);
}

/* Thank-you variant CTA — blue to match the 💙 accent, not the gold sale CTA. */
.gpr-bday__cta--thanks {
	background: #1683E0;
	color: #FFFFFF !important;
	box-shadow: 0 0 0 0 rgba(22, 131, 224, 0.55);
}
.gpr-bday__cta--thanks:hover {
	background: #2E97F0;
	color: #FFFFFF !important;
	box-shadow: 0 4px 18px rgba(22, 131, 224, 0.4);
}

/* ------------------------------------------------------------------ fireworks */

.gpr-bday__fx {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.gpr-bday__fx i {
	position: absolute;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	/* 8 particles flung out from the centre dot */
	box-shadow:
		0 -16px 0 currentColor,  11px -11px 0 currentColor,
		16px 0 0 currentColor,   11px 11px 0 currentColor,
		0 16px 0 currentColor,  -11px 11px 0 currentColor,
		-16px 0 0 currentColor, -11px -11px 0 currentColor;
	transform: scale(0);
	opacity: 0;
	animation: gpr-bday-burst 3.2s ease-out infinite;
}
.gpr-bday__fx i:nth-child(1) { left: 6%;  top: 42%; color: #FFC94D; animation-delay: 0s; }
.gpr-bday__fx i:nth-child(2) { left: 16%; top: 22%; color: #FF5E8A; animation-delay: 1.1s; }
.gpr-bday__fx i:nth-child(3) { left: 84%; top: 30%; color: #4DB0FF; animation-delay: 0.5s; }
.gpr-bday__fx i:nth-child(4) { left: 93%; top: 55%; color: #FFC94D; animation-delay: 1.7s; }
.gpr-bday__fx i:nth-child(5) { left: 72%; top: 65%; color: #FF5E8A; animation-delay: 2.3s; }
.gpr-bday__fx i:nth-child(6) { left: 28%; top: 68%; color: #4DB0FF; animation-delay: 2.8s; }

@keyframes gpr-bday-burst {
	0%   { transform: scale(0);    opacity: 0; }
	12%  { transform: scale(0.55); opacity: 1; }
	28%  { transform: scale(1);    opacity: 0.85; }
	45%  { transform: scale(1.35); opacity: 0; }
	100% { transform: scale(1.35); opacity: 0; }
}

/* ------------------------------------------------- party hat on the GPR logo */

/* The party-hat logo is the bundled assets/gpr-logo-birthday.svg, swapped in
   by header.php while the sale is active. Its canvas is 470 units tall vs the
   normal logo's 324 (the extra 146 units on top hold the hat), so scale it by
   470/324 ≈ 1.451 and pull it up by 146/324 ≈ 0.451 of the logo height — the
   pick + wordmark render EXACTLY the size of the normal logo, and the hat
   pokes above the header bar just like a sticker. */
.gpr-logo img.gpr-logo-birthday {
	max-height: calc(var(--gpr-logo-h, 60px) * 1.451);
	margin-top: calc(var(--gpr-logo-h, 60px) * -0.451);
}
/* Let the hat overlap the sale bar above instead of hiding behind it. The
   header is its own stacking context (z-index 100) so raising just the logo
   can't beat the banner (101) — raise the whole header during the sale. The
   two never overlap except where the hat pokes up, so nothing else changes. */
body.gpr-birthday .gpr-site-header {
	z-index: 102;
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 700px) {
	.gpr-bday__inner { padding: 9px 14px; gap: 6px 12px; }
	/* Long lines must wrap on small screens, not clip. */
	.gpr-bday__kicker,
	.gpr-bday__msg { white-space: normal; min-width: 0; max-width: 100%; }
	.gpr-bday__kicker { font-size: 10px; }
	.gpr-bday__msg { font-size: 13px; }
	.gpr-bday__cta { font-size: 12px; padding: 6px 14px; }
	.gpr-bday__count { font-size: 11px; }
	.gpr-bday__count b { font-size: 12px; }
	/* Fireworks get busy on small screens — keep two bursts only. */
	.gpr-bday__fx i:nth-child(n+3) { display: none; }
}

/* The mobile header (≤900px, matching gpr-header.css) clamps the logo to
   min(--gpr-logo-h, 46px) — clamp the hat logo off the same base. */
@media (max-width: 900px) {
	.gpr-logo img.gpr-logo-birthday {
		max-height: calc(min(var(--gpr-logo-h, 60px), 46px) * 1.451);
		margin-top: calc(min(var(--gpr-logo-h, 60px), 46px) * -0.451);
	}
}

/* -------------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
	.gpr-bday__fx { display: none; }
	.gpr-bday__cta { transition: none; }
	.gpr-bday__cta:hover { transform: none; }
}