/*
Theme Name: RCX
Description: Red Cow Exchange landing page — Kadence child theme.
Template: kadence
Version: 1.2.0
Author: Big Top Multimedia
Text Domain: rcx
*/

/* ---------- Fonts ---------- */
/* Free substitutes (OFL-licensed, self-hosted) for the commercial
   artwork fonts:
   Anton  → Champion HTF Welterweight (display)
   Oswald → Trade Gothic Bold Condensed No. 20 (nav/body)
   Caveat → Gathenia (script) */
@font-face {
	font-family: 'Anton';
	src: url('fonts/anton.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Oswald';
	src: url('fonts/oswald.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Caveat';
	src: url('fonts/caveat.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ---------- Brand variables ---------- */
/* All layout metrics below are measured from the 1440x800 design export
   (RCX-Landing-page.jpg); percentages are of the 1440 canvas. */
:root {
	--rcx-black: #060606; /* matches the opaque black edges of rcx-wall.webp */
	--rcx-white: #ffffff;
	--rcx-teal: #3bb9b9;
	--rcx-purple: #7573b5;
	--rcx-red: #e02826;
	--rcx-neon: #ff1e26; /* sampled from the design's neon strokes */
	--rcx-cond: 'Oswald', 'Arial Narrow', sans-serif;
	--rcx-display: 'Anton', 'Arial Narrow', sans-serif;
	--rcx-script: 'cortado', 'Caveat', cursive; /* cortado loads via Adobe Fonts kit (see functions.php); Caveat is the fallback until the kit ID is set */
	--rcx-margin: 8.47%; /* design left margin: 122px / 1440 */
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--rcx-black);
	color: var(--rcx-white);
	font-family: var(--rcx-cond);
	overflow-x: clip; /* wall art overflows the right edge by design */
}
/* Kadence re-paints a white content background from inline CSS printed
   after this sheet, so these need !important */
.site.wp-site-blocks,
.site,
.content-bg,
.entry-content-wrap,
.content-container {
	background: var(--rcx-black) !important;
}
/* logo only — no site title text */
.site-header .site-title,
.site-branding .site-title {
	display: none;
}

/* ---------- Header ---------- */
#masthead,
.site-header,
#masthead .site-header-row,
#masthead .site-main-header-wrap,
#masthead .site-main-header-inner-wrap {
	background: var(--rcx-black);
	border: 0;
}
#masthead {
	position: sticky;
	top: 0;
	z-index: 100;
}
#masthead .site-container {
	max-width: 100%;
	padding-left: var(--rcx-margin);
	padding-right: 8.2%;
}
#masthead .site-main-header-inner-wrap {
	min-height: 145px;
}
.custom-logo {
	width: 205px;
	height: auto;
}
#masthead .main-navigation {
	align-self: flex-start;
	margin-top: 8px;
}
#masthead .main-navigation .primary-menu-container > ul > li > a {
	font-family: var(--rcx-cond);
	font-size: 22px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rcx-white);
	padding-left: 14px;
	padding-right: 14px;
}
#masthead .main-navigation .primary-menu-container > ul > li > a:hover {
	color: var(--rcx-teal);
}
#masthead .menu-toggle-open,
#masthead .search-toggle-open {
	color: var(--rcx-white);
}
#mobile-header .site-header-row,
#mobile-drawer .drawer-inner,
#mobile-drawer .drawer-header {
	background: var(--rcx-black);
}
#mobile-drawer .drawer-inner ul li a {
	font-family: var(--rcx-cond);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rcx-white);
}

/* ---------- Page chrome ---------- */
.content-area {
	margin: 0;
	padding: 0;
}
.entry-content-wrap,
.content-container,
.site-content {
	padding: 0;
}
body.page .entry-header { display: none; }
.entry-content > * { margin-block: 0; }
.entry-content > * + * { margin-block: 0; }
.entry-content section.rcx-hero,
.entry-content section.rcx-bottom { margin: 0; }
/* Kadence styles .entry-content h1/h2/figure etc. at higher specificity
   than a lone class — these pin the design's vertical rhythm */
.entry-content h2.rcx-tagline { margin: 0; }
.entry-content h1.rcx-coming { margin: 28px 0 0; }
.entry-content h3.rcx-subhead { margin: 12px 0 2px; }
.entry-content p.rcx-body { margin: 0 0 16px; }
.entry-content .wp-block-buttons.rcx-neon-btn { margin: 36px 0 0; }
.entry-content .rcx-strip figure { margin: 0; }
.entry-content h2.rcx-where { margin: 0; }
.entry-content figure.rcx-map { margin: -52px 0 0; }
.entry-content div.rcx-contact { margin: -14px 0 0 auto; }
.entry-content p.rcx-phone { margin: 0; }
.entry-content .rcx-contact .wp-block-buttons { margin: 0; gap: 19px; }

/* ---------- Hero ---------- */
/* NOTE: Kadence is a classic theme, so WP wraps each group block in a
   legacy .wp-block-group__inner-container — flex is applied there. */
.rcx-hero {
	position: relative;
}
.rcx-hero > .wp-block-group__inner-container {
	width: 100%;
}
/* Wall art: exact design placement solved from the artwork — scale
   0.710 of the 1600px source, left edge at x521, top at y-12 (page
   coords), overflowing the right viewport edge by ~218px */
.rcx-hero-wall {
	position: absolute;
	top: -10.85vw;
	right: -15.1%;
	width: 78.9%;
	margin: 0;
	z-index: 1;
	pointer-events: none;
}
.rcx-hero-wall img {
	width: 100%;
	height: auto;
	display: block;
}
.rcx-hero-content {
	position: relative;
	z-index: 2;
	max-width: 715px;
	padding: 12px 24px 36px var(--rcx-margin);
}
.rcx-tagline {
	font-family: var(--rcx-cond);
	font-size: clamp(22px, 2.16vw, 31px);
	font-weight: normal;
	letter-spacing: 0.01em;
	line-height: 1.5;
	margin: 0;
	color: var(--rcx-white);
}
.rcx-tagline em {
	font-family: var(--rcx-script);
	font-style: normal;
	color: var(--rcx-teal);
	font-size: 1.75em;
	line-height: 0;
	padding: 0 0.1em;
	vertical-align: -0.06em;
	/* tilt: artwork's Gathenia word measures ~-31°, softened to -21° per Richard (2026-07-29) */
	display: inline-block;
	transform: rotate(-21deg);
}
.rcx-coming {
	font-family: var(--rcx-display);
	font-weight: normal;
	font-size: clamp(52px, 6.4vw, 92px);
	line-height: 1;
	letter-spacing: 0.045em;
	margin: 28px 0 0;
	color: var(--rcx-white);
	text-transform: uppercase;
}
.rcx-subhead {
	font-family: var(--rcx-cond);
	font-weight: normal;
	font-size: clamp(19px, 1.81vw, 26px);
	line-height: 1.4;
	margin: 12px 0 2px;
	color: var(--rcx-white);
}
.rcx-body {
	font-family: var(--rcx-cond);
	font-size: clamp(15px, 1.18vw, 17px);
	line-height: 1.6;
	max-width: 592px;
	margin: 0 0 16px;
	color: var(--rcx-white);
}

/* ---------- Neon button ---------- */
.rcx-neon-btn { margin: 0; }
.rcx-neon-btn .wp-block-button__link,
a.rcx-neon-link {
	font-family: var(--rcx-cond);
	font-size: 21px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--rcx-neon);
	background: transparent;
	border: 3px solid var(--rcx-neon);
	border-radius: 999px;
	padding: 18px 54px;
	box-shadow:
		0 0 10px rgba(255, 30, 38, 0.95),
		0 0 26px rgba(255, 30, 38, 0.55),
		0 0 52px rgba(255, 30, 38, 0.3),
		inset 0 0 10px rgba(255, 30, 38, 0.65),
		inset 0 0 24px rgba(255, 30, 38, 0.28);
	text-shadow:
		0 0 4px rgba(255, 30, 38, 0.8),
		0 0 12px rgba(255, 30, 38, 0.95);
	outline: 3px solid rgba(255, 30, 38, 0.5);
	outline-offset: 5px;
	transition: all 0.2s ease;
}
.rcx-neon-btn .wp-block-button__link:hover,
a.rcx-neon-link:hover {
	color: #fff;
	background: rgba(255, 30, 38, 0.16);
	box-shadow:
		0 0 14px rgba(255, 30, 38, 1),
		0 0 36px rgba(255, 30, 38, 0.7),
		0 0 70px rgba(255, 30, 38, 0.4),
		inset 0 0 14px rgba(255, 30, 38, 0.8);
}

/* ---------- Bottom band ---------- */
/* Sits above the wall art's black bounding box */
.rcx-bottom {
	position: relative;
	z-index: 2;
	padding: 0 0 50px;
}
.rcx-bottom > .wp-block-group__inner-container {
	display: flex;
	align-items: flex-start;
	gap: 0;
	width: 100%;
	margin-top: 30px;
}
.rcx-strip {
	flex: 0 0 41.5%;
	margin: 0;
}
.rcx-strip > .wp-block-group__inner-container {
	display: flex;
	gap: 0;
	width: 100%;
}
/* figure widths mirror the photos' aspect ratios (all slices are 692px
   tall), so the row self-aligns with no object-fit cropping */
.rcx-strip figure {
	margin: 0;
}
.rcx-strip figure:nth-child(1) { flex: 0 0 29.78%; }
.rcx-strip figure:nth-child(2) { flex: 0 0 42.98%; }
.rcx-strip figure:nth-child(3) { flex: 0 0 27.25%; }
.rcx-strip img {
	display: block;
	width: 100%;
	height: auto;
}
.rcx-where {
	flex: 0 0 auto;
	white-space: nowrap;
	margin: 0;
	padding: 0 0 0 12px;
}
.rcx-where-title {
	font-family: var(--rcx-display);
	font-weight: normal;
	font-size: clamp(40px, 4.31vw, 62px);
	line-height: 0.92;
	color: var(--rcx-white);
	text-transform: uppercase;
}
.rcx-where-title em {
	font-style: normal;
	color: var(--rcx-teal);
}
/* pin rides above the strip top, as in the design */
.rcx-map {
	flex: 0 1 17%;
	margin: -52px 0 0;
}
.rcx-map img {
	display: block;
	width: 100%;
	height: auto;
}
.rcx-contact {
	flex: 0 0 auto;
	margin: -14px 0 0 auto;
	padding-right: 7.2%;
}
.rcx-contact > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}

/* ---------- Neon pills ---------- */
.rcx-pill {
	width: 244px;
}
.rcx-pill .wp-block-button__link {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	font-family: var(--rcx-cond);
	font-size: 20px;
	letter-spacing: 0.06em;
	white-space: nowrap;
	color: var(--rcx-neon);
	background: transparent;
	border: 3px solid var(--rcx-neon);
	border-radius: 999px;
	padding: 13px 10px;
	box-shadow:
		0 0 8px rgba(255, 30, 38, 0.9),
		0 0 20px rgba(255, 30, 38, 0.5),
		0 0 40px rgba(255, 30, 38, 0.25),
		inset 0 0 8px rgba(255, 30, 38, 0.6),
		inset 0 0 18px rgba(255, 30, 38, 0.25);
	text-shadow:
		0 0 4px rgba(255, 30, 38, 0.8),
		0 0 10px rgba(255, 30, 38, 0.9);
	outline: 2px solid rgba(255, 30, 38, 0.45);
	outline-offset: 4px;
	transition: all 0.2s ease;
}
.rcx-pill .wp-block-button__link:hover {
	color: #fff;
	background: rgba(255, 30, 38, 0.14);
	box-shadow:
		0 0 12px rgba(255, 30, 38, 1),
		0 0 30px rgba(255, 30, 38, 0.65),
		inset 0 0 12px rgba(255, 30, 38, 0.75);
}
.rcx-pill-insta .wp-block-button__link::before {
	content: '';
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	margin-right: 0.5em;
	vertical-align: -0.18em;
	background-color: var(--rcx-neon);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='2' y='2' width='20' height='20' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='17.8' cy='6.2' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='2' y='2' width='20' height='20' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='17.8' cy='6.2' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E") no-repeat center / contain;
}
.rcx-phone {
	font-family: var(--rcx-cond);
	font-size: clamp(20px, 1.88vw, 27px);
	letter-spacing: 0.06em;
	line-height: 1.1;
	margin: 0;
	color: var(--rcx-white);
}

/* ---------- Footer ---------- */
/* design has no footer band — hide Kadence's default credit row */
#colophon,
.site-footer {
	display: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.rcx-bottom { padding-bottom: 56px; }
	.rcx-bottom > .wp-block-group__inner-container {
		flex-wrap: wrap;
		align-items: center;
		row-gap: 36px;
	}
	.rcx-strip { flex-basis: 100%; }
	.rcx-strip > .wp-block-group__inner-container { align-content: flex-start; }
	.rcx-where { flex: 0 0 auto; padding-left: 6%; }
	.rcx-map,
	.entry-content figure.rcx-map { flex: 0 0 34%; margin: 0; }
	.rcx-contact { flex: 1 1 auto; margin: 0; padding-right: 0; }
	.rcx-hero-wall { top: 0; right: 0; width: 90%; }
}
@media (max-width: 767px) {
	#masthead .site-main-header-inner-wrap { min-height: 96px; }
	.custom-logo { width: 160px; }
	.rcx-hero > .wp-block-group__inner-container {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
	.rcx-hero-wall {
		position: relative;
		top: auto;
		right: auto;
		width: 100%;
		order: 2;
	}
	.rcx-hero-content {
		order: 1;
		padding: 36px 24px 32px;
		max-width: none;
	}
	.rcx-coming { font-size: 56px; }
	.rcx-strip > .wp-block-group__inner-container { flex-wrap: wrap; }
	.rcx-strip figure:nth-child(1),
	.rcx-strip figure:nth-child(2),
	.rcx-strip figure:nth-child(3) { flex: 1 1 100%; }
	.rcx-where { padding: 12px 24px 0; white-space: normal; }
	.rcx-where, .rcx-map, .rcx-contact { flex-basis: 100%; }
	.rcx-map,
	.entry-content figure.rcx-map { flex: 0 0 100%; max-width: 320px; margin: 0 auto; }
	.rcx-contact { padding: 0 16px; }
	.rcx-neon-btn .wp-block-button__link { font-size: 18px; padding: 16px 40px; }
}

/* ---------- Contact modal (Find Out More → Gravity Forms) ---------- */
html.rcx-modal-open,
html.rcx-modal-open body { overflow: hidden; }

.rcx-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.rcx-modal[hidden] { display: none; }
.rcx-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(6, 6, 6, 0.84);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}
.rcx-modal-panel {
	position: relative;
	width: min(540px, 100%);
	max-height: calc(100dvh - 48px);
	overflow-y: auto;
	background: #0d0d0d;
	border: 2px solid var(--rcx-neon);
	border-radius: 26px;
	padding: 40px 40px 36px;
	box-shadow:
		0 0 12px rgba(255, 30, 38, 0.7),
		0 0 34px rgba(255, 30, 38, 0.35),
		inset 0 0 12px rgba(255, 30, 38, 0.3),
		0 24px 80px rgba(0, 0, 0, 0.85);
	animation: rcx-modal-in 0.22s ease-out;
}
@keyframes rcx-modal-in {
	from { opacity: 0; transform: translateY(14px) scale(0.97); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.rcx-modal-panel { animation: none; }
}
.rcx-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--rcx-neon);
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	text-shadow: 0 0 8px rgba(255, 30, 38, 0.9);
	transition: color 0.15s ease, background 0.15s ease;
}
.rcx-modal-close:hover,
.rcx-modal-close:focus-visible {
	color: #fff;
	background: rgba(255, 30, 38, 0.18);
}
.rcx-modal-title {
	font-family: var(--rcx-display);
	font-weight: normal;
	font-size: clamp(30px, 4vw, 40px);
	letter-spacing: 0.045em;
	text-transform: uppercase;
	color: var(--rcx-white);
	margin: 0 30px 6px 0;
}
.rcx-modal-sub {
	font-family: var(--rcx-cond);
	font-weight: 400;
	font-size: 16px;
	color: #cfcfcf;
	line-height: 1.5;
	margin: 0 0 22px;
}

/* Gravity Forms — dark/neon skin, scoped to the modal */
#rcx-modal .gform_wrapper { font-family: var(--rcx-cond); }
#rcx-modal .gform_wrapper .gform_fields { row-gap: 18px; }
#rcx-modal .gform_wrapper .gfield_label {
	font-family: var(--rcx-cond);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rcx-white);
	margin-bottom: 6px;
}
#rcx-modal .gform_wrapper .gfield_required { color: var(--rcx-neon); }
#rcx-modal .gform_wrapper input[type="text"],
#rcx-modal .gform_wrapper input[type="email"],
#rcx-modal .gform_wrapper input[type="tel"],
#rcx-modal .gform_wrapper textarea {
	width: 100%;
	font-family: var(--rcx-cond);
	font-size: 16px;
	color: var(--rcx-white);
	background: #181818;
	border: 1px solid #3d3d3d;
	border-radius: 12px;
	padding: 12px 16px;
	box-shadow: none;
}
#rcx-modal .gform_wrapper input::placeholder,
#rcx-modal .gform_wrapper textarea::placeholder { color: #777; }
#rcx-modal .gform_wrapper textarea { min-height: 120px; resize: vertical; }
#rcx-modal .gform_wrapper input[type="text"]:focus,
#rcx-modal .gform_wrapper input[type="email"]:focus,
#rcx-modal .gform_wrapper input[type="tel"]:focus,
#rcx-modal .gform_wrapper textarea:focus {
	outline: none;
	border-color: var(--rcx-teal);
	box-shadow: 0 0 0 3px rgba(59, 185, 185, 0.28);
}
#rcx-modal .gform_wrapper .gform_footer {
	margin: 26px 0 0;
	padding: 0;
}
#rcx-modal .gform_wrapper .gform_button {
	width: 100%;
	font-family: var(--rcx-cond);
	font-size: 17px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--rcx-neon);
	background: transparent;
	border: 3px solid var(--rcx-neon);
	border-radius: 999px;
	padding: 14px 44px;
	cursor: pointer;
	box-shadow:
		0 0 10px rgba(255, 30, 38, 0.95),
		0 0 26px rgba(255, 30, 38, 0.55),
		inset 0 0 10px rgba(255, 30, 38, 0.65);
	text-shadow:
		0 0 4px rgba(255, 30, 38, 0.8),
		0 0 12px rgba(255, 30, 38, 0.95);
	transition: all 0.2s ease;
}
#rcx-modal .gform_wrapper .gform_button:hover,
#rcx-modal .gform_wrapper .gform_button:focus-visible {
	color: #fff;
	background: rgba(255, 30, 38, 0.16);
	box-shadow:
		0 0 14px rgba(255, 30, 38, 1),
		0 0 36px rgba(255, 30, 38, 0.7),
		inset 0 0 14px rgba(255, 30, 38, 0.8);
}

/* Validation + confirmation, kept readable on the dark panel */
#rcx-modal .gform_wrapper .gfield_validation_message,
#rcx-modal .gform_wrapper .validation_message {
	font-family: var(--rcx-cond);
	font-size: 14px;
	color: #ff8087;
	background: transparent;
	border: 0;
	padding: 4px 0 0;
}
#rcx-modal .gform_wrapper .gform_validation_errors {
	background: rgba(255, 30, 38, 0.08);
	border: 1px solid rgba(255, 30, 38, 0.5);
	border-radius: 12px;
	box-shadow: none;
	padding: 12px 16px;
	margin-bottom: 18px;
}
#rcx-modal .gform_wrapper .gform_validation_errors > h2 {
	font-family: var(--rcx-cond);
	font-size: 15px;
	color: #ff9aa0;
	margin: 0;
}
#rcx-modal .gform_confirmation_message {
	display: block;
	font-family: var(--rcx-cond);
	font-size: 17px;
	line-height: 1.55;
	color: var(--rcx-white);
	text-align: center;
	padding: 26px 0 30px;
}
#rcx-modal .rcx-confirm-title {
	font-family: var(--rcx-display);
	font-weight: normal;
	font-size: 28px;
	letter-spacing: 0.045em;
	text-transform: uppercase;
	color: var(--rcx-teal);
	margin: 0 0 10px;
}

@media (max-width: 700px) {
	.rcx-modal { padding: 14px; }
	.rcx-modal-panel { padding: 30px 22px 26px; border-radius: 20px; }
}
#rcx-modal .gform_wrapper .gform_required_legend { display: none; }