/*
Theme Name: Concord Storefront Child
Template: storefront
Description: Concord Tire Shop child theme, built on Storefront. Replaces the site's former Elementor build per the Phase 2 migration (see docs/concord-tire-master-plan-v2.md).
Author: Concord Tire Shop
Version: 0.5.5
*/

/*
 * Brand palette + typography, extracted from the site's actual Elementor
 * Kit global settings and the homepage's generated CSS (not guessed) -
 * see docs/PROGRESS.md, 2026-08-12 "styling/branding pass" entry.
 */
:root {
	--cst-red: #C70000;
	--cst-red-hover: #F60000;
	--cst-white: #FFFFFF;
	--cst-text-dark: #1B1B1B;
	--cst-text-muted: #5E5E5E;
	--cst-border: #E2E2E2;
	--cst-overlay-dark: #161616;

	--cst-font-heading: 'Open Sans', sans-serif;
	--cst-font-body: Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------------
 * Typography
 * ------------------------------------------------------------------- */

body,
button,
input,
select,
textarea {
	font-family: var( --cst-font-body );
	color: var( --cst-text-dark );
}

body {
	font-size: 16px;
	line-height: 1.2;
	/* Safety net: something in the redesigned homepage sections still
	   forces horizontal scroll at narrow widths even after fixing the
	   Columns block's non-wrapping nowrap issue below - text was being
	   clipped at the viewport edge instead of wrapping. Root cause not
	   fully isolated yet; this prevents the page itself from scrolling
	   horizontally while that's investigated further. */
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.woocommerce-Tabs-panel h2,
.widget-title {
	font-family: var( --cst-font-heading );
	font-weight: 800;
	color: var( --cst-text-dark );
}

h1 { font-size: 48px; line-height: 1.2; }
h2 { font-size: 42px; line-height: 1.2; }
h3 { font-size: 32px; line-height: 1.4; }
h4 { font-size: 24px; font-weight: 400; line-height: 1.25; }
h5 { font-size: 21px; line-height: 1.25; }
h6 { font-size: 18px; font-family: var( --cst-font-body ); font-weight: 400; line-height: 1.5; }

@media ( max-width: 480px ) {
	h1 { font-size: 38px; }
	h2 { font-size: 28px; }
}

.site-description,
small,
.woocommerce-review__dash,
.posted_in,
.tagged_as {
	color: var( --cst-text-muted );
}

a {
	color: var( --cst-text-dark );
	text-decoration: none;
}

a:hover,
a:focus {
	color: var( --cst-red );
}

/* ---------------------------------------------------------------------
 * Buttons - matches the Kit's global button style exactly:
 * white text on brand red, pill-shaped, red-hover.
 * Covers WooCommerce add-to-cart/checkout buttons, search submit,
 * and any other themed button, since Storefront routes them all
 * through the shared `.button` class.
 * ------------------------------------------------------------------- */

.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button,
.woocommerce-product-search button[type="submit"],
input[type="submit"] {
	font-family: var( --cst-font-body );
	font-weight: 700;
	font-size: 16px;
	color: var( --cst-white );
	background-color: var( --cst-red );
	border: none;
	border-radius: 48px;
	padding: 19px 40px;
	transition: background-color 0.2s ease;
}

.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce input.button:hover,
.woocommerce-product-search button[type="submit"]:hover,
input[type="submit"]:hover {
	color: var( --cst-white );
	background-color: var( --cst-red-hover );
}

/* ---------------------------------------------------------------------
 * Header / navigation
 *
 * Storefront structurally renders the header as two separate wrapper
 * divs - branding+search (storefront_header_container) and nav+cart
 * (storefront_primary_navigation_wrapper) - both nested inside the
 * same #masthead element. Giving #masthead one shared background is
 * what makes them read as one bar instead of two.
 *
 * Correction from the first styling pass (0.2.0): that version put a
 * white background here, guessed in the absence of direct evidence.
 * Production's actual generated header CSS (post-47.css) was checked
 * directly this pass and shows the real header background is brand
 * red (#C70000) with white nav text - not white. Updated to match.
 * ------------------------------------------------------------------- */

/* Vertical-space polish pass (2026-08-12): Storefront's own default
   header padding-top (~42px, from its 2.617924em rule) plus our own
   generous section padding pushed the search widget further down than
   necessary. Tightened here and throughout the promo bar/branding/hero
   - nothing removed, just less dead space between elements. */
#masthead.site-header {
	background-color: var( --cst-red );
	padding-top: 16px;
	padding-bottom: 12px;
}

/* Widen the header's content container to the site's real original
   content width (1232px, matching the Elementor Kit's container_width
   setting extracted earlier) instead of Storefront's own narrower
   default (~1064px, from its 66.4989378333em max-width). Confirmed via
   real headless-Chrome renders at 1024/1366/1440/1920px: this ~168px
   gap was the actual root cause of the nav wrapping to a second line,
   not padding/margin - see docs/PROGRESS.md for the full before/after
   testing. */
.site-header .col-full {
	max-width: 1232px;
}

/* Promo bar - static content matching production's Elementor Header
   exactly (icon / heading / icon), sits above #masthead via the
   storefront_before_header hook in functions.php. */
.cst-promo-bar {
	background-color: var( --cst-overlay-dark );
	padding: 6px 0;
}

.cst-promo-bar .col-full {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.cst-promo-bar__icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

.cst-promo-bar__text {
	margin: 0;
	font-family: var( --cst-font-body );
	font-size: 16px;
	color: #F7F7F7;
	text-align: center;
}

@media ( max-width: 480px ) {
	.cst-promo-bar__icon {
		display: none;
	}
}

/* Social icons row - real links pulled from production, rendered via
   the cst_header_social_icons hook in functions.php. */
.cst-social-icons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding-top: 16px;
}

.cst-social-icons img {
	width: 24px;
	height: 24px;
}

/* Centered brand title/logo - matches production's actual settings
   (Open Sans 800, uppercase, white, centered) rather than the smaller
   left-aligned text used in the first styling pass. */
.site-branding {
	text-align: center;
	padding-bottom: 8px;
}

.site-branding .site-title a {
	display: inline-block;
	font-family: var( --cst-font-heading );
	font-weight: 800;
	font-size: 42px;
	line-height: 1.1;
	text-transform: uppercase;
	color: var( --cst-white );
}

.site-branding .site-title a:hover {
	color: var( --cst-white );
	opacity: 0.85;
}

@media ( max-width: 768px ) {
	.site-branding .site-title a {
		font-size: 28px;
	}
}

@media ( max-width: 480px ) {
	.site-branding .site-title a {
		font-size: 20px;
	}
}

/* Nav - uppercase, tight spacing, zero per-item padding, matching
   production's real values.
   Margin (10px) and font-size (14px unconditional) are a deliberate,
   evidenced deviation from the literal extracted desktop values (16px
   margin, 16px font above 1536px) - real headless-Chrome testing
   showed 16px/16px only achieves single-row fit at 1024px/1366px, not
   consistently. Because our .col-full is always capped at 1232px
   regardless of viewport (unlike production, which appears to keep
   growing), there's no "wide viewport = extra room" case for us, so
   14px is applied unconditionally rather than only below 1536px. This
   combination (1232px container + 14px font + 10px margin) was tested
   and confirmed to fit all 9 top-level items on one row at
   1920/1440/1366px. 1024px still wraps (6+3, improved from 4+5) -
   matches production's own behavior, which swaps to an entirely
   different, shorter menu at that width rather than shrinking further;
   scoped as a separate follow-up (raising Storefront's hamburger
   breakpoint) rather than bundled here. See docs/PROGRESS.md for the
   full before/after testing across all 4 widths. */
#site-navigation.main-navigation ul.menu,
#site-navigation.main-navigation ul.nav-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
}

#site-navigation.main-navigation ul.menu > li,
#site-navigation.main-navigation ul.nav-menu > li {
	margin: 0 10px 0 0;
	padding: 0;
}

#site-navigation.main-navigation ul.menu > li:last-child,
#site-navigation.main-navigation ul.nav-menu > li:last-child {
	margin-right: 0;
}

#site-navigation.main-navigation ul.menu > li > a,
#site-navigation.main-navigation ul.nav-menu > li > a {
	font-family: var( --cst-font-body );
	font-weight: 700;
	font-size: 14px;
	line-height: 1.5;
	text-transform: uppercase;
	padding: 0;
	margin: 0;
	color: var( --cst-white );
}

#site-navigation.main-navigation ul.menu > li > a:hover,
#site-navigation.main-navigation ul.nav-menu > li > a:hover,
#site-navigation.main-navigation ul.menu > li.current-menu-item > a,
#site-navigation.main-navigation ul.nav-menu > li.current-menu-item > a {
	color: var( --cst-white );
	box-shadow: inset 0 -2px 0 var( --cst-white );
}

/* Dropdown submenu (e.g. "Our Tire Brands") - dark instead of red so it
   reads as a distinct panel dropping out of the red bar, not a flat
   continuation of it. */
#site-navigation.main-navigation ul.sub-menu {
	background-color: var( --cst-overlay-dark );
}

#site-navigation.main-navigation ul.sub-menu > li > a {
	color: var( --cst-white );
	font-weight: 400;
}

#site-navigation.main-navigation ul.sub-menu > li > a:hover {
	color: var( --cst-red );
	box-shadow: none;
}

/* Mobile menu toggle - inverted (white on red) so it stands out against
   the now-red header instead of disappearing into it. */
#site-navigation-menu-toggle.menu-toggle {
	background-color: var( --cst-white );
	color: var( --cst-red );
	border-radius: 4px;
}

#site-navigation-menu-toggle.menu-toggle:hover {
	background-color: var( --cst-overlay-dark );
	color: var( --cst-white );
}

/* Header product search - needs a light field to stay legible sitting
   directly on the red bar; its submit button is inverted (white on
   red header) rather than red-on-red like buttons elsewhere on the site. */
.woocommerce-product-search input[type="search"] {
	background-color: var( --cst-white );
	border: 1px solid var( --cst-white );
	color: var( --cst-text-dark );
}

.site-header .woocommerce-product-search button[type="submit"] {
	background-color: var( --cst-white );
	color: var( --cst-red );
}

.site-header .woocommerce-product-search button[type="submit"]:hover {
	background-color: var( --cst-overlay-dark );
	color: var( --cst-white );
}

/* Header cart - was inheriting the site's dark body-text color, making
   the "$0.00 / 0 items" text (and its icon, which shares the same
   color via currentColor) illegible against the red header. */
#site-header-cart.site-header-cart .cart-contents,
#site-header-cart.site-header-cart .cart-contents .woocommerce-Price-amount,
#site-header-cart.site-header-cart .cart-contents .count {
	color: var( --cst-white );
}

/* ---------------------------------------------------------------------
 * Footer - uses the site's dark overlay tone as a solid background,
 * with light text (the source #5E5E5E muted-text color is calibrated
 * for a light background and reads too low-contrast on dark, so footer
 * text uses a light tint instead - see docs/PROGRESS.md for why).
 * ------------------------------------------------------------------- */

#colophon.site-footer {
	background-color: var( --cst-overlay-dark );
	color: var( --cst-white );
}

#colophon.site-footer a {
	color: var( --cst-white );
}

#colophon.site-footer a:hover {
	color: var( --cst-red );
}

#colophon.site-footer .widget-title {
	color: var( --cst-white );
	font-size: 18px;
}

#colophon.site-footer .footer-widgets {
	border-top: 1px solid rgba( 255, 255, 255, 0.15 );
}

#colophon.site-footer .footer-widgets .block + .block {
	border-left: 1px solid rgba( 255, 255, 255, 0.15 );
}

/* Footer info block (About/Visit Us/Hours) - cst_footer_info() in
   functions.php, added as part of the 2026-08-12 homepage/header
   redesign. Text color inherits white from the #colophon rule above. */
.cst-footer-info {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px;
	padding: 32px 0;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.15 );
	text-align: center;
}

.cst-footer-info__col {
	min-width: 200px;
}

/* Higher specificity than Storefront's own `.site-footer h4{color:#333437}`
   (a dark-gray heading color meant for a light footer background) - our
   footer is dark, so that rule was winning and rendering these headings
   near-illegible. #colophon.site-footer matches the specificity pattern
   already used elsewhere in this file for the same reason. */
#colophon.site-footer .cst-footer-info__heading {
	font-family: var( --cst-font-heading );
	font-weight: 800;
	font-size: 16px;
	text-transform: uppercase;
	color: var( --cst-white );
	margin: 0 0 12px;
}

.cst-footer-info__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cst-footer-info__links li + li {
	margin-top: 8px;
}

.cst-footer-info__text {
	margin: 0 0 8px;
	color: var( --cst-white );
	font-size: 14px;
	line-height: 1.5;
}

/* Social icons, relocated from the header to the footer - the base
   .cst-social-icons rule already fits (white/colored icons on the
   footer's dark background), this just adjusts the vertical rhythm
   for its new spot between the info block and the credit line. */
.cst-social-icons--footer {
	padding: 24px 0;
}

/* ---------------------------------------------------------------------
 * Homepage redesign (2026-08-12) - search-first hero, trust bar,
 * browse-by-category and services sections. Replaces the old Elementor
 * phone-panel + "NEED TIRES?" banner content entirely.
 * ------------------------------------------------------------------- */

.cst-hero {
	background-color: var( --cst-white );
	padding: 28px 24px 24px;
	text-align: center;
}

.cst-hero__title {
	color: var( --cst-text-dark );
	margin-bottom: 8px;
	overflow-wrap: break-word;
}

.cst-hero__subtitle {
	color: var( --cst-text-muted );
	font-family: var( --cst-font-body );
	font-size: 18px;
	max-width: 640px;
	margin: 0 auto 18px;
	overflow-wrap: break-word;
}

/* The [cti_tire_search] shortcode's own UI (form/results/filters) is
   rendered by the plugin's own cti-public.css - deliberately not
   overridden here beyond centering its outer wrapper, so the plugin's
   styling stays the single source of truth for its own markup. */
.cst-hero .wp-block-shortcode {
	max-width: 900px;
	margin: 0 auto;
	text-align: left;
}

.cst-trust-bar {
	background-color: var( --cst-red );
	padding: 8px 24px;
}

.cst-trust-bar p {
	margin: 0;
	color: var( --cst-white );
	font-family: var( --cst-font-body );
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.cst-section {
	padding: 56px 24px;
	text-align: center;
}

.cst-section h2 {
	color: var( --cst-text-dark );
	margin-bottom: 32px;
}

.cst-section--services {
	background-color: #FAFAFA;
}

.cst-card-grid {
	max-width: 1100px;
	margin: 0 auto;
	gap: 24px !important;
}

.cst-card {
	background-color: var( --cst-white );
	border: 1px solid var( --cst-border );
	border-radius: 8px;
	padding: 32px 16px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cst-card:hover {
	border-color: var( --cst-red );
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.08 );
}

.cst-card__title {
	margin: 0;
}

.cst-card__title a {
	font-family: var( --cst-font-heading );
	font-weight: 800;
	font-size: 20px;
	color: var( --cst-text-dark );
	text-decoration: none;
	display: block;
}

.cst-card__title a:hover {
	color: var( --cst-red );
}

/* WordPress's block-supports layout system generates an inline
   `<style id="core-block-supports-inline-css">` rule per Columns block
   instance (`.wp-container-core-columns-is-layout-{hash}{flex-wrap:nowrap;}`)
   with no responsive override, since Storefront is a classic theme with
   no theme.json to declare one. Without this, the 4/2 cards were forced
   into one non-wrapping row at every viewport width, overflowing the
   page horizontally on mobile instead of stacking. `!important` is
   needed since the auto-generated rule's specificity ties with a plain
   class selector and its hash isn't stable to target directly. */
@media ( max-width: 600px ) {
	.cst-card-grid {
		flex-wrap: wrap !important;
	}

	.cst-card-grid > .cst-card {
		flex-basis: 100% !important;
		width: 100% !important;
	}
}

@media ( max-width: 480px ) {
	.cst-hero {
		padding: 20px 16px 20px;
	}

	.cst-hero__subtitle {
		font-size: 16px;
		margin-bottom: 14px;
	}

	.cst-section {
		padding: 40px 16px;
	}
}

/* ---------------------------------------------------------------------
 * Tire brands index page (scripts/create-tire-brands-index-page.php) -
 * a CSS grid rather than the wp:columns/.cst-card-grid pattern used
 * elsewhere, since that pattern is flex-based and tuned for a handful of
 * columns (4/2 on the homepage); this grid holds 23+ items and needs to
 * wrap naturally at any count/width.
 * ------------------------------------------------------------------- */

.cst-brand-grid {
	max-width: 1100px;
	margin: 24px auto 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) );
	gap: 16px;
}

.cst-brand-grid__item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 100%;
	padding: 16px 8px;
	border: 1px solid var( --cst-border );
	border-radius: 8px;
	text-align: center;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cst-brand-grid__item a:hover {
	border-color: var( --cst-red );
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.08 );
}

/* Fixed-size box, identical for every item regardless of the source
   image's native dimensions - the actual root-cause fix (see
   scripts/create-tire-brands-index-page.php for the full explanation of
   why the previous version, using WordPress's cropped `thumbnail` size,
   was chopping wide logos down to illegible fragments). The image
   itself is requested at full/uncropped size; object-fit: contain here
   is what scales it down to fit within this box without ever cropping
   or stretching it - works the same way for any future brand's logo,
   whatever its own native aspect ratio turns out to be. */
.cst-brand-grid__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 64px;
}

.cst-brand-grid__logo img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.cst-brand-grid__name {
	font-family: var( --cst-font-heading );
	font-weight: 800;
	font-size: 14px;
	color: var( --cst-text-dark );
}

.cst-brand-grid__item a:hover .cst-brand-grid__name {
	color: var( --cst-red );
}

/* ---------------------------------------------------------------------
 * Wheel and Rims page grid (scripts/rebuild-remaining-pages.php) - a
 * content card per brand (photo + name + description), the whole card
 * linking to /price-quote/. Same CSS-grid-that-wraps-at-any-count
 * approach as .cst-brand-grid above, sized for a photo+text card
 * instead of a small logo mark.
 * ------------------------------------------------------------------- */

.cst-wheel-grid {
	max-width: 1100px;
	margin: 24px auto 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
	gap: 24px;
}

.cst-wheel-grid__item a {
	display: block;
	height: 100%;
	padding: 16px;
	border: 1px solid var( --cst-border );
	border-radius: 8px;
	text-align: center;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cst-wheel-grid__item a:hover {
	border-color: var( --cst-red );
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.08 );
}

.cst-wheel-grid__image {
	display: block;
	width: 100%;
	height: 140px;
	margin-bottom: 12px;
	overflow: hidden;
	border-radius: 4px;
}

.cst-wheel-grid__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cst-wheel-grid__name {
	display: block;
	font-family: var( --cst-font-heading );
	font-weight: 800;
	font-size: 16px;
	color: var( --cst-text-dark );
	margin-bottom: 8px;
}

.cst-wheel-grid__item a:hover .cst-wheel-grid__name {
	color: var( --cst-red );
}

.cst-wheel-grid__desc {
	display: block;
	font-family: var( --cst-font-body );
	font-size: 13px;
	line-height: 1.4;
	color: var( --cst-text-muted );
}

/* ---------------------------------------------------------------------
 * Tire Blog category nav (cst_blog_category_nav() in functions.php) -
 * a plain wrapping row of links, not a dropdown/sidebar - matches the
 * "functional, not deep polish" scope this page's rebuild pass used.
 * ------------------------------------------------------------------- */

.cst-blog-categories {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 12px;
	max-width: 1100px;
	margin: 0 auto 32px;
	padding: 0 24px;
}

.cst-blog-categories a {
	font-family: var( --cst-font-body );
	font-weight: 700;
	font-size: 14px;
	padding: 6px 14px;
	border: 1px solid var( --cst-border );
	border-radius: 20px;
	color: var( --cst-text-dark );
}

.cst-blog-categories a:hover,
.cst-blog-categories a.is-active {
	border-color: var( --cst-red );
	color: var( --cst-red );
}