/* =====================================================================
   layout/footer.css — dark four-column footer with a divided bottom bar.
   ===================================================================== */

.site-footer {
	padding-block: 5rem 0;
	background-color: var(--near-black);
	color: var(--text-on-dark);
}

/* The brand column is the widest in the row, so the lockup and the
   association badge sit side by side in it and share the spare width. The
   badge wraps back under the lockup once the column is too narrow — see
   media.css. */
.footer-brand-col {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2rem 2.5rem;
}

/*.footer-brand-main {
	flex: 1 1 20rem;
	min-width: 0;
}*/

.footer-brand {
	display: inline-block;
	margin-bottom: 2.5rem;
}

/* The lockup is sized here rather than on the link, so a text-only brand
   fallback is free to set its own width. 112px matches the design. */
.footer-brand img {
	width: 7rem;
	height: auto;
}

.footer-brand .brand-name {
	font-family: var(--font-secondary);
	font-size: clamp(1.125rem, 1.03rem + 0.39vw, 1.375rem);
	font-weight: 700;
	color: var(--accent-gold);
}

.footer-about {
	max-width: 21.875rem;
	margin-bottom: 1.1875rem;
	color: var(--text-on-dark);
}

/* -- Social links -- */
.footer-socials {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

.footer-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.625rem;
	height: 2.625rem;
	color: #fff;
	background: #262626;
	border-radius: var(--radius-md);
	transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.footer-social svg {
	width: 1.25rem;
	height: 1.25rem;
}

.footer-social:hover,
.footer-social:focus-visible {
	color: var(--near-black);
	background: var(--accent-gold);
	transform: translateY(-2px);
}

/* -- Association badge -- */
/* Bottom-aligned against the social row; the column's own row gap supplies the
   separation once the badge wraps underneath. */
.footer-association {
	flex: 0 0 auto;
	margin: 25px 0;
}

.footer-association-title {
	margin-bottom: .75rem;
	font-size: 1.0625rem;
	color: var(--text-on-dark);
}

/* The SEANZ mark is dark-on-white with no alpha, so it sits on a light panel
   to stay legible against the near-black footer. */
.footer-association-logo {
	width: 13.75rem;
	height: auto;
	padding: .625rem .875rem;
	background: #fff;
	border-radius: var(--radius-md);
}

/* -- Link columns -- */
.footer-col-title {
	margin-bottom: 1rem;
	font-family: var(--font-secondary);
	font-size: clamp(1.125rem, 1.08rem + 0.20vw, 1.25rem);
	font-weight: 700;
	color: var(--accent-gold);
}

.footer-links {
	padding: 0;
	margin: 0;
	list-style: none;
}

.footer-links li + li {
	margin-top: .5rem;
}

.footer-links a,
.footer-links__text {
	font-size: 1.0625rem;
	color: var(--text-on-dark);
}

.footer-links a:hover,
.footer-links a:focus-visible {
	color: var(--accent-gold);
}

/* -- Contact column -- */
.footer-contact {
	padding: 0;
	margin: 0;
	list-style: none;
}

.footer-contact li {
	display: flex;
	align-items: flex-start;
	gap: .875rem;
	font-size: 1.0625rem;
	color: var(--text-on-dark);
}

.footer-contact li + li {
	margin-top: .5rem;
}

.footer-contact svg {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: .375rem;
	color: var(--accent-gold);
}

.footer-contact a {
	color: inherit;
}

.footer-contact a:hover,
.footer-contact a:focus-visible {
	color: var(--accent-gold);
}

/* -- Bottom bar -- */
.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: .75rem;
	padding-block: 2.25rem;
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.footer-copyright {
	margin: 0;
	font-size: 1.0625rem;
	color: var(--text-on-dark);
}

.footer-tagline {
	margin: 0;
	font-family: var(--font-secondary);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--accent-gold);
}

/* Footer menu, when an editor assigns one to the "Footer Menu" location. */
.footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

.footer-menu a {
	font-size: 1.0625rem;
	color: var(--text-on-dark);
}

.footer-menu a:hover,
.footer-menu a:focus-visible {
	color: var(--accent-gold);
}