/**
 * Style-guide proof page — Gg (F7)   ·   LAYOUT-ONLY, no new tokens
 *
 * Phase-1 sign-off proof. Reproduces the Figma Styles page (23:879) — 5 swatches,
 * the 100px section-spacing band, and the type block — then SURFACES the real
 * shipped components: buttons (gg-buttons.css, F3) and the Gravity Forms contact
 * form (forms.css, F4). Nothing here re-declares a brand colour, size, or font:
 * every value aliases an existing --kd-* / --wp--preset--* token from F1/F2.
 *
 * The only "state" rules are FROZEN-DISPLAY modifiers that re-point the SAME
 * --kd-btn-* / form tokens the live components use, so the proof shows
 * hover / focus / active / error side-by-side without a live interaction. The
 * authoritative live components (a real interactive button + the embedded GF
 * form) sit alongside the frozen references.
 *
 * Glob-enqueued (inc/enqueue.php) with a dependency on kd-global, so it always
 * loads after global.css — no shared-file edit, and equal/greater-specificity
 * overrides win on normal cascade order.
 */

/* ── Root — one top-level block; internal rhythm reuses the foundation token ───
   Wrapping every proof section in one flex column means the page is a single
   .entry-content child (no owl between sections), and the 100→64 breakpoint
   switch comes free from --kd-section-gap (tokens.css). blockGap is zeroed on
   the group so this flex gap is the only vertical spacing. */
.kd-sg {
	display: flex;
	flex-direction: column;
	gap: var(--kd-section-gap); /* 100px ≥768 · 64px <768 (foundation rhythm) */
}

/* Clearance below the (no-hero) header before the first section. */
.kd-sg-intro {
	margin-top: var(--kd-space-xl); /* 64px */
}

.kd-sg-intro__desc {
	max-width: 46rem;
	color: var(--kd-color-body);
}

/* Section eyebrow label — small uppercase kicker (primary red-orange). */
.kd-sg-label {
	font-family: var(--kd-font-heading);
	font-weight: 600;
	font-size: var(--kd-size-body); /* 16px */
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kd-color-primary);
	margin: 0 0 var(--kd-space-md);
}

/* ── 1. Colour swatches — Figma 23:879 (172×172 squares, 25px gaps, left) ───── */
.kd-sg-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
}

.kd-sg-swatch {
	width: 172px;
	max-width: 100%;
}

.kd-sg-swatch__chip {
	width: 172px;
	height: 172px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
}

.kd-sg-swatch__role {
	font-family: var(--kd-font-heading);
	font-weight: 500;
	font-size: var(--kd-size-body); /* 16px */
	color: var(--kd-color-contrast);
	margin: var(--kd-space-sm) 0 0;
}

.kd-sg-swatch__hex {
	font-family: var(--kd-font-body);
	font-size: var(--kd-size-sub-label); /* 15px */
	color: var(--kd-color-neutral-700);
	text-transform: uppercase;
	margin: 2px 0 0;
}

/* Chip fills — alias the theme.json palette (no raw hex). The base (page-bg)
   chip carries a 1px black hairline so it is visible on the near-white page —
   mirrors Figma 23:879's hairline on the pale swatch. */
.kd-sg-chip--primary { background: var(--kd-color-primary); }   /* #d62609 */
.kd-sg-chip--maroon  { background: var(--kd-color-maroon); }    /* #900000 */
.kd-sg-chip--cream   { background: var(--kd-color-cream); }     /* #fff8d4 */
.kd-sg-chip--base    { background: var(--kd-color-base); border: 1px solid var(--kd-color-contrast); } /* #fffefa */
.kd-sg-chip--black   { background: var(--kd-color-contrast); }  /* #000000 */

/* ── 2. 100px section-spacing band — Figma 23:981 (1216×100 grey, caption+arrow) */
.kd-sg-spacing {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--kd-space-md);
	min-height: var(--wp--preset--spacing--80); /* 100px — the rhythm token, demoed */
	background: var(--kd-color-neutral-300);     /* nearest token to Figma placeholder #d9d9d9 */
	padding-inline: var(--kd-space-md);
}

.kd-sg-spacing__caption {
	font-family: var(--kd-font-body);
	font-size: var(--kd-size-footer-link); /* 17px — matches Figma 23:983 */
	color: var(--kd-color-contrast);
	margin: 0;
}

.kd-sg-spacing__arrow {
	flex: none;
	width: 14px;
	height: 60px;
	color: var(--kd-color-contrast);
}

/* ── 3. Typography ──────────────────────────────────────────────────────────
   3a — the Figma type block reproduced (H2 maroon + Lorem body + aside label). */
.kd-sg-type__figma {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kd-space-lg);
	align-items: flex-start;
}

.kd-sg-type__col-main {
	flex: 1 1 560px;
	min-width: 0;
}

.kd-sg-type__col-aside {
	flex: 0 1 260px;
	min-width: 0;
}

.kd-sg-type__aside-label {
	font-family: var(--kd-font-body);
	font-size: var(--kd-size-footer-link); /* 17px Inter — matches Figma 23:989 */
	color: var(--kd-color-contrast);
	margin: 0;
}

/* 3b — full type ramp: spec label + live sample per row. */
.kd-sg-ramp {
	display: flex;
	flex-direction: column;
	gap: var(--kd-space-lg);
	margin-top: var(--kd-space-xl); /* 64px between the Figma block and the ramp */
	border-top: 1px solid var(--kd-color-neutral-300);
	padding-top: var(--kd-space-lg);
}

.kd-sg-ramp-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kd-space-xs) var(--kd-space-lg);
	align-items: baseline;
}

.kd-sg-ramp-spec {
	flex: 0 0 190px;
	font-family: var(--kd-font-body);
	font-size: var(--kd-size-sub-label); /* 15px */
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kd-color-neutral-700);
	margin: 0;
}

.kd-sg-ramp-sample {
	flex: 1 1 320px;
	min-width: 0;
}

.kd-sg-ramp-sample > * {
	margin: 0;
}

/* "Small (15px)" sample — the one scale value core paragraphs don't emit. */
.kd-sg-small {
	font-size: var(--kd-size-sub-label); /* 15px */
	line-height: 1.2;
}

/* ── 3c. Responsive System — reference tables (LAYOUT-ONLY, no new tokens) ─────
   Documents how type, section-rhythm, and the gutter shift across the two
   breakpoints (1024 nav/gutter · 768 type/rhythm/footer). Plain semantic tables;
   every colour/size aliases an existing --kd-* token. Each table sits in its own
   overflow-x wrapper so a narrow viewport scrolls the TABLE, never the page. */
.kd-sg-responsive {
	display: flex;
	flex-direction: column;
	gap: var(--kd-space-lg);
}

.kd-sg-responsive__lead {
	max-width: 46rem;
	margin: 0;
	color: var(--kd-color-body);
	font-size: var(--kd-size-body); /* 16px */
}

/* Horizontal-scroll safety net — the table absorbs overflow, not the page. */
.kd-sg-rtable-wrap {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.kd-sg-rtable {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--kd-font-body);
	font-size: var(--kd-size-sub-label); /* 15px */
	color: var(--kd-color-contrast);
	text-align: left;
}

.kd-sg-rtable caption {
	caption-side: top;
	text-align: left;
	font-family: var(--kd-font-heading);
	font-weight: 600;
	font-size: var(--kd-size-body); /* 16px */
	color: var(--kd-color-contrast);
	margin: 0 0 var(--kd-space-sm);
}

.kd-sg-rtable th,
.kd-sg-rtable td {
	padding: var(--kd-space-xs) var(--kd-space-md);
	border-bottom: 1px solid var(--kd-color-neutral-300); /* hairline */
	vertical-align: baseline;
	white-space: nowrap;
}

/* First column (row labels) aligns to the section's left edge. */
.kd-sg-rtable th:first-child,
.kd-sg-rtable td:first-child {
	padding-left: 0;
}

/* Column headers — Public Sans, breakpoint range on a lighter sub-line. */
.kd-sg-rtable thead th {
	font-family: var(--kd-font-heading);
	font-weight: 600;
	font-size: var(--kd-size-sub-label); /* 15px */
	color: var(--kd-color-neutral-700);
	border-bottom: 2px solid var(--kd-color-contrast); /* header rule */
}

.kd-sg-rtable__bp {
	display: block;
	font-weight: 400;
	font-size: var(--kd-size-sub-label); /* 15px — scale floor; stepped down by weight */
	color: var(--kd-color-neutral-700); /* #3F3F46 ≈ 10.3:1 on #fffefa — genuine info text, needs AA (neutral-500 was 3.44:1) */
}

/* Row headers — the metric/element name (+ token slug sub-line). */
.kd-sg-rtable tbody th {
	font-family: var(--kd-font-heading);
	font-weight: 600;
	color: var(--kd-color-contrast);
}

.kd-sg-rtable__token {
	display: block;
	font-family: var(--kd-font-body);
	font-weight: 400;
	font-size: var(--kd-size-sub-label); /* 15px — scale floor; stepped down by weight */
	color: var(--kd-color-neutral-700); /* #3F3F46 ≈ 10.3:1 on #fffefa — token slug is genuine info text, needs AA (neutral-500 was 3.44:1) */
}

/* The value cell(s) that actually change across breakpoints — primary accent. */
.kd-sg-rtable .kd-sg-rshift {
	color: var(--kd-color-primary); /* #d62609 — signals the responsive shift */
	font-weight: 500;
}

/* The "constant" table carries long dotted value strings — let them wrap. */
.kd-sg-rtable--wrap td {
	white-space: normal;
}

.kd-sg-rtable-note {
	margin: calc(-1 * var(--kd-space-md)) 0 0; /* pull up under its table */
	font-family: var(--kd-font-body);
	font-size: var(--kd-size-sub-label); /* 15px */
	color: var(--kd-color-neutral-700);
}

/* clamp() formula in the gutter note — keep it inline-sized + inked. The token
   slug <code>s (.kd-sg-rtable__token) are styled solely by their own class, so
   this note-scoped rule must not reach them. */
.kd-sg-rtable-note code {
	font-size: inherit;
	color: var(--kd-color-contrast);
}

.kd-sg-responsive__summary {
	max-width: 46rem;
	margin: 0;
	font-size: var(--kd-size-sub-label); /* 15px */
	color: var(--kd-color-neutral-700);
}

/* ── 4. Buttons — 4 frozen states + 1 live (Figma D2 2009:170) ───────────────
   Real .wp-block-button elements (gg-buttons.css geometry/typography); the
   modifiers below only re-point the SAME --kd-btn-* tokens the live states use. */
.kd-sg-states {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kd-space-lg);
	align-items: flex-start;
}

.kd-sg-state {
	display: flex;
	flex-direction: column;
	gap: var(--kd-space-sm);
}

.kd-sg-state__name {
	font-family: var(--kd-font-body);
	font-size: var(--kd-size-sub-label); /* 15px */
	color: var(--kd-color-neutral-700);
	margin: 0;
}

/* Frozen colour states — layered on gg-buttons.css's own primary selector shape
   + one extra class (0,5,0), so they beat the 0,4,0 base fill on the cascade
   while reusing the identical D2 tokens. */
.wp-block-button.kd-sg-btn--hover:not(.is-style-outline):not(.is-style-text-link) .wp-block-button__link {
	background-color: var(--kd-btn-bg-hover); /* #900000 — D2 Hover */
}

.wp-block-button.kd-sg-btn--active:not(.is-style-outline):not(.is-style-text-link) .wp-block-button__link {
	background-color: var(--kd-btn-bg-active); /* #6b0000 — D2 Active */
}

/* Frozen focus — default fill + the shipped 2px maroon ring, offset 2px (matches
   gg-buttons.css :focus-visible exactly, drawn unconditionally for display). */
.wp-block-button.kd-sg-btn--focus .wp-block-button__link {
	outline: 2px solid var(--kd-btn-focus-ring); /* #900000 — D2 Focus */
	outline-offset: 2px;
}

.kd-sg-live-note {
	margin: var(--kd-space-md) 0 0;
	color: var(--kd-color-neutral-700);
	font-size: var(--kd-size-sub-label);
}

/* ── 5. Form — Gravity Forms (Figma D2 2010:113) ────────────────────────────
   The authoritative real component is the LIVE embedded form (forms.css, F4)
   below this block. This 3-up is a token-accurate STATE REFERENCE matching the
   Figma component set — it aliases the same F4 tokens (input-fill / cream /
   maroon / Public Sans) and touches neither GF nor forms.css. */
.kd-sg-fields {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kd-space-lg);
}

.kd-sg-field {
	flex: 1 1 300px;
	min-width: 0;
	max-width: 400px;
}

.kd-sg-field__state {
	font-family: var(--kd-font-body);
	font-size: var(--kd-size-sub-label); /* 15px */
	color: var(--kd-color-neutral-700);
	margin: 0 0 var(--kd-space-sm);
}

.kd-sg-field__label {
	display: block;
	font-family: var(--kd-font-heading);
	font-weight: 500;
	font-size: var(--kd-size-label); /* 16px */
	line-height: 1.125;
	color: var(--kd-color-contrast);
	margin: 0 0 var(--kd-space-xs);
}

.kd-sg-field__req {
	color: var(--kd-color-primary); /* asterisk #d62609 (D2 retires purple) */
}

.kd-sg-field__input {
	display: block;
	width: 100%;
	height: 72px;
	box-sizing: border-box;
	padding: 0 24px;
	background: var(--kd-color-input-fill);      /* #fffcee */
	border: 2px solid var(--kd-color-cream);     /* #fff8d4 — resting */
	border-radius: var(--kd-radius-0);           /* square */
	font-family: var(--kd-font-heading);
	font-weight: 500;
	font-size: var(--kd-size-body);              /* 16px */
	color: var(--kd-color-contrast);
}

.kd-sg-field__input::placeholder {
	color: var(--kd-color-neutral-500);
	opacity: 1;
}

.kd-sg-field--focus .kd-sg-field__input {
	border-color: var(--kd-color-maroon); /* #900000 — D2 Focus */
}

.kd-sg-field--error .kd-sg-field__input {
	border-color: var(--kd-color-error);  /* #900000 — D2 Error */
}

.kd-sg-field__msg {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--kd-font-heading);
	font-weight: 500;
	font-size: var(--kd-size-sub-label); /* 15px */
	line-height: 1.2;
	color: var(--kd-color-error);        /* #900000 */
	margin: var(--kd-space-xs) 0 0;
}

.kd-sg-form-live__note {
	margin: 0 0 var(--kd-space-lg);
	color: var(--kd-color-neutral-700);
	font-size: var(--kd-size-sub-label);
}

/* ── Closing note (header/footer parts are themselves part of the proof) ────── */
.kd-sg-outro {
	color: var(--kd-color-neutral-700);
	font-size: var(--kd-size-sub-label);
}