/* Drive with Erik - Custom Color Overrides */
/* Based on _LAW9693.jpg color palette */

:root {
	--racing-red: #C52A2E;
	--pearl-white: #E8E8E8;
	--carbon-black: #2B2B2B;
	--asphalt-gray: #4A4A4A;
	--steel-gray: #6B6B6B;
	--deep-red: #8B1F23;
	--track-red: #CC3338;
}

/* Primary button colors */
input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary,
.button.primary {
	background-color: var(--racing-red) !important;
}

input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
input[type="button"].primary:hover,
button.primary:hover,
.button.primary:hover {
	background-color: var(--deep-red) !important;
}

/* Body background */
body {
	background: var(--carbon-black) !important;
}

/* Header */
#header {
	background: var(--carbon-black);
}

/* Banner section - ensure text is readable over parallax image */
#banner {
	position: relative;
}

#banner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(43, 43, 43, 0.4);
	z-index: 1;
}

#banner .inner {
	position: relative;
	z-index: 2;
}

/* Style 1 sections - light backgrounds */
.wrapper.style1 {
	background-color: var(--pearl-white);
	color: var(--asphalt-gray);
}

.wrapper.style1 h2, .wrapper.style1 h3 {
	color: var(--carbon-black);
}

.wrapper.style1 p {
	color: var(--asphalt-gray) !important;
}

/* Style 2 sections - darker backgrounds */
.wrapper.style2 {
	background-color: var(--steel-gray);
}

/* Style 3 sections */
.wrapper.style3 {
	background-color: var(--asphalt-gray);
}

/* Style 4 CTA section */
.wrapper.style4 {
	background-color: var(--racing-red);
}

/* Footer */
#footer {
	background-color: var(--carbon-black);
}

/* Icon accents */
.icon.major.style1 {
	border-color: var(--racing-red);
	color: var(--racing-red);
}

.icon.major.style2 {
	border-color: var(--track-red);
	color: var(--track-red);
}

.icon.major.style3 {
	border-color: var(--steel-gray);
	color: var(--steel-gray);
}

/* Links */
a {
	color: var(--racing-red);
}

a:hover {
	color: var(--deep-red);
}

/* Table headers - improve readability */
table thead {
	background-color: var(--carbon-black) !important;
}

table thead th {
	color: var(--pearl-white) !important;
	text-align: center;
	font-weight: bold;
}

table tbody td {
	text-align: center;
	color: var(--asphalt-gray) !important;
	vertical-align: middle;
}

table tbody td strong {
	color: var(--carbon-black) !important;
}

/* Ensure table is readable on light backgrounds */
.wrapper.style1 table thead {
	background-color: var(--carbon-black) !important;
}

.wrapper.style1 table thead th {
	color: var(--pearl-white) !important;
}

.wrapper.style1 table tbody td {
	color: var(--asphalt-gray) !important;
}

.wrapper.style1 table tbody td strong {
	color: var(--carbon-black) !important;
}

/* Form field spacing */
form .row.gtr-50 > * {
	padding-left: 0.75em;
	padding-right: 0.75em;
}

/* Contact form button styling */
#cta button.primary {
	background-color: var(--carbon-black) !important;
	border-color: var(--carbon-black) !important;
	color: var(--pearl-white) !important;
	box-shadow: none !important;
}

#cta button.primary:hover {
	background-color: var(--pearl-white) !important;
	border-color: var(--pearl-white) !important;
	color: var(--carbon-black) !important;
}

/* Vertically center contact section content */
#cta .inner {
	display: flex;
	align-items: center;
	gap: 3em;
}

#cta .inner header {
	flex: 1;
}

#cta .inner form {
	flex: 1;
}

/* Center spotlight section text */
.spotlight .content {
	text-align: center;
}

.spotlight .content h2 {
	text-align: center;
}

/* Menu styling - racing red */
#menu {
	background-color: var(--racing-red) !important;
}

/* Faster banner fade-in animation */
#banner h2 {
	transition: transform 0.2s ease, opacity 0.2s ease !important;
}

#banner h2:before, #banner h2:after {
	transition: width 0.3s ease !important;
	transition-delay: 0.1s !important;
}

#banner .more {
	transition: transform 0.2s ease, opacity 0.2s ease !important;
}

#banner:after {
	transition: opacity 0.2s ease !important;
}
