/* ChugCheck Footer 1.0.0
 *
 * Colours come from the dark plugin when it is active; the fallbacks are for
 * the pages it has not been told about. The footer is dark on every page,
 * because it belongs to the site rather than to the page above it.
 */

.cchf {
	--cchf-ground: var(--cc-ground, #12100D);
	--cchf-ink: var(--cc-ink, #F2EDE4);
	--cchf-dim: var(--cc-dim, #9A9183);
	--cchf-accent: var(--cc-accent, #C9A96A);
	--cchf-line: rgba(242, 237, 228, .12);

	position: relative;
	background: var(--cchf-ground);
	color: var(--cchf-dim);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	/* A hairline above, so the footer reads as a floor rather than as more
	   page — even where the page above it is the same colour. */
	box-shadow: inset 0 1px 0 var(--cchf-line);
	margin-top: 56px;
}

.cchf *,
.cchf *::before,
.cchf *::after { box-sizing: border-box; }

.cchf a { color: inherit; text-decoration: none; }

.cchf-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cchf__in {
	display: grid;
	gap: 36px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 48px 18px 40px;
}

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

.cchf__brand { max-width: 34ch; }

/* Written as a.cchf-logo on purpose: ".cchf a { color: inherit }" above is one
   class and one type, which beats a lone class, so a plain .cchf-logo rule
   loses and the mark comes out the dim colour of the text around it. */
.cchf a.cchf-logo { display: inline-flex; align-items: center; color: var(--cchf-ink); }
.cchf-mark { display: block; height: 26px; width: auto; }
.cchf-logo__img { display: block; height: 30px; width: auto; }
.cchf-name { font-size: 20px; font-weight: 800; color: var(--cchf-ink); }

.cchf__tagline {
	margin: 14px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--cchf-dim);
}

.cchf__count {
	margin: 10px 0 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cchf-accent);
}

/* ------------------------------------------------------------- links ---- */

.cchf__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 28px 24px;
}

.cchf-col__h {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cchf-ink);
}

.cchf-col__list { list-style: none; margin: 0; padding: 0; }
.cchf-col__list li { margin: 0 0 9px; }

.cchf-col__list a {
	font-size: 14px;
	color: var(--cchf-dim);
	transition: color .15s ease;
}
.cchf-col__list a:hover,
.cchf-col__list a:focus-visible { color: var(--cchf-accent); }

/* -------------------------------------------------------------- base ---- */

.cchf__base { box-shadow: inset 0 1px 0 var(--cchf-line); }

.cchf__base-in {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 20px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 18px 18px 22px;
}

.cchf__legal,
.cchf__note { margin: 0; font-size: 13px; color: var(--cchf-dim); }
.cchf__note { opacity: .85; }

/* --------------------------------------------------------- the theme ---- */

/* One rule, so that changing theme means changing one rule. */
body.chugcheck-hide-theme-footer .site-footer,
body.chugcheck-hide-theme-footer #colophon,
body.chugcheck-hide-theme-footer .ast-footer-overlay,
body.chugcheck-hide-theme-footer .site-primary-footer-wrap,
body.chugcheck-hide-theme-footer .site-above-footer-wrap,
body.chugcheck-hide-theme-footer .site-below-footer-wrap { display: none !important; }

/* ------------------------------------------------------------ wide up ---- */

@media (min-width: 720px) {
	.cchf__in {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
		gap: 48px;
		padding: 60px 24px 48px;
	}
	.cchf__base-in { padding: 20px 24px 26px; }
	.cchf-mark { height: 30px; }
}

@media (min-width: 1100px) {
	.cchf__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 64px; }
}