/* Camps.
   Inputs/labels reuse .reg-field from register-form.css (loaded site-wide,
   see inc/enqueue.php) rather than redefining them here -- this file only
   covers what a registration form doesn't already have: the index card
   grid, the hero/price tiles, the position/day chip pickers, and the tier
   toggle. */

/* Balances a long field label (e.g. "Allergies, medical conditions, or
   anything else we should know") across however many lines it wraps to
   on a narrow screen, instead of a lopsided first line with one short
   word stranded on the next. Scoped to this file, not added to
   .reg-field label itself in register-form.css, since that rule is
   shared site-wide and this wasn't asked for anywhere else. */
.camps-form .reg-field label {
	text-wrap: balance;
}

/* --- Hero banner ------------------------------------------------------
   Full-bleed dark band, both logos centered side by side, same idea as
   the confirmation email's header. object-fit: contain, not cover --
   these are two logo marks of different native proportions, not a
   single photo meant to fill the band; cropping either would look
   broken rather than just differently sized. */
.camps-banner {
	background: var(--void, #0b1220);
	border-bottom: 1px solid var(--onyx);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	padding: 28px 24px;
}

.camps-banner-logo {
	height: 72px;
	width: auto;
	max-width: 42%;
	object-fit: contain;
}

@media (max-width: 640px) {

	.camps-banner {
		gap: 18px;
		padding: 20px 16px;
	}

	.camps-banner-logo {
		height: 48px;
	}

}

.camps-back {
	margin-bottom: 14px;
}

.camps-back a {
	color: var(--smoke);
	font-family: var(--mono);
	font-size: 12px;
	text-decoration: none;
}

.camps-back a:hover {
	color: var(--accent);
}

.camps-hero,
.camps-index-hero {
	padding-top: 12px;
	text-align: center;
}

.camps-eyebrow {
	font-family: var(--mono);
	color: var(--accent);
}

.camps-headline {
	font-family: var(--display);
	font-size: clamp(2.6rem, 6vw, 4.2rem);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--white);
	margin: 8px 0 28px;
	/* Lets the browser pick where a long camp name wraps instead of
	   whatever fits per line left-to-right -- without this, a 3-word
	   title like "LW Athletics Thanksgiving Camp" could leave a single
	   orphaned word on its own line on narrow screens. Camp names are
	   ACF content, not something this file can hardcode a <br> into. */
	text-wrap: balance;
}

/* auto-fit rather than a fixed 4 columns: time/ages/full-price/day-price
   tiles are each shown only when that camp actually has a value for it, so
   a camp with just two price tiers should not leave two empty grid cells
   behind -- see camps.php, where every tile is its own `if`. */
.camps-info-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	max-width: 720px;
	margin: 0 auto;
}

.camps-tile {
	background: var(--surface);
	border: 1px solid var(--onyx);
	border-radius: 12px;
	padding: 16px 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.camps-tile-label {
	font-family: var(--mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--smoke);
}

.camps-tile-value {
	font-family: var(--display);
	font-size: 1.5rem;
	color: var(--white);
}

.camps-tile--full .camps-tile-value,
.camps-tile--one .camps-tile-value {
	color: var(--accent);
}

.camps-lunch-note {
	margin-top: 20px;
	font-size: 13px;
	color: var(--smoke);
}

.camps-location {
	max-width: 560px;
	margin: 24px auto 0;
	text-align: left;
}

.camps-address {
	font-size: 14px;
	color: var(--frost);
	margin: 0 0 10px;
}

.camps-address a {
	color: var(--accent);
	text-decoration: none;
}

/* Fixed aspect ratio rather than a hard-coded height, so the map doesn't
   look cropped or leave a dead gap on unusually wide or narrow screens. */
.camps-map {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--onyx);
}

.camps-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --- Index: the card grid on /camps/ --------------------------------- */

.camps-index-hero {
	padding-bottom: 8px;
}

.camps-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
	padding-bottom: 8px;
}

.camps-card {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--onyx);
	border-radius: 14px;
	padding: 22px;
	text-decoration: none;
	transition: border-color .15s, transform .15s;
}

.camps-card:hover {
	border-color: var(--accent);
	transform: translateY(-2px);
}

.camps-card-icon {
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background: var(--elevated);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-bottom: 16px;
}

.camps-card-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.camps-card-icon-fallback {
	font-size: 26px;
}

.camps-card-body {
	flex: 1;
}

/* Anton (var(--display)) needs positive tracking at card sizes, not
   negative -- its strokes are heavy enough that tightening them further
   makes a wrapped, all-caps title like this run together. Matches
   .team-card-title's treatment, the closest precedent on the site. */
.camps-card-title {
	font-family: var(--display);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--frost);
	margin: 0 0 6px;
}

.camps-card-eyebrow {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--accent);
	margin: 0 0 4px;
}

.camps-card-note {
	font-size: 13px;
	color: var(--smoke);
	margin: 0;
}

.camps-card-cta {
	display: inline-block;
	margin-top: 18px;
	font-family: var(--aeonik);
	font-size: 13px;
	font-weight: 600;
	color: var(--accent);
}

.camps-empty {
	color: var(--smoke);
	padding: 20px 0 40px;
}

/* --- Form ---------------------------------------------------------- */

.camps-form-wrap {
	max-width: 640px;
	margin: 48px auto 0;
}

.camps-not-live-note {
	background: #3a2a10;
	border: 1px solid #6b4a1a;
	color: #ffcf7a;
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 13px;
	margin-bottom: 24px;
}

.camps-form {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* Same trap register-form.css already hit once: the class rule above beats
   the browser's native [hidden]{display:none} at equal specificity, so
   form.hidden = true (camps.js, on a successful submission) had no visual
   effect at all -- the success panel appeared correctly on top of a form
   that never actually disappeared, still showing every filled-in field. */
.camps-form[hidden] {
	display: none;
}

.camps-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.camps-step-num {
	font-family: var(--mono);
	font-size: 13px;
	color: var(--accent);
	margin: 0 0 4px;
}

/* Same fix as .camps-card-title: Anton needs positive tracking at small
   sizes or a multi-word all-caps heading like "PLAYER & FAMILY" reads as
   cramped. */
.camps-step-title {
	font-family: var(--display);
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--white);
	margin: 0 0 20px;
}

.camps-row {
	display: grid;
	gap: 16px;
	margin-bottom: 16px;
}

.camps-row-2 {
	grid-template-columns: 1fr 1fr;
}

.camps-fieldset {
	border: 0;
	padding: 0;
	margin: 20px 0 0;
}

.camps-fieldset legend {
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	color: var(--smoke);
	padding: 0;
	margin-bottom: 10px;
}

/* --- Position chips -------------------------------------------------
   Real checkboxes (q11_positions[] on the JotForm this submits into),
   each wrapped in a label styled as a chip -- same visual language as
   .chip elsewhere (mono, bordered, accent when active), sized for a word
   instead of a two-letter badge. The checkbox itself is visually hidden
   rather than removed, so this stays keyboard- and screen-reader-usable;
   :has() (already relied on elsewhere in this theme, see
   register-form.css) does the state styling instead of JS. */

.camps-chip-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.camps-chip {
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 600;
	color: var(--frost);
	background: var(--surface);
	border: 1px solid var(--onyx);
	border-radius: var(--radius-full, 9999px);
	padding: 9px 16px;
	cursor: pointer;
	transition: border-color .15s, color .15s, background .15s;
}

.camps-chip:hover {
	border-color: var(--smoke);
}

.camps-chip:has(.camps-chip-input:checked) {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--canvas);
}

.camps-chip-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}

.camps-chip-input:focus-visible ~ * {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* --- Registration tier toggle ---------------------------------------
   Also real checkboxes (q12_registration[] on the JotForm) rather than a
   true either/or field, because that is what the real form has -- see the
   note atop camps.php. camps.js keeps only one checked at a time. The
   price is the thing being chosen, so the price is the label. Three
   possible tiers (all 3 days / any 2 / single day), though a camp only
   renders however many of them actually have a price set -- auto-fit
   keeps 2-tier camps from leaving a dead empty cell. */

.camps-tier-group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
}

.camps-tier {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--onyx);
	border-radius: 12px;
	padding: 18px 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}

.camps-tier:hover {
	border-color: var(--smoke);
}

.camps-tier:has(.camps-tier-input:checked) {
	background: var(--elevated);
	border-color: var(--accent);
}

.camps-tier-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}

.camps-tier-price {
	font-family: var(--display);
	font-size: 1.6rem;
	color: var(--accent);
}

.camps-tier-label {
	font-family: var(--aeonik);
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
	text-transform: uppercase;
}

.camps-tier-sub {
	font-family: var(--aeonik);
	font-size: 12px;
	color: var(--smoke);
}

/* --- Payment step -------------------------------------------------------
   Wraps the [woocommerce_checkout] shortcode output -- deliberately light
   styling here, not a full re-theme of WooCommerce's checkout markup.
   #campsForm's own step number/title styles (.camps-step-num,
   .camps-step-title) already apply, since .camps-payment-step reuses the
   same .camps-step class.

   #campsPaymentStep, #campsError, and #campsSubmit are deliberately
   siblings of #campsForm, not children of it (see camps.php for why --
   a <form> can't contain WooCommerce's own checkout <form>), so none of
   them benefit from #campsForm's own `gap: 40px` between steps. Without
   their own margin-top, the "Anything Else" box and the submit button
   sat right on top of each other. */
.camps-payment-step,
.camps-error,
.camps-submit {
	margin-top: 40px;
}

.camps-payment-step .woocommerce-billing-fields__field-wrapper,
.camps-payment-step .woocommerce-additional-fields {
	margin-top: 16px;
}

/* WooCommerce's own privacy-policy consent text, left at browser-default
   blue otherwise -- matches the site's accent color instead. */
.camps-payment-step .woocommerce-privacy-policy-text a {
	color: var(--accent);
}

/* inc/camps-payment.php sets billing_country to type="hidden" for a
   camp-only cart (nothing ships, so the field itself is pointless) --
   but WooCommerce's own checkout template still renders that field's
   <label> wrapper regardless of the input's type, leaving a bare
   "Country / Region *" label with no visible field next to it. Hiding
   the whole wrapper, not just relying on the input being hidden. */
.camps-payment-step #billing_country_field {
	display: none;
}

/* WooCommerce's own "Place order" button stays in the DOM -- camps.js
   triggers the checkout form's submit programmatically, including on a
   retry after a declined card (it skips re-submitting to JotForm the
   second time, see camps.js) -- but this button is never the thing a
   family actually clicks. #campsSubmit is the one button this page has. */
.camps-payment-step #place_order {
	display: none;
}

/* --- Total + submit ---------------------------------------------------- */

.camps-error {
	background: #3a1010;
	border: 1px solid #6b1a1a;
	color: #ff9a9a;
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 13px;
}

.camps-submit {
	width: 100%;
	text-align: center;
	font-size: 15px;
	padding: 15px 22px;
}

.camps-contacts {
	text-align: center;
	margin-top: 8px;
}

.camps-contacts-label {
	font-family: var(--mono);
	font-size: 12px;
	text-transform: uppercase;
	color: var(--smoke);
	margin: 0 0 6px;
}

.camps-contact {
	font-size: 13px;
	color: var(--frost);
	margin: 0;
}

.camps-contact a {
	color: var(--accent);
	text-decoration: none;
}

@media (max-width: 640px) {

	.camps-info-tiles {
		grid-template-columns: repeat(2, 1fr);
	}

	.camps-row-2 {
		grid-template-columns: 1fr;
	}

	/* flex-wrap left 6 position chips on one row and "Outfield" stranded
	   alone on the next, on narrow screens -- a 4-column grid instead
	   gives 4 + 3, which reads as a deliberate layout rather than a
	   leftover. Scoped to #campsPositions specifically, not every
	   .camps-chip-group, since the day picker (at most 3 chips) doesn't
	   have this problem and doesn't need the same treatment. */
	#campsPositions.camps-chip-group {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
	}

	/* A grid item blockifies to fill its column (unlike the flex layout
	   above, where each chip only ever took up its content width), so
	   without this a chip's pill background would stretch to the column
	   width but its text would still sit left-aligned inside it. */
	#campsPositions.camps-chip-group .camps-chip {
		text-align: center;
	}

}