/* RotemNZ FAQ v2 — core/details inside a Group with block style "rnz-faq".
   One panel in the site's oc-card language (gradient surface, layered shadow, short accent bar),
   rows split by sand hairlines. Opening a row lights its divider with the brand accent bar,
   fills the toggle and turns + into −.
   Tokens map to the Blocksy palette (--theme-palette-color-*) with fallbacks.
   Descendant selectors on purpose: with/without .wp-block-group__inner-container, inside core/columns,
   and on Elementor (homepage) with the same markup. */

.is-style-rnz-faq {
	--fq-brand: var(--theme-palette-color-9, #932a40);
	--fq-brand-deep: var(--theme-palette-color-10, #7a2435);
	--fq-blush: var(--theme-palette-color-13, #f6ecef);
	--fq-ink: var(--theme-palette-color-14, #1a1a1a);
	--fq-ink-2: var(--theme-palette-color-15, #4a4a4a);
	--fq-line: var(--oc-sand-200, #e8ddd0);
	--fq-accent-bar: linear-gradient(to left, #a45969, rgba(164, 89, 105, 0));
	--fq-toggle: 2rem;
	--fq-ease: cubic-bezier(.2, .8, .2, 1);
	--fq-dur: 320ms;

	position: relative;
	isolation: isolate;
	padding: clamp(1.25rem, 1rem + 1.6vw, 2.25rem) clamp(1.15rem, .9rem + 1.8vw, 2.5rem);
	border: 1px solid rgba(107, 63, 78, .31);
	border-radius: var(--oc-radius-lg, clamp(1.15rem, 1.8vw, 1.65rem));
	background:
		radial-gradient(circle at 100% 0%, rgba(88, 179, 183, .08), transparent 42%),
		linear-gradient(#fff, #f8f4ef);
	box-shadow: 0 12px 24px rgba(23, 30, 38, .06), 0 2px 10px rgba(23, 30, 38, .04);
	interpolate-size: allow-keywords;
}

/* Panel accent bar — same signature as .oc-card */
.is-style-rnz-faq::after {
	content: "";
	position: absolute;
	inset-block-start: -1px;
	inset-inline-start: clamp(1.15rem, .9rem + 1.8vw, 2.5rem);
	inline-size: 128px;
	block-size: 3px;
	background: var(--fq-accent-bar);
	pointer-events: none;
}

.is-style-rnz-faq .rnz-faq__title {
	margin-block: 0 .5rem;
}

/* Wide screens: title in a narrow start column, list in a reading-width column.
   Keeps the panel aligned with the page's full-width cards while the rows stay ~600–760px.
   Not applied to the two-column variant (title stays on top there). */
@media (min-width: 1024px) {
	.is-style-rnz-faq:not(:has(.wp-block-columns, > .wp-block-group__inner-container)),
	.is-style-rnz-faq:not(:has(.wp-block-columns)) > .wp-block-group__inner-container {
		display: grid;
		grid-template-columns: minmax(11rem, 1fr) minmax(0, 2.4fr);
		column-gap: clamp(2rem, 4vw, 4.5rem);
		align-items: start;
	}

	.is-style-rnz-faq:not(:has(.wp-block-columns)) > h2,
	.is-style-rnz-faq:not(:has(.wp-block-columns)) > .wp-block-group__inner-container > h2 {
		grid-column: 1;
		grid-row: 1 / span 60;
		margin: 0;
		padding-block-start: .55rem; /* optical alignment with the first question */
	}

	.is-style-rnz-faq:not(:has(.wp-block-columns)) .wp-block-details {
		grid-column: 2;
	}
}

/* Two-column variant — self-contained, so the same markup works where core block CSS isn't loaded
   (the Elementor homepage). Mirrors core: side by side from 782px, stacked below. */
.is-style-rnz-faq .wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0 clamp(1.5rem, 4vw, 3rem);
	margin-block: 0;
}

.is-style-rnz-faq .wp-block-column {
	flex: 1 1 0;
	min-inline-size: 0;
}

@media (max-width: 781px) {
	.is-style-rnz-faq .wp-block-column {
		flex-basis: 100%;
	}
}

/* Row */
.is-style-rnz-faq .wp-block-details {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
}

.is-style-rnz-faq .wp-block-details + .wp-block-details {
	margin-block-start: 0;
	border-block-start: 1px solid var(--fq-line);
}

/* Stacked columns (mobile): keep the divider between the two lists */
@media (max-width: 781px) {
	.is-style-rnz-faq .wp-block-column + .wp-block-column > .wp-block-details:first-child {
		border-block-start: 1px solid var(--fq-line);
	}
}

/* Open row: its divider lights up with the accent bar */
.is-style-rnz-faq .wp-block-details::before {
	content: "";
	position: absolute;
	inset-block-start: -1px;
	inset-inline-start: 0;
	inline-size: 128px;
	block-size: 3px;
	background: var(--fq-accent-bar);
	transform: scaleX(0);
	transform-origin: right; /* RTL inline-start */
	transition: transform 420ms var(--fq-ease);
	pointer-events: none;
}

.is-style-rnz-faq .wp-block-details[open]::before {
	transform: scaleX(1);
}

/* Only dividers light up — the first row has none (and would double the panel's own bar) */
.is-style-rnz-faq .wp-block-details:first-of-type::before {
	content: none;
}

@media (max-width: 781px) {
	.is-style-rnz-faq .wp-block-column + .wp-block-column > .wp-block-details:first-of-type::before {
		content: "";
	}
}

:where([dir="ltr"]) .is-style-rnz-faq .wp-block-details::before {
	transform-origin: left;
}

/* Question row: toggle | text — the toggle sits next to the question, not across a wide panel */
.is-style-rnz-faq .wp-block-details > summary {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin: 0; /* Blocksy adds margin-bottom to every flow-layout child, summary included */
	padding-block: 1.05rem;
	list-style: none;
	cursor: pointer;
	color: var(--fq-ink);
	font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
	font-weight: 700;
	line-height: 1.45;
	border-radius: 10px;
	transition: color 200ms;
}

.is-style-rnz-faq .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.is-style-rnz-faq .wp-block-details > summary > .rnz-faq__q {
	flex: 1 1 0%;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-wrap: pretty;
}

/* Toggle: + that turns into − on open */
.is-style-rnz-faq .wp-block-details > summary::before {
	content: "";
	flex: 0 0 auto;
	inline-size: var(--fq-toggle);
	block-size: var(--fq-toggle);
	margin-block-start: calc((1.45em - var(--fq-toggle)) / 2);
	border: 1px solid rgba(147, 42, 64, .3);
	border-radius: 50%;
	color: var(--fq-brand);
	background:
		linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat;
	background-color: transparent;
	transition:
		transform var(--fq-dur) var(--fq-ease),
		background-size var(--fq-dur) var(--fq-ease),
		background-color 200ms,
		border-color 200ms,
		color 200ms;
}

@media (hover: hover) {
	.is-style-rnz-faq .wp-block-details > summary:hover {
		color: var(--fq-brand-deep);
	}
	.is-style-rnz-faq .wp-block-details > summary:hover::before {
		background-color: var(--fq-blush);
		border-color: rgba(147, 42, 64, .5);
	}
}

.is-style-rnz-faq .wp-block-details[open] > summary {
	color: var(--fq-brand-deep);
}

.is-style-rnz-faq .wp-block-details[open] > summary::before {
	transform: rotate(180deg);
	color: #fff;
	border-color: var(--fq-brand);
	background-color: var(--fq-brand);
	background-size: 12px 2px, 2px 0;
}

.is-style-rnz-faq .wp-block-details > summary:focus-visible {
	outline: 2px solid var(--fq-brand);
	outline-offset: 4px;
}

/* Answer — any number of blocks, reading width, aligned under the question text */
.is-style-rnz-faq .wp-block-details > :not(summary) {
	box-sizing: content-box;
	max-inline-size: 68ch;
	margin: 0;
	padding-inline-start: calc(var(--fq-toggle) + 1rem);
	color: var(--fq-ink-2);
	line-height: 1.75;
	transition: opacity 280ms 60ms, translate 360ms var(--fq-ease) 40ms;
}

.is-style-rnz-faq .wp-block-details > :not(summary) + :not(summary) {
	margin-block-start: .75em;
}

.is-style-rnz-faq .wp-block-details > :last-child:not(summary) {
	padding-block-end: 1.35rem;
}

.is-style-rnz-faq .wp-block-details:not([open]) > :not(summary),
.is-style-rnz-faq .wp-block-details.is-closing > :not(summary) {
	opacity: 0;
	translate: 0 -6px;
}

/* Entry start state: content inside a closed <details> has no prior style to transition from */
@starting-style {
	.is-style-rnz-faq .wp-block-details[open] > :not(summary) {
		opacity: 0;
		translate: 0 -6px;
	}
}

/* Closing (JS): the row returns to its closed look immediately, while the height animates down */
.is-style-rnz-faq .wp-block-details.is-closing::before {
	transform: scaleX(0);
}

.is-style-rnz-faq .wp-block-details.is-closing > summary {
	color: var(--fq-ink);
}

.is-style-rnz-faq .wp-block-details.is-closing > summary::before {
	transform: none;
	color: var(--fq-brand);
	border-color: rgba(147, 42, 64, .3);
	background-color: transparent;
	background-size: 12px 2px, 2px 12px;
}

.is-style-rnz-faq .wp-block-details a {
	color: var(--fq-brand-deep);
	text-underline-offset: .2em;
}

/* Height animation: rnz-faq.js handles it in every browser. This CSS-only path runs only
   when the script isn't present (Chromium); elsewhere the row toggles instantly. */
@supports selector(::details-content) {
	:root:not(.rnz-faq-js) .is-style-rnz-faq .wp-block-details::details-content {
		block-size: 0;
		overflow: clip;
		transition: block-size var(--fq-dur) var(--fq-ease), content-visibility var(--fq-dur) allow-discrete;
	}
	:root:not(.rnz-faq-js) .is-style-rnz-faq .wp-block-details[open]::details-content {
		block-size: auto;
	}
}

@media (max-width: 600px) {
	.is-style-rnz-faq {
		--fq-toggle: 1.875rem;
	}
	/* full reading width on phones — the indent costs ~5 words per line */
	.is-style-rnz-faq .wp-block-details > :not(summary) {
		padding-inline-start: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.is-style-rnz-faq *,
	.is-style-rnz-faq *::before,
	.is-style-rnz-faq *::after,
	.is-style-rnz-faq .wp-block-details::details-content {
		transition: none !important;
	}
}

@media print {
	.is-style-rnz-faq {
		box-shadow: none;
		background: none;
	}
}