/*
 * Category menu of najlepsiemobily.sk (site layer), loaded after the shared megamenu.css and
 * offcanvas.css. Markup: includes/theme/inc/megamenu.php with the mobilky_megamenu_group_all
 * filter (functions.php) – adds .mm-group__all.
 *
 * White bar with dark labels, the open item underlined in brand blue. Light-blue panel, groups as
 * columns without cards, split by a thin line; group heading = title with a brand line on the left and
 * a "Všetko →" chip on the right (proto nmhead E, 2026-11-07). The seasonal pane has the same layout
 * in the season palette.
 * Off-canvas: white, light-blue open section, "Zobraziť všetko →" below the links of each group.
 * The seasonal item (Black Friday …) keeps its own colours (megamenu.css, --mm-season-*).
 * Only tokens (tokens.css + skins/najlepsiemobily.css), no literal colours.
 */

/* ================================================================ Bar */
.wa-header__bottom-area {
	border-top: 1px solid var(--nd-c-line);
	border-bottom: 1px solid var(--nd-c-line);
	background: var(--nd-c-surface);
}

.mm-link {
	color: var(--nd-c-head) !important;
}

.mm-link:hover {
	background: var(--nd-c-brand-tint);
	color: var(--nd-c-brand) !important;
}

.mm-link.is-active {
	background: transparent;
	color: var(--nd-c-brand) !important;
	box-shadow: inset 0 -3px 0 var(--nd-c-brand);
}

/* Seasonal item: a dark button on the white bar. */
.mm-link.mm-link--season,
.mm-link.mm-link--season.is-active {
	height: 40px;
	margin-block: 8px;
	border-radius: var(--nd-radius);
	background: var(--mm-season-link-bg);
	color: var(--white) !important;
	box-shadow: none;
}

.mm-link.mm-link--season.is-active {
	box-shadow: 0 0 0 2px var(--nd-c-brand-border);
}

/* ================================================================ Panel */
.mm-panel {
	border-top: 1px solid var(--nd-c-line);
	background: var(--nd-c-brand-tint);
	color: var(--nd-c-ink);
	box-shadow: 0 24px 40px -18px color-mix(in srgb, var(--primary-dark) 35%, transparent);
}

/* Each pane keeps its own height (the shared grid cell would hold the tallest one – the season). */
.mm-panes {
	position: relative;
}

.mm-pane:not(.is-active) {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
}

/* Seasonal pane (Black Friday …): the same layout, colours from the season palette (--mm-season-*,
   seasons/promo.php) through locally overridden --nd-c-* tokens. */
.mm-pane.is-season {
	--nm-season-on: var(--mm-season-on, var(--white));
	--nd-c-head: var(--nm-season-on);
	--nd-c-ink: color-mix(in srgb, var(--nm-season-on) 86%, transparent);
	--nd-c-brand: var(--mm-season-accent, var(--nm-season-on));
	--nd-c-brand-border: var(--mm-season-border);
	--nd-c-surface: color-mix(in srgb, var(--nm-season-on) 7%, transparent);
}

/* Group = column without a card, a line on the left of every column but the first.
   Heading: title with a brand line on the left, "Všetko →" as a small chip on the right (variant E). */
.mm-pane .mm-group--panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-content: start;
	column-gap: 10px;
	padding: 4px 22px 6px;
	border: 0;
	border-left: 1px solid var(--nd-c-brand-border);
	border-radius: 0;
	background: transparent;
}

.mm-pane .mm-group--panel:first-child {
	padding-left: 0;
	border-left: 0;
}

.mm-pane .mm-group--panel:hover {
	border-color: var(--nd-c-brand-border);
	background: transparent;
}

/* megamenu.css draws season cards with these selectors – the columns stay without a card. */
.mm-pane.is-season .mm-group--panel,
.mm-pane.is-season .mm-group--panel:hover {
	border-color: var(--mm-season-border);
	background: transparent;
}

.mm-pane .mm-group--panel .mm-group__head {
	align-self: center;
	margin: 0;
	padding: 2px 0 2px 12px;
	border-bottom: 0;
	border-left: 4px solid var(--nd-c-brand);
	color: var(--nd-c-head) !important;
	font-size: 18px;
}

.mm-pane .mm-group--panel .mm-group__img {
	display: none;
}

.mm-pane .mm-group--panel .mm-group__list {
	grid-column: 1 / -1;
	padding-top: 12px;
}

.mm-pane .mm-group--panel .mm-group__list a {
	padding: 5px 0;
	color: var(--nd-c-ink);
	font-size: 15.5px;
}

.mm-pane .mm-group__head:hover {
	color: var(--nd-c-brand) !important;
}

.mm-pane:not(.is-season) .mm-group__list a:hover {
	color: var(--nd-c-brand) !important;
}

/* The season accent is too dark for text on the dark pane – headings stay in the heading colour. */
.mm-pane.is-season .mm-group__head:hover,
.mm-pane.is-season .mm-group__list a:hover {
	color: var(--nd-c-head) !important;
}

/* ================================================================ "Všetko →" / "Zobraziť všetko →" */
.mm-group__all {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--nd-c-brand) !important;
	font-weight: 700;
}

.mm-group__all i {
	font-style: normal;
	transition: transform 0.2s var(--mm-ease);
}

.mm-group__all:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.mm-group__all:hover i {
	transform: translateX(4px);
}

.mm-group--panel .mm-group__all {
	align-self: center;
	margin: 0;
	padding: 4px 11px;
	border: 1px solid var(--nd-c-brand-border);
	border-radius: 999px;
	background: var(--nd-c-surface);
	font-size: 12.5px;
	white-space: nowrap;
}

.mm-group--panel .mm-group__all:hover {
	border-color: var(--nd-c-brand);
	text-decoration: none;
}

.mm-group--mob .mm-group__all {
	padding: 10px 0 8px;
	font-size: 16px;
}

/* The season accent (Black Friday red) has too little contrast on the dark pane – the chip text takes
   the heading colour (white on dark palettes), the accent stays for the hover border. */
.mm-pane.is-season .mm-group__all,
.mm-acc__sec.is-season .mm-group__all {
	color: var(--nm-season-on, var(--white)) !important;
}

/* ================================================================ Off-canvas */
/* nm-*.css sorts before offcanvas.css, so one class more than its .wa-offcanvas__panel. */
.wa-offcanvas .wa-offcanvas__panel {
	background: var(--nd-c-surface);
}

.mm-mobile {
	color: var(--nd-c-ink);
}

.mm-acc__sec:not(.is-season) > .mm-acc__head,
.mm-acc a.mm-acc__head:not(.is-season) {
	border-bottom-color: var(--nd-c-line) !important;
	color: var(--nd-c-head) !important;
}

.mm-acc__sec:not(.is-season).is-open > .mm-acc__head {
	background: var(--nd-c-brand-tint);
	color: var(--nd-c-brand) !important;
	box-shadow: inset 3px 0 0 var(--nd-c-brand), 0 8px 14px -12px color-mix(in srgb, var(--primary-dark) 40%, transparent);
}

.mm-acc__sec.is-season > .mm-acc__head,
.mm-acc a.mm-acc__head.is-season {
	background: var(--mm-season-head-bg);
	color: var(--white) !important;
}

.mm-acc__sec:not(.is-season) .mm-acc__inner {
	background: var(--nd-c-brand-tint);
}

.mm-acc__sec:not(.is-season) .mm-acc__title {
	color: var(--nd-c-brand) !important;
}

/* Groups: no card, a line between them. */
.mm-acc__sec:not(.is-season) .mm-group--mob {
	margin: 0 6px;
	border: 0;
	border-bottom: 1px solid var(--nd-c-line);
	border-radius: 0;
	background: transparent;
}

.mm-acc__sec:not(.is-season) .mm-group--mob .mm-group__head {
	border-bottom-color: var(--nd-c-line);
	color: var(--nd-c-head) !important;
}

.mm-acc__sec:not(.is-season) .mm-group--mob .mm-group__img {
	box-shadow: 0 0 0 1px var(--nd-c-line);
}

.mm-acc__sec:not(.is-season) .mm-group--mob .mm-group__list a {
	color: var(--nd-c-ink);
}

.mm-acc__sec:not(.is-season) .mm-group--mob .mm-group__list a:hover {
	color: var(--nd-c-brand) !important;
}