/* ───────────────────────────────────────────────────────────────
   footer.css — Site footer (purple band, BLIK logo, 3 link columns)
   ───────────────────────────────────────────────────────────────
   The footer markup lives in `parts/footer.html` and uses native
   block markup (group / paragraph / heading / list), so you can
   edit the links visually in the Site Editor.

   Common edits:
     • background color     → `.blik-site-footer`
     • logo size            → `.blik-footer-logo` font-size
     • column headings      → `.blik-footer-col h4`
     • footer text color    → `.blik-footer-col a`
   ─────────────────────────────────────────────────────────────── */

/* The footer template part is wrapped in `<footer class="wp-block-template-part">`,
   and that wrapper is the top-level block that picks up the root block-gap
   margin — leaving a paper-coloured strip between the content and the footer.
   Zero it on the wrapper so the purple footer sits flush against the content. */
footer.wp-block-template-part {
	margin-block-start: 0;
	margin-top: 0;
}

.blik-site-footer {
	background: var(--blik-color-purple);
	margin-block-start: 0;
	margin-top: 0;
}

.blik-footer-inner {
	background: var(--blik-color-purple);
	max-width: var(--blik-max);
	margin: 0 auto;
	padding: clamp(28px, 3.5vw, 44px) var(--blik-gutter) clamp(20px, 2.5vw, 32px);
	box-sizing: border-box;
}

/* Four items in one flex row — logo + Contact + Account + Overig.
   `justify-content: space-between` distributes the spacing equally
   between consecutive items, so the gap from BLIK to Contact equals
   the gap from Contact to Account, etc. */
.blik-footer-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: clamp(24px, 4vw, 64px);
	flex-wrap: wrap;
}

/* Typography for `.blik-footer-logo`, `.blik-footer-col h4` and
   `.blik-footer-col a` lives in theme.json's root `styles.css`.
   Layout (flex + gaps + margin resets) stays here. */
.blik-footer-logo {
	flex-shrink: 0;
	margin: 0;
}

/* All rows in a column (title row + each link) share a single vertical
   gap. The title has zero margin and the ul has no inner gap — the
   parent flex container's `gap` controls every gap uniformly. */
.blik-footer-col.wp-block-group {
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	gap: var(--blik-spacing-sm);
	min-width: 150px;
	margin: 0;
}

.blik-footer-col.wp-block-group > * {
	margin: 0;
}

.blik-footer-col h4 {
	margin: 0;
}

.blik-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--blik-spacing-sm);
}

.blik-footer-col li {
	margin: 0;
}

.blik-footer-col a {
	transition: color var(--blik-transition-fast);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
	.blik-footer-top {
		flex-direction: column;
		gap: var(--blik-spacing-2xl);
	}
}