/* =================================================================
   File:    09-footer.css
   Purpose: Site footer — full-bleed (edge-to-edge), glass surface,
            4-column grid for menus, copyright strip. v0.1 baseline.
   ================================================================= */

.liqui-footer {
	width: 100%;
	max-width: none;
	margin: var(--space-9) 0 0;
	border-radius: 0;            /* full-bleed bar — defeat any .glass override */
	box-shadow: none;
	background: var(--footer-bg, #dde2ea);
	color: var(--footer-text, var(--c-ink-muted));
	border: 0;
	border-top: 1px solid var(--c-line);
}

.liqui-footer__inner {
	/* Footer bar stays edge-to-edge; the content aligns to the same
	   1600px container as the rest of the page so it never over-stretches. */
	max-width: var(--content-max);
	margin-inline: auto;
	padding-block: var(--space-6) var(--space-5);
}

.liqui-footer__columns {
	grid-template-columns: repeat(var(--footer-columns, 4), minmax(0, 1fr));
	margin-bottom: var(--space-6);
}
.liqui-footer__title {
	font-size: var(--fs-md);
	font-weight: var(--fw-semi);
	margin: 0 0 var(--space-3);
	color: var(--c-ink);
}

/* Accordion heading — a real <button> on every viewport, but it only
   behaves like an accordion toggle on mobile. On desktop it is reset to
   look exactly like the old <h4> heading and the chevron is hidden. */
.liqui-footer__acc-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	width: 100%;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: var(--fs-md);
	font-weight: var(--fw-semi);
	color: var(--c-ink);
	text-align: start;
	cursor: default;          /* desktop: not interactive */
}
.liqui-footer__acc-chevron { display: none; }   /* desktop: no chevron */

.liqui-footer__menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--space-2);
}
.liqui-footer__menu a {
	color: var(--footer-text, var(--c-ink-muted));
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease);
}
.liqui-footer__menu a:hover { color: var(--c-accent); }

.liqui-footer__copyright {
	border-top: 1px solid var(--c-line);
	padding-top: var(--space-4);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
	justify-content: space-between;
}

/* =========================================================
   BOTTOM BAR — full-width darker band holding the copyright,
   so it reads as a distinct strip beneath the footer body.
   ========================================================= */
.liqui-footer__bottom {
	background: #20283c;                       /* deep navy — echoes the brand logo */
	padding-inline: var(--fullbleed-padding);
}
.liqui-footer__bottom-inner {
	max-width: var(--content-max);
	margin-inline: auto;
	padding-block: var(--space-4);
}
/* Inside the dark band the hairline divider is redundant and the text
   needs to flip to a light tone for contrast. */
.liqui-footer__bottom .liqui-footer__copyright {
	border-top: 0;
	padding-top: 0;
	justify-content: center;
	text-align: center;
}
.liqui-footer__bottom .liqui-footer__copyright,
.liqui-footer__bottom .liqui-footer__copyright p {
	color: rgba(255, 255, 255, 0.72);
}

/* Brand block in column 1 */
.liqui-footer__brand .custom-logo,
.liqui-footer__brand .liqui-footer__logo-img { max-height: 56px; width: auto; margin-bottom: var(--space-3); }
.liqui-footer__social {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-4);
}
.liqui-footer__tagline {
	margin: var(--space-2) 0 var(--space-4);
	font-size: var(--fs-sm);
	line-height: 1.6;
	max-width: 32ch;
}
.liqui-footer__contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.liqui-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--footer-text, var(--c-ink-muted));
}
.liqui-footer__contact-ic {
	flex: 0 0 auto;
	display: inline-flex;
	margin-top: 1px;
	color: var(--c-accent);
}
.liqui-footer__contact a {
	color: var(--footer-text, var(--c-ink-muted));
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease);
}
.liqui-footer__contact a:hover { color: var(--c-accent); }
/* Long emails / addresses wrap inside the column instead of overflowing. */
.liqui-footer__contact li > :last-child { min-width: 0; overflow-wrap: anywhere; }

/* =========================================================
   NEWSLETTER (sits above the footer surface, "lifted")
   ========================================================= */
.liqui-newsletter-section {
	margin-top: calc(var(--space-9) * -1);
	margin-bottom: calc(var(--space-8) * -1);
	position: relative;
	z-index: var(--z-raised);
}
.liqui-newsletter {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: var(--space-6);
	align-items: center;
	padding: var(--space-6);
	background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
}
.liqui-newsletter__form {
	display: flex;
	gap: var(--space-2);
}
.liqui-newsletter__form input { flex: 1; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
	/* Tablets: 4 columns → 2 (skip the lopsided 3-up). */
	.liqui-footer__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.liqui-newsletter { grid-template-columns: 1fr; padding: var(--space-5); }
	.liqui-footer__inner { padding-block: var(--space-6) var(--space-5); }

	/* Single column: brand block on top, then 3 accordion sections.
	   !important defeats the generic .liqui-grid--4 rule in 03-layout.css. */
	.liqui-footer__columns {
		grid-template-columns: 1fr !important;
		gap: 0;
		margin-bottom: var(--space-5);
	}

	/* Brand block — centred above the accordion. */
	.liqui-footer__brand {
		text-align: center;
		padding-bottom: var(--space-5);
	}
	.liqui-footer__brand .custom-logo,
	.liqui-footer__brand .liqui-footer__logo-img { margin-inline: auto; }
	.liqui-footer__tagline { margin-inline: auto; }
	.liqui-footer__contact { justify-items: center; }
	.liqui-footer__contact li { justify-content: center; }
	.liqui-footer__social { justify-content: center; }

	/* Each link column becomes a tappable collapsible row. */
	.liqui-footer__acc { border-top: 1px solid var(--c-line); }
	.liqui-footer__acc:last-child { border-bottom: 1px solid var(--c-line); }
	.liqui-footer__acc-btn {
		cursor: pointer;
		margin: 0;
		padding-block: var(--space-2);   /* compact rows */
	}
	.liqui-footer__acc-chevron {
		display: inline-flex;
		flex: 0 0 auto;
		color: var(--c-ink-muted);
		transition: transform var(--dur) var(--ease);
	}
	.liqui-footer__acc:not(.is-collapsed) .liqui-footer__acc-chevron {
		transform: rotate(180deg);
	}

	/* Collapsible panel — animated open/closed via max-height.
	   max-height:0 + overflow:hidden collapses cleanly on every browser.
	   (The grid 1fr/0fr trick left a sliver of the first link showing
	   on mobile, so we use the bulletproof max-height method instead.)
	   440px clears the tallest footer menu with room to spare. */
	.liqui-footer__acc-panel {
		overflow: hidden;
		max-height: 440px;
		transition: max-height var(--dur) var(--ease);
	}
	.liqui-footer__acc.is-collapsed .liqui-footer__acc-panel {
		max-height: 0;
	}
	.liqui-footer__menu { padding-bottom: var(--space-4); }

	.liqui-payment-strip {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--space-3);
	}
	.liqui-payment-strip__icons { justify-content: center; }
	.liqui-footer__copyright { justify-content: center; text-align: center; }
}
@media (max-width: 560px) {
	.liqui-newsletter__form { flex-direction: column; }
	.liqui-newsletter__form .btn { width: 100%; justify-content: center; }
}

/* =========================================================
   BRAND STRIP (above footer columns)
   ========================================================= */
.liqui-brand-strip {
	padding-block: var(--space-5) var(--space-6);
	border-bottom: 1px solid var(--c-line);
	margin-bottom: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	align-items: center;
}
.liqui-brand-strip__items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
	align-items: center;
	justify-content: center;
}
.liqui-brand-strip__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--c-ink-muted);
	text-decoration: none;
	font-weight: var(--fw-semi);
	letter-spacing: 0.02em;
	font-size: var(--fs-md);
	transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.liqui-brand-strip__item:hover { color: var(--c-accent); transform: translateY(-2px); }
.liqui-brand-strip__item img { max-height: 40px; width: auto; object-fit: contain; }

/* =========================================================
   PAYMENT STRIP
   ========================================================= */
.liqui-payment-strip {
	margin-top: var(--space-6);
	padding-block: var(--space-5);
	border-top: 1px solid var(--c-line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: center;
	justify-content: space-between;
}
.liqui-payment-strip__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.liqui-payment-strip__icons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
.liqui-payment-pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	color: var(--c-ink-muted);
	background: var(--c-surface-1);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	letter-spacing: 0.02em;
}