/* faq.css — the accordion.

   Not in the Figma frame; specified by the client content plan. The prototype uses
   native <details>/<summary>, which gives keyboard operation, screen-reader semantics
   and open/close state for free, and those rules are kept because
   reference/prototype/ still uses them and is the regression test.

   The built pages use Elementor's free Accordion widget instead, because the client
   has to be able to add and remove questions from the panel. Its markup was read off
   the rendered page rather than recalled:

     .gnt-faq  (the widget wrapper, .elementor-widget-accordion)
     └ .elementor-accordion
       └ .elementor-accordion-item
         ├ .elementor-tab-title       role=button, aria-expanded, the clickable row
         │ ├ .elementor-accordion-icon > .elementor-accordion-icon-{closed,opened} > svg
         │ └ .elementor-accordion-title    the question text
         └ .elementor-tab-content      the answer

   SPECIFICITY, AND THE BUG IT CAUSED

   The kit writes this into every page's stylesheet, which loads AFTER ours:

     .elementor-widget-accordion .elementor-active .elementor-accordion-title
       { color: var(--e-global-color-accent) }

   That is THREE classes — 0,3,0. The kit's accent was set to #E6EFF7, a pale button
   fill, so the OPEN question rendered pale mist on a near-white panel and was
   effectively invisible. Two fixes, both applied: bin/apply-content.php now puts a
   text-safe colour in that slot, and the active rules below are 0,4,0 so they win
   outright rather than depending on what the kit happens to hold. */

.gnt-faq {
	max-width: 60rem;
}

.gnt-faq__title {
	margin: 0 0 var(--space-8);
	font-size: var(--text-h2);
	line-height: var(--text-h2-lh);
	letter-spacing: var(--text-h2-ls);
	font-weight: var(--font-weight-semibold);
	text-align: left;
}

/* ------------------------------------------------- native <details> version */

.gnt-faq__item {
	border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
}

.gnt-faq__item:first-of-type {
	border-top: var(--border-width-thin) solid var(--color-border-subtle);
}

.gnt-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-5) 0;
	font-family: var(--font-heading);
	font-weight: var(--font-weight-semibold);
	font-size: var(--text-h3);
	line-height: var(--text-h3-lh);
	color: var(--color-text-heading);
	cursor: pointer;
	list-style: none;
}

.gnt-faq__q::-webkit-details-marker { display: none; }

/* A plain plus/minus drawn in CSS. No icon asset and nothing to go missing. */
.gnt-faq__q::after {
	content: "";
	flex: 0 0 auto;
	width: 0.75rem;
	height: 0.75rem;
	background:
		linear-gradient(var(--blue-600), var(--blue-600)) center / 100% 2px no-repeat,
		linear-gradient(var(--blue-600), var(--blue-600)) center / 2px 100% no-repeat;
	transition: transform var(--duration-base) var(--easing-standard);
}

.gnt-faq__item[open] .gnt-faq__q::after {
	background: linear-gradient(var(--blue-600), var(--blue-600)) center / 100% 2px no-repeat;
}

.gnt-faq__a {
	margin: 0;
	padding: 0 0 var(--space-6);
	max-width: 68ch;
	font-size: var(--text-body-lg);
	line-height: var(--text-body-lg-lh);
	color: var(--color-text-muted);
}

/* ------------------------------------------ Elementor's Accordion widget */
/* Compounded with .elementor-widget-accordion throughout, to clear the kit's own
   0,2,0 and 0,3,0 rules on the same elements. */

.gnt-faq.elementor-widget-accordion .elementor-accordion {
	border: 0;
}

.gnt-faq.elementor-widget-accordion .elementor-accordion-item {
	border: 0;
	border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
	background: transparent;
}

.gnt-faq.elementor-widget-accordion .elementor-accordion-item:first-of-type {
	border-top: var(--border-width-thin) solid var(--color-border-subtle);
}

.gnt-faq.elementor-widget-accordion .elementor-tab-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* row-reverse puts Elementor's icon on the right, where the <details> version
	   draws its marker. Elementor's own class says icon-left; it is repositioned by
	   flex order rather than by fighting that class. */
	flex-direction: row-reverse;
	gap: var(--space-4);
	padding: var(--space-5) 0;
	background: none;
	border: 0;
	font-family: var(--font-heading);
	font-size: var(--text-h3);
	line-height: var(--text-h3-lh);
	font-weight: var(--font-weight-semibold);
	cursor: pointer;
	transition: color var(--duration-base) var(--easing-standard);
}

.gnt-faq.elementor-widget-accordion .elementor-accordion-title {
	flex: 1 1 auto;
	color: var(--color-text-heading);
}

.gnt-faq.elementor-widget-accordion .elementor-tab-title:hover .elementor-accordion-title {
	color: var(--blue-600);
}

/* 0,4,0 — the kit's active rule is 0,3,0 and loads later. This is the pair that was
   invisible. */
.gnt-faq.elementor-widget-accordion .elementor-active .elementor-accordion-title {
	color: var(--blue-600);
}

.gnt-faq.elementor-widget-accordion .elementor-accordion-icon {
	flex: 0 0 auto;
	margin: 0;
	color: var(--blue-600);
}

.gnt-faq.elementor-widget-accordion .elementor-active .elementor-accordion-icon {
	color: var(--blue-600);
}

.gnt-faq.elementor-widget-accordion .elementor-accordion-icon svg {
	width: 0.8125rem;
	height: 0.8125rem;
	fill: currentcolor;
}

.gnt-faq.elementor-widget-accordion .elementor-tab-content {
	padding: 0 0 var(--space-6);
	border: 0;
	max-width: 68ch;
	font-size: var(--text-body-lg);
	line-height: var(--text-body-lg-lh);
	color: var(--color-text-muted);
	background: transparent;
}

.gnt-faq.elementor-widget-accordion .elementor-tab-content > p:first-child { margin-top: 0; }
.gnt-faq.elementor-widget-accordion .elementor-tab-content > p:last-child  { margin-bottom: 0; }

@media (max-width: 767px) {
	.gnt-faq__q,
	.gnt-faq.elementor-widget-accordion .elementor-tab-title {
		font-size: var(--text-body-lg);
		line-height: 1.45;
	}
}