/*
Theme Name: Cinderforge
Theme URI: https://lockerforge.com
Author: Locker Forge
Author URI: https://lockerforge.com
Description: A block theme system built on a layered design-token foundation: an ember brand ramp, warm hearth neutrals, semantic color pairs, a fluid type scale, and radius and shadow scales, so every pattern, template, and style variation speaks one design language.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cinderforge
Tags: full-site-editing, block-patterns, wide-blocks

Cinderforge is distributed under the terms of the GNU GPL v2 or later.
*/

/*
 * Base styles.
 *
 * Every color, radius, and shadow value in this file comes from the token
 * system (theme.json) through its generated CSS variables. Nothing here
 * hard-codes a design value, so a style variation can re-skin the whole
 * theme from theme.json alone.
 */

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

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background-color: var(--wp--preset--color--brand-200);
	color: var(--wp--preset--color--ink);
}

a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 0.06em;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* Raised card surface: semantic tokens only. */
.is-style-forge-card {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--md);
}

/* Cards in a column stretch to the column's full height, so a row of
   cards shares one baseline instead of ragged bottoms. The column is a
   flex container so the card fills it in every engine. */
.wp-block-column:has(> .is-style-forge-card) {
	display: flex;
}

.wp-block-column > .is-style-forge-card {
	flex: 1 1 auto;
}

/* Measure cap for section headers inside wide sections: keeps intro
   text at reading width, left-aligned with the grid below it. */
.forge-measure {
	max-width: var(--wp--style--global--content-size);
}

/* Flat dark band: pairs the dark surface with the base text ramp step. */
.is-style-forge-band-dark {
	background-color: var(--wp--preset--color--surface-dark);
	color: var(--wp--preset--color--neutral-50);
}

/*
 * Comparison table: the highlighted plan column, tinted from the brand
 * ramp. The tint is a light ramp step in every style variation, so the
 * column's text is pinned to the ramp's dark end alongside it — text
 * that merely inherits the body color flips light under the dark
 * variations (Night Forge, Noir) and vanishes on the tint.
 */
.is-style-forge-compare td:nth-child(3),
.is-style-forge-compare th:nth-child(3) {
	background-color: var(--wp--preset--color--brand-100);
	color: var(--wp--preset--color--neutral-900);
}

/*
 * Columns: whole words, never snapped words.
 *
 * Core sets `word-break: break-word` on every column. Wherever a
 * multi-column row is squeezed — a four-across row inside the 46rem
 * content column is the standing case — that value snaps ordinary
 * words mid-word to fill the line. Columns here wrap whole words
 * instead; core's `overflow-wrap: break-word` stays as the safety
 * valve for a single word longer than the column itself. In the
 * tablet band, where even a wide four-across row drops under roughly
 * 230px a column, three-plus-across rows wrap to two-across rather
 * than crush. Core's own stacking still takes over below 782px.
 */
.wp-block-column {
	word-break: normal;
}

@media (min-width: 782px) and (max-width: 1024px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile):has(> .wp-block-column:nth-child(3)) {
		flex-wrap: wrap !important;
	}

	.wp-block-columns:not(.is-not-stacked-on-mobile):has(> .wp-block-column:nth-child(3)) > .wp-block-column {
		flex-basis: calc(50% - var(--wp--style--block-gap, 1.5rem) / 2);
	}
}

/*
 * WooCommerce chrome.
 *
 * WooCommerce's own elements (notices, buttons, fields, badges, stars,
 * tables) ship with Woo's palette. These rules re-point every one of
 * those colors at the token system, so a shop reads as the flagship —
 * never as default Woo — while Woo keeps owning the geometry. Nothing
 * here hard-codes a design value; deactivate WooCommerce and every
 * selector simply matches nothing.
 */

/* Sale badges: ember pill, on-brand text. */
.woocommerce span.onsale,
.wc-block-components-sale-badge {
	background-color: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--on-brand);
	font-weight: var(--wp--custom--typography--font-weight--semibold);
}

/* Prices: ink, with the sale price in the strong brand step. */
.woocommerce-Price-amount,
.wc-block-components-product-price {
	color: var(--wp--preset--color--ink);
}

.woocommerce del .woocommerce-Price-amount,
.wc-block-components-product-price del {
	color: var(--wp--preset--color--muted);
}

.woocommerce ins,
.wc-block-components-product-price ins {
	color: var(--wp--preset--color--brand-strong);
	text-decoration: none;
}

/* Rating stars speak ember, not Woo gold. */
.woocommerce .star-rating,
.woocommerce .star-rating span::before,
.wc-block-components-product-rating__stars {
	color: var(--wp--preset--color--brand);
}

/* Buttons (classic shop buttons; block buttons inherit theme.json). */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button:not(.is-link) {
	background-color: var(--wp--preset--color--brand);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--on-brand);
	font-weight: var(--wp--custom--typography--font-weight--semibold);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:not(.is-link):hover {
	background-color: var(--wp--preset--color--brand-strong);
	color: var(--wp--preset--color--on-brand);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background-color: var(--wp--preset--color--brand-strong);
	color: var(--wp--preset--color--on-brand);
}

/* Store notices: semantic tokens on a quiet ground. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-error {
	background-color: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--ink);
}

.woocommerce-message,
.wc-block-components-notice-banner.is-success {
	border-color: var(--wp--preset--color--success);
}

.woocommerce-info,
.wc-block-components-notice-banner.is-info {
	border-color: var(--wp--preset--color--info);
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	border-color: var(--wp--preset--color--danger);
}

/* Form fields: house line, radius, and ground; brand on focus. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity .qty,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-form .wc-block-components-text-input input {
	background-color: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--ink);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.wc-block-components-text-input input:focus {
	border-color: var(--wp--preset--color--brand);
}

/* Classic shop tables ride the hairline token. */
.woocommerce table.shop_table {
	border-color: var(--wp--preset--color--line);
}

.woocommerce table.shop_table th {
	font-weight: var(--wp--custom--typography--font-weight--semibold);
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
	border-color: var(--wp--preset--color--line);
}

/* Classic pagination: the current page wears the brand. */
.woocommerce nav.woocommerce-pagination ul li a {
	color: var(--wp--preset--color--ink);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--on-brand);
}

/* The order-confirmation heading is the house display serif. */
.wp-block-woocommerce-order-confirmation-status h1 {
	font-family: var(--wp--preset--font-family--display);
}

/* Header mini-cart: the count badge in brand, the hover in brand-strong. */
.wc-block-mini-cart__button:hover {
	color: var(--wp--preset--color--brand-strong);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}