/**
 * [rcvda_glossary] shortcode — filter panel (search + category + first-letter) and the
 * grouped definition list. Palette is driven by local custom properties with sensible
 * fallbacks, so a site can retheme the panel by overriding just these on .rcvda-glossary.
 */
.rcvda-glossary {
	/* All theme tokens — rcvda-base flips surface/contrast/muted/divider under
	   html[data-theme="dark"], so the whole card follows light/dark automatically.
	   Fallbacks are the light-mode values, for contexts without the theme. */
	--gl-panel-bg: var(--wp--preset--color--surface, #a7c1d9);
	--gl-field-bg: var(--wp--preset--color--base, #ffffff);
	--gl-accent: var(--wp--preset--color--contrast, #0e1f40);
	--gl-accent-contrast: var(--wp--preset--color--base, #ffffff);
	--gl-muted: var(--wp--preset--color--muted, #4c5a72);
	--gl-text: var(--wp--preset--color--contrast, #17233d);
	--gl-border: var(--wp--preset--color--divider, rgba(0, 0, 0, .18));
	--gl-rule: var(--wp--preset--color--divider, rgba(128, 128, 128, .3));
	--gl-bar: var(--wp--preset--color--accent, #f29f05); /* amber highlight (estate accent); text stays blue */
	margin-block: var(--wp--preset--spacing--50, 1.5rem);
}

/* The filter sets items/sections to [hidden]; this beats the display rules below. */
.rcvda-glossary [hidden] { display: none !important; }

/* --- Filter panel --- */
.rcvda-glossary__filters {
	background: var(--gl-panel-bg);
	border-radius: .75rem;
	padding: clamp(1rem, 3vw, 1.75rem);
	margin-block-end: clamp(1.5rem, 4vw, 2.5rem);
}

.rcvda-glossary__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem 1.25rem;
}

@media (max-width: 40rem) {
	.rcvda-glossary__row { grid-template-columns: 1fr; }
}

.rcvda-glossary__field { min-width: 0; }

.rcvda-glossary__label {
	display: block;
	margin-block-end: .4em;
	font-weight: 700;
	font-size: .95em;
	color: var(--gl-muted);
}

.rcvda-glossary__q,
.rcvda-glossary__cat {
	width: 100%;
	box-sizing: border-box;
	padding: .7em .9em;
	font: inherit;
	line-height: 1.4;                 /* shared, so the input and select are the same height */
	color: var(--gl-text);
	background-color: var(--gl-field-bg);
	border: 1px solid var(--gl-border);
	border-radius: .4rem;
}

/* Controlled <select> chevron (mirrors the estate .rcvda-learn__* fields): appearance:none
   so the select box matches the search box exactly, plus a themed chevron. */
.rcvda-glossary__cat {
	-webkit-appearance: none;
	appearance: none;
	padding: .7em 2.25rem .7em .9em;
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230e1f40' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
	background-repeat: no-repeat;
	background-position: right .9rem center;
	background-size: 16px 16px;
}

/* Dark-mode chevron — light stroke, matching the estate pattern. */
html[data-theme="dark"] .rcvda-glossary__cat {
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e8eef6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}

.rcvda-glossary__q::placeholder { color: var(--gl-muted); opacity: .8; }

.rcvda-glossary__help {
	margin: .9em 0 0;
	font-size: .9em;
	color: var(--gl-muted);
	max-width: 60ch;
}

.rcvda-glossary__field--letters { margin-block-start: 1em; }

.rcvda-glossary__letters {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
}

.rcvda-glossary__letter {
	min-width: 2.1em;
	padding: .35em .5em;
	font: inherit;
	font-weight: 700;
	line-height: 1;
	color: var(--gl-accent);
	background: transparent;
	border: 0;
	border-radius: .3rem;
	cursor: pointer;
}

.rcvda-glossary__letter:hover:not(.is-empty) { background: var(--gl-field-bg); }

.rcvda-glossary__letter.is-active {
	color: var(--gl-accent-contrast);
	background: var(--gl-accent);
}

.rcvda-glossary__letter.is-empty {
	opacity: .35;
	cursor: default;
}

.rcvda-glossary__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-block-start: 1.1em;
}

.rcvda-glossary__count {
	margin: 0;
	font-weight: 700;
	color: var(--gl-muted);
}

.rcvda-glossary__clear {
	padding: .6em 1.1em;
	font: inherit;
	font-weight: 700;
	color: var(--gl-accent-contrast);
	background: var(--gl-accent);
	border: 0;
	border-radius: .4rem;
	cursor: pointer;
}

.rcvda-glossary__clear:hover { filter: brightness(1.1); }

.rcvda-glossary__empty {
	margin: 1em 0 0;
	font-style: italic;
	color: var(--gl-muted);
}

/* --- Grouped list --- */
.rcvda-glossary__section { margin-block-end: clamp(1.5rem, 4vw, 2.5rem); }

.rcvda-glossary__head {
	/* It's a real <h2> — the theme owns its size, weight and line-height.
	   The glossary only adds the accent bar down its inline-start edge. */
	margin: 0 0 .6em;
	padding-inline-start: .65em;
	border-inline-start: 5px solid var(--gl-bar);
}

.rcvda-glossary__subhead {
	/* Second-level group label (Organisations → Locally…; Terms → VCSE…). Matches the
	   estate .rcvda-eyebrow: small, uppercase, in the muted blue that flips for dark. */
	margin: 1.5em 0 .5em;
	font-size: var(--wp--preset--font-size--small, .875rem);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #033e8c);
}

.rcvda-glossary__list { margin: 0; border-block-end: 1px solid var(--gl-rule); }

.rcvda-glossary__item {
	display: grid;
	grid-template-columns: minmax(9rem, 16rem) 1fr;
	gap: .35em 1.25em;
	padding-block: .7em;
	border-block-start: 1px solid var(--gl-rule);
}

/* No line directly under a heading/subheading — only between entries. */
.rcvda-glossary__list > .rcvda-glossary__item:first-child { border-block-start: 0; padding-block-start: .2em; }

.rcvda-glossary__term {
	font-weight: 700;
	grid-column: 1;
	margin: 0;
	overflow-wrap: break-word;
}

.rcvda-glossary__abbr { text-decoration: none; }

.rcvda-glossary__name { display: block; }

/* The full name only shrinks when it is the secondary line beneath an abbreviation. */
.rcvda-glossary__name--sub { font-weight: 400; font-size: .9em; opacity: .8; }

.rcvda-glossary__def { grid-column: 2; margin: 0; }

.rcvda-glossary__context { opacity: .85; }

.rcvda-glossary__source {
	/* A normal theme link — the theme owns the colour, underline and dark-mode handling.
	   Only the size and the leading glyph are ours. */
	font-size: .8em;
	white-space: nowrap;
}

.rcvda-glossary__source-ico { vertical-align: -.15em; margin-inline-end: .3em; }

@media (max-width: 40rem) {
	.rcvda-glossary__item { grid-template-columns: 1fr; gap: .1em; }
	.rcvda-glossary__term,
	.rcvda-glossary__def { grid-column: 1; }
	.rcvda-glossary__def { margin-block-end: .75em; }
}