/* =========================================================================
   WXPN site footer

   Structure (desktop):
     brand-row  (logo)   |   body  (menus | actions | copyright)

   Structure (mobile):
     brand-row  (logo + chevron toggle)
     body                 — collapsed by default, chevron expands
       └ menus stacked + actions + copyright

   The chevron toggle is wired in assets/js/footer.js by flipping the
   [data-wxpn-footer-collapsed] attribute on the <footer>.
   ========================================================================= */

/* Remove Astra's built-in "back to top" scroll button — prod has none. Hidden
   with !important so Astra's scroll JS can't reveal it. */
#ast-scroll-top,
.ast-scroll-top {
	display: none !important;
}

.wxpn-site-footer {
	background: #000;
	color: #fff;
	padding: 56px 0 28px;
}

.wxpn-site-footer__wrap {
	width: min(100%, 1200px);
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 128px minmax(0, 1fr);
	gap: 30px 36px;
	align-items: start;
}

/* -------------------------------------------------------------------------
   Brand row (logo + mobile-only chevron toggle)
   ------------------------------------------------------------------------- */

.wxpn-site-footer__brand-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.wxpn-site-footer__brand {
	display: inline-flex;
	align-items: center;
	color: #fff;
	text-decoration: none;
	font-size: 3.1rem;
	font-weight: 800;
	letter-spacing: -0.08em;
	line-height: 0.9;
	text-transform: lowercase;
}

.wxpn-site-footer__toggle {
	display: none;                       /* shown only at mobile widths */
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1.5px solid #fff;
	border-radius: 999px;
	background: transparent;
	color: #fff;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.wxpn-site-footer__toggle-icon {
	display: block;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	/* Collapsed (default): chevron points UP — the footer body will appear
	   above the chevron's row when the user taps. Expanded: points DOWN to
	   indicate "tap to dismiss this content". */
	transform: rotate(-135deg);
	transition: transform 0.2s ease;
}

.wxpn-site-footer[data-wxpn-footer-collapsed="false"] .wxpn-site-footer__toggle-icon {
	transform: rotate(45deg);
}

/* -------------------------------------------------------------------------
   Body — menus + actions + copyright
   ------------------------------------------------------------------------- */

.wxpn-site-footer__body {
	display: grid;
	/* Menus on the left, the donate/social actions as their own right-hand
	   column (matching prod, where the links take ~75% and the actions sit
	   beside them). Copyright spans the full width beneath both. */
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"menus actions"
		"copyright copyright";
	column-gap: 48px;
	row-gap: 30px;
	align-items: start;
}

.wxpn-site-footer__menus {
	grid-area: menus;
}

.wxpn-site-footer__copyright {
	grid-area: copyright;
}

.wxpn-site-footer__menus {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px 22px;
}

.wxpn-site-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0 0 0 12px;
	border-left: 1px solid rgba(255, 255, 255, 0.18);
	/* Kill Astra's tall global line-height on the list items — it was inflating
	   the per-item vertical step to ~40px (prod is ~32px). */
	line-height: 1.3;
}

.wxpn-site-footer__menu li + li {
	margin-top: 12px;
}

.wxpn-site-footer__menu a {
	position: relative;
	color: #fff;
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
}

/* Hover underline: an always-orange bar that fades in (never flickers through
   grey the way an animated text-decoration-color did). */
.wxpn-site-footer__menu a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 2px;
	background: #ef6a25;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.wxpn-site-footer__menu a:hover::after,
.wxpn-site-footer__menu a:focus::after {
	opacity: 1;
}

/* -------------------------------------------------------------------------
   Actions (donate button + social icons)
   ------------------------------------------------------------------------- */

.wxpn-site-footer__actions {
	grid-area: actions;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
}

.wxpn-site-footer__donate {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-width: 140px;
	padding: 10px 14px;
	background: #b35613;
	color: #fff;
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 700;
	transition: background-color 0.18s ease;
}

.wxpn-site-footer__donate:hover,
.wxpn-site-footer__donate:focus {
	background: #ef6a25;
	color: #fff;
}

.wxpn-site-footer__donate-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
}

.wxpn-site-footer__donate-icon svg {
	width: 100%;
	height: 100%;
}

.wxpn-site-footer__socials {
	display: flex;
	align-items: center;
	gap: 16px;
}

.wxpn-site-footer__socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: #fff;
	text-decoration: none;
	transition: color 0.18s ease, transform 0.18s ease;
}

.wxpn-site-footer__socials a:hover,
.wxpn-site-footer__socials a:focus {
	color: #ef6a25;
	transform: scale(1.1);
}

.wxpn-site-footer__socials svg {
	width: 100%;
	height: 100%;
}

/* -------------------------------------------------------------------------
   Copyright
   ------------------------------------------------------------------------- */

.wxpn-site-footer__copyright {
	max-width: 760px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.72rem;
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
   Tablet (<1024px): drop the logo column, keep 2 menu columns
   ------------------------------------------------------------------------- */

@media (max-width: 1023px) /* --wxpn-bp-lg */ {
	.wxpn-site-footer__wrap {
		grid-template-columns: 1fr;
	}

	.wxpn-site-footer__menus {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
   Mobile (<768px): single column + collapse toggle
   ------------------------------------------------------------------------- */

@media (max-width: 767px) /* --wxpn-bp-md */ {
	.wxpn-site-footer {
		padding: 28px 0 20px;
	}

	.wxpn-site-footer__wrap {
		padding: 0 18px;
		gap: 18px;
	}

	.wxpn-site-footer__brand {
		font-size: 2.5rem;
	}

	/* Stack menus, then actions, then copyright in a single column. */
	.wxpn-site-footer__body {
		grid-template-columns: 1fr;
		grid-template-areas:
			"menus"
			"actions"
			"copyright";
		row-gap: 24px;
	}

	.wxpn-site-footer__menus {
		grid-template-columns: 1fr;
	}

	.wxpn-site-footer__menu {
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.14);
		padding-top: 14px;
	}

	/* Match prod: the footer is a single static block — no mobile collapse, so
	   the expanded/collapsed states can't mismatch. Hide the chevron toggle and
	   always show the body even if footer.js still flips the collapsed attr. */
	.wxpn-site-footer__toggle {
		display: none;
	}
}