/**
 *  NW Accordion
 *  Opens and closes with the grid-template-rows animation used by the
 *  author by line disclosure / read more toggle.
 */
.nw-accordion {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-block: 30px;
	border: 0;
}

.nw-accordion__section {
	overflow: hidden;
	border: 1px solid var(--nw-accordion-border-color, #dee7f3);
	border-radius: var(--nw-accordion-border-radius, 10px);
	transition: box-shadow 0.3s ease;
}

.nw-accordion__section.is-open {
	box-shadow: 0 2px 5px 0 rgba(203, 213, 225, 0.5);
}

/*
 * The optional heading wrapper is markup only: the toggle keeps its own look, so
 * the heading is stripped of the theme's typography rather than fighting it.
 */
.nw-accordion .nw-accordion__heading {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	text-transform: none;
	letter-spacing: normal;
}

.nw-accordion .nw-accordion__heading:before,
.nw-accordion .nw-accordion__heading:after {
	content: none;
}

.nw-accordion .nw-accordion__toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	width: 100%;
	margin: 0;
	padding: 16px 20px;
	border: 0;
	border-radius: 0;
	background: var(--nw-accordion-toggle-background, #edf2f8);
	color: var(--nw-accordion-toggle-color, #0f172a);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.5;
	text-align: left;
	word-break: break-word;
	cursor: pointer;
}

.nw-accordion .nw-accordion__toggle:after {
	content: "";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	mask-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 16.666 16.666' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.39258 0C9.08293 0 9.64258 0.559647 9.64258 1.25V7.14258H15.416C16.1064 7.14258 16.666 7.70222 16.666 8.39258C16.6659 9.08286 16.1063 9.64258 15.416 9.64258H9.64258V15.416C9.64258 16.1064 9.08293 16.666 8.39258 16.666C7.70222 16.666 7.14258 16.1064 7.14258 15.416V9.64258H1.25C0.559698 9.64258 0 9.08286 0 8.39258C0 7.70222 0.559644 7.14258 1.25 7.14258H7.14258V1.25C7.14258 0.559644 7.70222 0 8.39258 0Z' fill='%23000'/%3E%3C/svg%3E");
	mask-size: 17px 17px;
	mask-position: center;
	mask-repeat: no-repeat;
	background-color: currentColor;
	transition: transform 0.3s ease;
}

.nw-accordion .nw-accordion__section.is-open .nw-accordion__toggle:after {
	transform: rotate(45deg);
}

.nw-accordion__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}

.nw-accordion__section.is-open .nw-accordion__body {
	grid-template-rows: 1fr;
}

/*
 * Clipping alone keeps collapsed links in the tab order, so hide the content
 * outright and delay it until the closing animation has finished.
 */
.nw-accordion__body-inner {
	overflow: hidden;
	visibility: hidden;
	transition: visibility 0s 0.3s;
}

.nw-accordion__section.is-open .nw-accordion__body-inner {
	visibility: visible;
	transition-delay: 0s;
}

/* The divider sits on the content so it only takes up space once expanded. */
.nw-accordion__body-entry {
	padding: 20px;
	border-top: 1px solid var(--nw-accordion-border-color, #dee7f3);
	background: var(--nw-accordion-content-background, #ffffff);
	color: var(--nw-accordion-content-color, #0f172a);
}

.nw-accordion__body-entry p {
	margin-bottom: 10px;
}

/*
 * Everything below re-declares what the WYSIWYG can produce. The block ships on
 * several themes and is not overridden by any of them, so each element states
 * its own look instead of inheriting whatever the theme does to lists,
 * headings and tables in post content.
 */
body.separate-containers .inside-article .entry-content .nw-accordion ul:not([class]),
.nw-accordion .nw-accordion__body-entry .wp-block-list,
.nw-accordion .nw-accordion__body-entry ol:not([class]),
.nw-accordion .nw-accordion__body-entry ul:not([class]) {
	padding: 0;
	margin: 0;
	list-style-position: inside;
	list-style-type: none;
	width: fit-content;

	&:not(:last-child) {
		margin-bottom: 30px;

		@media screen and (max-width: 1023px) {
			margin-bottom: 20px;
		}

		@media screen and (max-width: 767px) {
			margin-bottom: 15px;
		}
	}

	li:has(img) {
		list-style-type: none !important;
	}

	&.has-background {
		padding: 20px;
		border-radius: 20px;
	}
}

/*  UL  */
.nw-accordion .nw-accordion__body-entry ul[class*='list-']:not(.list-check) li + li {
	margin-top: 10px;
}

.nw-accordion .nw-accordion__body-entry ul:not([class]),
.nw-accordion .nw-accordion__body-entry ul.wp-block-list {
	margin-bottom: 20px;

	li {
		position: relative;
		padding-left: 30px;

		+ li {
			margin-top: 10px;
		}

		&:before {
			position: absolute;
			content: '';
			width: 24px;
			height: 24px;
			top: 0;
			left: 0;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12.6 12L8 7.4L9.4 6L15.4 12L9.4 18L8 16.6L12.6 12Z' fill='%230f172a'/%3E%3C/svg%3E%0A");
			@include bgContain();
		}
	}

	&.list-check {
		li {
			&:before {
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 12.12L9.40573 15.5385C9.57156 15.7044 9.82667 15.7044 9.97973 15.5385L17.48 8' stroke='%23008D25' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
			}
		}
	}

	&.list-spade {
		li {
			&:before {
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3.00017 13.9932C3.00017 16.3757 4.63043 17.9702 7.06621 17.9702C8.13069 17.9702 9.11844 17.6138 9.80886 17.0698C9.42531 18.0828 8.71566 18.8519 8.30331 19.3209C7.70872 20.0432 7.98682 20.9999 9.03211 20.9999H14.9586C16.0039 20.9999 16.282 20.0432 15.6874 19.3209C15.275 18.8519 14.5654 18.0828 14.1818 17.0698C14.8723 17.6138 15.8696 17.9702 16.9245 17.9702C19.3698 17.9702 21.0002 16.3757 21.0002 13.9932C21.0002 10.0348 15.2654 8.09323 12.9351 3.68466C12.7338 3.3001 12.5132 2.99994 11.9953 2.99994C11.4775 2.99994 11.2665 3.3001 11.0555 3.68466C8.72524 8.09323 3.00017 10.0348 3.00017 13.9932ZM4.40985 13.9744C4.40985 10.8134 9.74176 9.26572 11.9953 4.52885C14.2489 9.26572 19.5904 10.8134 19.5904 13.9744C19.5904 15.5971 18.4876 16.6664 16.8286 16.6664C15.6682 16.6664 14.7284 16.1787 14.0955 15.6159C13.5201 15.1187 12.6858 15.3532 12.7242 16.2068C12.8297 17.1729 13.4913 18.6174 14.1722 19.4147C14.3064 19.5742 14.2297 19.7055 14.0859 19.7055H9.91434C9.76095 19.7055 9.68419 19.5742 9.81848 19.4147C10.4993 18.6174 11.161 17.1729 11.2665 16.2068C11.3049 15.3532 10.4706 15.1187 9.8952 15.6159C9.26226 16.1787 8.32246 16.6664 7.16212 16.6664C5.50309 16.6664 4.40985 15.5971 4.40985 13.9744Z' fill='%230f172a' stroke='%230f172a' stroke-width='0.654167'/%3E%3C/svg%3E");
			}
		}
	}

	&.list-dice {
		li {
			&:before {
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z' stroke='%230f172a' stroke-width='2' stroke-miterlimit='10'/%3E%3Cpath d='M7 8C7.55228 8 8 7.55228 8 7C8 6.44772 7.55228 6 7 6C6.44772 6 6 6.44772 6 7C6 7.55228 6.44772 8 7 8Z' fill='%230f172a' stroke='%230f172a' stroke-miterlimit='10'/%3E%3Cpath d='M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z' fill='%230f172a' stroke='%230f172a' stroke-miterlimit='10'/%3E%3Cpath d='M17 18C17.5523 18 18 17.5523 18 17C18 16.4477 17.5523 16 17 16C16.4477 16 16 16.4477 16 17C16 17.5523 16.4477 18 17 18Z' fill='%230f172a' stroke='%230f172a' stroke-miterlimit='10'/%3E%3Cpath d='M7 18C7.55228 18 8 17.5523 8 17C8 16.4477 7.55228 16 7 16C6.44772 16 6 16.4477 6 17C6 17.5523 6.44772 18 7 18Z' fill='%230f172a' stroke='%230f172a' stroke-miterlimit='10'/%3E%3Cpath d='M17 8C17.5523 8 18 7.55228 18 7C18 6.44772 17.5523 6 17 6C16.4477 6 16 6.44772 16 7C16 7.55228 16.4477 8 17 8Z' fill='%230f172a' stroke='%230f172a' stroke-miterlimit='10'/%3E%3C/svg%3E");
			}
		}
	}

	&.list-card {
		li {
			&:before {
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17 3H7C5.89543 3 5 3.89543 5 5V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V5C19 3.89543 18.1046 3 17 3Z' stroke='%230f172a' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M11.647 8.56346L8.56402 11.6464C8.36876 11.8417 8.36876 12.1583 8.56402 12.3536L11.647 15.4365C11.8423 15.6318 12.1588 15.6318 12.3541 15.4365L15.4371 12.3536C15.6324 12.1583 15.6324 11.8417 15.4371 11.6464L12.3541 8.56346C12.1588 8.3682 11.8423 8.3682 11.647 8.56346Z' stroke='%230f172a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
			}
		}
	}
}

/*  OL  */
.nw-accordion .nw-accordion__body-entry ol:not([class]),
.nw-accordion .nw-accordion__body-entry ol.wp-block-list {
	counter-reset: list-counter;
	margin-bottom: 20px;

	li {
		position: relative;
		counter-increment: list-counter;
		padding: 0 0 0 30px;
		font-weight: unset;

		+ li {
			margin-top: 10px;
		}

		&:before {
			content: counter(list-counter);
			position: absolute;
			width: 24px;
			height: 24px;
			top: 0;
			left: 0;
			border-radius: 5px;
			font-weight: 700;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}

.nw-accordion .nw-accordion__body-entry blockquote {
	margin: 0 0 10px;
	padding: 4px 0 4px 16px;
	border-left: 3px solid var(--nw-accordion-border-color, #dee7f3);
	font-style: italic;
}

/*
 * A wide table is the only content that cannot fit the section on a phone, so
 * each one gets its own scroll container and the surrounding text stays put.
 */
.nw-accordion .nw-accordion__table {
	margin: 0 0 10px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.nw-accordion .nw-accordion__body-entry table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: inherit;
}

.nw-accordion .nw-accordion__body-entry caption {
	padding: 0 0 8px;
	font-weight: 600;
	text-align: left;
	caption-side: top;
}

.nw-accordion .nw-accordion__body-entry th,
.nw-accordion .nw-accordion__body-entry td {
	/* Cells keep a floor width so the table scrolls instead of squeezing. */
	min-width: 120px;
	padding: 10px 12px;
	border: 1px solid var(--nw-accordion-border-color, #dee7f3);
	text-align: left;
	vertical-align: top;
	word-break: break-word;
}

.nw-accordion .nw-accordion__body-entry th {
	background: var(--nw-accordion-toggle-background, #edf2f8);
	color: var(--nw-accordion-toggle-color, #0f172a);
	font-weight: 600;
}

.nw-accordion .nw-accordion__body-entry th > *:last-child,
.nw-accordion .nw-accordion__body-entry td > *:last-child {
	margin-bottom: 0;
}

.nw-accordion .nw-accordion__body-entry > *:first-child {
	margin-top: 0;
}

.nw-accordion .nw-accordion__body-entry > *:last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 1023px) {
	.nw-accordion .nw-accordion__toggle {
		gap: 20px;
		font-size: 18px;
	}
}

@media screen and (max-width: 767px) {
	.nw-accordion .nw-accordion__body-entry h2 {
		font-size: 18px;
	}

	.nw-accordion .nw-accordion__body-entry h3 {
		font-size: 16px;
	}

	.nw-accordion .nw-accordion__body-entry th,
	.nw-accordion .nw-accordion__body-entry td {
		min-width: 110px;
		padding: 8px 10px;
	}
}

/* Keep the hidden content visible while editing in the block editor. */
.nw-accordion--editor .nw-accordion__body {
	grid-template-rows: 1fr;
}

.nw-accordion--editor .nw-accordion__body-inner {
	visibility: visible;
}

.nw-accordion--editor .nw-accordion__toggle {
	cursor: default;
}
