/*
 * Footer (Design.md §8.16): crna podloga (Danilo, 16.10.), logo, kolone Ski · Fitness & Yoga · Kupovina · Kontakt,
 * dno sa pravnim linkovima, podacima firme i © (caption, grey-400). Bez newsletter-a (27.10.).
 * Telefon: kolone su harmonike kao na stranici proizvoda (red, + / −, tanke linije). Od md obične kolone.
 * md = 42rem, lg = 66rem.
 */

.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: var(--wp--preset--spacing--10);
}

.kl-footer {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

/* Razmake postavlja raspored, ne podrazumevani blockGap između blokova. */
.kl-footer > *,
.kl-footer .wp-block-group > * {
	margin-block: 0;
}

.kl-footer__gore,
.kl-footer__dno {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}

.kl-footer__gore {
	padding-block: var(--wp--preset--spacing--09) 0;
}

/* Logo: isti kao u header-u (tekst dok ne stigne SVG), beo na crnoj podlozi */
.kl-footer__logo {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--touch-target);
	margin-bottom: var(--wp--preset--spacing--06);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--logo);
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.kl-footer__logo .kl-logo__slika {
	display: block;
	width: auto;
	height: 1.5rem;
	filter: invert(1);
}

/* Harmonika (telefon) */
.kl-footer__kolona {
	border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-800);
}

.kl-footer__kolona:first-of-type {
	border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-800);
}

.kl-footer__kolona > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 3.5rem;
	font-size: var(--wp--preset--font-size--h-5);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--h-5);
	list-style: none;
	cursor: pointer;
}

.kl-footer__kolona > summary::-webkit-details-marker {
	display: none;
}

.kl-footer__kolona > summary::after {
	content: "+";
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 400;
}

.kl-footer__kolona[open] > summary::after {
	content: "−";
}

.kl-footer__kolona > summary:focus-visible {
	outline-color: var(--wp--preset--color--white);
}

.kl-footer__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--line-height--caption);
}

.kl-footer__kolona .kl-footer__lista {
	padding-bottom: var(--wp--preset--spacing--04);
}

/* Linkovi bez podvlačenja: beli, na hover grey-400. Touch zona 2.75rem na telefonu. */
.kl-footer__lista a {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--touch-target);
	color: var(--wp--preset--color--white);
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color var(--wp--custom--motion--fast) var(--wp--custom--motion--easing);
}

.kl-footer__lista a:hover {
	color: var(--wp--preset--color--grey-400);
}

.kl-footer__lista a:focus-visible,
.kl-footer__logo:focus-visible {
	outline-color: var(--wp--preset--color--white);
}

/* Dno: pravni linkovi, podaci firme, © */
.kl-footer__dno {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--03);
	padding-block: var(--wp--preset--spacing--06) var(--wp--preset--spacing--07);
	color: var(--wp--preset--color--grey-400);
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--wp--custom--line-height--caption);
	letter-spacing: var(--wp--custom--letter-spacing--caption);
}

.kl-footer__dno .kl-footer__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--wp--preset--spacing--05);
	font-size: inherit;
}

.kl-footer__firma,
.kl-footer__copy {
	margin: 0;
}

/* md: logo u svom redu, ispod 4 kolone. Harmonike su uvek otvorene (footer.js; ::details-content da ne trepne). */
@media (min-width: 42rem) {
	.kl-footer__gore {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--07) var(--wp--preset--spacing--05);
		padding-block: var(--wp--preset--spacing--09) var(--wp--preset--spacing--08);
	}

	.kl-footer__logo {
		grid-column: 1 / -1;
		justify-self: start;
		margin-bottom: 0;
	}

	.kl-footer__kolona,
	.kl-footer__kolona:first-of-type {
		border: 0;
	}

	.kl-footer__kolona::details-content {
		content-visibility: visible;
	}

	.kl-footer__kolona > summary {
		display: block;
		min-height: 0;
		margin-bottom: var(--wp--preset--spacing--03);
		font-size: var(--wp--preset--font-size--nav);
		cursor: default;
	}

	.kl-footer__kolona > summary::after,
	.kl-footer__kolona[open] > summary::after {
		content: none;
	}

	.kl-footer__lista {
		font-size: var(--wp--preset--font-size--nav-sub);
	}

	.kl-footer__kolona .kl-footer__lista {
		padding-bottom: 0;
	}

	.kl-footer__lista a {
		min-height: 0;
		padding-block: var(--wp--preset--spacing--02);
	}

	.kl-footer__dno::before {
		content: "";
		display: block;
		margin-bottom: var(--wp--preset--spacing--03);
		border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-800);
	}

	.kl-footer__dno {
		padding-block-start: 0;
	}
}

/* lg: logo levo (šira kolona), pa 4 kolone; dno u jednom redu */
@media (min-width: 66rem) {
	.wp-site-blocks > footer.wp-block-template-part {
		margin-block-start: var(--wp--preset--spacing--12);
	}

	.kl-footer__gore {
		grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--06);
		padding-block: var(--wp--preset--spacing--10) var(--wp--preset--spacing--09);
	}

	.kl-footer__logo {
		grid-column: auto;
		align-self: start;
		min-height: 0;
	}

	.kl-footer__dno {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--03) var(--wp--preset--spacing--07);
	}

	.kl-footer__dno::before {
		flex-basis: 100%;
	}

	.kl-footer__firma {
		margin-inline-end: auto;
	}
}