/*
 * Site footer. Loaded from inc/footer.php, deliberately not from workspace.css:
 * the footer appears on ordinary pages as well as inside the workspace shell,
 * so it carries its own tokens and does not depend on the shell being present.
 *
 * Dark is the default. Light is the [data-ace-theme=light] branch, set on the
 * body by the theme switcher.
 */

.ace-footer {
	--fo-bg: #14100c;
	--fo-ink: #f2efe7;
	--fo-muted: #a49c8d;
	--fo-line: color-mix(in srgb, #f5f2ea 14%, transparent);
	--fo-accent: #ff9a45;
	--fo-gap: clamp(28px, 4vw, 48px);
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: clamp(36px, 5vw, 64px) clamp(18px, 4vw, 56px) clamp(24px, 3vw, 36px);
	background: var(--fo-bg);
	color: var(--fo-ink);
	border-top: 1px solid var(--fo-line);
	font-size: 15px;
	line-height: 1.55;
	overflow-x: clip;
}

[data-ace-theme=light] .ace-footer {
	--fo-bg: #e4e2d8;
	--fo-ink: #23201b;
	--fo-muted: #5f5a51;
	--fo-line: color-mix(in srgb, #23201b 16%, transparent);
	--fo-accent: #a8500f;
}

.ace-footer * {
	box-sizing: border-box;
}

.ace-footer__inner {
	max-width: 1320px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp(26px, 3.2vw, 38px) clamp(32px, 4vw, 72px);
}

/* ------------------------------------------------------------------ brand -- */

.ace-footer__brand {
	flex: 1 1 100%;
	max-width: 68ch;
	min-width: 0;
}

.ace-footer__mark {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	text-decoration: none;
	color: var(--fo-ink);
	font-family: 'Space Grotesk', 'DM Sans', system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(20px, 2.4vw, 25px);
	letter-spacing: -0.01em;
	line-height: 1.1;
}

.ace-footer__mark-pin {
	color: var(--fo-accent);
	flex: none;
}

.ace-footer__mark:hover .ace-footer__mark-name,
.ace-footer__mark:focus-visible .ace-footer__mark-name {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ace-footer__blurb {
	margin: 14px 0 0;
	color: var(--fo-muted);
	font-size: 14px;
	line-height: 1.6;
	text-wrap: pretty;
}

.ace-footer__why {
	margin: 12px 0 0;
	font-size: 14px;
}

.ace-footer__why a {
	color: var(--fo-accent);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
	padding-bottom: 1px;
}

.ace-footer__why a:hover,
.ace-footer__why a:focus-visible {
	border-bottom-color: currentColor;
}

.ace-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.ace-footer__social a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 13px;
	min-height: 32px;
	border: 1px solid var(--fo-line);
	border-radius: 999px;
	color: var(--fo-ink);
	text-decoration: none;
	font-size: 13px;
	line-height: 1.5;
	transition: border-color .15s, color .15s;
}

.ace-footer__social a:hover,
.ace-footer__social a:focus-visible {
	border-color: var(--fo-accent);
	color: var(--fo-accent);
}

/* -------------------------------------------------------------------- nav -- */

.ace-footer__nav {
	flex: 1 1 100%;
	width: 100%;
	padding-top: clamp(22px, 3vw, 34px);
	border-top: 1px solid var(--fo-line);
	display: grid;
	/* Sized against the space the footer actually has, not the viewport, so the
	   columns behave the same beside the workspace rails as on a plain page. */
	grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
	gap: clamp(22px, 3vw, 32px) clamp(16px, 2vw, 28px);
	min-width: 0;
}

.ace-footer__group {
	min-width: 0;
}

/* A column heading here is a heading like any other on the site: sentence case,
   the same weight, the same tight tracking. The small caps treatment made the
   footer read as something bolted on from another site. */
.ace-footer__title {
	margin: 0 0 10px;
	padding: 0 0 8px;
	border-bottom: 1px solid var(--fo-line);
	color: var(--fo-ink);
	font-family: 'Space Grotesk', 'DM Sans', system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: .01em;
	text-transform: none;
	line-height: 1.25;
	text-wrap: balance;
	/* A two-line heading must not drop its rule below its neighbours', so every
	   title reserves two lines and sits on the same baseline. */
	display: flex;
	align-items: flex-end;
	min-height: 2.5em;
}

.ace-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ace-footer__links a {
	display: block;
	padding: 5px 0;
	color: var(--fo-muted);
	text-decoration: none;
	font-size: 14px;
	line-height: 1.45;
	overflow-wrap: break-word;
	hyphens: none;
	transition: color .15s;
}

/* Hovering a footer link changes its colour and nothing else.
   The footer columns are a <nav>, and the theme's menu styling carries a blanket
   "nav li a { border-bottom: 2px solid }" with a hover state that drops it again.
   Every footer link was therefore 2px taller until the mouse crossed it, at which
   point it shrank and shuffled down. The border is pinned off in every state here;
   the underline is a decoration, which never affects layout. */
.ace-footer__links a,
.ace-footer__links a:hover,
.ace-footer__links a:focus-visible,
.ace-footer__links a:active {
	border: 0;
}

.ace-footer__links a:hover,
.ace-footer__links a:focus-visible {
	color: var(--fo-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ----------------------------------------------------------------- bottom -- */

.ace-footer__bottom {
	flex: 1 1 100%;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 28px;
	margin: 0;
	padding-top: clamp(18px, 2.4vw, 26px);
	border-top: 1px solid var(--fo-line);
}

.ace-footer__bottom p {
	margin: 0;
	color: var(--fo-muted);
	font-size: 13px;
	line-height: 1.5;
	min-width: 0;
}

.ace-footer__made {
	flex: 1 1 32ch;
}

.ace-footer__family {
	flex: 0 1 auto;
}

.ace-footer__bottom a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

.ace-footer__bottom a:hover,
.ace-footer__bottom a:focus-visible {
	color: var(--fo-accent);
	text-decoration-color: currentColor;
}

.ace-footer :is(a):focus-visible {
	outline: 2px solid var(--fo-accent);
	outline-offset: 3px;
	border-radius: 3px;
}

/* ------------------------------------------------------------ breakpoints -- */

@media (max-width: 479px) {
	.ace-footer__nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ace-footer__title {
		min-height: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ace-footer *,
	.ace-footer *::before,
	.ace-footer *::after {
		transition: none !important;
	}
}

/* The mark beside each name. Font Awesome Free brand icons, CC BY 4.0, inlined so
   no icon font has to be subsetted for four glyphs. */
.ace-footer__social-icon {
	flex: none;
	width: 15px;
	height: 15px;
	opacity: .9;
}

.ace-footer__social a:hover .ace-footer__social-icon,
.ace-footer__social a:focus-visible .ace-footer__social-icon {
	opacity: 1;
}