/*
 * The compound record: expandable sections under the buy panel.
 *
 * The brief: one consistent module, a plus that turns into a close mark, thin rules, labels at
 * 17/24 weight 500 with 18px vertical padding. Built on <details>, so the open and closed states,
 * the keyboard behaviour and the semantics come from the browser.
 */

/* The record sits outside Blocksy's width-constrained wrapper, so it is constrained here with
   Blocksy's own variable and stays in step if that width is changed in the customiser. */
.akem-record {
	max-width: var(--theme-normal-container-max-width);
	margin-block-start: var(--akem-space-6);
	margin-inline: auto;
}

.akem-record__section {
	max-width: var(--akem-measure);
}

.akem-record__section {
	border-block-start: 1px solid var(--akem-line);
}

.akem-record__section:last-child {
	border-block-end: 1px solid var(--akem-line);
}

.akem-record__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--akem-space-3);
	padding-block: 18px;
	cursor: pointer;
	list-style: none;
	color: var(--akem-ink);
}

.akem-record__summary::-webkit-details-marker {
	display: none;
}

.akem-record__summary:focus-visible {
	outline: 3px solid var(--akem-blue-focus);
	outline-offset: 2px;
}

.akem-record__title {
	font-size: 17px;
	line-height: 24px;
	font-weight: 500;
}

/* The plus. Drawn rather than typed so the two strokes can be rotated independently. */
.akem-record__plus {
	position: relative;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

.akem-record__plus::before,
.akem-record__plus::after {
	content: "";
	position: absolute;
	inset-inline-start: 2px;
	inset-block-start: 9px;
	width: 16px;
	height: 1px;
	background: var(--akem-ink);
	transition: transform 180ms ease, background 180ms ease;
}

.akem-record__plus::after {
	transform: rotate(90deg);
}

.akem-record__summary:hover .akem-record__plus::before,
.akem-record__summary:hover .akem-record__plus::after {
	background: var(--akem-blue-focus);
}

/* Open: the upright stroke turns, so the plus reads as a close mark. */
.akem-record__section[open] .akem-record__plus::after {
	transform: rotate(180deg);
}

.akem-record__section[open] .akem-record__plus::before,
.akem-record__section[open] .akem-record__plus::after {
	background: var(--akem-blue-focus);
}

.akem-record__list {
	margin: 0;
	padding-block-end: var(--akem-space-3);
}

.akem-record__row {
	display: flex;
	justify-content: space-between;
	gap: var(--akem-space-3);
	padding-block: var(--akem-space-2);
}

.akem-record__row dt {
	min-width: 0;
	margin: 0;
	font-size: 13px;
	line-height: 18px;
	color: var(--akem-grey);
}

/* A molecular formula is one unbreakable token. On a narrow screen it has to be allowed to break
   rather than push the row past the edge of the page. */
.akem-record__row dd {
	min-width: 0;
	margin: 0;
	font-size: 13px;
	line-height: 18px;
	text-align: right;
	overflow-wrap: anywhere;
	color: var(--akem-ink);
}

.akem-record__row a {
	color: var(--akem-blue-focus);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (prefers-reduced-motion: reduce) {
	.akem-record__plus::before,
	.akem-record__plus::after {
		transition: none;
	}
}