/* ===== Footer =====
 * Real Figma nodes checked 2026-09-21 via Figma MCP: mobile 71:472
 * ("mobile-footer"), desktop 70:384 ("footer"). Sitewide (footer.php
 * override), not scoped to .davi-home - loaded on every page, so
 * nothing here relies on .davi-home-scoped rules from tokens.css.
 * Mobile uses real accordions for all 4 columns (Sklep/Informacje/
 * Pomoc/Kontakt incl.); desktop shows the same 4 columns statically
 * open, side by side - one shared markup/CSS block toggles between the
 * two via display, not duplicated content.
 *
 * Colors below were raw hex until 2026-09-22 (found while investigating
 * a "the footer looks broken" report - the real bug was --page-width
 * being undefined here, see .davi-footer__container, but this file
 * also violated the project's "no raw hex outside tokens.css" rule the
 * whole time, so it's fixed together). --base/--gray-caption/
 * --card-border already existed as :root tokens (added 2026-09-18 for
 * the sitewide product card); --footer-chip-bg/--footer-muted/
 * --footer-muted-mobile are new :root tokens added 2026-09-22
 * specifically for these Figma-real footer colors.
 */
/* .davi-footer itself carries no background/padding - it's the real
   <footer> landmark, but the trust-badges strip (below) needs to be
   its own uncropped/unpadded child so it can float over the dark part
   without inheriting padding meant for the dark content. The actual
   dark background+padding lives on .davi-footer__dark, an inner
   wrapper around everything except the trust-badges strip (2026-09-22
   - was previously a bare `<div class="davi-footer__container">`
   with the background on <footer> itself, before trust-badges moved
   to be a real child of <footer> instead of a sibling before it). */
.davi-footer__dark {
	background: rgb(var(--base));
	/* padding-top +32px (2026-09-22, client request: "zwiększ o 32px") -
	   40px -> 72px. */
	padding: 72px 16px 32px;
}

/* Lazy render (2026-09-22, "czy footer ma ustawione lazy loading") - the
   footer has no <img> at all (icons are inline SVG <use> refs from one
   shared, already-cached sprite - loading="lazy" doesn't apply, there's
   nothing to defer there), but it never had the content-visibility
   mechanism already used for home-page sections (.lazy-section in
   davi-home.css) either - and it's always below the fold, on every
   page now, not just the home page. Can't reuse .lazy-section directly:
   that class only exists in davi-home.css, which is gated to
   is_front_page() and never loads on the category/product/etc. pages
   footer.php renders on - so this is its own rule, directly on #footer,
   in this sitewide-loaded file instead. Heights measured for real
   (not guessed) via a live #footer getBoundingClientRect() at 4
   widths: 390px->931px, 768px->851px, 1024px->765px, 1440px->609px. */
#footer {
	content-visibility: auto;
	contain-intrinsic-size: auto 890px;
}

@media (min-width: 1024px) {
	#footer {
		contain-intrinsic-size: auto 690px;
	}
}

.davi-footer__container {
	max-width: var(--page-width);
	margin-inline: auto;
}

/* ===== Trust badges strip =====
 * Real Figma node checked 2026-09-21: desktop 71:444 ("Trust-Strip") -
 * a white card, found while researching the footer. No dedicated
 * mobile node exists for this one, so mobile just stacks the 3 items
 * (a sensible reflow, not an invented composition). Floats half-over
 * .davi-footer__dark below it via a negative margin-bottom that pulls
 * that normal-flow sibling up underneath it - position:relative +
 * z-index keeps the white card painting above the rising dark
 * background instead of being covered by it.
 *
 * Moved here from davi-home.css/front-page.php (2026-09-22, "na każdej
 * stronie") - now a real child of <footer> in footer.php (not just a
 * sibling before it - a homogeneous 3-item collection is also a real
 * <ul role="list"> now, not a <div> stack, per 07-standardy-frontu.md
 * #12/2.30), so this wrapper carries its own padding-inline (the job
 * .davi-home .davi-section used to do) instead of needing a
 * `padding-bottom:0` override on a borrowed .davi-section class that
 * no longer applies here.
 */
.davi-trust-badges-wrap {
	position: relative;
	z-index: 1;
	padding-inline: var(--page-padding-inline);
	margin-bottom: -40px;
}

.davi-trust-badges {
	display: flex;
	flex-direction: column;
	gap: 24px;
	list-style: none;
	/* margin-block only (2026-09-22) - NOT the `margin: 0` shorthand this
	   shipped with first: that also zeroes margin-inline, which silently
	   wins over .davi-container's own `margin-inline: auto` (same
	   specificity, later in the cascade since this file loads after
	   tokens.css) - the card rendered flush-left instead of centered,
	   caught by the client from a real screenshot at a wide viewport. */
	margin-block: 0;
	background: #fff;
	border: 1px solid rgb(var(--card-border));
	border-radius: 20px;
	padding: 24px;
}

.davi-trust-badges__item {
	display: flex;
	align-items: center;
	gap: 16px;
	/* Flatsome's own sitewide `li { margin-bottom: .6em }` (flatsome.css)
	   bleeds into every <li> including this one, now that it's a real
	   list item - the flex `gap` above already spaces these correctly,
	   so the extra bottom margin only breaks the layout. */
	margin-bottom: 0;
}

.davi-trust-badges__icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 20px;
	background: #f0f2f5;
	flex-shrink: 0;
}

.davi-trust-badges__icon {
	width: 20px;
	height: 20px;
}

.davi-trust-badges__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.davi-trust-badges__text strong {
	font-size: 16px;
	color: rgb(var(--base));
}

.davi-trust-badges__text span {
	font-size: 13px;
	line-height: 1.4;
	color: rgb(var(--gray-caption));
}

@media (min-width: 1024px) {
	.davi-trust-badges-wrap {
		margin-bottom: -56px;
	}

	.davi-trust-badges {
		/* 64px (not 32) - real Figma gap between the 3 feature items
		   (node 71:444: item1 right edge 365.33, item2 left edge
		   429.33, gap = 64.00 exactly; same again between item2/item3). */
		flex-direction: row;
		gap: 64px;
	}

	.davi-trust-badges__item {
		flex: 1 1 0;
		position: relative;
	}

	.davi-trust-badges__item:not(:last-child)::after {
		content: '';
		position: absolute;
		/* -32px = half of the real 64px gap, centering the divider
		   line within it. */
		right: -32px;
		top: 50%;
		translate: 0 -50%;
		width: 1px;
		height: 64px;
		background: rgb(var(--card-border));
	}
}

.davi-footer__main {
	display: flex;
	flex-direction: column;
}

.davi-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 16px;
	/* Real Figma gap (2026-09-22, get_metadata na 71:472): branding
	   kończy się na y=254 (109+145), akordeony zaczynają się na y=286 -
	   różnica to 32px. To NIE jest to samo co odstęp MIĘDZY akordeonami
	   (patrz .davi-footer__column niżej) - tamten wynosi 0, więc jeden
	   wspólny `gap` na .davi-footer__main (jak było wcześniej) dawał 32px
	   wszędzie, łącznie z odstępami między samymi akordeonami, których
	   w Figmie w ogóle nie ma (4 wiersze dokładnie po 49px, przylegające
	   burta w burtę: y=0,49,98,147). */
	margin-bottom: 32px;
}

.davi-footer__logo {
	margin: 0;
	font-family: 'Onest', sans-serif;
	font-weight: 900;
	font-size: 22px;
	color: rgb(var(--discount));
}

.davi-footer__tagline {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: rgb(var(--footer-muted-mobile));
}

.davi-footer__socials {
	display: flex;
	gap: 12px;
}

.davi-footer__socials a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 16px;
	background: rgb(var(--footer-chip-bg));
}

.davi-footer__social-icon {
	width: 16px;
	height: 16px;
}

.davi-footer__column-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	/* padding-inline: 0 - a <button> (Sklep/Informacje/Pomoc) carries a
	   ~16.8px browser-default left/right padding that a <p> (Kontakt,
	   see footer.php) does not, since this class is shared between both
	   tags. Never reset before, so the 3 real accordions' text sat
	   ~16.8px further right than Kontakt's - caught from a real
	   screenshot (2026-09-22), not assumed. */
	padding: 16px 0;
	background: none;
	border: none;
	border-bottom: 1px solid rgb(var(--footer-chip-bg));
	font: inherit;
	font-weight: 700;
	font-size: 14px;
	color: #fff;
	cursor: pointer;
}

/* Kontakt (2026-09-22, "zawsze rozwinięty na mobile") - the same class,
   on a plain <p> instead of a <button> (see footer.php), so it looks
   identical to the other 3 column headings but isn't interactive - no
   chevron, nothing to toggle, always shown open at every breakpoint. */
.davi-footer__column-toggle--static {
	cursor: default;
}

.davi-footer__toggle-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	transition: transform 0.2s;
}

.davi-footer__column.is-open .davi-footer__toggle-icon {
	transform: rotate(180deg);
}

.davi-footer__column-body {
	display: none;
	padding-top: 12px;
}

.davi-footer__column.is-open .davi-footer__column-body,
.davi-footer__column--static .davi-footer__column-body {
	display: block;
}

.davi-footer__links {
	display: flex;
	flex-direction: column;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0 0 8px;
}

.davi-footer__links li {
	/* Flatsome's sitewide `li { margin-bottom: .6em }` bleed - the flex
	   `gap` above already spaces these, see .davi-trust-badges__item
	   for the same fix. */
	margin-bottom: 0;
}

.davi-footer__links a,
.davi-footer__links a:visited {
	font-size: 13px;
	color: rgb(var(--footer-muted));
	text-decoration: none;
}

.davi-footer__contact-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0 0 8px;
}

.davi-footer__contact-list li {
	margin-bottom: 0;
}

.davi-footer__contact-item,
.davi-footer__contact-item:visited {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #fff;
	text-decoration: none;
}

.davi-footer__contact-item--muted {
	color: rgb(var(--footer-muted));
	font-size: 12px;
}

.davi-footer__contact-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.davi-footer__divider {
	margin-top: 32px;
	border-top: 1px solid rgb(var(--footer-chip-bg));
}

.davi-footer__bottom {
	padding-top: 24px;
	text-align: center;
}

.davi-footer__bottom p {
	margin: 0;
	font-size: 11px;
	/* --gray-caption (#636971) measured at 3.38:1 on this dark background
	   - fails WCAG AA's 4.5:1 minimum for normal text (it's a real Figma
	   value, correct for that token's actual use case: caption text on
	   the WHITE product card, not on a dark footer). --footer-muted is
	   the token already used for every other muted-on-dark-footer text
	   (tagline, links) at a real 6.69:1 - reused here for the same
	   reason, not introduced new (2026-09-22). */
	color: rgb(var(--footer-muted));
}

/* Ikony płatności w stopce (2026-09-22, client: "umieść je w stopce
   tak, żeby wyglądało to dobrze") - brak węzła w Figmie dla stopki
   (obrazek klienta jest zrobiony pod jasne tło sekcji produktu - część
   logotypów - PayPo, mastercard - ma przezroczyste tło z ciemnym
   tekstem, więc wprost na czarnym tle stopki byłyby nieczytelne).
   Własna decyzja: mała biała "karta" wokół obrazka, ten sam język
   wizualny co pływająca karta trust-badges nad stopką - gwarantuje
   kontrast niezależnie od tego, które konkretne logo akurat wgra
   klient, zamiast zakładać, że każde logo ma czytelne kolory na
   czarnym tle. */
.davi-footer__payments {
	display: flex;
	justify-content: center;
	margin-top: 16px;
}

.davi-footer__payments-img {
	display: block;
	max-height: 28px;
	width: auto;
	/* Przyciemnione względem czystej bieli (2026-09-23, client: "może
	   jest zbyt białe", potem "jeszcze trochę ciemniejszy") - najpierw
	   #f0f2f5 (ten sam co .davi-trust-badges__icon-wrap), teraz
	   --card-border, istniejący token :root (#E5E9EE, z Figmy node
	   1:236) - realnie ciemniejszy, nie nowa wymyślona wartość. */
	background: rgb(var(--card-border));
	border-radius: 8px;
	padding: 8px 12px;
}

@media (min-width: 1024px) {
	.davi-footer__payments {
		margin-top: 0;
	}

	/* padding-top real z Figmy (2026-09-22, get_metadata na node 70:384 +
	   71:444): karta trust-badges kończy się na y=4953 (4841+112), a
	   footer-main zaczyna się na y=5031 (4897+134) - odległość między
	   nimi to dokładnie 78px, nie 64px jak było wcześniej (zgadywane z
	   przybliżenia, nie zmierzone). 56px zachodzenia karty na stopkę
	   (.davi-trust-badges-wrap margin-bottom) jest już poprawne (patrz
	   tam), więc realny padding-top = 56 (zachodzenie) + 78 (odstęp) =
	   134px, żeby faktyczny odstęp między dołem karty a górą treści
	   stopki wyszedł na prawdziwe 78px. */
	.davi-footer__dark {
		padding: 134px 80px 32px;
	}

	.davi-footer__main {
		flex-direction: row;
		justify-content: space-between;
		gap: 32px;
	}

	.davi-footer__brand {
		flex: 0 0 300px;
	}

	.davi-footer__tagline {
		font-size: 13px;
		color: rgb(var(--footer-muted));
	}

	/* Icon-only at desktop (no chip background) - a real per-breakpoint
	   difference in Figma, not a reflow. */
	.davi-footer__socials a {
		width: auto;
		height: auto;
		background: none;
		border-radius: 0;
	}

	.davi-footer__social-icon {
		width: 18px;
		height: 18px;
	}

	.davi-footer__column {
		flex: 1 1 140px;
	}

	/* Desktop columns are always open, plain uppercase headings, not
	   interactive toggles - the mobile accordion behavior (JS-gated by
	   its own matchMedia check in footer.php) never fires here anyway,
	   this just makes the static appearance/cursor match too. */
	.davi-footer__column-toggle {
		padding: 0;
		border-bottom: none;
		text-transform: uppercase;
		cursor: default;
		pointer-events: none;
	}

	.davi-footer__toggle-icon {
		display: none;
	}

	.davi-footer__column-body {
		display: block !important;
		padding-top: 12px;
	}

	.davi-footer__links {
		padding-bottom: 0;
	}

	.davi-footer__contact-list {
		padding-bottom: 0;
	}

	.davi-footer__divider {
		margin-top: 48px;
	}

	.davi-footer__bottom {
		display: flex;
		justify-content: space-between;
		text-align: left;
	}
}