/*
 * Glossary (Ordbog)
 *
 * Builds on the theme's own components and custom properties rather than
 * restating them: .section, .content, .banner, .blog_categories, .question,
 * .answer, .button and the colours in :root all come from style.css. Only what
 * is specific to the glossary lives here.
 *
 * Breakpoints match the theme's own: 990, 767 and 480.
 */

/* Banner ------------------------------------------------------------------- */

/* The theme's banner expects a background image and paints a light overlay over
   it. The glossary has no banner image, so the overlay is switched off with
   .transparent and the brand blue is used instead. */
.glossary-banner {
	background-color: var(--blue_dark);
}

.glossary-banner .content_inner p {
	max-width: 730px;
}

.glossary-banner .content_inner p:last-child {
	padding-bottom: 0;
}

/* Controls ----------------------------------------------------------------- */

/* Fixed height reserved for the controls so nothing above the list moves when a
   filter is applied. */
.glossary-controls {
	padding-bottom: 2rem;
}

.glossary-search {
	max-width: 420px;
	padding-bottom: 1.5rem;
}

.glossary-search-label {
	display: block;
	padding-bottom: 0.5rem;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.4;
}

.glossary-search-input {
	width: 100%;
	box-sizing: border-box;
	min-height: 49px;
	margin: 0;
	padding: 0 1rem;
	border: 1px solid var(--greydark);
	border-radius: 15px;
	background-color: var(--white);
	color: var(--defaultTextColor);
	font-family: var(--fontDefault);
	font-size: 1rem;
	line-height: 24px;
	transition: border-color ease 0.3s;
}

.glossary-search-input:focus {
	border-color: var(--blue);
}

/* The category row reuses .blog_categories. Those rules target links, so the
   buttons on the archive are given the same look here. */
.glossary-categories {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -0.75rem;
	padding-bottom: 1.5rem;
}

.glossary-categories li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.glossary-categories li button {
	display: flex;
	align-items: center;
	/* Measured at 42px with padding alone, so the floor is set explicitly. */
	min-height: 44px;
	margin: 0;
	padding: 0.5rem 0.75rem;
	border: 0;
	background: none;
	color: var(--greydark);
	font-family: var(--fontDefault);
	font-size: 18px;
	font-weight: 700;
	line-height: 28px;
	text-align: left;
	cursor: pointer;
	transition: color ease 0.3s;
}

.glossary-categories li a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
}

.glossary-categories li button:hover,
.glossary-categories li button[aria-pressed="true"] {
	color: var(--blue_dark);
}

/* Letter navigation -------------------------------------------------------- */

.glossary-letters {
	position: sticky;
	top: 90px;
	z-index: 10;
	margin: 0 -20px;
	padding: 0.75rem 20px;
	background-color: var(--white);
	border-bottom: 1px solid var(--grey);
}

.glossary-letters-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}

.glossary-letters-list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.glossary-letter {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.25rem;
	border-radius: 15px;
	color: var(--blue);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: all ease 0.3s;
}

a.glossary-letter:hover,
a.glossary-letter[aria-current="location"] {
	background-color: var(--light_blue);
	text-decoration: none;
}

/* Letters with no entries stay in place, greyed and not clickable, so the row
   never reflows as entries are added. */
.glossary-letter.is-empty {
	color: var(--greydark);
	opacity: 0.55;
	cursor: default;
}

/* List --------------------------------------------------------------------- */

.glossary-group {
	padding-top: 2.5rem;
}

.glossary-group-letter {
	margin: 0;
	padding: 0 0 1rem;
	border-bottom: 1px solid var(--grey);
	font-size: 30px;
	line-height: 40px;
}

.glossary-entries {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -1.25rem;
	padding: 0;
}

.glossary-entry {
	box-sizing: border-box;
	width: 50%;
	margin: 0;
	padding: 1.5rem 1.25rem 0;
	list-style: none;
}

.glossary-entry-title {
	padding: 0 0 0.25rem;
	font-size: 22px;
	line-height: 1.3;
}

/* Vertical padding rather than a fixed height, so the target clears 44px on one
   line and still grows when a long term wraps. */
.glossary-entry-title a {
	display: inline-block;
	padding: 8px 0;
	color: var(--blue);
	text-decoration: none;
}

.glossary-entry-title a:hover {
	text-decoration: underline;
}

.glossary-entry-description {
	max-width: 560px;
	padding-bottom: 0;
	color: var(--black);
	font-size: 1rem;
	line-height: 1.5;
}

.glossary-message {
	padding: 2.5rem 0 0;
	font-size: 1.1rem;
}

/* Single entry ------------------------------------------------------------- */

/* Text on the left, sidebar on the right, FAQ in full width below. */
.glossary-single > * {
	margin-bottom: 3rem;
}

.glossary-single > *:last-child {
	margin-bottom: 0;
}

.glossary-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 4.5rem;
	align-items: start;
}

.glossary-layout-full {
	grid-template-columns: minmax(0, 1fr);
}

/* One shared bottom margin on every block in the text column, cleared on the
   last, so the order can change later without the spacing falling apart. */
.glossary-main > * {
	margin-bottom: 2.5rem;
}

.glossary-main > *:last-child {
	margin-bottom: 0;
}

/* Only the horizontal margins are set here. A margin shorthand would reset the
   shared bottom margin that .glossary-main > * applies, because both rules
   carry the same specificity and this one comes later. */
.glossary-badges {
	display: flex;
	flex-wrap: wrap;
	margin-left: -0.35rem;
	margin-right: -0.35rem;
}

.glossary-badge {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 0 0.35rem 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: 15px;
	background-color: var(--light_blue);
	color: var(--blue_dark);
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: all ease 0.3s;
}

.glossary-badge:hover {
	background-color: var(--blue_dark);
	color: var(--white);
	text-decoration: none;
}

.glossary-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 20px;
}

.glossary-glance {
	padding: 2rem;
	border-radius: 20px;
	background-color: var(--light_blue);
}

.glossary-glance-heading {
	font-size: 22px;
	line-height: 1.3;
}

.glossary-glance p:last-child {
	padding-bottom: 0;
}

/* The gap before a new heading is kept tight: the heading follows the previous
   text closely instead of floating in white space. */
.glossary-section + .glossary-section {
	margin-top: 1.5rem;
}

.glossary-section h2 {
	padding: 0 0 0.75rem;
	font-size: 30px;
	line-height: 40px;
}

.glossary-section h3 {
	padding-top: 0.75rem;
	font-size: 22px;
	line-height: 1.3;
}

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

/* Sidebar ------------------------------------------------------------------ */

/* The sidebar follows the reader down the text on screens tall enough to show
   all of it; on shorter screens it scrolls with the page, so nothing in it is
   ever cut off. The aside stretches to the height of the text column so the
   inner box has room to stick. The offset clears the theme's fixed header
   (143px once scrolled), plus the admin bar when logged in. */
.glossary-aside {
	align-self: stretch;
}

@media only screen and (min-width: 991px) and (min-height: 960px) {
	.glossary-aside-inner {
		position: sticky;
		top: 170px;
	}

	.admin-bar .glossary-aside-inner {
		top: 202px;
	}
}

.glossary-aside-inner > * + * {
	margin-top: 1.5rem;
}

.glossary-cta {
	padding: 2rem;
	border-radius: 20px;
	background-color: var(--blue_dark);
	color: var(--white);
}

.glossary-cta-heading {
	padding: 0 0 0.75rem;
	color: var(--white);
	font-size: 24px;
	line-height: 1.25;
}

.glossary-cta-text p {
	font-size: 15px;
	line-height: 1.55;
}

.glossary-cta-text p:last-child {
	padding-bottom: 1.25rem;
}

.glossary-related {
	padding: 1.75rem 2rem;
	border: 1px solid #e3e6ee;
	border-radius: 20px;
	background-color: var(--white);
}

.glossary-related-heading {
	padding: 0 0 0.5rem;
	font-size: 22px;
	line-height: 1.3;
}

.glossary-related-list {
	margin: 0;
	padding: 0;
}

.glossary-related-list li {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid #e3e6ee;
}

.glossary-related-list li:last-child {
	border-bottom: 0;
}

.glossary-related-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 44px;
	padding: 0.5rem 0;
	color: var(--blue_dark);
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
}

.glossary-related-link:after {
	flex: 0 0 auto;
	content: "\2192";
	transition: transform ease 0.2s;
}

.glossary-related-link:hover {
	color: var(--blue);
	text-decoration: none;
}

.glossary-related-link:hover:after {
	transform: translateX(3px);
}

.glossary-related-all {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 0.5rem;
	color: var(--blue_dark);
	font-size: 15px;
	text-decoration: underline;
}

/* FAQ ---------------------------------------------------------------------- */

/* The markup and styling are the theme's own FAQ module (.faqs_area, .faqs,
   .question, .answer). Only the spacing inside this page is set here. */
.glossary-faq {
	padding-top: 1rem;
}

.glossary-faq .faqs_left_side h2 {
	padding: 0 0 1rem;
}

/* The questions are h3 elements. The theme's .question rule sets the look; the
   rest of the theme's h3 styling is neutralised so they match the FAQ on the
   other pages exactly. */
.glossary-faq h3.question {
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.glossary-faq-toggle {
	display: block;
}

.glossary-faq-toggle:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

/* Breakpoints -------------------------------------------------------------- */

@media only screen and (max-width: 1200px) {
	.glossary-layout {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 3rem;
	}

	.glossary-cta,
	.glossary-related {
		padding: 1.5rem;
	}
}

@media only screen and (max-width: 990px) {
	.glossary-letters {
		top: 70px;
	}

	.glossary-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 3rem;
	}

	.glossary-entry {
		width: 100%;
	}
}

@media only screen and (max-width: 767px) {
	.glossary-group-letter {
		font-size: 26px;
		line-height: 34px;
	}

	.glossary-section h2 {
		font-size: 26px;
		line-height: 34px;
	}

	.glossary-glance,
	.glossary-cta,
	.glossary-related {
		padding: 1.5rem;
	}
}

@media only screen and (max-width: 480px) {
	.glossary-letters {
		margin: 0 -20px;
		padding: 0.5rem 12px;
	}

	.glossary-letter {
		min-width: 44px;
	}

	.glossary-search {
		max-width: 100%;
	}
}