/*
Theme Name: Quality Auto Deals
Theme URI: https://www.qadautos.com
Description: Black-and-gold dealership theme for Quality Auto Deals & Services LLC. Pairs with the “Quality Auto Deals – Dealer Toolkit” plugin (inventory, online financing, trade-in, service booking).
Version: 1.0.0
Requires at least: 6.2
Requires PHP: 7.4
Author: Quality Auto Deals & Services LLC
Text Domain: qadt
*/

/* Design: the crest is the hero. Black like the logo's field, metallic gold for
   anything you can act on, silver for supporting text, Cinzel to echo the
   carved "QAD" letters, Barlow for everything people read, Barlow Condensed
   for numbers (prices, payments, miles). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--qad-bg, #0d0c0a); color: var(--qad-text, #f2ede1); font: 400 1.0625rem/1.6 var(--qad-body, system-ui); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
a { color: var(--qad-gold-hi); }
h1, h2, h3 { line-height: 1.2; }
.wrap { width: min(1240px, 100% - 32px); margin-inline: auto; }
.skip-link:focus { position: fixed !important; top: 8px; left: 8px; width: auto; height: auto; clip: auto; z-index: 2000; background: var(--qad-gold); color: #000; padding: 10px 14px; }
:focus-visible { outline: 2px solid var(--qad-gold-hi); outline-offset: 2px; }

/* ---------- Top bar ---------- */
.topbar { background: #000; border-bottom: 1px solid #1d1a12; font-size: .85rem; color: var(--qad-muted); }
.topbar__inner { display: flex; gap: 22px; justify-content: flex-end; align-items: center; min-height: 34px; }
.topbar a { color: var(--qad-silver); text-decoration: none; }
.topbar a:hover { color: var(--qad-gold-hi); }
.topbar__addr { margin-right: auto; }
.topbar__phones a { color: var(--qad-gold-hi); font-weight: 600; }
@media (max-width: 760px) { .topbar__hours, .topbar__phones { display: none; } .topbar__inner { justify-content: center; } .topbar__addr { margin: 0; } }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 950; background: #000; border-bottom: 1px solid var(--qad-gold-lo); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--qad-gold-hi), transparent); opacity: .7; }
.site-header__inner { display: flex; align-items: center; gap: 28px; min-height: 82px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand__crest { height: 70px; width: auto; display: block; }
.brand__word { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font: 700 1.3rem/1 var(--qad-display); letter-spacing: .06em; background: var(--qad-metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand__sub { font: 500 .78rem/1 var(--qad-display); color: var(--qad-silver); letter-spacing: .14em; margin-top: 5px; }
.nav { flex: 1; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.nav__list > li { position: relative; }
.nav__list a { display: block; padding: 10px 12px; color: var(--qad-text); text-decoration: none; font-weight: 500; border-radius: 4px; }
.nav__list a:hover, .nav__list a[aria-current], .nav__list .current-menu-item > a { color: var(--qad-gold-hi); }
.nav__sub, .nav__list .sub-menu { list-style: none; margin: 0; padding: 8px; position: absolute; top: 100%; left: 0; min-width: 220px; background: #0a0907; border: 1px solid var(--qad-gold-lo); border-radius: 6px; display: none; box-shadow: 0 12px 30px rgba(0,0,0,.6); }
.has-sub:hover > .nav__sub, .has-sub:focus-within > .nav__sub, .menu-item-has-children:hover > .sub-menu, .menu-item-has-children:focus-within > .sub-menu { display: block; }
.has-sub > a::after, .menu-item-has-children > a::after { content: ""; display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin: 0 0 3px 8px; opacity: .7; }
.site-header__cta { display: flex; align-items: center; gap: 16px; }
.header-phone { color: var(--qad-silver); text-decoration: none; font: 600 1.05rem var(--qad-cond); letter-spacing: .03em; white-space: nowrap; }
.header-phone:hover { color: var(--qad-gold-hi); }
.site-burger { display: none; background: none; border: 1px solid var(--qad-gold-lo); border-radius: 6px; width: 46px; height: 46px; padding: 12px 11px; cursor: pointer; margin-left: auto; }
.site-burger span { display: block; height: 2px; background: var(--qad-gold-hi); margin: 4px 0; transition: transform .2s, opacity .2s; }
.nav-open .site-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .site-burger span:nth-child(2) { opacity: 0; }
.nav-open .site-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1180px) { .header-phone { display: none; } .nav__list a { padding: 10px 9px; } }
@media (max-width: 1020px) {
	.site-header__inner { min-height: 68px; gap: 12px; }
	.brand__crest { height: 56px; }
	.site-burger { display: block; }
	.site-header__cta { display: none; }
	.nav { display: none; position: fixed; inset: 0; top: 0; z-index: 940; background: #000; padding: 90px 22px 120px; overflow: auto; }
	.nav-open .nav { display: block; }
	.nav-open .site-burger { position: relative; z-index: 960; }
	.nav-open .brand { position: relative; z-index: 960; }
	.nav__list { flex-direction: column; gap: 0; }
	.nav__list > li { border-bottom: 1px solid var(--qad-line); }
	.nav__list a { padding: 16px 4px; font-size: 1.2rem; font-family: var(--qad-display); }
	.nav__sub, .nav__list .sub-menu { position: static; display: block; border: 0; box-shadow: none; background: none; padding: 0 0 10px 12px; }
	.nav__sub a, .nav__list .sub-menu a { font: 400 1rem var(--qad-body); padding: 8px 4px; color: var(--qad-silver); }
	.has-sub > a::after, .menu-item-has-children > a::after { display: none; }
}
@media (max-width: 420px) { .brand__name { font-size: 1.05rem; } .brand__sub { font-size: .66rem; } }

/* Mobile quick-action bar */
.site-mobilebar { display: none; }
@media (max-width: 760px) {
	.site-mobilebar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: rgba(0,0,0,.96); border-top: 1px solid var(--qad-gold-lo); padding-bottom: env(safe-area-inset-bottom); }
	.site-mobilebar a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0 10px; color: var(--qad-silver); text-decoration: none; font-size: .75rem; font-weight: 600; }
	.site-mobilebar svg { width: 22px; height: 22px; color: var(--qad-gold); }
	.site-mobilebar a.is-gold { background: var(--qad-metal); color: #1a1306; }
	.site-mobilebar a.is-gold svg { color: #1a1306; }
	body { padding-bottom: 66px; }
}

/* ---------- Hero ---------- */
.hero { background: radial-gradient(ellipse 60% 70% at 78% 45%, rgba(212,165,58,.14), transparent 70%), #000; border-bottom: 1px solid var(--qad-line); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 48px 0 56px; }
.hero__title { margin: 0 0 14px; font: 600 clamp(2.2rem, 4.6vw, 3.9rem)/1.08 var(--qad-display); letter-spacing: .01em; color: var(--qad-text); text-wrap: balance; }
.hero__text { margin: 0 0 26px; font-size: 1.15rem; color: var(--qad-silver); max-width: 52ch; }
.hero__alt { margin: 16px 0 0; color: var(--qad-muted); font-size: .95rem; }
.hero__art { position: relative; }
.hero__art img { display: block; width: 100%; max-width: 620px; margin-left: auto; -webkit-mask-image: radial-gradient(ellipse 70% 68% at 50% 46%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 70% 68% at 50% 46%, #000 62%, transparent 100%); animation: hero-in 1.1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes hero-in { from { opacity: 0; transform: scale(.96); filter: brightness(.4); } }
@media (max-width: 900px) {
	.hero__grid { grid-template-columns: 1fr; padding: 22px 0 36px; gap: 8px; }
	.hero__art { order: -1; }
	.hero__art img { max-width: 340px; margin: 0 auto; }
	.hero__title { text-align: center; }
	.hero__text { text-align: center; margin-inline: auto; }
	.hero__alt { text-align: center; }
}

/* ---------- Buy / Sell / Trade / Service ---------- */
.routes { background: #000; border-bottom: 1px solid var(--qad-line); }
.routes__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.route { display: grid; grid-template-columns: 58px 1fr; grid-template-rows: auto auto; column-gap: 14px; padding: 26px 18px; text-decoration: none; border-right: 1px solid var(--qad-line); transition: background .2s; }
.route:last-child { border-right: 0; }
.route:hover { background: rgba(212,165,58,.06); }
.hex { grid-row: 1 / 3; width: 58px; height: 66px; }
.hex__frame { fill: rgba(212,165,58,.08); stroke: var(--qad-gold); stroke-width: 2; }
.hex__glyph { fill: var(--qad-gold-hi); stroke: var(--qad-gold-hi); stroke-width: 0; }
.hex__glyph [fill=none] { stroke-width: 3.2; }
.route__name { align-self: end; font: 600 1.3rem/1.1 var(--qad-display); color: var(--qad-gold-hi); letter-spacing: .06em; }
.route__text { color: var(--qad-muted); font-size: .92rem; line-height: 1.4; margin-top: 4px; }
@media (max-width: 900px) { .routes__grid { grid-template-columns: 1fr 1fr; } .route:nth-child(2) { border-right: 0; } .route:nth-child(-n+2) { border-bottom: 1px solid var(--qad-line); } }
@media (max-width: 480px) { .route { grid-template-columns: 44px 1fr; padding: 18px 12px; } .hex { width: 44px; height: 50px; } .route__name { font-size: 1.1rem; } .route__text { display: none; } .route { align-items: center; } }

/* ---------- Bands ---------- */
.band { padding: 64px 0; }
.band h2 { font: 600 clamp(1.6rem, 3vw, 2.3rem)/1.15 var(--qad-display); margin: 0 0 12px; color: var(--qad-text); }
.band__head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.band__head h2 { margin: 0; }
.band--finance { background: linear-gradient(180deg, #000, var(--qad-bg)); border-top: 1px solid var(--qad-line); border-bottom: 1px solid var(--qad-line); }
.finance { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 50px; align-items: center; }
.finance__intro p { color: var(--qad-silver); font-size: 1.1rem; max-width: 46ch; }
.finance__intro .qad-btn { margin: 10px 18px 10px 0; }
.finance__steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 0; }
.finance__steps li { counter-increment: step; display: grid; grid-template-columns: 64px 1fr; padding: 18px 0; border-bottom: 1px solid var(--qad-line); }
.finance__steps li:last-child { border-bottom: 0; }
.finance__steps li::before { content: counter(step); grid-row: 1 / 3; font: 700 2.6rem/1 var(--qad-cond); background: var(--qad-metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.finance__steps h3 { margin: 0; font: 600 1.2rem var(--qad-body); }
.finance__steps p { margin: 4px 0 0; color: var(--qad-muted); }
@media (max-width: 860px) { .finance { grid-template-columns: 1fr; gap: 24px; } }

.band--hunt { padding: 40px 0; background: #000; }
.hunt { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; border: 1px solid var(--qad-gold-lo); border-radius: 10px; padding: 26px 30px; background: linear-gradient(90deg, rgba(212,165,58,.12), transparent 70%); }
.hunt__crown { width: 72px; fill: var(--qad-gold); }
.hunt h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); margin-bottom: 4px; }
.hunt p { margin: 0; color: var(--qad-silver); }
@media (max-width: 760px) { .hunt { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 24px 18px; gap: 14px; } }

.service { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.service p { color: var(--qad-silver); }
.service__list { list-style: none; padding: 0; margin: 0 0 22px; }
.service__list li { padding: 10px 0 10px 26px; border-bottom: 1px solid var(--qad-line); position: relative; }
.service__list li::before { content: ""; position: absolute; left: 0; top: 18px; width: 10px; height: 10px; transform: rotate(45deg); background: var(--qad-gold); }
.visit address { font-style: normal; font-size: 1.15rem; }
.visit__hours { color: var(--qad-silver); }
.visit__map { aspect-ratio: 16 / 10; border: 1px solid var(--qad-gold-lo); border-radius: 8px; overflow: hidden; margin: 12px 0; background: #111; }
.visit__map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.92) contrast(.9) sepia(.25); }
@media (max-width: 860px) { .service { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- Pages ---------- */
.page-head { background: #000; border-bottom: 1px solid var(--qad-line); padding: 36px 0 30px; }
.page-head h1 { margin: 0; font: 600 clamp(1.9rem, 4vw, 2.8rem)/1.1 var(--qad-display); color: var(--qad-text); }
.page-body { padding: 34px 0 70px; }
.page-body > p, .page-body > ul, .page-body > ol, .page-body > h2, .page-body > h3 { max-width: 75ch; }
.qad-lead { font-size: 1.15rem; color: var(--qad-silver); }
.qad-page-trade .page-body > .qad-form, .qad-page-sell .page-body > .qad-form, .qad-page-finder .page-body > .qad-form, .qad-page-service .page-body > .qad-form, .qad-page-contact .page-body > .qad-form { max-width: 860px; background: var(--qad-surface); border: 1px solid var(--qad-line); border-radius: 10px; padding: 26px; }
.qad-page-apply .page-body > .qad-lead { text-align: center; margin-inline: auto; }
.qad-page-apply .page-head, .qad-page-apply .page-head h1 { text-align: center; }
.post-row { padding: 18px 0; border-bottom: 1px solid var(--qad-line); }
.post-row h2 { margin: 0; font-family: var(--qad-display); }
.post-row h2 a { color: var(--qad-text); text-decoration: none; }
.post-row__date { color: var(--qad-muted); margin: 4px 0; font-size: .9rem; }

/* ---------- Footer ---------- */
.site-footer { background: #000; border-top: 1px solid var(--qad-gold-lo); padding: 50px 0 24px; color: var(--qad-silver); font-size: .95rem; }
.site-footer__grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 30px; }
.site-footer h2 { font: 600 1rem var(--qad-display); color: var(--qad-gold-hi); letter-spacing: .08em; margin: 0 0 12px; }
.site-footer address { font-style: normal; margin-bottom: 10px; }
.site-footer a { color: var(--qad-silver); }
.site-footer a:hover { color: var(--qad-gold-hi); }
.site-footer__brand img { width: 140px; height: auto; }
.site-footer__brand p { font-family: var(--qad-display); color: var(--qad-gold); margin: 8px 0 0; }
.site-footer__list, .site-footer__social { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.site-footer__social { display: flex; gap: 14px; margin-top: 14px; }
.site-footer__legal { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--qad-line); margin-top: 36px; padding-top: 18px; font-size: .8rem; color: var(--qad-muted); }
.site-footer__legal p { margin: 0; }
.site-footer__legal a { color: var(--qad-muted); }
@media (max-width: 860px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { .hero__art img { animation: none; } html { scroll-behavior: auto; } }