/*
Theme Name: STONE x SAGE
Theme URI: https://stonexsage.com
Author: STONE x SAGE
Author URI: https://stonexsage.com
Description: Custom block theme implementing the locked STONE x SAGE identity: bone/limestone surfaces, basalt text, sage used only as a sparse accent, high-contrast letterspaced serif wordmark. Home, shop/product, and about templates with WooCommerce support. No external assets, no CDN fonts, no JavaScript beyond what WooCommerce itself needs.
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 8.1
Requires Plugins: woocommerce
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stonexsage

This stylesheet is intentionally near-empty. A block theme's design tokens
(color palette, typography, spacing) live in theme.json, which is the
canonical source for both the editor and the front end. What's here is only
what theme.json cannot express: the wordmark's letterspacing/case treatment
and a handful of small layout details for template parts.
*/

/* ---- Wordmark -----------------------------------------------------------
   Rendered as real text everywhere (no logo image, no icon font) per the
   locked identity: high-contrast serif, wide tracking, the small sage
   multiplication sign. Use the × entity for the mark in template
   HTML, never a literal x00d7 character -- keeps the mark encoding-safe
   regardless of how a file gets viewed or copied. */
.stonexsage-wordmark {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	white-space: nowrap;
}

.stonexsage-wordmark .stonexsage-wordmark__mark {
	color: var(--wp--preset--color--sage);
	letter-spacing: 0;
	padding: 0 0.28em;
	font-size: 0.72em;
}

/* Small caps kicker labels (used above section headings), matching the
   brand sheet's "kicker" treatment: tiny, tracked-out, sage. */
.stonexsage-kicker {
	display: block;
	font-size: 0.7rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sage);
	margin: 0 0 0.5em;
}

/* WooCommerce price/sale styling stays inside the palette -- no default
   WooCommerce red/green. */
.woocommerce ins,
.price ins {
	text-decoration: none;
}

.woocommerce span.onsale {
	background: var(--wp--preset--color--moss);
	color: var(--wp--preset--color--bone);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 2px;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	padding: 0.4em 0.6em;
}

/* Product grid: quiet borders instead of shadows, generous gaps. */
ul.products li.product,
.wc-block-grid__product {
	border: 1px solid var(--wp--preset--color--limestone);
	border-radius: 2px;
}

/* ---- Header / footer chrome ---------------------------------------------
   Both parts share the same quiet row treatment: wordmark left, nav right,
   generous vertical breathing room, a single hairline border to separate
   from the page rather than a shadow. */
.stonexsage-header,
.stonexsage-footer {
	padding-top: var(--wp--preset--spacing--30, 1.75rem);
	padding-bottom: var(--wp--preset--spacing--30, 1.75rem);
}

.stonexsage-header {
	border-bottom: 1px solid var(--wp--preset--color--limestone);
}

.stonexsage-footer {
	border-top: 1px solid var(--wp--preset--color--limestone);
	margin-top: var(--wp--preset--spacing--40, 3rem);
}

.stonexsage-header__row,
.stonexsage-footer__row {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	width: 100%;
	padding-inline: 1.25rem;
	align-items: center;
}

.stonexsage-wordmark__link {
	color: inherit;
	text-decoration: none;
}

.stonexsage-wordmark--small {
	margin: 0;
}

/* The primary Navigation block (header): quiet, tracked-out small caps to
   match the kicker treatment, no underline until hover. */
.stonexsage-nav .wp-block-navigation-item a {
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}

.stonexsage-nav .wp-block-navigation-item a:hover {
	color: var(--wp--preset--color--moss);
}

.stonexsage-nav--footer .wp-block-navigation-item a {
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: none;
	color: var(--wp--preset--color--taupe);
}

/* ---- Home hero ------------------------------------------------------------
   Generous whitespace, centered, no imagery -- the wordmark and a single
   line of copy carry the page, per the locked "quiet, unlabeled" identity. */
.stonexsage-hero {
	padding-top: var(--wp--preset--spacing--60, 6rem);
	padding-bottom: var(--wp--preset--spacing--50, 5rem);
	text-align: center;
}

.stonexsage-wordmark--hero {
	font-size: clamp(1.75rem, 5vw, 3rem);
	margin: 0.5rem 0 1.5rem;
}

.stonexsage-hero__note {
	max-width: 40ch;
	margin-inline: auto;
	color: var(--wp--preset--color--basalt);
}

.stonexsage-hero__actions {
	margin-top: var(--wp--preset--spacing--30, 1.75rem);
}

/* ---- Home "facts" row ------------------------------------------------- */
.stonexsage-facts {
	padding-top: var(--wp--preset--spacing--50, 5rem);
	padding-bottom: var(--wp--preset--spacing--40, 3rem);
	gap: var(--wp--preset--spacing--40, 3rem);
}

.stonexsage-fact {
	flex: 1 1 220px;
	min-width: 220px;
}

.stonexsage-divider {
	margin-top: 0;
	margin-bottom: 0;
}

.stonexsage-closing {
	padding-top: var(--wp--preset--spacing--50, 5rem);
	padding-bottom: var(--wp--preset--spacing--50, 5rem);
	text-align: center;
}

.stonexsage-closing__note {
	max-width: 46ch;
	margin-inline: auto;
	margin-bottom: 1.5rem;
}

/* ---- Page / about / 404 content ---------------------------------------- */
.stonexsage-main {
	padding-top: var(--wp--preset--spacing--40, 3rem);
	padding-bottom: var(--wp--preset--spacing--50, 5rem);
}

.stonexsage-main--404 {
	padding-top: var(--wp--preset--spacing--60, 6rem);
	padding-bottom: var(--wp--preset--spacing--60, 6rem);
}

.stonexsage-about__content {
	margin-top: var(--wp--preset--spacing--30, 1.75rem);
}

/* ---- Small screens ------------------------------------------------------- */
@media (max-width: 600px) {
	.stonexsage-hero {
		padding-top: var(--wp--preset--spacing--50, 5rem);
		padding-bottom: var(--wp--preset--spacing--40, 3rem);
	}

	.stonexsage-header__row,
	.stonexsage-footer__row {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
		text-align: center;
	}
}