/*
 * FAQ — native <details> styled like the site's accordion: a navy rule between
 * items, the question in bold navy, a circled plus on the left that turns into
 * a cross when open. Enqueued by renoun_render_faq() only where a FAQ renders.
 */
/* The ink is set per wrapper because the sections do not set a text colour of
 * their own: solution and application FAQs sit on the navy prefooter (white),
 * industry FAQs on white (navy). A new wrapper defaults to navy. */
.tfp-faq { --faq-ink: var(--renoun-global-color-dark-navy, #0d3556); --faq-answer: var(--renoun-global-color-text, #485057); --faq-link: var(--renoun-global-color-medium-blue, #035b77); --faq-indent: 3rem; }
.tfp-faq.solution-faqs, .tfp-faq.application-faqs { --faq-ink: var(--renoun-global-color-default-white, #fff); --faq-answer: rgba(255, 255, 255, .9); --faq-link: var(--renoun-global-color-yellow, #ffde17); }
.tfp-faq.solution-faqs .tfp-faq__question:focus-visible, .tfp-faq.application-faqs .tfp-faq__question:focus-visible { outline-color: var(--renoun-global-color-yellow, #ffde17); }
.tfp-faq__list { border-top: 1px solid var(--faq-ink); }
.tfp-faq__item { border-bottom: 1px solid var(--faq-ink); }
.tfp-faq__question {
	position: relative;
	display: block;
	list-style: none;
	cursor: pointer;
	padding: 1.5rem 1rem 1.5rem var(--faq-indent);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--faq-ink);
}
.tfp-faq__question::-webkit-details-marker { display: none; }
.tfp-faq__question:focus-visible { outline: 2px solid var(--renoun-global-color-medium-blue, #035b77); outline-offset: 2px; border-radius: 4px; }
.tfp-faq__marker {
	position: absolute;
	left: 0;
	top: 50%;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	border: 1px solid var(--faq-ink);
	border-radius: 50%;
}
.tfp-faq__marker::before,
.tfp-faq__marker::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	background: var(--faq-ink);
	transform: translate(-50%, -50%);
	transition: transform .2s ease-out;
}
.tfp-faq__marker::before { width: 14px; height: 1px; }
.tfp-faq__marker::after  { width: 1px;  height: 14px; }
.tfp-faq__item[open] > .tfp-faq__question .tfp-faq__marker::after { transform: translate(-50%, -50%) rotate(90deg); }
.tfp-faq__answer { padding: 0 1rem 1.5rem var(--faq-indent); color: var(--faq-answer); }
/* Danny, 2026-09-20: on the navy prefooter the ANSWER was the theme's dark body grey (1.1:1) while the question was
   white. The theme colours `p` and `li` directly, so a colour on the answer box never reached the text inside it;
   the text now takes the box's colour — a muted white on navy, the body grey on white — and links follow suit. */
.tfp-faq__answer :is(p, li, ul, ol, dl, dt, dd, span, em, strong, b, i, small, h3, h4, h5, h6, td, th, blockquote) { color: inherit; }
.tfp-faq__answer strong, .tfp-faq__answer b { color: var(--faq-ink); }
.tfp-faq__answer a { color: var(--faq-link); text-decoration: underline; }
.tfp-faq__answer a:hover, .tfp-faq__answer a:focus { color: var(--faq-ink); }
.tfp-faq__answer > :last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .tfp-faq__marker::before, .tfp-faq__marker::after { transition: none; } }
@media (max-width: 639px) { .tfp-faq { --faq-indent: 2.5rem; } .tfp-faq__question { font-size: 1rem; } }

/* ---- renoun/accordion block (Fall Hazard Assessment, Inspection & Recertification FAQs) -----------------------
 * Its "light" theme means a LIGHT SECTION: navy questions, body-grey answers. "dark" means a navy / blue section:
 * white questions, muted-white answers, yellow links. Foundation's yellow title default is what both replace. */
.wp-block-renoun-accordion .accordion.light .accordion-title { color: var(--renoun-global-color-dark-navy, #0d3556); }
.wp-block-renoun-accordion .accordion.light .accordion-title:hover,
.wp-block-renoun-accordion .accordion.light .accordion-title:focus { color: var(--renoun-global-color-medium-blue, #035b77); }
.wp-block-renoun-accordion .accordion.dark .accordion-title { color: var(--renoun-global-color-default-white, #fff); }
.wp-block-renoun-accordion .accordion.dark .accordion-title:hover,
.wp-block-renoun-accordion .accordion.dark .accordion-title:focus { color: var(--renoun-global-color-yellow, #ffde17); }
.wp-block-renoun-accordion .accordion.dark .accordion-content,
.wp-block-renoun-accordion .accordion.dark .accordion-content :is(p, li, ul, ol, span, em, td, th) { color: rgba(255, 255, 255, .9); }
.wp-block-renoun-accordion .accordion.dark .accordion-content :is(strong, b) { color: var(--renoun-global-color-default-white, #fff); }
.wp-block-renoun-accordion .accordion.dark .accordion-content a { color: var(--renoun-global-color-yellow, #ffde17); text-decoration: underline; }

/* ---- The FAQ section added to pages and posts (functions/function-faq.php, 2026-09-20) ------------------------
 * A light section: navy heading, navy questions, body-grey answers (the .tfp-faq default ink). On a page it is a
 * full-width band with the heading beside the list, like the templates' "Answers to Key Questions"; in a post it
 * sits in the article column. */
.tfp-faq-section { padding: clamp(2.5rem, 5vw, 5rem) 0; border-top: 1px solid var(--renoun-global-color-default-light-gray, #e6e6e6); background: var(--renoun-global-color-default-white, #fff); scroll-margin-top: 110px; }
.tfp-faq-section > .row { padding-left: var(--renoun-global-padding, 1.5rem); padding-right: var(--renoun-global-padding, 1.5rem); }
.tfp-faq-section__title { margin: 0 0 1.5rem; color: var(--renoun-global-color-dark-navy, #0d3556); font-size: clamp(26px, 2.6vw, 34px); line-height: 1.18; letter-spacing: -.01em; text-wrap: balance; }
.tfp-faq-section--post { margin-top: 3rem; padding: 2.5rem 0 0; }