/**
 * Chief Camper — component library.
 * Buttons, forms, cards, containers, and the WooCommerce product-card
 * re-skin. Loaded after style.css so it can rely on the design tokens
 * defined there. See README.md — Phase 4: Design System.
 */

/* ==========================================================================
   Containers & sections
   ========================================================================== */
.cc-container {
	width: 100%;
	max-width: var(--cc-container-max);
	margin-inline: auto;
	/* Padding grows with the viewport instead of leaving a dead gutter. */
	padding-inline: var(--cc-container-pad);
}

/* GeneratePress caps its own wrapper at 1200px, which was the real
   constraint — widening .cc-container alone did nothing because everything
   sits inside .grid-container. */
.site.grid-container,
.site-content .content-area,
.inside-article {
	max-width: 100%;
}

body:not(.single-post) .site.grid-container {
	max-width: var(--cc-container-max);
}

.cc-section {
	padding-block: var(--cc-space-6);
}

@media (min-width: 768px) {
	/* Section rhythm opens up on desktop. The container's horizontal
	   padding is deliberately NOT re-declared here: it is a clamp() that
	   already scales with the viewport, and a flat 32px override at this
	   breakpoint silently pinned the gutter to 32px at every desktop width,
	   which is what made the header and hero sit hard against the left edge. */
	.cc-section { padding-block: var(--cc-space-7); }
}

/* ==========================================================================
   Buttons
   Squared-off, solid black border, low-opacity black shadow for tactile
   depth — deliberately not a rounded pill with a drop shadow.
   Re-skins WooCommerce's native buttons directly (add-to-cart, checkout,
   "Place order") so this applies everywhere before template overrides land.

   The `.alt` variants are listed explicitly: WooCommerce styles its primary
   buttons (Add to Cart, Place Order) as `.woocommerce button.button.alt`
   (0-3-1), which outranks the plain `.woocommerce button.button` selector
   and would otherwise keep WooCommerce's own purple.

   `body .wp-element-button` (not bare `.wp-element-button`): WordPress core
   prints its own button color as `:root :where(.wp-element-button){...}` in
   a late inline <style> block. `:where()` always contributes zero
   specificity, so that core rule ties with a bare class selector and wins
   on source order since it prints last. The `body` ancestor pushes ours
   one step higher so it wins outright instead of depending on load order.
   ========================================================================== */
.cc-btn,
body .wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page .button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cc-space-2);
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--cc-tracking-wide);
	text-decoration: none;
	white-space: nowrap;
	padding: 13px 28px;
	background: var(--cc-color-button-bg);
	color: var(--cc-color-button-text);
	border: 2px solid var(--cc-color-button-border);
	border-radius: var(--cc-radius-sm);
	box-shadow: 3px 3px 0 var(--cc-color-shadow);
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.1s ease;
}

.cc-btn:hover,
body .wp-element-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page .button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
	background: var(--cc-color-button-bg-hover);
	color: var(--cc-color-button-text-hover);
	border-color: var(--cc-color-button-border-hover);
	transform: translate(1px, 1px);
	box-shadow: 2px 2px 0 var(--cc-color-shadow);
}

/* WooCommerce styles its disabled primary button with its own brand
   purple via `.button.alt.disabled` (0-4-1), which outranks our `.alt`
   rule above and shows through on, for example, a variable product before
   an option is chosen. The disabled state is matched at the same
   specificity so it stays a muted Chief Camper button instead. */
.cc-btn:disabled,
.woocommerce .button.disabled,
.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt.disabled,
.woocommerce input.button.alt.disabled,
.woocommerce #respond input#submit.alt.disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled[disabled] {
	background: var(--cc-color-button-bg);
	color: var(--cc-color-button-text);
	border-color: var(--cc-color-button-border);
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

.woocommerce a.button.alt.disabled:hover,
.woocommerce button.button.alt.disabled:hover,
.woocommerce button.button.alt:disabled:hover {
	background: var(--cc-color-button-bg);
	transform: none;
	box-shadow: none;
}

/* Secondary — outline, for a lower-emphasis action next to a primary one.
   Doubled class (0-2-0) so the modifier still wins when it lands on a
   WooCommerce button, whose own selector above (.woocommerce a.button,
   0-2-1) would otherwise outrank a single modifier class and silently
   render the button as primary. */
.cc-btn--secondary.cc-btn--secondary {
	background: transparent;
	color: var(--cc-color-heading);
	border-color: var(--cc-color-heading);
	box-shadow: none;
}
.cc-btn--secondary.cc-btn--secondary:hover {
	background: var(--cc-color-heading);
	color: var(--cc-color-background);
	border-color: var(--cc-color-heading);
	box-shadow: none;
}

.cc-btn--sm { padding: 9px 18px; font-size: var(--cc-text-xs); }
.cc-btn--lg { padding: 17px 36px; font-size: var(--cc-text-md); }
.cc-btn--full { width: 100%; }

/* ==========================================================================
   Forms
   ========================================================================== */
.cc-field {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-1);
	margin-bottom: var(--cc-space-3);
}

.cc-field label {
	font-family: var(--cc-font-heading);
	font-weight: 600;
	font-size: var(--cc-text-sm);
	color: var(--cc-color-heading);
}

.cc-field .cc-field__hint {
	font-size: var(--cc-text-xs);
	color: var(--cc-color-body);
	opacity: 0.75;
}

.cc-field input[type="text"],
.cc-field input[type="email"],
.cc-field input[type="tel"],
.cc-field input[type="search"],
.cc-field select,
.cc-field textarea,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row select,
.woocommerce-page form .form-row textarea {
	font-family: var(--cc-font-body);
	font-size: var(--cc-text-base);
	color: var(--cc-color-body);
	background: var(--cc-color-surface);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	padding: 12px 14px;
	width: 100%;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cc-field input:focus,
.cc-field select:focus,
.cc-field textarea:focus {
	border-color: var(--cc-color-accent);
	box-shadow: 0 0 0 3px rgba(211, 84, 0, 0.15);
	outline: none;
}

.cc-field--error input,
.cc-field--error select,
.cc-field--error textarea {
	border-color: var(--cc-color-error);
}

.cc-field__error {
	font-size: var(--cc-text-xs);
	color: var(--cc-color-error);
}

/* ==========================================================================
   Cards
   ========================================================================== */
.cc-card {
	background: var(--cc-color-surface);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-md);
	padding: var(--cc-space-4);
	box-shadow: 0 1px 2px var(--cc-color-shadow);
}

.cc-card--interactive {
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.cc-card--interactive:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px var(--cc-color-shadow);
	border-color: var(--cc-color-accent);
}

/* ==========================================================================
   Product cards (WooCommerce loop) — reskins native markup with our tokens
   ahead of the Phase 8 template rebuild, so the shop already looks like
   Chief Camper rather than default WooCommerce in the meantime.
   ========================================================================== */
.woocommerce ul.products {
	display: grid;
	/* minmax(0, …) rather than a bare 1fr: a grid track's implicit minimum
	   is min-content, so a long unbroken product title forces the column
	   wider than its container and the grid overflows to the right. */
	grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
	gap: var(--cc-space-4);
	list-style: none;
	padding: 0;
	margin: 0 0 var(--cc-space-5);
}

/* WooCommerce clears its float layout with ::before/::after pseudo
   elements on the list. Harmless under floats, but in a grid container a
   pseudo-element becomes a *grid item* and takes the first cell — which
   pushed the first product into column two and left a hole. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	display: none;
}

/* WooCommerce lays its loop out with floats and percentage widths
   (`width: 22.05%; float: left`, and 48% in its small-screen sheet). Left
   alone, each card collapses to ~22% *inside* its own grid track. The
   attribute selector matches WooCommerce's higher-specificity
   `[class*="columns-"]` variant so both are reset, not just the base rule. */
.woocommerce ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	width: auto;
	min-width: 0;
	float: none;
	margin: 0;
	background: var(--cc-color-surface);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-md);
	padding: var(--cc-space-3);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px var(--cc-color-shadow);
}

.woocommerce ul.products li.product img {
	border-radius: var(--cc-radius-sm);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--cc-color-background);
	margin-bottom: var(--cc-space-2);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	overflow-wrap: anywhere;
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-md);
	font-weight: 600;
	color: var(--cc-color-heading);
	margin: var(--cc-space-1) 0;
}

.woocommerce ul.products li.product .price {
	font-family: var(--cc-font-mono);
	font-size: var(--cc-text-md);
	font-weight: 600;
	color: var(--cc-color-accent);
}

.woocommerce ul.products li.product .price del {
	color: var(--cc-color-body);
	opacity: 0.6;
	font-weight: 400;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}

.woocommerce ul.products li.product .cc-review-summary {
	margin-bottom: var(--cc-space-1);
}

/* ==========================================================================
   Responsive rules
   Breakpoints used consistently across the theme:
     480px  – small phones
     640px  – phones
     768px  – tablets
     1024px – small laptops
     1280px – desktop / container max
   ========================================================================== */
@media (max-width: 640px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--cc-space-3);
	}
	.cc-btn--full-mobile { width: 100%; }
}

/* ==========================================================================
   Full-bleed page shell
   GeneratePress boxes content at its container width and lays the content
   area out as a flex row for its sidebar. Pages that need edge-to-edge
   bands (homepage, shop, category, product) carry .cc-fullbleed and unbox
   the shell here; each section's own .cc-container restores reading width.

   Lives in components.css, not home.css: home.css only loads on the front
   page, so keeping it there left every shop page still flexed and boxed.
   ========================================================================== */
.cc-fullbleed #page.grid-container,
.cc-fullbleed #page.container {
	max-width: 100%;
	padding: 0;
	margin: 0;
}

.cc-fullbleed #content.site-content {
	display: block;
	padding: 0;
	margin: 0;
}

.cc-fullbleed .cc-home > section {
	width: 100%;
}

/* GeneratePress pads .inside-article (30px) for readable article text.
   On full-bleed pages that doubles up with .cc-container's own gutter and
   eats a third of the width on a phone, so the container is left as the
   single source of horizontal padding. */
.cc-fullbleed .inside-article,
.cc-fullbleed .site-main > article > .inside-article {
	padding: 0;
	border: none;
	box-shadow: none;
	background: none;
}

.cc-fullbleed .entry-content { margin-top: 0; }

/* ==========================================================================
   Site footer

   GeneratePress renders .site-footer > .site-info; the columns are injected
   before it and the copyright bar replaces its default contents.
   ========================================================================== */
.cc-footer {
	background: var(--cc-color-heading);
	color: #FFFFFF;
	padding-block: var(--cc-space-6);
}

.cc-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: var(--cc-space-5);
	align-items: start;
}

/* The footer badge is square and detailed, so it needs more room than the
   horizontal header lockup. Width only — never a fixed height, which would
   distort it. */
.cc-footer__logo-link {
	display: inline-block;
	margin-bottom: var(--cc-space-3);
	line-height: 0;
}

.cc-footer__logo {
	width: 150px;
	max-width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 900px) {
	.cc-footer__logo { width: 120px; }
}

.cc-footer__wordmark {
	display: block;
	font-family: var(--cc-font-display);
	font-size: var(--cc-text-xl);
	text-transform: uppercase;
	margin-bottom: var(--cc-space-3);
}

.cc-footer__tagline {
	margin: 0;
	max-width: 34ch;
	font-size: var(--cc-text-sm);
	line-height: var(--cc-leading-normal);
	color: rgba(255, 255, 255, 0.78);
}

.cc-footer__heading {
	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: #FFFFFF;
	margin: 0 0 var(--cc-space-3);
}

.cc-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-2);
}

.cc-footer__list a {
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	font-size: var(--cc-text-sm);
}

.cc-footer__list a:hover,
.cc-footer__list a:focus-visible {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Bottom bar --------------------------------------------------------------
   GeneratePress's own wrapper supplies the horizontal padding, so this only
   handles the row itself. */
.site-footer .site-info {
	background: var(--cc-color-hover);
	color: rgba(255, 255, 255, 0.78);
	padding-block: var(--cc-space-3);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.cc-footer-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-3);
	font-size: var(--cc-text-xs);
}

.cc-footer-bar__links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-3);
	margin: 0;
	padding: 0;
}

/* Agency credit — present but clearly secondary to Chief Camper. */
.cc-footer-bar__sep {
	margin-inline: 0.5em;
	opacity: 0.4;
}

.cc-footer-bar__credit {
	opacity: 0.72;
	white-space: nowrap;
}

.cc-footer-bar__agency {
	font-family: var(--cc-font-heading);
	font-weight: 600;
	letter-spacing: 0.02em;
	/* The agency name is now a link. The global `a` rule would paint it
	   accent orange on this dark bar, which would change the footer's
	   appearance; inheriting keeps it identical to the plain text it
	   replaced. Underline is deliberately absent at rest for the same
	   reason and appears on interaction, so the link is still discoverable
	   without restyling the footer. */
	color: inherit;
	text-decoration: none;
}

.cc-footer-bar__agency:hover,
.cc-footer-bar__agency:focus-visible {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

@media (max-width: 560px) {
	/* Stack the credit under the copyright rather than wrapping awkwardly
	   around the divider. */
	.cc-footer-bar__sep { display: none; }
	.cc-footer-bar__credit { display: block; margin-top: 0.35rem; }
}

.cc-footer-bar__links a {
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
}

.cc-footer-bar__links a:hover,
.cc-footer-bar__links a:focus-visible {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

@media (max-width: 900px) {
	.cc-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.cc-footer__grid {
		grid-template-columns: 1fr;
		gap: var(--cc-space-4);
	}

	.cc-footer-bar {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ==========================================================================
   Main column

   GeneratePress makes .site-content a flex container. A <main> inside it is
   a flex item, so it shrinks to its content width rather than filling the
   row — which meant any page whose content sits in the narrow reading
   column (the FAQ, the policies) had its full-width hero band collapse to
   the width of the text inside it.
   ========================================================================== */
#cc-main {
	width: 100%;
	/* Without this a flex item refuses to shrink below its content, and a
	   wide table or code block forces the whole page to scroll sideways. */
	min-width: 0;
}