/* ==========================================================================
   STYLEGUIDE  —  living design-token reference page (.wulr-styleguide)
   Layout/helper CSS only. All type, color, buttons, links render from
   theme.json so this page mirrors the real theme. Scoped to the page class
   so it never leaks onto the rest of the site.
   ========================================================================== */

.wulr-styleguide {
	--wulr-sg-hair: var(--wp--preset--color--rule);
	--wulr-sg-hair-soft: var(--wp--preset--color--rule-soft);
}

/* Neutralize WP constrained-layout auto-margins + max-width on the helper
   groups below — those rules collapse the empty chip/bar groups and center
   samples. Our own grid/flex CSS handles placement instead. */
.wulr-styleguide .wulr-sg-swatches > *,
.wulr-styleguide .wulr-sg-swatch > *,
.wulr-styleguide .wulr-sg-headings > *,
.wulr-styleguide .wulr-sg-row > *,
.wulr-styleguide .wulr-sg-heading-row > *,
.wulr-styleguide .wulr-sg-space-row > *,
.wulr-styleguide .wulr-sg-family > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none !important;
}

/* Section kicker labels (not headings, so the H1–H6 demo stays clean) */
.wulr-sg-kicker {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin: 0 0 0.25rem;
}

.wulr-sg-section {
	padding-top: clamp(2.5rem, 5vw, 4rem);
	border-top: 1px solid var(--wulr-sg-hair);
}

.wulr-sg-note {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--stone);
	/* No max-width here — cap per-block with the Max Width control if wanted
	   (assets/js/editor/max-width.js). */
}

.wulr-sg-meta {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--stone);
	margin: 0;
}

/* ---- Color swatches ---------------------------------------------------- */
.wulr-sg-swatches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: 1.25rem;
}

.wulr-sg-swatch {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.wulr-sg-chip {
	width: 100%;
	height: 104px;
	border-radius: 10px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.wulr-sg-swatch .wulr-sg-name {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	color: var(--wp--preset--color--body);
	margin: 0;
	line-height: 1.25;
}

/* Gradient chip spans wider */
.wulr-sg-chip--wide {
	height: 104px;
	grid-column: 1 / -1;
}

/* ---- Type-scale rows --------------------------------------------------- */
.wulr-sg-row {
	display: grid;
	grid-template-columns: 6.5rem 1fr;
	gap: 1.5rem;
	align-items: baseline;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--wulr-sg-hair-soft);
}

.wulr-sg-row .wulr-sg-tag {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	color: var(--wp--preset--color--stone);
	margin: 0;
	white-space: nowrap;
}

.wulr-sg-row .wulr-sg-sample {
	margin: 0;
	color: var(--wp--preset--color--body);
	line-height: 1.15;
}

/* ---- Heading demo ------------------------------------------------------ */
.wulr-sg-headings > * {
	margin: 0;
}
.wulr-sg-heading-row {
	display: grid;
	grid-template-columns: 4rem 1fr;
	gap: 1.5rem;
	align-items: baseline;
	padding: 1rem 0;
	border-bottom: 1px solid var(--wulr-sg-hair-soft);
}
.wulr-sg-heading-row .wulr-sg-tag,
.wulr-sg-space-row .wulr-sg-tag {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	color: var(--wp--preset--color--stone);
	margin: 0;
}

/* ---- Font families ----------------------------------------------------- */
.wulr-sg-family {
	padding: 1.15rem 0;
	border-bottom: 1px solid var(--wulr-sg-hair-soft);
}
.wulr-sg-family .wulr-sg-family-sample {
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.2;
	color: var(--wp--preset--color--body);
	margin: 0 0 0.35rem;
}

/* ---- Spacing scale ----------------------------------------------------- */
.wulr-sg-space-row {
	display: grid;
	grid-template-columns: 9rem 1fr;
	gap: 1.25rem;
	align-items: center;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--wulr-sg-hair-soft);
}
.wulr-sg-bar {
	height: 18px;
	background: var(--wp--preset--color--primary);
	border-radius: 3px;
}
.wulr-sg-sp--20 { width: var(--wp--preset--spacing--20); }
.wulr-sg-sp--30 { width: var(--wp--preset--spacing--30); }
.wulr-sg-sp--40 { width: var(--wp--preset--spacing--40); }
.wulr-sg-sp--50 { width: var(--wp--preset--spacing--50); }
.wulr-sg-sp--60 { width: var(--wp--preset--spacing--60); }
.wulr-sg-sp--70 { width: var(--wp--preset--spacing--70); }
.wulr-sg-sp--80 { width: var(--wp--preset--spacing--80); }
.wulr-sg-sp--section { width: var(--wp--preset--spacing--section); max-width: 100%; }

/* ---- Buttons demo ------------------------------------------------------ */
.wulr-sg-btn-note {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	color: var(--wp--preset--color--stone);
	margin: 0.4rem 0 0;
}

@media (max-width: 600px) {
	.wulr-sg-row,
	.wulr-sg-heading-row,
	.wulr-sg-space-row {
		grid-template-columns: 1fr;
		gap: 0.4rem;
	}
}