/*
 * BS360 Mega Menu - frontend styles.
 *
 * Closed panel state is defined here, in CSS, before any JS runs -
 * this prevents a flash of unstyled/open panel on page load (the
 * FOUC-equivalent problem for dropdown components). JS only adds/removes
 * classes and inline transform/height values on top of this base.
 *
 * @since 0.1.0
 */

:root {
	/* --bs360-mm-transition-duration and --bs360-mm-overlay-color are
	   overridden by an inline <style> block from the settings values,
	   see class-bs360-mega-menu-frontend.php print_dynamic_css_variables().
	   These are fallback values only, used if that inline block is
	   somehow missing (e.g. asset debugging). */
	--bs360-mm-transition-duration: 300ms;
	--bs360-mm-overlay-color: rgba( 232, 232, 237, 0.4 );
	--bs360-mm-first-col-width: 220px;
	--bs360-mm-overlay-blur: 20px;
	--bs360-mm-overlay-blur-mobile: 8px;
}

/* -------------------------------------------------------------------- */
/* Menu row layout                                                       */
/* -------------------------------------------------------------------- */

.bs360-mm-menu {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	/* Must sit above the overlay (z-index: 9998, see below), otherwise
	   the overlay - once visible - intercepts mouse events over the
	   trigger and the rest of the menu, since it covers the full
	   viewport including the header. Without this, the moment the
	   overlay becomes visible, the browser reports the cursor as being
	   over the overlay rather than over the <li>, firing mouseleave on
	   it immediately and closing the panel a fixed timeout later - with
	   no actual mouse movement involved. Note this only governs the
	   trigger/<li> itself: the panel is position: fixed (see below) and
	   sets its own z-index independently, since fixed positioning takes
	   it out of this stacking context entirely. */
	z-index: 9999;
}

.bs360-mm-item {
	position: relative;
}

.bs360-mm-item--cta {
	margin-left: auto;
}

.bs360-mm-link,
.bs360-mm-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	background: none;
	border: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
	padding: 0.75em 1em;
	text-decoration: none;
}

.bs360-mm-item--cta .bs360-mm-link,
.bs360-mm-item--cta .bs360-mm-trigger {
	background-color: var( --wp--preset--color--bordeaux, #ae1253 );
	color: #fff;
	border-radius: 999px;
	padding: 0.6em 1.4em;
}

.bs360-mm-icon svg {
	display: block;
	width: 1.2em;
	height: 1.2em;
}

.bs360-mm-badge {
	font-size: 0.7em;
	line-height: 1;
	padding: 0.2em 0.5em;
	border-radius: 4px;
	background-color: var( --wp--preset--color--green, #679d2e );
	color: #fff;
}

.bs360-mm-badge--bordeaux {
	background-color: var( --wp--preset--color--bordeaux, #ae1253 );
}

.bs360-mm-badge--digital-gray {
	background-color: var( --wp--preset--color--digital-gray, #3f4d55 );
}

/* -------------------------------------------------------------------- */
/* Panel base state (closed)                                             */
/* -------------------------------------------------------------------- */

.bs360-mm-panel {
	/* position: fixed, not absolute: with absolute, width: 100% would
	   resolve against the nearest positioned ancestor - here
	   .bs360-mm-item (position: relative), which in a flex menu shrinks
	   to the width of its own label ("Loesungen") - so the panel ended
	   up only as wide as the trigger button itself, not the viewport.
	   fixed positions relative to the viewport directly, with no
	   dependency on any ancestor's width, so left: 0; right: 0 always
	   spans the full window regardless of what markup this <li> happens
	   to sit inside - no JS DOM move needed, and no dependency on the
	   eventual theme header markup either. */
	position: fixed;
	top: var( --bs360-mm-header-height, 80px );
	left: 0;
	right: 0;
	width: 100%;
	/* Needed explicitly: position: fixed takes this element out of
	   .bs360-mm-menu's own stacking context (the z-index: 9999 set
	   there no longer applies here), so without its own z-index the
	   panel falls back to the default stacking order and can end up
	   below .bs360-mm-overlay (z-index: 9998) once both are fixed -
	   exactly the "only the blur is visible, no panel content" symptom
	   this fixes. Kept one above the overlay, consistent with
	   .bs360-mm-menu's own value. */
	z-index: 9999;
	opacity: 0;
	transform: translateY( -8px );
	pointer-events: none;
	transition:
		opacity var( --bs360-mm-transition-duration ) ease-out,
		transform var( --bs360-mm-transition-duration ) ease-out,
		height var( --bs360-mm-transition-duration ) ease-out;
	overflow: hidden;
	max-height: calc( 100vh - var( --bs360-mm-header-height, 80px ) );
}

.bs360-mm-panel[hidden] {
	/* [hidden] alone would remove it from layout entirely, which breaks
	   the height-transition-on-switch requirement; display is overridden
	   below so the browser still lays it out for JS height measurement,
	   while opacity/pointer-events keep it invisible and non-interactive. */
	display: block;
}

.bs360-mm-item--has-panel.is-open .bs360-mm-panel {
	opacity: 1;
	transform: translateY( 0 );
	pointer-events: auto;
	overflow-y: auto;
}

@media ( prefers-reduced-motion: reduce ) {
	.bs360-mm-panel {
		transition: none;
	}
}

.bs360-mm-panel__inner {
	max-width: var( --wp--style--global--wide-size, 1280px );
	margin-inline: auto;
	padding: 2rem;
	display: flex;
	gap: 2rem;
}

/* -------------------------------------------------------------------- */
/* Overlay                                                               */
/* -------------------------------------------------------------------- */

.bs360-mm-overlay {
	position: fixed;
	inset: 0;
	/* Sits above ordinary page content but below the menu itself
	   (.bs360-mm-menu is explicitly raised to z-index: 9999, see above) -
	   the overlay must never intercept pointer events meant for the
	   trigger or the open panel. This value is the Apple reference
	   value from the concept and is a placeholder until it is checked
	   against the theme's actual header/sticky-header/notification-bar
	   z-index stack (see concept section "Zusammenspiel mit
	   Notification Bar und Sticky Header"), which is theme-integration
	   work, not part of this plugin in isolation. */
	z-index: 9998;
	opacity: 0;
	visibility: hidden;
	background-color: var( --bs360-mm-overlay-color );
	transition:
		opacity 0.32s cubic-bezier( 0.4, 0, 0.6, 1 ) 80ms,
		visibility 0.32s step-start 80ms;
	-webkit-backdrop-filter: blur( var( --bs360-mm-overlay-blur ) );
	backdrop-filter: blur( var( --bs360-mm-overlay-blur ) );
}

.bs360-mm-overlay.is-visible {
	opacity: 1;
	visibility: visible;
}

@media ( max-width: 768px ) and ( hover: none ) {
	.bs360-mm-overlay {
		-webkit-backdrop-filter: blur( var( --bs360-mm-overlay-blur-mobile ) );
		backdrop-filter: blur( var( --bs360-mm-overlay-blur-mobile ) );
	}
}

/* -------------------------------------------------------------------- */
/* Tabbed panel: flat single column, every descendant is its own row    */
/* -------------------------------------------------------------------- */

.bs360-mm-tabs {
	/* Wider than the plain flyout link column, since rows here carry an
	   icon, description and badge, not just a short label. */
	flex: 0 0 fit-content( calc( var( --bs360-mm-first-col-width ) * 1.6 ) );
	display: flex;
	flex-direction: column;
	gap: 2px;
	overflow-y: auto;
}

.bs360-mm-tab {
	position: relative;
	border-radius: 6px;
}

.bs360-mm-tab.is-active {
	background-color: var( --wp--preset--color--anthracite-050, #f5f6f7 );
}

.bs360-mm-tab__link {
	display: block;
	padding: 0.6em 0.75em;
	text-decoration: none;
	color: inherit;
}

/* Rows one level deeper than the panel item's direct children (depth 2+)
   are visually nested under their own parent row via indent only - they
   remain in the same flat list/DOM structure, not a separate sub-list. */
.bs360-mm-tab[data-depth="2"] .bs360-mm-tab__link,
.bs360-mm-tab[data-depth="3"] .bs360-mm-tab__link {
	padding-left: 1.6em;
}

.bs360-mm-tab__label-row {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.bs360-mm-tab__icon svg {
	display: block;
	width: 1.4em;
	height: 1.4em;
}

.bs360-mm-tab__label {
	font-weight: 600;
}

/* Depth 2+ rows use a lighter weight label to distinguish sub-items from
   their own group's head row (depth 1), matching the reference design
   where only the top row per group ("better.energy") is bold. */
.bs360-mm-tab[data-depth="2"] .bs360-mm-tab__label,
.bs360-mm-tab[data-depth="3"] .bs360-mm-tab__label {
	font-weight: 400;
}

.bs360-mm-tab__desc {
	display: block;
	font-size: 0.85em;
	color: var( --wp--preset--color--digital-gray, #3f4d55 );
	margin-top: 0.15em;
}

.bs360-mm-tabcontent {
	display: none;
}

.bs360-mm-tabcontent.is-active {
	display: flex;
	gap: 2rem;
	flex: 1;
}

/* -------------------------------------------------------------------- */
/* Flyout panel: fixed-width first column                                */
/* -------------------------------------------------------------------- */

.bs360-mm-flyout-links {
	flex: 0 0 fit-content( var( --bs360-mm-first-col-width ) );
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

/* -------------------------------------------------------------------- */
/* Tiles: auto-fit grid, full available height                          */
/* -------------------------------------------------------------------- */

.bs360-mm-tile-row {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: 16px;
	flex: 1;
	align-items: stretch;
}

.bs360-mm-tile {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.bs360-mm-tile__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.bs360-mm-tile__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* -------------------------------------------------------------------- */
/* Search panel                                                          */
/* -------------------------------------------------------------------- */

.bs360-mm-panel--search .bs360-mm-panel__inner {
	flex-direction: column;
	align-items: center;
	max-width: 640px;
}

.bs360-mm-search-form {
	width: 100%;
}

.bs360-mm-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bs360-mm-quick-links {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

/* -------------------------------------------------------------------- */
/* Mobile: drill-down                                                    */
/* -------------------------------------------------------------------- */

@media ( max-width: 782px ) {
	.bs360-mm-menu {
		position: fixed;
		inset: 0;
		height: 100dvh;
		flex-direction: column;
		background-color: var( --wp--preset--color--white, #fff );
		transform: translateY( -100% );
		opacity: 0;
		transition:
			transform var( --bs360-mm-transition-duration ) ease-out,
			opacity var( --bs360-mm-transition-duration ) ease-out;
		overflow-y: auto;
	}

	.bs360-mm-menu.is-open {
		transform: translateY( 0 );
		opacity: 1;
	}

	.bs360-mm-panel {
		position: static;
		max-height: none;
	}
}