/*
 * CaseCreator — Footer Stylesheet
 *
 * Covers: site footer grid, brand column, menu columns,
 * newsletter signup, bottom bar, payment badges, social links.
 *
 * Depends on: main.css (custom properties live there).
 */

/* =========================================================================
   Site Footer — Shell
   ========================================================================= */
.site-footer {
	background-color: var( --cc-primary );
	color: var( --cc-white );
	padding-top: var( --cc-space-xl );
	font-size: 0.9375rem;
}

/* =========================================================================
   Inner Grid — 5 columns: brand | menu | menu | menu | newsletter
   ========================================================================= */
.site-footer__inner {
	display: grid;
	grid-template-columns: 1.4fr repeat( 3, 1fr ) 1.4fr;
	gap: var( --cc-space-lg );
	padding-bottom: var( --cc-space-xl );
	align-items: start;
}

/* =========================================================================
   Brand Column
   ========================================================================= */
.site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var( --cc-space-md );
}

.site-footer__brand-link {
	display: inline-flex;
}

.site-footer__logo {
	max-height: 44px;
	width: auto;
}

.site-footer__wordmark {
	font-size: 1.375rem;
	font-weight: 700;
	font-family: var( --cc-font-display );
	color: var( --cc-white );
	letter-spacing: -0.02em;
}

.site-footer__description {
	color: rgba( 255, 255, 255, 0.6 );
	font-size: 0.9rem;
	line-height: 1.7;
	max-width: 28ch;
}

/* =========================================================================
   Menu Columns
   ========================================================================= */
.site-footer__menu-col {
	display: flex;
	flex-direction: column;
	gap: var( --cc-space-sm );
}

.site-footer .site-footer__menu-col h3 {
	margin: 3px 0 18px;
	font-family: var( --cc-font-primary );
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #ffffff;
}

.footer-menu {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.footer-menu li a {
	display: block;
	padding-block: 0.4rem;
	font-size: 0.9rem;
	color: rgba( 255, 255, 255, 0.75 );
	transition: color var( --cc-transition );
}

.footer-menu li a:hover {
	color: var( --cc-accent );
}

/* =========================================================================
   Newsletter Column
   ========================================================================= */
.site-footer__newsletter {
	display: flex;
	flex-direction: column;
	gap: var( --cc-space-sm );
}

.site-footer .site-footer__newsletter h3 {
	margin: 3px 0 18px;
	font-family: var( --cc-font-primary );
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #ffffff;
}

.site-footer__newsletter p {
	font-size: 0.875rem;
	color: rgba( 255, 255, 255, 0.6 );
	line-height: 1.6;
}

.site-footer__newsletter-form {
	display: flex;
	gap: 0;
	margin-top: 0.25rem;
}

.site-footer__newsletter-form input[type="email"] {
	flex: 1;
	height: 44px;
	padding-inline: 1rem;
	background: rgba( 255, 255, 255, 0.08 );
	border: 1px solid rgba( 255, 255, 255, 0.15 );
	border-right: none;
	border-radius: var( --cc-radius-md ) 0 0 var( --cc-radius-md );
	color: var( --cc-white );
	font-size: 0.875rem;
	font-family: var( --cc-font-primary );
	outline: none;
	transition: border-color var( --cc-transition ), background-color var( --cc-transition );
	min-width: 0;
}

.site-footer__newsletter-form input[type="email"]::placeholder {
	color: rgba( 255, 255, 255, 0.4 );
}

.site-footer__newsletter-form input[type="email"]:focus {
	border-color: var( --cc-accent );
	background: rgba( 255, 255, 255, 0.12 );
}

.site-footer__newsletter-form button {
	flex-shrink: 0;
	height: 44px;
	padding-inline: 1.25rem;
	background-color: var( --cc-accent );
	color: var( --cc-primary );
	font-size: 0.875rem;
	font-weight: 700;
	font-family: var( --cc-font-primary );
	border-radius: 0 var( --cc-radius-md ) var( --cc-radius-md ) 0;
	border: none;
	cursor: pointer;
	transition: background-color var( --cc-transition ), opacity var( --cc-transition );
	white-space: nowrap;
}

.site-footer__newsletter-form button:hover {
	opacity: 0.88;
}

/* =========================================================================
   Social Links (inside footer brand column)
   ========================================================================= */
.site-footer__social.social-links {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.site-footer__social .social-links__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	color: rgba( 255, 255, 255, 0.8 );
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.site-footer__social .social-links__link:hover {
	background-color: var( --cc-accent );
	border-color: var( --cc-accent );
	color: #fff;
}

/* Fallback for global .social-links (mobile menu, etc.) */
.social-links {
	display: flex;
	gap: var( --cc-space-sm );
}

.social-links__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba( 255, 255, 255, 0.2 );
	color: rgba( 255, 255, 255, 0.7 );
	transition: border-color var( --cc-transition ), color var( --cc-transition );
}

.social-links__link:hover {
	border-color: var( --cc-white );
	color: var( --cc-white );
}

/* =========================================================================
   Bottom Bar
   ========================================================================= */
.site-footer__bottom {
	border-top: 1px solid rgba( 255, 255, 255, 0.1 );
}

.site-footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --cc-space-md );
	padding-block: var( --cc-space-md );
}

.site-footer__copyright {
	font-size: 0.8125rem;
	color: rgba( 255, 255, 255, 0.45 );
}

/* =========================================================================
   Payment Method Badges
   ========================================================================= */
.site-footer__payments {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	flex-wrap: wrap;
}

.site-footer__payments span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.2rem 0.55rem;
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	border-radius: 4px;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: rgba( 255, 255, 255, 0.6 );
	white-space: nowrap;
	min-height: 22px;
}

/* =========================================================================
   Responsive
   ========================================================================= */

/* ── Tablet: 2 cols top (brand + newsletter), 3-col menus below ── */
@media ( max-width: 1024px ) {
	.site-footer__inner {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"brand newsletter"
			"menus menus menus";
	}

	.site-footer__brand {
		grid-area: brand;
	}

	.site-footer__newsletter {
		grid-area: newsletter;
	}

	.site-footer__menu-col {
		grid-area: unset;
	}

	/* Reflow the 3 menu cols into a sub-grid */
	.site-footer__inner > .site-footer__menu-col {
		grid-column: auto;
	}

	.site-footer__inner {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.site-footer__brand,
	.site-footer__newsletter {
		grid-column: span 1;
	}
}

@media ( max-width: 900px ) {
	.site-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: var( --cc-space-lg );
	}

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

	.site-footer__newsletter {
		grid-column: 1 / -1;
	}

	.site-footer__description {
		max-width: 100%;
	}

	.site-footer__newsletter-form {
		max-width: 420px;
	}
}

/* ── Mobile: single column ────────────────────────────────────── */
@media ( max-width: 600px ) {
	.site-footer__inner {
		grid-template-columns: 1fr;
	}

	.site-footer__brand,
	.site-footer__menu-col,
	.site-footer__newsletter {
		grid-column: 1;
	}

	.site-footer__bottom-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var( --cc-space-sm );
	}

	.site-footer__newsletter-form {
		max-width: 100%;
	}
}