/**
 * DeShop — footer.css
 *
 * Columns footer (brand + widget columns + bottom bar) and simple footer.
 * On mobile, widget titles become tap-to-expand sections (navigation.js
 * adds the behaviour; without JS everything stays visible).
 *
 * @package DeShop
 */

.site-footer {
	margin-top: auto;
	background: var(--ds-surface);
	border-top: 1px solid var(--ds-border);
	color: var(--ds-text);
	font-size: var(--ds-fs-sm);
}

.site-footer a {
	color: var(--ds-text);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--ds-primary);
	text-decoration: underline;
}

/* Columns layout ------------------------------------------------------------------ */

.footer-main {
	padding-block: var(--ds-space-2xl);
}

.footer-grid {
	display: grid;
	gap: var(--ds-space-lg);
}

@media (min-width: 768px) {
	.footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ds-space-xl);
	}

	.footer-brand {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.footer-main {
		padding-block: var(--ds-space-3xl);
	}

	.footer-grid {
		grid-template-columns: minmax(0, 1.4fr) repeat(var(--footer-cols, 4), minmax(0, 1fr));
		gap: var(--ds-space-2xl);
	}

	.footer-brand {
		grid-column: auto;
	}
}

.footer-brand {
	display: flex;
	flex-direction: column;
	gap: var(--ds-space-md);
	max-width: 360px;
}

.footer-brand__about {
	color: var(--ds-text-muted);
	line-height: 1.7;
}

/* Widgets inside footer columns. */
.footer-col .widget + .widget {
	margin-top: var(--ds-space-lg);
}

.footer-col .widget-title,
.footer-col .wp-block-heading {
	margin-bottom: var(--ds-space-md);
	font-family: var(--ds-font-body);
	font-size: var(--ds-fs-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ds-text);
}

.footer-col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-col li + li,
.footer-col ul ul {
	margin-top: var(--ds-space-xs);
}

.footer-col ul ul {
	padding-inline-start: var(--ds-space-sm);
}

.footer-col li a {
	display: inline-block;
	padding-block: 2px;
	color: var(--ds-text-muted);
}

/* Mobile: collapsible widget sections (class added by navigation.js). */
@media (max-width: 767.98px) {
	.footer-col {
		border-bottom: 1px solid var(--ds-border);
	}

	.footer-grid .footer-brand {
		padding-bottom: var(--ds-space-md);
	}

	.js .footer-col .widget-title,
	.js .footer-col .wp-block-heading {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 52px;
		margin: 0;
		cursor: pointer;
	}

	.js .footer-col .is-collapsible::after {
		content: "+";
		font-size: 1.25rem;
		font-weight: 300;
		letter-spacing: 0;
	}

	.js .footer-col .is-collapsible[aria-expanded="true"]::after {
		content: "−";
	}

	.js .footer-col .is-collapsed {
		display: none;
	}

	.js .footer-col .widget + .widget {
		margin-top: 0;
	}

	.footer-col .widget > :last-child {
		padding-bottom: var(--ds-space-md);
	}
}

/* Bottom bar ------------------------------------------------------------------------- */

.footer-bottom {
	border-top: 1px solid var(--ds-border);
}

.footer-bottom__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ds-space-sm);
	padding-block: var(--ds-space-lg);
	padding-bottom: calc(var(--ds-space-lg) + var(--ds-bottom-nav-h, 0px) + var(--ds-safe-bottom));
	color: var(--ds-text-muted);
	font-size: var(--ds-fs-xs);
	text-align: center;
}

@media (min-width: 768px) {
	.footer-bottom__inner {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		text-align: start;
	}
}

.footer-bottom__trust {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.footer-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ds-space-xs) var(--ds-space-lg);
}

.footer-bottom .footer-menu a,
.footer-bottom__copy a {
	color: var(--ds-text-muted);
}

/* Simple layout ---------------------------------------------------------------------- */

.footer-simple__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ds-space-lg);
	padding-block: var(--ds-space-2xl);
	padding-bottom: calc(var(--ds-space-2xl) + var(--ds-bottom-nav-h, 0px) + var(--ds-safe-bottom));
	text-align: center;
}

.footer-simple .social-links {
	justify-content: center;
	margin: 0;
}

.footer-simple .footer-bottom__copy,
.footer-simple .footer-bottom__trust {
	color: var(--ds-text-muted);
	font-size: var(--ds-fs-xs);
}