/* Menu mobilne: drzewo na <details>, zastępuje treść strony, gdy jest otwarte. */

.menu-mobile {
	border-top: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
}

body.menu-open .site-main,
body.menu-open .site-footer {
	display: none;
}

.menu-mobile-inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	padding-block: var(--space-16) var(--space-24);
}

.menu-mobile-tree {
	display: flex;
	flex-direction: column;
}

.menu-mobile-group {
	border-bottom: var(--border-width) solid var(--color-border);
}

.menu-mobile-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--size-button-xl);
	padding: 0 var(--space-xs);
	font-size: var(--text-lg);
	font-weight: var(--weight-extrabold);
	color: var(--color-ink);
	text-decoration: none;
	list-style: none;
	cursor: pointer;
}

.menu-mobile-top::-webkit-details-marker,
.menu-mobile-subtitle::-webkit-details-marker {
	display: none;
}

.menu-mobile-group[open] > .menu-mobile-top {
	color: var(--color-brand);
}

.menu-mobile-group[open] > .menu-mobile-top .icon,
.menu-mobile-sub[open] > .menu-mobile-subtitle .icon-sm {
	transform: rotate(180deg);
}

.menu-mobile-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	padding-bottom: var(--space-16);
}

.menu-mobile-sub {
	border-radius: var(--radius-xl);
}

.menu-mobile-sub[open] {
	background: var(--color-bg);
}

.menu-mobile-subtitle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--size-touch);
	padding: 0 var(--space-14);
	border-radius: var(--radius-xl);
	font-weight: var(--weight-bold);
	color: var(--color-ink);
	list-style: none;
	cursor: pointer;
}

.menu-mobile-subtitle .icon-sm {
	color: var(--color-text-muted);
}

.menu-mobile-sub[open] > .menu-mobile-subtitle {
	background: var(--color-brand);
	color: var(--color-on-dark);
	font-weight: var(--weight-extrabold);
}

.menu-mobile-sub[open] > .menu-mobile-subtitle .icon-sm {
	color: var(--color-on-dark);
}

.menu-mobile-subbody {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	padding: var(--space-14);
}

.menu-mobile-columns {
	display: flex;
	gap: var(--space-16);
}

.menu-mobile-columns .mega-column {
	gap: var(--space-14);
}

.menu-mobile-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
}

.menu-mobile-link {
	display: flex;
	align-items: center;
	min-height: var(--size-touch);
	padding: 0 var(--space-14);
	color: var(--color-ink);
	text-decoration: none;
}

.menu-mobile-all {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	min-height: var(--size-touch);
	padding: 0 var(--space-14);
	font-size: var(--text-md);
	font-weight: var(--weight-extrabold);
}

.menu-mobile-card {
	display: flex;
	flex-direction: column;
	padding: var(--space-14) var(--space-16) var(--space-16);
	border-radius: var(--radius-3xl);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-bg);
	color: var(--color-ink);
	text-decoration: none;
}

.menu-mobile-card-head {
	display: flex;
	justify-content: flex-end;
	margin-top: calc(var(--space-28) * -1);
}

.menu-mobile-card-body {
	display: flex;
	align-items: center;
	gap: var(--space-14);
	color: var(--color-brand);
}

.menu-mobile-card-text {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	flex-direction: column;
}

.menu-mobile-card-title {
	font-weight: var(--weight-extrabold);
	color: var(--color-ink);
	line-height: var(--leading-snug);
}

.menu-mobile-card-meta {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.menu-mobile-footer {
	background: var(--color-ink);
}

.menu-mobile-footer-inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	padding-block: var(--space-24);
}

.menu-mobile-extra {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-18);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-base-sm);
}

.menu-mobile-extra a {
	display: flex;
	align-items: center;
	min-height: var(--size-touch);
	color: var(--color-on-dark-muted);
	text-decoration: none;
}

@media (min-width: 1024px) {
	.menu-mobile {
		display: none;
	}

	body.menu-open .site-main,
	body.menu-open .site-footer {
		display: block;
	}
}