/* stylelint-disable no-descending-specificity -- cross-menu false positive */

/**
 * Apex footer.
 *
 * Layout: brand + footer menu (left), Get in touch (centre), award logos
 * (right), with the legal menu pinned bottom-right. The two menus are classic
 * WP menus (Appearance > Menus: "Footer Menu" and "Footer Legal Menu").
 * Colours use the theme.json cream/ink tokens.
 */

.apex-footer {
	box-sizing: border-box;
	padding: clamp(3rem, 6vw, 86px) clamp(1.5rem, 7vw, 106px) clamp(2.5rem, 4vw, 56px);
	color: var(--wp--preset--color--cream);
	background-color: var(--wp--preset--color--ink);
}

/* Footer links are cream, not the global accent. */
.apex-footer a {
	color: var(--wp--preset--color--cream);
	text-decoration: none;
}

/* Neutralise the flow-layout block-gap margins WP adds to group children. */
.apex-footer > *,
.apex-footer__top > *,
.apex-footer__brand > * {
	margin-block: 0;
}

/* Columns ------------------------------------------------------------------ */
.apex-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

/* Brand + footer nav ------------------------------------------------------- */
.apex-footer__logo {
	display: inline-flex;
	color: var(--wp--preset--color--cream);
	line-height: 0;
}

.apex-footer__logo svg {
	display: block;
	width: 140px;
	height: auto;
}

.apex-footer-nav {
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

.apex-footer-menu {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.apex-footer-menu a {
	font-family: Inter, sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition: opacity 0.2s ease;
}

.apex-footer-menu a:hover,
.apex-footer-menu a:focus-visible {
	opacity: 0.7;
}

/* Get in touch ------------------------------------------------------------- */
.apex-footer__label {
	margin: 0 0 1.5rem;
	font-family: Inter, sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.apex-footer__details {
	margin: 0;
	padding: 0;
	list-style: none;
}

.apex-footer__details li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 1.5rem;
	font-family: Inter, sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 24px;
}

.apex-footer__details li:last-child {
	margin-bottom: 0;
}

.apex-footer__details a:hover,
.apex-footer__details a:focus-visible {
	text-decoration: underline;
}

.apex-footer__icon {
	flex: 0 0 auto;
	width: 22px;
	height: 24px;
	background-color: var(--wp--preset--color--cream);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.apex-footer__icon--email {
	-webkit-mask-image: url(../images/icon-email.svg);
	mask-image: url(../images/icon-email.svg);
}

.apex-footer__icon--phone {
	-webkit-mask-image: url(../images/icon-phone.svg);
	mask-image: url(../images/icon-phone.svg);
}

/* The 24/7 glyph is busier than the other line icons, so enlarge it for
   legibility. Negative margins keep its left edge, the text column and its
   vertical centre aligned with the 22px icons (30 - 8 footprint = 22). */
.apex-footer__icon--clock {
	width: 30px;
	height: 30px;
	margin-block: -3px;
	margin-inline-end: -8px;
	-webkit-mask-image: url(../images/icon-clock.svg);
	mask-image: url(../images/icon-clock.svg);
}

.apex-footer__icon--pin {
	-webkit-mask-image: url(../images/icon-pin.svg);
	mask-image: url(../images/icon-pin.svg);
}

/* Awards ------------------------------------------------------------------- */
.apex-footer__awards {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	text-align: center;
}

.apex-footer__award-logos {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.apex-footer__award {
	display: block;
	width: auto;
	height: 110px;
}

.apex-footer__award--tiaki {
	height: 100px;
}

.apex-footer__operator {
	margin: 0;
	font-family: Inter, sans-serif;
	font-weight: 200;
	font-size: 12px;
	line-height: 16px;
}

/* Legal menu — Privacy Policy / Prohibited Items / Terms & Conditions. Shown at
   the foot on desktop; on mobile it's hidden here and surfaced in the slide-out
   menu instead (see the max-width: 899.98px block below). */
.apex-footer__bottom {
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

.apex-footer-legal-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 1.5rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.apex-footer-legal-menu a {
	font-family: Inter, sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 1;
	transition: opacity 0.2s ease;
}

.apex-footer-legal-menu a:hover,
.apex-footer-legal-menu a:focus-visible {
	opacity: 0.7;
}

/* Responsive --------------------------------------------------------------- */

/* Mobile (Figma "MOBILE Footer"): a single centred column — logo, Get in
   touch with each icon stacked above its text, then the award logos and
   operator line. The footer nav and legal links are dropped here; both are
   reachable from the mobile slide-out menu. */
@media ( max-width: 899.98px ) {

	.apex-footer {
		text-align: center;
	}

	.apex-footer__top {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: clamp(2.5rem, 9vw, 3.5rem);
	}

	.apex-footer__brand {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.apex-footer-nav {
		display: none;
	}

	.apex-footer__details li {
		flex-direction: column;
		align-items: center;
		gap: 0.625rem;
		margin-bottom: 2.25rem;
	}

	/* Icons stack centred above their text here, so drop the desktop alignment
	   offsets on the enlarged clock glyph. */
	.apex-footer__icon--clock {
		margin: 0;
	}

	.apex-footer__awards {
		align-items: center;
		text-align: center;
	}

	.apex-footer__bottom {
		display: none;
	}
}