/* ==========================================================================
   GEMTech FAQs Widget
   ========================================================================== */

/* Grid container — columns/gap values come from Elementor responsive controls */
.gemtech-faqs {
	display: grid;
	/* minmax(0, 1fr), not 1fr: a bare 1fr track will not shrink below its content, so one long word stretches the
	   whole widget past the screen edge on mobile. */
	grid-template-columns: repeat(1, minmax(0, 1fr));
	max-width: 100%;
}

/* Individual item */
.gemtech-faqs__item {
	/* Background, border, shadow via Elementor controls */

	/* A grid item will not shrink below its content unless told it may. This also covers pages whose generated
	   Elementor CSS still has the old repeat(n, 1fr) columns. */
	min-width: 0;
	/* Long words, URLs and e-mail addresses wrap rather than overflow. */
	overflow-wrap: anywhere;
	word-wrap: break-word;
}

/* ==========================================================================
   Non-accordion layout
   ========================================================================== */

.gemtech-faqs__question {
	white-space: normal;
	/* Reset UA heading margins so Elementor spacing controls are authoritative */
	margin-top: 0;
	margin-bottom: 0.5em;
}

.gemtech-faqs__answer { overflow-wrap: anywhere; }
.gemtech-faqs__answer img,
.gemtech-faqs__answer iframe,
.gemtech-faqs__answer video { max-width: 100%; height: auto; }
.gemtech-faqs__answer table { display: block; max-width: 100%; overflow-x: auto; }
.gemtech-faqs__answer pre { max-width: 100%; overflow-x: auto; }
.gemtech-faqs__answer > *:first-child { margin-top: 0; }
.gemtech-faqs__answer > *:last-child  { margin-bottom: 0; }

/* Divider between non-accordion items */
.gemtech-faqs--divider .gemtech-faqs__item:not(:last-child) {
	border-bottom: 1px solid #e2e8f0;
}

/* ==========================================================================
   Accordion layout
   ========================================================================== */

/* Reset the question heading element — it is purely structural in accordion mode */
.gemtech-faqs__question-heading {
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

/* Toggle button — strip all browser chrome, fill the heading */
.gemtech-faqs__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	/* Some themes set buttons to nowrap, which stops the question wrapping. */
	white-space: normal;
	overflow-wrap: anywhere;
	padding: 0;
	color: inherit;
	font: inherit;
	line-height: inherit;
	transition: color 0.2s ease, background-color 0.2s ease;
}

/* Visible focus ring for keyboard users (suppressed on mouse click by :focus-visible) */
.gemtech-faqs__toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.gemtech-faqs__question-text {
	flex: 1;
	min-width: 0; /* a flex child will not wrap below its longest word otherwise */
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Panel — hidden via CSS grid row trick (smooth native animation, no JS height calc) */
.gemtech-faqs--accordion .gemtech-faqs__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* the single column must be allowed to shrink, or the answer keeps its full width */
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease;
}

/* Inner wrapper provides the overflow clip needed for 0fr collapse */
.gemtech-faqs--accordion .gemtech-faqs__panel > .gemtech-faqs__answer {
	min-height: 0;
	min-width: 0;
	overflow: hidden;
}

/* Padding is not removed by min-height: 0, so with the answer's padding set in Elementor the closed row stays that
   tall and the top of the answer text shows through it. Take the vertical padding off while closed (the Elementor
   rule is more specific, hence !important) and hide the contents so closed links cannot be tabbed to. */
.gemtech-faqs--accordion .gemtech-faqs__panel > .gemtech-faqs__answer {
	transition: padding 0.35s ease, visibility 0s linear 0s;
}

.gemtech-faqs--accordion .gemtech-faqs__panel:not(.is-open) > .gemtech-faqs__answer {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	visibility: hidden;
	transition: padding 0.35s ease, visibility 0s linear 0.35s;
}

.gemtech-faqs--accordion .gemtech-faqs__panel.is-open {
	grid-template-rows: 1fr;
}

/* ==========================================================================
   Toggle icon
   ========================================================================== */

.gemtech-faqs__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	/* Width/height set via Elementor icon_size control; fallback below */
	width: 16px;
	height: 16px;
	color: inherit;
}

/* ── Plus / Minus ────────────────────────────────────────────────────────── */

.gemtech-faqs--icon-plus .gemtech-faqs__icon::before,
.gemtech-faqs--icon-plus .gemtech-faqs__icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	border-radius: 1px;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Horizontal bar */
.gemtech-faqs--icon-plus .gemtech-faqs__icon::before {
	width: 100%;
	height: 2px;
	transform: translate(-50%, -50%);
}

/* Vertical bar — fades out and rotates when open (creates minus) */
.gemtech-faqs--icon-plus .gemtech-faqs__icon::after {
	width: 2px;
	height: 100%;
	transform: translate(-50%, -50%);
}

.gemtech-faqs--icon-plus .gemtech-faqs__toggle[aria-expanded="true"] .gemtech-faqs__icon::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg);
}

/* ── Chevron ─────────────────────────────────────────────────────────────── */

.gemtech-faqs--icon-chevron .gemtech-faqs__icon::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translate(-60%, -70%) rotate(45deg);
	transition: transform 0.3s ease;
}

.gemtech-faqs--icon-chevron .gemtech-faqs__toggle[aria-expanded="true"] .gemtech-faqs__icon::before {
	transform: translate(-60%, -30%) rotate(-135deg);
}