/*
 * FAQs.
 *
 * This theme keeps everything in one 739 KB style.css, which has been
 * truncated once already by a Theme File Editor save. This block is a
 * separate file so that adding it does not mean rewriting that one, and it is
 * enqueued only on posts that actually contain an FAQs row (see functions.php).
 *
 * Everything below the variable block is byte for byte the same as section 9
 * of the reg-lightning theme's css/theme.css. Only the variables differ: this
 * theme has no design tokens to point at, so the values are literal, and its
 * container is Bootstrap's stepped one rather than a flat 1320px, so the steps
 * are declared here as well. That keeps the block lined up with the section
 * above and below it at every width under this theme.
 */
.faqs {
	--faq-navy: #042141;
	--faq-white: #fff;
	--faq-border: #e5e5e5;
	--faq-container: 100%;
	--faq-gutter: 0.75rem;
	/* 3em against this theme's 0.9rem body text, which is the 43.2px the live
	   text-content rows measure. 5em from 992px up, as they do. */
	--faq-section-pad: 3em;
	--faq-radius: 8px;
	--faq-pad: 15px;
	--faq-gap: 15px;
	--faq-heading-gap: 20px;
	--faq-answer-gap: 10px;
	--faq-para: 16px;

	padding-block: var(--faq-section-pad);
	background: var(--faq-white);
}

@media (min-width: 576px) {
	.faqs {
		--faq-container: 540px;
	}
}

@media (min-width: 768px) {
	.faqs {
		--faq-container: 720px;
	}
}

@media (min-width: 992px) {
	.faqs {
		--faq-container: 960px;
		--faq-section-pad: 5em;
	}
}

@media (min-width: 1200px) {
	.faqs {
		--faq-container: 1140px;
	}
}

@media (min-width: 1400px) {
	.faqs {
		--faq-container: 1320px;
	}
}

/*
 * Stated rather than inherited from a reset, for the same reason as the REG
 * Reviews block: this file has to be able to lay the block out on its own
 * under the old theme, where border-box comes from the copy of Bootstrap
 * inside style.css.
 */
.faqs,
.faqs *,
.faqs *::before,
.faqs *::after {
	box-sizing: border-box;
}

.faqs__container {
	width: 100%;
	max-width: var(--faq-container);
	margin-inline: auto;
	padding-inline: var(--faq-gutter);
	/* Above the decorative shapes in section 19. */
	position: relative;
	z-index: 1;
}

/*
 * padding: 0, stated. The old theme's style.css puts padding-bottom: 16px on
 * headings, which would put 16px of dead space between this heading and the
 * first panel under that theme only. Silence loses to whatever else is on the
 * page; the same lesson as the image-centring bug in 2.5.0.
 *
 * The size is left to each theme's own heading ladder. The colour is not:
 * live sets #042141 on this heading explicitly, where the theme default for
 * an h2 is the slate.
 */
.faqs__heading {
	margin: 0 0 var(--faq-heading-gap);
	padding: 0;
	color: var(--faq-navy);
}

.faqs__list {
	display: grid;
	gap: var(--faq-gap);
}

.faqs__item {
	padding: var(--faq-pad);
	border: 1px solid var(--faq-border);
	border-radius: var(--faq-radius);
	background: var(--faq-white);
}

/*
 * No display or list-style here on purpose. The default UA rule makes a
 * summary a list-item and draws the disclosure triangle, which is what the
 * live page shows, and overriding it is how a summary usually loses its
 * marker by accident.
 */
.faqs__question {
	font-size: 14.4px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--faq-navy);
	cursor: pointer;
}

.faqs__answer {
	margin-top: var(--faq-answer-gap);
	font-size: 14.4px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--faq-navy);
}

.faqs__answer p {
	margin: 0 0 var(--faq-para);
}

.faqs__answer :where(ul, ol) {
	margin: 0 0 var(--faq-para);
	padding-left: 1.25em;
}

.faqs__answer :where(h2, h3, h4, h5, h6) {
	margin: 0 0 var(--faq-para);
	padding: 0;
	color: var(--faq-navy);
}

/*
 * Underlined and in the body colour, the same departure from live as the REG
 * Reviews copy: live's links are #234155 against #042141 body text, which is
 * a link signalled by colour alone and barely by that. One line to revert.
 */
.faqs__answer a {
	color: inherit;
	text-decoration: underline;
}

.faqs__answer img {
	max-width: 100%;
	height: auto;
}

.faqs__answer > :last-child {
	margin-bottom: 0;
}