/**
 * The collapse both footers share, and Footer 01's accordion appearance.
 * @package Atheria_Core
 * @since   1.0.0
 */

/* ─────────────────────────────────────────────────────────────────────────────
   1. THE SHARED COLLAPSE

   A grid row rather than a capped height, so a column with more links than the
   design anticipated is not truncated when it opens. The three properties are
   the whole contract: a footer decides when to set them, and always inside its
   own breakpoint, so a closed column above that breakpoint is a plain visible
   list rather than a list that happens to be open.
   ───────────────────────────────────────────────────────────────────────────── */
.ath-accordion__panel {
	display: grid;
	grid-template-rows: var(--ath-accordion-rows, 1fr);
	overflow: hidden;
	opacity: var(--ath-accordion-opacity, 1);
	padding-bottom: var(--ath-accordion-pad, 0);
	transition: grid-template-rows 0.4s var(--ath-ease-out),
		opacity 0.3s var(--ath-ease-out),
		padding-bottom 0.4s var(--ath-ease-out);
}

/* A grid item's automatic minimum size, or an Elementor container's own, would hold the row open at 0fr whichever stylesheet loads last. */
.ath-accordion__panel > *,
.ath-accordion__panel > .e-con {
	min-height: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. FOOTER 01

   The heading stays the element the template renders; the script puts a button
   inside it, which is what carries the expanded state. Above the breakpoint the
   button controls nothing and the rules below do not apply, so the heading
   reads as a heading and the list as a list.
   ───────────────────────────────────────────────────────────────────────────── */
.ath-footer__nav-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: left;
	text-transform: inherit;
	cursor: var(--ath-footer-toggle-cursor, default);
}

.ath-footer__nav-toggle:focus-visible {
	outline: 2px solid var(--ath-focus-ring-inverse);
	outline-offset: 4px;
	border-radius: 2px;
}

.ath-footer__nav-toggle-icon {
	display: var(--ath-footer-toggle-icon-display, none);
	position: relative;
	flex: none;
	width: 14px;
	height: 14px;
	opacity: 0.9;
}

.ath-footer__nav-toggle-icon::before,
.ath-footer__nav-toggle-icon::after {
	content: "";
	position: absolute;
	background: currentColor;
	transition: transform 0.3s var(--ath-ease-out), opacity 0.3s var(--ath-ease-out);
}

.ath-footer__nav-toggle-icon::before {
	left: 0;
	top: 6px;
	width: 14px;
	height: 1.5px;
}

.ath-footer__nav-toggle-icon::after {
	left: 6px;
	top: 0;
	width: 1.5px;
	height: 14px;
}

.ath-footer__nav-group[data-open="true"] .ath-footer__nav-toggle-icon::after {
	transform: scaleY(0);
	opacity: 0;
}

/* Above the breakpoint nothing collapses, so the list is not clipped and a label longer than its column stays whole. */
@media (min-width: 768px) {
	.ath-footer__nav-group .ath-accordion__panel {
		overflow: visible;
	}
}

/* Elementor's own mobile breakpoint, so a responsive setting on any of these
   containers cannot disagree with this across a seven-pixel band. Footer 02
   carries its breakpoint as a per-instance control because it has a widget to
   own one; Footer 01's markup is template-authored and has nowhere to put it. */
@media (max-width: 767px) {
	.ath-footer__nav-group {
		--ath-footer-toggle-cursor: pointer;
		--ath-footer-toggle-icon-display: block;
		border-top: 1px solid color-mix(in srgb, var(--ath-border-inverse) 20%, transparent);
	}

	.ath-footer__nav-group .ath-footer__nav-title {
		margin: 0;
		padding: 20px 0;
	}

	.ath-footer__nav-group[data-open="false"] {
		--ath-accordion-rows: 0fr;
		--ath-accordion-opacity: 0;
	}

	/* A zero row still cannot shrink the list's own padding, which is Elementor's
	   and would leave the column twenty pixels tall when closed. Four classes,
	   because Elementor writes that padding at three and a tie would be settled
	   by stylesheet order. */
	.ath-footer .ath-footer__nav-group .ath-footer__nav-list {
		transition: padding-block 0.4s var(--ath-ease-out);
	}

	.ath-footer .ath-footer__nav-group[data-open="false"] .ath-footer__nav-list {
		padding-block: 0;
	}

	.ath-footer__nav-group[data-open="true"] {
		--ath-accordion-pad: 24px;
	}
}