/* =============================================================================
 * JFJC — Bingo Bash landing page (/2nd-annual-bingo-bash/, page 14836)
 *
 * Page-scoped styles. Loaded ONLY on that page by jfjc_enqueue_bingo_bash_css()
 * in functions.php, so nothing here needs a body-class prefix. Everything the
 * WPBakery builder could express lives in the page content itself (seeded by
 * tools/seed-bingo-page-2026.php); this file covers only what the builder
 * cannot reach: the child theme's header, Event Tickets' widget markup, anchor
 * offsets, and WPBakery's column wrapper.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. Solid header from the top of the page.
 * Lapraim's header#main-header is position:fixed and transparent until
 * lapraim.js adds .scrolled (white bg, shadow, 60px). Every other page starts
 * with a white section beneath it so the transparency is invisible; this page
 * opens with a blue hero bar. Mirror the .scrolled look from the start.
 *
 * Do NOT push the canvas down as well: Lapraim already gives the first
 * section `padding-top: 160px` (120px under 1024px) to clear the 110px /
 * 60px fixed header (style-lapraim.css ~307 and ~1668). The hero bar
 * therefore runs under the header, with ~50px / ~60px of blue visible above
 * the logo; match that below the logo so the bar reads centred.
 * -------------------------------------------------------------------------- */
header#main-header {
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
header#main-header:after {
	opacity: 1;
}
section.l-section:first-child {
	padding-bottom: 50px;
}
@media all and (max-width: 1023px) {
	section.l-section:first-child {
		padding-bottom: 60px;
	}
}

/* -----------------------------------------------------------------------------
 * 2. Anchor offset. The hero CTAs jump to #tickets / #sponsorships; without
 * this the section heading lands under the fixed header (60px when scrolled).
 * -------------------------------------------------------------------------- */
#tickets,
#sponsorships {
	scroll-margin-top: 110px; /* 60px scrolled header + breathing room */
}

/* -----------------------------------------------------------------------------
 * 3. Event Tickets widgets: brand colours. The page has two of them — the
 * admission tickets in #tickets and the sponsor tiers in #sponsorships (real
 * tickets on the same event, filtered by ticket_id) — and every rule below
 * covers both. The block ships with an indigo accent. Variables cover the
 * parts that read them; the direct rule covers the buy button, which is
 * styled by a fixed colour in tickets.css.
 * -------------------------------------------------------------------------- */
:is(#tickets, #sponsorships) .event-tickets .tribe-tickets__tickets-form {
	--tec-color-accent-primary: #00a7e0;
	--tec-color-accent-primary-hover: #005b7a;
	--tec-color-accent-primary-active: #005b7a;
	--tec-color-accent-primary-background: #e6f4fa;
	--tec-color-button-primary: #00a7e0;
	--tec-color-button-primary-hover: #005b7a;
}
:is(#tickets, #sponsorships) .event-tickets .tribe-tickets__tickets-buy {
	background-color: #00a7e0 !important;
	color: #fff !important;
	/* Pin the geometry: at rest Impreza's generic [type=submit] rule sets
	 * 0.8em 1.8em, but on hover Event Tickets' `button.tribe-common-c-btn--small:hover`
	 * (11px 14px) wins a specificity tie-break and the button visibly shrinks.
	 * This ID-scoped rule outranks both in every state. */
	padding: 0.8em 1.8em;
}
:is(#tickets, #sponsorships) .event-tickets .tribe-tickets__tickets-buy:hover,
:is(#tickets, #sponsorships) .event-tickets .tribe-tickets__tickets-buy:focus {
	background-color: #005b7a !important;
}

/* -----------------------------------------------------------------------------
 * 4. Event Tickets widgets: rows → cards.
 * The block renders each ticket as a 3-column grid row inside a bordered
 * form. Turn the form into a flex row of bordered cards (one per ticket),
 * keep the notice bar and the footer full-width, and hide the widget's own
 * "Tickets" heading because the section already has one.
 *
 * Descriptions are always open: Event Tickets is mobile-first and simply
 * hides .tribe-tickets__tickets-item-details-content below 768px (the page
 * cards render no "More" toggle; only the modal rows do). Chadsten wants
 * the bullets visible at every width (2026-09-09), so the content is
 * forced on in both widgets. The attendee modal keeps its collapsed rows.
 * -------------------------------------------------------------------------- */
:is(#tickets, #sponsorships) .event-tickets,
:is(#tickets, #sponsorships) .event-tickets .tribe-tickets__tickets-form {
	max-width: none;
	width: 100%;
}
:is(#tickets, #sponsorships) .event-tickets .tribe-tickets__tickets-form {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	padding: 0;
	border: 0;
	background: transparent;
}
:is(#tickets, #sponsorships) form.tribe-tickets__tickets-form > .tribe-tickets__tickets-title {
	display: none;
}
:is(#tickets, #sponsorships) form.tribe-tickets__tickets-form > .tribe-tickets__notice,
:is(#tickets, #sponsorships) form.tribe-tickets__tickets-form > .tribe-tickets__tickets-footer {
	flex: 0 0 100%;
}

:is(#tickets, #sponsorships) form.tribe-tickets__tickets-form > .tribe-tickets__tickets-item {
	flex: 1 1 240px;
	position: relative;
	margin: 0;
	padding: 1.25rem;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	background: #fff;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto 1fr auto;
	column-gap: 0.75rem;
	align-items: start;
}
:is(#tickets, #sponsorships) form.tribe-tickets__tickets-form > .tribe-tickets__tickets-item .tribe-tickets__tickets-item-content-title-container {
	grid-column: 1 / -1;
	grid-row: 1;
}
:is(#tickets, #sponsorships) form.tribe-tickets__tickets-form > .tribe-tickets__tickets-item .tribe-tickets__tickets-item-content-title {
	font-size: 1.1rem;
	font-weight: 700;
}
:is(#tickets, #sponsorships) form.tribe-tickets__tickets-form > .tribe-tickets__tickets-item .tribe-tickets__tickets-item-details-content {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 0.25rem 0 1rem;
	line-height: 1.4;
}
:is(#tickets, #sponsorships) form.tribe-tickets__tickets-form > .tribe-tickets__tickets-item .tribe-tickets__tickets-item-extra {
	grid-column: 1;
	grid-row: 3;
	align-self: end;
	padding: 0;
	text-align: left;
}
:is(#tickets, #sponsorships) form.tribe-tickets__tickets-form > .tribe-tickets__tickets-item .tribe-tickets__tickets-item-extra-price {
	font-size: 1.5rem;
	font-weight: 700;
	color: #1b1b1b;
}
:is(#tickets, #sponsorships) form.tribe-tickets__tickets-form > .tribe-tickets__tickets-item .tribe-tickets__tickets-item-quantity {
	grid-column: 2;
	grid-row: 3;
	align-self: end;
	padding-top: 0;
}

/* "Best value" on the Family 4-Pack (ticket 14743 on event 14124). */
#tickets form.tribe-tickets__tickets-form > .tribe-tickets__tickets-item[data-ticket-id="14743"] {
	border-color: #00a7e0;
}
#tickets form.tribe-tickets__tickets-form > .tribe-tickets__tickets-item[data-ticket-id="14743"]::before {
	content: "Best value";
	position: absolute;
	top: -0.75em;
	left: 1rem;
	padding: 0.2em 0.7em;
	border-radius: 1em;
	background: #00a7e0;
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* Always-open descriptions (see the section note above). */
:is(#tickets, #sponsorships) form.tribe-tickets__tickets-form > .tribe-tickets__tickets-item .tribe-tickets__tickets-item-details-content {
	display: block;
}

/* Ticket descriptions are real lists (seeded as <ul>). */
:is(#tickets, #sponsorships) form.tribe-tickets__tickets-form > .tribe-tickets__tickets-item .tribe-tickets__tickets-item-details-content ul {
	margin: 0;
	padding-left: 1.1em;
	list-style: disc;
}
:is(#tickets, #sponsorships) form.tribe-tickets__tickets-form > .tribe-tickets__tickets-item .tribe-tickets__tickets-item-details-content li {
	margin: 0 0 0.15em;
}

/* Summary bar: quantity · total · Get Tickets. Event Tickets hides the
 * quantity and total until the first change (its --active modifier); show
 * them from load so the empty state matches the "added then removed" state. */
:is(#tickets, #sponsorships) form.tribe-tickets__tickets-form > .tribe-tickets__tickets-footer {
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 0.9rem 1.25rem;
	border: 1px solid #1b1b1b;
	border-radius: 8px;
	background: #fff;
}
:is(#tickets, #sponsorships) form.tribe-tickets__tickets-form > .tribe-tickets__tickets-footer .tribe-tickets__tickets-footer-quantity,
:is(#tickets, #sponsorships) form.tribe-tickets__tickets-form > .tribe-tickets__tickets-footer .tribe-tickets__tickets-footer-total {
	display: block;
}

/* -----------------------------------------------------------------------------
 * 5. Sponsor tiers: a 2×2 grid rather than four narrow cards in a row, and
 * one "Sponsor at $X" button per card (rendered by functions.php, wired by
 * bingo-bash.js) instead of the quantity stepper and the bottom bar. The
 * stepper and bar stay in the DOM — Event Tickets' own script drives the
 * checkout through them — they are just hidden for this widget. A sold-out
 * tier gets a plain label; no hand-typed counts anywhere.
 * -------------------------------------------------------------------------- */
/* The callout above already carries a 1.5rem bottom margin; without this the
 * form's own 24px top margin stacks on it and the gap doubles. */
#sponsorships form.tribe-tickets__tickets-form {
	margin-top: 0;
}
#sponsorships form.tribe-tickets__tickets-form > .tribe-tickets__tickets-item {
	flex-basis: calc(50% - 0.75rem);
	grid-template-rows: auto 1fr auto auto;
}
@media all and (max-width: 767px) {
	#sponsorships form.tribe-tickets__tickets-form > .tribe-tickets__tickets-item {
		flex-basis: 100%;
	}
}
/* NOT display:none — Event Tickets' block script only counts quantity inputs
 * that jQuery reports as :visible (offsetWidth/Height > 0) when it enables
 * the submit, so a display:none stepper leaves the submit disabled forever.
 * Keep a 1px box in the layout and hide it visually instead. */
#sponsorships form.tribe-tickets__tickets-form > .tribe-tickets__tickets-item .tribe-tickets__tickets-item-quantity,
#sponsorships form.tribe-tickets__tickets-form > .tribe-tickets__tickets-footer {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	opacity: 0;
	pointer-events: none;
}
/* No price line on sponsor cards: the button already says the amount
 * (client, 2026-09-09). The element stays in the DOM for ET's totals. */
#sponsorships form.tribe-tickets__tickets-form > .tribe-tickets__tickets-item .tribe-tickets__tickets-item-extra {
	display: none;
}
#sponsorships form.tribe-tickets__tickets-form > .tribe-tickets__tickets-item .jfjc-sponsor-buy,
#sponsorships form.tribe-tickets__tickets-form > .tribe-tickets__tickets-item .jfjc-sponsor-soldout {
	grid-column: 1 / -1;
	grid-row: 4;
	margin-top: 0.5rem;
}
#sponsorships form.tribe-tickets__tickets-form > .tribe-tickets__tickets-item .jfjc-sponsor-buy {
	display: block;
	width: 100%;
	padding: 0.8em 1.8em;
	border: 0;
	border-radius: 4px;
	background-color: #00a7e0;
	color: #fff;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s;
}
#sponsorships form.tribe-tickets__tickets-form > .tribe-tickets__tickets-item .jfjc-sponsor-buy:hover,
#sponsorships form.tribe-tickets__tickets-form > .tribe-tickets__tickets-item .jfjc-sponsor-buy:focus {
	background-color: #005b7a;
	color: #fff;
}
#sponsorships form.tribe-tickets__tickets-form > .tribe-tickets__tickets-item .jfjc-sponsor-soldout {
	display: block;
	padding: 0.8em 1.8em;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	color: #6b6b6b;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
}

/* -----------------------------------------------------------------------------
 * 6. Attendee modal (both widgets). The dialog moves the modal into its own
 * wrapper (.tribe-modal__wrapper--ar, ETP's own container selector) outside
 * #tickets / #sponsorships, so the brand variables from §3 don't reach it,
 * and its "Checkout Now" has the same hover shrink as the page button (ET's
 * `button.tribe-common-c-btn--small:hover` 11px 14px beats Impreza's
 * [type=submit] padding on a tie). Pin both here with room to spare.
 * -------------------------------------------------------------------------- */
.tribe-modal__wrapper--ar {
	--tec-color-accent-primary: #00a7e0;
	--tec-color-accent-primary-hover: #005b7a;
	--tec-color-accent-primary-active: #005b7a;
	--tec-color-accent-primary-background: #e6f4fa;
	--tec-color-button-primary: #00a7e0;
	--tec-color-button-primary-hover: #005b7a;
}
.tribe-modal__wrapper--ar button.tribe-common-c-btn.tribe-tickets__attendee-tickets-submit {
	padding: 0.8em 1.8em;
	background-color: #00a7e0 !important;
	color: #fff !important;
	opacity: 1;
}
.tribe-modal__wrapper--ar button.tribe-common-c-btn.tribe-tickets__attendee-tickets-submit:hover,
.tribe-modal__wrapper--ar button.tribe-common-c-btn.tribe-tickets__attendee-tickets-submit:focus {
	padding: 0.8em 1.8em;
	background-color: #005b7a !important;
	opacity: 1;
}