/* ==========================================================================
   Footer
   Jay Anderson Art — jay-anderson-art theme
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Footer wrapper — full-bleed dark background
   -------------------------------------------------------------------------- */

.jaa-footer {
	background-color: var(--color-black);
	color: var(--color-reverse-type);
}

/* --------------------------------------------------------------------------
   2. Main footer area — four-column grid
   -------------------------------------------------------------------------- */

.jaa-footer__main {
	padding-block: var(--space-lg);
	border-bottom: 1px solid rgb(188, 187, 187, 0.15);
}

.jaa-footer__inner {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--space-md);
	align-items: start;
}

/* --------------------------------------------------------------------------
   3. Brand column
   -------------------------------------------------------------------------- */

.jaa-footer__name {
	font-family: var(--font-serif);
	font-size: 1.75rem;
	font-weight: 400;
	color: var(--color-paper-bg);
	margin-block-end: var(--space-xs);
}

.jaa-footer__bio {
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-reverse-type);
	max-width: 28ch;
	margin-block-end: var(--space-sm);
}

/* --------------------------------------------------------------------------
   4. Social links
   -------------------------------------------------------------------------- */

.jaa-footer__social {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jaa-footer__social-link {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-reverse-type);
	text-decoration: none;
	transition: color var(--transition-base);
}

.jaa-footer__social-link:hover {
	color: var(--color-paper-bg);
}

/* --------------------------------------------------------------------------
   5. Nav columns
   -------------------------------------------------------------------------- */

.jaa-footer__nav-heading {
	color: #d4b896;
	font-size: 1rem;
	font-weight: 700;
	margin-block-end: var(--space-sm);
}

.jaa-footer__nav-list {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jaa-footer__nav-list li a {
	font-family: var(--font-sans);
	font-size: 1rem;
	color: var(--color-reverse-type);
	text-decoration: none;
	transition: color var(--transition-base);
}

.jaa-footer__nav-list li a:hover,
.jaa-footer__nav-list li.current-menu-item > a,
.jaa-footer__nav-list li.current_page_item > a {
	color: var(--color-paper-bg);
}

/* --------------------------------------------------------------------------
   6. Bottom bar — copyright and tagline
   -------------------------------------------------------------------------- */

.jaa-footer__bottom {
	padding-block: var(--space-sm);
}

.jaa-footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
}

.jaa-footer__copyright,
.jaa-footer__tagline {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	color: var(--color-reverse-type);
	margin: 0;
}

/* --------------------------------------------------------------------------
   7. Responsive — tablet (≤ 900px): 2-column
   -------------------------------------------------------------------------- */

@media (width <= 900px) {
	.jaa-footer__inner {
		grid-template-columns: 1fr 1fr;
	}

	.jaa-footer__brand {
		grid-column: 1 / -1;
	}

	.jaa-footer__bio {
		max-width: 100%;
	}
}

/* --------------------------------------------------------------------------
   8. Responsive — mobile (≤ 600px): single column
   -------------------------------------------------------------------------- */

@media (width <= 600px) {
	.jaa-footer__inner {
		grid-template-columns: 1fr;
	}

	.jaa-footer__bottom-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-xs);
	}
}