/*
 * Sneaky site footer (footer/footer.php). Every rule is scoped to the .shf root; this file defines no --sh-* token.
 * Its one motion (the line under the wordmark growing in) runs only under prefers-reduced-motion: no-preference.
 * Breakpoints: 768 and 1024 (the canonical set).
 */

@font-face {
	font-family: "Sneaky Display";
	src: url("../../home/assets/fonts/bricolage-grotesque-latin-var.woff2") format("woff2");
	font-weight: 700 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.shf {
	--shf-head: #f2f8fb;
	--shf-link: #e8f1f5;
	--shf-soft: #b4c8d4;
	--shf-sky: #6ec4e8;
	--shf-sky-text: #8fd3ef;
	--shf-display: "Sneaky Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--shf-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--shf-gutter: clamp(20px, 4vw, 48px);
	--shf-ease: cubic-bezier(.2, .7, .2, 1);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	color: #c3d4dd;
	font: 400 16px/1.6 var(--shf-body);
	-webkit-font-smoothing: antialiased;
	background:
		radial-gradient(42% 70% at 6% 12%, rgba(36, 107, 95, .36), rgba(36, 107, 95, 0) 70%),
		radial-gradient(36% 60% at 96% 24%, rgba(110, 196, 232, .14), rgba(110, 196, 232, 0) 70%),
		linear-gradient(180deg, #0f2230 0%, #0c1d29 100%);
}
.shf, .shf *, .shf *::before, .shf *::after { box-sizing: border-box; }
.shf :where(h2, p, ul, li) { margin: 0; padding: 0; }
.shf :where(ul) { list-style: none; }
.shf::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .075) 1.1px, rgba(255, 255, 255, 0) 1.7px); background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(46% 80% at 84% 42%, #000 20%, transparent 75%); mask-image: radial-gradient(46% 80% at 84% 42%, #000 20%, transparent 75%); }
.shf a:focus-visible { outline: 2px solid #ffcf33; outline-offset: 3px; box-shadow: none; }

/* ---------- the journey's line closes the page ---------- */
.shf::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #3fb39d, #6ec4e8 33%, #4ea6ec 66%, #ec6a98); }

/* ---------- brand, columns ---------- */
.shf .shf-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; width: min(1240px, 100% - 2 * var(--shf-gutter)); margin: 0 auto; padding: clamp(48px, 6vw, 80px) 0 clamp(40px, 5vw, 64px); }
.shf .shf-mark { display: inline-flex; flex-direction: column; align-items: flex-start; color: var(--shf-head); text-decoration: none; font: 800 clamp(34px, 3.4vw, 46px)/.98 var(--shf-display); letter-spacing: -0.035em; }
.shf .shf-mark:hover { color: #fff; }
.shf .shf-squig { display: block; align-self: flex-end; width: 3.3em; height: auto; aspect-ratio: 100 / 12; margin-top: .1em; overflow: visible; }
.shf .shf-squig path { fill: none; stroke: #6ec4e8; stroke-width: 3; stroke-linecap: round; }
.shf .shf-tag { max-width: 40ch; margin-top: 18px; color: var(--shf-soft); font-size: 16px; line-height: 1.6; }
.shf .shf-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.shf .shf-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); color: var(--shf-link); text-decoration: none; transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s var(--shf-ease); }
.shf .shf-social a:hover, .shf .shf-social a:focus-visible { background: var(--shf-sky); border-color: var(--shf-sky); color: #0b1c26; transform: translateY(-2px); }
.shf .shf-social svg { width: 19px; height: 19px; }

.shf .shf-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; align-content: start; }
.shf .shf-col--account { grid-column: 1 / -1; }
.shf .shf-h { margin: 0 0 10px; font: 800 13px/1.2 var(--shf-body); letter-spacing: .14em; text-transform: uppercase; color: var(--shf-sky-text); }
.shf .shf-col ul { display: grid; justify-items: start; }
.shf .shf-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--shf-link); font: 600 16px/1.3 var(--shf-body); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: color .16s ease, text-decoration-color .16s ease, background-color .16s ease; }
.shf .shf-link:hover, .shf .shf-link:focus-visible { color: #fff; text-decoration-color: var(--shf-sky); }
/* each area carries its colour, as on the homepage; Think (the sister site) is a ring with its arrow */
.shf .shf-link--assess, .shf .shf-link--train, .shf .shf-link--eat, .shf .shf-link--helpers, .shf .shf-link--learn, .shf .shf-link--think { --dot: #3fb39d; }
.shf .shf-link--train { --dot: #4ea6ec; }
.shf .shf-link--eat { --dot: #5cb860; }
.shf .shf-link--helpers { --dot: #ec6a98; }
.shf .shf-link--learn { --dot: #e0a33a; }
.shf .shf-link--assess::before, .shf .shf-link--train::before, .shf .shf-link--eat::before, .shf .shf-link--helpers::before, .shf .shf-link--learn::before, .shf .shf-link--think::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--dot); }
.shf .shf-link--think::before { background: transparent; border: 1.5px solid #c9c2b2; }
.shf .shf-ext { margin-left: -4px; font-size: .85em; opacity: .8; }
.shf .shf-icon { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
/* Support in its own rose and plum */
.shf .shf-link--support { min-height: 40px; margin: 2px 0; padding: 0 16px 0 12px; gap: 8px; border-radius: 999px; background: #f9e4ee; color: #7b244b; text-decoration: none; }
.shf .shf-link--support:hover, .shf .shf-link--support:focus-visible { background: #fdf4f8; color: #5e1a39; }
.shf .shf-link--support .shf-icon { width: 16px; height: 16px; }

/* ---------- the legal line ---------- */
.shf .shf-bar { position: relative; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(4, 14, 21, .35); }
.shf .shf-bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; width: min(1240px, 100% - 2 * var(--shf-gutter)); margin: 0 auto; padding: 8px 0; }
.shf .shf-bar p { padding: 10px 0; color: #8fa9b8; font-size: 14px; line-height: 1.5; }
.shf .shf-legal { display: flex; flex-wrap: wrap; gap: 0 20px; }
.shf .shf-legal a { display: inline-flex; align-items: center; min-height: 44px; color: #c3d4dd; font: 600 14px/1.3 var(--shf-body); text-decoration: underline; text-decoration-color: rgba(110, 196, 232, .5); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.shf .shf-legal a:hover, .shf .shf-legal a:focus-visible { color: #fff; text-decoration-color: var(--shf-sky); }

@media (min-width: 768px) {
	.shf .shf-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.shf .shf-col--account { grid-column: auto; }
}
@media (min-width: 1024px) {
	.shf .shf-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 56px; align-items: start; }
}

/* ---------- motion: the line under the wordmark grows from nothing to its full width, once, when the footer appears ---------- */
@media (prefers-reduced-motion: no-preference) {
	.shf.shf-armed .shf-squig { clip-path: inset(0 100% 0 0); }
	.shf.shf-armed.is-in .shf-squig { animation: shf-grow 1.1s var(--shf-ease) .2s both; }
}
@keyframes shf-grow { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
	.shf *, .shf *::before, .shf *::after { animation: none !important; transition: none !important; }
}