/* Global reset + shared shell (card/nav/topbar/footer) layout.
   Rebuilt to match design_handoff_cbm_marketplace/pages/CBM Homepage.dc.html
   exactly — read line-by-line, not summarized, after the first pass drifted
   from it (wrong nav/topbar order and colors, an invented "skyscraper"
   element the actual source doesn't have, wrong max-width).
   Breakpoints: desktop (default, primary design reference) → tablet ≤1024px → mobile ≤640px.
   Every rule has a mobile behaviour defined; nothing is desktop-only unless
   explicitly a documented desktop-only affordance (the wallpaper panels). */

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--cbm-font-body);
	font-size: 14px;
	line-height: 1.5;
	color: var(--cbm-near-black-alt);
	background: #fff;
}

a { color: var(--cbm-red); text-decoration: none; }
a:hover { color: var(--cbm-red-hover); }
img { max-width: 100%; display: block; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 1000;
	width: auto; height: auto; padding: 10px 16px; clip: auto;
	background: var(--cbm-near-black); color: #fff; border-radius: var(--cbm-radius);
}

/* Page background + centered "card" — a homepage-only wrapper (the grey
   surround + boxed white card + shadow is CBM Homepage.dc.html's own
   frame-with-wallpaper effect). Every real interior-page source (New
   Vehicles/Rent Vehicles/Used Vehicles/Depot/Services etc.) is a plain
   full-bleed white page with no boxing at all, so .cbm-card only takes its
   1152px width/shadow on the homepage; elsewhere it's a transparent,
   unconstrained wrapper and .cbm-container's own --cbm-max-width (1280px)
   governs content width directly against the real page margins. Previously
   this 1152px width applied to every page unconditionally, which silently
   squeezed every interior page ~10% narrower than its own layout math
   assumed — most visible on pages with precise flex-basis sponsor-row math
   (e.g. Used Vehicles' TBF banner coming out narrower than "half the page"). */
.cbm-page-bg { min-height: 100vh; position: relative; }
body.cbm-homepage .cbm-page-bg { background: #EDEDED; }
.cbm-card {
	background: #fff;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
body.cbm-homepage .cbm-card {
	max-width: var(--cbm-homepage-card-width);
	box-shadow: 0 0 40px rgba(0,0,0,0.08);
}
/* The top gap above the card exists only to leave room for the wallpaper
   skin ad's top strip (see --cbm-wallpaper-top-height) — a homepage-only
   advertiser placement, not a general layout convention, so interior pages
   sit flush with zero gap. */
body.cbm-homepage .cbm-card { margin-top: var(--cbm-wallpaper-top-height); }
@media (max-width: 640px) {
	body.cbm-homepage .cbm-card { box-shadow: none; margin-top: 0; }
}

/* Decorative wallpaper word-cloud skin ad — homepage-only ("premium sponsor
   takeover placement" per CBM Design Brief.md), desktop/wide-viewport only.
   Sized from --cbm-homepage-card-width / --cbm-wallpaper-top-height in
   style.css so a new advertiser's space requirements are a one-line change
   there rather than several calc()s to keep in sync by hand. */
.cbm-wallpaper { display: none; }
@media (min-width: 1401px) {
	body.cbm-homepage .cbm-wallpaper { display: block; position: fixed; inset: 0; z-index: 0; }
	/* `position:fixed` positions against the true viewport, ignoring the
	   `html{margin-top:32px}` WP core adds to push normal-flow content below
	   the admin toolbar — .cbm-card (normal flow) already shifts down with
	   it automatically, but this fixed wallpaper doesn't, so its top strip
	   (and the dashed line marking its bottom edge) end up 32px higher than
	   where the card now actually starts: a blank gap between the dashed
	   line and the nav bar, visible only while logged in with the toolbar
	   showing (invisible to a logged-out visitor). Shifting the wallpaper
	   down by the toolbar's own height re-aligns the two. */
	body.cbm-homepage.admin-bar .cbm-wallpaper { top: 32px; }
	body.cbm-homepage .cbm-wallpaper__left, body.cbm-homepage .cbm-wallpaper__right {
		position: absolute; top: 0; bottom: 0; width: calc(50% - (var(--cbm-homepage-card-width) / 2));
		background: #F2F2F2; overflow: hidden;
	}
	body.cbm-homepage .cbm-wallpaper__left { left: 0; border-right: 1px dashed #B0B2B5; }
	body.cbm-homepage .cbm-wallpaper__right { right: 0; border-left: 1px dashed #B0B2B5; }
	body.cbm-homepage .cbm-wallpaper__top {
		position: absolute; top: 0;
		left: calc(50% - (var(--cbm-homepage-card-width) / 2));
		right: calc(50% - (var(--cbm-homepage-card-width) / 2));
		height: var(--cbm-wallpaper-top-height);
		background: #F2F2F2; border-bottom: 1px dashed #B0B2B5; overflow: hidden;
	}
	.cbm-wallpaper span {
		position: absolute; font-family: var(--cbm-font-mono); font-weight: 600;
		color: #585A5A; white-space: nowrap; opacity: 0.5;
	}
}

/* Buttons (shared across interior-page templates) */
.cbm-btn {
	display: inline-block;
	font-family: var(--cbm-font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 12px 22px;
	border-radius: 4px;
	border: 1px solid transparent;
	cursor: pointer;
}
.cbm-btn--primary { background: var(--cbm-red); color: #fff; }
.cbm-btn--primary:hover { background: var(--cbm-red-hover); color: #fff; }
.cbm-btn--go { background: var(--cbm-green); color: #fff; }
.cbm-btn--dark { background: var(--cbm-near-black); color: #fff; }
.cbm-btn--ghost-on-red { background: #fff; color: var(--cbm-red); border-color: #fff; }
.cbm-btn--ghost-on-red:hover { background: transparent; color: #fff; }

/* Interior-page content container (NOT the homepage, which uses .cbm-card
   directly at 1152px) */
.cbm-container {
	max-width: var(--cbm-max-width);
	margin-inline: auto;
	padding-inline: var(--cbm-side-padding);
}

/* Nav (tabs) + top bar (logo/leaderboard/search) stay visible together while
   the page scrolls, as one sticky unit rather than each stacking themselves
   at a hand-computed pixel offset (nav's height isn't fixed — it wraps and
   changes padding at narrower widths — so two independently-sticky elements
   would need to know each other's rendered height; wrapping them keeps that
   entirely in normal document flow). top:0 assumes no WP admin toolbar; when
   logged in, the toolbar is itself fixed at the viewport top (32px tall,
   46px under its own 782px breakpoint), so the offset has to match it or
   this would slide underneath it. */
.cbm-sticky-header { position: sticky; top: 0; z-index: 50; }
body.admin-bar .cbm-sticky-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .cbm-sticky-header { top: 46px; }
}

/* NAV: red bar, socials + tabs + auth links — comes BEFORE the top bar */
.cbm-nav {
	background: var(--cbm-red);
	padding-inline: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.cbm-nav__socials { display: flex; align-items: center; gap: 14px; padding-block: 2.4px; flex-shrink: 0; }
.cbm-nav__socials a { color: #fff; font-size: 15px; }
.cbm-nav__tabs {
	display: flex; overflow-x: auto; flex: 1; justify-content: flex-start;
	scrollbar-width: none;
}
.cbm-nav__tabs::-webkit-scrollbar { display: none; }
.cbm-nav__tabs a {
	padding: 2.4px 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.01em;
	text-transform: uppercase; color: #f8d0d6; white-space: nowrap;
	border-bottom: 2px solid transparent; transition: background 0.15s, color 0.15s;
}
.cbm-nav__tabs a:hover { background: rgba(255,255,255,0.18); color: #fff; }
.cbm-nav__tabs a.is-active { color: #fff; border-bottom-color: #fff; }
.cbm-nav__auth { display: flex; gap: 16px; align-items: center; flex-shrink: 0; }
.cbm-nav__auth a { color: #fff; font-weight: 600; font-size: 13px; white-space: nowrap; }
@media (max-width: 640px) {
	.cbm-nav { padding-block: 4px; }
	.cbm-nav__socials { display: none; }
}

/* TOP BAR: white, logo (left) + ad card (centred, half-width) + search
   (ranged right) — a 3-column grid, not a flex row with the ad absolutely
   centered. Absolute-centering the ad on the row's midpoint broke down
   because the logo (~175px) and search box (~275px) aren't the same width:
   centering on the *whole* row pushes the ad into whichever side has the
   wider neighbour (search), causing a visible overlap. Equal-width outer
   grid columns (1fr / auto / 1fr) keep the middle column — and the ad
   inside it — genuinely centered regardless of how wide the logo or
   search box are individually. */
/* Capped and centered at the same width as .cbm-container (interior-page
   content) so the search box's right edge lines up with whatever sits in
   the page's own right-hand column below it (e.g. New Vehicles' ad-space/
   sidebar column) — on viewports wide enough for .cbm-container to stop
   growing and center itself with side margins, an uncapped topbar would
   otherwise keep stretching to the true viewport edges and drift out of
   alignment with that capped content underneath it. Narrower than this
   max-width, margin-inline:auto is a no-op and the bar fills the viewport
   exactly as before. */
.cbm-topbar {
	background: #fff; padding-block: 10px; padding-inline: var(--cbm-side-padding);
	max-width: var(--cbm-max-width);
	margin-inline: auto;
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
/* Explicit grid-column on every child — without it, auto-placement assigns
   cells in DOM order, and .cbm-topbar__ad going display:none below 1024px
   (see its own media query) removes it from the grid's item list entirely,
   sliding the search box into the middle track instead of the third one
   and breaking its justify-self:end alignment against the container's
   right edge exactly at that breakpoint. */
.cbm-topbar__logo { grid-column: 1; flex-shrink: 0; justify-self: start; }
.cbm-topbar__logo img { height: 85px; }

/* Shell: sizing/background/grid-placement, shared by both a single ad
   (applied directly to its <a>) and a multi-ad carousel (applied to the
   wrapping <span>, with each rotating ad positioned absolutely inside it —
   see .cbm-ad-carousel__item and ad-rendering.php's cbm_render_ad_space()). */
.cbm-topbar__ad {
	grid-column: 2;
	position: relative;
	justify-self: center;
	width: 576px; max-width: 46vw;
	height: 90px; background: #1B2E20; border-radius: 2px;
	text-decoration: none; overflow: hidden;
}
/* Inner: the actual logo/copy/photo/cta layout — same on the <a> directly
   (single ad) or on each carousel item stacked inside the shell above. */
.cbm-topbar__ad-inner { display: flex; align-items: center; gap: 8px; padding-inline: 12px; height: 100%; }
.cbm-topbar__ad-logo { background: #fff; border-radius: 2px; padding: 6px 8px; flex-shrink: 0; display: flex; }
/* width:auto is load-bearing here, not decorative — WordPress's srcset/
   sizes attributes on the <img> otherwise force it to render at the
   `sizes` value (150px, the thumbnail crop width) regardless of this
   height constraint, squashing a square logo into a thin strip. Explicit
   CSS width takes precedence back over that and restores normal
   aspect-ratio scaling from the height alone. */
.cbm-topbar__ad-logo img, .cbm-topbar__ad-logo video { height: 38px; width: auto; }
.cbm-topbar__ad-divider { width: 1px; height: 38px; background: rgba(255,255,255,0.3); flex-shrink: 0; }
.cbm-topbar__ad-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cbm-topbar__ad-title { font-weight: 700; font-size: 12px; color: #fff; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbm-topbar__ad-sub { font-size: 10px; color: #c8d6c9; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbm-topbar__ad-photo { width: 70px; height: 56px; flex-shrink: 0; border-radius: 2px; overflow: hidden; }
.cbm-topbar__ad-photo img, .cbm-topbar__ad-photo video { width: 100%; height: 100%; object-fit: cover; }
.cbm-topbar__ad-cta { flex-shrink: 0; background: #fff; color: #1B2E20; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; padding: 9px 16px; border-radius: 2px; white-space: nowrap; }

.cbm-topbar__search {
	grid-column: 3;
	justify-self: end;
	display: flex; align-items: center; gap: 10px;
	background: var(--cbm-fill-light); border: 1px solid var(--cbm-hairline); border-radius: 3px;
	padding: 6px 6px 6px 14px; height: 90px;
}
.cbm-topbar__search input {
	background: transparent; border: none; outline: none; color: #333; font-size: 14px;
	width: 150px; min-width: 0; flex-shrink: 1;
}
.cbm-topbar__search button {
	background: var(--cbm-red); color: #fff; border: none; border-radius: 2px;
	font-weight: 700; font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase;
	padding: 14px 20px; cursor: pointer; flex-shrink: 0;
}
@media (max-width: 1024px) {
	.cbm-topbar__ad { display: none; }
}
@media (max-width: 640px) {
	.cbm-topbar { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.cbm-topbar__logo, .cbm-topbar__search { justify-self: center; }
	.cbm-topbar__search { height: auto; padding: 8px; }
}

/* Gate modal (real WP auth, replaces the mockup's localStorage flag) */
.cbm-gate-modal {
	position: fixed; inset: 0; z-index: 200;
	background: rgba(20,20,20,0.6);
	display: flex; justify-content: center; padding: 0 16px; overflow-y: auto;
}
.cbm-gate-modal[hidden] { display: none; }
.cbm-gate-modal__panel {
	width: 100%; max-width: 480px; margin: 80px auto 20px; height: fit-content;
	background: #fff; border-radius: 4px; box-shadow: 0 12px 40px rgba(0,0,0,0.3);
	padding: 32px 32px 28px; position: relative;
}
.cbm-gate-modal__title { font-weight: 700; font-size: 22px; margin: 0 0 6px; color: #333; text-align: center; }
.cbm-gate-modal__body { font-size: 13px; color: var(--cbm-body-grey); margin: 0 0 10px; text-align: center; }
.cbm-gate-modal__list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cbm-gate-modal__list li { font-size: 13px; color: var(--cbm-body-grey); text-align: center; }
.cbm-gate-modal__list strong { color: #333; }
.cbm-gate-modal__deal-heading { font-weight: 700; font-size: 15px; letter-spacing: 0.02em; color: #333; text-align: center; margin: 4px 0 6px; }
.cbm-gate-modal__deal-buttons { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; }
.cbm-gate-modal__deal-btn {
	display: block; text-align: center; background: #D91E25; color: #fff; font-weight: 700; font-size: 13px;
	letter-spacing: 0.02em; text-transform: uppercase; padding: 12px; border-radius: 4px; text-decoration: none;
}
.cbm-gate-modal__deal-btn:hover { filter: brightness(1.1); }
.cbm-gate-modal__tabs { display: flex; border-bottom: 1px solid var(--cbm-hairline); margin-bottom: 12px; }
.cbm-gate-modal__tabs button {
	flex: 1; text-align: center; padding: 0 0 12px; background: none; border: none;
	font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em;
	cursor: pointer; color: var(--cbm-body-grey); border-bottom: 2px solid transparent;
}
.cbm-gate-modal__tabs button.is-active { color: var(--cbm-red); border-bottom-color: var(--cbm-red); }
.cbm-gate-modal__pane[hidden] { display: none; }
.cbm-gate-modal__pane form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px; }
.cbm-gate-modal__pane input { padding: 12px 14px; border: 1px solid var(--cbm-hairline); border-radius: 4px; font-size: 14px; }
.cbm-gate-modal__submit {
	display: block; text-align: center; background: var(--cbm-red); color: #fff;
	font-weight: 700; font-size: 15px; padding: 14px; border-radius: 4px; cursor: pointer; border: none; width: 100%;
}
.cbm-gate-modal__submit:hover { background: var(--cbm-red-hover); color: #fff; }
.cbm-gate-modal__switch { font-size: 12px; color: var(--cbm-body-grey); text-align: center; margin-top: 7px; }

/* Footer */
.cbm-footer-links { background: var(--cbm-red); padding-inline: 16px; display: flex; align-items: center; }
.cbm-footer-links a { padding: 14px 16px; font-size: 13px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #fff; }
.cbm-footer-links a:hover { color: #f3cdd3; }

.cbm-footer-about { background: #262626; color: #c9cbd0; padding: 40px 32px 24px; }
.cbm-footer-about__grid { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: start; }
.cbm-footer-about__heading { font-family: var(--cbm-font-heading); font-weight: 700; font-size: 20px; color: var(--cbm-fill-light); margin-bottom: 6px; }
.cbm-footer-about__grid p { font-size: 13px; max-width: 420px; margin: 0; }
.cbm-footer-about__logo { background: #fff; padding: 8px 16px; border-radius: 2px; }
.cbm-footer-about__logo img { height: 38px; }
.cbm-footer-about__copyright { border-top: 1px solid #3a3a3a; margin-top: 14px; padding-top: 8px; text-align: center; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }
@media (max-width: 640px) {
	.cbm-footer-about__grid { grid-template-columns: 1fr; }
	.cbm-footer-about__logo { justify-self: start; }
}