/**
 * GBG foundation: theme.json owns design values; this file owns responsive
 * behavior, semantic surfaces, and the few layout primitives core cannot express.
 */
:root,
.editor-styles-wrapper {
	--gbg-gutter: 20px;
	--gbg-bg: var(--wp--preset--color--canvas);
	--gbg-fg: var(--wp--preset--color--text);
	--gbg-heading: var(--wp--preset--color--ink);
	--gbg-muted: var(--wp--preset--color--muted);
	--gbg-border: var(--wp--preset--color--border);
	--gbg-link: var(--wp--preset--color--accent-hover);
	--gbg-control-border: var(--wp--preset--color--muted);
	--gbg-focus: var(--wp--preset--color--accent);
}

html { scroll-padding-top: calc(7rem + var(--wp-admin--admin-bar--height, 0px)); }
body { min-height: 100vh; }
:where(h1, h2, h3, h4, p, li, .wp-block-site-title) { overflow-wrap: break-word; }
:where(a) { text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--gbg-focus);
	outline-offset: 4px;
}
:where(img, video) { max-width: 100%; height: auto; }
:where(pre, .wp-block-table) { overflow-x: auto; }

/* Explicit roles also work on nested Groups. Dark and deep are not interchangeable. */
:where(.surface-canvas, .surface-white, .surface-accent-soft,
	.is-style-surface-canvas, .is-style-surface-white, .is-style-surface-accent-soft) {
	--gbg-bg: var(--wp--preset--color--canvas);
	--gbg-fg: var(--wp--preset--color--text);
	--gbg-heading: var(--wp--preset--color--ink);
	--gbg-muted: var(--wp--preset--color--muted);
	--gbg-border: var(--wp--preset--color--border);
	--gbg-control-border: var(--wp--preset--color--muted);
	--gbg-link: var(--wp--preset--color--accent-hover);
	--gbg-focus: var(--wp--preset--color--accent);
}
:where(.surface-white, .is-style-surface-white) { --gbg-bg: var(--wp--preset--color--surface); }
:where(.surface-accent-soft, .is-style-surface-accent-soft) { --gbg-bg: var(--wp--preset--color--accent-soft); }
:where(.surface-dark, .surface-deep, .is-style-surface-dark, .is-style-surface-deep) {
	--gbg-bg: var(--wp--preset--color--ink);
	--gbg-fg: var(--wp--preset--color--canvas);
	--gbg-heading: var(--wp--preset--color--surface);
	--gbg-muted: var(--wp--preset--color--dark-secondary);
	--gbg-border: var(--wp--custom--border--dark);
	--gbg-control-border: rgba(255, 255, 255, 0.55);
	--gbg-link: var(--wp--preset--color--canvas);
	--gbg-focus: var(--wp--preset--color--accent);
}
:where(.surface-deep, .is-style-surface-deep) { --gbg-bg: var(--wp--preset--color--deep); }
:where(.surface-canvas, .surface-white, .surface-dark, .surface-deep, .surface-accent-soft,
	.is-style-surface-canvas, .is-style-surface-white, .is-style-surface-dark,
	.is-style-surface-deep, .is-style-surface-accent-soft) {
	background-color: var(--gbg-bg);
	color: var(--gbg-fg);
}

/* Scale-aware tracking; these complement the native heading defaults. */
.has-2-xl-font-size {
	line-height: var(--wp--custom--type--display--line-height);
	letter-spacing: var(--wp--custom--type--display--tracking);
	font-weight: var(--wp--custom--type--display--weight);
}
.has-xl-font-size {
	line-height: var(--wp--custom--type--h1--line-height);
	letter-spacing: var(--wp--custom--type--h1--tracking);
	font-weight: var(--wp--custom--type--h1--weight);
}
.has-h2-font-size {
	line-height: var(--wp--custom--type--h2--line-height);
	letter-spacing: var(--wp--custom--type--h2--tracking);
	font-weight: var(--wp--custom--type--h2--weight);
}
.has-lg-font-size {
	line-height: var(--wp--custom--type--h3--line-height);
	letter-spacing: var(--wp--custom--type--h3--tracking);
	font-weight: var(--wp--custom--type--h3--weight);
}
:where(.gbg-lead, .is-style-gbg-lead) {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
	letter-spacing: -0.01em;
}
:where(.gbg-label, .is-style-gbg-label) {
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
:where(.gbg-meta) {
	color: var(--gbg-muted);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.02em;
}
:where(.gbg-section) { padding-block: var(--wp--preset--spacing--section); }
:where(.gbg-section--compact) { padding-block: var(--wp--preset--spacing--section-small); }
:where(.gbg-reading) { max-width: var(--wp--style--global--content-size); }
:where(.gbg-standard) { max-width: var(--wp--custom--layout--standard); }
:where(.gbg-grid) { display: grid; gap: var(--wp--preset--spacing--45); }
:where(.gbg-grid > *) { min-width: 0; margin-block: 0; }
:where(.gbg-panel) {
	padding: var(--wp--preset--spacing--45);
	border: 1px solid var(--gbg-border);
	border-radius: var(--wp--custom--radius--panel);
}
:where(.site-main) { min-height: 55vh; }
.wp-site-blocks > .site-main,
.wp-site-blocks > .gbg-footer { margin-block-start: 0; }

/* Core owns the skip link's hidden and focused states; do not move it offscreen again. */
#wp-skip-link:focus-visible { outline: 3px solid var(--gbg-focus); outline-offset: 2px; }

/* Full 12-column composition is opt-in; reading content stays at 736px. */
@media (min-width: 600px) {
	:root, .editor-styles-wrapper { --gbg-gutter: 32px; }
}
@media (min-width: 900px) {
	:root, .editor-styles-wrapper { --gbg-gutter: 48px; }
	.gbg-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.gbg-grid > .gbg-span-main { grid-column: 1 / 8; }
	.gbg-grid > .gbg-span-aside { grid-column: 9 / 13; }
	.gbg-grid > .gbg-span-full { grid-column: 1 / -1; }
}
@media (min-width: 1440px) {
	:root, .editor-styles-wrapper { --gbg-gutter: 56px; }
}
@media (prefers-reduced-motion: reduce) {
	:root, .editor-styles-wrapper {
		--wp--custom--motion--micro: 0ms;
		--wp--custom--motion--component: 0ms;
		--wp--custom--motion--reveal: 0ms;
		--wp--custom--motion--distance: 0px;
	}
	html { scroll-behavior: auto; }
}