/* GoodCodeStudio FAQ Details — frontend styles
   The PHP filter swaps core/details into <div class="wp-block-details">
   wrapping <div class="summary">…</div> + sibling content; the JS wraps
   that sibling content into <div class="summary-wrap"> and toggles
   .open on the parent. */

/* Defaults ported from the homepage's inline overrides so a fresh Details
   block matches without per-block sidebar configuration. Inline styles set
   via the editor still win over these (existing blocks unchanged). */
.wp-block-details {
	border: 0;
	border-bottom: 1px solid #e6e6e6;
	border-radius: 0;
	padding: 28px;
}

.wp-block-details .summary {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	cursor: pointer;
	touch-action: manipulation;
	/* Question typography. */
	font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.694), 20px);
	font-weight: 800;
	line-height: 1.2;
}

.wp-block-details .summary-inner > * {
	font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.231), 16px);
	font-weight: 400;
	line-height: 1.3;
}

/* grid-template-rows animation: container holds a single grid row that goes
   from 0fr (collapsed) to 1fr (occupies the content's natural height). The
   .summary-inner row item handles the actual content; overflow:hidden on it
   clips during the transition. max-height is the belt-and-suspenders cap so
   the closed state is fully collapsed even in browsers that don't honor the
   grid-template-rows transition. */
.wp-block-details .summary-wrap {
	display: grid;
	grid-template-rows: 0fr;
	max-height: 0;
	margin-block-start: 0;
	transition: grid-template-rows 0.45s ease-in-out, max-height 0.45s ease-in-out;
}

.wp-block-details .summary-inner {
	min-height: 0;
	overflow: hidden;
}

.wp-block-details.open .summary-wrap {
	grid-template-rows: 1fr;
	max-height: 2000px;
}

/* FAQ-stack-specific styling — only applies when Details blocks live inside
   an .gcs-faq wrapper. Keeps standalone Details blocks free of opinionated
   borders so editor border + shadow controls aren't fighting them. */
.gcs-faq {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.gcs-faq .wp-block-details {
	border-bottom: 1px solid #e6e6e7;
}

.gcs-faq .wp-block-details:last-child {
	border-bottom: 0;
}

/* Arrow icon on the LEFT of the question. PHP injects it before the question
   text, so DOM order already places it first — no flex reorder needed. */
.toggle-details {
	flex-shrink: 0;
	display: inline-block;
	width: 1rem;
	height: 1rem;
	margin-top: 0.12em; /* align the arrow with the first line of the question */
}

.toggle-details svg {
	display: block;
	width: 100%;
	height: 100%;
	transition: transform 0.25s ease;
}

.toggle-details svg path {
	fill: currentColor;
}

/* Points right when closed, rotates down when open (matches live). */
.wp-block-details.open > .summary > .toggle-details svg {
	transform: rotate(90deg);
}

/* Show the focus ring only for keyboard / AT users. The summary is a
   role="button" div, which some browsers over-eagerly mark :focus-visible on
   click/tap — this explicitly suppresses the ring on pointer focus. */
.wp-block-details .summary:focus:not(:focus-visible) {
	outline: none;
}

.wp-block-details .summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-details .summary-wrap {
		transition: none !important;
	}
	.toggle-details svg {
		transition: none !important;
	}
}