/* ============================================================
   Display Questions Block — build 5

   Renders a stacked accordion of Q&A items (native <details>/
   <summary>) queried from the `question` CPT, or from a manually
   curated Questions relationship field. Header band, superhead,
   title, question, and toggle (incl. hover) are all per-block
   tokens set as inline CSS vars on .display-questions — see
   template-parts/blocks/block-display-questions.php. Answer type
   role is the one thing still sitewide (Design Tokens → Questions).
   Accordion open/close speed is set via data-dq-open/data-dq-close
   attributes, read by assets/js/conditional/blocks/displayQuestions.js.
   ============================================================ */

.display-questions {
	padding-top:    clamp(40px, 6vw, 100px);
	padding-bottom: clamp(40px, 6vw, 100px);
}

/* ── Header ─────────────────────────────────────────────────── */

.display-questions .dq-header {
	background:    var(--dq-header-bg, var(--dq-header-bg-default, var(--colA)));
	padding:       clamp(1.25rem, 3vw, 2rem);
	border-radius: var(--defaultBorderRadius, 10px) var(--defaultBorderRadius, 10px) 0 0;
	margin-bottom: 0;
}

.display-questions .dq-title {
	margin-top:    0;
	margin-bottom: 0;
}

/* Color needs #SD-prefixed specificity to beat the sitewide "#SD h2 {color:
   var(--h2-color)}" rule in global.min.css — a plain 2-class selector loses
   that fight on ID specificity alone, var() validity aside. */
#SD .display-questions .dq-title {
	color: var(--dq-header-text-color, var(--dq-header-text-color-default, #fff));
}

/* Title Type Role — only applies when chosen; falls back to H2 tokens.
   Role's own color (if set) wins over the Header Text Color field. */
.display-questions[data-dq-title-role] .dq-title {
	font-family:    var(--dq-title-family,        var(--h2-font));
	font-weight:    var(--dq-title-weight,        var(--h2-weight));
	font-style:     var(--dq-title-style,         normal);
	font-size:      var(--dq-title-size,          var(--h2Size));
	line-height:    var(--dq-title-line-height,   normal);
	letter-spacing: var(--dq-title-letter-spacing, var(--h2-tracking));
	text-transform: var(--dq-title-text-transform, none);
}

#SD .display-questions[data-dq-title-role] .dq-title {
	color: var(--dq-title-color, var(--dq-header-text-color, var(--dq-header-text-color-default, #fff)));
}

/* ── Superhead — small label above the title, inside the header band ── */

.display-questions .dq-superhead {
	margin:         0 0 0.4em;
	font-size:      0.8125rem;
	font-weight:    600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* Default ties to the header's own text color (dimmed) rather than the
	   toggle/accent color — that accent can end up matching the Header
	   Background choice itself (both often the same brand color), which
	   would make the superhead invisible against the band. */
	color:          var(--dq-superhead-text-color, var(--dq-superhead-color-default, color-mix(in srgb, var(--dq-header-text-color, var(--dq-header-text-color-default, #fff)) 70%, transparent)));
}

/* Superhead Type Role — only applies when chosen; falls back to the small
   uppercase default above. Role's own color (if set) wins over the
   Superhead Color field, same precedence as Title Type Role vs. Header Text Color. */
.display-questions[data-dq-superhead-role] .dq-superhead {
	font-family:    var(--dq-superhead-family,        inherit);
	font-weight:    var(--dq-superhead-weight,        600);
	font-style:     var(--dq-superhead-style,         normal);
	font-size:      var(--dq-superhead-size,          0.8125rem);
	line-height:    var(--dq-superhead-line-height,   normal);
	letter-spacing: var(--dq-superhead-letter-spacing, 0.08em);
	text-transform: var(--dq-superhead-text-transform, uppercase);
	color:          var(--dq-superhead-color,         var(--dq-superhead-text-color, var(--dq-superhead-color-default, color-mix(in srgb, var(--dq-header-text-color, var(--dq-header-text-color-default, #fff)) 70%, transparent))));
}

/* ── List ───────────────────────────────────────────────────── */

.display-questions .dq-list {
	display:        flex;
	flex-direction: column;
	gap:            0;
}

/* ── Item — hairline dividers carry the rhythm; header band is the only color block ── */

.display-questions .dq-item {
	border-bottom: 1px solid color-mix(in srgb, var(--colC50, #ffcc99) 55%, transparent);
	padding:       clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 3vw, 2rem);
}

.display-questions .dq-item:last-child {
	border-bottom:  none;
	padding-bottom: 0;
}

/* ── Question (accordion trigger — .dq-item is a <details>, .dq-question a <summary>) ── */

.display-questions .dq-question {
	margin-top:    0;
	margin-bottom: 0;
	cursor:        pointer;
	list-style:    none;
	display:       flex;
	align-items:   center;
	justify-content: flex-start;
	gap:           1rem;
}

.display-questions .dq-question::-webkit-details-marker {
	display: none;
}

/* ── Toggle badge — colors are per-block tokens, default to the sitewide Primary button.
   order:-1 renders it first (left of the question text) though it follows
   the text in markup — keeps the PHP template's markup order unchanged. ── */

.display-questions .dq-toggle {
	order:         -1;
	position:      relative;
	flex-shrink:   0;
	width:         2rem;
	height:        2rem;
	border-radius: 7px;
	background:    var(--dq-toggle-bg, var(--dq-toggle-bg-default, var(--btn-primary-bg)));
	transition:    background-color var(--dq-transition-speed, 0.25s) ease;
}

/* Hover state — blank fields darken the default-state background instead of
   doing nothing, so hover always reads even before anyone picks a color. */
.display-questions .dq-question:hover .dq-toggle {
	background: var(--dq-toggle-hover-bg, var(--dq-toggle-hover-bg-default, color-mix(in srgb, var(--dq-toggle-bg, var(--dq-toggle-bg-default, var(--btn-primary-bg))) 82%, black)));
}

.display-questions .dq-toggle::before,
.display-questions .dq-toggle::after {
	content:    "";
	position:   absolute;
	top:        50%;
	left:       50%;
	width:      0.75rem;
	height:     2px;
	background: var(--dq-toggle-fg, var(--dq-toggle-fg-default, var(--btn-primary-text)));
	transform:  translate(-50%, -50%);
	transition: transform var(--dq-transition-speed, 0.25s) ease, background-color var(--dq-transition-speed, 0.25s) ease;
}

.display-questions .dq-question:hover .dq-toggle::before,
.display-questions .dq-question:hover .dq-toggle::after {
	background: var(--dq-toggle-hover-fg, var(--dq-toggle-hover-fg-default, var(--dq-toggle-fg, var(--dq-toggle-fg-default, var(--btn-primary-text)))));
}

.display-questions .dq-toggle::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.display-questions .dq-item[open] .dq-toggle::after,
.display-questions .dq-item.is-open .dq-toggle::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.display-questions .dq-item[open] .dq-question,
.display-questions .dq-item.is-open .dq-question {
	margin-bottom: 0.75rem;
}

/* Question Type Role — sitewide :root vars from Design Tokens (inc/questions-tokens.php).
   Falls back to H3 tokens when no role is configured. Color specifically
   checks the per-block Question Text Color field first (--dq-question-color-block),
   then the sitewide role's color, then inherit. */
.display-questions .dq-question {
	font-family:    var(--dq-question-family,        var(--h3-font,    inherit));
	font-weight:    var(--dq-question-weight,        var(--h3-weight,  600));
	font-style:     var(--dq-question-style,         normal);
	font-size:      var(--dq-question-size,          var(--h3Size,     1.25rem));
	line-height:    var(--dq-question-line-height,   1.3);
	letter-spacing: var(--dq-question-letter-spacing, normal);
	text-transform: var(--dq-question-text-transform, none);
	color:          var(--dq-question-color-block,   var(--dq-question-color, inherit));
}

/* ── Answer ─────────────────────────────────────────────────── */

.display-questions .dq-answer {
	line-height: 1.7;
	overflow:    hidden; /* GSAP animates height on this element — see displayQuestions.js */
	margin-left: calc(2rem + 1rem); /* toggle width + .dq-question gap, so answer text lines up under the question text, not the badge */
}

.display-questions .dq-answer p {
	margin-top:    0;
	margin-bottom: 0.75em;
}

.display-questions .dq-answer p:last-child {
	margin-bottom: 0;
}

/* Answer Type Role — sitewide :root vars from Design Tokens (inc/questions-tokens.php).
   Falls back to body text when no role is configured. */
.display-questions .dq-answer {
	font-family:    var(--dq-answer-family,        inherit);
	font-weight:    var(--dq-answer-weight,        inherit);
	font-style:     var(--dq-answer-style,         normal);
	font-size:      var(--dq-answer-size,          inherit);
	line-height:    var(--dq-answer-line-height,   1.7);
	letter-spacing: var(--dq-answer-letter-spacing, inherit);
	text-transform: var(--dq-answer-text-transform, none);
	color:          var(--dq-answer-color,         inherit);
}