/**
 * PhotoCab FAQ accordion.
 *
 * Targets the Greenshift accordion block used for the homepage "Поширені
 * запитання" section:
 *
 *   .gs-accordion
 *     .gs-accordion-item.gsclose / .gsopen
 *       .gs-accordion-item__title      [role=button]
 *         .gs-accordion-item__heading  (question)
 *         span.iconfortoggle > .gs-iconbefore + .gs-iconafter
 *       .gs-accordion-item__content    (max-height animated by the plugin)
 *         .gs-accordion-item__text > p (answer)
 *
 * The plugin already rotates .gs-iconafter 90deg while closed and back to
 * 0deg when open, which is exactly the design's "+" / "−" behaviour, so the
 * toggle logic and the open/close animation are left untouched.
 *
 * WHY THE !important FLAGS: Greenshift prints per-instance CSS keyed on the
 * block's element id (`#gspb_accordion-id-gsbp-… .gs-accordion-item__title`
 * and friends). An id beats any number of classes, so those specific
 * declarations - and only those - cannot be overridden by specificity from
 * a stylesheet. Every property flagged below is one the block emits that
 * way; the rest are left unflagged on purpose. Restyling the block in the
 * Greenshift editor instead would let all of these flags go away.
 *
 * Scope note: this styles every Greenshift accordion on the site, not just
 * the FAQ one. That is intentional while the FAQ is the only one; give the
 * block an extra class and narrow these selectors if that stops being true.
 *
 * Numbers come from the Claude Design prototype; see assets/css/tokens.css.
 * Font sizes ride --pc-fs-body, which already steps 16px -> 15px at the
 * mobile breakpoint, matching the prototype's per-breakpoint values.
 */

.gs-accordion {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-2);
}

.gs-accordion .gs-accordion-item {
	margin-bottom: 0 !important; /* plugin: 20px; spacing is the flex gap now */
	background: var(--pc-surface);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-card);
	overflow: hidden;
}

/* ------------------------------------------------------------ Question -- */

.gs-accordion .gs-accordion-item__title {
	gap: var(--pc-space-5);
	width: 100%;
	padding: 18px 20px !important;
	background-color: transparent !important;
	border: 0;
	border-radius: 0 !important;
	font-size: var(--pc-fs-body) !important;
	font-weight: var(--pc-fw-medium);
	line-height: var(--pc-lh-body);
	color: var(--pc-ink-900) !important;
	text-align: left;
	cursor: pointer;
}

/* Plugin squares off the open row's bottom corners; the item owns radii. */
.gs-accordion .gs-accordion-item.gsopen > .gs-accordion-item__title {
	border-radius: 0 !important;
}

.gs-accordion .gs-accordion-item__title > * {
	font-size: inherit !important;
	color: inherit !important;
}

.gs-accordion .gs-accordion-item__heading {
	font-weight: inherit;
	line-height: inherit;
}

/* ---------------------------------------------------------------- Icon -- */

.gs-accordion .iconfortoggle {
	flex: 0 0 auto;
}

.gs-accordion span.iconfortoggle .gs-iconbefore,
.gs-accordion span.iconfortoggle .gs-iconafter {
	background-color: var(--pc-ink-400) !important;
}

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

.gs-accordion .gs-accordion-item__content {
	background-color: transparent !important;
	border-radius: 0 !important;
}

.gs-accordion .gs-accordion-item__text {
	padding: 0 20px 18px !important;
	font-size: var(--pc-fs-body);
	font-weight: var(--pc-fw-regular);
	line-height: var(--pc-lh-body);
	color: var(--pc-ink-600);
}

.gs-accordion .gs-accordion-item__text p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	text-wrap: pretty;
}

/* Long answers get a measure cap on wide screens only. */
@media (min-width: 1000px) {
	.gs-accordion .gs-accordion-item__text {
		max-width: 840px;
	}
}

@media (max-width: 689px) {
	.gs-accordion .gs-accordion-item__title {
		padding: var(--pc-space-4) !important;
	}

	.gs-accordion .gs-accordion-item__text {
		padding: 0 var(--pc-space-4) var(--pc-space-4) !important;
	}
}