/* ---------------------------------------------------------------------------
   Glossary — index (/glossary/) and single term (/glossary/<slug>/)

   Ben's brief: "copy over exactly what the old site has and update the fonts
   to the new design system."

   So the LAYOUT here is a direct port of the old thebrandleader.com rules
   (theme tigerblood, library/less/style.css, .glossary-wrapper block): the
   sticky A-Z jump nav with its scroll-mask, the lettered sections with a
   hairline under each letter, and the 3/2/1-column term grid on the same
   clamp() gaps and breakpoints. Those numbers are the old site's, kept as-is.

   What CHANGED is type and colour, which now come from the new design system
   rather than the old theme's literals:
     old #000                -> var(--Neutral-100)
     old #eee hairlines      -> var(--Neutral-20)
     old var(--primary-color) hover -> kept (the token exists in this theme too
                                       and resolves to --Primary-90)
     old font-family/weights -> var(--body-font) + the Paragraph-Large scale
                                (20/30) the rest of the 2026 site uses

   The old page's search box is not ported: it shipped as
   class="search-glossary disabled" in production, i.e. switched off.
   -------------------------------------------------------------------------- */

/* --- Index head ------------------------------------------------------------
   The old index had a centred title block above the nav, max-width 1000. */
.tbl-glossary__head {
	max-width: 1000px;
	margin: 0 auto;
	padding: 120px 20px 40px;
	text-align: center;
}

.tbl-glossary__title {
	margin: 0 0 12px;
	font-family: var(--body-font);
	color: var(--Neutral-100);
}

.tbl-glossary__intro {
	margin: 0;
	font-family: var(--body-font);
	font-size: 20px;
	line-height: 30px;
	letter-spacing: 0.2px;
	color: var(--Neutral-90);
}

@media (max-width: 1024px) {
	.tbl-glossary__head { padding-top: 80px; }
}

/* --- A-Z jump nav ----------------------------------------------------------
   Ported verbatim in behaviour: horizontally scrollable, scrollbar hidden,
   sticky under the header at >=1025, edge-masked below that so the row fades
   rather than clipping hard. */
.tbl-glossary .glossary-nav {
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	align-items: stretch;
	overflow: clip;
	overflow-x: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
	width: 100%;
	white-space: nowrap;
	gap: 8px;
	padding: 18px 0;
	background: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	z-index: 200;
	border-top: 1px solid var(--Neutral-20);
	border-bottom: 1px solid var(--Neutral-20);
}

.tbl-glossary .glossary-nav::-webkit-scrollbar {
	width: 0;
	background: transparent;
	display: none;
}

@media (min-width: 1025px) {
	.tbl-glossary .glossary-nav {
		position: sticky;
		/* The old site's header was 77px. This theme's is taller, so the offset
		   is a token rather than that literal — otherwise the nav tucks under
		   the header instead of sitting below it. */
		top: var(--tbl-glossary-nav-top, 90px);
	}
}

@media (max-width: 1024px) {
	.tbl-glossary .glossary-nav {
		--mask-grad: linear-gradient(90deg, transparent 5px, red 35px, red calc(100% - 35px), transparent calc(100% - 5px));
		-webkit-mask-image: var(--mask-grad);
		mask-image: var(--mask-grad);
	}
}

.tbl-glossary .inner-glossary-nav {
	position: relative;
	z-index: 10;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: stretch;
	margin: 0 auto;
	padding: 0 20px;
	text-align: center;
	gap: 0 clamp(9px, 3vw, 12px);
	white-space: nowrap;
}

@media (min-width: 1025px) {
	.tbl-glossary .inner-glossary-nav {
		padding: 0 50px;
		max-width: 1400px;
	}
}

.tbl-glossary .glossary-scroll-btn,
.tbl-glossary .glossary-scroll-btn:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--body-font);
	font-weight: 400;
	font-size: 16px;
	color: var(--Neutral-100);
	padding: 2px;
	text-align: center;
	width: 29px;
	height: 29px;
	min-width: fit-content;
	border-radius: 5px;
	background: transparent;
	text-decoration: none;
	transition: var(--button-easing);   /* BARE */
}

.tbl-glossary .glossary-scroll-btn:hover,
.tbl-glossary .glossary-scroll-btn:active {
	color: var(--Neutral-0);
	background: var(--Neutral-100);
}

/* The old site dropped the filled hover on touch widths, where it stuck. */
@media (max-width: 767px) {
	.tbl-glossary .glossary-scroll-btn:hover,
	.tbl-glossary .glossary-scroll-btn:active {
		color: var(--Neutral-100);
		background: transparent;
	}
}

.tbl-glossary .glossary-scroll-btn:focus-visible {
	outline: 2px solid var(--Primary-90);
	outline-offset: 2px;
}

/* --- Lettered sections -----------------------------------------------------
   Old paddings kept exactly: 0/80/100 desktop, 0/50/90 at <=1024, 0/20/80 at
   <=767. */
.tbl-glossary .glossary-terms {
	position: relative;
	display: block;
	max-width: 1400px;
	padding: 0 80px 100px;
	margin: 0 auto;
}

@media (max-width: 1024px) {
	.tbl-glossary .glossary-terms { padding: 0 50px 90px; }
}

@media (max-width: 767px) {
	.tbl-glossary .glossary-terms { padding: 0 20px 80px; }
}

.tbl-glossary .glossary-lettered-section {
	position: relative;
	display: block;
	padding: 60px 0;
	/* The nav is sticky, so an anchor jump must clear it or the letter lands
	   underneath. The old site had this bug; scroll-margin fixes it without
	   touching the ported geometry. */
	scroll-margin-top: calc(var(--tbl-glossary-nav-top, 90px) + 70px);
}

@media (min-width: 768px) {
	.tbl-glossary .glossary-lettered-section:first-child { padding-top: 30px; }
}

.tbl-glossary .glossary-lettered-section:last-child { padding-bottom: 0; }

.tbl-glossary .alpha-title-area {
	position: relative;
	display: block;
	margin: 0;
	padding: 40px 5px;
	border-bottom: 1px solid var(--Neutral-20);
	font-family: var(--body-font);
	font-size: clamp(40px, 5vw, 65px);
	font-weight: 600;
	line-height: 1.1;
	color: var(--Neutral-100);
}

@media (max-width: 767px) {
	.tbl-glossary .alpha-title-area { padding: 0 0 30px; }
}

/* --- Term grid -------------------------------------------------------------
   3 columns, 2 at <=1024, 1 at <=600 — the old breakpoints, and note the
   single-column step is 600 not 767. */
.tbl-glossary .grid-row {
	display: grid;
	gap: clamp(50px, 8vw, 100px);
	grid-template-columns: repeat(3, 1fr);
	grid-auto-flow: row dense;
	padding: 50px 0 0;
}

@media (max-width: 1024px) {
	.tbl-glossary .grid-row {
		grid-template-columns: repeat(2, 1fr);
		padding-top: 40px;
	}
}

@media (max-width: 767px) {
	.tbl-glossary .grid-row { padding-top: 20px; }
}

@media (max-width: 600px) {
	.tbl-glossary .grid-row { grid-template-columns: 1fr; }
}

.tbl-glossary .glossary-term-column {
	position: relative;
	display: block;
}

.tbl-glossary .glossary-term-title-link {
	margin: 0 0 15px;
	font-family: var(--body-font);
	font-size: 24px;
	line-height: 32px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.tbl-glossary .glossary-term-title-link a,
.tbl-glossary .glossary-term-title-link a:focus {
	position: relative;
	display: inline-block;
	color: var(--Neutral-100);
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.18em;
	transition: var(--button-easing);   /* BARE */
}

/* text-decoration-line cannot tween, so the underline is drawn always and its
   COLOUR is animated from transparent — the house pattern for hover rules. */
.tbl-glossary .glossary-term-title-link a:hover,
.tbl-glossary .glossary-term-title-link a:active {
	color: var(--primary-color);
	text-decoration-color: currentColor;
}

.tbl-glossary .glossary-term-excerpt {
	position: relative;
	display: block;
	margin: 0;
	font-family: var(--body-font);
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0.18px;
	color: var(--Neutral-90);
}

.tbl-glossary .no-content-to-show {
	position: relative;
	display: block;
	padding: 100px 0 0;
}

/* --- Single term -----------------------------------------------------------
   The old entry was a narrow measure with the term, the definition and a back
   link. Old top padding 120 / 80 below 1024 is kept. */
.tbl-glossary-single__inner {
	max-width: 800px;
	margin: 0 auto;
	padding: 120px 20px 100px;
}

@media (max-width: 1024px) {
	.tbl-glossary-single__inner { padding: 80px 20px 80px; }
}

.tbl-glossary-single__term {
	margin: 0 0 24px;
	font-family: var(--body-font);
	color: var(--Neutral-100);
	text-transform: none;
}

.tbl-glossary-single__body {
	font-family: var(--body-font);
	font-size: 20px;
	line-height: 30px;
	letter-spacing: 0.2px;
	color: var(--Neutral-100);
}

.tbl-glossary-single__body p { margin: 0 0 20px; }
.tbl-glossary-single__body p:last-child { margin-bottom: 0; }

.tbl-glossary-single__back {
	margin: 48px 0 0;
	font-family: var(--body-font);
	font-size: 18px;
	line-height: 28px;
}