/*
 * The hub (clubs.overland.soccer): inland.soccer's look, standalone. The hub
 * doesn't load the club theme's stylesheet, so its values are restated here —
 * each block names where they come from in wp-content/themes/inland-soccer/src/scss.
 * Change one there, change it here.
 */

/* 1_global/_colors.scss */
:root {
	--black: #000911;
	--white: #E4EAF2;
	--blue: #107DFF;
	--lightBlue: #7F99B9;
	--lightBlack: #192227;
	--red: #ff7979;
	--green: #28df99;
}

/* 1_global/_type.scss: 16px on phones, 18px from $screen2 (750px) */
html { font-size: 16px; }
@media (min-width: 750px) { html { font-size: 18px; } }

* { box-sizing: border-box; }
html, body { margin: 0; }

body.hub {
	min-height: 100vh;
	min-height: 100svh;
	background: var(--black);
	color: var(--white);
	font-family: "sofia-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Helvetica, Arial, sans-serif;
	font-weight: 400;
	line-height: 1.25;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	isolation: isolate;
}

/* 1_global/_layout.scss: the four eased glows over the black base (35% strength),
   then a 4% grain that breaks up the gradient's banding. Copied from the build. */
body.hub::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-color: #000911;
	background-image: radial-gradient(52% 56% at 84% 60%, rgba(127, 153, 185, 0.112), rgba(127, 153, 185, 0.1008) 18%, rgba(127, 153, 185, 0.08064) 34%, rgba(127, 153, 185, 0.056) 48%, rgba(127, 153, 185, 0.0336) 62%, rgba(127, 153, 185, 0.01456) 74%, rgba(127, 153, 185, 0.00448) 86%, rgba(127, 153, 185, 0) 100%), radial-gradient(40% 62% at 4% 40%, rgba(127, 153, 185, 0.084), rgba(127, 153, 185, 0.0756) 18%, rgba(127, 153, 185, 0.06048) 34%, rgba(127, 153, 185, 0.042) 48%, rgba(127, 153, 185, 0.0252) 62%, rgba(127, 153, 185, 0.01092) 74%, rgba(127, 153, 185, 0.00336) 86%, rgba(127, 153, 185, 0) 100%), radial-gradient(42% 42% at 26% 12%, rgba(127, 153, 185, 0.0595), rgba(127, 153, 185, 0.05355) 18%, rgba(127, 153, 185, 0.04284) 34%, rgba(127, 153, 185, 0.02975) 48%, rgba(127, 153, 185, 0.01785) 62%, rgba(127, 153, 185, 0.007735) 74%, rgba(127, 153, 185, 0.00238) 86%, rgba(127, 153, 185, 0) 100%), radial-gradient(110% 60% at 50% -12%, rgba(9, 30, 55, 0.1925), rgba(9, 30, 55, 0.17325) 18%, rgba(9, 30, 55, 0.1386) 34%, rgba(9, 30, 55, 0.09625) 48%, rgba(9, 30, 55, 0.05775) 62%, rgba(9, 30, 55, 0.025025) 74%, rgba(9, 30, 55, 0.0077) 86%, rgba(9, 30, 55, 0) 100%);
}
body.hub::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.04;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 240px 240px;
}

a { color: var(--blue); }
strong { font-weight: 800; color: var(--white); }   /* the kit serves Sofia Pro 400 and 800 */

/* The Overland Soccer Clubs badge, top centre: 116px, 92px on phones (Jon's call). */
.hubHeader { display: flex; justify-content: center; padding: 1.5rem 1rem 0; }
.hubLogo { display: block; border-radius: 50%; }
.hubLogo img { display: block; width: 92px; height: 92px; }
@media (min-width: 750px) { .hubLogo img { width: 116px; height: 116px; } }
.hubLogo:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }

.hubMain { display: flex; justify-content: center; padding: 1.5rem 1rem 3rem; }

/* The panel mixin: quarter-strength $lightBlack, brightened backdrop, 52px corners */
.hubCard {
	width: 100%;
	max-width: 620px;
	padding: 2rem 1.25rem;
	border-radius: 40px;
	background: rgba(25, 34, 39, .25);
	backdrop-filter: brightness(110%);
	-webkit-backdrop-filter: brightness(110%);
}
@media (min-width: 750px) { .hubCard { padding: 2.333rem; border-radius: 52px; } }

/* h1: 38px on phones, 42px up — regular weight, as every inland page title */
.hubCard h1 { margin: 0 0 .4em; font-size: 38px; font-weight: 400; line-height: 1.15em; text-wrap: balance; }
@media (min-width: 750px) { .hubCard h1 { font-size: 42px; } }

/* p: $lightBlue at 1.25em */
.hubCard p { margin: 0 0 1em; line-height: 1.25em; color: var(--lightBlue); }
.hubCard p:last-child { margin-bottom: 0; }
.hubLead { margin-bottom: 1.333rem !important; }

.hubAlert { padding: .667rem .889rem; border-radius: 12px; background: rgba(255, 121, 121, .12); color: var(--red) !important; }

/* ── The signup form: the Player Profile's fields (5_components/_page-account.scss) ── */
.hubForm fieldset { border: 0; padding: 0; margin: 0 0 1.333rem; min-width: 0; }
/* Section eyebrows: the home page's (10.5px, 800, letter-spaced) */
.hubForm legend { padding: 0 0 0 .5rem; margin-bottom: .889rem; font-size: .583rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }

/* Field labels: 11px uppercase $lightBlue, 9px in so their ink sits just left of the value's */
.hubField { display: block; margin-bottom: .889rem; font-size: .611rem; font-weight: 400; line-height: 1.2em; text-transform: uppercase; color: var(--lightBlue); text-indent: .5rem; }
.hubField > * { text-indent: 0; text-transform: none; }

/* The dark input surface: rgba($black, .6), 12px corners, 42px tall, a ring while editing */
.hubField input:not([type=checkbox]),
.hubField select,
.hubSlug {
	display: block;
	width: 100%;
	min-height: 2.333rem;
	margin-top: .5rem;
	padding: .389rem .722rem;
	border: 0;
	border-radius: .667rem;
	background: rgba(0, 9, 17, .6);
	color: var(--white);
	font: inherit;
	font-size: 1.111rem;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	transition: box-shadow 200ms ease;
}
.hubField input:focus,
.hubField select:focus,
.hubSlug:focus-within { outline: none; box-shadow: inset 0 0 0 1px rgba(127, 153, 185, .4); }
.hubField input::placeholder { color: rgba(127, 153, 185, .5); }
.hubField input[readonly] { color: var(--lightBlue); }

/* The select: inland's dropdown chevron, as a mask so it takes the text colour */
.hubField select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.333rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237F99B9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .833rem center;
	background-size: .667rem auto;
	cursor: pointer;
}
.hubField select option { color: #000911; }

/* The web address: the subdomain input and its fixed ".overland.soccer" tail in one box */
.hubSlug { display: flex; align-items: center; padding: 0; }
.hubSlug input { margin: 0 !important; min-width: 0; flex: 1 1 auto; background: none !important; box-shadow: none !important; }
.hubSlug__base { padding-right: .722rem; font-size: 1.111rem; color: var(--lightBlue); white-space: nowrap; }

.hubRow { display: grid; gap: 0 .667rem; }
@media (min-width: 560px) { .hubRow { grid-template-columns: 1fr 1fr; } }

.hubField__hint,
.hubField__error { display: block; margin: .5rem 0 0; padding-left: .5rem; font-size: .722rem; line-height: 1.3em; letter-spacing: 0; text-transform: none; color: var(--lightBlue); }
.hubField__hint.is-ok { color: var(--green); }
.hubField__hint.is-bad,
.hubField__error { color: var(--red); }

.hubCheck { display: flex; gap: .667rem; align-items: flex-start; margin: .444rem 0 1.333rem; font-size: .889rem; line-height: 1.3em; color: var(--lightBlue); }
/* The checkbox: the dark field surface, filling with the accent when ticked */
.hubCheck input {
	flex: none;
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	margin: 0;
	border-radius: 6px;
	background: rgba(0, 9, 17, .6);
	box-shadow: inset 0 0 0 1.5px rgba(127, 153, 185, .5);
	cursor: pointer;
}
.hubCheck input:checked {
	box-shadow: none;
	background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23E4EAF2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 50% 50% / 13px;
}
.hubCheck input:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

/* The button: 5_components/_btn.scss — btn($accent, $white, $white, $black) */
.hubBtn {
	display: inline-block;
	padding: 17px 18px;
	border: none;
	border-radius: 20px;
	background: var(--blue);
	color: var(--white);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1em;
	text-decoration: none;
	cursor: pointer;
	transition: all 300ms ease-in-out;
}
.hubBtn:hover { background: var(--white); color: var(--black); }
.hubBtn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

.hubSpinner { width: 36px; height: 36px; border-radius: 50%; border: 4px solid rgba(127, 153, 185, .3); border-top-color: var(--blue); animation: hubSpin 1s linear infinite; }
@keyframes hubSpin { to { transform: rotate(360deg); } }

.hubFooter { padding: 0 1rem 2rem; text-align: center; font-size: .667rem; color: var(--lightBlue); }

@media (prefers-reduced-motion: reduce) {
	.hubSpinner { animation: none; }
	.hubBtn, .hubField input, .hubField select, .hubSlug { transition: none; }
}