/*
Theme Name: Car Tunes Grants Pass
Theme URI: https://cartunesgrantspass.com/
Author: Now Advertising Media
Description: Custom theme for Car Tunes Grants Pass LLC — car, UTV and boat audio, lighting and accessories. Built mobile-first around three actions: call, directions, quote.
Version: 1.5.0
Requires at least: 6.4
Requires PHP: 7.4
License: Proprietary
Text Domain: cartunes
*/

/* ---------- Tokens ---------- */
:root {
	--bg: #0e0f11;
	--surface: #16181b;
	--surface-2: #1e2125;
	--line: #2c3036;
	--text: #f1f2f4;
	--muted: #a9aeb6;
	--red: #d7262e;
	--red-hover: #ef3a42;
	--red-text: #ff5a60; /* red for text/icons on dark: 4.5:1+ on every surface */
	--chrome: linear-gradient(180deg, #ffffff 0%, #c9ced6 45%, #8d939c 55%, #e9ecf0 100%);
	--radius: 10px;
	--wrap: 1180px;
	--font-head: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
	--font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: #fff; text-decoration-color: var(--red); text-underline-offset: 3px; }
a:hover { color: var(--red-text); }
h1, h2, h3, h4 {
	font-family: var(--font-head);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: .01em;
	margin: 0 0 .5em;
	text-transform: uppercase;
}
h1 { font-size: clamp(2.3rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); }
h3 { font-size: 1.45rem; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }
:focus-visible { outline: 3px solid var(--red-hover); outline-offset: 2px; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto; z-index: 1000;
	top: 8px; left: 8px; padding: 10px 16px; background: #fff; color: #000;
}
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.section { padding: 72px 0; }
.section--tight { padding: 48px 0; }
.section--alt { background: var(--surface); border-block: 1px solid var(--line); }
.eyebrow {
	display: inline-block;
	font-family: var(--font-head);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--red-text);
	font-size: .95rem;
	margin-bottom: .4em;
}
.lead { font-size: 1.15rem; color: var(--muted); max-width: 46em; }
.muted { color: var(--muted); }
.center { text-align: center; }
.center .lead { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 48px; padding: 12px 22px;
	border-radius: var(--radius);
	font-family: var(--font-head); font-weight: 700; font-size: 1.15rem;
	letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
	border: 2px solid transparent; cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-hover); color: #fff; }
.btn--ghost { border-color: #fff; color: #fff; background: rgba(0, 0, 0, .25); }
.btn--ghost:hover { background: #fff; color: #000; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Top bar ---------- */
.topbar { background: #000; color: var(--muted); font-size: .9rem; }
.topbar .wrap { display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: space-between; padding-block: 7px; }
.topbar a { color: var(--muted); text-decoration: none; }
.topbar a:hover { color: #fff; }
.topbar strong { color: #fff; font-weight: 600; }

/* ---------- Header ---------- */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(14, 15, 17, .94);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand img { height: 52px; width: auto; border-radius: 6px; }
.brand-text { font-family: var(--font-head); font-size: 1.05rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); line-height: 1.1; }
.brand-text b { display: block; color: #fff; font-size: 1.35rem; letter-spacing: .04em; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.main-nav li { position: relative; }
.main-nav a {
	display: block; padding: 10px 12px;
	font-family: var(--font-head); font-weight: 600; font-size: 1.1rem;
	text-transform: uppercase; letter-spacing: .05em; text-decoration: none; color: #fff;
	border-radius: 6px;
}
.main-nav a:hover, .main-nav .current-menu-item > a, .main-nav .current-page-ancestor > a { color: var(--red-text); }
.main-nav .sub-menu {
	display: none; position: absolute; top: 100%; left: 0; min-width: 260px;
	background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 8px; flex-direction: column; box-shadow: var(--shadow);
}
.main-nav li:hover > .sub-menu, .main-nav li:focus-within > .sub-menu { display: flex; }
.main-nav .sub-menu a { font-size: 1rem; text-transform: none; font-family: var(--font-body); letter-spacing: 0; }
.header-call { white-space: nowrap; }
.main-nav a { white-space: nowrap; }
@media (max-width: 1240px) { .brand-text { display: none; } }
.nav-toggle {
	display: none; background: none; border: 2px solid var(--line); color: #fff;
	border-radius: 8px; width: 48px; height: 48px; cursor: pointer; padding: 0;
}
.nav-toggle svg { width: 24px; height: 24px; margin: auto; }

@media (max-width: 1080px) {
	.nav-toggle { display: flex; }
	.brand-text { display: block; }
	.header-call { display: none; }
	.brand img { height: 42px; }
	.main-nav {
		display: none; position: absolute; top: 100%; left: 0; right: 0;
		background: var(--surface); border-bottom: 1px solid var(--line);
		max-height: calc(100vh - 76px); overflow-y: auto;
	}
	.main-nav.is-open { display: block; }
	.main-nav ul { flex-direction: column; padding: 10px 20px 20px; gap: 0; }
	.main-nav a { padding: 14px 4px; border-bottom: 1px solid var(--line); border-radius: 0; white-space: normal; }
	.main-nav .sub-menu { display: flex; position: static; box-shadow: none; border: 0; background: none; padding: 0 0 0 14px; min-width: 0; }
}

/* ---------- Hero ---------- */
.hero {
	position: relative; isolation: isolate;
	min-height: min(82vh, 760px);
	display: flex; align-items: flex-end;
	padding: 120px 0 64px;
	background: #000 center / cover no-repeat;
}
.hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 45%, rgba(14,15,17,.97) 100%);
}
.hero h1 { max-width: 15em; text-shadow: 0 2px 16px rgba(0,0,0,.5); }
.hero .lead { color: #e1e4e8; }
.hero-badges { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; color: #e1e4e8; font-weight: 600; }
.hero-badges li { display: flex; align-items: center; gap: 8px; }
.hero-badges svg { width: 20px; height: 20px; color: var(--red-text); flex: none; }

.page-hero {
	position: relative; isolation: isolate; padding: 110px 0 48px;
	background: var(--surface) center 30% / cover no-repeat;
	border-bottom: 1px solid var(--line);
}
.page-hero.has-image::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(14,15,17,.96));
}
.page-hero h1 { margin: 0; }
.breadcrumbs { font-size: .9rem; color: var(--muted); margin-bottom: 10px; }
.breadcrumbs a { color: var(--muted); }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 20px; }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.card {
	position: relative; display: flex; flex-direction: column;
	background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
	overflow: hidden; text-decoration: none; color: var(--text);
	transition: transform .15s, border-color .15s;
}
a.card:hover { transform: translateY(-3px); border-color: var(--red); color: var(--text); }
.card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.card h3 { margin-bottom: .35em; }
.card p { color: var(--muted); margin: 0; }
.card .more { margin-top: auto; padding-top: 14px; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--red-text); }

.split { display: grid; gap: 40px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--rev > :first-child { order: 2; } }
.split img { border-radius: var(--radius); box-shadow: var(--shadow); }

.checks { list-style: none; padding: 0; margin: 0 0 1.2em; display: grid; gap: 10px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; }
.checks svg { width: 22px; height: 22px; color: var(--red-text); flex: none; margin-top: 2px; }

.steps { counter-reset: step; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.step { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.step::before {
	counter-increment: step; content: counter(step);
	display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
	background: var(--red); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; margin-bottom: 12px;
}
.step h3 { font-size: 1.25rem; }
.step p { color: var(--muted); margin: 0; }

.brands { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; padding: 0; margin: 24px 0 0; }
.brands li {
	padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px;
	font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; letter-spacing: .05em; text-transform: uppercase; color: #dfe2e6;
}

.gallery-strip { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.gallery-strip img { aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); width: 100%; }

.band {
	background: linear-gradient(120deg, #6d0f14, #b81d24 70%);
	border-radius: var(--radius); padding: 36px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
}
.band h2 { margin: 0 0 .2em; }
.band p { margin: 0; color: #fff; }
.band .btn--ghost:hover { color: var(--red); }

/* ---------- Visit / hours ---------- */
.visit { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .visit { grid-template-columns: 1fr 1.3fr; } }
.info-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.info-box h3 { font-size: 1.3rem; }
.hours { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
.hours td { padding: 7px 0; border-bottom: 1px solid var(--line); }
.hours td:last-child { text-align: right; color: var(--muted); }
.hours tr.is-today td { color: #fff; font-weight: 700; }
.map-frame { width: 100%; min-height: 360px; height: 100%; border: 0; border-radius: var(--radius); filter: grayscale(.3) contrast(1.05); }

/* ---------- Content (editor output) ---------- */
.content-layout { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 980px) { .content-layout { grid-template-columns: minmax(0, 1fr) 340px; } }
.entry-content { max-width: 760px; }
.entry-content > * + * { margin-top: 1em; }
.entry-content h2 { margin-top: 1.6em; }
.entry-content h3 { margin-top: 1.4em; }
.entry-content img { border-radius: var(--radius); }
.entry-content .wp-block-gallery, .entry-content .gallery { gap: 12px; }
.entry-content figure { margin: 1.4em 0; }
.entry-content figcaption { color: var(--muted); font-size: .9rem; text-align: center; }
.entry-content details { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 20px; margin: 0 0 12px; }
.entry-content summary { cursor: pointer; padding: 16px 0; font-weight: 700; font-size: 1.08rem; }
.entry-content details[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content td, .entry-content th { border: 1px solid var(--line); padding: 8px 10px; }
.alignwide { max-width: none; }
/* Content made under the old light theme: a block with a background picked in the editor
   but no text color would inherit our white text (white on light blue on the old Services
   page). Turn those into dark panels so the text is always readable. */
.entry-content .has-background:not(.has-text-color):not(.wp-block-cover):not(.wp-block-button__link) {
	background: var(--surface-2) !important;
	color: var(--text) !important;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: .6em 1em;
}
.entry-content .wp-block-button__link { background: var(--red); color: #fff; border-radius: var(--radius); }
.sidebar { display: grid; gap: 20px; align-content: start; }
@media (min-width: 980px) { .sidebar { position: sticky; top: 100px; } }
.sidebar .btn { width: 100%; }
.sidebar ul { list-style: none; padding: 0; margin: 0; }
.sidebar li a { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); text-decoration: none; }

.post-list { display: grid; gap: 20px; }
.post-item { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.post-item h2 { font-size: 1.6rem; margin-bottom: .2em; }
.post-item h2 a { text-decoration: none; }
.post-meta { color: var(--muted); font-size: .9rem; margin-bottom: .6em; }
.pagination { margin-top: 30px; display: flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; }
.pagination .current { background: var(--red); border-color: var(--red); }

/* ---------- Forms ---------- */
.quote-form { display: grid; gap: 16px; }
.quote-form .row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.quote-form label { display: block; font-weight: 600; margin-bottom: 6px; }
.quote-form input, .quote-form select, .quote-form textarea,
.wpcf7 input:not([type=submit]), .wpcf7 textarea, .wpcf7 select, .search-form input[type=search] {
	width: 100%; min-height: 48px; padding: 12px 14px;
	background: var(--bg); color: var(--text);
	border: 1px solid var(--line); border-radius: 8px; font: inherit;
}
.quote-form textarea { min-height: 130px; resize: vertical; }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { border-color: var(--red-hover); outline: none; }
.quote-form .hp { position: absolute; left: -9999px; }
.form-note { padding: 14px 18px; border-radius: 8px; margin-bottom: 18px; }
.form-note--ok { background: #12351f; border: 1px solid #1f7a3e; }
.form-note--err { background: #3a1214; border: 1px solid var(--red); }
.wpcf7 input[type=submit] { background: var(--red); color: #fff; border: 0; min-height: 48px; padding: 12px 24px; border-radius: var(--radius); font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; cursor: pointer; }

/* ---------- Footer ---------- */
.site-footer { background: #000; border-top: 1px solid var(--line); padding: 56px 0 24px; color: var(--muted); font-size: .97rem; }
.footer-cols { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.site-footer h2 { font-size: 1.2rem; color: #fff; letter-spacing: .08em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 6px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.social { display: flex; gap: 10px; margin-top: 12px; }
.social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; }
.social svg { width: 20px; height: 20px; }
.footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; font-size: .88rem; }

/* ---------- Mobile action bar ---------- */
.action-bar { display: none; }
@media (max-width: 760px) {
	body { padding-bottom: 68px; }
	.action-bar {
		display: grid; grid-template-columns: repeat(3, 1fr);
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
		background: #000; border-top: 1px solid var(--line);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.action-bar a {
		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
		min-height: 64px; color: #fff; text-decoration: none;
		font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .95rem;
	}
	.action-bar a:first-child { background: var(--red); }
	.action-bar svg { width: 22px; height: 22px; }
	.topbar .tb-address { display: none; }
	.section { padding: 52px 0; }
	.hero { padding-top: 90px; min-height: 0; }
	.band { padding: 26px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}