:root {
	--deco-gradient: linear-gradient(
		to right,
		#80af41,
		#80af41 11.96%,
		#708c3a 11.965%,
		#708c3a 20.46%,
		#80af41 20.465%,
		#80af41 24.135%,
		#0a6c94 24.1355%,
		#0a6c94 34.826%,
		#244876 34.8265%,
		#244876 36.1745%,
		#0a6c94 36.1746%,
		#0a6c94 37.083%,
		#244876 37.0835%,
		#244876 43.182%,
		#0a6c94 43.183%,
		#0a6c94 45.279%,
		#fdbc11 45.279%,
		#fdbc11 53.874%,
		#f5881f 53.875%,
		#f5881f 55.896%,
		#fdbc11 55.8965%,
		#fdbc11 57.9953%,
		#f5881f 57.9955%,
		#f5881f 66.4899%,
		#fdbc11 66.49%,
		#fdbc11 69.4717%,
		#ed3d89 69.4718%,
		#ed3d89 81.9201%,
		#d01e61 81.9202%,
		#d01e61 85.6349%,
		#800029 85.635%,
		#800029 91.7338%,
		#d01e61 91.7339%,
		#d01e61 97.9774%,
		#800029 97.9775%
	);
}

/* ---------- Utility classes ---------- */

.deco-top::before,
.deco-bottom::after {
	content: "";
	display: block;
	height: 0.5rem;
	background-color: var(--ita-colors-primary-500);
	background-image: var(--deco-gradient);
}

.deco-overlap-2::before,
.deco-overlap-2::after {
	margin-inline: -2px;
}

.break-md {
	@container (min-width: 650px) {
		display: block;
	}
}

/* ---------- Generic Fixes ---------- */

:where(h2, h3, h4, h5, h6, p):has(+ ul, + ol) {
	margin-block-end: 0.5rem;
}

main a[href^="https://"]
{
	word-wrap: break-word;
}

.page--acknowledgements {
	main h1 {
		@media (max-width: 450px) {
			font-size: var(--ita-fontSizes-8);
		}
	}
}

/* ---------- Widgets ---------- */

/* Lightbox */

.lightbox {
	button {
		cursor: pointer;
	}
	.lightbox__figure {
		position: relative;
		padding: 0;

		small {
			display: block;
			margin-block-end: var(--ita-spacings-5);
		}
	}

	picture,
	source,
	.lightbox__image {
		width: 100%;
	}

	.lightbox__caption {
		padding: var(--ita-spacings-3);
	}

	.lightbox__activator {
		position: absolute;
		inset: 0;
		padding: 0;
		border: 0;
		background-color: transparent;
	}

	.lightbox__close {
		display: none;
		position: fixed;
		inset: var(--ita-spacings-2) var(--ita-spacings-2) auto auto;

		@media (min-width: 600px) {
			inset: var(--ita-spacings-5) var(--ita-spacings-5) auto auto;
		}
	}

	&.lightbox--active {
		body:has(&) {
			overflow-y: hidden;
		}

		.lightbox__backdrop {
			position: fixed;
			inset: 0;
			z-index: 1000;
			overflow-y: scroll;
			background-color: hsl(from var(--ita-colors-primary-900) h s l / 0.9);
		}

		.lightbox__figure {
			margin-inline: var(--ita-spacings-5);
			margin-block: var(--ita-spacings-5);

			@media (min-width: 600px) {
				margin-inline: calc(var(--ita-spacings-5) + 25px);
			}
		}

		.lightbox__close {
			display: inline-block;
		}

		small {
			display: none;
		}
	}
}

/* Patient Voice */

.patient-voice {
	margin-block-end: 1em;
	container-type: inline-size;
}

.patient-voice__title {
	padding: var(--ita-spacings-2) var(--ita-spacings-6) !important;
	background-color: var(--ita-colors-primary-200);
	font-size: var(--ita-fontSizes-4);
	color: var(--ita-colors-primary-900);
	text-transform: uppercase;
	display: inline-block;
}

.patient-voice__content {
	font-size: var(--ita-fontSizes-8);
	font-style: italic;
	padding: var(--ita-spacings-6);
	margin: 0;
	background-color: var(--ita-colors-neutral-100);
	/* border: 2px solid var(--ita-colors-primary-700);
	border-bottom: 0; */
	text-align: center;
}

/* TOC */

#toc_main,
#floating_toc__list {
	[heading-level="1"] {
		font-weight: 700;
		padding-left: var(--ita-spacings-3);
	}
	[heading-level="2"] {
		padding-left: var(--ita-spacings-5);
	}
	[heading-level="3"] {
		padding-left: var(--ita-spacings-7);
	}
	[heading-level="4"] {
		padding-left: var(--ita-spacings-9);
	}
	[heading-level="5"] {
		padding-left: var(--ita-spacings-10);
	}
	[heading-level="6"] {
		padding-left: var(--ita-spacings-11);
	}
}

/* Pop Up */

.pop-up {
	border: 0;
	width: min(
		calc(100% - (2 * var(--ita-spacings-5))),
		clamp(
			calc(var(--ita-widths-content) - 200px),
			calc(100% - 3 * var(--ita-spacings-5)),
			calc(var(--ita-widths-content) + 2 * var(--ita-spacings-9))
		)
	);
	box-shadow: var(--libdoc-long-shadow);
	padding: 0;

	&::backdrop {
		background-color: hsl(from var(--ita-colors-primary-900) h s l / 0.9);
	}
}

.pop-up__content {
	padding: var(--ita-spacings-8);
	@media (min-width: 600px) {
		padding: var(--ita-spacings-10);
	}
}

.pop-up__title {
	margin-block-start: 0;
}

.pop-up__actions {
	display: flex;
	align-items: center;
	gap: var(--ita-spacings-4);
}

.pop-up__dismiss {
	padding: 0;
	margin: 0;
	border: 0;
	background-color: transparent;
	cursor: pointer;
	font: inherit;
	transition: all 300ms;
	&:where(:hover, :focus) {
		color: var(--ita-colors-primary-500);
	}
}

.pop-up__close {
	position: absolute;
	inset: 0 0 auto auto;
	background-color: transparent;
	border: 0;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	cursor: pointer;
}

/* Info Bar */

.info-bar {
	width: 100%;
	background-color: var(--ita-colors-primary-600);
	display: flex;
	justify-content: center;
	color: var(--ita-colors-neutral-100);
	box-shadow: var(--libdoc-med-shadow);
	transition: all 300ms;

	&.transitioning {
		margin-top: -60px;
		opacity: 0;

		@media (max-width: 550px) {
			margin-top: -97px;
		}
	}

	&.closed {
		display: none;
	}
}

.info-bar__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ita-spacings-5);
	width: 100%;
	padding-inline: var(--ita-spacings-5);
	max-width: var(--ita-widths-main-container-max);
	padding-block: var(--ita-spacings-2);
	/* max-width: clamp(
		calc(var(--ita-widths-content) - 200px),
		calc(100% - 3 * var(--ita-spacings-5)),
		calc(var(--ita-widths-content) + 2 * var(--ita-spacings-9))
	); */

	@media (max-width: 550px) {
		flex-direction: column;
		gap: var(--ita-spacings-2);
	}
}

.info-bar__title {
	margin-block: 0;
	font-size: var(--ita-fontSizes-7);
	font-weight: 400;
}

.info-bar__actions {
	display: flex;
	align-items: center;
	gap: var(--ita-spacings-4);
}

.info-bar__dismiss {
	padding: 0;
	margin: 0;
	border: 0;
	background-color: transparent;
	cursor: pointer;
	font: inherit;
	transition: all 300ms;
	color: var(--ita-colors-neutral-100);
	display: inline-flex;
	align-items: center;
	&:where(:hover, :focus) {
		color: var(--ita-colors-primary-200);
	}
}

/* analgesics pyramid */
.analgesics-pyramid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-block-end: 1em;

	@media (max-width: 500px) {
		grid-template-columns: repeat(5, 1fr);
	}
}

.analgesics-pyramid__level {
	padding: var(--ita-spacings-4);
	color: #000;

	> * {
		margin: 0;
	}
}

.analgesics-pyramid__level--1 {
	grid-column: 3 / 4;
	background-color: var(--ita-colors-primary-200);
	@media (max-width: 500px) {
		grid-column: 3 / -1;
	}
}

.analgesics-pyramid__level--2 {
	grid-column: 2 / 4;
	background-color: var(--ita-colors-primary-250);
	@media (max-width: 500px) {
		grid-column: 2 / -1;
	}
}

.analgesics-pyramid__level--3,
.analgesics-pyramid__level--4 {
	grid-column: 1 / -1;
	background-color: var(--ita-colors-primary-300);
}

.analgesics-pyramid__level--4 {
	background-color: var(--ita-colors-primary-350);
}

/* hide toc link in mobile if no toc */
body:not(:has(#toc_main)) #sd_floating_toc_toggle_btn {
	display: none;
}

/* Drug List */

.drug-list {
	@media (min-width: 450px) {
		columns: 2;
	}
}

/* Click to Copy */

.click-to-copy-confirm {
	position: fixed;
	inset: var(--ita-spacings-5) auto auto;
	background-color: var(--ita-colors-primary-700);
	color: var(--ita-colors-neutral-100);
	padding: var(--ita-spacings-2) var(--ita-spacings-5);
	border-radius: 3rem;
	box-shadow: var(--libdoc-soft-shadow);
	pointer-events: none;
	translate: 0 -3rem;
	display: none;
	opacity: 0;
	transition: all 300ms;

	&.active {
		display: block;
	}

	&.visible {
		translate: 0;
		opacity: 1;
	}
}

/* Header TOC Quote combo spacing fix */

#toc_main:not([open]) summary,
#toc_main ol {
	padding-bottom: 0;
}

main > header:has(#toc_main:last-child) + noscript + blockquote {
	margin-top: var(--ita-spacings-5);
}