/*
Theme Name: Veteran Pro Coating
Theme URI:  https://veteranprocoating.com/
Author:     LJB Marketing Agency
Version:    1.0.0
Text Domain: vpc-theme
*/

/* =============================================================
   BRAND TOKENS
   ============================================================= */
:root {
	--vpc-black:        #0a0a0b;
	--vpc-charcoal:     #16171a;
	--vpc-charcoal-2:   #1f2024;
	--vpc-red:          #e01e2b;
	--vpc-red-dark:     #b31420;
	--vpc-orange:       #e01e2b;
	--vpc-steel:        #8b9099;
	--vpc-steel-light:  #c7ccd2;
	--vpc-white:        #ffffff;
	--vpc-off:          #f4f4f5;
	--vpc-line:         rgba(255, 255, 255, 0.10);
	--vpc-line-dark:    rgba(10, 10, 11, 0.10);
	--vpc-flare:        linear-gradient(135deg, #e01e2b 0%, #b31420 100%);
	--vpc-font-head:    'Oswald', 'Arial Narrow', sans-serif;
	--vpc-font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--vpc-fs-eyebrow:   13px;
	--vpc-fs-body:      16.5px;
	--vpc-fs-lead:      19px;
	--vpc-fs-h3:        clamp(22px, 2.4vw, 28px);
	--vpc-fs-h2:        clamp(30px, 4.4vw, 52px);
	--vpc-fs-h1:        clamp(40px, 6vw, 74px);
	--vpc-maxw:         1320px;
	--vpc-gutter:       clamp(22px, 4vw, 54px);
	--vpc-radius:       14px;
	--vpc-radius-lg:    22px;
	--vpc-radius-pill:  999px;
	--vpc-shadow-sm:    0 2px 18px rgba(0, 0, 0, 0.18);
	--vpc-shadow-md:    0 18px 54px rgba(0, 0, 0, 0.28);
	--vpc-shadow-glow:  0 10px 40px rgba(224, 30, 43, 0.28);
	--vpc-ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
	--vpc-hollow-stroke-w:     2px;
	--vpc-hollow-stroke-color: var(--vpc-red);
	--vpc-hollow-glow:         none;
}

/* =============================================================
   RESET
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--vpc-font-body);
	font-size: var(--vpc-fs-body);
	line-height: 1.65;
	color: var(--vpc-white);
	background: var(--vpc-black);
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
	font-family: var(--vpc-font-head);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0 0 0.4em;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--vpc-red); text-decoration: none; transition: color 180ms var(--vpc-ease); }
a:hover { color: var(--vpc-red-dark); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; }

/* =============================================================
   SHARED HELPERS
   ============================================================= */
.vpc-wrap {
	width: 100%;
	max-width: var(--vpc-maxw);
	margin: 0 auto;
	padding-left: var(--vpc-gutter);
	padding-right: var(--vpc-gutter);
}

.vpc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--vpc-font-head);
	font-size: var(--vpc-fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vpc-red);
}
.vpc-eyebrow span {
	display: inline-block;
	width: 28px;
	height: 2px;
	background: var(--vpc-flare);
	flex-shrink: 0;
}

.vpc-hollow {
	-webkit-text-fill-color: transparent;
	color: transparent;
	-webkit-text-stroke: var(--vpc-hollow-stroke-w) var(--vpc-hollow-stroke-color);
	text-stroke: var(--vpc-hollow-stroke-w) var(--vpc-hollow-stroke-color);
	text-shadow: var(--vpc-hollow-glow);
	paint-order: stroke fill;
}

.vpc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 50px;
	padding: 14px 30px;
	font-family: var(--vpc-font-head);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 2px solid transparent;
	border-radius: var(--vpc-radius-pill);
	cursor: pointer;
	text-decoration: none;
	transition: transform 180ms var(--vpc-ease), box-shadow 180ms var(--vpc-ease),
		background 180ms var(--vpc-ease), color 180ms var(--vpc-ease);
}
.vpc-btn-primary {
	background: var(--vpc-flare);
	color: var(--vpc-white);
	box-shadow: var(--vpc-shadow-glow);
}
.vpc-btn-primary:hover {
	color: var(--vpc-white);
	transform: translateY(-2px);
	box-shadow: 0 14px 48px rgba(224, 30, 43, 0.42);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--vpc-red); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}