/* =============================================================================
   TinySpacer — footer.css
   -----------------------------------------------------------------------------
   Styling for the site footer (footer.php): the top CTA band, the four-column
   main footer, and the bottom bar.

   Scope: this file styles ONLY .ts-footer and its children. It composes with
   global.css tokens and the shared .ts-btn component — it never redefines a
   shared component.

   Mobile-first. Min-width media queries only. No framework.

   Contents:
     1. Footer shell
     2. Top CTA band
     3. Main footer grid
     4. Brand column
     5. Link columns (headings + lists)
     6. Pinterest link
     7. Bottom bar
     8. Forced-colors
   ========================================================================== */

/* =============================================================================
   1. FOOTER SHELL
   ========================================================================== */

.ts-footer {
	margin-block-start: var(--ts-space-12);
	color: var(--ts-color-text);
	background-color: var(--ts-color-surface);
	border-block-start: 1px solid var(--ts-color-border);
}

/* =============================================================================
   2. TOP CTA BAND
   ========================================================================== */

.ts-footer-cta {
	background-color: var(--ts-color-primary-soft);
	border-block-end: 1px solid var(--ts-color-border);
}

.ts-footer-cta__inner {
	display: flex;
	flex-direction: column;
	gap: var(--ts-space-5);
	padding-block: var(--ts-section-y-sm);
}

.ts-footer-cta__title {
	margin: 0 0 var(--ts-space-3);
	font-family: var(--ts-font-heading);
	font-size: var(--ts-text-3xl);
	font-weight: var(--ts-weight-bold);
	line-height: var(--ts-leading-tight);
	letter-spacing: var(--ts-tracking-tight);
	color: var(--ts-color-heading);
	text-wrap: balance;
}

.ts-footer-cta__desc {
	margin: 0;
	max-width: 52ch;
	font-size: var(--ts-text-lg);
	line-height: var(--ts-leading-snug);
	color: var(--ts-color-text-muted);
}

.ts-footer-cta__action {
	flex-shrink: 0;
}

/* Side-by-side once there's room; button hugs the right. */
@media (min-width: 48em) { /* 768px */
	.ts-footer-cta__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--ts-space-8);
	}

	.ts-footer-cta__title {
		margin-bottom: var(--ts-space-2);
	}
}

/* =============================================================================
   3. MAIN FOOTER GRID
   -----------------------------------------------------------------------------
   1 column (mobile) → 2 columns (>=40em) → brand + 3 link columns (>=64em).
   ========================================================================== */

.ts-footer__main {
	padding-block: var(--ts-section-y);
}

.ts-footer__grid {
	display: grid;
	gap: var(--ts-space-8);
	grid-template-columns: 1fr;
}

@media (min-width: 40em) { /* 640px */
	.ts-footer__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--ts-space-8) var(--ts-space-6);
	}
}

@media (min-width: 64em) { /* 1024px */
	.ts-footer__grid {
		/* Wider brand column, then three even link columns. */
		grid-template-columns: 1.6fr 1fr 1fr 1fr;
		gap: var(--ts-space-10);
	}
}

/* =============================================================================
   4. BRAND COLUMN
   ========================================================================== */

.ts-footer__brand .custom-logo-link {
	display: inline-block;
	margin-block-end: var(--ts-space-4);
}

.ts-footer__brand .custom-logo {
	height: auto;
	max-width: 200px;
}

.ts-footer__logo {
	margin: 0 0 var(--ts-space-4);
	font-family: var(--ts-font-heading);
	font-size: var(--ts-text-xl);
	font-weight: var(--ts-weight-bold);
	letter-spacing: var(--ts-tracking-tight);
}

.ts-footer__logo a {
	color: var(--ts-color-heading);
	text-decoration: none;
}

.ts-footer__logo a:hover {
	color: var(--ts-color-primary);
}

.ts-footer__tagline {
	margin: 0;
	max-width: 42ch;
	font-size: var(--ts-text-base);
	line-height: var(--ts-leading-normal);
	color: var(--ts-color-text-muted);
}

/* =============================================================================
   5. LINK COLUMNS
   ========================================================================== */

.ts-footer__heading {
	margin: 0 0 var(--ts-space-4);
	font-family: var(--ts-font-heading);
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ts-tracking-caps);
	color: var(--ts-color-heading);
}

.ts-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--ts-space-3);
}

.ts-footer__link {
	display: inline-flex;
	align-items: center;
	gap: var(--ts-space-2);
	color: var(--ts-color-text-muted);
	text-decoration: none;
	font-size: var(--ts-text-base);
	line-height: var(--ts-leading-snug);
	transition: color var(--ts-transition-fast);
}

.ts-footer__link:hover,
.ts-footer__link:focus-visible {
	color: var(--ts-color-link);
}

.ts-footer__link:focus-visible {
	outline: none;
	border-radius: var(--ts-radius-sm);
	box-shadow: var(--ts-shadow-focus);
}

/* =============================================================================
   6. PINTEREST LINK
   ========================================================================== */

.ts-footer__link--pinterest:hover,
.ts-footer__link--pinterest:focus-visible {
	color: #e60023; /* Pinterest brand red — scoped locally, never a token. */
}

.ts-footer__social-icon {
	flex-shrink: 0;
}

/* =============================================================================
   7. BOTTOM BAR
   ========================================================================== */

.ts-footer__bottom {
	border-block-start: 1px solid var(--ts-color-border);
	background-color: var(--ts-color-surface-alt);
}

.ts-footer__bar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ts-space-4);
	padding-block: var(--ts-space-5);
	text-align: center;
}

.ts-footer__copyright {
	margin: 0;
	font-size: var(--ts-text-sm);
	color: var(--ts-color-text-subtle);
}

.ts-footer__menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ts-space-2) var(--ts-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-footer__menu a {
	color: var(--ts-color-text-muted);
	text-decoration: none;
	font-size: var(--ts-text-sm);
	transition: color var(--ts-transition-fast);
}

.ts-footer__menu a:hover,
.ts-footer__menu a:focus-visible {
	color: var(--ts-color-link);
}

.ts-footer__menu a:focus-visible {
	outline: none;
	border-radius: var(--ts-radius-sm);
	box-shadow: var(--ts-shadow-focus);
}

/* Space the bar out horizontally once there's room. */
@media (min-width: 48em) { /* 768px */
	.ts-footer__bar {
		flex-direction: row;
		justify-content: space-between;
		text-align: start;
	}

	.ts-footer__menu {
		justify-content: flex-end;
	}
}

/* =============================================================================
   8. FORCED-COLORS
   ========================================================================== */

@media (forced-colors: active) {
	.ts-footer,
	.ts-footer-cta,
	.ts-footer__bottom {
		border-color: CanvasText;
	}
}