/* ============================================================================
   Glossary listing — page-glossary.php
   Ported from monash-arts-r/pages/resources-glossary/ui/GlossaryPage.module.scss
   ============================================================================ */

@font-face {
	font-family: "Albert Sans";
	src: url("../fonts/AlbertSans-Light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Albert Sans";
	src: url("../fonts/AlbertSans-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Albert Sans";
	src: url("../fonts/AlbertSans-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Albert Sans";
	src: url("../fonts/AlbertSans-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Albert Sans";
	src: url("../fonts/AlbertSans-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

.monash-glossary {
	--monash-blue: #006dae;
	--light-blue: #5198c1;
	--cream: #ffffef;
	--charcoal: #2c2c2c;
	font-family: "Albert Sans", sans-serif;
	background-color: #fff;
	color: var(--monash-blue);
	min-height: 100dvh;
	padding: 3.75rem 1.875rem 5rem; /* 60 30 80 */
}

.monash-glossary * {
	box-sizing: border-box;
}
.monash-glossary button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

.monash-glossary__header {
	text-align: center;
	margin-bottom: 1.5rem; /* 24 */
}

.monash-glossary__hero-img {
	display: block;
	width: clamp(8rem, 50vw, 14rem);
	height: auto;
	margin: 0 auto 1.25rem;
	object-fit: contain;
}

.monash-glossary__title {
	margin: 0 0 0.625rem; /* 10 */
	font-size: 2.125rem; /* 34 */
	font-weight: 700;
}

.monash-glossary__divider {
	background-color: currentColor;
	margin: 0 auto;
}
.monash-glossary__divider--squiggle {
	height: auto;
	background: none;
	fill: currentColor;
}

.monash-glossary__intro {
	max-width: 40rem; /* 640 */
	margin: 0 auto 2rem; /* 32 */
	font-size: 1rem; /* 16 */
	line-height: 1.5;
	text-align: left;
}

.monash-glossary__alphabet {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.375rem 0.625rem; /* 6 10 */
	margin-bottom: 2.5rem; /* 40 */
}

.monash-glossary__alphabetItem {
	padding: 0.125rem 0.25rem;
	font-size: 1.125rem; /* 18 */
	font-weight: 700;
}

.monash-glossary__alphabetItem--disabled {
	opacity: 0.35;
	cursor: default;
}

.monash-glossary__body {
	position: relative;
	display: flex;
	gap: 1.25rem; /* 20 */
}

.monash-glossary__list {
	flex: 1;
	display: flex;
	flex-direction: column;
	row-gap: 1.75rem; /* 28 */
}

.monash-glossary__empty {
	text-align: center;
	font-size: 1rem;
}

.monash-glossary__section {
	display: flex;
	flex-direction: column;
	row-gap: 1.375rem; /* 22 */
	scroll-margin-top: 4rem; /* nice landing position when scrolled to */
}

.monash-glossary__entry {
	display: flex;
	flex-direction: column;
	row-gap: 0.375rem;
}

.monash-glossary__word {
	margin: 0;
	font-size: 1.375rem; /* 22 */
	font-weight: 700;
	text-align: center;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.monash-glossary__definition {
	margin: 0;
	font-size: 0.9375rem; /* 15 */
	line-height: 1.5;
	text-align: center;
	color: var(--monash-blue);
}

.monash-glossary__index {
	position: sticky;
	top: 5rem; /* 80 */
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	row-gap: 0.125rem;
	padding-inline: 0.375rem;
	max-height: 80vh;
	overflow: hidden;
	pointer-events: auto; /* index needs to be clickable */
}

.monash-glossary__indexItem {
	font-size: 0.8125rem; /* 13 */
	font-weight: 700;
	padding: 0;
	line-height: 1.15;
}

.monash-glossary__indexItem--disabled {
	opacity: 0.35;
	cursor: default;
}

/* Hide the sticky side index on small viewports — top nav is enough. */
@media (max-width: 30rem) {
	.monash-glossary__index {
		display: none;
	}
}