/*!
 * Home page: the Sign up / Login pair.
 * ---------------------------------------------------------------------------
 * Two changes: Sign up now comes first (it is the action the site wants), and the
 * pair has a hierarchy instead of two buttons of equal weight.
 *
 *   Sign up   gold pill, dark ink - the primary action, and the event's own colour
 *   Login     glass pill, white outline - secondary, legible on the dark header
 *
 * Both are the same height and radius, so they read as one control rather than two
 * unrelated links. Hover lifts them a couple of pixels; keyboard focus gets a gold
 * ring. Loaded after the bundle - no front-end build needed.
 * ---------------------------------------------------------------------------
 */

.pg-home-index .auth-buttons {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.pg-home-index .auth-buttons > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 26px;
	border-radius: 999px;
	font-size: .9rem;
	font-weight: 800;
	letter-spacing: .02em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .16s ease, box-shadow .16s ease,
	            background-color .16s ease, border-color .16s ease, filter .16s ease;
}

/* ------------------------------------------------------------ sign up: primary */
.pg-home-index .auth-buttons .btn-signup {
	background: linear-gradient(135deg, #FCD116 0%, #f0b400 100%);
	color: #08281a;
	border: 0;
	box-shadow: 0 8px 22px rgba(240, 180, 0, .30);
}

.pg-home-index .auth-buttons .btn-signup:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(240, 180, 0, .42);
	filter: brightness(1.04);
}

/* -------------------------------------------------------------- login: secondary */
/* Login is a solid white pill with dark green ink, so it reads on a light nav bar
   and on a dark one. The previous glass treatment - white text on a translucent
   white background - was invisible wherever the bar behind it was pale. */
.pg-home-index .auth-buttons .btn-login {
	background: #ffffff;
	color: #024548;
	border: 1.5px solid rgba(2, 69, 72, .16);
	box-shadow: 0 2px 8px rgba(10, 47, 31, .10);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.pg-home-index .auth-buttons .btn-login:hover {
	background: #f2f7f3;
	border-color: rgba(2, 69, 72, .32);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(10, 47, 31, .18);
}

/* Keyboard users get the same signal as mouse users. */
.pg-home-index .auth-buttons > a:focus-visible {
	outline: 3px solid #FCD116;
	outline-offset: 3px;
}

/* Below the header's breakpoint they sit side by side, evenly. */
@media (max-width: 760px) {
	.pg-home-index .auth-buttons { display: flex; width: 100%; }
	.pg-home-index .auth-buttons > a { flex: 1; padding: 0 16px; }
}

/* ===========================================================================
   The sign-up popup
   ---------------------------------------------------------------------------
   Clicking Sign up asks the one question that matters - alone, or bringing others -
   without leaving the page. The sheet reuses the pair's gold/green language, closes
   on the backdrop, the X or Escape, and is hidden from assistive tech while closed
   via the [hidden] attribute rather than an opacity trick.
   =========================================================================== */

.pg-home-index .signup-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}


/* A [hidden] element must stay hidden.
   The author rule `display: flex` above beats the browser's own
   `[hidden] { display: none }`, so the popup rendered on page load with its backdrop
   over the header - which is what made the Login button look missing. This restores
   the intent, and does it without relying on CSS order. */
.pg-home-index .signup-modal[hidden] {
	display: none !important;
}

.pg-home-index .signup-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(4, 20, 14, .62);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.pg-home-index .signup-sheet {
	position: relative;
	background: #ffffff;
	border-radius: 22px;
	padding: 30px 28px 22px;
	max-width: 520px;
	width: 100%;
	max-height: 88vh;
	overflow-y: auto;
	box-shadow: 0 30px 70px rgba(4, 20, 12, .38);
	animation: signupIn .18s ease both;
}

@keyframes signupIn {
	from { opacity: 0; transform: translateY(10px) scale(.985); }
	to   { opacity: 1; transform: none; }
}

.pg-home-index .signup-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: #f2f7f3;
	color: #6b7f72;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.pg-home-index .signup-close:hover { background: #e8f1ea; color: #0f2b1e; transform: rotate(90deg); }

.pg-home-index .signup-sheet h2 {
	margin: 0 0 4px;
	font-size: 1.15rem;
	color: #0f2b1e;
}
.pg-home-index .signup-sub {
	margin: 0 0 18px;
	font-size: .85rem;
	color: #6b7f72;
}

.pg-home-index .signup-opt {
	display: block;
	border: 1.5px solid #e4ece6;
	border-radius: 16px;
	padding: 16px 18px;
	margin-bottom: 12px;
	text-decoration: none;
	color: #0f2b1e;
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.pg-home-index .signup-opt:hover {
	transform: translateY(-2px);
	border-color: rgba(11, 107, 63, .34);
	box-shadow: 0 14px 30px rgba(10, 47, 31, .12);
}
.pg-home-index .signup-opt b { display: block; font-size: 1rem; margin: 6px 0 4px; }
.pg-home-index .signup-opt span:not(.signup-tag) { display: block; font-size: .84rem; color: #33513f; }
.pg-home-index .signup-opt em {
	display: inline-block;
	margin-top: 10px;
	font-style: normal;
	font-weight: 800;
	font-size: .85rem;
	color: #006B3F;
}
.pg-home-index .signup-tag {
	display: inline-block;
	background: #f2f7f3;
	border: 1px solid #e4ece6;
	border-radius: 999px;
	padding: 3px 11px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #084C2E;
}
.pg-home-index .signup-opt.group .signup-tag { background: #fff7d6; border-color: #f0dd9a; }

.pg-home-index .signup-closed {
	background: #fffbeb;
	border: 1px solid #f0dd9a;
	border-left: 5px solid #FCD116;
	border-radius: 14px;
	padding: 16px 18px;
	font-size: .88rem;
}

.pg-home-index .signup-faq { margin: 14px 0 0; text-align: center; font-size: .82rem; color: #6b7f72; }
.pg-home-index .signup-faq a { color: #006B3F; font-weight: 700; text-decoration: none; }

@media (max-width: 560px) {
	.pg-home-index .signup-sheet { padding: 24px 18px 18px; border-radius: 18px; }
}