/*
 * Help/FAQ page extras on top of /css/card.css: the back link, the folding table of contents,
 * headings, lists, worked examples and tables.
 * Shared by the Monster Tome help and the character sheet FAQ.
 */

.card-page-header {
	.back-link {
		color: var(--hq-card-text-dark);
		text-decoration: none;

		&:hover, &:focus-visible {
			text-decoration: underline;
		}
	}
}

/* Table of contents, folded away so the help comes first */
.card--toc {
	/* Closed, only the summary shows; drop the gap the hidden list would leave */
	&:not([open]) {
		gap: 0;
	}

	summary {
		cursor: pointer;
		list-style: none;

		&::-webkit-details-marker {
			display: none;
		}

		h2::after {
			content: " ▾";
		}
	}

	&[open] summary h2::after {
		content: " ▴";
	}

	ul {
		margin: 0;
		padding-inline-start: var(--spacing-double);
	}

	> nav > ul {
		columns: 2 220px;
		column-gap: var(--spacing-double);
	}

	li {
		margin-block: var(--spacing-half);
		break-inside: avoid;
	}

	a {
		color: var(--color-primary);
		text-decoration: none;

		&:hover, &:focus-visible {
			text-decoration: underline;
		}
	}
}

.content > .card {
	h3 {
		color: var(--color-primary);
		font-size: 1.25rem;
	}

	ul, ol {
		margin: 0;
		padding-inline-start: calc(var(--spacing-double) * 1.5);

		li + li {
			margin-top: var(--spacing);
		}
	}

	/* Worked examples, bordered like the About page's tiles */
	blockquote {
		margin: 0;
		padding: var(--spacing-double);
		background-color: var(--color-foreground);
		border: 4px solid var(--color-primary);
		border-radius: var(--spacing-double);
	}

	.button--feedback {
		align-self: center;
		align-items: center;
		gap: var(--spacing);
		padding: var(--spacing) calc(var(--spacing-double) * 2);
		font-size: 1.25rem;
	}
}

/* Wide tables scroll inside their card on narrow screens */
.table-scroll {
	overflow-x: auto;

	table {
		width: 100%;
		border-collapse: collapse;
		background-color: var(--color-foreground);
	}

	th, td {
		padding: var(--spacing);
		border: 1px solid var(--color-primary);
		text-align: start;
	}

	th {
		background-color: var(--color-primary);
		color: var(--color-foreground);
	}
}

.table-note {
	font-size: 0.85rem;
}