/**
 * Next Level Card Show Manager — front-end styles.
 * Author: Jaypee M. | Maglacas Digital
 *
 * Deliberately restrained: Breakdance owns the site's look, so this only provides
 * structure and sane defaults that inherit the theme's colours and fonts.
 */

/* ---------- Table pricing cards ----------
 * Every colour is a variable so Breakdance can retheme the cards from the page without
 * touching this file.
 */

.nlcs-tiers {
	--nlcs-tier-accent: #e00025;
	--nlcs-tier-surface: #fff;
	--nlcs-tier-ink: #16181d;
	--nlcs-tier-muted: #6b7280;
	--nlcs-tier-rule: rgba(0, 0, 0, .1);
	--nlcs-tier-radius: 16px;
	--nlcs-tier-pad: 28px;

	display: grid;
	/* Half-columns: a card spans two of them, so three across is six and two across is
	 * four. The spare half-column is what lets a short last row sit centred under the
	 * others instead of stranded against the left edge — which is what a fifth package
	 * would otherwise look like. */
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 24px;
	margin: 0 0 16px;
}

/* The end, not the `grid-column` shorthand: the offsets in the responsive section set only
 * the start, and the width has to survive a card being moved. */
.nlcs-tiers > .nlcs-tier {
	grid-column-end: span 2;
}

.nlcs-tiers--2up {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.nlcs-tiers--1up {
	grid-template-columns: minmax(0, 1fr);
}

.nlcs-tiers--1up > .nlcs-tier {
	grid-column: 1 / -1;
}

.nlcs-tier {
	display: flex;
	flex-direction: column;
	padding: var(--nlcs-tier-pad);
	background: var(--nlcs-tier-surface);
	color: var(--nlcs-tier-ink);
	border-radius: var(--nlcs-tier-radius);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 28px rgba(0, 0, 0, .10);
}

/* Cards line up row for row, so the price on the cheapest package sits at exactly the
 * height of the price on the dearest one no matter how many inclusions each lists.
 * Subgrid does this honestly; the flex fallback below keeps the cards equal height for
 * anything that cannot, which is all the alignment that layout can promise. */
@supports (grid-template-rows: subgrid) {
	.nlcs-tier {
		display: grid;
		grid-row: span 3;
		grid-template-rows: subgrid;
		/* Rows carry the rhythm, so the children must not add their own. */
		row-gap: 0;
	}
}

/* Everything below is scoped through .nlcs-tiers on purpose. A page builder styles its
 * headings and lists with selectors like `.breakdance h3` and `.breakdance ul` — one class
 * and one element — which outrank a bare `.nlcs-tier__name`. Without the extra class the
 * package name inherits the theme's white heading colour and disappears against the white
 * card. */

.nlcs-tiers .nlcs-tier__name {
	margin: 0 0 10px;
	color: var(--nlcs-tier-accent);
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.3;
}

.nlcs-tiers .nlcs-tier__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
	color: var(--nlcs-tier-ink);
}

.nlcs-tiers .nlcs-tier__amount {
	font-size: 2.75rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
}

.nlcs-tiers .nlcs-tier__unit {
	color: var(--nlcs-tier-muted);
	font-size: .875rem;
	font-weight: 400;
}

.nlcs-tiers .nlcs-tier__list {
	margin: 0;
	padding: 20px 0 0;
	list-style: none;
	border-top: 1px solid var(--nlcs-tier-rule);
}

/* A package with no inclusions still draws its rule, so its card does not end short of
 * the others and break the row. */
.nlcs-tiers .nlcs-tier__list.is-empty {
	display: block;
	padding: 0;
}

.nlcs-tiers .nlcs-tier__list li {
	position: relative;
	margin: 0 0 10px;
	padding-left: 26px;
	line-height: 1.45;
	color: var(--nlcs-tier-ink);
}

.nlcs-tiers .nlcs-tier__list li:last-child {
	margin-bottom: 0;
}

/* The tick is drawn, not a character: no icon font to load and no emoji to render
 * differently on every platform. */
.nlcs-tiers .nlcs-tier__list li::before {
	content: "";
	position: absolute;
	top: .34em;
	left: 2px;
	width: 12px;
	height: 7px;
	border-left: 2.5px solid var(--nlcs-tier-accent);
	border-bottom: 2.5px solid var(--nlcs-tier-accent);
	transform: rotate(-45deg);
}

.nlcs-tiers__note {
	font-size: .875rem;
	opacity: .7;
}

/* ---------- Show hours ---------- */

.nlcs-hours__title {
	margin: 0 0 8px;
	font-size: 1.1rem;
}

.nlcs-hours__list {
	margin: 0;
}

.nlcs-hours__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.nlcs-hours__row:last-child {
	border-bottom: 0;
}

.nlcs-hours__row dt {
	font-weight: 700;
}

.nlcs-hours__row dd {
	margin: 0;
	text-align: right;
}

/* ---------- Vendor grid ---------- */

.nlcs-vendors {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}

.nlcs-vendor {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 12px;
}

.nlcs-vendor__logo {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px;
	flex: 0 0 auto;
}

.nlcs-vendor__name {
	margin: 0;
	font-size: 1rem;
}

.nlcs-vendor__specialty {
	margin: 2px 0 6px;
	font-size: .85rem;
	opacity: .75;
}

.nlcs-vendor__table {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
	background: #ffd400;
	color: #111;
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* ---------- Application form ----------
 * A light card that stands on its own against a dark page. Every colour is a variable, so
 * a page builder can retheme it without touching this file — set --nlcs-form-surface to
 * transparent if the form already sits inside a card of your own.
 */

/* The giveaway entry box borrows these fields, so it inherits the same variables — but
 * not the card, which it wraps in itself. */
.nlcs-form,
.nlcs-entry {
	--nlcs-form-accent: #e00025;
	--nlcs-form-accent-hover: #b3001d;
	--nlcs-form-surface: #fff;
	--nlcs-form-ink: #16181d;
	--nlcs-form-muted: #6b7280;
	--nlcs-form-input-bg: #fff;
	--nlcs-form-border: #d8dbe2;
	--nlcs-form-radius: 20px;
	--nlcs-form-input-radius: 10px;
	--nlcs-form-pad: 40px;
}

.nlcs-form {
	padding: var(--nlcs-form-pad);
	background: var(--nlcs-form-surface);
	color: var(--nlcs-form-ink);
	border-radius: var(--nlcs-form-radius);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 28px rgba(0, 0, 0, .10);
}

.nlcs-form__intro {
	margin: 0 0 24px;
	color: var(--nlcs-form-muted);
}

.nlcs-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

/* Fields sit on a two-column grid and span both by default, so marking one "half width"
 * in the editor is all it takes to pair it with the next half-width field — whatever the
 * order they have been dragged into. */
.nlcs-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 16px;
}

.nlcs-form__grid > * {
	grid-column: span 2;
}

.nlcs-form__grid > .is-half {
	grid-column: span 1;
}

.nlcs-form__field {
	display: flex;
	flex-direction: column;
	margin-bottom: 18px;
}

.nlcs-form__field > label,
.nlcs-form__field > legend {
	margin-bottom: 7px;
	padding: 0;
	color: var(--nlcs-form-ink);
	font-size: .9rem;
	font-weight: 600;
}

.nlcs-form__field input[type="text"],
.nlcs-form__field input[type="email"],
.nlcs-form__field input[type="tel"],
.nlcs-form__field input[type="url"],
.nlcs-form__field input[type="number"],
.nlcs-form__field select,
.nlcs-form__field textarea {
	width: 100%;
	padding: 13px 15px;
	background: var(--nlcs-form-input-bg);
	color: var(--nlcs-form-ink);
	border: 1px solid var(--nlcs-form-border);
	border-radius: var(--nlcs-form-input-radius);
	font: inherit;
	line-height: 1.3;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.nlcs-form__field textarea {
	min-height: 110px;
	resize: vertical;
}

.nlcs-form__field ::placeholder {
	color: var(--nlcs-form-muted);
	opacity: .75;
}

/* The focus ring is the accent, not the browser default — on a red-and-white form a blue
 * halo reads as an error state. */
.nlcs-form__field :is(input, select, textarea):focus {
	outline: 0;
	border-color: var(--nlcs-form-accent);
	box-shadow: 0 0 0 3px rgba(224, 0, 37, .15);
}

/* The native arrow sits differently in every browser, so the select draws its own and
 * leaves room for it. */
.nlcs-form__field select {
	appearance: none;
	padding-right: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px;
}

/* The file input keeps the same box as every other field, so the form does not develop a
 * hole where the upload is. The button inside it is the browser's — restyling that is a
 * per-browser job, and a mismatched fake one reads as broken rather than as branded. */
.nlcs-form__file {
	width: 100%;
	padding: 11px 15px;
	background: var(--nlcs-form-input-bg);
	color: var(--nlcs-form-ink);
	border: 1px dashed var(--nlcs-form-border);
	border-radius: var(--nlcs-form-input-radius);
	font: inherit;
	font-size: .9rem;
	line-height: 1.3;
	cursor: pointer;
}

.nlcs-form__file::file-selector-button {
	margin-right: 12px;
	padding: 7px 13px;
	background: transparent;
	color: var(--nlcs-form-ink);
	border: 1px solid var(--nlcs-form-border);
	border-radius: 999px;
	font: inherit;
	font-size: .82rem;
	font-weight: 600;
	cursor: pointer;
}

.nlcs-form__file:focus {
	outline: 0;
	border-color: var(--nlcs-form-accent);
	box-shadow: 0 0 0 3px rgba(224, 0, 37, .15);
}

.nlcs-form__note {
	margin: 7px 0 0;
	color: var(--nlcs-form-muted);
	font-size: .8rem;
}

/* "(optional)" rides on the label rather than sitting in the field, so what is and is not
 * required is answered before anyone starts typing. */
.nlcs-form__optional {
	color: var(--nlcs-form-muted);
	font-weight: 400;
}

.nlcs-form__foot {
	margin-top: 12px;
	text-align: center;
}

fieldset.nlcs-form__field {
	border: 0;
	padding: 0;
	margin-bottom: 18px;
}

.nlcs-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.nlcs-check {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	cursor: pointer;
}

/* Categories are pills you tap, not a column of boxes: a dozen of them read as a set this
 * way, and the whole pill is the hit target. */
.nlcs-checks .nlcs-check {
	padding: 8px 14px;
	border: 1px solid var(--nlcs-form-border);
	border-radius: 999px;
	font-size: .875rem;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.nlcs-checks .nlcs-check input {
	/* The pill itself carries the state, so the box would only be visual noise — but it
	   stays in the layout for keyboard focus and for anyone browsing without CSS. */
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.nlcs-checks .nlcs-check:hover {
	border-color: var(--nlcs-form-accent);
}

.nlcs-checks .nlcs-check:has(input:focus-visible) {
	box-shadow: 0 0 0 3px rgba(224, 0, 37, .2);
}

.nlcs-checks .nlcs-check:has(input:checked) {
	background: var(--nlcs-form-accent);
	border-color: var(--nlcs-form-accent);
	color: #fff;
}

/* The two consent boxes are read-then-tick, so they keep a real checkbox. */
.nlcs-form__check {
	margin-bottom: 14px;
	font-size: .9rem;
	line-height: 1.5;
}

.nlcs-form__check input {
	margin-top: .2em;
	accent-color: var(--nlcs-form-accent);
	flex: none;
}

.nlcs-form__submit {
	padding: 14px 28px;
	border: 0;
	border-radius: 999px;
	background: var(--nlcs-form-accent);
	color: #fff;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .15s ease;
}

/* On the application it is the one thing left to do, so it takes the full width and the
 * shape of the fields above it. The giveaway keeps the pill — it sits inline in a card,
 * next to other content, and would read as a banner at this size. */
.nlcs-form .nlcs-form__submit {
	display: block;
	width: 100%;
	margin-top: 24px;
	padding: 17px 28px;
	border-radius: var(--nlcs-form-input-radius);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.nlcs-form__submit:hover {
	background: var(--nlcs-form-accent-hover);
}

.nlcs-form__submit:focus-visible {
	outline: 3px solid rgba(224, 0, 37, .4);
	outline-offset: 2px;
}

/*
 * The honeypot must be invisible to people but still filled in by a bot — so it is moved
 * off-screen rather than display:none, which the better bots know to skip.
 */
.nlcs-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Giveaways ---------- */

.nlcs-giveaways {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

.nlcs-giveaway {
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}

/*
 * ---------- The card image band ----------
 *
 * Three rules here matter, and all three are load-bearing on Safari. This band used to be a
 * plain aspect-ratio box with a `height: 100%` image inside, which is correct CSS and renders
 * correctly in Chrome and Firefox — and blew the card apart on iOS.
 *
 * 1. flex: none. The band is a fixed-ratio plate, not a flexible one, and must never be asked
 *    to shrink or grow to fit the column it sits in.
 *
 * 2. overflow: hidden. Whatever else goes wrong, the image cannot paint outside this box. The
 *    card clips too, but the card is not what the image was escaping past — the body text is,
 *    and because this band is positioned it paints ABOVE the body, so an overflowing image
 *    lands on top of the title and description rather than pushing them down.
 *
 * 3. The image is positioned to all four edges rather than sized `height: 100%`. A percentage
 *    height only resolves against a containing block whose own height is definite, and WebKit
 *    does not treat a height derived from aspect-ratio as definite — so `height: 100%` fell
 *    back to the image's intrinsic height, i.e. whatever the client happened to upload. Four
 *    offsets need no percentage to resolve: the box is the band, in every engine.
 */
.nlcs-giveaway__media {
	position: relative;
	flex: none;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #eceef3;
}

.nlcs-giveaway__media img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * A WebKit old enough to have no aspect-ratio at all — which is the other way a browser lands
 * on the intrinsic-size bug above, and the reason this is a fallback rather than a nicety.
 * Without it the absolutely positioned image would have no box to fill and the card would show
 * an empty grey plate, which is worse than the overflow it replaced. 10/16 = 62.5%.
 */
@supports not (aspect-ratio: 16 / 10) {
	.nlcs-giveaway__media {
		height: 0;
		padding-bottom: 62.5%;
	}
}

.nlcs-giveaway__tag,
.nlcs-giveaway__state {
	position: absolute;
	top: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: .7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.nlcs-giveaway__tag {
	left: 12px;
	background: #ffd400;
	color: #111;
}

.nlcs-giveaway__state {
	right: 12px;
	background: #1f4fd8;
	color: #fff;
}

.nlcs-giveaway.is-closed .nlcs-giveaway__state,
.nlcs-giveaway.is-drawn .nlcs-giveaway__state {
	background: #6b7280;
}

/* A finished giveaway stays visible but stops shouting for attention. */
.nlcs-giveaway.is-closed .nlcs-giveaway__media,
.nlcs-giveaway.is-drawn .nlcs-giveaway__media {
	filter: grayscale(.7);
	opacity: .75;
}

.nlcs-giveaway__body {
	flex: 1;
	padding: 18px;
}

.nlcs-giveaway__title {
	margin: 0 0 6px;
	font-size: 1.15rem;
}

.nlcs-giveaway__desc {
	margin: 0 0 10px;
	font-size: .9rem;
	opacity: .75;
}

.nlcs-giveaway__closes {
	margin: 0;
	font-size: .8rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #e00025;
}

.nlcs-giveaway__closes.is-closed {
	color: #6b7280;
}

.nlcs-giveaway__winner {
	margin: 0;
	font-weight: 800;
}

.nlcs-giveaway__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	border-top: 1px solid rgba(0, 0, 0, .1);
}

.nlcs-giveaway__free,
.nlcs-giveaway__onsite {
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	opacity: .7;
}

.nlcs-giveaway__cta {
	font-weight: 800;
	color: #e00025;
	text-decoration: none;
	background: none;
	border: 0;
	padding: 0;
	font-size: inherit;
	font-family: inherit;
	cursor: pointer;
}

/* ---------- Raffle entry form ---------- */

/*
 * Collapsed by default but present in the markup, so entering still works with JavaScript
 * off — the button only toggles visibility, it does not build the form.
 */
.nlcs-entry {
	display: none;
	padding: 18px;
	border-top: 1px solid rgba(0, 0, 0, .1);
	background: rgba(0, 0, 0, .02);
}

.nlcs-entry.is-open {
	display: block;
}

.nlcs-entry .nlcs-form__field {
	margin-bottom: 12px;
}

.nlcs-entry .nlcs-form__submit {
	width: 100%;
	padding: 12px 20px;
	font-size: .95rem;
}

.nlcs-entry__ok {
	margin: 0;
	padding: 14px;
	border-radius: 8px;
	background: #edf9f0;
	border: 1px solid #b7e3c4;
}

.nlcs-entry__ok strong {
	display: block;
}

.nlcs-entry__error {
	margin: 0 0 12px;
	padding: 10px 12px;
	border-radius: 8px;
	background: #fdecee;
	border: 1px solid #f5b5bd;
	font-size: .9rem;
}

/* ---------- Vendor Hub ---------- */

.nlcs-hub {
	max-width: 820px;
	margin: 0 auto;
}

.nlcs-hub__head {
	padding-bottom: 20px;
	margin-bottom: 24px;
	border-bottom: 2px solid #e00025;
}

.nlcs-hub__eyebrow {
	margin: 0 0 4px;
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #e00025;
}

.nlcs-hub__title {
	margin: 0 0 6px;
	font-size: 2rem;
	line-height: 1.15;
}

.nlcs-hub__sub {
	margin: 0 0 10px;
	opacity: .75;
}

.nlcs-hub__who {
	margin: 0;
	font-weight: 700;
}

.nlcs-hub__card {
	padding: 24px;
	margin-bottom: 20px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 12px;
}

.nlcs-hub__card h3 {
	margin: 0 0 14px;
	font-size: 1.15rem;
}

.nlcs-hub__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 16px;
	margin: 0;
}

.nlcs-hub__facts dt {
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .6;
	margin-bottom: 3px;
}

.nlcs-hub__facts dd {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
}

.nlcs-hub__lead {
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0 0 10px;
}

.nlcs-hub__prose > :first-child {
	margin-top: 0;
}

.nlcs-hub__prose > :last-child {
	margin-bottom: 0;
}

.nlcs-hub__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nlcs-hub__list li {
	padding: 12px 0;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.nlcs-hub__list li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.nlcs-hub__list strong {
	display: block;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	opacity: .6;
	margin-bottom: 2px;
}

.nlcs-hub__map {
	display: block;
	margin-top: 16px;
	text-decoration: none;
}

.nlcs-hub__map img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, .12);
}

.nlcs-hub__map span {
	display: inline-block;
	margin-top: 8px;
	font-weight: 700;
}

.nlcs-hub__note {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid rgba(0, 0, 0, .08);
	font-weight: 600;
}

.nlcs-hub__btn {
	display: inline-block;
	padding: 10px 20px;
	border-radius: 999px;
	background: #111;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.nlcs-hub__foot {
	text-align: center;
	opacity: .75;
}

/* The alert paints its own light panel, so it has to state its own text colour rather than
 * inherit the page's — on a dark theme that inheritance is white on mint, which is what this
 * used to be.
 *
 * The class is doubled on purpose. Page builders set a global heading colour late in the
 * cascade (Breakdance ships `.breakdance h3 {color: …}`), and this stylesheet is enqueued
 * before the builder's, so an equally specific rule would lose. Two classes beats one class
 * plus an element, whichever order they load in. */
.nlcs-alert.nlcs-alert {
	padding: 22px 24px;
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, .12);
	color: #14172a;
	line-height: 1.65;
}

.nlcs-alert.nlcs-alert h3,
.nlcs-alert.nlcs-alert p {
	color: inherit;
}

.nlcs-alert.nlcs-alert a {
	color: inherit;
	text-decoration: underline;
}

.nlcs-alert--ok.nlcs-alert--ok {
	background: #edf9f0;
	border-color: #b7e3c4;
}

.nlcs-alert--error.nlcs-alert--error {
	background: #fdecee;
	border-color: #f5b5bd;
}

.nlcs-alert.nlcs-alert h3 {
	margin: 0 0 10px;
	font-size: 1.2rem;
	line-height: 1.3;
	font-weight: 700;
}

.nlcs-alert.nlcs-alert p {
	margin: 0;
	font-size: .975rem;
}

/* Two paragraphs of guidance ran together as one block without this. */
.nlcs-alert.nlcs-alert p + p {
	margin-top: 12px;
}

/* ---------- Responsive ---------- */

/* Desktop: three across. A last row of one or two is pulled into the middle, because a
 * lone card hard against the left edge reads as a layout that broke rather than a fourth
 * package. Each breakpoint owns its own centring, so nothing has to be undone at the next
 * one down. */
@media (min-width: 1025px) {
	.nlcs-tiers--3up > .nlcs-tier:nth-child(3n+1):last-child {
		grid-column-start: 3;
	}

	.nlcs-tiers--3up > .nlcs-tier:nth-child(3n+1):nth-last-child(2) {
		grid-column-start: 2;
	}

	.nlcs-tiers--3up > .nlcs-tier:nth-child(3n+1):nth-last-child(2) + .nlcs-tier {
		grid-column-start: 4;
	}

	.nlcs-tiers--2up > .nlcs-tier:nth-child(2n+1):last-child {
		grid-column-start: 2;
	}
}

/* Tablet: three packages across is where a card first gets too narrow for a line like
 * "Premium end-of-aisle location" to hold together, so it drops to two. */
@media (min-width: 641px) and (max-width: 1024px) {
	.nlcs-tiers {
		--nlcs-tier-pad: 24px;

		gap: 20px;
	}

	.nlcs-tiers--3up {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.nlcs-tiers--3up > .nlcs-tier:nth-child(2n+1):last-child,
	.nlcs-tiers--2up > .nlcs-tier:nth-child(2n+1):last-child {
		grid-column-start: 2;
	}

	.nlcs-tiers .nlcs-tier__amount {
		font-size: 2.375rem;
	}
}

@media (max-width: 782px) {
	.nlcs-hub__title {
		font-size: 1.6rem;
	}

	.nlcs-hub__card {
		padding: 18px;
	}

	/* The booking facts stay two across — one per row makes a very long card. */
	.nlcs-hub__facts {
		grid-template-columns: 1fr 1fr;
	}
}

/* Phone: one package at a time, and each card keeps its full internal spacing — a pricing
 * card that has the screen to itself should not read as a cramped one. */
@media (max-width: 640px) {
	.nlcs-tiers {
		--nlcs-tier-pad: 22px;

		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	/* One column, so every card takes it whole — including the ones the wider layouts
	 * had offset into the middle. */
	.nlcs-tiers > .nlcs-tier {
		grid-column: 1 / -1;
	}

	.nlcs-tiers .nlcs-tier__amount {
		font-size: 2.25rem;
	}

	/* Paired fields stack: half a phone width is narrower than the words in the label. */
	.nlcs-form__row {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.nlcs-form__grid > .is-half {
		grid-column: span 2;
	}

	/* The card keeps its shape but stops eating the screen in padding. */
	.nlcs-form {
		--nlcs-form-pad: 24px;
		--nlcs-form-radius: 16px;
	}
}

@media (max-width: 560px) {
	/* Everything that was a grid becomes a single column: at this width a second column is
	   narrower than the words inside it. */
	.nlcs-vendors,
	.nlcs-giveaways {
		grid-template-columns: 1fr;
	}

	.nlcs-hub__facts {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.nlcs-hub__card {
		padding: 16px;
	}

	/* A vendor card stacks so the logo is not fighting the name for room. */
	.nlcs-vendor {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	.nlcs-vendor__logo {
		width: 48px;
		height: 48px;
	}

	.nlcs-giveaway__foot {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	/* Tapping a full-width button is much easier than aiming at a text link. */
	.nlcs-form__submit,
	.nlcs-hub__btn {
		width: 100%;
		text-align: center;
	}

	.nlcs-checks .nlcs-check {
		font-size: .8rem;
	}
}

/* ---------- Category grid ("What You'll Find") ----------
 * Tiles, not cards: a rounded icon plate with the name under it, on whatever background
 * the page gives it. Every colour is a variable so Breakdance can retheme the block from
 * the page without touching this file.
 */

.nlcs-cats-block {
	--nlcs-cat-accent: #e00025;
	--nlcs-cat-plate: rgba(255, 255, 255, .92);
	--nlcs-cat-plate-radius: 16px;
	--nlcs-cat-size: 96px;
	/* The plate is deliberately tight — the logo is the thing being read, not the white
	   square behind it. */
	--nlcs-cat-plate-pad: 8px;
	--nlcs-cat-gap: 28px;
}

.nlcs-cats-block .nlcs-cats__head {
	max-width: 46rem;
	margin: 0 auto 40px;
	text-align: center;
}

/* Scoped through the block on purpose: a page builder styles its headings with selectors
   like `.breakdance h2`, which outranks a bare `.nlcs-cats__title`. */
.nlcs-cats-block .nlcs-cats__eyebrow {
	margin: 0 0 12px;
	color: var(--nlcs-cat-accent);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1.3;
}

.nlcs-cats-block .nlcs-cats__title {
	margin: 0 0 14px;
	/* Scales with the viewport rather than stepping at a breakpoint — a long headline has
	   to survive a phone without wrapping into five lines. */
	font-size: clamp(1.6rem, 4.5vw, 2.75rem);
	line-height: 1.1;
}

.nlcs-cats-block .nlcs-cats__sub {
	margin: 0;
	font-size: clamp(.95rem, 1.6vw, 1.05rem);
	line-height: 1.5;
	opacity: .8;
}

.nlcs-cats {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--nlcs-cat-gap, 28px);
	align-items: start;
}

.nlcs-cats--2up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nlcs-cats--3up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nlcs-cats--4up { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nlcs-cats--5up { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nlcs-cats--6up { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.nlcs-cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
	text-decoration: none;
	color: inherit;
}

.nlcs-cat__icon {
	display: grid;
	place-items: center;
	width: var(--nlcs-cat-size);
	height: var(--nlcs-cat-size);
	padding: var(--nlcs-cat-plate-pad, 8px);
	border-radius: var(--nlcs-cat-plate-radius);
	background: var(--nlcs-cat-plate);
}

.nlcs-cat__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* No icon uploaded yet — initials keep the grid even instead of leaving a hole. */
.nlcs-cat__initials {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--nlcs-cat-accent);
	font-weight: 800;
	font-size: 1.375rem;
	line-height: 1;
}

.nlcs-cats .nlcs-cat__name {
	margin: 0;
	font-size: clamp(.85rem, 1.4vw, 1rem);
	line-height: 1.3;
	/* A two-word category must not push its neighbour's name out of line, so the name box
	   is free to wrap and the tiles stay top-aligned. */
	overflow-wrap: anywhere;
}

/* Only a linked tile reacts to the pointer — a plain one is not clickable and must not
   pretend to be. */
.nlcs-cat--link {
	transition: transform .18s ease, opacity .18s ease;
}

.nlcs-cat--link:hover,
.nlcs-cat--link:focus-visible {
	transform: translateY(-3px);
}

.nlcs-cat--link:hover .nlcs-cat__name,
.nlcs-cat--link:focus-visible .nlcs-cat__name {
	color: var(--nlcs-cat-accent);
}

@media (prefers-reduced-motion: reduce) {
	.nlcs-cat--link {
		transition: none;
	}

	.nlcs-cat--link:hover,
	.nlcs-cat--link:focus-visible {
		transform: none;
	}
}

/* Small laptops and landscape tablets: six across leaves a tile narrower than its name. */
@media (max-width: 1100px) {
	.nlcs-cats-block {
		--nlcs-cat-gap: 24px;
	}

	.nlcs-cats--5up,
	.nlcs-cats--6up {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Portrait tablets. */
@media (max-width: 820px) {
	.nlcs-cats-block {
		--nlcs-cat-size: 86px;
		--nlcs-cat-gap: 20px;
	}

	.nlcs-cats-block .nlcs-cats__head {
		margin-bottom: 32px;
	}

	.nlcs-cats--4up,
	.nlcs-cats--5up,
	.nlcs-cats--6up {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Phones. Three across still fits a 74px plate at 360px wide, and keeps the block from
   turning into a very long scroll. */
@media (max-width: 560px) {
	.nlcs-cats-block {
		--nlcs-cat-size: 74px;
		--nlcs-cat-gap: 16px;
		--nlcs-cat-plate-radius: 14px;
		--nlcs-cat-plate-pad: 6px;
	}

	.nlcs-cats-block .nlcs-cats__head {
		margin-bottom: 26px;
	}

	.nlcs-cats,
	.nlcs-cats--3up,
	.nlcs-cats--4up,
	.nlcs-cats--5up,
	.nlcs-cats--6up {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.nlcs-cats--2up {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Narrow phones — two across, so the name has room to stay on one or two lines. */
@media (max-width: 380px) {
	.nlcs-cats,
	.nlcs-cats--3up,
	.nlcs-cats--4up,
	.nlcs-cats--5up,
	.nlcs-cats--6up {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- Raffle registration ----------
 * A self-contained card: centred heading, an intro block, the eligibility rules, then the
 * form. Every colour is a variable so Breakdance can retheme it from the page without
 * touching this file.
 */

.nlcs-raffle {
	--nlcs-raffle-accent: #b31217;
	--nlcs-raffle-surface: #fff;
	--nlcs-raffle-ink: #1a1a1a;
	--nlcs-raffle-muted: #3f4a5a;
	--nlcs-raffle-rule: #d7dbe0;
	--nlcs-raffle-radius: 10px;

	box-sizing: border-box;
	max-width: 860px;
	margin: 0 auto 24px;
	padding: 40px 48px 48px;
	border-radius: var(--nlcs-raffle-radius);
	background: var(--nlcs-raffle-surface);
	color: var(--nlcs-raffle-ink);
	box-shadow: 0 2px 14px rgba(0, 0, 0, .07);
}

.nlcs-raffle *,
.nlcs-raffle *::before,
.nlcs-raffle *::after {
	box-sizing: inherit;
}

.nlcs-raffle__title {
	margin: 0 0 14px;
	color: var(--nlcs-raffle-accent);
	font-size: clamp(1.6rem, 3.4vw, 2.1rem);
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
}

/* The one-line answer to "when?" — the largest thing after the heading, because on the
   not-open-yet card it is the only thing the visitor came for. */
.nlcs-raffle__when {
	margin: 0 0 12px;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}

.nlcs-raffle__lead {
	margin: 0 0 22px;
	color: var(--nlcs-raffle-muted);
	font-size: 1rem;
	line-height: 1.6;
	text-align: center;
}

.nlcs-raffle__lead p {
	margin: 0 0 8px;
}

.nlcs-raffle__lead p:last-child {
	margin-bottom: 0;
}

.nlcs-raffle__deadline {
	color: var(--nlcs-raffle-accent);
}

/* The next window, under the deadline it softens. Deliberately not in the accent colour: two
   red lines of equal weight and the urgent one stops being urgent. */
.nlcs-raffle__resumes {
	margin: 4px 0 0;
	font-size: .95em;
	opacity: .85;
}

/* Every window, listed under the countdown. Only rendered when registration runs in more than
   one stretch — somebody who cannot make the first one has not missed the raffle, and this is
   the only place that says so. */
.nlcs-raffle__windows {
	margin: 0 0 22px;
	text-align: center;
}

.nlcs-raffle__windows-title {
	margin: 0 0 8px;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--nlcs-raffle-muted);
}

.nlcs-raffle__windows ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nlcs-raffle__windows li {
	margin: 0 0 4px;
	font-size: 1rem;
	line-height: 1.5;
}

.nlcs-raffle__windows li:last-child {
	margin-bottom: 0;
}

/* Eligibility rules read as a paragraph, not a centred banner — they are scanned line by
   line, and centred body text is hostile to that. */
.nlcs-raffle__rules {
	margin: 0 0 26px;
	color: var(--nlcs-raffle-muted);
	font-size: .98rem;
	line-height: 1.65;
	text-align: left;
}

.nlcs-raffle__rules p {
	margin: 0 0 8px;
}

.nlcs-raffle__rules p:last-child {
	margin-bottom: 0;
}

.nlcs-raffle__result {
	margin: 0 0 18px;
	text-align: center;
}

.nlcs-raffle__result ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.5;
}

/* ---------- Raffle form ---------- */

.nlcs-raffle__row {
	display: grid;
	gap: 0 20px;
}

.nlcs-raffle__row--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nlcs-raffle__row--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nlcs-raffle__field {
	margin: 0 0 18px;
}

.nlcs-raffle__field label {
	display: block;
	margin-bottom: 7px;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.3;
}

.nlcs-raffle__req {
	color: var(--nlcs-raffle-accent);
}

.nlcs-raffle__field input,
.nlcs-raffle__field select {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--nlcs-raffle-rule);
	border-radius: 4px;
	background: #fff;
	color: var(--nlcs-raffle-ink);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.3;
}

.nlcs-raffle__field input::placeholder {
	color: #9aa3ad;
}

.nlcs-raffle__field input:focus,
.nlcs-raffle__field select:focus {
	border-color: var(--nlcs-raffle-accent);
	outline: 2px solid rgba(179, 18, 23, .18);
	outline-offset: 0;
}

/* The native arrow is inconsistent across browsers, so it is drawn here — as a background
   image rather than a pseudo-element, which a <select> cannot carry. */
.nlcs-raffle__field select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5462' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px 18px;
}

.nlcs-raffle__submit {
	display: block;
	width: 100%;
	padding: 15px 20px;
	border: 0;
	border-radius: 4px;
	background: var(--nlcs-raffle-accent);
	color: #fff;
	font-family: inherit;
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .15s ease;
}

.nlcs-raffle__submit:hover {
	background: #8f0e12;
}

.nlcs-raffle__submit:focus-visible {
	outline: 3px solid rgba(179, 18, 23, .35);
	outline-offset: 2px;
}

/* The same button, as a link on the confirmation. Sized to its text rather than the full
   width the form's submit takes: the entry is already in, so this is an offer, not the next
   step. `text-decoration` and `color` are stated because a theme styles links, not buttons. */
.nlcs-raffle__again {
	margin: 26px 0 0;
	text-align: center;
}

.nlcs-raffle__submit--again {
	display: inline-block;
	width: auto;
	padding: 13px 30px;
	color: #fff;
	text-decoration: none;
}

/* Stack the name and phone/zip rows rather than squeezing three inputs across a phone. */
@media (max-width: 680px) {
	.nlcs-raffle {
		padding: 28px 22px 32px;
	}

	.nlcs-raffle__row--2,
	.nlcs-raffle__row--3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

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

.nlcs-countdown {
	margin: 0 0 24px;
	text-align: center;
}

.nlcs-countdown__label {
	margin: 0 0 10px;
	color: var(--nlcs-raffle-muted, #3f4a5a);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.nlcs-countdown__clock {
	display: flex;
	justify-content: center;
	gap: 10px;
}

.nlcs-countdown__unit {
	flex: 0 1 96px;
	padding: 14px 8px 11px;
	border-radius: 8px;
	background: var(--nlcs-raffle-accent, #b31217);
	color: #fff;
}

.nlcs-countdown__num {
	display: block;
	font-size: 2.1rem;
	font-weight: 800;
	line-height: 1.05;
	/* Tabular figures: without them the whole clock jitters sideways every second as the
	   digits change width. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.nlcs-countdown__name {
	display: block;
	margin-top: 4px;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .85;
}

/* Once it runs out the block is replaced by a single sentence, so the boxes must not keep
   their layout. */
.nlcs-countdown.is-done {
	padding: 14px;
	border-radius: 8px;
	background: rgba(0, 0, 0, .03);
	color: var(--nlcs-raffle-muted, #3f4a5a);
	font-weight: 600;
}

@media (max-width: 520px) {
	.nlcs-countdown__clock {
		gap: 6px;
	}

	.nlcs-countdown__unit {
		flex: 1 1 0;
		padding: 11px 4px 9px;
	}

	.nlcs-countdown__num {
		font-size: 1.5rem;
	}

	.nlcs-countdown__name {
		font-size: .62rem;
		letter-spacing: .04em;
	}
}

/* ---------- Theme-proofing ----------
 * Breakdance styles headings and form controls globally, and a bare class selector loses to
 * its `.bde-section h2`-style rules — which is how the raffle heading ended up unreadable.
 * Repeating the block class raises specificity above the theme without resorting to
 * !important, which would take the colours away from the page builder for good.
 */

.nlcs-raffle.nlcs-raffle .nlcs-raffle__title {
	color: var(--nlcs-raffle-accent);
	font-size: clamp(1.6rem, 3.4vw, 2.1rem);
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-transform: none;
}

.nlcs-raffle.nlcs-raffle .nlcs-raffle__when,
.nlcs-raffle.nlcs-raffle .nlcs-raffle__windows li,
.nlcs-raffle.nlcs-raffle .nlcs-raffle__field label {
	color: var(--nlcs-raffle-ink);
}

/* A theme's h3 rule would otherwise size this like a section heading; it is a label over a
   short list, and the list is the part worth reading. */
.nlcs-raffle.nlcs-raffle .nlcs-raffle__windows-title {
	color: var(--nlcs-raffle-muted);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .12em;
	line-height: 1.4;
	text-align: center;
	text-transform: uppercase;
}

.nlcs-raffle.nlcs-raffle .nlcs-raffle__lead,
.nlcs-raffle.nlcs-raffle .nlcs-raffle__rules {
	color: var(--nlcs-raffle-muted);
}

.nlcs-raffle.nlcs-raffle .nlcs-raffle__deadline {
	color: var(--nlcs-raffle-accent);
	font-weight: 600;
}

.nlcs-raffle.nlcs-raffle .nlcs-countdown__num,
.nlcs-raffle.nlcs-raffle .nlcs-countdown__name {
	color: #fff;
}

.nlcs-raffle.nlcs-raffle .nlcs-raffle__submit {
	color: #fff;
}

/* Doubled up alongside the rest of this block for the same reason: the "register another
   person" control is an <a>, and a theme that colours and underlines links would otherwise
   win against a single class and turn the button back into blue text. */
.nlcs-raffle.nlcs-raffle a.nlcs-raffle__submit--again,
.nlcs-raffle.nlcs-raffle a.nlcs-raffle__submit--again:hover,
.nlcs-raffle.nlcs-raffle a.nlcs-raffle__submit--again:focus {
	color: #fff;
	text-decoration: none;
}

/* Preview banner. Amber and full-bleed across the card so it cannot be mistaken for part of
   the raffle itself — a preview that reads as the live page is worse than no preview. */
.nlcs-raffle__preview {
	margin: -12px 0 22px;
	padding: 12px 16px;
	border: 1px solid #e6c200;
	border-left: 4px solid #e6c200;
	border-radius: 6px;
	background: #fffbe6;
	color: #5c4a00;
	font-size: .9rem;
	line-height: 1.5;
	text-align: left;
}

.nlcs-raffle__preview strong {
	display: block;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .78rem;
}

/* The standalone page runs without the theme's own link styling, and a theme that does style
   links has no reason to have picked a colour that reads on this yellow. Kept to the banner's
   own text colour, underlined so it is still obviously a link without one. */
.nlcs-raffle__preview a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}

/* ---------- Standalone raffle page ----------
 * /raffles/ runs without the theme's header and footer, so nothing else on the page is
 * providing a background, a width, or vertical rhythm. These rules do only that much — the
 * card itself is styled above and is shared with embedded copies.
 *
 * Selectors are doubled on the body class to outrank a theme's own `body` rules, which load
 * from wp_head() on this page just as they do everywhere else.
 */

body.nlcs-raffle-standalone.nlcs-raffle-standalone {
	margin: 0;
	padding: 0;
	background: #f2f3f5;
	/* The theme's font still applies — only its layout is being skipped, not its typography. */
	color: #1a1a1a;
}

.nlcs-raffle-standalone .nlcs-raffle-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
	min-height: 100vh;
	padding: 40px 20px;
	box-sizing: border-box;
}

/* The only way back to the site, so it is a real target rather than a decorative mark. */
.nlcs-raffle-standalone .nlcs-raffle-page__brand {
	display: inline-block;
	text-decoration: none;
	color: inherit;
	font-weight: 800;
	font-size: 1.15rem;
	letter-spacing: .02em;
}

.nlcs-raffle-standalone .nlcs-raffle-page__brand img {
	display: block;
	max-width: 200px;
	max-height: 72px;
	width: auto;
	height: auto;
}

.nlcs-raffle-standalone .nlcs-raffle {
	width: 100%;
	margin: 0;
}

.nlcs-raffle-standalone .nlcs-raffle-page__foot {
	margin: 0;
	color: #6b7280;
	font-size: .8rem;
	text-align: center;
}

/* The admin bar is fixed, so a full-height page sits underneath it without this. */
.nlcs-raffle-standalone.admin-bar .nlcs-raffle-page {
	min-height: calc(100vh - 32px);
}

@media (max-width: 782px) {
	.nlcs-raffle-standalone.admin-bar .nlcs-raffle-page {
		min-height: calc(100vh - 46px);
	}
}

/* ---------- One font, the site's own ----------
 * Everything in the raffle block follows the page's font rather than declaring one.
 *
 * Headings are the reason this is needed: a theme almost always gives h1–h3 a different family
 * from body text, and where the theme's CSS does not reach — the standalone /raffles/ page has
 * no theme header — an unstyled <h2> falls back to the browser's default serif while the
 * paragraph beside it does not. Inheriting means the card is typeset in whatever the site is
 * typeset in, and changing the site's font changes this too, with nothing to keep in step.
 *
 * Form controls need it spelled out for a different reason: browsers give input, select,
 * button and textarea a system font that does not inherit unless asked.
 */
.nlcs-raffle,
.nlcs-raffle h1,
.nlcs-raffle h2,
.nlcs-raffle h3,
.nlcs-raffle p,
.nlcs-raffle label,
.nlcs-raffle li,
.nlcs-raffle strong,
.nlcs-raffle input,
.nlcs-raffle select,
.nlcs-raffle textarea,
.nlcs-raffle button,
.nlcs-countdown,
.nlcs-countdown__num,
.nlcs-countdown__name,
.nlcs-raffle-page__brand,
.nlcs-raffle-page__foot {
	font-family: inherit;
}

/* The check-your-spam note on the confirmation. Called out rather than buried in the
   paragraph — missing that email is how a winner never finds out they won. */
.nlcs-raffle__spam {
	padding: 14px 16px;
	border: 1px solid #e6c200;
	border-radius: 6px;
	background: #fffbe6;
	color: #5c4a00;
	text-align: left;
}

.nlcs-raffle__spam strong {
	display: block;
	margin-bottom: 2px;
}

/* The duplicate-email notice under the field. */
.nlcs-raffle__note {
	display: block;
	margin-top: 6px;
	font-size: .85rem;
	line-height: 1.4;
	color: var(--nlcs-raffle-muted);
}

.nlcs-raffle__note.is-error {
	color: var(--nlcs-raffle-accent);
	font-weight: 600;
}

.nlcs-raffle__field input.is-error {
	border-color: var(--nlcs-raffle-accent);
	outline: 2px solid rgba(179, 18, 23, .18);
}

/* A disabled submit must look disabled, or it reads as an unresponsive button. */
.nlcs-raffle__submit[disabled] {
	opacity: .55;
	cursor: not-allowed;
}

/* ---------- Upcoming shows — [nlcs_events] ----------
 * The schedule block: a homepage teaser of the next few shows, and the whole list on the
 * schedule page. Every colour is a variable so Breakdance can retheme the block from the
 * page without touching this file — the section sits on a dark band in the design, and the
 * cards are light against it.
 */

.nlcs-events-block {
	--nlcs-ev-accent: #e00025;
	--nlcs-ev-surface: #fff;
	--nlcs-ev-ink: #16181d;
	--nlcs-ev-muted: #6b7280;
	--nlcs-ev-rule: rgba(0, 0, 0, .09);
	--nlcs-ev-tag: rgba(0, 0, 0, .05);
	--nlcs-ev-radius: 16px;
	--nlcs-ev-gap: 28px;

	text-align: left;
}

/*
 * The block reads left, whatever the section around it does.
 *
 * A Breakdance section centres its contents by setting text-align on an ancestor, and that
 * inherits straight through into the cards — the heading, the venue line and the price
 * footer all centre themselves without a single rule naming them. Inheritance cannot be
 * fought from the ancestor's side, so every text element that could receive it says what it
 * wants. Scoped through the block because a page builder styles its headings with selectors
 * like `.breakdance h2`, which outranks a bare `.nlcs-events__title`.
 */
.nlcs-events-block .nlcs-events__eyebrow,
.nlcs-events-block .nlcs-events__title,
.nlcs-events-block .nlcs-events__sub,
.nlcs-events-block .nlcs-events__empty,
.nlcs-events .nlcs-ev__title,
.nlcs-events .nlcs-ev__venue,
.nlcs-events .nlcs-ev__tag,
.nlcs-events .nlcs-ev__price,
.nlcs-events .nlcs-ev__more {
	text-align: left;
}

.nlcs-events-block .nlcs-events__head {
	max-width: 46rem;
	margin: 0 0 36px;
}

/* Scoped through the block on purpose: a page builder styles its headings with selectors
   like `.breakdance h2`, which outranks a bare `.nlcs-events__title`. */
.nlcs-events-block .nlcs-events__eyebrow {
	margin: 0 0 12px;
	color: var(--nlcs-ev-accent);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1.3;
}

.nlcs-events-block .nlcs-events__title {
	margin: 0 0 14px;
	/* Scales with the viewport rather than stepping at a breakpoint — a long headline has
	   to survive a phone without wrapping into five lines. */
	font-size: clamp(1.7rem, 4.5vw, 2.9rem);
	line-height: 1.05;
}

.nlcs-events-block .nlcs-events__sub {
	margin: 0;
	font-size: clamp(.95rem, 1.6vw, 1.05rem);
	line-height: 1.5;
	opacity: .8;
}

.nlcs-events {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--nlcs-ev-gap, 28px);
	align-items: stretch;
}

.nlcs-events--1up { grid-template-columns: minmax(0, 1fr); }
.nlcs-events--2up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nlcs-events--3up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nlcs-events--4up { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.nlcs-ev {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--nlcs-ev-surface);
	color: var(--nlcs-ev-ink);
	border-radius: var(--nlcs-ev-radius);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 28px rgba(0, 0, 0, .10);
	transition: transform .18s ease, box-shadow .18s ease;
}

.nlcs-ev:hover,
.nlcs-ev:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 18px 38px rgba(0, 0, 0, .16);
}

/* A show already behind us still appears when show="all", and must not compete with the
   ones you can still buy a ticket to. */
.nlcs-ev.is-past {
	opacity: .72;
}

/* The same three Safari-proofing rules as .nlcs-giveaway__media above — see the note there for
   why the image is pinned to four edges rather than sized `height: 100%`. */
.nlcs-ev__media {
	position: relative;
	flex: none;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	/* No featured image yet: a flat plate keeps every card the same height instead of
	   leaving one short. */
	background: #e7e8ea;
}

.nlcs-ev__media img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@supports not (aspect-ratio: 16 / 10) {
	.nlcs-ev__media {
		height: 0;
		padding-bottom: 62.5%;
	}
}

/* The date pill. Top-left over the image, where it is read before the title. */
.nlcs-ev__date {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 1;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--nlcs-ev-accent);
	color: #fff;
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.2;
	white-space: nowrap;
}

.nlcs-ev__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* Takes the slack so the price footer sits on the bottom edge of every card, whatever
	   the title above it does. */
	flex: 1 1 auto;
	padding: 18px 20px 16px;
}

.nlcs-ev__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}

.nlcs-events .nlcs-ev__tag {
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--nlcs-ev-tag);
	color: var(--nlcs-ev-muted);
	font-size: .6875rem;
	font-weight: 600;
	line-height: 1.4;
}

.nlcs-events .nlcs-ev__title {
	margin: 2px 0 0;
	color: var(--nlcs-ev-ink);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.25;
}

.nlcs-events .nlcs-ev__title a {
	color: inherit;
	text-decoration: none;
}

/* The title's link is stretched over the whole card, so the tile is one target without
   nesting the tags and the price inside an anchor. */
.nlcs-events .nlcs-ev__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.nlcs-events .nlcs-ev__title a:focus-visible::after {
	outline: 2px solid var(--nlcs-ev-accent);
	outline-offset: -3px;
	border-radius: var(--nlcs-ev-radius);
}

.nlcs-events .nlcs-ev__venue {
	margin: 0;
	color: var(--nlcs-ev-muted);
	font-size: .875rem;
	line-height: 1.45;
}

.nlcs-ev__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 20px 18px;
	border-top: 1px solid var(--nlcs-ev-rule);
}

.nlcs-ev__price {
	color: var(--nlcs-ev-ink);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.3;
}

.nlcs-ev__dot {
	color: var(--nlcs-ev-muted);
}

/* One line per admission tier. Runs on a single line when a show has no early access. */
.nlcs-ev__tier {
	display: block;
}

.nlcs-ev__tier + .nlcs-ev__tier {
	margin-top: 4px;
}

.nlcs-ev__more {
	color: var(--nlcs-ev-accent);
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.3;
	white-space: nowrap;
}

/* Nothing on the calendar. Said in a sentence rather than left as a hole in the page. */
.nlcs-events-block .nlcs-events__empty {
	margin: 0;
	padding: 28px 24px;
	border: 1px dashed currentColor;
	border-radius: var(--nlcs-ev-radius);
	opacity: .7;
}

/* ---------- Paging, under the grid ---------- */

.nlcs-events__pager {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 36px;
}

.nlcs-events-block .nlcs-events__page {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	justify-content: center;
	border: 1px solid currentColor;
	border-radius: 8px;
	color: inherit;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-decoration: none;
	line-height: 1;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.nlcs-events-block .nlcs-events__page:hover,
.nlcs-events-block .nlcs-events__page:focus-visible {
	background: var(--nlcs-ev-accent);
	border-color: var(--nlcs-ev-accent);
	color: #fff;
}

/* The page you are on is a label, not a link — it is filled rather than outlined so that
   reads at a glance without having to compare it to its neighbours. */
.nlcs-events-block .nlcs-events__page.is-current {
	background: var(--nlcs-ev-accent);
	border-color: var(--nlcs-ev-accent);
	color: #fff;
	cursor: default;
}

.nlcs-events-block .nlcs-events__gap {
	padding: 0 2px;
	opacity: .55;
}

/* The count sits at the far end of the same row on a wide screen, and drops under the
   numbers when there is no room for it. */
.nlcs-events-block .nlcs-events__count {
	margin: 0 0 0 auto;
	font-size: .8125rem;
	line-height: 1.4;
	opacity: .7;
}

/* The one exception to the block's left alignment: the button centres under the grid, so it
   reads as the end of the whole section rather than the end of the first column. Said here
   rather than left to inheritance, which would centre it or not depending on the section it
   is dropped into. */
.nlcs-events-block .nlcs-events__cta {
	margin: 36px 0 0;
	text-align: center;
}

/* Outlined rather than filled: the cards above already carry the red, and this is the
   quieter of the two things to do next. Inherits the section's colour so it works on the
   dark band without a second rule. */
.nlcs-events-block .nlcs-events__btn {
	display: inline-block;
	padding: 14px 28px;
	border: 1px solid currentColor;
	border-radius: 8px;
	color: inherit;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	transition: background-color .18s ease, color .18s ease;
}

.nlcs-events-block .nlcs-events__btn:hover,
.nlcs-events-block .nlcs-events__btn:focus-visible {
	background: var(--nlcs-ev-accent);
	border-color: var(--nlcs-ev-accent);
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.nlcs-ev,
	.nlcs-events-block .nlcs-events__btn,
	.nlcs-events-block .nlcs-events__page {
		transition: none;
	}

	.nlcs-ev:hover,
	.nlcs-ev:focus-within {
		transform: none;
	}
}

/* Small laptops: four across leaves a card too narrow for its venue line. */
@media (max-width: 1100px) {
	.nlcs-events-block {
		--nlcs-ev-gap: 22px;
	}

	.nlcs-events--4up {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Portrait tablets. */
@media (max-width: 900px) {
	.nlcs-events--3up,
	.nlcs-events--4up {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Phones — one card across, full width. */
@media (max-width: 600px) {
	.nlcs-events-block .nlcs-events__head {
		margin-bottom: 28px;
	}

	.nlcs-events,
	.nlcs-events--2up,
	.nlcs-events--3up,
	.nlcs-events--4up {
		grid-template-columns: minmax(0, 1fr);
	}

	.nlcs-events-block .nlcs-events__cta {
		margin-top: 28px;
	}

	/* The word beside the arrow goes; the arrow alone is unambiguous once the row is this
	   tight, and it keeps Previous, the numbers and Next on one line. */
	.nlcs-events-block .nlcs-events__page--arrow span {
		display: none;
	}

	.nlcs-events-block .nlcs-events__page {
		min-width: 38px;
		height: 38px;
		padding: 0 10px;
	}

	/* No room to sit beside the numbers, so it takes its own line under them. */
	.nlcs-events-block .nlcs-events__count {
		flex: 1 0 100%;
		margin-left: 0;
	}
}

/* ---------- Next event — [nlcs_next_event] ----------
 * The hero panel: one show, four facts. Sits on the red band beside the headline, so it is
 * a light card carrying its own colours rather than inheriting the section's. Every colour
 * is a variable so Breakdance can retheme it from the page without touching this file.
 */

.nlcs-next {
	--nlcs-next-accent: #e00025;
	--nlcs-next-surface: #fff;
	--nlcs-next-ink: #16181d;
	--nlcs-next-muted: #6b7280;
	--nlcs-next-rule: rgba(0, 0, 0, .12);
	--nlcs-next-radius: 14px;
	/* The buttons theme separately from the card so a page can put its own brand colour on the
	   primary action without restating the card's ink and surface.
	   The hover is its own value now that the resting state is the accent — it used to BE the
	   accent, which would leave a red button hovering to the red it already is. */
	--nlcs-next-btn-bg: var(--nlcs-next-accent);
	--nlcs-next-btn-bg-hover: #b3001d;
	--nlcs-next-btn-ink: #fff;
	--nlcs-next-btn-radius: 999px;
	/* A variable like the rest of the card, so a page can size the pair without restating the
	   shape rule. 15px against the card's 13px labels — the buttons are the thing being pressed
	   and they were reading smaller than the venue line above them. */
	--nlcs-next-btn-size: .9375rem;
	/* The second button's fill. The site's blue, the same one [nlcs_ticket_link] carries — and
	   its own variable rather than the accent, because the accent is the card's red and this
	   button is deliberately not red. */
	--nlcs-next-btn-alt: #2b3bdb;
	--nlcs-next-btn-alt-hover: #1f2cb0;
	--nlcs-next-btn-alt-ink: #fff;
	/* The early-access plate's outline: the accent at a weight that frames without shouting. */
	--nlcs-next-plate-early: rgba(224, 0, 37, .38);

	display: flex;
	flex-direction: column;
	padding: 32px;
	background: var(--nlcs-next-surface);
	color: var(--nlcs-next-ink);
	border-radius: var(--nlcs-next-radius);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 24px 48px rgba(0, 0, 0, .22);
	/* The section around it centres its contents; the card reads left regardless. */
	text-align: left;
}

/* Scoped through the card on purpose: a page builder styles its text with selectors like
   `.breakdance p`, which outranks a bare `.nlcs-next__date`. */
.nlcs-next .nlcs-next__label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	color: var(--nlcs-next-ink);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.3;
}

.nlcs-next__dot {
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: currentColor;
}

/* Two columns: when and where on the left, what it costs on the right. The prices used to run
   along the footer, where the upgrade sat under the general price and read as one confusing
   number. Beside the date they are a panel somebody compares. Wraps to a stack rather than
   squeezing, because neither column survives being halved. */
.nlcs-next__top {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 16px;
}

/* No min-width override: the automatic minimum keeps this column as wide as the date, so the
   two never share a line at a width that would break "NOV 21–22" across two of them.
   The lopsided grow is deliberate — see the panel below. */
.nlcs-next__main {
	flex: 100 1 150px;
}

/* Grows, but next to nothing beside a column that grows a hundred times faster: sharing a line
   it keeps its 180px and the slack goes to the date, and on the line of its own it gets after
   wrapping it is the only thing there to grow, so it fills the width instead of leaving a
   column of white beside it. */
.nlcs-next__pricing {
	flex: 1 1 180px;
}

.nlcs-next .nlcs-next__date {
	margin: 0 0 16px;
	color: var(--nlcs-next-ink);
	/* Scales with the viewport rather than stepping at a breakpoint — "DEC 30 – JAN 1" is
	   twice the width of "NOV 21–22" and still has to fit the same card. Capped lower than it
	   once was now that the price panel shares the row. */
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1;
	/* Never broken across lines. "NOV 21–" over "22" is worse than a card that drops the price
	   panel underneath, which is what this forces the row to do instead. */
	white-space: nowrap;
}

.nlcs-next .nlcs-next__venue {
	margin: 0 0 4px;
	color: var(--nlcs-next-ink);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
}

/* Under the venue and quieter than it: on a hero the room matters more than the name of a
   show whose name is already the headline above. */
.nlcs-next .nlcs-next__title {
	margin: 0;
	color: var(--nlcs-next-muted);
	font-size: .9375rem;
	font-weight: 400;
	line-height: 1.4;
}

.nlcs-next .nlcs-next__eyebrow {
	margin: 0 0 8px;
	color: var(--nlcs-next-accent);
	font-size: .625rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1.3;
}

/* Scoped through the card: a page builder's `.breakdance ul` carries its own padding and
   bullets, and would put a dot beside every price. */
.nlcs-next .nlcs-next__plates {
	list-style: none;
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
}

/* A plate per way in, rather than rows in a list — two prices in a flat list read as one
   number with a second one under it. */
.nlcs-next .nlcs-next__plate {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	padding: 9px 12px;
	border: 1px solid var(--nlcs-next-rule);
	border-radius: 8px;
	background: rgba(0, 0, 0, .02);
}

/* The upgrade carries the accent: it is the more expensive option, so it has to look like the
   better one rather than merely the lower box. */
.nlcs-next .nlcs-next__plate--early {
	border-color: var(--nlcs-next-plate-early);
	background: var(--nlcs-next-surface);
}

/* Name over hours, so a two-day hours string wraps under itself instead of into the price. */
.nlcs-next__plate-label {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.nlcs-next .nlcs-next__plate-name {
	color: var(--nlcs-next-muted);
	font-size: .625rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.2;
}

.nlcs-next .nlcs-next__plate--early .nlcs-next__plate-name {
	color: var(--nlcs-next-accent);
}

.nlcs-next .nlcs-next__plate-hours {
	color: var(--nlcs-next-muted);
	font-size: .6875rem;
	font-weight: 400;
	line-height: 1.3;
}

.nlcs-next .nlcs-next__plate-price {
	flex: none;
	color: var(--nlcs-next-ink);
	font-size: 1.375rem;
	font-weight: 900;
	letter-spacing: -.03em;
	line-height: 1;
}

/* Buttons only now that the prices sit up beside the date. */
.nlcs-next__foot {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 16px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--nlcs-next-rule);
}

/* The pair splits the row evenly, so the card ends on a straight edge whether it is carrying
   both buttons or only the ticket link. */
.nlcs-next__actions {
	display: flex;
	align-items: stretch;
	gap: 10px;
}

/* Basis 0 to share the row evenly; the automatic minimum still keeps each one as wide as its
   own words, so a longer label pushes the row rather than spilling out of the button. */
.nlcs-next .nlcs-next__actions > a {
	flex: 1 1 0;
}

/* Shared shape. The pair reads as one control group: same height, same rhythm, same weight —
   two filled plates, red for the thing being sold and blue for the thing being asked about.
   The padding scales with the label so the pill keeps its proportions rather than turning
   into a wide thin bar as the type grows. */
.nlcs-next .nlcs-next__cta,
.nlcs-next .nlcs-next__details {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 24px;
	border-radius: var(--nlcs-next-btn-radius);
	font-size: var(--nlcs-next-btn-size);
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	white-space: nowrap;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.nlcs-next .nlcs-next__cta {
	background: var(--nlcs-next-btn-bg);
	color: var(--nlcs-next-btn-ink);
	border: 1px solid transparent;
}

.nlcs-next .nlcs-next__cta:hover,
.nlcs-next .nlcs-next__cta:focus-visible {
	background: var(--nlcs-next-btn-bg-hover);
	color: var(--nlcs-next-btn-ink);
}

/* Solid blue with white type — a second filled button beside the ticket link rather than an
   outlined one. The border stays declared and transparent so this box measures exactly the
   same as the CTA's; dropping it would leave the pair 2px different in height. */
.nlcs-next .nlcs-next__details {
	background: var(--nlcs-next-btn-alt);
	color: var(--nlcs-next-btn-alt-ink);
	border: 1px solid transparent;
}

.nlcs-next .nlcs-next__details:hover,
.nlcs-next .nlcs-next__details:focus-visible {
	background: var(--nlcs-next-btn-alt-hover);
	color: var(--nlcs-next-btn-alt-ink);
}

/* The card's ink, not the accent: the button is the accent now, and a red ring around a red
   button is a focus state nobody can see. */
.nlcs-next .nlcs-next__cta:focus-visible {
	outline: 2px solid var(--nlcs-next-ink);
	outline-offset: 2px;
}

/* Its own ring, in its own colour — the card's red around a blue button reads as an error state. */
.nlcs-next .nlcs-next__details:focus-visible {
	outline: 2px solid var(--nlcs-next-btn-alt);
	outline-offset: 2px;
}

/* The arrow leads the eye out of the card, so it moves and the words do not. */
.nlcs-next__arrow {
	transition: transform .18s ease;
}

.nlcs-next .nlcs-next__cta:hover .nlcs-next__arrow,
.nlcs-next .nlcs-next__cta:focus-visible .nlcs-next__arrow {
	transform: translateX(3px);
}

/* Tickets not on sale yet: the same filled button, carrying a number instead of an arrow.
   It stays the loud one — calling is still the way in, so it should not read as a downgrade. */
.nlcs-next .nlcs-next__cta--call {
	gap: 10px;
}

/* A touch lighter than the words in front of it, so "Call Us" reads first and the digits
   read as the thing to dial. Matches the standalone ticket button's number. */
.nlcs-next__num {
	font-weight: 700;
	opacity: .92;
}

/* No show on the calendar, on a page that would look lopsided without the card. */
.nlcs-next--empty {
	justify-content: center;
	color: var(--nlcs-next-muted);
	text-align: center;
}

.nlcs-next--empty p {
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.nlcs-next .nlcs-next__cta,
	.nlcs-next .nlcs-next__details,
	.nlcs-next__arrow {
		transition: none;
	}

	.nlcs-next .nlcs-next__cta:hover .nlcs-next__arrow,
	.nlcs-next .nlcs-next__cta:focus-visible .nlcs-next__arrow {
		transform: none;
	}
}

@media (max-width: 600px) {
	.nlcs-next {
		padding: 24px;
	}

	.nlcs-next__foot {
		gap: 14px;
	}

	/* Full-width targets on a phone, tickets on top — thumb-sized rather than two half pills
	   sharing a line neither of them fits. */
	.nlcs-next__actions {
		flex-direction: column-reverse;
	}
}

/* ---------- Ticket link — [nlcs_ticket_link] ----------
 * The "Get Tickets" button on its own, for the header and hero. Self-contained so it looks
 * finished dropped into a bare Shortcode element, but every colour is a variable so a page
 * can retheme it — or hand in its own button classes and ignore all of this.
 */

.nlcs-ticket-link {
	--nlcs-ticket-bg: #2b3bdb;
	--nlcs-ticket-bg-hover: #1f2cb0;
	--nlcs-ticket-ink: #fff;
	--nlcs-ticket-radius: 999px;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/* Flush by default — no inherited link or theme margin nudging it out of the button row
	   it is dropped into. A page that wants space around it can add its own via class="…". */
	margin: 0;
	padding: 12px 24px;
	background: var(--nlcs-ticket-bg);
	color: var(--nlcs-ticket-ink);
	border: 1px solid transparent;
	border-radius: var(--nlcs-ticket-radius);
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	white-space: nowrap;
	transition: background-color .18s ease, color .18s ease;
}

.nlcs-ticket-link:hover,
.nlcs-ticket-link:focus-visible {
	background: var(--nlcs-ticket-bg-hover);
	color: var(--nlcs-ticket-ink);
}

.nlcs-ticket-link:focus-visible {
	outline: 2px solid var(--nlcs-ticket-bg);
	outline-offset: 2px;
}

/* The arrow leads the eye out to the checkout, so it moves and the words do not. */
.nlcs-ticket-link__arrow {
	transition: transform .18s ease;
}

.nlcs-ticket-link:hover .nlcs-ticket-link__arrow,
.nlcs-ticket-link:focus-visible .nlcs-ticket-link__arrow {
	transform: translateX(3px);
}

/* The number sits a touch lighter than the words in front of it, so "Call Us" reads first. */
.nlcs-ticket-link__num {
	font-weight: 700;
	opacity: .92;
}

/* Breakdance wraps a Shortcode element in .bde-shortcode at width:100%, which stretches this
   button's box across the row and wrings the button beside it onto three lines. Pull only the
   wrappers holding this button back to their content width — every other shortcode element on
   the page keeps Breakdance's default. */
.breakdance .bde-shortcode:has(.nlcs-ticket-link) {
	width: auto;
}

@media (prefers-reduced-motion: reduce) {
	.nlcs-ticket-link,
	.nlcs-ticket-link__arrow {
		transition: none;
	}

	.nlcs-ticket-link:hover .nlcs-ticket-link__arrow,
	.nlcs-ticket-link:focus-visible .nlcs-ticket-link__arrow {
		transform: none;
	}
}