/**
 * JMeks Hover Accordion.
 *
 * Rows of a title and a bulleted detail line, with an optional muted note
 * beside it. Two ways to open:
 *   - Desktop (a real pointer, wider than tablet): the row opens while the
 *     pointer is over it. Pure CSS, nothing to click.
 *   - Touch screens, tablets (iPad) and phones: a tap opens it, and a +/- says
 *     so. Up to 1024px (Elementor's tablet breakpoint) is always tap, so the
 *     editor's tablet preview shows the +/- too.
 * Either way, .is-open (set by the script, e.g. from the keyboard) opens it too.
 *
 * Opening animates the panel's grid row from 0fr to 1fr, as the Sector
 * Accordion does, so the browser works out the height. Visibility follows the
 * row: hidden once closed so a screen reader skips closed details, visible the
 * moment it starts opening.
 *
 * Knobs (the panel controls set them per widget):
 *   --jmeks-hacc-duration        open / close time (300ms)
 *   --jmeks-hacc-item-gap        space below each divider, before the next row (0)
 *   --jmeks-hacc-title-color     title, and +/- unless it has its own
 *   --jmeks-hacc-details-color   detail lines, and the bullet unless set
 *   --jmeks-hacc-details-top     space between the title and the details (10px)
 *   --jmeks-hacc-bullet-size / -gap / -color
 *   --jmeks-hacc-note-color / -gap   the muted text after a |
 *   --jmeks-hacc-icon-size / -thickness / -color
 *   --jmeks-hacc-divider-width / -color
 */

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

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

.jmeks-hacc__item {
	position: relative;
	padding-block: 28px;
	border-bottom:
		var( --jmeks-hacc-divider-width, 1px )
		solid
		var( --jmeks-hacc-divider-color, color-mix( in srgb, var( --jmeks-hacc-title-color, var( --e-global-color-primary, #05001c ) ) 25%, transparent ) );
}

.jmeks-hacc .jmeks-hacc__heading {
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}

/*
 * 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;
 * two classes, and :hover / :focus too, outrank Hello's `button:hover`.
 */
.jmeks-hacc .jmeks-hacc__trigger,
.jmeks-hacc .jmeks-hacc__trigger:hover,
.jmeks-hacc .jmeks-hacc__trigger:focus {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var( --jmeks-hacc-title-color, var( --e-global-color-primary, #05001c ) );
	text-align: start;
	white-space: normal;
}

.jmeks-hacc .jmeks-hacc__trigger {
	font-size: 24px;
	font-weight: 400;
	line-height: 1.3;
}

button.jmeks-hacc__trigger {
	cursor: pointer;
}

/* The whole row is the target, not just the words. */
button.jmeks-hacc__trigger::after {
	content: "";
	position: absolute;
	inset: 0;
}

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

/* +/-: two bars; the upright one folds flat when the row opens. */
.jmeks-hacc__icon {
	display: none;
	position: relative;
	flex: none;
	width: var( --jmeks-hacc-icon-size, 14px );
	height: var( --jmeks-hacc-icon-size, 14px );
	color: var( --jmeks-hacc-icon-color, currentColor );
}

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

.jmeks-hacc__icon::after {
	transform: translateY( -50% ) rotate( 90deg );
	transition: transform var( --jmeks-hacc-duration, 300ms ) ease;
}

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

/* The panel: closed is a zero-height row, open is the details' own height. */
.jmeks-hacc__panel {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition:
		grid-template-rows var( --jmeks-hacc-duration, 300ms ) cubic-bezier( 0.4, 0, 0.2, 1 ),
		visibility 0s linear var( --jmeks-hacc-duration, 300ms );
}

.jmeks-hacc__item.is-open .jmeks-hacc__panel {
	grid-template-rows: 1fr;
	visibility: visible;
	transition:
		grid-template-rows var( --jmeks-hacc-duration, 300ms ) cubic-bezier( 0.4, 0, 0.2, 1 ),
		visibility 0s;
}

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

.jmeks-hacc .jmeks-hacc__details {
	position: relative;
	margin: 0;
	padding: var( --jmeks-hacc-details-top, 10px ) 0 0;
	color: var( --jmeks-hacc-details-color, var( --e-global-color-primary, #05001c ) );
	font-size: 16px;
}

/*
 * The square sits in the padding, on the middle of the first line, so it stays
 * put when the detail wraps.
 */
.jmeks-hacc--bullets .jmeks-hacc__details {
	padding-inline-start: calc( var( --jmeks-hacc-bullet-size, 10px ) + var( --jmeks-hacc-bullet-gap, 10px ) );
}

.jmeks-hacc--bullets .jmeks-hacc__details::before {
	content: "";
	position: absolute;
	top: calc( var( --jmeks-hacc-details-top, 10px ) + ( 1lh - var( --jmeks-hacc-bullet-size, 10px ) ) / 2 );
	left: 0;
	width: var( --jmeks-hacc-bullet-size, 10px );
	height: var( --jmeks-hacc-bullet-size, 10px );
	background: var( --jmeks-hacc-bullet-color, currentColor );
}

.jmeks-hacc__note {
	margin-inline-start: var( --jmeks-hacc-note-gap, 10px );
	color: var( --jmeks-hacc-note-color, color-mix( in srgb, currentColor 55%, transparent ) );
}

/* Desktop: open while the pointer is over the row. */
@media ( hover: hover ) and ( min-width: 1025px ) {
	.jmeks-hacc__item:hover .jmeks-hacc__panel {
		grid-template-rows: 1fr;
		visibility: visible;
		transition:
			grid-template-rows var( --jmeks-hacc-duration, 300ms ) cubic-bezier( 0.4, 0, 0.2, 1 ),
			visibility 0s;
	}
}

/* Touch screens, tablets and phones: rows open with a tap, and the +/- says so. */
@media ( hover: none ), ( max-width: 1024px ) {
	.jmeks-hacc__icon {
		display: block;
	}
}

/* Phone sizes, matching the controls' mobile defaults. */
@media ( max-width: 767px ) {
	.jmeks-hacc .jmeks-hacc__trigger {
		font-size: 18px;
	}

	.jmeks-hacc__item {
		padding-block: 20px;
	}

	.jmeks-hacc .jmeks-hacc__details {
		font-size: 14px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.jmeks-hacc__panel,
	.jmeks-hacc__item.is-open .jmeks-hacc__panel,
	.jmeks-hacc__icon::after {
		transition: none;
	}
}