/*
Theme Name: CBM Market
Theme URI: https://coachandbusmarket.com
Author: Coach and Bus Week
Description: Custom theme for CBM (Coach and Bus Market), the vehicle marketplace and industry hub for the UK/RoI coach, bus and minibus industry, published by Coach and Bus Week (CBW).
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.1
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cbm-market
*/

/* Design tokens — source of truth: design_handoff_cbm_marketplace/README.md "Design Tokens" section */
:root {
	--cbm-red: #D91E25;
	--cbm-red-hover: #B2191E;
	--cbm-near-black: #1A1A1A;
	--cbm-near-black-alt: #222222;
	--cbm-body-grey: #4B4C4D;
	--cbm-heading-color: #000000;
	--cbm-muted-grey: #6D6E72;
	--cbm-hairline: #D8D9DB;
	--cbm-hairline-light: #E7E8EA;
	--cbm-fill-light: #F2F2F2;
	--cbm-fill-lighter: #F7F7F7;
	--cbm-footer-dark: #262626;
	--cbm-green: #1E9E4B;
	--cbm-green-dark: #1B2E20;
	--cbm-white: #FFFFFF;

	--cbm-bronze: #B5651D;
	--cbm-silver: #8A8D91;
	--cbm-gold: #E8B84B;

	/* Headings sitewide use the body face, not Space Grotesk - the original design
	   doc (design_handoff_cbm_marketplace/README.md "Design Tokens") reserved
	   Space Grotesk for small 700-weight section labels/eyebrows only, never
	   full headlines, but --cbm-font-heading got set to it for every heading-
	   styled element early in the build. Flagged as "wrong font" by Jonathan on
	   three separate occasions at three different sizes (13px, 21px, 32px) -
	   2026-09-27: "everything in Inter please". */
	--cbm-font-heading: 'Inter', sans-serif;
	--cbm-font-body: 'Inter', sans-serif;
	--cbm-font-mono: 'IBM Plex Mono', monospace;

	--cbm-radius: 3px;
	--cbm-max-width: 1174px; /* matched to --cbm-homepage-card-width, 2026-08-26 — was 1280px, independently of the top section's own width, so interior-page body content (.cbm-container) could overhang the now-standardised nav/topbar/ticker band by ~53px each side; per the user, narrowed to match rather than widening the top section */
	--cbm-side-padding: 32px;
	--cbm-gap: 20px;

	/* Homepage-only "frame with wallpaper" ad skin (CBM Design Brief.md's
	   "premium sponsor takeover placement"): a decorative border either side
	   of the 1152px card, plus a strip above it, sized for whatever an
	   advertiser's skin creative needs. Both the card and the wallpaper skin
	   read from these two values, so resizing the ad space for a new
	   advertiser deal is a one-line change here rather than hunting through
	   several calc()s that have to be kept in sync by hand. */
	--cbm-homepage-card-width: 1174px; /* was 1152px, widened +50px to 1202px, then eased back to +22px here (2026-08-26) once the leaderboard ad shrank from 728px to a non-standard 700px — same 28px given back to the wallpaper "fireplace" frame that the ad gave up, keeping the topbar's logo/ad/Awards-box spacing identical to the 728px/1202px tuning */
	--cbm-wallpaper-top-height: 60px;

	/* Responsive breakpoints, referenced in comments (custom properties can't be used in @media) */
	/* tablet: max-width 1024px · mobile: max-width 640px */
}

@media (max-width: 640px) {
	:root {
		--cbm-side-padding: 16px;
		--cbm-gap: 14px;
	}
}


/* Headings darker/more prominent than body text - Jonathan, 2026-09-27:
   "perhaps the titles should be darker... make them stand out" - body text
   and headings were both resolving to the same near-black (#222222) with
   no colour distinction at all, only weight/size. Placed last in this file
   so it wins ties against earlier same-specificity element rules. */
h1, h2, h3, h4, h5, h6 {
	color: var(--cbm-heading-color);
	font-weight: 700;
}

/* The reverse lever, same reason - #222222 body text next to #000000
   headings is too close in darkness for the eye to register any contrast
   at all. Lightening body copy to a real mid-grey is what actually makes
   titles read as darker/more prominent, not pushing headings past
   near-black where there's no visible room left to move. */
p, li {
	color: var(--cbm-body-grey);
}