/*
Name: W limicie: stopka strony, style
Slug: wlimicie-stopka-style
Version: 1.0.0
Description: Ciemna stopka z logo, kolumnami linków i paskiem prawnym.
Module: wlimicie-stopka
Scope: front
Load: manual
Media: all

1.0.0: pierwsza wersja.
*/

/* ==========================================================================
   1. ALIASY TOKENÓW (kontrakt v1.1)
   ========================================================================== */
.wlf {
	--wlf-accent: var(--ft-accent, #80601F);
	--wlf-surface: var(--ft-surface, #FFFFFF);
	--wlf-dark: var(--ft-surface-dark, #111111);
	--wlf-text: color-mix(in oklab, var(--wlf-surface) 72%, var(--wlf-dark));
	--wlf-text-soft: color-mix(in oklab, var(--wlf-surface) 58%, var(--wlf-dark));
	--wlf-line: color-mix(in oklab, var(--wlf-surface) 14%, var(--wlf-dark));
	--wlf-font: var(--ft-font-body, 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif);
	--wlf-fs: var(--ft-fs-body, 1rem);
	--wlf-fs-sm: var(--ft-fs-sm, 0.875rem);
	--wlf-fs-xs: var(--ft-fs-xs, 0.8125rem);
	--wlf-fw-medium: var(--ft-fw-medium, 500);
	--wlf-fw-semibold: var(--ft-fw-semibold, 600);
	--wlf-lh: var(--ft-lh-body, 1.65);
	--wlf-caps: var(--ft-track-caps, 0.12em);
	--wlf-s1: var(--ft-space-1, 0.25rem);
	--wlf-s2: var(--ft-space-2, 0.5rem);
	--wlf-s3: var(--ft-space-3, 0.75rem);
	--wlf-s4: var(--ft-space-4, 1rem);
	--wlf-s5: var(--ft-space-5, 1.5rem);
	--wlf-s6: var(--ft-space-6, 2rem);
	--wlf-s7: var(--ft-space-7, 3rem);
	--wlf-s8: var(--ft-space-8, 4rem);
	--wlf-radius-sm: var(--ft-radius-sm, 4px);
	--wlf-ring: 0 0 0 3px color-mix(in oklab, var(--wlf-surface) 45%, transparent);
	--wlf-dur-fast: var(--ft-dur-fast, 160ms);
	--wlf-ease: var(--ft-ease, cubic-bezier(0.4, 0, 0.2, 1));
	--wlf-container: var(--ft-container, 1360px);
	--wlf-gutter: var(--ft-gutter, clamp(1rem, 4vw, 2rem));
	--wlf-logo-h: var(--ft-logo-h, 28px);
	--wlf-about-w: 36ch;
}

/* ==========================================================================
   2. RESET W OBRĘBIE STOPKI (Astra styluje a, ul, p globalnie)
   ========================================================================== */
:where(.wlf) *,
:where(.wlf) *::before,
:where(.wlf) *::after { box-sizing: border-box; }
.wlf p,
.wlf ul,
.wlf li { margin: 0; padding: 0; list-style: none; }
.wlf a { text-decoration: none; }

/* ==========================================================================
   3. UKŁAD
   ========================================================================== */
.wlf {
	padding-block: var(--wlf-s8) var(--wlf-s6);
	background: var(--wlf-dark);
	color: var(--wlf-text);
	font-family: var(--wlf-font);
	font-size: var(--wlf-fs);
	line-height: var(--wlf-lh);
}

.wlf__inner {
	width: 100%;
	max-width: var(--wlf-container);
	margin-inline: auto;
	padding-inline: var(--wlf-gutter);
}

.wlf__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wlf-s7);
	padding-bottom: var(--wlf-s7);
	border-bottom: 1px solid var(--wlf-line);
}

.wlf__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--wlf-s5); }

.wlf .wlf__logo,
.wlf .wlf__logo:hover,
.wlf .wlf__logo:focus,
.wlf .wlf__logo:visited { display: inline-flex; color: var(--wlf-surface); border-radius: var(--wlf-radius-sm); }
.wlf .wlf__logo:focus-visible { outline: none; box-shadow: var(--wlf-ring); }
.wlf__logo-svg { display: block; width: auto; height: var(--wlf-logo-h); }
.wlf__logo-slash { fill: var(--wlf-accent); }

.wlf .wlf__about { max-width: var(--wlf-about-w); color: var(--wlf-text); }

.wlf .wlf__contact { display: flex; flex-direction: column; gap: var(--wlf-s1); }
.wlf .wlf__contact-label { color: var(--wlf-text-soft); font-size: var(--wlf-fs-sm); }
.wlf .wlf__contact-link,
.wlf .wlf__contact-link:visited {
	color: var(--wlf-surface);
	font-weight: var(--wlf-fw-semibold);
	text-decoration: underline;
	text-decoration-color: var(--wlf-line);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
	transition: text-decoration-color var(--wlf-dur-fast) var(--wlf-ease);
}
.wlf .wlf__contact-link:hover,
.wlf .wlf__contact-link:focus { color: var(--wlf-surface); text-decoration-color: var(--wlf-accent); }
.wlf .wlf__contact-link:focus-visible { outline: none; box-shadow: var(--wlf-ring); border-radius: var(--wlf-radius-sm); }

/* Kolumny linków */
.wlf__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wlf-s6) var(--wlf-s5);
}
.wlf__col { display: flex; flex-direction: column; gap: var(--wlf-s3); }
.wlf .wlf__col-title {
	color: var(--wlf-text-soft);
	font-size: var(--wlf-fs-xs);
	font-weight: var(--wlf-fw-medium);
	letter-spacing: var(--wlf-caps);
	text-transform: uppercase;
}
.wlf__list { display: flex; flex-direction: column; }

.wlf .wlf__link,
.wlf .wlf__link:visited {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wlf-text);
	font-size: var(--wlf-fs-sm);
	transition: color var(--wlf-dur-fast) var(--wlf-ease);
}
.wlf .wlf__link:hover,
.wlf .wlf__link:focus { color: var(--wlf-surface); }
.wlf .wlf__link:focus-visible { outline: none; box-shadow: var(--wlf-ring); border-radius: var(--wlf-radius-sm); }

/* Pasek dolny */
.wlf__bottom {
	display: flex;
	flex-direction: column;
	gap: var(--wlf-s3);
	padding-top: var(--wlf-s5);
	color: var(--wlf-text-soft);
	font-size: var(--wlf-fs-xs);
}
.wlf__legal { display: flex; flex-wrap: wrap; gap: 0 var(--wlf-s5); }
.wlf .wlf__legal-link,
.wlf .wlf__legal-link:visited {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wlf-text);
	transition: color var(--wlf-dur-fast) var(--wlf-ease);
}
.wlf .wlf__legal-link:hover,
.wlf .wlf__legal-link:focus { color: var(--wlf-surface); }
.wlf .wlf__legal-link:focus-visible { outline: none; box-shadow: var(--wlf-ring); border-radius: var(--wlf-radius-sm); }

/* ==========================================================================
   4. RESPONSYWNOŚĆ
   ========================================================================== */
@media (min-width: 768px) {
	.wlf__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wlf__bottom {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"copy legal"
			"note note";
		align-items: center;
		column-gap: var(--wlf-s6);
	}
	.wlf__copy { grid-area: copy; }
	.wlf__legal { grid-area: legal; justify-content: flex-end; }
	.wlf__disclaimer { grid-area: note; }
}

@media (min-width: 1024px) {
	.wlf { padding-top: var(--wlf-s8); }
	.wlf__top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--wlf-s8); }
}

@media (prefers-reduced-motion: reduce) {
	.wlf * { transition-duration: 0.01ms !important; }
}