/* ==========================================================================
   HIMPEL FAQ — boxed section with a two-column accordion
   --------------------------------------------------------------------------
   Everything is scoped under .himpel-faq. Nothing targets the theme or any
   global element.

   Each item is a native <details>/<summary>, so it opens, closes, and reads
   correctly with no JavaScript at all. The script only adds the height
   animation and the one-open-at-a-time behaviour on top.
   ========================================================================== */

.himpel-faq {
	--himpel-primary: #0b7347;
	--himpel-primary-dark: #095c39;
	--himpel-secondary: #f3f4ea;
	--himpel-white: #ffffff;
	--himpel-dark: #121212;

	position: relative;
	z-index: 2;
	width: 100%;
	background-color: var(--hf-bg, var(--himpel-white));
	box-sizing: border-box;
}

.himpel-faq *,
.himpel-faq *::before,
.himpel-faq *::after {
	box-sizing: border-box;
}

.himpel-faq__inner {
	width: 100%;
	max-width: var(--hf-max, 1340px);
	margin: 0 auto;
	padding: var(--hf-py-d, 80px) var(--hf-px-d, 40px);
}

/* --------------------------------------------------------------------------
   Top — pill + heading
   -------------------------------------------------------------------------- */
.himpel-faq__head {
	margin-bottom: var(--hf-gap-head, 44px);
}

.himpel-faq__eyebrow {
	display: inline-flex;
	align-items: center;
	margin: 0 0 var(--hf-gap-eyebrow, 22px);
	padding: 8px 18px;
	border: 1px solid var(--hf-pill-border, rgba(18, 18, 18, 0.18));
	border-radius: 100px;
	color: var(--hf-pill-color, var(--himpel-dark));
	font-size: var(--hf-eyebrow-d, 14px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.himpel-faq__eyebrow::before {
	content: "";
	width: 7px;
	height: 7px;
	margin-right: 9px;
	border-radius: 50%;
	background-color: var(--himpel-primary);
	flex: 0 0 auto;
}

.himpel-faq__title {
	margin: 0;
	padding: 0;
	/* Inherits the Liquid theme's H3 typography; only scale is ours. */
	color: var(--hf-title-color, var(--himpel-dark));
	font-size: var(--hf-title-d, 42px);
	font-weight: 600;
	line-height: 1.16;
	letter-spacing: -0.4px;
	max-width: var(--hf-title-mw, 20ch);
	text-wrap: balance;
}

/* --------------------------------------------------------------------------
   The accordion grid
   -------------------------------------------------------------------------- */
.himpel-faq__list {
	display: grid;
	grid-template-columns: repeat(var(--hf-cols, 2), minmax(0, 1fr));
	gap: var(--hf-gap, 16px);
	/* Each item keeps its own height. Without this, opening one would stretch
	   its neighbour to match and leave a tall empty box beside it. */
	align-items: start;
}

/*
 * Green panels on white, echoing the Global Recognition block. The open state
 * deepens to the darker green rather than changing hue, so the row that is
 * open reads as pressed-in instead of as a different component.
 */
.himpel-faq__item {
	border: 1px solid transparent;
	border-radius: var(--hf-radius, 12px);
	background-color: var(--hf-item-bg, var(--himpel-primary));
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.himpel-faq__item[open] {
	background-color: var(--hf-item-bg-open, var(--himpel-primary-dark));
}

@media (hover: hover) {
	.himpel-faq__item:not([open]):hover {
		background-color: var(--hf-item-bg-open, var(--himpel-primary-dark));
	}
}

/* --- Question row --- */
.himpel-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: var(--hf-q-pad, 20px 22px);
	cursor: pointer;
	list-style: none;
	color: var(--hf-q-color, var(--himpel-white));
	font-size: var(--hf-q-d, 16px);
	font-weight: 500;
	line-height: 1.45;
}

/* Safari draws its own disclosure triangle unless this is cleared. */
.himpel-faq__q::-webkit-details-marker {
	display: none;
}

.himpel-faq__q:focus-visible {
	outline: 2px solid var(--himpel-white);
	outline-offset: -4px;
	border-radius: var(--hf-radius, 12px);
}

.himpel-faq__q-text {
	flex: 1 1 auto;
}

/* --- Plus that becomes a minus, in a white badge --- */
/* The badge matches the arrow badges on the buttons in every other section,
   which is what ties this accordion to the rest of the page. */
.himpel-faq__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--hf-icon, 30px);
	height: var(--hf-icon, 30px);
	border-radius: 50%;
	background-color: var(--hf-icon-bg, var(--himpel-white));
	color: var(--hf-icon-color, var(--himpel-primary));
	transition: color 0.3s ease, background-color 0.3s ease,
		transform 0.3s ease;
}

.himpel-faq__item[open] .himpel-faq__icon {
	transform: rotate(180deg);
}

.himpel-faq__icon svg {
	display: block;
	width: 62%;
	height: 62%;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	fill: none;
}

/* Collapsing the upright stroke turns the plus into a minus. fill-box is what
   makes the origin the stroke's own centre rather than the whole viewBox. */
.himpel-faq__icon .himpel-faq__bar {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 0.3s ease;
}

.himpel-faq__item[open] .himpel-faq__icon .himpel-faq__bar {
	transform: scaleY(0);
}

/* --- Answer --- */
.himpel-faq__panel {
	overflow: hidden;
}

.himpel-faq__a {
	margin: 0 22px;
	padding: var(--hf-a-pad, 16px 0 22px);
	/* Hairline between question and answer, same device as the philosophy and
	   testimonial cards. */
	border-top: 1px solid var(--hf-rule, rgba(255, 255, 255, 0.24));
	color: var(--hf-a-color, rgba(255, 255, 255, 0.84));
	font-size: var(--hf-a-d, 15px);
	font-weight: 400;
	line-height: 1.7;
}

.himpel-faq__a p {
	margin: 0;
	padding: 0;
}

.himpel-faq__a p + p {
	margin-top: 12px;
}

/* ==========================================================================
   Scroll-in animation
   ========================================================================== */
.himpel-faq.is-revealing .himpel-faq__eyebrow,
.himpel-faq.is-revealing .himpel-faq__title,
.himpel-faq.is-revealing .himpel-faq__item {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.himpel-faq.is-revealing .himpel-faq__eyebrow,
	.himpel-faq.is-revealing .himpel-faq__title,
	.himpel-faq.is-revealing .himpel-faq__item {
		opacity: 1;
	}

	.himpel-faq__item,
	.himpel-faq__icon,
	.himpel-faq__icon .himpel-faq__bar {
		transition: none;
	}
}

/* ==========================================================================
   Responsive — breakpoints mirror Elementor's defaults
   ========================================================================== */

/* --- Tablet: up to 1024px. One column: two columns of question text at this
       width wraps almost every question onto three lines. --- */
@media (max-width: 1024px) {
	.himpel-faq__inner {
		padding: var(--hf-py-t, 60px) var(--hf-px-t, 20px);
	}

	.himpel-faq__head {
		margin-bottom: var(--hf-gap-head-t, 32px);
	}

	.himpel-faq__title {
		font-size: var(--hf-title-t, 34px);
		max-width: 24ch;
	}

	.himpel-faq__list {
		grid-template-columns: repeat(var(--hf-cols-t, 1), minmax(0, 1fr));
		gap: var(--hf-gap-t, 12px);
	}
}

/* --- Mobile: up to 767px --- */
@media (max-width: 767px) {
	.himpel-faq__inner {
		padding: var(--hf-py-m, 40px) var(--hf-px-m, 15px);
	}

	.himpel-faq__head {
		margin-bottom: var(--hf-gap-head-m, 26px);
	}

	.himpel-faq__eyebrow {
		margin-bottom: var(--hf-gap-eyebrow-m, 16px);
		font-size: var(--hf-eyebrow-m, 13px);
	}

	.himpel-faq__title {
		font-size: var(--hf-title-m, 27px);
		max-width: 100%;
	}

	.himpel-faq__list {
		gap: var(--hf-gap-m, 10px);
	}

	.himpel-faq__q {
		gap: 12px;
		padding: var(--hf-q-pad-m, 16px 16px);
		font-size: var(--hf-q-m, 15px);
	}

	.himpel-faq__a {
		margin: 0 16px;
		padding: var(--hf-a-pad-m, 14px 0 18px);
		font-size: var(--hf-a-m, 14px);
	}

	.himpel-faq__icon {
		width: var(--hf-icon-m, 24px);
		height: var(--hf-icon-m, 24px);
	}
}