/* =========================================================================
   HEC Nested Accordion  (1.2.2)
   Everything is driven by the variables in the first block.

   Two things to know before editing:

   1. Sizes are in px on purpose. The theme scales its root font size with the
      window, so rem values grew on large screens (a "48px" title rendered at
      58px). Each clamp() reads as
      clamp( smallest on phones, fluid step, size on desktop ).

   2. Every selector starts with .hec-accordion[data-hec-scope], and the type
      sizes carry !important. That is deliberate: it makes this file win over
      an older copy of these styles left in a theme stylesheet or Custom CSS
      box, and over theme rules for headings, lists and buttons. If you keep a
      copy of this file in the theme, replace the whole copy; don't mix
      versions.
   ========================================================================= */

.hec-accordion[data-hec-scope] {
	--hec-fg:            #ffffff;
	--hec-accent:        #2fa8e8;
	--hec-muted:         rgba( 255, 255, 255, 0.68 );
	--hec-rule:          rgba( 255, 255, 255, 0.9 );
	--hec-card-bg:       #2c2c2c;
	--hec-card-radius:   18px;
	--hec-card-pad:      clamp( 20px, 2.8vw, 40px );

	/* Type ------------------------------------------------------------- */
	--hec-group-size:    clamp( 30px, 3.8vw, 48px );   /* "6 Axis Machinery": 48px on desktop */
	--hec-item-size:     clamp( 20px, 2.4vw, 30px );   /* machine name: 30px on desktop */
	--hec-body-size:     clamp( 17px, 1.9vw, 24px );   /* spec headings, bullets and copy: 24px on desktop */
	--hec-body-leading:  1.3;
	--hec-count-size:    clamp( 14px, 1.4vw, 18px );   /* "3 machines" beside a category */

	/* Spacing ---------------------------------------------------------- */
	--hec-row-pad:       clamp( 14px, 1.4vw, 20px );   /* above and below a category title */
	--hec-item-pad:      clamp( 8px, 0.85vw, 12px );   /* above and below a closed machine name */
	--hec-head-gap:      0.85em;                       /* above a spec heading */
	--hec-head-gap-below: 0.35em;                      /* between a spec heading and its copy */
	--hec-line-gap:      0.15em;                       /* between list items / lines */
	--hec-layout-gap:    clamp( 24px, 2.8vw, 40px );   /* between the copy and the image */
	--hec-icon-gap:      clamp( 14px, 1.4vw, 20px );
	--hec-media-gap:     16px;
	--hec-media-max:     380px;                        /* tallest a single machine image can be */

	--hec-speed:         0.4s;
	--hec-ease:          cubic-bezier( 0.4, 0, 0.2, 1 );

	color: var( --hec-fg );

	/* The script keeps the clicked title in place itself. */
	overflow-anchor: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.hec-accordion[data-hec-scope] {
		--hec-speed: 0s;
	}
}

/* -------------------------------------------------------------------------
   Panels
   ---------------------------------------------------------------------- */

.hec-accordion[data-hec-scope] .hec-acc__panel {
	height: 0;
	overflow: hidden;
	transition: height var( --hec-speed ) var( --hec-ease );
}

.hec-accordion[data-hec-scope] .hec-acc__panel[hidden] {
	display: none;
}

.hec-accordion[data-hec-scope] .hec-acc__panel--group > .hec-acc__panel-inner {
	padding: var( --hec-row-pad ) 0 calc( var( --hec-row-pad ) + 8px );
}

/* -------------------------------------------------------------------------
   Triggers
   Closed, the button hugs its own text so the underline stops with the title.
   Open, it stretches full width and pushes the arrow out to the right.
   ---------------------------------------------------------------------- */

.hec-accordion[data-hec-scope] .hec-acc__head {
	margin: 0;
	padding: 0;
	font-size: inherit !important;
	font-weight: inherit;
	line-height: inherit !important;
}

.hec-accordion[data-hec-scope] .hec-acc__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --hec-icon-gap );
	width: max-content;
	max-width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	font: inherit;
	text-align: left;
	text-transform: none;
	cursor: pointer;
	appearance: none;
}

.hec-accordion[data-hec-scope] .hec-acc__trigger[aria-expanded="true"] {
	width: 100%;
}

.hec-accordion[data-hec-scope] .hec-acc__trigger:focus-visible {
	outline: 2px solid var( --hec-accent );
	outline-offset: 6px;
}

.hec-accordion[data-hec-scope] .hec-acc__label {
	min-width: 0;
	font-size: inherit !important;
	line-height: inherit !important;
}

/* "3 machines" beside a category title. Hidden by count="no" on the wrapper. */
.hec-accordion[data-hec-scope] .hec-acc__count {
	margin-left: 0.5em;
	color: var( --hec-muted );
	font-size: var( --hec-count-size ) !important;
	font-weight: 400;
	letter-spacing: 0;
	white-space: nowrap;
}

.hec-accordion--no-count[data-hec-scope] .hec-acc__count {
	display: none;
}

/* Level 1 ---------------------------------------------------------------
   Equal space above and below the title, so the gap between one category's
   rule and the next title matches the gap under the arrow.
   ---------------------------------------------------------------------- */

.hec-accordion[data-hec-scope] .hec-acc__group {
	margin: 0;
}

.hec-accordion[data-hec-scope] .hec-acc__trigger--group {
	padding: var( --hec-row-pad ) 0;
	border-bottom: 1px solid var( --hec-rule );
	font-size: var( --hec-group-size ) !important;
	font-weight: 300;
	line-height: 1.15 !important;
	letter-spacing: -0.01em;
}

/* Level 2 --------------------------------------------------------------- */

.hec-accordion[data-hec-scope] .hec-acc__item {
	margin: 0;
}

.hec-accordion[data-hec-scope] .hec-acc__trigger--item {
	color: var( --hec-accent );
	font-size: var( --hec-item-size ) !important;
	font-weight: 700;
	line-height: 1.2 !important;
}

/* Removed in 1.2.0. Kept hidden in case a cached page still prints it. */
.hec-accordion[data-hec-scope] .hec-acc__rule {
	display: none;
}

/* When open, the whole machine becomes the dark card from the design. */
.hec-accordion[data-hec-scope] .hec-acc__card {
	margin: 0;
	padding: var( --hec-item-pad ) 0;
	background: transparent;
	border-radius: var( --hec-card-radius );
	transition: background-color var( --hec-speed ) var( --hec-ease ),
		padding var( --hec-speed ) var( --hec-ease ),
		margin var( --hec-speed ) var( --hec-ease );
}

.hec-accordion[data-hec-scope] .hec-acc__item.is-open > .hec-acc__card {
	margin: 8px 0;
	padding: var( --hec-card-pad );
	background: var( --hec-card-bg );
}

/* -------------------------------------------------------------------------
   Icons
   Sized from the title they sit beside, so the arrow matches its height.
   ---------------------------------------------------------------------- */

.hec-accordion[data-hec-scope] .hec-acc__icon {
	flex: 0 0 auto;
	display: inline-flex;
	width: 0.84em;
	height: 0.84em;
	transition: transform var( --hec-speed ) var( --hec-ease );
}

.hec-accordion[data-hec-scope] .hec-acc__trigger--item .hec-acc__icon {
	width: 1em;
	height: 1em;
}

.hec-accordion[data-hec-scope] .hec-acc__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.hec-accordion[data-hec-scope] .hec-acc__icon circle {
	transition: fill-opacity 0.2s ease;
	fill: currentColor;
	fill-opacity: 0;
}

.hec-accordion[data-hec-scope] .hec-acc__trigger:hover .hec-acc__icon circle {
	fill-opacity: 0.14;
}

.hec-accordion[data-hec-scope] .hec-acc__trigger[aria-expanded="true"] .hec-acc__icon {
	transform: rotate( 180deg );
}

/* -------------------------------------------------------------------------
   Machine detail layout
   ---------------------------------------------------------------------- */

.hec-accordion[data-hec-scope] .hec-acc__layout {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.15fr );
	gap: var( --hec-layout-gap );
	align-items: center;
	padding-top: var( --hec-row-pad );
}

.hec-accordion[data-hec-scope] .hec-acc__item--no-media .hec-acc__layout {
	grid-template-columns: minmax( 0, 1fr );
}

/* Spec headings, bullets and copy all share one size. */
.hec-accordion[data-hec-scope] .hec-acc__body {
	max-width: 62ch;
	font-size: var( --hec-body-size ) !important;
	line-height: var( --hec-body-leading ) !important;
}

/* Nothing inside the copy sets its own size, whether from the theme or from
   formatting pasted into the editor. Superscripts are left alone. */
.hec-accordion[data-hec-scope] .hec-acc__body *:not( sup ):not( sub ) {
	font-size: inherit !important;
	line-height: inherit !important;
}

.hec-accordion[data-hec-scope] .hec-acc__body > *:first-child {
	margin-top: 0;
}

.hec-accordion[data-hec-scope] .hec-acc__body > *:last-child {
	margin-bottom: 0;
}

/* Spec headings are the same size as the copy; weight and colour set them apart. */
.hec-accordion[data-hec-scope] .hec-acc__body h2,
.hec-accordion[data-hec-scope] .hec-acc__body h3,
.hec-accordion[data-hec-scope] .hec-acc__body h4,
.hec-accordion[data-hec-scope] .hec-acc__body h5,
.hec-accordion[data-hec-scope] .hec-acc__body h6 {
	margin: var( --hec-head-gap ) 0 var( --hec-head-gap-below );
	padding: 0;
	color: var( --hec-accent );
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: none;
}

.hec-accordion[data-hec-scope] .hec-acc__body ul,
.hec-accordion[data-hec-scope] .hec-acc__body ol {
	margin: 0;
	padding-left: 1.1em;
}

.hec-accordion[data-hec-scope] .hec-acc__body ul {
	list-style: disc;
}

.hec-accordion[data-hec-scope] .hec-acc__body li {
	margin: 0 0 var( --hec-line-gap );
	padding: 0;
}

.hec-accordion[data-hec-scope] .hec-acc__body li:last-child {
	margin-bottom: 0;
}

.hec-accordion[data-hec-scope] .hec-acc__body li::marker {
	color: var( --hec-accent );
}

.hec-accordion[data-hec-scope] .hec-acc__body p {
	margin: 0 0 var( --hec-line-gap );
	padding: 0;
}

.hec-accordion[data-hec-scope] .hec-acc__media {
	align-self: center;
	display: grid;
	gap: var( --hec-media-gap );
	grid-template-columns: minmax( 0, 1fr );
}

.hec-accordion[data-hec-scope] .hec-acc__media[data-count="2"],
.hec-accordion[data-hec-scope] .hec-acc__media[data-count="4"] {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.hec-accordion[data-hec-scope] .hec-acc__media[data-count="3"] {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}

/* Give the media column more room when it holds more than one image. */
.hec-accordion[data-hec-scope] .hec-acc__item--multi-media .hec-acc__layout {
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.6fr );
}

/* The image never makes the card taller than it needs to be. */
.hec-accordion[data-hec-scope] .hec-acc__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: var( --hec-media-max );
	object-fit: contain;
	border-radius: 8px;
}

/* -------------------------------------------------------------------------
   Type sizes, locked (1.2.2)

   The same sizes as above, repeated at ID-level specificity. :is() takes the
   specificity of its strongest argument, so the unused #hec-accordion-lock
   lifts these rules above any class-based rule elsewhere on the site, even
   one marked !important (for example a typography utility class, or an
   older copy of these styles in a Custom CSS box). Nothing on the page needs
   that ID; the accordion is still matched by its class.
   ---------------------------------------------------------------------- */

:is( #hec-accordion-lock, .hec-accordion )[data-hec-scope] .hec-acc__trigger--group,
:is( #hec-accordion-lock, .hec-accordion )[data-hec-scope] .hec-acc__trigger--group .hec-acc__label {
	font-size: var( --hec-group-size ) !important;
	line-height: 1.15 !important;
}

:is( #hec-accordion-lock, .hec-accordion )[data-hec-scope] .hec-acc__trigger--item,
:is( #hec-accordion-lock, .hec-accordion )[data-hec-scope] .hec-acc__trigger--item .hec-acc__label {
	font-size: var( --hec-item-size ) !important;
	line-height: 1.2 !important;
}

:is( #hec-accordion-lock, .hec-accordion )[data-hec-scope] .hec-acc__count {
	font-size: var( --hec-count-size ) !important;
}

/* The arrows are sized in em from their title, so they must not pick up
   a size meant for spans elsewhere on the site. */
:is( #hec-accordion-lock, .hec-accordion )[data-hec-scope] .hec-acc__icon {
	font-size: inherit !important;
	line-height: 1 !important;
}

/* Spec headings, bullets and copy: one size, set on the body and on
   every element inside it directly rather than inherited. */
:is( #hec-accordion-lock, .hec-accordion )[data-hec-scope] .hec-acc__body,
:is( #hec-accordion-lock, .hec-accordion )[data-hec-scope] .hec-acc__body *:not( sup ):not( sub ) {
	font-size: var( --hec-body-size ) !important;
	line-height: var( --hec-body-leading ) !important;
}

/* -------------------------------------------------------------------------
   Mobile
   ---------------------------------------------------------------------- */

@media ( max-width: 900px ) {
	.hec-accordion[data-hec-scope] {
		--hec-media-max: 300px;
	}

	.hec-accordion[data-hec-scope] .hec-acc__layout,
	.hec-accordion[data-hec-scope] .hec-acc__item--multi-media .hec-acc__layout {
		grid-template-columns: minmax( 0, 1fr );
	}

	.hec-accordion[data-hec-scope] .hec-acc__media[data-count="3"] {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	/* Titles wrap on narrow screens, so keep the category rule full width. */
	.hec-accordion[data-hec-scope] .hec-acc__trigger {
		width: 100%;
	}
}