/* Figma section index: Label S, XS row rhythm, shared section insets. */
.emergency-section-index {
	--index-unit: var(--wp--custom--layout--desktop-gutter);
	--index-gap: calc(var(--index-unit) * 0.75);
	--index-inset: calc(var(--index-unit) * 2);
	--index-red: var(--wp--preset--color--red);
	box-sizing: border-box;
	align-self: start;
	position: sticky;
	top: var(--section-index-top, 0);
	padding: 0;
	--index-side: calc(var(--index-unit) * 2.5);
	color: var(--wp--preset--color--black);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--label-s);
	line-height: 1.2;
}

.emergency-section-index ol {
	list-style: none;
	margin: 0;
	padding: var(--index-side) var(--index-side) 0;
}

.emergency-section-index li {
	padding-block: var(--index-gap);
	border-bottom: 1px solid var(--wp--preset--color--grey-300);
}

.emergency-section-index li:first-child {
	padding-top: 0;
}

.emergency-section-index li a {
	display: block;
	padding:
		calc(var(--index-unit) / 2)
		var(--wp--preset--spacing--layout-mobile);
	color: inherit;
	font-weight: 500;
	text-decoration: none;
	overflow-wrap: anywhere;
	border-left: 3px solid transparent;
}

.emergency-section-index a:hover {
	color: var(--index-red);
}

.emergency-section-index li.is-active a {
	border-left-color: var(--index-red);
	color: var(--index-red);
}

.emergency-section-index__bar {
	margin: var(--index-inset) var(--index-side) var(--index-side);
}

.emergency-section-index .emergency-section-index__cta {
	display: flex;
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
	text-align: center;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	box-sizing: border-box;
	padding: calc(var(--index-unit) / 2) var(--index-gap);
	background: var(--index-red);
	color: var(--wp--preset--color--white);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	text-decoration: none;
}

.emergency-section-index .emergency-section-index__cta:hover,
.emergency-section-index .emergency-section-index__cta:focus-visible {
	color: var(--wp--preset--color--white);
}

.emergency-section-index__close,
.emergency-section-index__toggle {
	display: none;
}

.emergency-section-index :focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 4px;
}

@media (max-width: 63.999rem) {

	body:has([data-section-index]) {
		padding-bottom: calc(5.25rem + env(safe-area-inset-bottom));
	}

	.emergency-section-index {
		--index-bar-height: 5.25rem;
		position: fixed;
		inset: auto 0 0;
		padding: 0;
		z-index: 90;
		background: var(--wp--preset--color--white);
	}

	.emergency-section-index__bar {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(8.625rem, 34.3%);
		margin: 0;
		min-height: 5.25rem;
		padding-bottom: env(safe-area-inset-bottom);
		background: var(--index-red);
	}

	.emergency-section-index__toggle {
		position: relative;
		display: flex;
		align-items: center;
		min-width: 0;
		gap: calc(var(--index-unit) / 2);
		border: 0;
		padding: calc(var(--index-unit) / 2);
		background: var(--wp--preset--color--black);
		color: var(--wp--preset--color--white);
		font: inherit;
		font-weight: 700;
		text-align: left;
		cursor: pointer;
	}

	.emergency-section-index__icon {
		flex: 0 0 2rem;
		display: grid;
		place-items: center;
		height: 2rem;
		background: rgb(255 255 255 / 20%);
	}

	.emergency-section-index__icon img {
		width: 20px;
		height: 20px;
	}

	.emergency-section-index__title-window {
		overflow: hidden;
		flex: 1;
		min-width: 0;
	}

	.emergency-section-index__title {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		line-height: 1.25;
	}

	.emergency-section-index__progress {
		position: absolute;
		inset: 0 0 auto;
		height: 6px;
		background: rgb(255 255 255 / 30%);
	}

	.emergency-section-index__progress::after {
		content: "";
		display: block;
		height: 100%;
		width: 100%;
		background: var(--index-red);
		transform: scaleX(var(--section-index-progress, 0));
		transform-origin: left;
	}

	.emergency-section-index__viewport {
		position: absolute;
		inset: auto 0 100%;
		max-height: calc(100dvh - var(--index-bar-height) - var(--section-index-top, 0px) - env(safe-area-inset-bottom));
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background: var(--wp--preset--color--white);
		visibility: hidden;
		transform: translateY(100%);
		opacity: 0;
		transition:
			transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
			opacity 200ms,
			visibility 300ms;
		z-index: -1;
	}

	.emergency-section-index.is-open .emergency-section-index__viewport {
		visibility: visible;
		transform: translateY(0);
		opacity: 1;
	}

	.emergency-section-index__close {
		flex-shrink: 0;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: calc(var(--index-unit) / 2);
		width: auto;
		margin: var(--index-side) var(--index-side) 0;
		min-height: 3.375rem;
		padding: calc(var(--index-unit) / 2) 0;
		border: 0;
		border-bottom: 1px solid var(--wp--preset--color--grey-300);
		background: var(--wp--preset--color--white);
		color: inherit;
		font: inherit;
		cursor: pointer;
	}

	.emergency-section-index__close img {
		transform: rotate(45deg);
		width: 30px;
		height: 30px;
	}

	.emergency-section-index li:first-child {
		padding-top: var(--index-gap);
	}

	.emergency-section-index.is-open {
		--index-bar-height: 4.875rem;
	}

	.emergency-section-index.is-open .emergency-section-index__bar {
		min-height: var(--index-bar-height);
		display: block;
	}

	.emergency-section-index.is-open .emergency-section-index__toggle {
		display: none;
	}

	.emergency-section-index.is-open .emergency-section-index__cta {
		min-height: 4.875rem;
	}
}

@media (prefers-reduced-motion: reduce) {

	.emergency-section-index__viewport {
		transition: opacity 100ms;
	}
}

@media print {

	.emergency-section-index {
		display: none;
	}
}

@media (min-width: 64rem) {

	.emergency-section-index {
		display: flex;
		flex-direction: column;
		max-height: calc(100dvh - var(--section-index-top, 0px));
	}

	.emergency-section-index__viewport {
		position: relative;
		display: flex;
		min-height: 0;
	}

	.emergency-section-index__bar {
		flex-shrink: 0;
	}
}

.emergency-section-index__panel {
	overflow-y: auto;
	overscroll-behavior: contain;
	min-height: 0;
	flex: 1;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--grey-300) transparent;
}

.emergency-section-index__panel::-webkit-scrollbar {
	width: 6px;
}

.emergency-section-index__panel::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--grey-300);
}

.emergency-section-index__viewport::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 24px;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(transparent, var(--index-surface, var(--wp--preset--color--grey-100)));
}

.emergency-section-index.has-scroll-below .emergency-section-index__viewport::after {
	opacity: 1;
}

.emergency-section-index__viewport::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 24px;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(var(--index-surface, var(--wp--preset--color--grey-100)), transparent);
}

.emergency-section-index.has-scroll-above .emergency-section-index__viewport::before {
	opacity: 1;
}

@media (max-width: 63.999rem) {

	.emergency-section-index {
		--index-side: var(--wp--preset--spacing--layout-mobile);
		--index-surface: var(--wp--preset--color--white);
	}

	.emergency-section-index ol {
		padding: 0 var(--index-side) var(--index-side);
	}

	.emergency-section-index__viewport::before {
		display: none;
	}
}

@media (max-width: 63.999rem) {

	/* Bounded indices accompany their content rather than the whole page. */
	.emergency-section-index.is-outside-scope {
		visibility: hidden;
		pointer-events: none;
	}
}