/** בס״ד
 * GESHMAK FAQ DEV — STRUCTURAL CSS
 *
 * Structural-only rules for the Geshmak FAQ DEV accordion. Visual styling
 * (colour, borders, spacing, typography) is deliberately left to the Style tab
 * on each of the four elements — nothing here paints anything.
 *
 * TWO THINGS EARN !important HERE:
 *   1. Rules on the Div_Block-derived elements (container / item / answer).
 *      Elementor's own Div_Block base styles are class rules that otherwise win
 *      property-by-property against plain plugin CSS.
 *   2. The heading wrapper reset. That element is never meant to be styled — the
 *      button inside it is — so it has to survive theme rules like
 *      `.entry-content h3`.
 * Everything the editor is supposed to be able to override is left unforced.
 *
 * PRE-JS STATE: the collapse rules are scoped to
 * [data-gshmk-faq]:not([data-gshmk-faq-ready]) so the accordion looks right
 * before the script runs, then hands over cleanly once it has. Those attributes
 * are injected by PHP, which the V4 editor canvas never runs — so inside the
 * editor none of this engages and every answer stays open and editable.
 *
 * DEVELOPED BY TOM GOLDSTEIN > GESHMAK! > https://geshmak.com.au/
 */

/* ---------------------------------------------------------------------------
   Pre-JS initial state
   --------------------------------------------------------------------------- */

/* All collapsed, and "first item expanded" before the first item is excepted. */
[data-gshmk-faq][data-gshmk-faq-default-state="collapsed"]:not([data-gshmk-faq-ready]) [data-element_type="geshmak-faq-answer-dev"],
[data-gshmk-faq][data-gshmk-faq-default-state="first"]:not([data-gshmk-faq-ready]) [data-element_type="geshmak-faq-answer-dev"] {
	display: none !important;
}

[data-gshmk-faq][data-gshmk-faq-default-state="first"]:not([data-gshmk-faq-ready]) > [data-element_type="geshmak-faq-item-dev"]:first-child [data-element_type="geshmak-faq-answer-dev"] {
	display: block !important;
}

/* ---------------------------------------------------------------------------
   Answer panel
   --------------------------------------------------------------------------- */

/* The script sets [hidden] on a closed answer. Div_Block's base style sets
   display:block as a class rule, which beats the user-agent [hidden] rule — so
   this has to be forced or closed answers stay visible.
   hidden="until-found" is deliberately excluded: that mode relies on
   content-visibility, and display:none would stop find-in-page matching the
   text (which is the whole point of it). */
[data-element_type="geshmak-faq-answer-dev"][hidden]:not([hidden="until-found"]) {
	display: none !important;
}

/* While animating, the script drives height inline (inline styles beat base
   styles, so no !important is needed for that); this only keeps the content
   clipped to the animating box. */
[data-element_type="geshmak-faq-answer-dev"].is-animating {
	overflow: hidden !important;
}

/* ---------------------------------------------------------------------------
   Question — heading wrapper
   --------------------------------------------------------------------------- */

/* Purely semantic: the wrapper exists so screen-reader users can navigate the
   FAQ by heading. It must contribute no box of its own — the button inside it
   is the thing that gets styled. */
.geshmak-faq-question-dev__heading {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	font: inherit !important;
	color: inherit !important;
	letter-spacing: inherit !important;
	text-transform: none !important;
}

/* ---------------------------------------------------------------------------
   Question — button
   --------------------------------------------------------------------------- */

/* Strip the user-agent button chrome only. Layout (display, width, gap,
   padding, cursor, text-align, line-height, align-items) comes from the
   widget's Atomic base styles and stays overridable from the Style tab, so it
   is deliberately absent here. */
.geshmak-faq-question-dev {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: inherit;
	font: inherit;
	text-align: inherit;
}

/* Parts must not shrink or add stray line-box height, so the SVGs stay square
   and vertically centred alongside the text. */
.geshmak-faq-question-dev__icon,
.geshmak-faq-question-dev__sep,
.geshmak-faq-question-dev__control {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 0;
}

.geshmak-faq-question-dev__icon,
.geshmak-faq-question-dev__sep {
	width: 1em;
	height: 1em;
}

/* Svg_Src_Prop_Type inlines width/height:100% on the <svg>; sizing the wrapper
   in em makes every icon scale with the button's font-size. */
.geshmak-faq-question-dev__icon svg,
.geshmak-faq-question-dev__sep svg,
.geshmak-faq-question-dev__control-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* The question text is the only part allowed to flex and wrap. */
.geshmak-faq-question-dev__text {
	flex: 0 1 auto;
	line-height: inherit;
}

/* ---------------------------------------------------------------------------
   Question — expand/collapse control icon
   --------------------------------------------------------------------------- */

/* When the control is the last part in the button (icon location "right") it
   is pushed to the far end, so the question text and the chevron sit at
   opposite edges regardless of how long the question is. */
.geshmak-faq-question-dev__control:last-child {
	margin-inline-start: auto;
}

.geshmak-faq-question-dev__control-icon {
	display: none;
	width: 1em;
	height: 1em;
	align-items: center;
	justify-content: center;
}

/* Both icons ship in the markup and are swapped with CSS, so toggling never
   waits on anything and the script only has to flip aria-expanded. */
.geshmak-faq-question-dev__control-icon--collapsed {
	display: flex;
}

.geshmak-faq-question-dev[aria-expanded="true"] .geshmak-faq-question-dev__control-icon--collapsed {
	display: none;
}

.geshmak-faq-question-dev[aria-expanded="true"] .geshmak-faq-question-dev__control-icon--expanded {
	display: flex;
}

/* Single-icon mode: no expanded icon was set, so reuse the collapsed one and
   rotate it. Higher specificity than the swap rules above, so it wins. */
.geshmak-faq-question-dev__control--single .geshmak-faq-question-dev__control-icon--collapsed {
	transition: transform var(--gshmk-faq-duration, 0.3s) ease;
}

.geshmak-faq-question-dev[aria-expanded="true"] .geshmak-faq-question-dev__control--single .geshmak-faq-question-dev__control-icon--collapsed {
	display: flex;
	transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
   Motion preferences
   --------------------------------------------------------------------------- */

/* The height animation is already forced to zero duration in JS for these
   visitors; this covers the CSS-driven icon rotation. */
@media (prefers-reduced-motion: reduce) {
	.geshmak-faq-question-dev__control--single .geshmak-faq-question-dev__control-icon--collapsed {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Print
   --------------------------------------------------------------------------- */

/* A printed page full of empty boxes is useless, so every answer is forced
   open. The script also expands them on beforeprint, which covers browsers
   that compute layout before applying the print stylesheet. */
@media print {
	[data-element_type="geshmak-faq-answer-dev"],
	[data-element_type="geshmak-faq-answer-dev"][hidden] {
		display: block !important;
		height: auto !important;
		overflow: visible !important;
	}

	.geshmak-faq-question-dev__control {
		display: none !important;
	}
}