/* Raider Bikes — dark theme, red/orange accent. Scoped under body.raiderbikes-dark. */

:root {
	--rb-bg: #0a0a0a;
	--rb-bg-alt: #141414;
	--rb-bg-card: #1a1a1a;
	--rb-border: #2a2a2a;
	--rb-text: #f5f5f5;
	--rb-text-muted: #a3a3a3;
	--rb-accent: #e8432c;
	--rb-accent-hover: #ff5a3c;

	/* Best-effort colour-attribute swatch mapping, keyed by the pa_colour term
	   slug (lowercase, spaces become hyphens — e.g. "Navy Blue" -> navy-blue).
	   Falls back to grey for any term slug not listed here (see rb-swatch
	   inline var() fallback) — add a new --rb-color-<slug> entry here for any
	   colour not already covered, matching the new term's slug exactly. */
	--rb-color-red: #d4342a;
	--rb-color-black: #111111;
	--rb-color-white: #f2f2f2;
	--rb-color-silver: #c7c7c7;
	--rb-color-grey: #8a8a8a;
	--rb-color-gray: #8a8a8a;
	--rb-color-blue: #2b5fd9;
	--rb-color-navy: #1c2b4a;
	--rb-color-green: #2f8f4e;
	--rb-color-orange: #f2681c;
	--rb-color-yellow: #e0b400;
	--rb-color-gold: #cfa028;
	--rb-color-pink: #e8548c;
	--rb-color-purple: #7b4fd6;
	--rb-color-teal: #1f9c93;
	--rb-color-brown: #6b4a30;
}

/* ---------- Global dark theme ---------- */

body.raiderbikes-dark {
	background: var(--rb-bg);
	color: var(--rb-text);
}

body.raiderbikes-dark #wrapper,
body.raiderbikes-dark #inner-wrap,
body.raiderbikes-dark .content-area,
body.raiderbikes-dark .site-main {
	background: var(--rb-bg) !important;
}

/* WordPress core sets overflow: clip on #wrapper (.wp-site-blocks) to stop
   full-bleed blocks causing horizontal scroll. In Chromium that also clips
   any fixed/sticky descendant (our sticky header) once the page scrolls past
   it, so it visually disappears instead of staying pinned. Only x needs
   clipping for the original purpose; restore y so the sticky header renders. */
body.raiderbikes-dark #wrapper {
	overflow-y: visible !important;
}

/* Kadence wraps regular page/post content in .content-bg, which defaults to
   a light card background (e.g. the Find a Dealer page) — keep it dark. */
body.raiderbikes-dark .content-bg {
	background: var(--rb-bg) !important;
	color: var(--rb-text) !important;
}

body.raiderbikes-dark #masthead,
body.raiderbikes-dark .site-header-row-container-inner {
	background: var(--rb-bg) !important;
	border-color: var(--rb-border) !important;
}

/* Once Kadence detaches the header row into position:fixed for the sticky
   state, it renders with no background of its own (Kadence expects that to
   be set via its separate "Sticky Header Design" customizer tab) — without
   this it's fully transparent and effectively invisible while scrolled. */
body.raiderbikes-dark .kadence-sticky-header {
	background: var(--rb-bg) !important;
}

body.raiderbikes-dark #site-navigation a,
body.raiderbikes-dark .main-navigation a {
	color: var(--rb-text) !important;
	font-size: 1.2rem !important;
	font-weight: 600 !important;
}

/* The real logo image already carries the "Raider" name — hide the
   redundant site title text that Kadence renders alongside it. */
body.raiderbikes-dark .site-title {
	display: none;
}

body.raiderbikes-dark .custom-logo {
	max-width: 340px !important;
	width: auto !important;
	height: auto !important;
}

/* Kadence renders a separate mobile header row (logo + hamburger toggle
   together) below its mobile breakpoint — shrink the logo there (~0.7x the
   desktop 340px) so it doesn't crowd the menu toggle sitting next to it. */
body.raiderbikes-dark .mobile-site-branding .custom-logo {
	max-width: 238px !important;
}

body.raiderbikes-dark .site-branding,
body.raiderbikes-dark .mobile-site-branding {
	margin-left: 1.5rem;
}

body.raiderbikes-dark #site-navigation a:hover {
	color: var(--rb-accent) !important;
}

/* Mobile hamburger toggle button — bigger icon, real contrast/tap target
   instead of a small, easy-to-miss icon. */
body.raiderbikes-dark #mobile-toggle {
	color: var(--rb-text) !important;
	background: var(--rb-bg-card) !important;
	border: 1px solid var(--rb-border) !important;
	border-radius: 8px;
	padding: 0.5em 0.6em !important;
}

body.raiderbikes-dark #mobile-toggle .menu-toggle-icon svg,
body.raiderbikes-dark #mobile-toggle .menu-toggle-icon {
	width: 32px !important;
	height: 32px !important;
	fill: var(--rb-text) !important;
	color: var(--rb-text) !important;
}

/* Mobile drawer nav links — much larger than the default. */
body.raiderbikes-dark #mobile-site-navigation .menu a {
	font-size: 1.75rem !important;
	font-weight: 700 !important;
	color: var(--rb-text) !important;
}

body.raiderbikes-dark #mobile-site-navigation .menu a:hover {
	color: var(--rb-accent) !important;
}

/* "Find a Dealer" nav item styled as a solid red CTA button, matching the
   reference site, instead of a plain text link like the other nav items. */
body.raiderbikes-dark #menu-item-32 > a {
	background: var(--rb-accent) !important;
	color: #fff !important;
	padding: 0.55em 1.4em !important;
	border-radius: 999px !important;
	margin-left: 0.5rem;
	display: inline-block;
}

body.raiderbikes-dark #menu-item-32 > a:hover {
	background: var(--rb-accent-hover) !important;
	color: #fff !important;
}

/* Kadence prints its own typography CSS inline in <head>, after our enqueued
   stylesheet, so heading colour needs !important to actually win — applied
   site-wide since every template (shop, single product, pages) is dark now. */
body.raiderbikes-dark h1,
body.raiderbikes-dark h2,
body.raiderbikes-dark h3,
body.raiderbikes-dark h4 {
	color: var(--rb-text) !important;
}

body.raiderbikes-dark .raiderbikes-front-page .rb-hero-title .rb-accent {
	color: var(--rb-accent) !important;
}

/* Kadence's archive/page title band (.entry-header) defaults to a light
   background — keep it dark on every template, not just the front page. */
body.raiderbikes-dark .entry-header {
	background: var(--rb-bg-alt) !important;
}

/* Kadence's page-hero title section (used on regular pages, e.g. Find a
   Dealer) has its own light background layer independent of .entry-header. */
body.raiderbikes-dark .entry-hero-container-inner,
body.raiderbikes-dark .entry-hero {
	background: var(--rb-bg-alt) !important;
}

body.raiderbikes-dark .entry-header .page-title,
body.raiderbikes-dark .entry-header h1 {
	color: var(--rb-text) !important;
}

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

.rb-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.85em 1.75em;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.rb-btn-primary {
	background: var(--rb-accent);
	color: #fff;
	border: 1px solid var(--rb-accent);
}

.rb-btn-primary:hover {
	background: var(--rb-accent-hover);
	color: #fff;
}

.rb-btn-outline {
	background: transparent;
	color: var(--rb-text);
	border: 1px solid var(--rb-border);
}

.rb-btn-outline:hover {
	border-color: var(--rb-text);
}

/* ---------- Layout helpers ---------- */

.rb-section {
	max-width: 1360px;
	margin: 0 auto;
	padding: 5rem 1.5rem;
}

.rb-section-header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 3rem;
}

.rb-section-header h2 {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	margin-bottom: 0.75rem;
}

.rb-section-header p,
.rb-hero-sub {
	color: var(--rb-text-muted);
}

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

.rb-hero {
	background: linear-gradient(180deg, #050505 0%, var(--rb-bg) 100%);
	background-size: cover;
	background-position: center;
	padding: 8rem 1.5rem;
	text-align: center;
}

.rb-hero-inner {
	max-width: 760px;
	margin: 0 auto;
}

.rb-trail-banner {
	max-width: 900px;
	margin: 0 auto;
	padding: 2rem 1.5rem 5rem;
}

.rb-trail-banner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.rb-eyebrow {
	color: var(--rb-accent);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.rb-hero-title {
	font-size: clamp(2.5rem, 7vw, 4.5rem);
	line-height: 1.05;
	font-weight: 800;
	text-transform: uppercase;
	margin: 0 0 1.5rem;
}

.rb-hero-title span {
	display: block;
}

.rb-hero-title .rb-accent {
	color: var(--rb-accent);
}

.rb-hero-sub {
	font-size: 1.125rem;
	margin-bottom: 2.5rem;
}

.rb-hero-actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

/* ---------- Product grid / card (shared: homepage + WooCommerce shop) ---------- */

.rb-product-grid,
body.raiderbikes-dark ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

@media (max-width: 900px) {
	.rb-product-grid,
	body.raiderbikes-dark ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.rb-product-grid,
	body.raiderbikes-dark ul.products {
		grid-template-columns: 1fr;
	}
}

/* Applied when only 1-2 products are in the grid (e.g. homepage teaser with
   a small catalog) so the card(s) sit centered instead of pinned left. */
.rb-product-grid--center {
	grid-template-columns: repeat(auto-fit, minmax(280px, 420px)) !important;
	justify-content: center;
}

body.raiderbikes-dark ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.rb-product-card {
	background: var(--rb-bg-card);
	border: 1px solid var(--rb-border);
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.rb-product-media {
	position: relative;
	background: var(--rb-bg-alt);
}

.rb-product-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.rb-product-price {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	background: var(--rb-accent);
	color: #fff;
	font-weight: 700;
	font-size: 0.85rem;
	padding: 0.3em 0.75em;
	border-radius: 999px;
	z-index: 1;
}

.rb-product-badge {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	background: #fff;
	color: #111;
	font-weight: 800;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	padding: 0.3em 0.6em;
	border-radius: 999px;
	z-index: 1;
}

.rb-product-body {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	flex: 1;
}

.rb-product-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
}

.rb-product-title {
	font-size: 1.15rem;
	margin: 0;
}

.rb-product-title a {
	color: var(--rb-text) !important;
	text-decoration: none;
}

.rb-product-size {
	color: var(--rb-accent);
	font-weight: 700;
	white-space: nowrap;
}

.rb-product-excerpt {
	color: var(--rb-text-muted);
	font-size: 0.9rem;
	margin: 0;
}

.rb-product-colours-label {
	display: block;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--rb-text-muted);
	margin-bottom: 0.4rem;
}

.rb-product-swatches {
	display: flex;
	gap: 0.5rem;
}

.rb-swatch {
	width: 20px;
	height: 20px;
	padding: 0;
	border-radius: 50%;
	border: 2px solid var(--rb-border);
	display: inline-block;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.rb-swatch[data-image] {
	cursor: pointer;
}

.rb-swatch.is-active {
	border-color: var(--rb-text);
	box-shadow: 0 0 0 2px var(--rb-bg-card);
}

.rb-product-specs {
	display: flex;
	gap: 1.25rem;
	border-top: 1px solid var(--rb-border);
	padding-top: 0.75rem;
	margin-top: auto;
}

.rb-product-spec {
	display: flex;
	flex-direction: column;
	font-size: 0.75rem;
	color: var(--rb-text-muted);
}

.rb-product-spec-value {
	color: var(--rb-text);
	font-weight: 700;
	font-size: 0.85rem;
}

.rb-product-details-link {
	display: block;
	text-align: center;
	margin-top: 0.5rem;
	padding: 0.75em;
	border: 1px solid var(--rb-border);
	border-radius: 8px;
	color: var(--rb-text);
	text-decoration: none;
	font-weight: 700;
}

.rb-product-details-link:hover {
	border-color: var(--rb-accent);
	color: var(--rb-accent);
}

.rb-collection-cta {
	text-align: center;
	margin-top: 3rem;
}

.rb-collection-empty {
	text-align: center;
	color: var(--rb-text-muted);
}

/* ---------- Features / story ---------- */

.rb-feature-grid,
.rb-story-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 2rem;
}

.rb-feature,
.rb-story-item {
	background: var(--rb-bg-card);
	border: 1px solid var(--rb-border);
	border-radius: 12px;
	padding: 1.75rem;
}

.rb-feature h3,
.rb-story-item h3 {
	margin-top: 0;
	margin-bottom: 0.5rem;
}

.rb-feature p,
.rb-story-item p {
	color: var(--rb-text-muted);
	margin: 0;
}

/* ---------- Dealer CTA band ---------- */

.rb-dealer-cta {
	text-align: center;
	background: radial-gradient(circle at top, #2a1410, var(--rb-bg));
	border-radius: 16px;
}

.rb-dealer-cta p {
	color: var(--rb-text-muted);
	margin: 1rem 0 2rem;
}

/* ---------- Dealer locator ---------- */

.rb-dealer-locator {
	max-width: 900px;
	margin: 0 auto;
	padding: 3rem 1.5rem;
}

.rb-dealer-controls {
	margin-bottom: 2rem;
}

#rb-dealer-search {
	width: 100%;
	padding: 0.9em 1.25em;
	border-radius: 999px;
	border: 1px solid var(--rb-border);
	background: var(--rb-bg-card);
	color: var(--rb-text);
	font-size: 1rem;
	margin-bottom: 1rem;
}

.rb-dealer-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.rb-province-chip {
	background: transparent;
	border: 1px solid var(--rb-border);
	color: var(--rb-text-muted);
	border-radius: 999px;
	padding: 0.5em 1.1em;
	cursor: pointer;
	font-weight: 600;
}

.rb-province-chip.is-active,
.rb-province-chip:hover {
	background: var(--rb-accent);
	border-color: var(--rb-accent);
	color: #fff;
}

.rb-dealer-list {
	display: grid;
	gap: 1rem;
}

.rb-dealer-card {
	background: var(--rb-bg-card);
	border: 1px solid var(--rb-border);
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
}

.rb-dealer-card[hidden] {
	display: none;
}

.rb-dealer-name {
	margin: 0 0 0.35rem;
}

.rb-dealer-address {
	color: var(--rb-text-muted);
	margin: 0 0 0.5rem;
}

.rb-dealer-meta {
	display: flex;
	gap: 1rem;
	margin: 0;
	font-size: 0.9rem;
}

.rb-dealer-province {
	color: var(--rb-accent);
	font-weight: 700;
}

.rb-dealer-empty {
	text-align: center;
	color: var(--rb-text-muted);
}

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

.rb-contact-form-wrap {
	max-width: 560px;
}

.rb-form-notice {
	padding: 0.9em 1.25em;
	border-radius: 8px;
	margin-bottom: 1.5rem;
	font-weight: 600;
}

.rb-form-notice-success {
	background: rgba(47, 143, 78, 0.15);
	border: 1px solid var(--rb-color-green, #2f8f4e);
	color: #7fd99a;
}

.rb-form-notice-error {
	background: rgba(212, 52, 42, 0.15);
	border: 1px solid var(--rb-accent);
	color: #ff9d8f;
}

.rb-form-row {
	margin-bottom: 1.25rem;
}

.rb-form-row label {
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 600;
	font-size: 0.9rem;
}

.rb-form-row input,
.rb-form-row textarea {
	width: 100%;
	padding: 0.75em 1em;
	border-radius: 8px;
	border: 1px solid var(--rb-border);
	background: var(--rb-bg-card);
	color: var(--rb-text);
	font-family: inherit;
	font-size: 1rem;
}

.rb-form-row input:focus,
.rb-form-row textarea:focus {
	outline: none;
	border-color: var(--rb-accent);
}

.rb-contact-form button[type="submit"] {
	border: none;
	cursor: pointer;
	font-size: 1rem;
}

/* ---------- Legal / info pages (Warranty, Privacy, Terms) ---------- */

.rb-legal-content {
	max-width: 760px;
	margin: 0 auto;
	padding: 4rem 1.5rem 6rem;
	line-height: 1.7;
}

.rb-legal-content h2 {
	margin-top: 2.5rem;
	margin-bottom: 0.75rem;
}

.rb-legal-content h2:first-child {
	margin-top: 0;
}

.rb-legal-content p,
.rb-legal-content li {
	color: var(--rb-text-muted);
}

.rb-legal-content ul {
	padding-left: 1.25rem;
}

.rb-legal-updated {
	color: var(--rb-text-muted);
	font-size: 0.85rem;
	margin-bottom: 3rem;
}

/* ---------- Footer links bar ---------- */

.rb-footer-links-bar {
	background: var(--rb-bg);
	border-top: 1px solid var(--rb-border);
	padding: 1.25rem 1.5rem;
}

.rb-footer-links-inner {
	max-width: 1360px;
	margin: 0 auto;
}

ul.rb-footer-links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
}

ul.rb-footer-links a {
	color: var(--rb-text-muted);
	text-decoration: none;
	font-size: 0.85rem;
}

ul.rb-footer-links a:hover {
	color: var(--rb-text);
}

/* ---------- Single product title badge (see Raiderbikes_Product_Badge) ---------- */

h1.product_title .rb-product-title-badge {
	font-size: 0.5em !important;
	font-weight: 400 !important;
	font-style: italic !important;
	color: var(--rb-accent) !important;
	margin-left: 0.5em;
}