/**
 * Sponsors.
 *
 * Two pieces: the logo band and the tiers cards. Both size themselves from the
 * level's prominence rather than from a fixed class list, because levels are
 * per-site config and a PTA can add a fourth one without touching CSS.
 *
 * No Tailwind here, and no theme-only tokens assumed: this has to render under
 * a foreign theme where no utilities are loaded, as Cox was under Divi until 2026-08-08. It uses
 * the --rt-* custom properties, which the plugin prints on every front-end
 * page, with literal fallbacks for anything that might be missing.
 */

/* ---- The logo band ---------------------------------------------------- */

.rt-sp-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2.5rem 3rem;
}

.rt-sp-item {
	/* --rt-sp-w is set inline, from the level's prominence step. */
	flex: 0 1 var(--rt-sp-w, 220px);
	max-width: var(--rt-sp-w, 220px);
	text-align: center;
}

.rt-sp-link {
	display: block;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

a.rt-sp-link:hover,
a.rt-sp-link:focus-visible {
	transform: translateY(-3px);
	opacity: 0.9;
}

.rt-sp-logo {
	display: block;
	width: 100%;
	height: auto;
	/*
	 * Cap the height as well as the width. Sponsor artwork arrives in whatever
	 * shape the business has: a tall stacked logo next to a wide wordmark at
	 * the same width makes the tall one tower over a level it did not pay for.
	 */
	max-height: calc(var(--rt-sp-w, 220px) * 0.55);
	object-fit: contain;
	margin: 0 auto;
}

/* Name shown when a sponsor has no logo yet. */
.rt-sp-name {
	display: block;
	font-family: var(--rt-font-heading, inherit);
	font-weight: 700;
	line-height: 1.25;
	color: inherit;
}

.rt-sp-item--large .rt-sp-name {
	font-size: 1.5rem;
}

.rt-sp-item--medium .rt-sp-name {
	font-size: 1.25rem;
}

.rt-sp-item--small .rt-sp-name {
	font-size: 1.05rem;
}

@media (max-width: 640px) {
	.rt-sp-band {
		gap: 1.5rem 1rem;
	}

	/*
	 * On a phone the band uses the whole row: two logos across for the large
	 * and medium levels, three across for the small (entry) level, where most
	 * sponsors sit. Sized from the row, never the viewport: two 42vw logos
	 * plus the gap came to 360px against the 350px a 390px phone has between
	 * the page margins, so every logo sat alone on its own line (Furi, 10-6).
	 * A short last row centers.
	 */
	.rt-sp-item {
		flex: 0 1 calc((100% - 1rem) / 2);
		max-width: calc((100% - 1rem) / 2);
	}

	.rt-sp-item--small {
		flex-basis: calc((100% - 2rem) / 3);
		max-width: calc((100% - 2rem) / 3);
	}
}

/* ---- The tiers cards --------------------------------------------------- */

/*
 * The store card's shape: crest band with one big glyph, name, price, the
 * benefits, and a button. Self-contained on purpose (no theme classes) so it
 * renders the same under a foreign theme. The band's gradient comes off the
 * site's own chrome and primary, which is how the meals and ticket cards get
 * their color without anybody sourcing artwork per tier.
 */
.rt-sp-levels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	align-items: stretch;
	justify-content: center;
	gap: 24px;
	margin: 28px 0;
	padding: 0;
	list-style: none;
}
/* Fewer cards than lanes: the tracks size to a card and the set centers
   (RallyTrain rule: a short row never parks left). Count classes come
   from the renderer, so this stays deterministic instead of relying on
   auto-fit, which counts lanes by the MAX and comes up short. */
@media (min-width: 760px) {
  .rt-sp-levels.rt-sp-levels--n1 { grid-template-columns: repeat(1, minmax(0, 360px)); justify-content: center; }
  .rt-sp-levels.rt-sp-levels--n2 { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; }
}
@media (min-width: 1100px) {
  .rt-sp-levels.rt-sp-levels--n3 { grid-template-columns: repeat(3, minmax(0, 360px)); justify-content: center; }
}


.rt-sp-level {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--rt-line, rgba(0, 0, 0, 0.1));
	border-radius: var(--rt-radius, 10px);
	overflow: hidden;
	background: var(--rt-white, #fff);
	box-shadow: var(--rt-shadow, 0 6px 24px rgba(0, 0, 0, 0.12));
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rt-sp-level:hover,
.rt-sp-level:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
}

@media (prefers-reduced-motion: reduce) {
	.rt-sp-level { transition: none; }
	.rt-sp-level:hover,
	.rt-sp-level:focus-within { transform: none; }
}

/* The band is the same slim brand strip the signup and store cards wear
   (site logo at the right on the dark chrome), underlined in the tier's
   color when the level has one, the primary otherwise. */
.rt-sp-level-art {
	flex: none;
	display: flex;
	align-items: center;
	min-height: 72px;
	padding: 12px 86px 12px 18px; /* room for the mark on the right */
	background-image: var(--rt-banner-logo, none);
	background-size: auto 54px;
	background-position: right 16px center;
	background-repeat: no-repeat;
	background-color: var(--rt-black, #141414);
	box-shadow: inset 0 -4px 0 var(--tier, var(--rt-primary, #b3141c));
}
/* A tinted level's band is the tier itself, brushed like the metal it is
   named for: dark at the top left, the tier color through the middle, a
   highlight at the bottom right. Works for any tier color, so Platinum,
   Golden and Silver each read as their own metal and a dark tier reads as
   brushed steel, with the site mark still at the right. */
.rt-sp-level--tinted .rt-sp-level-art {
	background-color: var(--tier);
	background-image: var(--rt-banner-logo, none), linear-gradient(135deg, color-mix(in srgb, var(--tier) 62%, #000) 0%, var(--tier) 42%, color-mix(in srgb, var(--tier) 55%, #fff) 78%, var(--tier) 100%);
	background-size: auto 54px, 100% 100%;
	background-position: right 16px center, 0 0;
	background-repeat: no-repeat, no-repeat;
	box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--tier) 55%, #000), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* The top tier glitters (Furi, 9-15: Platinum read like Silver). Its band is
   lifted toward white so it is the brightest metal on the page, a light
   sweeps across it every few seconds, and a scatter of small stars twinkle
   on their own beats. The name keeps the top layer. */
.rt-sp-level--top.rt-sp-level--tinted .rt-sp-level-art {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-image: var(--rt-banner-logo, none), linear-gradient(135deg, color-mix(in srgb, var(--tier) 75%, #000) 0%, var(--tier) 28%, color-mix(in srgb, var(--tier) 30%, #fff) 52%, var(--tier) 72%, color-mix(in srgb, var(--tier) 45%, #fff) 100%);
}
.rt-sp-level--top.rt-sp-level--tinted .rt-sp-level-art::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image:
		radial-gradient(circle, #fff 0 1.5px, transparent 2.5px),
		radial-gradient(circle, #fff 0 1px, transparent 2px),
		radial-gradient(circle, rgba(255,255,255,.9) 0 1.5px, transparent 2.5px),
		radial-gradient(circle, #fff 0 1px, transparent 2px),
		radial-gradient(circle, rgba(255,255,255,.8) 0 1px, transparent 2px),
		radial-gradient(circle, #fff 0 1.5px, transparent 2.5px);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: 8% 30%, 22% 72%, 37% 18%, 51% 64%, 63% 26%, 74% 78%;
	animation: rt-sp-glitter 2.2s ease-in-out infinite;
}
.rt-sp-level--top.rt-sp-level--tinted .rt-sp-level-art::after {
	content: "";
	position: absolute;
	top: -60%;
	left: -40%;
	z-index: 1;
	width: 24%;
	height: 220%;
	pointer-events: none;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
	transform: rotate(18deg);
	animation: rt-sp-sweep 4.5s ease-in-out infinite;
}
.rt-sp-level--top .rt-sp-level-label { position: relative; z-index: 2; }
@keyframes rt-sp-glitter {
	0%, 100% { opacity: .35; }
	25% { opacity: 1; }
	50% { opacity: .5; }
	75% { opacity: .9; }
}
@keyframes rt-sp-sweep {
	0%, 62% { left: -40%; opacity: 0; }
	66% { opacity: 1; }
	92%, 100% { left: 116%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.rt-sp-level--top.rt-sp-level--tinted .rt-sp-level-art::before { animation: none; opacity: .8; }
	.rt-sp-level--top.rt-sp-level--tinted .rt-sp-level-art::after { display: none; }
}

/* A tinted level wears its own color on the amount and benefit markers,
   so a Ranger/Silver/Red sponsor tier matches the membership tier of the
   same name. */
.rt-sp-level--tinted .rt-sp-level-amount,
.rt-sp-level--tinted .rt-sp-level-benefits li::before { color: var(--tier); }

.rt-sp-level-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	padding: 18px 18px 20px;
	text-align: center;
}

.rt-sp-level-label {
	margin: 0;
	font-family: var(--rt-font-display, var(--rt-font-heading, inherit));
	font-weight: var(--rt-font-display-weight, 700);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 1.25rem;
	line-height: 1.15;
	text-align: left;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.rt-sp-level--large .rt-sp-level-label {
	font-size: 1.45rem;
}

.rt-sp-level-amount {
	margin: 0 0 6px;
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--rt-primary, #091e3d);
}

/* Benefits read left-aligned with the site's brand marker per line (the same glyph
   as the nav indicator and the Brand marker list style), so sponsor tiers match the members roll. */
.rt-sp-level-benefits {
	margin: 4px 0 16px;
	padding: 0;
	list-style: none;
	text-align: left;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--rt-muted, #5d5850);
}

.rt-sp-level-benefits li {
	position: relative;
	padding-left: 1.5rem;
}

.rt-sp-level-benefits li + li {
	margin-top: 0.45rem;
}

.rt-sp-level-benefits li::before {
	content: var(--rt-nav-icon, "\f005");
	position: absolute;
	left: 0;
	top: 0.1em;
	font-family: "Font Awesome 7 Free", "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 0.85em;
	color: var(--rt-primary, #b3141c);
}

.rt-sp-level-cta {
	display: inline-block;
	align-self: center;
	margin-top: auto;
	padding: 8px 18px;
	border-radius: 999px;
	background: var(--rt-primary, #f4b41c);
	color: var(--rt-on-primary, #141414);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	text-decoration: none;
}

.rt-sp-level-cta:hover,
.rt-sp-level-cta:focus-visible {
	filter: brightness(1.06);
	color: var(--rt-on-primary, #141414);
}

/* ---- Standalone (foreign theme) --------------------------------------- */

/*
 * Under a theme that gives the shortcode no content width, the module
 * constrains itself. Same pattern as the other modules.
 */
.rt-sp-standalone {
	max-width: var(--rt-maxw, 1200px);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

/* A tinted level's button wears the level color, the same one its amount
   wears, so Ranger, Silver and Red read as three different doors. */
.rt-sp-level--tinted .rt-sp-level-cta {
	background: var(--tier);
	color: #fff;
}
.rt-sp-level--tinted .rt-sp-level-cta:hover,
.rt-sp-level--tinted .rt-sp-level-cta:focus-visible {
	color: #fff;
	filter: brightness(1.12);
}
/* The Talk First door stays an outline on a tinted level too. Without this
   it took the tier fill above, and its hover then set the text to the tier
   color as well: tier on tier, black on black for a dark level (Furi, 9-15). */

/* ---- The inquiry form: the kit's dialog (10-21) --------------------------- */

/* A level door opens dialog#rt-sponsor-form (assets/css/dialog.css draws the
   sheet). The choice between paying now and sending an inquiry first sits
   inside it as two radio cards, so nobody scrolls back to the level cards to
   change their mind (Furi, 10-21). */
.rt-sp-choice { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.rt-sp-choice legend { display: block; padding: 0; margin-bottom: 6px; font-weight: 600; color: var(--rt-ink, #1f1f1f); }
.rt-sp-choice-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rt-sp-choice-opt { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 10px 12px; border: 2px solid var(--rt-line, #e7e2d6); border-radius: var(--rt-radius, 12px); background: var(--rt-white, #fff); cursor: pointer; }
.rt-sp-choice-opt input { position: absolute; left: 0; top: 50%; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.rt-sp-choice-opt span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rt-sp-choice-opt b { font-size: 1rem; color: var(--rt-ink, #1f1f1f); }
.rt-sp-choice-opt b i { margin-right: 6px; color: var(--rt-primary, #2566b6); }
.rt-sp-choice-opt small { font-size: 0.82rem; color: var(--rt-muted, #6b6b6b); }
.rt-sp-choice-opt.is-picked { border-color: var(--rt-primary, #2566b6); background: color-mix(in srgb, var(--rt-primary, #2566b6) 8%, #fff); }
.rt-sp-choice-opt:has(input:focus-visible) { outline: 3px solid var(--rt-primary, #2566b6); outline-offset: 1px; }
.rt-sp-choice-opt:has(input:disabled) { opacity: 0.5; cursor: default; }
@media (max-width: 560px) { .rt-sp-choice-opts { grid-template-columns: 1fr; } }
/* The sponsor form's notice takes its look from the notice kit (assets/css/notice.css); this keeps only its place. */
.rt-sp-form-message { margin: 0 0 18px; }
.rt-sp-form-row--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 18px;
}
@media (max-width: 560px) {
	.rt-sp-form-row--split { grid-template-columns: 1fr; }
}
.rt-sp-form-field { margin: 0 0 14px; }
.rt-sp-form-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 5px;
	color: var(--rt-ink, #1f1f1f);
}
.rt-sp-form-optional { font-weight: 400; color: var(--rt-muted, #6b6b6b); }
.rt-sp-form-field input,
.rt-sp-form-field select,
.rt-sp-form-field textarea {
	width: 100%;
	padding: 11px 14px;
	font: inherit;
	color: var(--rt-ink, #1f1f1f);
	background: var(--rt-white, #fff);
	border: 1px solid var(--rt-line, #e7e2d6);
	border-radius: var(--rt-radius, 10px);
	box-sizing: border-box;
}
.rt-sp-form-field textarea { resize: vertical; }
.rt-sp-form-field input:focus,
.rt-sp-form-field select:focus,
.rt-sp-form-field textarea:focus {
	outline: 3px solid var(--rt-primary, #b3141c);
	outline-offset: 1px;
	border-color: var(--rt-primary, #b3141c);
}
.rt-sp-form-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.rt-sp-form--standalone .rt-btn {
	display: inline-block;
	padding: 12px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--rt-primary, #b3141c);
	color: var(--rt-on-primary, #fff);
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
}

/* One door on a level that sells through Square: Sponsor Now opens the dialog. */
.rt-sp-level-doors { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: auto; }
.rt-sp-level-doors .rt-sp-level-cta { margin-top: 0; }
.rt-sp-level-cta--pay { border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; }
.rt-sp-level-cta--pay i { margin-right: 6px; }

/* One form, two modes (Furi, 9-15): the logo field, the pay-mode line, the mode switch, and the handoff to checkout. */
.rt-sp-form-field--file input[type="file"] { padding: 9px 10px; background: #fff; cursor: pointer; }
.rt-sp-form-field--file input[type="file"]::file-selector-button { margin-right: 10px; padding: 6px 12px; border: 0; border-radius: 999px; background: var(--rt-cream, #f2f6fa); color: var(--rt-ink, #1f1f1f); font-weight: 700; cursor: pointer; }
.rt-sp-form-mode { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--rt-cream, #f2f6fa); color: var(--rt-ink, #1f1f1f); font-size: 0.95rem; text-align: center; }
.rt-sp-dialog--handoff .rt-dialog-body { text-align: center; }
.rt-sp-handoff { display: flex; justify-content: center; margin-top: 8px; }
.rt-sp-handoff .rt-store-add i { margin-right: 6px; }

/* The item's text fields on the card (Business Name, Website): compact, full width, above the doors. */
.rt-sp-level-doors .rt-store-mod-group { width: 100%; padding: 6px 10px 8px; text-align: left; }
.rt-sp-level-doors .rt-store-mod-group legend { font-size: 0.8rem; }
.rt-sp-level-doors .rt-store-mod-text { max-width: none; padding: 7px 9px; font-size: 0.9rem; }
.rt-sp-level-doors .rt-store-add:disabled { opacity: 0.55; cursor: default; }

/* A level door keeps its own label color on hover. The theme's content-link
   hover (a:not(...):hover, black label) outranks a lone class, so Sponsor
   Now, an <a> on the form-mode levels, turned black on Cox's blue fill the
   moment the pointer reached it (Furi, 9-22). .rt-btn survives that rule
   only because its color is !important; the doors do the same, each state
   spelled out so tinted and Talk First keep theirs too. */
.rt-sp-level-cta,
.rt-sp-level-cta:hover,
.rt-sp-level-cta:focus-visible { color: var(--rt-on-primary, #141414) !important; }
.rt-sp-level--tinted .rt-sp-level-cta,
.rt-sp-level--tinted .rt-sp-level-cta:hover,
.rt-sp-level--tinted .rt-sp-level-cta:focus-visible { color: #fff !important; }