/* ==========================================================================
   HIMPEL FAQ panel — an accordion beside a picture
   --------------------------------------------------------------------------
   The home page's FAQ rows, reused: the same green panels, the same white
   badge holding a plus that becomes a minus. What is new is the column beside
   them — whichever row is open decides which picture it shows.

   Everything is scoped under .himpel-fqp. Nothing targets the theme or any
   global element.

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

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

	position: relative;
	z-index: 2;
	width: auto;

	/* Written by himpel-bleed.js when a theme container holds this section. */
	margin-left: var(--himpel-bleed-l, 0px);
	margin-right: var(--himpel-bleed-r, 0px);

	background-color: var(--hfp-bg, var(--himpel-white));
	box-sizing: border-box;
}

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

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

/* ==========================================================================
   Top container — pill and heading on the left, copy on the right
   ========================================================================== */

.himpel-fqp__head {
	display: grid;
	grid-template-columns: var(--hfp-head-cols, minmax(0, 1fr) minmax(0, 1fr));
	gap: var(--hfp-gap, 24px);
	align-items: end;

	margin-bottom: var(--hfp-gap-head, 44px);
}

/*
 * With no copy on the right there is nothing for a second column to hold, and
 * an empty half would only push the heading into a narrower measure than the
 * design asks for. The heading keeps its own cap instead.
 */
.himpel-fqp--no-desc .himpel-fqp__head {
	grid-template-columns: minmax(0, 1fr);
}

.himpel-fqp__eyebrow {
	display: inline-flex;
	align-items: center;

	margin: 0 0 var(--hfp-gap-eyebrow, 22px);
	padding: 8px 18px;

	border: 1px solid var(--hfp-pill-border, rgba(18, 18, 18, 0.18));
	border-radius: 100px;

	color: var(--hfp-pill-color, var(--himpel-dark));
	font-size: var(--hfp-eyebrow-d, 14px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

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

.himpel-fqp__title {
	margin: 0;
	padding: 0;

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

.himpel-fqp__desc {
	margin: 0;
	color: var(--hfp-desc-color, rgba(18, 18, 18, 0.72));
	font-size: var(--hfp-a-d, 15px);
	line-height: 1.75;
	max-width: var(--hfp-desc-max, 52ch);
}

.himpel-fqp__desc p {
	margin: 0;
}

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

/* ==========================================================================
   Bottom container — rows left, picture right
   ========================================================================== */

/*
 * align-items: start is what keeps the picture column pinned to the top. The
 * two columns rarely match in height — opening a long answer grows the list —
 * and stretching the picture to follow would rescale it every time a row was
 * opened.
 */
.himpel-fqp__body {
	display: grid;
	grid-template-columns: var(--hfp-cols, minmax(0, 1fr) minmax(0, 1fr));
	gap: var(--hfp-gap, 24px);
	align-items: start;
}

/*
 * The rows lead, the picture follows: list on the left, picture on the right.
 *
 * Swapped here rather than in the markup, because the two want opposite orders.
 * Side by side the list comes first; stacked on a phone the picture goes on top,
 * where it sets up what the rows are about before the reader starts through
 * them — the same way the highlight panel puts its picture above its copy. One
 * document order cannot be both, and the document keeps the one that reads
 * correctly aloud: the picture belongs to the feature the list is describing.
 */
.himpel-fqp__list {
	order: 1;
}

.himpel-fqp__media {
	order: 2;
}

/* --------------------------------------------------------------------------
   The picture column
   -------------------------------------------------------------------------- */

.himpel-fqp__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--hfp-media-radius, 16px);
	background-color: var(--hfp-media-bg, var(--himpel-secondary));

	/* A shape, not a height, so the column holds its proportions at any width. */
	aspect-ratio: var(--hfp-ratio, 1.1);
}

.himpel-fqp__frames {
	position: absolute;
	inset: 0;
	display: grid;
}

/*
 * Stacked in one grid cell and cross-faded — the same treatment as the
 * spotlight and highlight sections, so a reader who has already met one of
 * those knows what this is doing.
 */
.himpel-fqp__frame {
	grid-area: 1 / 1;

	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s ease, visibility 0s linear 0.45s,
		transform 6s ease-out;
	transform: scale(1.03);
}

.himpel-fqp__frame.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.45s ease, visibility 0s, transform 6s ease-out;
	transform: scale(1);
}

/*
 * The section class twice over, so this outweighs WooCommerce's
 * ".woocommerce-page img { height: auto }" on a product page — under that rule
 * a picture that has not loaded yet computes to no height at all.
 */
.himpel-fqp .himpel-fqp__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* --------------------------------------------------------------------------
   The rows
   -------------------------------------------------------------------------- */

.himpel-fqp__list {
	display: flex;
	flex-direction: column;
	gap: var(--hfp-gap-rows, 14px);
}

/*
 * Green panels, 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 rather than as a different component.
 */
.himpel-fqp__item {
	border: 1px solid transparent;
	border-radius: var(--hfp-radius, 12px);
	background-color: var(--hfp-item-bg, var(--himpel-primary));
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

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

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

/* --- The heading row --- */

.himpel-fqp__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;

	padding: var(--hfp-q-pad, 20px 22px);

	cursor: pointer;
	list-style: none;
}

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

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

/*
 * The heading is an h4, so the theme's own h4 rules reach it — size, weight and
 * family all come from the site. Only the colour and the wrapping are set here,
 * and the margin a theme h4 arrives with is cleared.
 */
.himpel-fqp__q-text {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;

	color: var(--hfp-q-color, var(--himpel-white));
	font-size: var(--hfp-q-d, 16px);
	line-height: 1.45;
	overflow-wrap: break-word;
}

/* --- 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 list to the rest of the page.
 */
.himpel-fqp__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;

	width: var(--hfp-icon, 30px);
	height: var(--hfp-icon, 30px);

	border-radius: 50%;
	background-color: var(--hfp-icon-bg, var(--himpel-white));
	color: var(--hfp-icon-color, var(--himpel-primary));

	transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}

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

.himpel-fqp__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-fqp__icon .himpel-fqp__bar {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 0.3s ease;
}

.himpel-fqp__item[open] .himpel-fqp__icon .himpel-fqp__bar {
	transform: scaleY(0);
}

/* --- The description --- */

.himpel-fqp__panel {
	overflow: hidden;
}

.himpel-fqp__a {
	margin: 0 22px;
	padding: var(--hfp-a-pad, 16px 0 22px);

	/* Hairline between heading and description, the same device the philosophy
	   and testimonial cards use. */
	border-top: 1px solid var(--hfp-rule, rgba(255, 255, 255, 0.24));

	color: var(--hfp-a-color, rgba(255, 255, 255, 0.84));
	font-size: var(--hfp-a-d, 15px);
	font-weight: 400;
	line-height: 1.7;
}

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

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

/* ==========================================================================
   Animation
   ========================================================================== */

.himpel-fqp.is-revealing .himpel-fqp__eyebrow,
.himpel-fqp.is-revealing .himpel-fqp__title,
.himpel-fqp.is-revealing .himpel-fqp__desc,
.himpel-fqp.is-revealing .himpel-fqp__media,
.himpel-fqp.is-revealing .himpel-fqp__item {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.himpel-fqp.is-revealing .himpel-fqp__eyebrow,
	.himpel-fqp.is-revealing .himpel-fqp__title,
	.himpel-fqp.is-revealing .himpel-fqp__desc,
	.himpel-fqp.is-revealing .himpel-fqp__media,
	.himpel-fqp.is-revealing .himpel-fqp__item {
		opacity: 1;
	}

	.himpel-fqp__item,
	.himpel-fqp__icon,
	.himpel-fqp__icon .himpel-fqp__bar {
		transition: none;
	}

	.himpel-fqp__frame,
	.himpel-fqp__frame.is-active {
		transition: opacity 0.2s ease;
		transform: none;
	}
}

/* Only ever seen by an editor. */
.himpel-fqp__notice {
	margin: 0;
	padding: 16px 20px;
	border: 1px dashed #b9c2bd;
	border-radius: 8px;
	background-color: #f6f7f5;
	color: #55605a;
	font-size: 14px;
	line-height: 1.5;
}

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

/* --- Tablet: up to 1024px --- */
@media (max-width: 1024px) {
	.himpel-fqp__inner {
		padding: var(--hfp-py-t, 60px) var(--hfp-px-t, 20px);
	}

	/*
	 * The top container stacks here: two columns of text at this width leaves
	 * the heading about four words across. The picture and the rows below stay
	 * side by side — the pairing is the point of the design, and a tablet has
	 * the width for it.
	 */
	.himpel-fqp__head {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: var(--hfp-gap-t, 18px);
		margin-bottom: var(--hfp-gap-head-t, 32px);
	}

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

	.himpel-fqp__desc {
		max-width: 100%;
	}

	.himpel-fqp__body {
		gap: var(--hfp-gap-t, 18px);
	}

	/*
	 * A tablet keeps the taller frame the section was drawn with. The desktop
	 * one was shortened to match the pictures' own shape; here there is less
	 * width to give the accordion beside it, and a taller picture is what keeps
	 * the two columns close enough in height to read as a pair.
	 */
	.himpel-fqp__media {
		aspect-ratio: var(--hfp-ratio-t, 0.92);
	}

	.himpel-fqp__q {
		padding: var(--hfp-q-pad-t, 16px 18px);
	}

	.himpel-fqp__a {
		margin: 0 18px;
	}
}

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

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

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

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

	/*
	 * One column from here down: the picture on top, the rows beneath it. Side
	 * by side on a phone the picture would be about 150px across, too small to
	 * read what it is showing.
	 */
	.himpel-fqp__body {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--hfp-gap-m, 14px);
	}

	.himpel-fqp__media {
		/* The picture goes back on top once the two are stacked. */
		order: 1;
		aspect-ratio: var(--hfp-ratio-m, 1);
	}

	.himpel-fqp__list {
		order: 2;
		gap: var(--hfp-gap-rows-m, 10px);
	}

	.himpel-fqp__q {
		gap: 12px;
		padding: var(--hfp-q-pad-m, 16px 16px);
	}

	.himpel-fqp__q-text {
		font-size: var(--hfp-q-m, 15px);
	}

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

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