/**
 * Shared glossary presentation system — archive + single term.
 * Tokens and geometry only; component details live in single-term / brand CSS.
 */

/* =========================================================
   Design tokens
   ========================================================= */

body.vge-glossary-shell,
.sdg-page,
.sd-glossary-hero,
.vge-glossary-index {
	--vge-navy: #0a0845;
	--vge-pink: #ffa9e7;
	--vge-blue: #6cbeed;
	--vge-text: #2d2934;
	--vge-muted: #68636f;
	--vge-faint: #99949e;
	--vge-border: #e9e4ea;
	--vge-surface: #ffffff;
	--vge-surface-soft: #faf9fb;
	--vge-surface-pink: color-mix(in srgb, var(--vge-pink) 12%, #fff);
	--vge-surface-blue: color-mix(in srgb, var(--vge-blue) 12%, #fff);
	--vge-border-pink: color-mix(in srgb, var(--vge-pink) 38%, transparent);
	--vge-border-blue: color-mix(in srgb, var(--vge-blue) 34%, transparent);

	--vge-radius-small: 10px;
	--vge-radius: 20px;
	--vge-radius-hero: 30px;
	--vge-shadow:
		0 10px 35px rgba(30, 22, 50, 0.05),
		0 30px 70px rgba(30, 22, 50, 0.06);

	--vge-space-xs: 6px;
	--vge-space-sm: 12px;
	--vge-space-md: 20px;
	--vge-space-lg: 28px;
	--vge-space-xl: 40px;
	--vge-space-2xl: 56px;

	--vge-content-max: 1180px;
	--vge-gutter-x: 24px;
	--vge-read-max: 42rem;

	/* Legacy aliases used by single-term.css */
	--sdg-bonbon: var(--vge-pink);
	--sdg-people: var(--vge-blue);
	--sdg-pink: var(--vge-pink);
	--sdg-pink-dark: var(--vge-navy);
	--sdg-pink-soft: var(--vge-surface-pink);
	--sdg-pink-faint: color-mix(in srgb, var(--vge-pink) 8%, #fff);
	--sdg-navy: var(--vge-navy);
	--sdg-navy-light: #15135a;
	--sdg-text: var(--vge-text);
	--sdg-text-soft: var(--vge-muted);
	--sdg-text-faint: var(--vge-faint);
	--sdg-border: var(--vge-border);
	--sdg-border-dark: #ddd6df;
	--sdg-bg: var(--vge-surface);
	--sdg-bg-soft: var(--vge-surface-soft);
	--sdg-radius-sm: var(--vge-radius-small);
	--sdg-radius-md: 17px;
	--sdg-radius-lg: 24px;
	--sdg-radius-xl: var(--vge-radius-hero);
	--sdg-shadow: var(--vge-shadow);
}

@media (max-width: 980px) {
	body.vge-glossary-shell,
	.sdg-page,
	.sd-glossary-hero,
	.vge-glossary-index {
		--vge-gutter-x: 17px;
		--vge-radius-hero: 24px;
	}
}

@media (max-width: 640px) {
	body.vge-glossary-shell,
	.sdg-page,
	.sd-glossary-hero,
	.vge-glossary-index {
		--vge-gutter-x: 12px;
		--vge-radius-hero: 20px;
	}
}


/* =========================================================
   Shared content container
   ========================================================= */

.vge-shell,
.sdg-container {
	width: min(var(--vge-content-max), calc(100% - (var(--vge-gutter-x) * 2)));
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}


/* =========================================================
   Breadcrumb (archive + single)
   ========================================================= */

.sdg-breadcrumb-wrap,
.vge-breadcrumb-wrap {
	padding: var(--vge-space-lg) 0 var(--vge-space-md);
}

.sdg-breadcrumbs,
.vge-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	color: var(--vge-faint);
	font-size: 12.5px;
	line-height: 1.4;
	font-family:
		Inter,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Arial,
		sans-serif;
}

.sdg-breadcrumbs a,
.vge-breadcrumbs a,
/* Beat Divi CPT customizer: .et-db #et-boc .et-l a { color: #6cbeed } */
.et-db #et-boc .et-l .sdg-breadcrumbs a,
.et-db #et-boc .et-l .vge-breadcrumbs a,
body.vge-glossary-shell .sdg-breadcrumbs a,
body.vge-glossary-shell .vge-breadcrumbs a {
	color: var(--vge-muted, #68636f);
	text-decoration: none;
	transition: color 0.18s ease;
}

.sdg-breadcrumbs a:hover,
.vge-breadcrumbs a:hover,
.et-db #et-boc .et-l .sdg-breadcrumbs a:hover,
.et-db #et-boc .et-l .vge-breadcrumbs a:hover,
body.vge-glossary-shell .sdg-breadcrumbs a:hover,
body.vge-glossary-shell .vge-breadcrumbs a:hover {
	color: var(--vge-navy, #0a0845);
}

.sdg-breadcrumb-separator,
.vge-breadcrumb-separator,
.et-db #et-boc .et-l .sdg-breadcrumb-separator,
.et-db #et-boc .et-l .vge-breadcrumb-separator {
	color: #c4bfc7;
}

.sdg-breadcrumb-current,
.vge-breadcrumb-current,
.et-db #et-boc .et-l .sdg-breadcrumb-current,
.et-db #et-boc .et-l .vge-breadcrumb-current {
	color: var(--vge-text, #2d2934);
	font-weight: 650;
}


/* =========================================================
   Shared hero surface (legacy .sdg-hero only; card is .sd-glossary-card)
   ========================================================= */

.sdg-hero {
	position: relative;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--vge-navy) 10%, transparent);
	border-radius: var(--vge-radius-hero);
	background:
		radial-gradient(
			circle at 2% 5%,
			color-mix(in srgb, var(--vge-pink) 18%, transparent),
			transparent 30%
		),
		linear-gradient(
			135deg,
			#ffffff 0%,
			color-mix(in srgb, var(--vge-pink) 8%, #fff) 57%,
			color-mix(in srgb, var(--vge-blue) 6%, #fff) 100%
		);
	box-shadow: var(--vge-shadow);
	box-sizing: border-box;
}


/* =========================================================
   Badge family — pale surface + navy text + soft border
   ========================================================= */

.vge-badge,
.sdg-category,
.sdg-quick-label,
.sdg-example-label,
.sd-glossary-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	justify-self: start;
	flex: 0 0 auto;
	width: max-content;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0.26rem calc(0.72rem - 0.08em) 0.26rem 0.72rem;
	border-radius: 999px;
	font-size: 10.5px;
	line-height: 1.3;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--vge-navy);
	text-decoration: none;
	cursor: default;
}

.vge-badge--pink,
.sdg-category,
.sd-glossary-hero__eyebrow,
.sdg-example-label {
	border: 1px solid color-mix(in srgb, var(--vge-pink) 58%, #fff);
	background: color-mix(in srgb, var(--vge-pink) 24%, #fff);
	color: var(--vge-navy);
}

.vge-badge--blue,
.sdg-quick-label {
	border: 1px solid var(--vge-border-blue);
	background: var(--vge-surface-blue);
	color: var(--vge-navy);
}


/* =========================================================
   Codeat autolink highlighter — colors live in glossary-tooltip.css
   Pink = tooltip term. Blue = a link that navigates.
   ========================================================= */


/* =========================================================
   Archive: neutralize Divi section/row geometry → shared shell
   ========================================================= */

body.post-type-archive-glossary.vge-glossary-shell #main-content {
	background: #fff;
}

body.post-type-archive-glossary.vge-glossary-shell .et-l--body > .et_builder_inner_content > .et_pb_section {
	padding-top: 0 !important;
	padding-bottom: var(--vge-space-2xl) !important;
}

body.post-type-archive-glossary.vge-glossary-shell .et-l--body .et_pb_row {
	width: min(var(--vge-content-max), calc(100% - (var(--vge-gutter-x) * 2))) !important;
	max-width: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

body.post-type-archive-glossary.vge-glossary-shell .et-l--body .et_pb_column {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body.post-type-archive-glossary.vge-glossary-shell .et-l--body .et_pb_module {
	margin-bottom: 0;
}

body.post-type-archive-glossary.vge-glossary-shell .et-l--body .et_pb_code_inner {
	padding: 0;
}

body.post-type-archive-glossary.vge-glossary-shell .sd-glossary-hero {
	margin: 0 0 var(--vge-space-xl);
	width: 100%;
}

body.post-type-archive-glossary.vge-glossary-shell .vge-glossary-index {
	margin-top: 0;
}

/* Keep default Divi #main-header logo sizing intact on term pages.
   Do NOT fake et-tb-has-header — that breaks #logo max-height % sizing. */

/* Divi CPT mode wraps the footer in #et-boc .et-l, whose link colour outranks the footer's own rules. */
.et-db #et-boc .et-l #sd-sweet-footer a {
	color: inherit;
}

.et-db #et-boc .et-l #sd-sweet-footer .sd-footer-links a {
	color: rgba(255, 255, 255, 0.66);
}

.et-db #et-boc .et-l #sd-sweet-footer .sd-legal-links a {
	color: var(--sd-footer-muted);
}

.et-db #et-boc .et-l #sd-sweet-footer .sd-footer-links a:hover,
.et-db #et-boc .et-l #sd-sweet-footer .sd-footer-links a:focus-visible,
.et-db #et-boc .et-l #sd-sweet-footer .sd-legal-links a:hover,
.et-db #et-boc .et-l #sd-sweet-footer .sd-legal-links a:focus-visible {
	color: #fff;
}