/*
 * atvesmir — footer (block 03)
 * Dark "night" footer: brand + socials, two nav columns, contact column and a
 * mono bottom bar. Values are 1:1 with the design prototype
 * (tests/design/Astronomický tábor.dc.html, footer lines 624–667). Colours come
 * from the design tokens (tokens.css) so the footer follows light/dark.
 */

/* ---------------------------------------------------------------- *
 * 1. Shell
 * ---------------------------------------------------------------- */
.at-footer {
	margin-top: clamp(56px, 8vw, 110px);
	background: var(--night);
	color: var(--nightInk2);
}

.at-footer__grid {
	max-width: var(--at-content);
	margin-inline: auto;
	padding: clamp(40px, 5vw, 64px) var(--at-gutter);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 36px 28px;
}

/* ---------------------------------------------------------------- *
 * 2. Brand column
 * ---------------------------------------------------------------- */
.at-footer__brand {
	grid-column: span 1;
	min-width: 200px;
}
.at-footer__brandname {
	font-family: var(--font-serif);
	font-size: 1.4rem;
	/* Match the prototype's inherited line-height (1.65); refur's heading reset
	 * would otherwise force 1.2 and shrink the row out of parity. */
	line-height: 1.65;
	color: var(--nightInk);
	margin-bottom: 14px;
}
.at-footer__about {
	font-size: .98rem;
	line-height: 1.6;
	/* refur's global `p` adds padding-bottom: the prototype paragraph has none. */
	padding: 0;
	margin: 0 0 18px;
	max-width: 34ch;
}
.at-footer__socials {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-family: var(--font-mono);
	font-size: 12px;
}
.at-footer__social {
	color: var(--nightInk);
	border: 1px solid rgba(255, 255, 255, .2);
	padding: 7px 13px;
	border-radius: var(--at-radius-pill);
	line-height: 1.65;
	transition: border-color .16s ease, color .16s ease;
}
.at-footer__social:hover,
.at-footer__social:focus-visible {
	color: var(--nightInk);
	border-color: var(--accent2);
}

/* ---------------------------------------------------------------- *
 * 3. Nav + contact columns
 * ---------------------------------------------------------------- */
.at-footer__col { min-width: 0; }
.at-footer__label {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .12em;
	text-transform: uppercase;
	/* Prototype dims the label (opacity .7); at 11px that fails WCAG AA contrast,
	 * so we use the full --nightInk2 (~6.9:1 on --night) which keeps the muted
	 * look while passing. */
	color: var(--nightInk2);
	/* The label is an <h2>; reset refur's heading padding (0 0 25px) + line-height
	 * (1.1) so it renders as the prototype's single 18px line, not a 37px box. */
	padding: 0;
	line-height: 1.65;
	margin: 0 0 14px;
}
.at-footer__links {
	display: flex;
	flex-direction: column;
	gap: 9px;
	font-size: 1rem;
}
.at-footer__link {
	color: var(--nightInk);
	line-height: 1.65;
	transition: color .16s ease;
}
.at-footer__link:hover,
.at-footer__link:focus-visible { color: var(--accent2); }

.at-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 9px;
	font-size: 1rem;
}
.at-footer__contact a {
	color: var(--nightInk);
	transition: color .16s ease;
}
.at-footer__contact a:hover,
.at-footer__contact a:focus-visible { color: var(--accent2); }
.at-footer__address {
	font-style: normal;
	/* Match the prototype's inherited 1.65; reset refur's <address> margin so the
	 * contact column doesn't gain a trailing 20px and break row parity. */
	line-height: 1.65;
	margin: 0;
	color: var(--nightInk2);
}

/* ---------------------------------------------------------------- *
 * 4. Bottom bar
 * ---------------------------------------------------------------- */
.at-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); }
.at-footer__bottombar {
	max-width: var(--at-content);
	margin-inline: auto;
	padding: 18px var(--at-gutter);
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--nightInk2);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	justify-content: space-between;
}
.at-footer__sitelink {
	color: var(--nightInk2);
	transition: color .16s ease;
}
.at-footer__sitelink:hover,
.at-footer__sitelink:focus-visible { color: var(--accent2); }

/* Kill the refur global `a { text-decoration: underline }` for every footer
 * anchor (the footer walker emits `.at-footer__link`, not `.at-link`, so the
 * token reset doesn't reach it) — the prototype footer links are undecorated. */
.at-footer a { text-decoration: none; }

/* Shared focus ring on dark ground. */
.at-footer a:focus-visible {
	outline: 2px solid var(--accent2);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------------------------------------------------------------- *
 * Link state pins — refur's a:visited (#75A3D1) / a:focus / a:active (#2E4051)
 * would otherwise tint footer links blue once visited / focused by mouse.
 * Pin visited / active / non-keyboard-focus to each link's own night colour;
 * keyboard :focus-visible (accent2, above) is preserved via :not(:focus-visible).
 * ---------------------------------------------------------------- */
.at-footer__link:visited,    .at-footer__link:active,    .at-footer__link:focus:not(:focus-visible),
.at-footer__social:visited,  .at-footer__social:active,  .at-footer__social:focus:not(:focus-visible),
.at-footer__contact a:visited, .at-footer__contact a:active, .at-footer__contact a:focus:not(:focus-visible) { color: var(--nightInk); }

.at-footer__sitelink:visited, .at-footer__sitelink:active, .at-footer__sitelink:focus:not(:focus-visible) { color: var(--nightInk2); }

/* ---------------------------------------------------------------- *
 * Desktop: widen the contact column so the organisation name fits on one line.
 * The equal-width auto-fit grid wrapped "Jihlavská astronomická společnost, z. s.";
 * give the brand + contact columns more room while keeping the two nav columns tight.
 * ---------------------------------------------------------------- */
@media (min-width: 760px) {
	.at-footer__grid {
		grid-template-columns: 1.1fr 0.95fr 0.95fr 1.7fr;
	}
}