/*
Theme Name:   Chief Camper
Description:  Custom GeneratePress child theme for Chief Camper — RV parts and camping gear, serving Ontario, Canada, and the United States.
Author:       Chief Camper
Template:     generatepress
Version:      0.3.83
Text Domain:  chief-camper
*/

/* ==========================================================================
   Design tokens
   Single source of truth for color/spacing/type values used across the
   child theme. Components should reference these variables rather than
   hard-coding hex values or pixel sizes.
   ========================================================================== */
:root {
	/* Color — brand */
	--cc-color-background: #F8F9F9;
	--cc-color-heading: #304234;
	--cc-color-body: #34495E;
	--cc-color-accent: #D35400;
	--cc-color-hover: #2D4033;
	--cc-color-border: #D5DBDB;
	--cc-color-shadow: rgba(0, 0, 0, 0.12);

	--cc-color-button-bg: #E67E22;
	--cc-color-button-text: #FFFFFF;
	--cc-color-button-border: #000000;
	--cc-color-button-bg-hover: #D35400;
	--cc-color-button-text-hover: #FFFFFF;
	--cc-color-button-border-hover: #000000;

	/* Color — neutrals & semantics not specified in the brand brief.
	   Surface is plain white: it sits on the #F8F9F9 page background as a
	   card/input tone, not a new brand color. Error is a semantic signal
	   kept deliberately separate from the accent orange so a sale badge
	   and a form error are never visually confused. */
	--cc-color-surface: #FFFFFF;
	--cc-color-error: #B3261E;
	--cc-color-error-bg: #FBEAE8;

	/* Type families */
	--cc-font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
	--cc-font-heading: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
	--cc-font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--cc-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Type scale — fluid between mobile and desktop */
	--cc-text-xs: 0.8125rem;
	--cc-text-sm: 0.9375rem;
	--cc-text-base: 1rem;
	--cc-text-md: 1.125rem;
	--cc-text-lg: 1.375rem;
	--cc-text-xl: clamp(1.75rem, 1.55rem + 1vw, 2.25rem);
	--cc-text-2xl: clamp(2.25rem, 1.85rem + 1.8vw, 3rem);
	--cc-text-3xl: clamp(2.75rem, 1.95rem + 3.5vw, 4.5rem);

	--cc-leading-tight: 1.1;
	--cc-leading-snug: 1.35;
	--cc-leading-normal: 1.65;

	--cc-tracking-tight: -0.01em;
	--cc-tracking-wide: 0.06em;

	/* Spacing scale */
	--cc-space-1: 4px;
	--cc-space-2: 8px;
	--cc-space-3: 16px;
	--cc-space-4: 24px;
	--cc-space-5: 32px;
	--cc-space-6: 48px;
	--cc-space-7: 64px;

	/* Radius */
	--cc-radius-sm: 6px;
	--cc-radius-md: 10px;
	--cc-radius-lg: 16px;

	/* Container
	   Commerce surfaces get the full width; long-form text does not. The
	   reading measures in pages.css and guides.css are deliberately narrow
	   and are NOT derived from this value.

	   The cap is set above every common desktop width on purpose. At 1600px
	   the container stopped growing and the page began centring itself, so
	   on a 1920px display the header, hero and every section sat 150px in
	   from the left with dead margin either side. Raising the cap lets the
	   container stay fluid right across the desktop range: the left edge is
	   the padding and nothing else, and the page still cannot sprawl on an
	   ultrawide monitor. */
	--cc-container-max: 1920px;
	--cc-container-pad: clamp(1.25rem, 3.5vw, 4rem);
}

/* ==========================================================================
   Base typography
   ========================================================================== */
body {
	background: var(--cc-color-background);
	color: var(--cc-color-body);
	font-family: var(--cc-font-body);
	font-size: var(--cc-text-base);
	line-height: var(--cc-leading-normal);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--cc-font-heading);
	color: var(--cc-color-heading);
	line-height: var(--cc-leading-tight);
	letter-spacing: var(--cc-tracking-tight);
	font-weight: 700;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

h1, .cc-display {
	font-family: var(--cc-font-display);
	font-size: var(--cc-text-3xl);
	font-weight: 800;
	text-transform: uppercase;
}

h2 { font-size: var(--cc-text-2xl); }
h3 { font-size: var(--cc-text-xl); }
h4 { font-size: var(--cc-text-lg); font-weight: 600; }

p { margin: 0 0 1em; max-width: 68ch; }

a {
	color: var(--cc-color-accent);
	text-decoration-color: currentColor;
	text-underline-offset: 0.15em;
}
a:hover { color: var(--cc-color-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
	outline: 3px solid var(--cc-color-accent);
	outline-offset: 2px;
}

code, .cc-mono {
	font-family: var(--cc-font-mono);
	font-variant-numeric: tabular-nums;
}

.cc-eyebrow {
	display: inline-block;
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--cc-tracking-wide);
	color: var(--cc-color-accent);
	margin-bottom: var(--cc-space-2);
}

/* ==========================================================================
   Review areas
   Built against WooCommerce's native rating/review data so a dedicated
   review plugin can be dropped in later (Judge.me discontinued WooCommerce
   support — see README.md) without a template or style rewrite.
   ========================================================================== */
.cc-review-summary {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-space-1);
	font-size: 0.875rem;
	color: var(--cc-color-body);
}

.cc-review-summary .star-rating {
	color: var(--cc-color-border);
	font-size: 14px;
	letter-spacing: 2px;
	overflow: hidden;
}

.cc-review-summary .star-rating span {
	color: var(--cc-color-accent);
}

.cc-review-summary__average {
	font-weight: 600;
	color: var(--cc-color-heading);
}

.cc-review-summary__count {
	color: var(--cc-color-body);
	opacity: 0.75;
}

.cc-reviews {
	margin-top: var(--cc-space-6);
	padding-top: var(--cc-space-5);
	border-top: 1px solid var(--cc-color-border);
}

.cc-reviews__heading {
	margin-bottom: var(--cc-space-3);
}

/* Typography, layout, and component styles are added phase by phase
   (see README.md — Phase 4: Design System) rather than scaffolded ahead
   of the approved visual direction. */