/**
 * JMeks Accordion.
 *
 * Each item is one grid with four columns: number, marker, title (and the
 * content below it), label. The heading, the button, the panel and the
 * content all use `subgrid`, so the content lines up under the title and the
 * moved marker under the header marker without anything measuring anything.
 * A column whose part is switched off is empty and collapses to nothing; the
 * space either side comes from margins on the parts themselves, not from a
 * column gap, so an empty column leaves no gap behind.
 *
 * Opening animates the panel's grid row from 0fr to 1fr. The browser works
 * out the real height, a photo that finishes loading mid-way included, and the
 * curve eases in and out, so it neither jumps at the end nor moves at a
 * mechanical constant speed.
 *
 * Knobs (the panel controls set most of them per widget):
 *   --jmeks-acc-duration        open / close time (350ms)
 *   --jmeks-acc-item-gap        space below each divider, before the next item (0)
 *   --jmeks-acc-space           space either side of the number and marker
 *   --jmeks-acc-marker-size     square marker size
 *   --jmeks-acc-muted           caption and label colour
 *   --jmeks-acc-divider-width   divider thickness
 *   --jmeks-acc-divider-color   divider colour
 *   --jmeks-acc-image-width     the image's share of the content row (55%)
 *   --jmeks-acc-content-gap     space between text and image, and above the foot row
 *   --jmeks-acc-text-max        widest the text runs (580px)
 *   --jmeks-acc-image-height    every image's height, cropped to fit (720 / 350px)
 */

.elementor-widget-jmeks_accordion {
	width: 100%;
}

/* The gap sits between items, below each divider, not inside the header. */
.jmeks-acc {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	row-gap: var( --jmeks-acc-item-gap, 0px );
}

.jmeks-acc__item {
	display: grid;
	grid-template-columns: auto auto minmax( 0, 1fr ) auto;
}

.jmeks-acc--divider .jmeks-acc__item {
	border-bottom:
		var( --jmeks-acc-divider-width, 1px )
		solid
		var( --jmeks-acc-divider-color, color-mix( in srgb, currentColor 20%, transparent ) );
}

.jmeks-acc__heading,
.jmeks-acc__trigger,
.jmeks-acc__panel,
.jmeks-acc__clip,
.jmeks-acc__body {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: subgrid;
}

.jmeks-acc__heading {
	margin: 0;
}

/*
 * The header is a real button, for the keyboard and screen readers. Hello
 * Elementor styles every button pink with padding and a border, so all of that
 * is taken back here; two classes, and :hover / :focus too, outrank Hello's
 * `button:hover`. It takes the heading's type, which the Title typography
 * control then overrides.
 */
.jmeks-acc .jmeks-acc__trigger,
.jmeks-acc .jmeks-acc__trigger:hover,
.jmeks-acc .jmeks-acc__trigger:focus {
	width: 100%;
	margin: 0;
	padding-inline: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-align: start;
	white-space: normal;
	cursor: pointer;
}

.jmeks-acc .jmeks-acc__trigger {
	align-items: baseline;
	padding-block: 20px;
	color: var( --e-global-color-primary, currentColor );
	font-size: 28px;
	font-weight: 400;
}

.jmeks-acc__end-marker {
	color: var( --e-global-color-primary, currentColor );
}

.jmeks-acc .jmeks-acc__trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.jmeks-acc__number,
.jmeks-acc__marker,
.jmeks-acc__label,
.jmeks-acc__end-marker,
.jmeks-acc .jmeks-acc__end-label {
	display: none;
}

.jmeks-acc--numbers .jmeks-acc__number {
	display: block;
	grid-column: 1;
	margin-inline-end: var( --jmeks-acc-space, 20px );
	font-variant-numeric: tabular-nums;
}

/*
 * Square marker, placed on the middle of the title's first line rather than
 * centred in the row, so it stays put when the title wraps or a caption sits
 * under it.
 */
.jmeks-acc--marker .jmeks-acc__marker {
	display: block;
	grid-column: 2;
	align-self: start;
	width: var( --jmeks-acc-marker-size, 10px );
	height: var( --jmeks-acc-marker-size, 10px );
	margin-inline-end: var( --jmeks-acc-space, 20px );
	margin-block-start: calc( ( 1lh - var( --jmeks-acc-marker-size, 10px ) ) / 2 );
	background: currentColor;
}

.jmeks-acc__titles {
	grid-column: 3;
	display: flex;
	flex-direction: row;
	align-items: baseline;
	column-gap: 0.75em;
	row-gap: 0.25em;
	min-width: 0;
}

.jmeks-acc__title {
	text-wrap: balance;
}

.jmeks-acc__caption {
	color: var( --jmeks-acc-muted, color-mix( in srgb, currentColor 55%, transparent ) );
	font-size: 0.6em;
	font-weight: 400;
	line-height: 1.2;
}

/* Expand / collapse. Shown on hover and while open; always on touch screens. */
.jmeks-acc--label .jmeks-acc__label {
	display: block;
	grid-column: 4;
	margin-inline-start: var( --jmeks-acc-space, 20px );
	color: var( --jmeks-acc-muted, color-mix( in srgb, currentColor 55%, transparent ) );
	font-size: 0.75rem;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 150ms ease;
}

.jmeks-acc__label::before {
	content: attr( data-expand );
}

.jmeks-acc__item.is-open .jmeks-acc__label::before {
	content: attr( data-collapse );
}

.jmeks-acc__trigger:hover .jmeks-acc__label,
.jmeks-acc__trigger:focus-visible .jmeks-acc__label,
.jmeks-acc__item.is-open .jmeks-acc__label {
	opacity: 1;
}

/*
 * +/- (phones only; see the phone block). Two bars; the upright one folds flat
 * when the item opens.
 */
.jmeks-acc__icon {
	display: none;
	position: relative;
	width: var( --jmeks-acc-icon-size, 12px );
	height: var( --jmeks-acc-icon-size, 12px );
	color: var( --jmeks-acc-icon-color, currentColor );
}

.jmeks-acc__icon::before,
.jmeks-acc__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: var( --jmeks-acc-icon-thickness, 1px );
	background: currentColor;
	transform: translateY( -50% );
}

.jmeks-acc__icon::after {
	transform: translateY( -50% ) rotate( 90deg );
	transition: transform var( --jmeks-acc-duration, 350ms ) ease;
}

.jmeks-acc__item.is-open .jmeks-acc__icon::after {
	transform: translateY( -50% ) rotate( 90deg ) scaleX( 0 );
}

@media ( hover: none ) {
	.jmeks-acc--label .jmeks-acc__label {
		opacity: 1;
	}
}

/* The panel: closed is a zero-height row, open is the content's own height. */
.jmeks-acc__panel {
	grid-template-rows: 0fr;
	transition: grid-template-rows var( --jmeks-acc-duration, 350ms ) cubic-bezier( 0.4, 0, 0.2, 1 );
}

.jmeks-acc__item.is-open .jmeks-acc__panel {
	grid-template-rows: 1fr;
}

.jmeks-acc__clip {
	min-height: 0;
	overflow: hidden;
}

.jmeks-acc__body {
	padding-block: 10px 30px;
	/* Between the content and the foot row (moved marker, mobile collapse). */
	row-gap: var( --jmeks-acc-content-gap, 40px );
}

/* Text beside the image, under the title; the image to the right. */
.jmeks-acc__content {
	grid-column: 3 / -1;
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) var( --jmeks-acc-image-width, 55% );
	gap: var( --jmeks-acc-content-gap, 40px );
	align-items: start;
}

.jmeks-acc__content--text-only {
	grid-template-columns: minmax( 0, 1fr );
}

.jmeks-acc__text {
	max-width: var( --jmeks-acc-text-max, 580px );
}

.jmeks-acc__text > :first-child {
	margin-top: 0;
}

.jmeks-acc__text > :last-child {
	margin-bottom: 0;
}

/*
 * Every image is the same height, cropped to fill, whatever shape was
 * uploaded: 720px, 350px on phones (the Image height control).
 */
.jmeks-acc__media {
	position: relative;
	height: var( --jmeks-acc-image-height, 720px );
}

.jmeks-acc .jmeks-acc__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
}

/*
 * The marker moves to the foot of an open item: it hides in the header, which
 * keeps its space so the title does not shift, and appears at the bottom of
 * the content in the same column, so it lines up without measuring.
 */
.jmeks-acc--marker-bottom .jmeks-acc__item.is-open .jmeks-acc__marker {
	visibility: hidden;
}

.jmeks-acc--marker-bottom .jmeks-acc__end-marker {
	display: block;
	grid-row: 2;
	grid-column: 2;
	align-self: center;
	width: var( --jmeks-acc-marker-size, 10px );
	height: var( --jmeks-acc-marker-size, 10px );
	background: currentColor;
}

/*
 * Phones: one column, with the image above the text. The collapse control
 * moves from the header to the foot of the open item, on the right, level
 * with the moved marker, so it's under the thumb after reading. The header
 * label keeps its space so the title doesn't shift.
 */
@media ( max-width: 767px ) {
	.jmeks-acc {
		--jmeks-acc-image-height: 350px;
		--jmeks-acc-marker-size: 6px;
	}

	.jmeks-acc .jmeks-acc__trigger {
		font-size: 16px;
	}

	/* Full width, lined up with the number rather than the title. */
	.jmeks-acc__content {
		grid-column: 1 / -1;
		grid-template-columns: minmax( 0, 1fr );
	}

	.jmeks-acc__media {
		order: -1;
	}

	.jmeks-acc--label .jmeks-acc__item.is-open .jmeks-acc__label {
		visibility: hidden;
	}

	/*
	 * +/- instead of the Expand / Collapse words, in the same column and on the
	 * middle of the title's first line. The Collapse link at the foot stays.
	 */
	.jmeks-acc.jmeks-acc--icon .jmeks-acc__label {
		display: none;
	}

	.jmeks-acc--icon .jmeks-acc__icon {
		display: block;
		grid-column: 4;
		align-self: start;
		margin-block-start: calc( ( 1lh - var( --jmeks-acc-icon-size, 12px ) ) / 2 );
		margin-inline-start: var( --jmeks-acc-space, 20px );
	}

	.jmeks-acc--label .jmeks-acc__item.is-open .jmeks-acc__end-label,
	.jmeks-acc--label .jmeks-acc__item.is-open .jmeks-acc__end-label:hover,
	.jmeks-acc--label .jmeks-acc__item.is-open .jmeks-acc__end-label:focus {
		display: block;
		grid-row: 2;
		grid-column: 3 / -1;
		justify-self: end;
		align-self: center;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: var( --jmeks-acc-muted, color-mix( in srgb, currentColor 55%, transparent ) );
		font: inherit;
		font-size: 0.75rem;
		line-height: 1.2;
		cursor: pointer;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.jmeks-acc__panel,
	.jmeks-acc--label .jmeks-acc__label,
	.jmeks-acc__icon::after {
		transition: none;
	}
}