/*
 * Site footer (board #9) — reference: prototypes/h-dusk-coral.html
 * (.dk-footer, .ft-*). Tokens only; px values are component dimensions
 * from the approved reference.
 *
 * Desktop (>1100px): brand + badge | Services | Company | Contact.
 * Tablet (<=1100px): brand + badge on one row, three columns below.
 * Mobile (<=800px): brand; Services + Company; Contact + badge.
 */

.cluedit-footer {
	box-sizing: border-box;
	padding: 72px var(--cluedit-pad-x) 32px;
	line-height: 1.55;
}

.cluedit-footer p,
.cluedit-footer ul,
.cluedit-footer h2,
.cluedit-footer figure {
	margin: 0;
}

.cluedit-footer a {
	color: inherit;
	text-decoration: none;
	transition: color var(--wp--custom--motion--fast) var(--cluedit-ease);
}

.cluedit-footer a:hover {
	color: var(--wp--preset--color--accent);
}

/* ---------- Grid ---------- */
.cluedit-footer .cluedit-footer__top {
	display: grid;
	grid-template-areas:
		"brand svc co ct"
		"badge svc co ct";
	grid-template-rows: auto 1fr;
	grid-template-columns: 1.5fr repeat(3, 1fr);
	gap: 0 40px;
}

.cluedit-footer .cluedit-footer__top > * {
	margin-block: 0;
}

.cluedit-footer__brand {
	grid-area: brand;
}

.cluedit-footer__badge {
	grid-area: badge;
	padding-top: 26px;
}

.cluedit-footer__col--services {
	grid-area: svc;
}

.cluedit-footer__col--company {
	grid-area: co;
}

.cluedit-footer__col--contact {
	grid-area: ct;
}

/* ---------- Brand ---------- */

/* The reference logo sits inline in a text line (36px line box). */
.cluedit-footer .cluedit-footer__logo {
	line-height: 1.55;
}

.cluedit-footer .cluedit-footer__logo img {
	width: 126px;
	height: auto;
	vertical-align: baseline;
}

.cluedit-footer .cluedit-footer__tagline {
	max-width: 300px;
	margin-top: 18px;
	line-height: 1.5;

	/* Reference #E6ECF3: on-dark lifted towards white. */
	color: color-mix(in srgb, var(--wp--preset--color--on-dark) 45%, var(--wp--preset--color--surface));
}

.cluedit-footer .cluedit-footer__tagline-sub {
	max-width: 300px;
	line-height: 1.5;
}

/* ---------- Partner badge (official artwork, never recoloured) ---------- */
.cluedit-partner-badge {
	margin: 0;
}

.cluedit-footer__badge .cluedit-partner-badge img {
	width: auto;

	/* By max-height, not height: in a column narrower than the badge,
	   max-width shrinks it without squeezing its 400×117 ratio. */
	height: auto;
	max-height: 60px;
	border-radius: var(--wp--custom--radius--xs);
	vertical-align: baseline;
}

/* ---------- Clutch reviews (link; Clutch's widget after consent) ---------- */
.cluedit-footer .cluedit-clutch {
	min-height: 45px;
	margin-top: 16px;
}

.cluedit-footer .cluedit-clutch__fallback {
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.55;
}

.cluedit-footer .cluedit-clutch.is-live .cluedit-clutch__fallback {
	display: none;
}

/* ---------- Columns ---------- */
.cluedit-footer .cluedit-footer__heading {
	margin: 6px 0 16px;
	color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--2-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.5;
	text-transform: uppercase;
}

.cluedit-footer .cluedit-footer__links {
	display: grid;
	gap: 10px;
	padding: 0;
	list-style: none;
}

/* ---------- Bottom row ---------- */
.cluedit-footer .cluedit-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 28px;
	align-items: center;
	justify-content: space-between;
	margin-top: 56px;
	padding-top: 22px;
	border-top:
		1px solid
		color-mix(in srgb, var(--wp--preset--color--surface) 12%, transparent);
}

.cluedit-footer .cluedit-footer__bottom > * {
	margin-block: 0;
}

.cluedit-footer .cluedit-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	padding: 0;
	list-style: none;
}

.cluedit-footer .cluedit-footer__end {
	display: flex;
	gap: 18px;
	align-items: center;
}

.cluedit-footer .cluedit-footer__to-top a {
	display: inline-flex;
	gap: 6px;
	align-items: center;
}

.cluedit-footer .cluedit-footer__to-top a::after {
	content: "";
	width: 14px;
	height: 14px;
	background-color: currentcolor;
	-webkit-mask: url(../icons/arrow-up.svg) center / contain no-repeat;
	mask: url(../icons/arrow-up.svg) center / contain no-repeat;
}

/* ---------- Pause motion (assets/js/motion.js) ---------- */
.cluedit-motion-control {
	gap: 0;
}

.cluedit-motion-toggle .wp-block-button__link {
	min-height: 32px;
	padding: 6px 14px;
	border:
		1px solid
		color-mix(in srgb, var(--wp--preset--color--surface) 20%, transparent);
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: color-mix(in srgb, var(--wp--preset--color--on-dark) 45%, var(--wp--preset--color--surface));
	font-family: inherit;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}

.cluedit-motion-toggle .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--accent);
	box-shadow: none;
	transform: none;
}

/* Paused: the label stays "Pause motion" (toggle-button pattern);
   the pressed state is shown with a filled pill. */
.cluedit-motion-toggle .wp-block-button__link[aria-pressed="true"] {
	border-color: color-mix(in srgb, var(--wp--preset--color--surface) 45%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--surface) 14%, transparent);
	color: var(--wp--preset--color--surface);
}

.cluedit-motion-toggle .wp-block-button__link:disabled {
	border-color: color-mix(in srgb, var(--wp--preset--color--surface) 20%, transparent);
	background: transparent;
	opacity: 0.7;
	cursor: default;
}

/* Profile icons (LinkedIn, Clutch, Crunchbase): one-colour versions of the
   official marks, no frame. The link text stays for screen readers; the
   icon is a mask in the link colour (accent on hover). */
.cluedit-footer .cluedit-footer__social {
	display: flex;
	gap: 14px;
	margin-top: 18px;
	padding: 0;
	list-style: none;
}

.cluedit-footer .cluedit-footer__social a {
	display: block;
	width: 24px;
	height: 24px;
	overflow: hidden;
	font-size: 0;
}

.cluedit-footer .cluedit-footer__social a::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background-color: currentcolor;
	-webkit-mask: var(--cluedit-social-icon) center / contain no-repeat;
	mask: var(--cluedit-social-icon) center / contain no-repeat;
}

.cluedit-footer .cluedit-footer__social--linkedin {
	--cluedit-social-icon: url(../icons/linkedin.svg);
}

.cluedit-footer .cluedit-footer__social--clutch {
	--cluedit-social-icon: url(../icons/clutch.svg);
}

.cluedit-footer .cluedit-footer__social--crunchbase {
	--cluedit-social-icon: url(../icons/crunchbase.svg);
}

/* Without JavaScript the control could not do anything: hide it. */
html:not(.cluedit-js) .cluedit-motion-control {
	display: none;
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {

	.cluedit-footer .cluedit-footer__top {
		grid-template-areas:
			"brand brand badge"
			"svc co ct";
		grid-template-rows: auto auto;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 44px 32px;
	}

	.cluedit-footer__badge {
		align-self: center;
		justify-self: end;
		padding-top: 0;
	}
}

/* ---------- Mobile ---------- */
@media (max-width: 800px) {

	.cluedit-footer {
		padding-block: 56px 28px;
	}

	.cluedit-footer .cluedit-footer__top {
		grid-template-areas:
			"brand brand"
			"svc co"
			"ct badge";
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 36px 24px;
	}

	/* Next to Contact, right-aligned; the Clutch widget is scaled to fit
	   (cluedit-core/assets/clutch.js). */
	.cluedit-footer__badge {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		align-self: start;
		justify-self: end;
		padding-top: 34px;
	}

	.cluedit-footer__badge .cluedit-partner-badge img {
		max-height: 52px;
	}

	/* Clutch's Compact widget is ~180px wide and has no scale option of its
	   own; shrink it from the right edge to fit the column. */
	.cluedit-footer .cluedit-clutch.is-live {
		display: flex;
		justify-content: flex-end;
		width: 156px;
		min-height: 37px;
	}

	.cluedit-footer .cluedit-clutch .clutch-widget {
		flex: none;
		width: 190px;
		height: 37px;
		transform: scale(0.82);
		transform-origin: 100% 0;
	}

	.cluedit-footer .cluedit-footer__bottom {
		flex-direction: column;
		gap: 18px;
		align-items: stretch;
	}

	.cluedit-footer .cluedit-footer__legal {
		gap: 10px 18px;
	}

	.cluedit-footer .cluedit-footer__end {
		justify-content: space-between;
	}

	.cluedit-footer .cluedit-footer__copy {
		order: 3;
	}
}