/*
 * Victorious — component layer.
 *
 * Design tokens live in theme.json and arrive here as custom properties
 * (--wp--preset--*, --wp--custom--*). Nothing below hard-codes a colour,
 * font size, or radius.
 */

/* Element reset ------------------------------------------------------------
 * The demo is built on Tailwind, whose preflight zeroes the default margins
 * on paragraphs, headings, lists, and figures. WordPress does not, so every
 * ported element carried spacing the demo never had — the About page's stats
 * band came out 21px taller than the demo's from two paragraphs' margins
 * alone, and the same error was present in every section on every page.
 *
 * Scoped to ported content: spacing there comes from the demo's own mb-*,
 * mt-*, and space-y-* classes. Anything outside .vic-pagewrap keeps normal
 * WordPress rhythm.
 */

.vic-pagewrap :where(p, h1, h2, h3, h4, h5, h6, ul, ol, figure, blockquote, dl, dd, pre) {
	/* All margins, not just the block axis: the UA gives blockquote and dd
	   40px of inline margin, which took 80px out of every ported pull quote.
	   :where() keeps this at zero specificity, so mx-auto and the demo's own
	   margin utilities still win. */
	margin: 0;
}

.vic-main :where(section, div) > :where(p, h1, h2, h3, h4, h5, h6, figure, blockquote) {
	margin: 0;
}

/* Tailwind's preflight also zeroes border-width everywhere and sets a solid
 * style, so that border-l-4 adds one edge and a bare border-<colour> class
 * adds none. Without it, CSS's initial border-width of `medium` — 3px —
 * appeared on all four edges of anything the demo gave a border colour,
 * taking 6px out of the content box. At 375px that was enough to push a word
 * onto a new line, and each reflowed card shifted everything below it.
 *
 * :where() keeps this at zero specificity, so every explicit border below,
 * and every border utility in layout.css, still wins.
 */
.vic-main :where(*, *::before, *::after) {
	border-width: 0;
	border-style: solid;
}

/* Tailwind's preflight also sets line-height: 1.5 on the root. The theme's
 * body line-height is 1.6, so every ported element without an explicit
 * text-* or leading-* class ran 6% tall — 25.6px against the demo's 24px on
 * body copy, compounding down each column. Ported content takes the demo's
 * baseline; everything outside .vic-main keeps the theme's.
 */
.vic-main {
	line-height: 1.5;
}

.vic-main :where(ul, ol):not(.vic-ticks) {
	padding-inline-start: 0;
	list-style-position: inside;
}

/* Primitives ------------------------------------------------------------- */

/* Icons ------------------------------------------------------------------
 * 1em, not 1.25em. The demo draws these as Material Symbols glyphs, whose
 * box is one em of the inherited font size; at 1.25em an icon inheriting
 * text-4xl rendered 45px against the demo's 36px and pushed everything below
 * it down inside the card. Line-height is pinned to 1 for the same reason:
 * an inline SVG in a normal line box adds leading a glyph does not.
 */
.v-icon {
	/* Material Symbols, which the demo uses, default to 24px regardless of the
	   surrounding text size; only an explicit text-* class changes them. The
	   icons stay em-sized so those classes still work — this just sets the em
	   to the same default the demo's icons have. */
	font-size: 24px;
	width: 1em;
	height: 1em;
	/* The demo's icons are font glyphs, which sit on the text baseline. An
	   inline-block SVG of the same size makes the line box ~0.125em taller at
	   each end, which added 6px to every affiliate card. */
	margin-block: -0.125em;
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
	fill: currentColor;
	flex: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-red);
	outline-offset: 2px;
}

.skip-link:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	inset-block-start: var(--wp--preset--spacing--40);
	inset-inline-start: var(--wp--preset--spacing--40);
	z-index: 999;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--brand-red);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
}

.vic-eyebrow {
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--ultra);
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-red-text);
}

.vic-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--brand-red);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--wider);
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--brand-red);
	border-radius: var(--wp--custom--radius--base);
	transition: opacity 0.15s ease;
}

.vic-button:hover,
.wp-block-button__link:hover {
	opacity: 0.85;
	color: var(--wp--preset--color--white);
}

.vic-button--sm {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--on-background);
	border-color: var(--wp--preset--color--surface-variant);
}

.vic-admin-notice {
	padding: var(--wp--preset--spacing--40);
	border: 1px dashed var(--wp--preset--color--outline);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
}

.vic-draft-banner {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface-container-high);
	border-left: 3px solid var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: var(--wp--custom--tracking--wider);
	text-transform: uppercase;
}

/* Header ----------------------------------------------------------------- */

.vic-header {
	position: fixed;
	inset-block-start: var(--vic-announce-h);
	inset-inline: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--background) 80%, transparent);
	backdrop-filter: blur(24px);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--surface-variant) 30%, transparent);
}

.vic-header__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
}

.vic-logo {
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xl-2);
	font-weight: 900;
	/* The demo's `tracking-tighter` at 24px, which computes to -1.2px. The port
	 * had -0.03em (-0.72px), which made the wordmark 6.7px wider than the
	 * demo's. */
	letter-spacing: -0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-red);
	text-decoration: none;
	white-space: nowrap;
}

.vic-nav {
	display: none;
}

.vic-nav__list,
.vic-nav__panel,
.vic-drawer__list,
.vic-footer__links,
.vic-footer__hours,
.vic-schedule__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vic-nav__list {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--60);
}

.vic-nav__item {
	position: relative;
}

.vic-nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	/* The demo's `tracking-tighter`, which computes to -0.8px: the class sits on
	 * the 16px nav container and is inherited as a resolved pixel value by the
	 * 14px links. The port had -0.02em (-0.28px), half a pixel looser per
	 * character, which cost ~26px across a seven-item row — the difference
	 * between clearing and crowding at 1024. */
	letter-spacing: -0.057em;
	text-transform: uppercase;
	color: var(--wp--preset--color--on-background);
	text-decoration: none;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}

.vic-nav__link:hover {
	color: var(--wp--preset--color--brand-red);
}

.vic-nav__panel {
	position: absolute;
	inset-block-start: calc(100% + var(--wp--preset--spacing--20));
	inset-inline-start: 0;
	min-width: 13rem;
	background: var(--wp--preset--color--surface-container);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--surface-variant) 50%, transparent);
	border-radius: var(--wp--custom--radius--base);
	box-shadow: var(--wp--preset--shadow--kinetic);
	z-index: 60;
}

/* The panel sits `spacing--20` below the trigger, and that gap was dead space:
 * it is outside the <li>, so a pointer travelling from the word "Programs" down
 * to "BJJ Adults" left the dropdown mid-journey, fired mouseleave, and closed
 * the menu before it could be clicked. Reported from the live site.
 *
 * This bridges the gap with a strip of the panel itself. Because the panel is a
 * descendant of the <li>, the pointer never leaves the dropdown, so mouseleave
 * never fires. Sized from the same token that creates the gap, so the two
 * cannot drift apart. */
.vic-nav__panel::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: calc(-1 * var(--wp--preset--spacing--20));
	height: var(--wp--preset--spacing--20);
}

.vic-nav__panel[hidden] {
	display: none;
}

.vic-nav__panel a {
	display: block;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--on-background);
	text-decoration: none;
}

.vic-nav__panel a:hover {
	background: var(--wp--preset--color--surface-container-high);
	color: var(--wp--preset--color--brand-red);
}

.vic-header__actions {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.vic-drawer-toggle,
.vic-drawer-close {
	background: none;
	border: 0;
	color: var(--wp--preset--color--on-background);
	cursor: pointer;
	padding: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--xl-2);
	line-height: 1;
}

/* Drawer ----------------------------------------------------------------- */

.vic-drawer {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: var(--wp--preset--color--surface-container-low);
	padding: var(--wp--preset--spacing--50);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	overflow-y: auto;
}

.vic-drawer[hidden] {
	display: none;
}

.vic-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.vic-drawer__list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.vic-drawer__list a {
	display: block;
	padding: var(--wp--preset--spacing--30) 0;
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wp--preset--color--on-background);
	text-decoration: none;
}

.vic-drawer__cta {
	margin-block-start: auto;
}

html.vic-drawer-open {
	overflow: hidden;
}

/* Main ------------------------------------------------------------------- */

/* Clearance for the fixed header. Ported pages bring the demo's own <main>
   padding (pt-32) inside .vic-pagewrap, so the fallback only applies where
   there is no ported wrapper. */
.vic-main:not(:has(.vic-pagewrap)) {
	padding-block-start: var(--wp--custom--header--height);
}

.vic-page__title,
.vic-section__title,
.vic-hero__title {
	font-family: var(--wp--preset--font-family--headline);
	font-weight: 900;
	text-transform: uppercase;
	line-height: var(--wp--custom--leading--tight);
	color: var(--wp--preset--color--white);
}

.vic-section {
	/* No padding of its own: ported sections carry the demo's own py-* class,
	   and adding padding here made sections taller than the demo's. This is a
	   marker class for the section-level styling below. */
	position: relative;
}

/* Ported sections carry the demo's own px-*/py-* classes. Sections that
   arrive without any (the legal pages, 404, the blog archive) still need an
   inset, so they get one only when the demo did not supply it. */
.vic-section:not([class*="px-"]):not([class*="p-"]) {
	padding-inline: var(--wp--preset--spacing--50);
}

.vic-section:not([class*="py-"]):not([class*="pt-"]):not([class*="p-"]):not(.vic-pagehero) {
	padding-block: var(--wp--preset--spacing--80);
}

.vic-section__title {
	font-size: var(--wp--preset--font-size--xl-4);
	margin-block-end: var(--wp--preset--spacing--40);
}

.vic-section__lede {
	max-width: 44rem;
	margin-inline: 0;
	color: var(--wp--preset--color--prose-body);
	margin-block-end: var(--wp--preset--spacing--60);
}

/* Hero ------------------------------------------------------------------- */

.vic-hero {
	min-height: 82vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--90);
}

.vic-hero__title {
	font-size: var(--wp--preset--font-size--xl-6);
}

.vic-hero__kicker {
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wp--preset--color--on-background);
}

.vic-hero__lede {
	max-width: 42rem;
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--prose-body);
}

.vic-hero__actions {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Cards and grids -------------------------------------------------------- */

.vic-programs__grid,
.vic-advantage__grid,
.vic-affiliates__grid,
.vic-expect__grid,
.vic-reviews {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: 1fr;
}

.vic-card,
.vic-feature,
.vic-step-card,
.vic-review {
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--surface-container-low);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--surface-variant) 40%, transparent);
	border-radius: var(--wp--custom--radius--lg);
}

.vic-card--feature {
	border-color: var(--wp--preset--color--brand-red);
}

.vic-card__title,
.vic-feature__title,
.vic-step-card__title {
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xl-2);
	font-weight: 900;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
	margin-block-end: var(--wp--preset--spacing--30);
}

.vic-card p,
.vic-feature p,
.vic-step-card p {
	color: var(--wp--preset--color--prose-body);
	font-size: var(--wp--preset--font-size--sm);
}

.vic-card__note {
	color: var(--wp--preset--color--gold) !important;
	font-size: var(--wp--preset--font-size--xs) !important;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
}

.vic-card__link a {
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--wider);
	text-transform: uppercase;
	text-decoration: none;
}

.vic-ticks {
	list-style: none;
	padding: 0;
	margin-block: var(--wp--preset--spacing--30);
}

.vic-ticks li {
	position: relative;
	padding-inline-start: var(--wp--preset--spacing--60);
	margin-block-end: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--prose-body);
}

.vic-ticks li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.7em;
	width: 1.125rem;
	height: 1px;
	background: var(--wp--preset--color--brand-red);
}

/* Reviews ---------------------------------------------------------------- */

.vic-review__rating {
	color: var(--wp--preset--color--amber);
	margin-block-end: var(--wp--preset--spacing--20);
}

.vic-review__star {
	width: 1rem;
	height: 1rem;
}

.vic-review__quote {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--sm);
	line-height: var(--wp--custom--leading--relaxed);
	color: var(--wp--preset--color--prose-lead);
}

.vic-review__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xs-2);
	letter-spacing: var(--wp--custom--tracking--wider);
	text-transform: uppercase;
}

.vic-review__name {
	color: var(--wp--preset--color--white);
	font-weight: 700;
}

.vic-review__source {
	color: var(--wp--preset--color--muted);
}

/* Schedule --------------------------------------------------------------- */

.vic-schedule {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: 1fr;
}

.vic-schedule__day {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface-container-low);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--surface-variant) 40%, transparent);
	border-radius: var(--wp--custom--radius--lg);
}

.vic-schedule__dayname {
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--ultra);
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-red-text);
	margin-block-end: var(--wp--preset--spacing--30);
}

.vic-schedule__item {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	align-items: baseline;
	padding-block: var(--wp--preset--spacing--20);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--surface-variant) 30%, transparent);
	font-size: var(--wp--preset--font-size--sm);
}

.vic-schedule__item:last-child {
	border-bottom: 0;
}

.vic-schedule__time {
	min-width: 5.5rem;
	font-family: var(--wp--preset--font-family--headline);
	font-weight: 700;
	color: var(--wp--preset--color--white);
}

.vic-schedule__title {
	color: var(--wp--preset--color--prose-body);
}

.vic-schedule__level,
.vic-schedule__rest {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
}

.vic-classtimes__row {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--30);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--surface-variant) 30%, transparent);
	font-size: var(--wp--preset--font-size--sm);
}

.vic-classtimes__day {
	font-family: var(--wp--preset--font-family--headline);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
}

.vic-classtimes__times {
	color: var(--wp--preset--color--prose-body);
	text-align: end;
}

/* FAQ ---------------------------------------------------------------------
 * The demo builds this from a button and a hidden sibling div, styled as a
 * padded card with a plus on the right. The port uses <details>, which is
 * keyboard-operable without JavaScript; these rules give it the demo's
 * appearance, including the plus that turns into a minus when open.
 */

.vic-faq__item {
	background: var(--wp--preset--color--surface-container-high);
	margin-block-end: var(--wp--preset--spacing--40);
	border-bottom: 0;
	padding-block: 0;
}

.vic-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
	list-style: none;
}

/* The demo has no disclosure triangle; it draws a plus on the right. */
.vic-faq__item summary::-webkit-details-marker {
	display: none;
}

.vic-faq__item summary::after {
	content: "+";
	color: var(--wp--preset--color--brand-red-text);
	font-size: var(--wp--preset--font-size--xl-2);
	line-height: 1;
	flex: none;
}

.vic-faq__item[open] summary::after {
	content: "\2212";
}

.vic-faq__item p {
	margin: 0;
	padding: 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--prose-body);
	font-size: var(--wp--preset--font-size--sm);
}

/* Forms ------------------------------------------------------------------ */

.vic-form {
	max-width: 34rem;
	padding: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--surface-container-low);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--surface-variant) 40%, transparent);
	border-radius: var(--wp--custom--radius--lg);
}

.vic-form--iframe iframe {
	width: 100%;
	min-height: 40rem;
	border: 0;
}

.vic-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin-block-end: var(--wp--preset--spacing--40);
}

.vic-form__field label {
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--wider);
	text-transform: uppercase;
	color: var(--wp--preset--color--on-background);
}

.vic-form__field input,
.vic-form__field select {
	width: 100%;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface-container);
	border: 1px solid var(--wp--preset--color--surface-variant);
	border-radius: var(--wp--custom--radius--base);
	color: var(--wp--preset--color--on-background);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
}

.vic-form__hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* Confirmation steps ----------------------------------------------------- */

.vic-steps {
	list-style: none;
	counter-reset: vic-step;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--wp--preset--spacing--70);
}

.vic-step {
	counter-increment: vic-step;
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--surface-container-low);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--surface-variant) 40%, transparent);
	border-radius: var(--wp--custom--radius--lg);
}

.vic-step__title {
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xl-2);
	font-weight: 900;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
	margin-block-end: var(--wp--preset--spacing--40);
}

.vic-step__title::before {
	content: counter(vic-step) ". ";
	color: var(--wp--preset--color--brand-red);
}

.vic-step__note {
	margin-block-start: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
}

.vic-calendly iframe {
	width: 100%;
	border: 0;
}

/* Contact ---------------------------------------------------------------- */

.vic-contact {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	grid-template-columns: 1fr;
}

.vic-contact__address {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	font-style: normal;
	color: var(--wp--preset--color--prose-body);
}

.vic-hours {
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--sm);
}

.vic-hours caption {
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--ultra);
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-red-text);
	text-align: start;
	margin-block-end: var(--wp--preset--spacing--30);
}

.vic-hours th,
.vic-hours td {
	padding-block: var(--wp--preset--spacing--20);
	padding-inline-end: var(--wp--preset--spacing--50);
	text-align: start;
	font-weight: 400;
	color: var(--wp--preset--color--prose-body);
}

.vic-hours th {
	color: var(--wp--preset--color--white);
}

/* Footer ----------------------------------------------------------------- */

.vic-footer {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50) var(--wp--preset--spacing--90);
}

.vic-site-footer {
	background: var(--wp--preset--color--surface-container-low);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--surface-variant) 20%, transparent);
}

.vic-footer__grid {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	grid-template-columns: 1fr;
	margin-block-end: var(--wp--preset--spacing--70);
}

.vic-footer__blurb,
.vic-footer__address,
.vic-footer__links a,
.vic-footer__hours {
	font-size: var(--wp--preset--font-size--sm);
	color: color-mix(in srgb, var(--wp--preset--color--on-background) 60%, transparent);
}

.vic-footer__address {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	font-style: normal;
	margin-block: var(--wp--preset--spacing--40);
}

.vic-footer__heading {
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--ultra);
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-red-text);
	margin-block-end: var(--wp--preset--spacing--40);
}

.vic-footer__links {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.vic-footer__hours li {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--20);
}

.vic-footer__social {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xs-2);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--widest);
	text-transform: uppercase;
}

.vic-footer a {
	text-decoration: none;
	color: inherit;
}

.vic-footer a:hover {
	color: var(--wp--preset--color--brand-red);
}

.vic-footer__legal {
	padding-block-start: var(--wp--preset--spacing--50);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--surface-variant) 30%, transparent);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	text-align: center;
}

.vic-footer__tagline {
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 900;
	letter-spacing: var(--wp--custom--tracking--widest);
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-red-text);
}

.vic-footer__legal-links {
	display: flex;
	gap: var(--wp--preset--spacing--50);
}

.vic-footer__legal-links a,
.vic-footer__copy {
	font-size: var(--wp--preset--font-size--xs-2);
	letter-spacing: var(--wp--custom--tracking--widest);
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--on-background) 40%, transparent);
}

/* Mobile sticky bar ------------------------------------------------------ */

.vic-mobilebar {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 90;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	background: var(--wp--preset--color--surface-container);
	border-top: 1px solid var(--wp--preset--color--surface-variant);
}

.vic-mobilebar__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--wider);
	text-transform: uppercase;
	color: var(--wp--preset--color--on-background);
	text-decoration: none;
}

.vic-mobilebar__item--cta {
	background: var(--wp--preset--color--brand-red);
	color: var(--wp--preset--color--white);
}

body {
	padding-block-end: 4rem;
}

/* Breakpoints ------------------------------------------------------------ */

@media (min-width: 48em) {
	.vic-programs__grid,
	.vic-advantage__grid,
	.vic-affiliates__grid,
	.vic-expect__grid,
	.vic-reviews,
	.vic-contact {
		grid-template-columns: repeat(2, 1fr);
	}

	.vic-schedule {
		grid-template-columns: repeat(2, 1fr);
	}

	.vic-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.vic-footer__legal {
		flex-direction: row;
		justify-content: space-between;
		text-align: start;
	}
}

/* Desktop chrome breakpoint ------------------------------------------------
 *
 * 67.5em (1080px), NOT the 64em (1024px) the ported content uses.
 *
 * The nav is seven items plus a CTA. At 1024 that row fits only by falling
 * back on the 16px flex-gap floor and overrunning the header's right padding
 * by 3.1px — measured, not guessed. Matching the demo's tracking on both the
 * nav and the logo bought 33px and fixed 1152; 1024 still did not clear. So
 * 1024-wide viewports (a landscape iPad among them) get the drawer and the
 * sticky bar, which are the better controls at that width anyway.
 *
 * This value appears three times and the three MUST move together: the nav/
 * toggle/mobile-bar swap, the duplicate mobile-bar rule further down, and the
 * max-width rule that hides the header CTA. Move one and the band between the
 * old and new values renders with no navigation at all.
 *
 * The other 64em queries in this file and in layout.css are Tailwind's content
 * `lg:` and stay at 1024 — they are the demo's layout, not the chrome.
 */
@media (min-width: 67.5em) {
	.vic-nav {
		display: block;
	}

	.vic-drawer-toggle {
		display: none;
	}

	.vic-mobilebar {
		display: none;
	}

	body {
		padding-block-end: 0;
	}

	.vic-hero__title {
		font-size: var(--wp--preset--font-size--xl-8);
	}

	.vic-section__title {
		font-size: var(--wp--preset--font-size--xl-5);
	}

	.vic-programs__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.vic-advantage__grid,
	.vic-affiliates__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.vic-expect__grid,
	.vic-reviews {
		grid-template-columns: repeat(3, 1fr);
	}

	.vic-schedule {
		grid-template-columns: repeat(4, 1fr);
	}

	.vic-footer__grid {
		grid-template-columns: 2fr 1fr 1fr 1fr;
	}
}

/* Motion ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Prose width ------------------------------------------------------------
 * Sections run to the demo's max-w-7xl, so free-standing body copy needs its
 * own measure or lines get uncomfortably long on desktop.
 */

.vic-section > p,
.vic-legal .wp-block-post-content > p,
.vic-legal .wp-block-post-content > ul,
.vic-affiliate .wp-block-post-content > p {
	max-width: 44rem;
}

/* Constrained-layout overrides -------------------------------------------
 * WP's .is-layout-constrained > * sets auto side margins, which centres the
 * section lede away from the heading it belongs to.
 */

.vic-section > .vic-section__lede,
.is-layout-constrained > .vic-section__lede {
	margin-inline-start: 0;
	margin-inline-end: 0;
}

.vic-cta__title {
	font-size: var(--wp--preset--font-size--xl-4);
}

.vic-cta__text {
	max-width: 44rem;
	margin-inline-start: 0;
	color: var(--wp--preset--color--prose-body);
}

/* Fluent Forms ------------------------------------------------------------
 * Wrapper styling only: field structure belongs to the form builder so Victor
 * can change it without touching the theme.
 */

.vic-form--fluent .ff-el-input--label label {
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--wider);
	text-transform: uppercase;
	color: var(--wp--preset--color--on-background);
}

.vic-form--fluent input[type="text"],
.vic-form--fluent input[type="email"],
.vic-form--fluent input[type="tel"],
.vic-form--fluent select {
	width: 100%;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface-container);
	border: 1px solid var(--wp--preset--color--surface-variant);
	border-radius: var(--wp--custom--radius--base);
	color: var(--wp--preset--color--on-background);
	font-family: var(--wp--preset--font-family--body);
}

.vic-form--fluent .ff-btn-submit {
	background: var(--wp--preset--color--brand-red);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--headline);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--wider);
	text-transform: uppercase;
	border: 0;
	border-radius: var(--wp--custom--radius--base);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	cursor: pointer;
}

/* Hero image --------------------------------------------------------------
 * Sits behind the hero copy. Explicit aspect ratio and object-fit keep it
 * from shifting layout as it decodes.
 */

.vic-hero {
	position: relative;
	isolation: isolate;
}

.vic-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

.vic-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.vic-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--wp--preset--color--background) 55%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--background) 88%, transparent) 62%,
		var(--wp--preset--color--background) 100%
	);
}

/* Red, by text size -------------------------------------------------------
 * #CC2127 is the brand colour and stays on everything large enough to carry
 * it: the wordmark, headings, buttons, and any text at or above 24px, or
 * 19px bold, where WCAG's large-text threshold applies and 3.37:1 passes.
 *
 * Below that threshold #CC2127 is 3.37:1 on the page background and fails.
 * Small red text uses --brand-red-text (#ED4E51), which is 5.14:1 on the
 * page background, 4.76:1 on #1b1b1b and 4.56:1 on #1f1f1f — the two card
 * surfaces small red text actually sits on. #E5383B was the starting point
 * but lands at 4.39:1 on the background and 3.89:1 on cards.
 */

.vic-logo {
	color: var(--wp--preset--color--brand-red);
}

.vic-card__link a,
.vic-card__note,
.vic-review__source,
.vic-footer a:hover,
.vic-nav__link:hover,
.vic-nav__panel a:hover,
.vic-step__title::before {
	color: var(--wp--preset--color--brand-red-text);
}

.vic-footer__legal-links a,
.vic-footer__copy,
.vic-schedule__level,
.vic-schedule__rest,
.vic-review__source,
.vic-step__note,
.vic-footer__blurb,
.vic-footer__address,
.vic-footer__links a,
.vic-footer__hours {
	color: var(--wp--preset--color--prose-body);
}

.vic-card__note {
	color: var(--wp--preset--color--gold) !important;
}

/* Heading order -----------------------------------------------------------
 * Section labels that the design does not show, so the document outline has
 * no gaps between h1 and the h3 card titles.
 */

.vic-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Trial form: contrast and stability -----------------------------------------
 * Fluent Forms colours select text #606266, which is 2.69:1 on our #1f1f1f
 * field background — below the 4.5:1 floor.
 *
 * Both form wrappers also reserve their settled height per breakpoint. The
 * measured Fluent Forms body is 507px at every width tested (360-1280); the
 * Kicksite embed is an iframe whose height Kicksite controls, so it reserves
 * the height its own embed declares. Without a reserve, everything below the
 * form moves when the plugin's CSS and JS settle, which cost 0.161 CLS
 * against a 0.1 budget before the pages carried the demo's own sizing.
 */

.vic-form--fluent {
	min-height: 507px;
}

.vic-form--embed {
	min-height: 640px;
}

.vic-form--embed iframe {
	display: block;
	width: 100%;
	min-height: 640px;
	border: 0;
}

.vic-form--fluent .ff-el-form-control,
.vic-form--fluent select,
.vic-form--fluent select option {
	color: var(--wp--preset--color--on-background);
	background-color: var(--wp--preset--color--surface-container);
}

.vic-form--fluent ::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.vic-form--fluent .ff-el-input--label.ff-el-is-required label::after {
	color: var(--wp--preset--color--brand-red-text);
}

@media (min-width: 48em) {
	.vic-form--fluent {
		min-height: 508px;
	}
}

/* Ported page sections ----------------------------------------------------
 * Classes used by content ported from the approved demo.
 */

.vic-section--alt {
	background: var(--wp--preset--color--surface-container-low);
}

.vic-pagehero {
	padding-block: var(--wp--preset--spacing--80);
}

.vic-pagehero .vic-page__title {
	font-size: var(--wp--preset--font-size--xl-5);
}

/* The figure adds no box of its own, so the demo's classes on the <img>
   behave exactly as they do in the demo — including absolute positioning
   inside a relative parent, which a figure wrapper would otherwise anchor. */
.vic-figure {
	display: contents;
}

/* Images that arrived without any sizing class of their own. */
.vic-main img:not([class*="h-"]):not([class*="w-"]):not([class*="absolute"]) {
	max-width: 100%;
	height: auto;
}

.vic-figcaption,
.vic-cite {
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: var(--wp--custom--tracking--wider);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.vic-tick {
	position: relative;
	padding-inline-start: var(--wp--preset--spacing--60);
	color: var(--wp--preset--color--prose-body);
}

.vic-tick::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.7em;
	width: 1.125rem;
	height: 1px;
	background: var(--wp--preset--color--brand-red);
}

@media (min-width: 64em) {
	.vic-pagehero .vic-page__title {
		font-size: var(--wp--preset--font-size--xl-7);
	}
}

/* CSS-background heroes ---------------------------------------------------
 * Two demo pages set their hero photo as a CSS background rather than an
 * <img>. Core's group background carries the image; this restores the demo's
 * dark gradient over it so the headline stays legible.
 */

.vic-section.has-background-image {
	position: relative;
	isolation: isolate;
}

.vic-section.has-background-image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--wp--preset--color--background) 55%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--background) 90%, transparent) 70%,
		var(--wp--preset--color--background) 100%
	);
}

/* Weekly schedule ---------------------------------------------------------
 * Reproduces the demo's schedule.html: filter row, a seven-column grid at
 * desktop separated by hairline gaps over the surface-variant colour, and a
 * day-by-day stack on mobile. Card colours come from term meta, inline, so a
 * new program added in wp-admin brings its own colour.
 */

.vic-sched__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-block-end: var(--wp--preset--spacing--60);
}

.vic-sched__filter {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--surface-container-high);
	color: var(--wp--preset--color--on-background);
	border: 0;
	border-radius: var(--wp--custom--radius--base);
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--wider);
	text-transform: uppercase;
	cursor: pointer;
}

.vic-sched__filter.is-active {
	background: var(--wp--preset--color--brand-red);
	color: var(--wp--preset--color--white);
}

.vic-sched__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--wp--preset--color--surface-variant);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
}

.vic-sched__day {
	background: var(--wp--preset--color--surface-container-low);
	padding: var(--wp--preset--spacing--40);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.vic-sched__dayname {
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--ultra);
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-red-text);
	margin: 0 0 var(--wp--preset--spacing--20);
}

.vic-sched__card {
	background: var(--wp--preset--color--surface-container-highest);
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--base);
	border-left: 4px solid var(--wp--preset--color--brand-red);
}

.vic-sched__card[hidden] {
	display: none;
}

.vic-sched__prog {
	display: block;
	font-size: var(--wp--preset--font-size--xs-2);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--widest);
	text-transform: uppercase;
}

.vic-sched__time {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--prose-body);
}

.vic-sched__note {
	margin: var(--wp--preset--spacing--10) 0 0;
	font-size: var(--wp--preset--font-size--xs-2);
	color: var(--wp--preset--color--muted);
}

.vic-sched__rest {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}

.vic-sched__day.is-empty::after {
	content: "—";
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
}

.vic-sched__status {
	margin-block-start: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}

@media (min-width: 64em) {
	.vic-sched__grid {
		grid-template-columns: repeat(7, minmax(0, 1fr));
	}
}

/* Block gap ---------------------------------------------------------------
 * theme.json sets blockGap to 0 so the demo's own mb-*/space-y-* spacing is
 * the only thing positioning ported content. Areas that are NOT ported from
 * the demo — the legal pages, the blog archive and single posts — have no
 * such classes, so they get a normal rhythm back here.
 */

.vic-legal .wp-block-post-content > * + *,
.vic-affiliate .wp-block-post-content > * + *,
.vic-postlist > * + *,
.wp-block-post-content > .wp-block-heading + *,
.vic-main > .wp-block-post-content > p + p {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Announcement bar --------------------------------------------------------
 * Sits above the fixed header, so the header's own offset accounts for it.
 * Rendered hidden and revealed by JS, so a visitor who dismissed it within
 * this session never sees it flash in and back out.
 */

/* The bar and the fixed header ------------------------------------------
 *
 * The header is position:fixed at the top of the viewport. The bar used to sit
 * in normal flow above it, so the header floated over the bar's space and the
 * bar — being the higher z-index — painted across the header: logo obscured,
 * trial button clipped, on every page.
 *
 * Both are pinned now, with the header offset by the bar's height. The bar
 * leaving normal flow is compensated exactly by the same offset as padding on
 * the body, so content sits where it always did and nothing drifts.
 *
 * --vic-announce-h holds the bar's rendered height. The values below are
 * measured (the bar wraps to two lines below the sm breakpoint); promo.js
 * re-measures on load and resize, so an editor whose announcement text wraps
 * differently gets the right offset without a code change.
 */
:root {
	--vic-announce-h: 0px;
}

body:has(.vic-announce) {
	--vic-announce-h: 54px;
}

@media (min-width: 768px) {
	body:has(.vic-announce) {
		--vic-announce-h: 35px;
	}
}

/* Dismissed: the bar is display:none, so the offset collapses to nothing. */
.vic-announce-off body,
.vic-announce-off body:has(.vic-announce) {
	--vic-announce-h: 0px;
}

body {
	padding-block-start: var(--vic-announce-h);
}

.vic-announce {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 60;
	background: var(--wp--preset--color--brand-red);
	color: var(--wp--preset--color--white);
}

.vic-announce[hidden],
.vic-announce-off .vic-announce {
	display: none;
}

.vic-announce__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--wider);
	text-transform: uppercase;
}

.vic-announce__link,
.vic-announce__text {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.vic-announce__link:hover {
	text-decoration: underline;
}

/* At least 24x24, per WCAG target size. It measured 18.5 x 26. */
.vic-announce__close {
	position: absolute;
	inset-inline-end: var(--wp--preset--spacing--20);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
	background: none;
	border: 0;
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

/* Reviews strip -----------------------------------------------------------
 * Sits under trial calls to action. Plain content, not structured data —
 * a self-serving aggregateRating on LocalBusiness is a Google violation.
 */

.vic-strip {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--wider);
	text-transform: uppercase;
	color: var(--wp--preset--color--prose-body);
}

.vic-strip a {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	color: inherit;
	text-decoration: none;
}

.vic-strip__stars {
	display: inline-flex;
	color: var(--wp--preset--color--amber);
}

.vic-strip__star {
	width: 0.9rem;
	height: 0.9rem;
}

/* Text us ------------------------------------------------------------------ */

.vic-sms {
	margin-inline-start: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xs-2);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--wider);
	text-transform: uppercase;
	white-space: nowrap;
}

/* Try free, on a schedule card -------------------------------------------- */

.vic-sched__try {
	display: inline-block;
	margin-block-start: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xs-2);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--wider);
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-red-text);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

/* Kids routine callout ----------------------------------------------------- */

.vic-routine {
	margin-block: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-left: 3px solid var(--wp--preset--color--brand-red);
	background: var(--wp--preset--color--surface-container-low);
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--on-background);
}

@media (min-width: 67.5em) {
	.vic-mobilebar {
		display: none;
	}
}

/* Red on light surfaces --------------------------------------------------
 * --brand-red-text is chosen for contrast against the dark page. On the
 * demo's light button fills (bg-on-primary-container, #ffe3e0) it measures
 * 2.98:1, while #CC2127 measures 4.53:1 — so on those the true brand red is
 * both correct and the accessible choice.
 */

.vic-main .bg-on-primary-container.text-primary-container,
.vic-main .bg-on-primary-container .text-primary-container,
.vic-main .bg-primary-fixed.text-primary-container,
.vic-main .bg-primary-fixed .text-primary-container,
.vic-main .bg-secondary-fixed .text-primary-container,
.vic-main .bg-white .text-primary-container {
	color: var(--wp--preset--color--brand-red);
}

/* Contrast fixes on inherited demo colours ---------------------------------
 * Two places where the demo's own colour choices fail WCAG AA, so they had to
 * change rather than be carried across faithfully. Both are noted in
 * docs/BRIEF.md as deliberate deviations.
 *
 * 1. Red text on the teal band. The demo puts text-primary-container
 *    (#CC2127) on bg-secondary-container (#224F5A): 1.63:1. Our accessible
 *    red is 2.49:1 there, no better in practice. The demo's own pale blue
 *    (#BDEAF7) is 6.97:1 on that teal and is already used on teal elsewhere
 *    in the demo, so it is the faithful choice as well as the legible one.
 *
 * 2. Small uppercase text at 50% opacity on #2A2A2A is 3.94:1. Raised to 70%
 *    (6.25:1). The colour is unchanged; only the opacity moves, and only for
 *    the small sizes where the 4.5:1 floor applies.
 */

.vic-main .bg-secondary-container .text-primary-container,
.vic-main .bg-secondary-container.text-primary-container,
.vic-main .bg-secondary-fixed .text-primary-container {
	color: var(--wp--custom--color--secondary-fixed);
}

:is(
	.vic-main .text-on-background\/10, .vic-main .text-on-background\/20,
	.vic-main .text-on-background\/30, .vic-main .text-on-background\/40,
	.vic-main .text-on-background\/50, .vic-main .text-on-background\/60,
	.vic-main .text-on-surface\/10, .vic-main .text-on-surface\/20,
	.vic-main .text-on-surface\/30, .vic-main .text-on-surface\/40,
	.vic-main .text-on-surface\/50, .vic-main .text-on-surface\/60,
	.vic-main .text-on-primary-container\/50, .vic-main .text-on-primary-container\/60,
	.vic-main .text-on-primary-container\/70, .vic-main .text-on-primary-container\/80
) {
	/* The demo fades small labels to 40-60% opacity, which lands between
	   3.0:1 and 4.0:1 on the dark surfaces they sit on. 70% is the lowest
	   step that clears 4.5:1 on all of them. The colour is unchanged. */
	color: color-mix(in srgb, currentColor 70%, transparent);
}

.vic-main .text-on-background\/10, .vic-main .text-on-background\/20,
.vic-main .text-on-background\/30, .vic-main .text-on-background\/40,
.vic-main .text-on-background\/50, .vic-main .text-on-background\/60 {
	color: color-mix(in srgb, var(--wp--preset--color--on-background) 70%, transparent);
}

.vic-main .text-on-surface\/10, .vic-main .text-on-surface\/20,
.vic-main .text-on-surface\/30, .vic-main .text-on-surface\/40,
.vic-main .text-on-surface\/50, .vic-main .text-on-surface\/60 {
	color: color-mix(in srgb, var(--wp--preset--color--on-background) 70%, transparent);
}

/* #353535 as a text colour is 1.4:1 on the card background — effectively
   invisible. It is a surface colour the demo used for text by mistake. */
.vic-main .text-\[\#353535\],
.vic-main .text-surface-variant {
	color: var(--wp--preset--color--muted);
}

/* Red on the mid-grey card: neither the brand red nor the accessible red
   clears 4.5:1 on #353535, so small red text there takes the body colour. */
.vic-main .bg-surface-variant .text-primary-container,
.vic-main .bg-surface-container-highest .text-primary-container {
	color: var(--wp--preset--color--prose-lead);
}

/* Phone and text links inherit --------------------------------------------
 * The demo's phone link is not red — it is text-[#e2e2e2]/60, the same grey
 * as the text around it. The theme's global link colour was making it red,
 * which put #ED4E51 on #2A2A2A at 3.97:1 and failed the contrast gate. These
 * inherit their surroundings, as the demo's do, and carry an underline so the
 * affordance does not depend on colour alone.
 */

.vic-contact a[href^="tel:"],
.vic-contact a[href^="sms:"],
.vic-footer a[href^="tel:"],
.vic-footer a[href^="sms:"],
.vic-sms,
a[href^="tel:"] {
	color: inherit;
}

.vic-sms {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Ported buttons take their box from the demo's own classes -----------------
 *
 * .wp-block-button__link above is the theme's own button, used by the header,
 * footer, and mobile bar. Inside ported content the demo already says how each
 * button should lay out — flex, inline-block, or a plain block anchor filling
 * its column — and forcing inline-flex with an 8px gap on top of that made
 * every CTA a different height and width from the demo's.
 *
 * layout.css loads after this file, so a demo class such as .flex or
 * .inline-block wins over the block default set here.
 */
.vic-main .wp-block-button__link {
	display: block;
	gap: 0;
	/* The demo's buttons are bare anchors; a border comes only from a border
	   class, which layout.css supplies. The theme's own 1px border added 2px
	   to every ported button's width. */
	border-width: 0;
}

/* The demo's buttons are bare anchors inside its own containers; WordPress
   adds two wrapper divs, and those wrappers — not the demo's container — then
   decided how each button was sized. In a demo flex column the buttons should
   stretch to the column, in a centred block they should shrink to their text,
   and no single rule on the wrapper gives both.
   display:contents removes the wrapper boxes, so the demo's own container
   sizes the anchor exactly as it sizes the demo's. */
.vic-main .wp-block-buttons > .wp-block-button {
	flex: 0 0 auto;
	max-width: 100%;
}

/* Except inside a demo flex column, where the demo's own anchors are flex
   items and stretch to the column's width rather than shrinking to their
   text. Shrinking them there left the second button 26px narrower than the
   first, which the demo lines up exactly.
   Below the sm breakpoint only: the demo's button rows are flex-col
   sm:flex-row, so above it the same containers are rows and their buttons do
   shrink. Matching on the class alone stretched them at every width. */
@media (max-width: 639px) {
	.vic-main .flex-col > .wp-block-buttons > .wp-block-button {
		flex: 1 1 100%;
	}
}

/* The demo centres those anchors with text-align on the parent, which has no
   effect on a flex item. */
.vic-main .text-center .wp-block-buttons {
	justify-content: center;
}

/* Images the demo caps with max-w-[…] -------------------------------------
 *
 * WordPress writes width and height attributes onto every uploaded image.
 * For a replaced element carrying BOTH a max-width and a max-height, CSS
 * reduces whichever dimension violates its cap and scales the other to keep
 * the ratio — the demo's affiliate logos come out 117x80 that way. The
 * attributes give the element a definite width instead, so max-height clamped
 * the height to 80 and left the width at the 200px cap: object-contain then
 * letterboxed the logo inside a box 83px too wide and shifted it right.
 *
 * Only images the demo capped and did not also set to w-full: those (the
 * Champion portrait) are meant to fill up to their cap.
 */
.vic-main .wp-block-image img[class*="max-w-["]:not([class*="w-full"]) {
	width: auto;
}

/* Veterans, instructors, and the home FAQ ----------------------------------
 * Sections added after the approved demo. They borrow the demo's own section
 * rhythm rather than introducing a second visual language.
 */

.vic-home-veterans,
.vic-faq--home {
	padding-block: var(--wp--preset--spacing--70);
	padding-inline: var(--wp--preset--spacing--50);
}

.vic-home-veterans__body {
	max-width: 46rem;
	margin-block-end: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--prose-body);
	line-height: 1.625;
}

.vic-foxhole__logo {
	margin-block-end: var(--wp--preset--spacing--40);
}

.vic-veterans__photos {
	margin-block-start: var(--wp--preset--spacing--50);
}

.vic-veterans__photos img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

/* Editor-only. Never rendered for visitors, so it never reaches the FAQPage
   structured data — see victorious_render_veterans_faq(). */
.vic-faq__draft {
	display: inline-block;
	margin-block-end: var(--wp--preset--spacing--30);
	padding: 0.25rem 0.6rem;
	border: 1px dashed var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--widest);
	text-transform: uppercase;
}

.vic-instructors__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--wp--preset--spacing--50);
	margin-block-start: var(--wp--preset--spacing--50);
}

.vic-instructor__photo img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--base);
}

.vic-instructor__name {
	margin-block: var(--wp--preset--spacing--30) 0;
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--tight);
}

.vic-instructor__rank {
	margin-block: 0.25rem 0;
	color: var(--wp--preset--color--brand-red-text);
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--widest);
	text-transform: uppercase;
}

.vic-instructor__bio {
	margin-block-start: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--prose-body);
	line-height: 1.625;
}

.vic-instructors__link {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Veteran stories, championship, and the veterans hero ---------------------- */

.vic-vethero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--40);
}

.vic-button--ghost {
	background: transparent;
	color: var(--wp--preset--color--on-background);
	border-color: color-mix(in srgb, var(--wp--preset--color--surface-variant) 60%, transparent);
}

.vic-stories__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--50);
}

.vic-story {
	margin: 0;
}

/* The poster and the injected iframe share one 16:9 box, so swapping one for
   the other on click shifts nothing. */
.vic-story__button,
.vic-story__frame {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--wp--custom--radius--base);
}

.vic-story__button {
	position: relative;
	padding: 0;
	background: var(--wp--preset--color--surface-container-high);
	cursor: pointer;
	overflow: hidden;
}

.vic-story__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vic-story__play {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-red);
	box-shadow: 0 0 0 0.5rem color-mix(in srgb, #000 35%, transparent);
}

/* A play triangle drawn with borders — no icon dependency, no extra request. */
.vic-story__play::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 0.75rem 0 0.75rem 1.15rem;
	border-color: transparent transparent transparent var(--wp--preset--color--white);
}

.vic-story__button:hover .vic-story__play,
.vic-story__button:focus-visible .vic-story__play {
	background: var(--wp--preset--color--brand-red-text);
}

.vic-stories__credit,
.vic-stillfight__body {
	margin-block-start: var(--wp--preset--spacing--40);
	max-width: 46rem;
	color: var(--wp--preset--color--prose-body);
	line-height: 1.625;
}

.vic-stillfight__cta {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Anchor targets clear the fixed chrome -------------------------------------
 * The header is fixed and the announcement bar sits above it, so a link to
 * #sunday-session scrolled the heading to y=0 — underneath 108px of chrome.
 * scroll-margin reserves that space for any in-page anchor, and follows the
 * bar's height so it is right whether the bar is showing or dismissed.
 */
.vic-main [id],
.vic-pagewrap [id] {
	/* promo.js measures the real chrome and sets --vic-chrome-h; the fallback
	   covers the header token plus the bar until it runs. */
	scroll-margin-block-start: calc(
		var(--vic-chrome-h, calc(var(--wp--custom--header--height) + var(--vic-announce-h))) + 1rem
	);
}

/* The header trial button, matched to the demo -----------------------------
 *
 * At 375 this wrapped to five lines — 80px wide and 116px tall — because the
 * theme's button tracks +1.68px and allows wrapping. The demo keeps it on one
 * line at 153x36 with whitespace-nowrap, tracking-tighter, and px-5 py-2, and
 * that is what it does at every width; it never hides the button in favour of
 * the sticky bar. Same treatment here.
 */
.vic-header__actions .vic-button {
	white-space: nowrap;
	padding: 0.5rem 1.25rem;
	letter-spacing: var(--wp--custom--tracking--tighter, -0.05em);
}

/* Below the desktop breakpoint the trial button is not in the header at all.
 *
 * The demo keeps it, and the demo is broken there: at 375 its logo runs to
 * 205px, its CTA sits at 205-358 on top of the logo, and its hamburger lands
 * at 370-402 — off the side of a 375px viewport. Copying that would leave the
 * menu unreachable on a phone, which is the fault we have just finished
 * fixing, so this is a deliberate departure from the demo.
 *
 * Nothing is lost: the sticky bottom bar carries Call, Text, and Free Trial on
 * exactly the widths where this is hidden, and it is the more reachable
 * position for a thumb anyway.
 */
@media (max-width: 67.499em) {
	.vic-header__actions .vic-button {
		display: none;
	}
}

/* Mobile composition of the two-column program sections --------------------
 *
 * At desktop these are a 12-column grid: a text card (col-span-7) holding the
 * heading, two paragraphs, a tick list and a CTA, beside a visual stack
 * (col-span-5). Stacked naively at mobile that becomes eight blocks of text
 * before the reader sees a single photograph.
 *
 * The order asked for is heading, first paragraph, primary visual, ticks, CTA,
 * remaining paragraphs. Putting the visual *between* two children of the other
 * column means those children must be siblings of it, which is what
 * display:contents does: it removes the column box and promotes its children
 * into the section grid. No markup changed — every selector here keys on
 * classes the demo already wrote — and the whole block reverts above the
 * breakpoint.
 *
 * The text column's background and padding belong to the box that
 * display:contents removes, so the grid takes both on at mobile in its place.
 *
 * Scoped to .vic-restack — the programme pages, about, sambo and veterans.
 * A generic rule also caught the affiliate pages and the home page, which have
 * the same 12-column markup but were not part of this pass, and grew every one
 * of their heroes by roughly 200px at 375.
 */
@media (max-width: 47.999em) {
	.vic-restack .vic-main .grid-cols-1[class*="md:grid-cols-12"] {
		background: var(--wp--preset--color--surface-container-low);
		padding: var(--wp--preset--spacing--50);
		row-gap: var(--wp--preset--spacing--40);
	}

	/* Promote both columns, the text column's wrapper divs, and the unclassed
	   divs the CTA sits inside, so every piece becomes a grid item. */
	.vic-restack .vic-main .grid-cols-1[class*="md:grid-cols-12"] > [class*="md:col-span-"],
	.vic-restack .vic-main .grid-cols-1[class*="md:grid-cols-12"] > [class*="md:col-span-7"] > div,
	.vic-restack .vic-main .grid-cols-1[class*="md:grid-cols-12"] [class*="md:col-span-7"] div:not([class]) {
		display: contents;
	}

	/* heading row */
	.vic-restack .vic-main .grid-cols-1[class*="md:grid-cols-12"] .flex.items-center.gap-4 {
		order: 1;
	}

	/* first paragraph */
	.vic-restack .vic-main .grid-cols-1[class*="md:grid-cols-12"] p.text-lg {
		order: 2;
	}

	/* primary visual: the first block of the visual column */
	.vic-restack .vic-main .grid-cols-1[class*="md:grid-cols-12"] > [class*="md:col-span-5"] > *:first-child {
		order: 3;
	}

	/* ticks */
	.vic-restack .vic-main .grid-cols-1[class*="md:grid-cols-12"] .space-y-4 {
		order: 4;
	}

	/* CTA. The grid item is WordPress's .wp-block-buttons wrapper rather than
	   the anchor itself, and the reviews strip is appended as its sibling —
	   both take the same order so they keep their source sequence. */
	.vic-restack .vic-main .grid-cols-1[class*="md:grid-cols-12"] .wp-block-buttons,
	.vic-restack .vic-main .grid-cols-1[class*="md:grid-cols-12"] .wp-block-button,
	.vic-restack .vic-main .grid-cols-1[class*="md:grid-cols-12"] .vic-strip {
		order: 5;
	}

	/* remaining paragraphs */
	.vic-restack .vic-main .grid-cols-1[class*="md:grid-cols-12"] p.text-base {
		order: 6;
	}

	/* anything else from the visual column (the coach card) last */
	.vic-restack .vic-main .grid-cols-1[class*="md:grid-cols-12"] > [class*="md:col-span-5"] > *:nth-child(n+2) {
		order: 7;
	}

	/* The card padding is on the grid now; the promoted children must not
	   repeat it. */
	.vic-restack .vic-main .grid-cols-1[class*="md:grid-cols-12"] > [class*="md:col-span-7"] {
		padding: 0;
	}
}

/* Program spokes: tracks, first class, coaches, hub links -------------------- */

.vic-tracks__note,
.vic-firstclass__lede {
	max-width: 46rem;
	margin-block-end: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--prose-lead);
	line-height: 1.625;
}

.vic-tracks__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: var(--wp--preset--spacing--50);
}

.vic-track {
	background: var(--wp--preset--color--surface-container-low);
	padding: var(--wp--preset--spacing--50);
	border-left: 4px solid var(--wp--preset--color--brand-red);
}

.vic-track__icon {
	color: var(--wp--preset--color--brand-red);
	margin-block-end: var(--wp--preset--spacing--30);
}

.vic-track__title {
	margin-block: 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--tight);
}

.vic-track__body {
	margin-block-end: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--prose-body);
	line-height: 1.625;
}

/* The hour, as a numbered sequence rather than a wall of prose. */
.vic-firstclass__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--40);
	counter-reset: step;
}

.vic-firstclass__steps li {
	display: grid;
	grid-template-columns: minmax(7rem, auto) 1fr;
	gap: var(--wp--preset--spacing--40);
	padding-block-end: var(--wp--preset--spacing--40);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--surface-variant) 40%, transparent);
}

.vic-firstclass__when {
	font-family: var(--wp--preset--font-family--headline);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--widest);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--brand-red-text);
}

.vic-firstclass__what {
	color: var(--wp--preset--color--prose-body);
	line-height: 1.625;
}

@media (max-width: 47.999em) {
	.vic-firstclass__steps li {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--20);
	}
}

.vic-coaches__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--wp--preset--spacing--50);
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Fight-photo treatment: full-bleed portrait, name over the image edge. */
.vic-coach {
	background: var(--wp--preset--color--surface-container-low);
	border-left: 4px solid var(--wp--preset--color--brand-red);
}

.vic-coach__photo img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	filter: grayscale(1) contrast(1.1);
}

.vic-coach__body {
	padding: var(--wp--preset--spacing--40);
}

.vic-coach__name {
	margin-block: 0 0.25rem;
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--tight);
}

.vic-coach__belt {
	margin-block: 0;
	color: var(--wp--preset--color--brand-red-text);
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--widest);
	text-transform: uppercase;
}

.vic-coach__bio {
	margin-block-start: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--prose-body);
	line-height: 1.625;
}

.vic-hub__more {
	margin-block-start: var(--wp--preset--spacing--40);
}

.vic-hub__more a,
.vic-joincta a {
	font-family: var(--wp--preset--font-family--headline);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--widest);
}

.vic-joincta {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Spoke hero CTA ----------------------------------------------------------- */

.vic-spoke__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--40);
}

/* Journal ------------------------------------------------------------------ */

.vic-post__draft {
	display: block;
	margin-block-end: var(--wp--preset--spacing--40);
}

/* Journal archive cards ----------------------------------------------------- */

.vic-postlist {
	margin-block-start: var(--wp--preset--spacing--50);
}

.vic-postlist .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	gap: var(--wp--preset--spacing--50);
	list-style: none;
	margin: 0;
	padding: 0;
}

.vic-postlist .wp-block-post-template > li {
	background: var(--wp--preset--color--surface-container-low);
	border-left: 4px solid var(--wp--preset--color--brand-red);
	padding-block-end: var(--wp--preset--spacing--40);
}

.vic-postcard__image img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

.vic-postlist .wp-block-post-title {
	margin-block: var(--wp--preset--spacing--40) 0;
	padding-inline: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--tight);
	line-height: 1.15;
}

.vic-postlist .wp-block-post-date {
	padding-inline: var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--20) 0;
	color: var(--wp--preset--color--brand-red-text);
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--widest);
	text-transform: uppercase;
}

.vic-postlist .wp-block-post-excerpt {
	padding-inline: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--prose-body);
	line-height: 1.625;
}

/* "Gi vs No-Gi at a glance" -------------------------------------------------
 *
 * Five rows, each a label and two cells. Two columns from 48em; at 375 the
 * pair stacks under its label, which is why every cell carries its own Gi /
 * No-Gi tag rather than relying on a column header that scrolls away.
 */

.vic-glance {
	margin-block-end: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--surface-container-low);
	border-left: 4px solid var(--wp--preset--color--brand-red);
	padding: var(--wp--preset--spacing--50);
}

.vic-glance__title {
	margin-block: 0 var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--tight);
}

.vic-glance__rows {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.vic-glance__row {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	padding-block-end: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--outline-variant);
}

.vic-glance__row:last-child {
	padding-block-end: 0;
	border-bottom: 0;
}

.vic-glance__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--widest);
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-red-text);
}

.vic-glance__tag {
	display: inline-block;
	margin-block-end: 0.25rem;
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--prose-lead);
}

.vic-glance__text {
	margin: 0;
	color: var(--wp--preset--color--prose-body);
	line-height: 1.5;
}

.vic-glance__close {
	margin-block: var(--wp--preset--spacing--40) 0;
	color: var(--wp--preset--color--prose-lead);
	line-height: 1.625;
}

/* Two columns once there is room for them. */
@media (min-width: 48em) {
	.vic-glance__row {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--wp--preset--spacing--50);
	}

	.vic-glance__label {
		grid-column: 1 / -1;
	}
}

/* Current-page state ---------------------------------------------------------
 *
 * The demo marks the current nav item brand red with a 2px underline
 * (`text-[#CC2127] border-b-2 border-[#CC2127] pb-1`); the port had dropped it.
 *
 * Two departures from a literal copy, both deliberate:
 *
 * 1. The label is `brand-red-text` (#ED4E51), not #cc2127. Nav labels are 14px,
 *    which is normal-size text under WCAG, and #cc2127 does not clear 4.5:1 on
 *    the header surface. Same ruling as everywhere else small red text appears.
 *    The underline keeps #cc2127 — a border is not text.
 *
 * 2. The underline is a pseudo-element, not a real border plus padding. A real
 *    border would make the current item 6px taller than its siblings, and in a
 *    centred flex row that lifts its label off the shared baseline — the exact
 *    misalignment this pass exists to find.
 */

.vic-nav__link[aria-current="page"] {
	position: relative;
	color: var(--wp--preset--color--brand-red-text);
}

.vic-nav__link[aria-current="page"]::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: -0.25rem;
	height: 2px;
	background: var(--wp--preset--color--brand-red);
}

.vic-drawer__list a[aria-current="page"] {
	color: var(--wp--preset--color--brand-red-text);
}

/* Drawer on short, wide viewports ------------------------------------------
 *
 * Moving the chrome breakpoint to 1080 put landscape tablets (1024x768) into
 * the drawer for the first time, and the drawer audit immediately failed there:
 * twelve links stacked in one column pushed "Book a Free Trial" to y=755 in a
 * 768px-tall viewport — the primary action, below the fold, on every page.
 *
 * The constraint is height, not width, so that is what this keys on. Such a
 * viewport has width to spare, so the list runs in two columns and everything
 * fits without scrolling. Portrait phones (375x812, 412x915) are narrower than
 * the min-width and keep the single column; a phone held sideways gets the two
 * columns too, which is the right answer there for the same reason.
 */
@media (min-width: 30em) and (max-height: 50em) {
	.vic-drawer__list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--wp--preset--spacing--50);
		align-content: start;
	}
}

/* Affiliate logo slots ------------------------------------------------------
 *
 * Affiliate logos arrive as whatever the gym has, and these four are three
 * different kinds of file:
 *
 *   Champion, Longhouse   a white plate baked into the PNG
 *   The Crown MMA         transparent knockout — gold crown, WHITE wordmark
 *   Allegiance            transparent, dark navy-and-camo letters
 *
 * Measured rather than guessed. scripts/fidelity/logo-chip-audit.mjs composites
 * each mark over the colour actually behind it and reports how much of it
 * disappears:
 *
 *                      on the dark card    on a white chip
 *   Crown                     1.5%              100%
 *   Champion                  9.9%               13%
 *   Allegiance               42.4%             14.7%
 *   Longhouse                 0.0%             47.5%
 *
 * So there is exactly one broken logo, and it is Allegiance: its "ALL"
 * disappears into the card. Crown and Longhouse are correct as they are and a
 * blanket white chip destroys both — Crown's wordmark is white, and Longhouse's
 * contrast comes from its own plate, which a matching chip cancels.
 *
 * The plate therefore goes on the asset that needs it, not on all four, and the
 * audit is what decides which. The visual result is more parallel, not less:
 * Champion and Longhouse already show a white plate from their own files, so
 * Allegiance joins them and Crown stays the one knockout mark — a real
 * difference in the asset, to be closed by getting a positive version from the
 * affiliate rather than by CSS.
 *
 * The plate carries its own padding and radius so it reads as a plate rather
 * than a hard-edged rectangle, and box-sizing is explicit so that padding comes
 * out of the demo's max-h cap rather than being added to it.
 *
 * Only the slot that needs a plate is touched. Uniform padding across all four
 * was tried and reverted: it changed every logo's rendered box against the demo
 * (117x80 -> 118x80, 220x67 -> 220x75, 80x80 -> 88x80) and audit-mask.mjs
 * correctly called the affiliates section a REAL divergence rather than a
 * photo-only one. The three logos that already read correctly stay pixel-
 * identical to the demo; one deliberate change is easier to defend than four.
 *
 * Add to this list only on the evidence of logo-chip-audit.mjs, and remove an
 * entry when the affiliate supplies a better asset.
 */

.vic-page-affiliates .vic-main img[class*="object-contain"][src*="allegiance-gym-logo"],
.page-template-page-affiliate .vic-main img[class*="object-contain"][src*="allegiance-gym-logo"] {
	box-sizing: border-box;
	padding: 0.5rem 0.75rem;
	border-radius: var(--wp--custom--radius--base);
	background: #ffffff;
}