/*
 * The four footer groups.
 *
 * Brief: four desktop groups that become the plus-sign accordion on mobile, 12-13px text in the
 * grey with headings and linked labels in ink, and no hiding underwriting information in microtype.
 *
 * They are <details open>, so the links are present before any script runs. On desktop the summary
 * is inert and the plus is hidden - there is nothing to collapse when there is room for everything.
 */

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

.akem-fnav__inner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--akem-space-5) var(--akem-space-4);
	max-width: var(--theme-normal-container-max-width);
	margin-inline: auto;
	padding-block: var(--akem-space-5);
	padding-inline: var(--akem-space-3);
}

.akem-fnav__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--akem-space-2);
	list-style: none;
	cursor: pointer;
	padding-block: 14px;
}

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

/* Column headings sit in the label weight, in caps, small. The reference does the same and it is
   what keeps four columns of links from reading as one long list. */
.akem-fnav__title {
	font-size: var(--akem-size-micro);
	font-weight: var(--akem-weight-label);
	letter-spacing: var(--akem-tracking-micro);
	text-transform: uppercase;
	color: var(--akem-ink-strong);
}

.akem-fnav__plus {
	display: block;
	position: relative;
	transition: transform 180ms ease;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

.akem-fnav__plus::before,
.akem-fnav__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-fnav__plus::after {
	transform: rotate(90deg);
}

/* The same turn the panel close control makes, used across the site now. */
.akem-fnav__summary:hover .akem-fnav__plus {
	transform: rotate(90deg);
}

.akem-fnav__summary:hover .akem-fnav__plus::before,
.akem-fnav__summary:hover .akem-fnav__plus::after {
	background: var(--akem-blue);
}

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

.akem-fnav__group[open] .akem-fnav__plus::after {
	transform: rotate(180deg);
}

.akem-fnav__list {
	margin: var(--akem-space-3) 0 0;
	padding: 0;
	list-style: none;
}

.akem-fnav__list li {
	margin-block-end: var(--akem-space-2);
}

/* 15px of text is not a tap target. The padding is on the link rather than the item so the whole
   row answers to a finger, and it costs nothing on desktop where the columns are already open. */
.akem-fnav__list a {
	display: inline-block;
	padding-block: 6px;
}

.akem-fnav__list a {
	font-size: var(--akem-size-small);
	line-height: 20px;
	color: var(--akem-grey);
	text-decoration: none;
}

.akem-fnav__list a:hover {
	color: var(--akem-ink);
}

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

/* Desktop: nothing to fold. The groups are rendered closed so a phone gets them closed without a
   script, and here the list is simply shown again - there is room for four short columns, and a
   footer whose links must be opened one column at a time is a footer nobody uses. */
@media (min-width: 783px) {
	/* Two hiding mechanisms to undo, because browsers disagree on which one they use. Older ones
	   hide the children themselves; Chrome 151 and friends wrap them in ::details-content and skip
	   that box, which no rule on the child can reach - the column showed its heading and nothing
	   else until this pseudo-element was addressed directly. */
	.akem-fnav__group > .akem-fnav__list {
		display: block;
	}

	.akem-fnav__group::details-content {
		content-visibility: visible;
		block-size: auto;
	}

	/* Two dozen compounds down a single column made the footer taller than the catalogue above it.
	   The group takes a double cell and splits into three, so the four groups still end level. */
	.akem-fnav__inner {
		grid-template-columns: 2fr 1fr 1fr 1fr;
	}

	.akem-fnav__group--wide .akem-fnav__list {
		columns: 3;
		column-gap: var(--akem-space-4);
	}

	.akem-fnav__group--wide .akem-fnav__list li {
		break-inside: avoid;
	}

	.akem-fnav__summary {
		cursor: default;
		pointer-events: none;
	}

	.akem-fnav__plus {
		display: none;
	}
}

/* Phone: one column, and the groups fold. */
@media (max-width: 782px) {
	.akem-fnav__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

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

	.akem-fnav__summary {
		padding-block: 18px;
	}

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

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