/**
 * Desktop mega panel (D-108). Tokens only (D-85). Blocksy desktop breakpoint: >= 1000px.
 * Selectors come from the markup Blocksy prints for a three-level menu.
 */

@media (min-width: 1000px) {
	/* The panel is positioned against the header container, not against the Sklep item. */
	#header .menu-item.materli-mega {
		position: static;
	}

	#header [data-row="middle"] > .ct-container {
		position: relative;
	}

	#header [data-id="menu"] .materli-mega > .sub-menu {
		left: 0;
		right: 0;
		width: 100%;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--materli-space-xl);
		padding: var(--materli-space-xl);
		border-radius: 0;
		background: var(--materli-color-surface-alt);
	}

	/* Groups are plain columns: always visible inside the open panel. */
	/* Blocksy lays out menu items with children as a centred flex row (label beside sub-menu);
	   a group stacks its heading above its links instead. */
	#header .materli-mega > .sub-menu > .materli-mega__group {
		position: static;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}

	#header .materli-mega .materli-mega__group > .sub-menu {
		position: static;
		display: block;
		width: auto;
		min-width: 0;
		margin: 0;
		padding: 0;
		max-height: none;
		overflow: visible;
		opacity: 1;
		/* inherit, not visible: a forced visible would override the closed panel's hidden and leave its
		   links focusable while invisible; inherited, they are only reachable once the panel opens. */
		visibility: inherit;
		pointer-events: inherit;
		transform: none;
		background: transparent;
		box-shadow: none;
	}

	#header .materli-mega .materli-mega__group > .sub-menu::before {
		display: none;
	}

	/* Group headings read as headings, not as another link (05-19): heading family and size with a
	   hairline rule, so a group and its categories are told apart at a glance. */
	.materli-mega__heading {
		display: block;
		align-self: stretch;
		margin-bottom: var(--materli-space-sm);
		padding-bottom: var(--materli-space-sm);
		border-bottom: 1px solid var(--materli-color-border);
		font-family: var(--materli-font-heading);
		font-size: var(--materli-text-heading);
		font-weight: var(--materli-weight-strong);
		line-height: var(--materli-leading-heading);
		text-transform: none;
		color: var(--materli-color-text);
	}

	/* Blocksy colours sub-menu links with palette slot 8 (a white surface since the slot reorder),
	   which would be invisible on the light panel; the panel links use the text colour. */
	#header .materli-mega .materli-mega__group .sub-menu .ct-menu-link {
		--theme-link-initial-color: var(--materli-color-text);
		--theme-link-hover-color: var(--materli-color-text);
		--theme-link-active-color: var(--materli-color-text);
		color: var(--materli-color-text);
		padding-inline: 0; /* Blocksy's dropdown item padding would offset links from their heading. */
		padding-block: 0; /* Blocksy's dropdown items spacing would push rows past the 44px UI-SPEC row height. */
		display: flex;
		align-items: center;
		min-height: var(--materli-hit);
		font-size: var(--materli-text-body);
		font-weight: var(--materli-weight-regular);
		text-decoration: none;
	}

	/* Hover motion (05-19): the underline fades in and settles under the label, the label takes the
	   accent colour (5.8:1 on the panel). Focus keeps the global focus ring as well. */
	#header .materli-mega .materli-mega__group .sub-menu .ct-menu-link {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-decoration-color: transparent;
		text-underline-offset: 0.35em;
		transition: color var(--materli-motion-quick), text-decoration-color var(--materli-motion-quick), text-underline-offset var(--materli-motion-quick);
	}

	#header .materli-mega .materli-mega__group .sub-menu .ct-menu-link:hover,
	#header .materli-mega .materli-mega__group .sub-menu .ct-menu-link:focus-visible {
		--theme-link-hover-color: var(--materli-color-accent);
		color: var(--materli-color-accent);
		text-decoration-color: currentColor;
		text-underline-offset: 0.2em;
	}

	/* Panel entrance (05-19): Blocksy fades the panel in; the four group columns then rise in one
	   after another. Re-runs each time the panel opens (hover, keyboard focus or Blocksy's toggle). */
	#header .materli-mega:is(:hover, :focus-within, .ct-active) > .sub-menu > .materli-mega__group {
		animation: materli-mega-group-in 260ms ease-out both;
	}

	#header .materli-mega > .sub-menu > .materli-mega__group:nth-child(2) {
		animation-delay: var(--materli-motion-stagger);
	}

	#header .materli-mega > .sub-menu > .materli-mega__group:nth-child(3) {
		animation-delay: calc(2 * var(--materli-motion-stagger));
	}

	#header .materli-mega > .sub-menu > .materli-mega__group:nth-child(n + 4) {
		animation-delay: calc(3 * var(--materli-motion-stagger));
	}
}

@keyframes materli-mega-group-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}