/*
 * Tucson Rodeo — site styles.
 *
 * Global to every page: base type, the CTA button, the barbed-wire rule,
 * torn brush-stroke edges, the dark band, splatter, header and footer.
 * Per-block overrides of parent blocks live in css/blocks/<block>.css and
 * load with the block (functions.php). Child blocks carry their own CSS.
 *
 * Values are from the Figma inner-page frames (1440 artboard) unless noted.
 */

:root {
	--tr-black: var(--black, #000);
	--tr-gold: var(--secondary-400);        /* #D98C3F  CTA hover, FAQ rule */
	--tr-gold-light: var(--secondary-300);  /* #E5AE77  nav selected */
	--tr-red: var(--primary-400);           /* #860000  rules, lead-ins */
	--tr-rule-color: var(--primary-400);

	/* Brush stroke used for every torn edge (Figma image fill ea452d48a1). */
	--tr-brush: url("../assets/img/brush-edge-1.png");

	/* Section heading: 30 in the design. */
	--tr-heading-size: var(--font-size-h2);
}

/* Dark contexts: the parent's .is-dark (blocks with a background) and the
   Dark band group style. Tokens only, so everything inside follows. */
.is-dark,
:is(.is-style-tr-band, .is-style-tr-band-flat-top) {
	--tr-rule-color: var(--neutral-300);
	--text-primary: var(--white);
	--text-secondary: var(--white);
}

:is(.is-style-tr-band, .is-style-tr-band-flat-top) {
	--surface-page: var(--tr-black);
}

/* ---- Base ------------------------------------------------------------- */

html {
	overflow-x: clip;
}

body {
	background: var(--surface-page);
	color: var(--text-primary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	overflow-x: clip;
	/* Figma renders text with grayscale antialiasing; macOS browsers
	   default to subpixel, which reads a weight heavier. */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body p {
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	margin: 0 0 1.25em;
}

body p:last-child {
	margin-bottom: 0;
}

/* Label run inside body copy ("Your experience includes:", "BEST FOR:",
   record titles, "Rain or Shine Policy"): Unbounded 500 17. */
body h4 {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-h4);
	font-weight: 500;
	line-height: 1.25;
	color: var(--text-primary);
	margin: 0;
}

body h4 + p,
body h4 + ul {
	margin-top: 0;
}

body p + h4,
body ul + h4 {
	margin-top: 1.25em;
}

/* Lists in body copy: tight, as in the ticket tiers. */
.lp-block ul {
	margin: 0 0 0 1.25em;
	padding: 0;
}

.lp-block ul + p {
	margin-top: 1.25em;
}

a {
	color: var(--accent-400);
}

/* Editorial formats (TinyMCE Formats menu, functions.php). */
.tr-lead {
	color: var(--tr-red);
}

.is-dark .tr-lead,
:is(.is-style-tr-band, .is-style-tr-band-flat-top) .tr-lead {
	color: var(--tr-gold-light);
}

body p.tr-text-lg {
	font-size: 20px;
	line-height: 1.75;
}

body p.tr-text-sm {
	font-size: var(--font-size-small);
	line-height: 1.5;
}

/* ---- Buttons ---------------------------------------------------------- */

/* All three Figma CTA components share one spec: Unbounded 18/27 w800,
   padding 8x20, 3px stroke; hover recolours the label to gold, no fill.
   The stroke is the client's hand-drawn SVG, 9-slice via border-image.
   Slice must stay 10: larger flattens the roughness, 30+ exceeds the 46px
   source and drops the sides. An SVG through url() cannot inherit
   currentColor, so each stroke colour is its own file. */
body a.btn {
	align-self: flex-start;
	font-family: var(--font-family-button);
	font-size: 18px;
	font-weight: 800;
	line-height: 27px;
	padding: var(--btn-padding-y) var(--btn-padding-x);
	border: 3px solid var(--accent-400);
	border-radius: var(--btn-radius);
	border-image: url("../assets/img/btn-border-blue.svg") 10 / 8px / 4px stretch;
	background: transparent;
	box-shadow: none;
	color: var(--accent-300);
	text-decoration: none;
	transition: color .15s ease;
}

body a.btn:hover,
body a.btn:focus-visible {
	background: transparent;
	color: var(--tr-gold);
}

/* "Primary Light Button": same stroke, white label, on dark. */
.is-dark a.btn,
:is(.is-style-tr-band, .is-style-tr-band-flat-top) a.btn {
	color: var(--white);
}

/* "Secondary Button": gold stroke, white label (homepage hero, cards). */
body a.btn.btn-secondary {
	color: var(--white);
	border-color: var(--tr-gold);
	border-image-source: url("../assets/img/btn-border-gold.svg");
}

body a.btn.btn-secondary:hover {
	color: var(--tr-gold);
}

/* Two buttons side by side in body copy (second CTA, S+H precedent). */
.lp-block p:has(> a.btn) {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

/* ---- Barbed-wire rule ------------------------------------------------- */

/* Drawn after the heading group of every section. Tinted by
   --tr-rule-color: Primary-400 on light, Neutral-300 on dark. */
.tr-rule,
.tr-has-rule::after {
	content: "";
	display: block;
	width: min(528px, 100%);
	height: 17px;
	margin: 20px auto 0;
	background-color: var(--tr-rule-color);
	-webkit-mask: url("../assets/img/barbed-wire.svg") center / contain no-repeat;
	mask: url("../assets/img/barbed-wire.svg") center / contain no-repeat;
}

/* A horizontal rule in body copy is the barbed wire too, for sections
   that put it after the text (homepage Deep Western Roots). */
.lp-block hr {
	width: min(466px, 100%);
	height: 15px;
	margin: 20px 0;
	border: 0;
	background-color: var(--tr-rule-color);
	-webkit-mask: url("../assets/img/barbed-wire.svg") left center / contain no-repeat;
	mask: url("../assets/img/barbed-wire.svg") left center / contain no-repeat;
}

/* ---- Section intro ---------------------------------------------------- */

/* Centred heading + sub line + rule, used by callout, multi-column,
   gallery, FAQ and card grid. Light sections set the heading in 400,
   dark ones in 700 (Figma). */
.tr-intro {
	text-align: center;
	max-width: 760px;
	margin-inline: auto;
}

.tr-intro__header {
	font-family: var(--font-family-heading);
	font-size: var(--tr-heading-size);
	font-weight: 400;
	line-height: 1.2;
	color: var(--text-primary);
	margin: 0;
}

.is-dark .tr-intro__header,
:is(.is-style-tr-band, .is-style-tr-band-flat-top) .tr-intro__header {
	font-weight: 700;
}

.tr-intro__sub-header {
	font-family: var(--font-family-body);
	font-size: var(--font-size-small);
	font-weight: 400;
	line-height: 1.5;
	color: var(--text-primary);
	margin: 4px 0 0;
}

/* ---- Torn brush-stroke edges ------------------------------------------ */

/* How Figma builds every torn edge: a full-width rectangle (photo or black)
   with straight sides, plus the brush stroke (image fill ea452d48a1, 114%
   of the frame wide) placed so only its ragged rim pokes out above and/or
   below the rectangle. So the element here is the rectangle plus a fringe
   zone at the top (--edge-top) and bottom (--edge-bottom); the mask is a
   solid block over the rectangle, unioned with the brush pinned to the
   top and bottom. Where the brush tapers the fringe is simply absent,
   exactly as in the frames. Negative margins give the fringe zones back
   to the neighbours, so rectangles sit where Figma puts them.

   Values are Figma px on the 1440 artboard converted to vw, because the
   brush scales with the width. Set per section type below. */
:is(.wp-block-group.is-style-tr-band, .wp-block-group.is-style-tr-band-flat-top, .lp-callout--has-bg, .tr-page-header, .lp-hero.lp-block--has-bg, .site-footer.lp-footer) {
	--edge-top: 0px;
	--edge-bottom: 0px;
	--edge-w: 114%;
	--edge-x-top: -6vw;
	--edge-x-bottom: -6vw;
	--edge-y-top: 0%;
	--edge-y-bottom: 100%;
	-webkit-mask-image: linear-gradient(#000, #000), var(--tr-brush), var(--tr-brush);
	mask-image: linear-gradient(#000, #000), var(--tr-brush), var(--tr-brush);
	-webkit-mask-size: 100% calc(100% - var(--edge-top) - var(--edge-bottom)), var(--edge-w) auto, var(--edge-w) auto;
	mask-size: 100% calc(100% - var(--edge-top) - var(--edge-bottom)), var(--edge-w) auto, var(--edge-w) auto;
	-webkit-mask-position: 0 var(--edge-top), var(--edge-x-top) var(--edge-y-top), var(--edge-x-bottom) var(--edge-y-bottom);
	mask-position: 0 var(--edge-top), var(--edge-x-top) var(--edge-y-top), var(--edge-x-bottom) var(--edge-y-bottom);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* ---- Dark band (core/group, style "Dark band") ------------------------ */

/* Black band behind one or more blocks, torn top and bottom. The blocks
   inside keep their own spacing; the band adds room for the fringe. */
.entry-content > .wp-block-group:is(.is-style-tr-band, .is-style-tr-band-flat-top),
.wp-block-group:is(.is-style-tr-band, .is-style-tr-band-flat-top) {
	/* Figma: brush 26px above the black rectangle, 32–96px below it (64
	   used), set 100px left of the frame. */
	--edge-top: 1.8vw;
	--edge-bottom: 4.4vw;
	--edge-x-top: -6.9vw;
	--edge-x-bottom: -6.9vw;
	max-width: none;
	margin-block: calc(-1 * var(--edge-top)) calc(-1 * var(--edge-bottom));
	padding-block: var(--edge-top) var(--edge-bottom);
	background: var(--tr-black);
	color: var(--white);
}

/* Flat top: the band butts straight onto the block above (homepage,
   under Deep Western Roots). Torn at the bottom only. */
.wp-block-group.is-style-tr-band-flat-top {
	--edge-top: 0px;
	--edge-bottom: 2.6vw;
	--edge-x-bottom: -4.4vw;
}

/* Blocks inside a band sit on it; the band carries the background. */
:is(.is-style-tr-band, .is-style-tr-band-flat-top) > .lp-block {
	background: transparent;
}

/* Below a band. The brush hangs --edge-bottom (4.4vw, 63px at 1440) under
   the black rectangle, into the next block's top padding, so the usual 78
   left the next heading almost on the torn edge. Figma puts the next
   content 109-172px under the rectangle on every inner page (median 132,
   measured 2026-09-28): the fringe plus 67px. */
body .entry-content > .wp-block-group.is-style-tr-band + :is(.lp-block, .tr-price-table):not(.lp-block--has-bg) {
	padding-top: calc(4.4vw + 67px);
}

/* ---- Dirt ------------------------------------------------------------- */

/* Splatter at the page edges, set per block in the "Decoration: Dirt"
   fields (functions.php tags the block's root). Figma uses one crop of one
   stock photo, 389x738, multiplied, half off the artboard: left at x=-250,
   right ending ~290px past the right edge. Positions hold to the 1440
   artboard's edges at any width; multiply makes it vanish over black. */
[data-tr-dirt] {
	position: relative;
}

[data-tr-dirt~="left"]::before,
[data-tr-dirt~="right"]::after {
	content: "";
	position: absolute;
	width: 389px;
	height: 738px;
	background: url("../assets/img/dirt.jpg") 0 0 / 100% 100% no-repeat;
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 0;
}

[data-tr-dirt-variant="b"]::before,
[data-tr-dirt-variant="b"]::after {
	width: 396px;
	height: 846px;
	background-image: url("../assets/img/dirt-lower.jpg");
}

[data-tr-dirt~="left"]::before {
	top: var(--tr-dirt-left-y, 0px);
	left: calc(50% - 720px - 250px);
}

[data-tr-dirt~="right"]::after {
	top: var(--tr-dirt-right-y, 0px);
	right: calc(50% - 720px - 290px);
}

/* Keep block content above the dirt. */
[data-tr-dirt] > .block-contents {
	position: relative;
	z-index: 1;
}

@media (max-width: 900px) {
	[data-tr-dirt]::before,
	[data-tr-dirt]::after {
		display: none;
	}
}

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

/* Figma Nav Bar: no fill of its own over the page header, a black-to-clear
   scrim (black at the top, clear by 90%), 30px padding round a 58px row
   (118 total). The component also has a State=OnScroll variant (black at
   80%), but the prototype keeps the gradient while scrolling, so that is
   what ships; the solid bar is only for pages with no photo header. The
   header stays sticky but pulls the page up under it (negative margin) so
   the first block's photo runs to the top. */
.site-header.lp-header {
	--tr-header-h: 118px;
	position: sticky;
	top: 0;
	height: var(--tr-header-h);
	margin-bottom: calc(-1 * var(--tr-header-h));
	padding-inline: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, 0) 90%);
	box-shadow: none;
	font-family: var(--font-family-heading);
}

body:not(:has(.entry-content > :is(.tr-page-header, .lp-hero, .is-style-tr-contact):first-child)) .site-header.lp-header {
	background-color: rgba(0, 0, 0, .8);
}

/* Pages that do not open on a photo header keep their content clear of
   the bar. */
body:not(:has(.entry-content > :is(.tr-page-header, .lp-hero, .is-style-tr-contact):first-child)) .site-main {
	padding-top: 118px;
}

.admin-bar .site-header.lp-header {
	top: 32px;
}

/* The design's nav row runs from the 144 grid line past the container's
   right edge (Nav Items end at x=1401), so the bar is not boxed to 1152. */
.lp-header__inner {
	height: 100%;
	max-width: none;
	padding: 30px max(24px, calc((100% - 1152px) / 2 - 105px)) 30px max(24px, calc((100% - 1152px) / 2));
	gap: 0;
}

.lp-header .site-branding {
	flex: 0 0 auto;
}

.lp-header .custom-logo-link img {
	width: 182px;
	height: auto;
	max-height: 58px;
}

.lp-header .site-title,
.lp-header .site-description {
	display: none;
}

/* Figma Menu Item: Unbounded 18/27 w800, padding 8x10, 5px apart. Sizes
   ease down below 1440 so eight items fit until the drawer takes over
   (header breakpoint 1200, Options: Header). */
.lp-header__nav {
	margin-left: auto;
}

.lp-header__menu {
	gap: clamp(2px, .35vw, 5px);
}

.lp-header__nav .lp-header__link,
a.lp-header__cta {
	padding: 8px clamp(6px, .7vw, 10px);
	font-family: var(--font-family-heading);
	font-size: clamp(15px, 1.25vw, 18px);
	font-weight: 800;
	line-height: 27px;
	white-space: nowrap;
	color: var(--white);
}

/* State=Hover and State=Selected: gold label on a black brush stroke. */
.lp-header__nav .lp-header__link:hover,
.lp-header__nav .lp-header__link:focus-visible,
.lp-header__item.current-menu-item > .lp-header__link {
	color: var(--tr-gold-light);
	background: url("../assets/img/menu-item-brush.png") center / 100% 100% no-repeat;
}

/* Tickets: Menu Item Type=Highlighted, a 1px #CC6666 box (not a CTA
   button). Hover fills it. On its own page it turns Selected instead. */
body a.lp-header__cta {
	align-self: center;
	margin-left: clamp(2px, .35vw, 5px);
	padding: 8px clamp(6px, .7vw, 10px);
	font-size: clamp(15px, 1.25vw, 18px);
	border: 1px solid var(--primary-200);
	border-image: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--white);
}

body a.lp-header__cta:hover {
	background: var(--primary-200);
	color: var(--white);
}

body a.lp-header__cta[aria-current="page"] {
	border-color: transparent;
	color: var(--tr-gold-light);
	background: url("../assets/img/menu-item-brush.png") center / 100% 100% no-repeat;
}

/* Since 2026-09-28 Tickets is a menu item (it needs a dropdown), with the
   menu class tr-menu-highlight: the same Figma "Highlighted" Menu Item as
   the CTA above, which is no longer set in Options. */
.lp-header__nav .lp-header__item.tr-menu-highlight {
	margin-left: clamp(2px, .35vw, 5px);
}

.lp-header__nav .tr-menu-highlight > .lp-header__link {
	border: 1px solid var(--primary-200);
}

.lp-header__nav .tr-menu-highlight > .lp-header__link:hover,
.lp-header__nav .tr-menu-highlight:focus-within > .lp-header__link {
	background: var(--primary-200);
	color: var(--white);
}

.lp-header__nav .tr-menu-highlight.current-menu-item > .lp-header__link {
	border-color: transparent;
	color: var(--tr-gold-light);
	background: url("../assets/img/menu-item-brush.png") center / 100% 100% no-repeat;
}

/* ---- Dropdowns (client site map, 2026-09-28) -------------------------

   Not designed in Figma (the Nav Bar component has no open state), so
   this follows the nav's own language: a black panel under the item, a
   2px gold rule under the open item, Unbounded 600 labels in white, gold-light on
   hover and for the current page. Opens on hover and keyboard focus
   (focus-within), so the parent's caret buttons are hidden on desktop,
   where the design has none. A third level (Events Explained > the event
   pages) flies out to the right. */
.lp-header__nav .lp-header__submenu-toggle,
.lp-header__nav .tr-header__nested-toggle {
	display: none;
}

.lp-header__nav :is(.lp-header__submenu, .tr-header__nested) {
	left: 0;
	right: auto;
	min-width: 240px;
	padding: 10px 0;
	border: 0;
	border-radius: 0;
	/* Opaque: a translucent panel composited against the dark bands'
	   masked layer read as half see-through (WebMO, 2026-09-28). */
	background: var(--tr-black);
	box-shadow: 0 14px 28px rgba(0, 0, 0, .35);
	z-index: 20;
}

/* The gold rule runs under the open item only, as wide as its link, not
   across the (often wider) panel. */
.lp-header__nav .lp-header__item--has-children:is(:hover, :focus-within)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 2px;
	background: var(--tr-gold);
	z-index: 21;
}

/* The last items open leftwards so the panel stays on screen. */
.lp-header__nav .lp-header__item:nth-last-child(-n+3) > .lp-header__submenu {
	left: auto;
	right: 0;
}

.lp-header__nav .lp-header__subitem,
.lp-header__nav .lp-header__subitem:first-child,
.lp-header__nav .lp-header__subitem:last-child {
	border: 0;
	border-radius: 0;
	background: none;
}

.lp-header__nav .lp-header__sublink {
	padding: 9px 22px;
	font-family: var(--font-family-heading);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	color: var(--white);
}

.lp-header__nav .lp-header__sublink:hover,
.lp-header__nav .lp-header__sublink:focus-visible,
.lp-header__nav .lp-header__sublink[aria-current] {
	color: var(--tr-gold-light);
}

.lp-header__nav .lp-header__sublink:focus-visible {
	outline: 2px solid var(--tr-gold);
	outline-offset: -4px;
}

.lp-header__nav .tr-header__subitem--has-children {
	position: relative;
}

.lp-header__nav .tr-header__subitem--has-children > .lp-header__sublink::after {
	content: "\203A";
	float: right;
	margin-left: 16px;
	color: var(--tr-gold);
}

.lp-header__nav .tr-header__nested {
	display: none;
	position: absolute;
	top: -12px;
	left: 100%;
	flex-direction: column;
	margin: 0;
	list-style: none;
}

.lp-header__nav .tr-header__subitem--has-children:hover > .tr-header__nested,
.lp-header__nav .tr-header__subitem--has-children:focus-within > .tr-header__nested {
	display: flex;
}

/* Mobile panel: the third level expands in place under its own toggle. */
.lp-header__panel-nav .tr-header__subitem--has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.lp-header__panel-nav .tr-header__subitem--has-children > .lp-header__sublink {
	flex: 1;
}

.lp-header__panel-nav .tr-header__nested-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tr-gold);
	font-size: 16px;
	cursor: pointer;
}

.lp-header__panel-nav .tr-header__nested-toggle[aria-expanded="true"] .lp-header__icon--triangle {
	transform: rotate(-90deg);
}

.lp-header__panel-nav .tr-header__nested {
	display: none;
	width: 100%;
	margin: 0;
	padding: 0 0 0 16px;
	list-style: none;
}

.lp-header__panel-nav .tr-header__subitem--has-children.is-expanded > .tr-header__nested {
	display: block;
}

.lp-header__panel-nav .lp-header__sublink[aria-current] {
	color: var(--tr-gold-light);
}

/* Jump links (Tickets and Know Before You Go sections) land clear of the
   sticky 118px header. */
.entry-content [id] {
	scroll-margin-top: 130px;
}

/* Drawer (below the header breakpoint). */
.lp-header__toggle-bar {
	background: var(--white);
}

.lp-header__panel {
	--lp-header-submenu-icon: var(--tr-gold); /* the parent's toggles, gold like the third level's */
	background: var(--tr-black);
}

.lp-header__panel-nav .lp-header__link {
	font-family: var(--font-family-heading);
	font-weight: 800;
	color: var(--white);
}

.lp-header__panel-nav .lp-header__item.current-menu-item > .lp-header__link,
.lp-header__panel-nav .lp-header__link:hover {
	color: var(--tr-gold-light);
}

.lp-header__close {
	color: var(--white);
}

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

.site-main,
.entry-content {
	margin: 0;
}

.site-main article {
	margin: 0;
}

/* ---- Forms (Gravity Forms) -------------------------------------------- */

/* Every Gravity Form on the site (first used on Contact, 2026-09-30; no
   Figma frame, built from the design's type, tokens and CTA). GF's Orbital
   theme sets its colours and sizes inline per form under an ID selector,
   so the visible properties are set directly here, not through its --gf-*
   API; only variables GF leaves alone are used. The selectors also outrank
   the parent's global form rules (style.css), which pad and round every
   input, checkboxes included. Text rides --text-primary/--text-secondary,
   so a form in a dark block (.is-dark, the band) turns white by itself. */

body .gform_wrapper.gform-theme {
	--gf-font-family-base: var(--font-family-body);
	--gf-form-gap-y: 24px;
	--gf-ctrl-accent-color: var(--accent-400);
	--gf-ctrl-choice-check-color: var(--accent-400);
}

/* Field label: Unbounded 500, the design's label run (body h4). */
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label {
	margin: 0 0 8px;
	padding: 0;
	font-family: var(--font-family-heading);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--text-primary);
}

/* First / Last under a Name label. */
body .gform_wrapper .gform_body .gform_fields .gfield .gform-field-label--type-sub {
	margin: 0 0 6px;
	font-family: var(--font-family-body);
	font-size: var(--font-size-small);
	font-weight: 400;
	line-height: 1.4;
	color: var(--text-secondary);
}

body .gform_wrapper .gform_body .gform_fields .field_sublabel_below .gform-field-label--type-sub {
	margin: 6px 0 0;
}

body .gform_wrapper .gform_body .gform_fields .gfield .gfield_required {
	margin-left: 4px;
	font-family: var(--font-family-body);
	font-size: 13px;
	font-weight: 400;
	color: var(--text-secondary);
}

body .gform_wrapper .gform_body .gform_fields .gfield .gfield_description:not(.validation_message, .gfield_validation_message, .ginput_counter) {
	font-family: var(--font-family-body);
	font-size: var(--font-size-small);
	line-height: 1.4;
	color: var(--text-secondary);
}

/* Controls: white, squared to the button radius, on the light and dark
   surfaces alike. */
body .gform_wrapper .gform_body .gform_fields .gfield :is(input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=hidden], [type=file]), select, textarea) {
	width: 100%;
	margin: 0;
	padding-inline: 14px;
	border: 1px solid var(--neutral-200);
	border-radius: var(--btn-radius);
	background-color: var(--white);
	box-shadow: none;
	color: var(--neutral-400);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body);
	font-weight: 400;
	line-height: 1.4;
	transition: border-color .15s ease, outline-color .15s ease;
}

body .gform_wrapper .gform_body .gform_fields .gfield :is(input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=hidden], [type=file]), select) {
	height: 48px;
	min-height: 0;
	padding-block: 0;
}

body .gform_wrapper .gform_body .gform_fields .gfield select {
	padding-inline-end: 40px;
}

body .gform_wrapper .gform_body .gform_fields .gfield textarea {
	height: 180px;
	min-height: 120px;
	padding-block: 12px;
	resize: vertical;
}

body .gform_wrapper .gform_body .gform_fields .gfield :is(input, select, textarea):hover {
	border-color: var(--neutral-300);
}

body .gform_wrapper .gform_body .gform_fields .gfield :is(input, select, textarea):focus {
	border-color: var(--border-focus);
	outline: 3px solid rgb(from var(--border-focus) r g b / .35);
	outline-offset: 0;
}

body .gform_wrapper .gform_body .gform_fields .gfield :is(input, textarea)::placeholder {
	color: var(--neutral-300);
	opacity: 1;
}

/* Checkboxes and radios. Orbital draws the tick; the parent's input rule
   had stretched the box into a pill. */
body .gform_wrapper .gform_body .gform_fields .gfield :is(input[type=checkbox], input[type=radio]) {
	width: 20px;
	height: 20px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--neutral-300);
	border-radius: 2px;
	background-color: var(--white);
	box-shadow: none;
}

body .gform_wrapper .gform_body .gform_fields .gfield input[type=radio] {
	border-radius: 50%;
}

body .gform_wrapper .gform_body .gform_fields .gchoice .gform-field-label--type-inline {
	font-family: var(--font-family-body);
	font-size: var(--font-size-small);
	font-weight: 500;
	line-height: 20px;
	color: var(--text-primary);
}

/* Errors in the brand red (Primary-400 on light, Primary-200 on dark). */
body .gform_wrapper .gform_body .gform_fields .gfield_error :is(input:not([type=checkbox], [type=radio]), select, textarea) {
	border-color: var(--text-accent);
}

body .gform_wrapper .gform_body .gform_fields .gfield :is(.validation_message, .gfield_validation_message) {
	margin: 6px 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--font-family-body);
	font-size: var(--font-size-small);
	font-weight: 500;
	color: var(--text-accent);
}

body .gform_confirmation_message {
	font-family: var(--font-family-body);
	font-size: 18px;
	line-height: 1.5;
	color: var(--text-primary);
}

/* Submit: the site CTA (a.btn above). GF puts .gform_button on every
   submit; doubled, it reaches 0,5,2 and outranks Orbital's button rule
   (0,5,1: .gform-theme--framework.gform-theme.gform_wrapper > button…).
   The parent's submit rule sets fill and size with !important, so those
   answer in kind. */
body .gform_wrapper .gform_footer {
	margin: 32px 0 0;
	padding: 0;
}

body .gform_wrapper .gform_footer .gform_button.gform_button:is(button, input)[type=submit] {
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: var(--btn-padding-y) var(--btn-padding-x);
	border: 3px solid var(--accent-400);
	border-radius: var(--btn-radius);
	border-image: url("../assets/img/btn-border-blue.svg") 10 / 8px / 4px stretch;
	background: transparent !important;
	box-shadow: none;
	color: var(--accent-300);
	font-family: var(--font-family-button);
	font-size: 18px !important;
	font-weight: 800;
	line-height: 27px;
	cursor: pointer;
	transition: color .15s ease;
}

body .gform_wrapper .gform_footer .gform_button.gform_button:is(button, input)[type=submit]:is(:hover, :focus-visible) {
	color: var(--tr-gold);
}

body :is(.is-dark, .is-style-tr-band, .is-style-tr-band-flat-top) .gform_wrapper .gform_footer .gform_button.gform_button:is(button, input)[type=submit] {
	color: var(--white);
}

body :is(.is-dark, .is-style-tr-band, .is-style-tr-band-flat-top) .gform_wrapper .gform_footer .gform_button.gform_button:is(button, input)[type=submit]:is(:hover, :focus-visible) {
	color: var(--tr-gold);
}

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

/* Figma Footer component: black, torn top edge; row 1 the wordmark and the
   hats badge; row 2 contact column left, two headed link columns right;
   a 2px rule; social icons. Space Grotesk 14/700 headings, 13 links. */
.site-footer.lp-footer {
	/* Figma: the brush starts 47px above the black footer, 133px left of
	   the frame; the wordmark sits 50px into the black. */
	--edge-top: 3.3vw;
	--edge-x-top: -9.2vw;
	position: relative;
	/* Figma: the footer's black rectangle starts 97px under the last content
	   on every page (the brush pokes 47px above it). The block above ends
	   with its 78px padding, so the footer box starts 19px below it, minus
	   the fringe zone. (Was 28px into that padding: 50px, and the brush all
	   but touched the Instagram button.) */
	margin-top: calc(19px - var(--edge-top));
	padding-top: calc(var(--edge-top) + 50px);
	background: var(--tr-black);
}

.lp-footer__top {
	padding: 0 24px 50px;
	border-bottom: 0;
}

.lp-footer__inner {
	max-width: var(--content-max-width);
}

.tr-footer__brand-row {
	display: flex;
	align-items: flex-start;
	gap: clamp(40px, 19.5vw, 280px);
	margin-bottom: 30px;
}

.tr-footer__brand-row .custom-logo-link img,
.tr-footer__wordmark img {
	display: block;
	width: 196px;
	height: auto;
}

.tr-footer__badge img {
	display: block;
	width: 215px;
	height: auto;
}

.tr-footer__cols {
	display: flex;
	justify-content: space-between;
	gap: 55px;
	flex-wrap: wrap;
}

.tr-footer__heading {
	font-family: var(--font-family-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 21px;
	color: var(--white);
	margin: 0;
}

.tr-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13px;
	line-height: 19px;
	color: var(--neutral-200);
}

.tr-footer__list a {
	color: var(--neutral-200);
	text-decoration: none;
}

.tr-footer__list a:hover {
	color: var(--white);
}

.tr-footer__menus {
	display: flex;
	gap: 43px;
}

.tr-footer__rule {
	height: 2px;
	margin: 30px 0;
	border: 0;
	background: #D9D9D9;
}

.tr-footer__social {
	display: flex;
	gap: 12px;
}

.tr-footer__social a,
.tr-footer__social span {
	display: inline-flex;
	width: 32px;
	height: 32px;
	color: var(--white);
}

.tr-footer__social img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.tr-footer__social a:hover {
	opacity: .75;
}

.lp-footer-disclaimers:empty {
	display: none;
}

@media (max-width: 767px) {
	.tr-footer__brand-row {
		gap: 24px;
		flex-wrap: wrap;
	}

	.tr-footer__cols {
		flex-direction: column;
		gap: 30px;
	}
}

/* ---- Price table (Tickets, Custom HTML block) -------------------------

   Figma Tickets frame, "Group 6": a 1152-wide grid, label column 172 then
   seven 140 columns. Header cells #CC6666 with 10px top corners, 22/600
   Unbounded in #F1EEE9; row labels 22/600, prices Space Grotesk 20/35;
   1px #333234 rules; rows banded by tier. Not field-editable on purpose
   (WebMO: may become a PDF). Under the container width it scrolls
   sideways inside its own box rather than squashing. */
.tr-price-table {
	--tr-pt-line: 1px solid #333234;
	max-width: var(--content-max-width);
	margin: -20px auto 75px;
	padding-inline: 4vw;
	box-sizing: content-box;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.tr-price-table:focus-visible {
	outline: 2px solid var(--tr-gold);
	outline-offset: 4px;
}

.tr-price-table table {
	width: 100%;
	min-width: 1152px;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
	color: #333234;
}

.tr-price-table col.tr-price-table__labels {
	width: 172px;
}

.tr-price-table th,
.tr-price-table td {
	padding: 6px 8px;
	border-right: var(--tr-pt-line);
	border-bottom: var(--tr-pt-line);
	vertical-align: middle;
	text-align: center;
}

.tr-price-table thead th {
	padding: 1px 6px;
	border-top: var(--tr-pt-line);
	border-radius: 10px 10px 0 0;
	background: #CC6666;
	font-family: var(--font-family-heading);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.1;
	color: #F1EEE9;
}

.tr-price-table thead th:first-of-type {
	border-left: var(--tr-pt-line);
}

.tr-price-table thead td {
	border: 0;
}

.tr-price-table tbody th {
	padding: 6px 12px 6px 26px;
	border-left: var(--tr-pt-line);
	font-family: var(--font-family-heading);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.1;
	text-align: left;
}

.tr-price-table tbody td {
	padding-block: 4px;
	font-size: 20px;
	line-height: 35px;
	white-space: nowrap;
}

.tr-price-table tbody tr:first-child > * {
	border-top: var(--tr-pt-line);
}

.tr-price-table tbody tr:last-child th {
	border-bottom-left-radius: 10px;
}

.tr-price-table tbody tr:last-child td:last-child {
	border-bottom-right-radius: 10px;
}

.tr-price-table tr > * { background: transparent; }
.tr-price-table tr.is-alt > * { background: #F1EEE9; }
.tr-price-table tr.is-box > * { background: #E5AE77; }
.tr-price-table tr.is-accessible > * { background: #D8E6F2; }
.tr-price-table tr.is-vaquero > * { background: #E6CFB7; }
.tr-price-table tr.is-party-pen > * { background: #B3CFE8; }
.tr-price-table tr.is-vip > * { background: #E59E9E; }

@media (max-width: 1100px) {
	.tr-price-table table {
		min-width: 880px;
	}

	.tr-price-table col.tr-price-table__labels {
		width: 150px;
	}

	.tr-price-table thead th,
	.tr-price-table tbody th {
		font-size: 16px;
	}

	.tr-price-table tbody th {
		padding-left: 14px;
	}

	.tr-price-table tbody td {
		font-size: 16px;
		line-height: 28px;
	}
}

/* ---- Editor canvas ---------------------------------------------------- */

/* The editor wraps every block, so the band's padding and mask read the
   same as on the front end only when the group itself is the band. */
.editor-styles-wrapper :is(.is-style-tr-band, .is-style-tr-band-flat-top) {
	background: var(--tr-black);
}