/* ============================================================
 * Keystone FAQ
 * ============================================================
 * Accordion-style FAQ section. Built on native <details>/<summary>
 * so it works without JavaScript and stays accessible by default.
 * Material-elevated card per item, animated chevron, smooth open
 * transition.
 *
 * Pattern slug: keystone/faq
 * Replaces the legacy "Learn more about the RMA™" Q&A list on
 * /rma-badges/. Reusable for any FAQ block on any brand.
 *
 * Variants:
 *   .keystone-faq--bordered   (flat, divider lines instead of cards)
 *   .keystone-faq--single     (only one item open at a time — JS-enhanced)
 * ============================================================ */

.keystone-faq {
	--keystone-faq-bg:           transparent;
	--keystone-faq-heading:      var(--wp--preset--color--contrast, #111111);
	--keystone-faq-text:         var(--wp--preset--color--contrast, #111111);

	--keystone-faq-item-bg:      var(--keystone-card-bg, #ffffff);
	--keystone-faq-item-radius:  var(--keystone-card-radius, 14px);
	--keystone-faq-item-question:#1a1a1a;
	--keystone-faq-item-answer:  #333333;

	--keystone-faq-chevron:      currentColor;
	--keystone-faq-divider:      rgba(0, 0, 0, 0.08);

	background:     var(--keystone-faq-bg);
	color:          var(--keystone-faq-text);
	padding-block:  clamp(2.5rem, 6vw, 5rem);
	padding-inline: var(--wp--preset--spacing--50, clamp(30px, 5vw, 50px)) !important;

	margin-top:    0 !important;
	margin-bottom: 0 !important;
}

/* Schema.org FAQPage pattern (required on every instance):
 *   <ul class="keystone-faq__list" itemscope itemtype="https://schema.org/FAQPage">
 *   <li itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
 *     <summary><span itemprop="name">Q</span></summary>
 *     <div class="keystone-faq__answer" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
 *       <div itemprop="text">A</div>
 *     </div>
 */

.keystone-faq__inner {
	display:        flex;
	flex-direction: column;
	gap:            clamp(1.5rem, 3vw, 2.5rem);
	max-width:      var(--wp--style--global--wide-size, 1340px);
	margin-inline:  auto;
}

/* ── Intro ─────────────────────────────────────────────────── */
.keystone-faq__intro {
	display:        flex;
	flex-direction: column;
	gap:            0.5rem;
	max-width:      52rem;
}

.keystone-faq__heading {
	color:          var(--keystone-faq-heading);
	margin:         0;
	font-size:      clamp(1.5rem, 3.5vw, 2.25rem);
	line-height:    1.2;
	font-weight:    700;
	letter-spacing: -0.01em;
}

.keystone-faq__lead {
	color:       var(--keystone-faq-text);
	margin:      0;
	font-size:   var(--wp--preset--font-size--medium, 1rem);
	line-height: 1.6;
}

/* ── Item list ─────────────────────────────────────────────── */
.keystone-faq__list {
	display:        flex;
	flex-direction: column;
	gap:            0.75rem;
	list-style:     none;
	padding:        0;
	margin:         0;
}

/* ── Item (built on <details>) ─────────────────────────────── */
.keystone-faq__item {
	background:     var(--keystone-faq-item-bg);
	border-radius:  var(--keystone-faq-item-radius);
	box-shadow:     var(--keystone-card-shadow);
	transition:     var(--keystone-card-shadow-transition);
	overflow:       hidden;
}

.keystone-faq__item:hover {
	box-shadow: var(--keystone-card-shadow-hover);
}

.keystone-faq__item[open] {
	box-shadow: var(--keystone-card-shadow-hover);
}

/* Question row (the <summary>) */
.keystone-faq__question {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             1rem;
	padding:         clamp(1rem, 1.6vw, 1.25rem) clamp(1.25rem, 2vw, 1.75rem);
	cursor:          pointer;
	font-weight:     600;
	font-size:       1.0625rem;
	line-height:     1.4;
	color:           var(--keystone-faq-item-question);

	/* Strip default browser disclosure marker. */
	list-style:      none;
}

.keystone-faq__question::-webkit-details-marker { display: none; }
.keystone-faq__question::marker                 { display: none; content: ""; }

.keystone-faq__question:focus-visible {
	outline:        2px solid var(--keystone-faq-heading);
	outline-offset: -2px;
}

/* Chevron */
.keystone-faq__chevron {
	flex:        0 0 24px;
	width:       24px;
	height:      24px;
	color:       var(--keystone-faq-chevron);
	transition:  transform 0.25s ease;
}

.keystone-faq__item[open] .keystone-faq__chevron {
	transform: rotate(180deg);
}

/* Answer panel */
.keystone-faq__answer {
	padding:    0 clamp(1.25rem, 2vw, 1.75rem) clamp(1rem, 1.6vw, 1.25rem);
	color:      var(--keystone-faq-item-answer);
	font-size:  1rem;
	line-height: 1.6;
	border-top: 1px solid var(--keystone-faq-divider);
	padding-top: clamp(0.875rem, 1.4vw, 1.125rem);
}

.keystone-faq__answer > :first-child { margin-top: 0; }
.keystone-faq__answer > :last-child  { margin-bottom: 0; }

/* ── Variant: --bordered (flat, no card shadow) ────────────── */
.keystone-faq--bordered .keystone-faq__list {
	gap: 0;
}

.keystone-faq--bordered .keystone-faq__item {
	background:    transparent;
	border-radius: 0;
	box-shadow:    none;
	border-bottom: 1px solid var(--keystone-faq-divider);
}

.keystone-faq--bordered .keystone-faq__item:first-child {
	border-top: 1px solid var(--keystone-faq-divider);
}

.keystone-faq--bordered .keystone-faq__item:hover,
.keystone-faq--bordered .keystone-faq__item[open] {
	box-shadow: none;
}

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.keystone-faq__question { font-size: 1rem; }
}

/* ============================================================
 * BRAND: VaaSBlock
 * ============================================================ */
body.brand-vaasblock .keystone-faq {
	--keystone-faq-heading:      #1a1a72;
	--keystone-faq-item-bg:      #ffffff;
	--keystone-faq-item-question:#1a1a1a;
	--keystone-faq-divider:      rgba(26, 26, 114, 0.12);
	--keystone-faq-chevron:      #1a1a72;
}