/* Footer — 5-column site footer on dark (design.md §footer). */

.tt-footer {
	background: var(--wp--preset--color--ink, #141412);
}

.tt-footer__inner {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	max-width: 1728px;
	margin-inline: auto;
	padding: 100px 53px;
	box-sizing: border-box;
}

/* Dividers between column groups */
.tt-footer__divider {
	flex: none;
	align-self: flex-start;
	width: 1px;
	height: 256px;
	margin-top: 26px;
	background: #3a3a37;
}

/* Info column */
.tt-footer__col--info {
	flex: 0 0 320px;
}

.tt-footer__logo {
	display: block;
	width: 360px;      /* Figma `Vector` 117:142 is 360 × 52.26 */
	height: auto;
	margin-bottom: 25px;   /* 33px of visible gap to the address, per the design */
}

/* Everything below the logo is indented 66px — it hangs off the "TRIGGERTECH"
   wordmark, not the T mark (Figma: logo at x=53, this block at x=119). */
.tt-footer__address,
.tt-footer__copyright,
.tt-footer__meta-links {
	padding-left: 66px;
}

.tt-footer__address,
.tt-footer__copyright {
	margin: 0;
	font-family: var(--wp--preset--font-family--barlow, "Barlow", sans-serif) !important;
	font-size: 16px;
	line-height: 1.5;
	color: var(--wp--preset--color--grey-light, #adadad) !important;
}

.tt-footer__copyright {
	margin-top: 10px;
}

.tt-footer__meta-links {
	display: flex;
	gap: 45px;
	margin: 13px 0 0;
}

.tt-footer__meta-links a {
	font-family: var(--wp--preset--font-family--barlow, "Barlow", sans-serif) !important;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--red-bright, #ff4349) !important;
	text-decoration: none;
}

/* Link columns */
.tt-footer__col--links {
	display: flex;
	flex: 1 1 auto;
	gap: 40px;
}

.tt-footer__subcol {
	display: flex;
	flex-direction: column;
	gap: 40px;
	flex: 1 1 0;
}

/* Headings sit close to the block beneath them — 16px in the link columns, and
   tighter still in the two right-hand columns (see the overrides further down).
   Measured box-to-box off the Figma text frames, whose line-height matches ours. */
.tt-footer__heading {
	margin: 0 0 16px;
	font-family: var(--wp--preset--font-family--oswald, "Oswald", sans-serif) !important;
	font-weight: 700 !important;
	font-size: 14px;
	line-height: 1.45;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: var(--wp--preset--color--red-bright, #ff4349) !important;
}

.tt-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tt-footer__list li {
	margin: 0;
}

.tt-footer__link {
	display: inline-block;
	padding: 0;
	font-family: var(--wp--preset--font-family--barlow, "Barlow", sans-serif) !important;
	font-size: 16px;
	line-height: 1.6;
	color: #fff !important;
	text-decoration: none;
	transition: color 0.2s ease;
}

.tt-footer__link:hover {
	color: var(--wp--preset--color--red-bright, #ff4349) !important;
}

/* Support column */
.tt-footer__col--support {
	flex: 0 0 294px;
}

/* 10px to the phone number (nodes 2003:33 → 2003:5) */
.tt-footer__col--support .tt-footer__heading {
	margin-bottom: 10px;
}

.tt-footer__phone {
	display: block;
	font-family: var(--wp--preset--font-family--oswald, "Oswald", sans-serif) !important;
	font-weight: 600 !important;
	font-size: 28px;
	line-height: 1.5;
	text-transform: uppercase;
	color: #fff !important;
	text-decoration: none;
}

.tt-footer__hours {
	margin: 0;
	font-family: var(--wp--preset--font-family--barlow, "Barlow", sans-serif) !important;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--grey-light, #adadad) !important;
}

.tt-footer__email {
	display: block;
	margin: 15px 0;      /* 15px clear of the hours above and the links below */
	font-family: var(--wp--preset--font-family--barlow, "Barlow", sans-serif) !important;
	font-size: 16px;
	line-height: 1.5;
	color: var(--wp--preset--color--red-bright, #ff4349) !important;
	text-decoration: none;
}

/* Social column */
.tt-footer__col--social {
	flex: 0 0 294px;
}

/* 13px to the icon row (nodes 2003:48 → 117:178) */
.tt-footer__col--social .tt-footer__heading {
	margin-bottom: 13px;
}

.tt-footer__socials {
	display: flex;
	gap: 15px;
	margin-bottom: 19px;   /* icon row 167..206, description starts 225 */
}

.tt-footer__social img {
	display: block;
	width: 39px;
	height: 39px;
}

.tt-footer__desc {
	margin: 0;
	font-family: var(--wp--preset--font-family--barlow, "Barlow", sans-serif) !important;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--grey-light, #adadad) !important;
}

/* ---- Mobile (≤767px) ----------------------------------------------------- */
@media (max-width: 767px) {
	/* Stacked and centred: the design puts the content in a 294px column with
	   73px gutters, and the logo (360 wide) sits just outside it — hence a 40px
	   page gutter with the columns capped at 294 and centred. */
	.tt-footer__inner {
		flex-direction: column;
		align-items: center;
		gap: 40px;
		padding: 60px 40px;
	}

	/* `flex: none` is required: the desktop columns carry `flex: 0 0 320px` /
	   `0 0 294px`, and once the inner stacks, that basis governs HEIGHT — each
	   section then reserved 294–320px regardless of its content and left a big
	   dead gap above the separator. Same trap as the newsletter name fields. */
	.tt-footer__col {
		flex: none;
		width: 100%;
		max-width: 294px;
	}

	/* The desktop's vertical rules between column groups become the design's
	   horizontal separators — 256px wide, centred (nodes 25:715/:731/:739).
	   There are already exactly three in the markup, one per section break. */
	.tt-footer__divider {
		align-self: center;
		width: 256px;
		max-width: 100%;
		height: 1px;
		margin: 0;
	}

	/* Info block is centre-aligned; the link, support and social sections stay
	   left-aligned inside the centred column, as the design has them. */
	.tt-footer__col--info {
		max-width: none;
		text-align: center;
	}

	/* The 360px logo is exactly the content width at the 440 canvas, so a fixed
	   width overflows every narrower handset — it was clipping to "TRIGGERTEC"
	   at 375. Scale it instead, capped at the design's 360. */
	.tt-footer__logo {
		width: 100%;
		max-width: 360px;
		margin-inline: auto;
	}

	.tt-footer__address,
	.tt-footer__copyright,
	.tt-footer__meta-links {
		padding-left: 0;   /* the desktop wordmark indent doesn't apply centred */
	}

	.tt-footer__meta-links {
		justify-content: center;
	}

	.tt-footer__col--links {
		flex-wrap: wrap;
	}
}