/**
 * Reference module: Glossary <-> Abbreviations.
 *
 * Everything here is scoped with two classes and resets what the Elementor kit
 * paints on a bare <a> (padding, border, background, colour, font). The kit
 * styles `.elementor-kit-16 a` at specificity 0,1,1, which beats a single
 * utility class, so a one-class selector would lose and every link here would
 * come out accent pink. No !important is needed, and none is used.
 *
 * Colours are the kit's own custom properties, never hardcoded hex.
 */

/* ---------------------------------------------------------------------------
 * Per-entry anchors
 *
 * Zero height so they change no layout. scroll-margin-top keeps the card clear
 * of the sticky header when the browser jumps to it.
 * ------------------------------------------------------------------------- */

/* The anchor sits in its own Shortcode widget, first in the card. Taken out of
 * flow so it does not become a flex item and earn the card's 6-10px gap; the
 * card is the positioning context. display:none would break it, because a
 * hidden element cannot be scrolled to. */

.c-glossary-card,
.c-abbr-card {
	position: relative;
}

.c-glossary-card .nso-ref-anchor-widget,
.c-abbr-card .nso-ref-anchor-widget {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	overflow: hidden;
}

.nso-ref-anchor {
	display: block;
	height: 0;
	overflow: hidden;
	scroll-margin-top: 120px;
}

.nso-ref-anchor:focus {
	outline: none;
}

@media (max-width: 767px) {
	.nso-ref-anchor {
		scroll-margin-top: 90px;
	}
}

/* The card you were linked to, highlighted on arrival. No JavaScript: :target
 * is the browser's own state, and :has() lifts it from the anchor to the card.
 * outline rather than border, so nothing shifts by a pixel. */

.c-glossary-card:has(.nso-ref-anchor:target),
.c-abbr-card:has(.nso-ref-anchor:target) {
	outline: 2px solid var(--e-global-color-secondary);
	outline-offset: 2px;
	background-color: var(--e-global-color-f9ce99a);
}

/* ---------------------------------------------------------------------------
 * Glossary / Abbreviations switcher
 *
 * Pill shaped where the A-Z bar under it is square: rounded means go to the
 * other page, square means filter this one.
 * ------------------------------------------------------------------------- */

.c-ref-switch {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.c-ref-switch .c-ref-switch__item {
	display: inline-block;
	padding: 7px 18px;
	border: 1px solid var(--e-global-color-8e8b764);
	border-radius: 999px;
	background-color: var(--e-global-color-43f00c0);
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: var(--e-global-typography-accent-font-size);
	font-weight: var(--e-global-typography-accent-font-weight);
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Tekst on Input grey is about 8.9:1. */

.c-ref-switch .c-ref-switch__item:hover,
.c-ref-switch .c-ref-switch__item:focus-visible {
	border-color: var(--e-global-color-secondary);
	background-color: var(--e-global-color-secondary);
	color: var(--e-global-color-primary);
}

/* Navy on the brand teal is about 6:1. White on it is about 2:1 and fails, so
 * the hover state is navy on teal, never white on teal. */

.c-ref-switch .c-ref-switch__item:focus-visible {
	outline: 2px solid var(--e-global-color-primary);
	outline-offset: 2px;
}

.c-ref-switch .c-ref-switch__item.is-current,
.c-ref-switch .c-ref-switch__item.is-current:hover {
	border-color: var(--e-global-color-primary);
	background-color: var(--e-global-color-primary);
	color: var(--e-global-color-9de4cf1);
	cursor: default;
}

/* ---------------------------------------------------------------------------
 * Abbreviation badge on a glossary card
 *
 * Navy on Blue - Light, about 11.7:1. It used to be Green on the same
 * background, about 3.5:1, which fails AA at this size.
 * ------------------------------------------------------------------------- */

.c-ref-badges {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}

.c-ref-badges .c-ref-badge {
	display: inline-block;
	padding: 2px 8px;
	border: 0;
	border-radius: 3px;
	background-color: var(--e-global-color-f9ce99a);
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: var(--e-global-typography-accent-font-size);
	font-weight: var(--e-global-typography-accent-font-weight);
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}

.c-ref-badges a.c-ref-badge:hover,
.c-ref-badges a.c-ref-badge:focus-visible {
	background-color: var(--e-global-color-secondary);
	color: var(--e-global-color-primary);
}

.c-ref-badges a.c-ref-badge:focus-visible {
	outline: 2px solid var(--e-global-color-primary);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Glossary link on an abbreviation card
 *
 * The glossary definition used to sit above this link, clamped to three lines.
 * It was dropped on the client's request: it duplicated text that already lives
 * one click away, and it made the linked cards taller than the rest.
 * ------------------------------------------------------------------------- */

.c-abbr-card .c-ref-glossary {
	margin-top: 2px;
}

.c-abbr-card .c-ref-glossary__link {
	align-self: flex-start;
	padding: 0;
	border: 0;
	background: none;
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-d8e5389-font-family), sans-serif;
	font-size: var(--e-global-typography-d8e5389-font-size);
	font-weight: 600;
	line-height: 1.45;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Navy on white is about 12:1. The hover thickens the underline instead of
 * changing colour, because both the teal and the accent pink drop below AA
 * against white at this size. */

.c-abbr-card .c-ref-glossary__link:hover,
.c-abbr-card .c-ref-glossary__link:focus-visible {
	color: var(--e-global-color-primary);
	text-decoration-thickness: 2px;
}

.c-abbr-card .c-ref-glossary__link:focus-visible {
	outline: 2px solid var(--e-global-color-primary);
	outline-offset: 2px;
}