/*
 * footer.css - site footer component.
 *
 * LAYER 5.
 *
 * PROVENANCE: values extracted from the approved screens
 *   desktop - screens/01-home-desktop.html (AR_Footer)
 *   mobile  - screens/02-home-mobile.html (AR_Footer)
 *
 * Mobile-first. Logical properties throughout.
 *
 * The mobile design shows four collapsed groups with a "+" affordance and no visible links,
 * so the collapse is real: without it the footer links are unreachable on mobile. It is
 * implemented as a progressive enhancement - see assets/js/zahra.js. With JS disabled every
 * group renders open and fully readable.
 */

.zahra-site-footer {
	background: var(--zahra-color-ink);
	color: var(--zahra-color-on-dark);
}

.zahra-site-footer__inner {
	display: flex;
	flex-direction: column;
	padding-block: 22px;
}

/* ===========================================================================
 * Brand block
 * ======================================================================== */

.zahra-footer-brand {
	display: flex;
	flex-direction: column;
}

/*
 * Parent qualification beats WooCommerce's contextual image rule on shop/account surfaces.
 * Physical and logical dimensions are paired so `height: auto` cannot displace the design.
 */
.zahra-footer-brand .zahra-footer-brand__logo {
	height: 30px;
	block-size: 30px;
	width: auto;
	inline-size: auto;
	background: var(--zahra-color-sand);
	padding: 7px 10px;
	align-self: flex-start;
	margin-block-end: 16px;
}

.zahra-footer-brand__text,
.zahra-footer-brand__address,
.zahra-footer-brand .zahra-lang {
	display: none;
}

/* ===========================================================================
 * Link groups
 *
 * Mobile: stacked rows with a hairline divider, collapsed by JS.
 * Desktop: static columns.
 * ======================================================================== */

.zahra-footer-groups {
	display: flex;
	flex-direction: column;
}

.zahra-footer-group {
	border-block-end: 1px solid var(--zahra-color-line-dark);
}

.zahra-footer-group:last-child {
	border-block-end: 0;
}

.zahra-footer-group__heading {
	display: flex;
	justify-content: space-between;
	align-items: center;
	inline-size: 100%;
	margin: 0;
	padding-block: 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--zahra-color-sand);
	text-align: start;
}

/*
 * Once JS has moved the heading content into a real <button>, the button carries the layout
 * and the hit area; the heading becomes a plain block so the two do not double up on
 * padding. 44px minimum touch target (ACCESSIBILITY.md section 4).
 */
.zahra-footer-group__heading.is-enhanced {
	display: block;
	padding-block: 0;
}

.zahra-footer-group__toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	inline-size: 100%;
	min-block-size: 44px;
	padding-block: 14px;
	font: inherit;
	color: inherit;
	text-align: start;
}

/*
 * The "+" / "-" marker. Hidden until JS turns the heading into a real control, so a
 * non-scripted document never shows an affordance that does nothing.
 */
.zahra-footer-group__marker {
	color: var(--zahra-color-muted);
	font-weight: 600;
	display: none;
}

.zahra-js .zahra-footer-group__marker {
	display: inline;
}

.zahra-footer-group__list {
	display: flex;
	flex-direction: column;
	gap: 9px;
	list-style: none;
	margin: 0;
	padding: 0;
	padding-block-end: 14px;
}

.zahra-footer-group__list[hidden] {
	display: none;
}

.zahra-footer-group__link {
	font-size: 12.5px;
	color: var(--zahra-color-on-dark);
	text-decoration: none;
	display: inline-flex;
	min-block-size: 24px;
	align-items: center;
}

.zahra-footer-group__link:hover {
	color: var(--zahra-color-line-2);
	text-decoration: underline;
}

/*
 * The account group is not present in the approved mobile footer. Its links are reachable
 * from the mobile header, so hiding it here loses no route.
 */
.zahra-footer-group--account {
	display: none;
}

/* ===========================================================================
 * Legal / contact block
 * ======================================================================== */

.zahra-footer-legal {
	font-size: 11.5px;
	line-height: 1.9;
	margin-block-start: 14px;
	color: var(--zahra-color-muted);
	text-align: end;
}

.zahra-footer-legal__line {
	display: block;
}

.zahra-footer-bottom {
	display: none;
}

/* ===========================================================================
 * Desktop - IMPLEMENTATION PROVISIONAL breakpoint (Q-013)
 * ======================================================================== */

@media (min-width: 1024px) {

	.zahra-site-footer__inner {
		display: grid;
		grid-template-columns: 1.3fr repeat(5, 1fr);
		gap: 32px;
		padding-block: 44px 28px;
	}

	.zahra-footer-brand {
		gap: 14px;
	}

	.zahra-footer-brand .zahra-footer-brand__logo {
		height: 34px;
		block-size: 34px;
		padding: 8px 12px;
		margin-block-end: 0;
	}

	.zahra-footer-brand__text {
		display: block;
		font-size: 12.5px;
		line-height: 1.9;
		max-inline-size: 280px;
	}

	.zahra-footer-brand__address {
		display: block;
		font-size: 12.5px;
		line-height: 1.9;
		color: var(--zahra-color-on-dark-muted);
	}

	.zahra-footer-brand .zahra-lang {
		display: flex;
		padding: 3px;
		align-self: flex-start;
		margin-inline-start: 0;
	}

	.zahra-footer-brand .zahra-lang__item {
		padding: 4px 9px;
		font-size: 11px;
	}

	/* Groups become five sibling columns in the same grid as the brand block. */
	.zahra-footer-groups {
		display: contents;
	}

	.zahra-footer-group,
	.zahra-footer-group--account {
		display: flex;
		flex-direction: column;
		gap: 9px;
		border-block-end: 0;
	}

	.zahra-footer-group__heading {
		display: block;
		padding-block: 0;
		margin-block-end: 3px;
		font-size: 12px;
		color: var(--zahra-color-sand);
		cursor: default;
	}

	/*
	 * Defence in depth: if the JS teardown has not run yet - the media-query listener can
	 * lag a viewport change - a leftover toggle must still look exactly like the static
	 * desktop heading. Combined with the [hidden] override below, the desktop footer is
	 * correct even if the accordion state is stale.
	 */
	.zahra-footer-group__toggle {
		display: block;
		inline-size: auto;
		min-block-size: 0;
		padding-block: 0;
		cursor: default;
	}

	.zahra-footer-group__marker {
		display: none;
	}

	.zahra-js .zahra-footer-group__marker {
		display: none;
	}

	.zahra-footer-group__list {
		padding-block-end: 0;
	}

	/* A collapsed panel must never stay hidden on desktop. */
	.zahra-footer-group__list[hidden] {
		display: flex;
	}

	.zahra-footer-legal {
		display: none;
	}

	/*
	 * The bottom bar is a sibling of the grid, not a grid item: its hairline spans the full
	 * footer width while its content stays inside the shell.
	 */
	.zahra-footer-bottom {
		display: block;
		border-block-start: 1px solid var(--zahra-color-line-dark);
	}

	.zahra-footer-bottom__inner {
		display: flex;
		justify-content: space-between;
		gap: 24px;
		padding-block: 16px;
		font-size: 11.5px;
		color: var(--zahra-color-muted);
	}
}