/*
 * This block only ever lives inside core/navigation (see "ancestor" in
 * block.json), sitting as an <li> alongside the plain core/navigation-link
 * items (currently just "Contact"). Its trigger is styled to match
 * .wp-block-navigation-item__content (theme's style.css) so it reads as
 * the same kind of nav item, not a visually distinct control.
 *
 * The dropdown panel uses "position: fixed" (not "absolute") specifically
 * to escape core's own navigation markup, which nests SEVERAL wrapper
 * elements each carrying their own "position: relative" by default
 * (.wp-block-navigation itself, .wp-block-navigation__responsive-container,
 * ...__responsive-dialog, and more — all part of its native modal/dropdown
 * architecture). An open-state test showed the panel consistently offset
 * to wherever the nav happened to sit rather than centered on the header,
 * and neutralizing each of those ancestors one at a time turned out to be
 * a real rabbit hole. "position: fixed" resolves against the viewport
 * directly regardless of any of them (none carry a transform, which is the
 * one thing that WOULD hijack a fixed element's containing block too) —
 * one clean fix instead of chasing an unknown number of nested overrides.
 * Its "top" is measured from the real header's own height via
 * view.js (getBoundingClientRect()) on open, since the header isn't a
 * fixed height (topbar wraps, hero-overlay mode differs, etc.); view.js
 * also closes the panel on scroll, since a "fixed" panel would otherwise
 * visually detach from this site's non-sticky header once the page moves.
 */
.wp-block-andrei-saguna-mega-menu-item {
	list-style: none;
	margin: 0;
}

.wp-block-andrei-saguna-mega-menu-item__trigger {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	margin: 0;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	border: none;
	background: none;
	font: inherit;
	color: var(--wp--preset--color--neutral-900);
	cursor: pointer;
	transition: color 0.15s ease, transform 0.15s ease;
}

/*
 * Matches Contact's own hover treatment exactly (the theme's plain
 * ".wp-block-navigation-item__content:hover" rule) — color, underline,
 * and the small lift are all copied from there by request, so the
 * dropdown triggers read as the same kind of nav item as Contact, not a
 * visually distinct control. The is-style-button (Admitere) variant below
 * intentionally does NOT get this treatment — it stays a plain filled
 * button in both hover and open states, same as the theme's own note that
 * "Admitere button stays solid navy in both modes."
 */
.wp-block-andrei-saguna-mega-menu-item__trigger:hover,
.wp-block-andrei-saguna-mega-menu-item.is-open .wp-block-andrei-saguna-mega-menu-item__trigger {
	color: var(--wp--preset--color--accent-500);
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-underline-offset: 4px;
	transform: translateY(-2px);
}

/*
 * Hero pages: Contact and the other plain nav links turn white (the
 * transparent-overlay header needs light text over a photo) via the
 * theme's own "body.has-page-hero .wp-block-navigation-item__content"
 * rule — mirrored here so the dropdown triggers match exactly. Explicitly
 * excludes .is-style-button: Admitere stays its own solid navy button
 * regardless of hero/non-hero, same as the theme's own note for the real
 * Admitere button. The caret icon needs no separate color rule — its SVG
 * already uses "fill: currentColor", so it follows the trigger's own
 * color automatically in every state below.
 */
body.has-page-hero .wp-block-andrei-saguna-mega-menu-item:not(.is-style-button) .wp-block-andrei-saguna-mega-menu-item__trigger {
	color: var(--wp--preset--color--base-white) !important;
}

body.has-page-hero .wp-block-andrei-saguna-mega-menu-item:not(.is-style-button) .wp-block-andrei-saguna-mega-menu-item__trigger:hover,
body.has-page-hero .wp-block-andrei-saguna-mega-menu-item:not(.is-style-button).is-open .wp-block-andrei-saguna-mega-menu-item__trigger {
	color: var(--wp--preset--color--neutral-50) !important;
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-underline-offset: 4px;
	transform: translateY(-2px);
}

.wp-block-andrei-saguna-mega-menu-item__caret {
	display: flex;
	width: 16px;
	height: 16px;
	transition: transform 0.15s ease;
}

.wp-block-andrei-saguna-mega-menu-item__caret svg {
	width: 100%;
	height: 100%;
}

.wp-block-andrei-saguna-mega-menu-item.is-open .wp-block-andrei-saguna-mega-menu-item__caret {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-andrei-saguna-mega-menu-item__trigger,
	.wp-block-andrei-saguna-mega-menu-item__caret {
		transition: none;
	}

	.wp-block-andrei-saguna-mega-menu-item.is-open .wp-block-andrei-saguna-mega-menu-item__trigger {
		transform: none;
	}
}

/*
 * Button variant (Admitere): matches the site's existing "Big Primary"
 * button look (theme.json's is-style-big-primary variation) directly,
 * since this trigger sits next to a real button-styled reusable block
 * (the mobile duplicate) and needs to read as the same control.
 */
.wp-block-andrei-saguna-mega-menu-item.is-style-button .wp-block-andrei-saguna-mega-menu-item__trigger {
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--accent-500);
	color: var(--wp--preset--color--base-white);
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--ui-interactive);
	font-weight: 500;
	text-transform: uppercase;
	white-space: nowrap;
}

.wp-block-andrei-saguna-mega-menu-item.is-style-button .wp-block-andrei-saguna-mega-menu-item__trigger:hover,
.wp-block-andrei-saguna-mega-menu-item.is-style-button.is-open .wp-block-andrei-saguna-mega-menu-item__trigger {
	background-color: var(--wp--preset--color--accent-600);
	color: var(--wp--preset--color--base-white);
	transform: none;
}

/* ==================== Desktop: floating dropdown panel ==================== */

@media (min-width: 1025px) {
	.wp-block-andrei-saguna-mega-menu-item__panel {
		display: block;
		visibility: hidden;
		opacity: 0;
		position: fixed;
		/* "top" is a fallback only — view.js sets the real value inline from
		 * the header's actual measured height every time a panel opens. */
		top: 155px;
		left: 50%;
		transform: translate(-50%, -8px);
		width: 100vw;
		max-width: 1360px;
		z-index: 30;
		margin-top: var(--wp--preset--spacing--4);
		border-top: 3px solid var(--wp--preset--color--yellow-400);
		background-color: var(--wp--preset--color--base-white);
		box-shadow: 0 16px 40px rgba(14, 19, 27, 0.16);
		transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	}

	.wp-block-andrei-saguna-mega-menu-item.is-open .wp-block-andrei-saguna-mega-menu-item__panel {
		visibility: visible;
		opacity: 1;
		transform: translate(-50%, 0);
	}

	@media (prefers-reduced-motion: reduce) {
		.wp-block-andrei-saguna-mega-menu-item__panel {
			transition: none;
		}
	}

	.wp-block-andrei-saguna-mega-menu-item__panel-inner {
		padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--24);
	}

	.wp-block-andrei-saguna-mega-menu-item__columns {
		display: flex;
		gap: var(--wp--preset--spacing--12);
		margin-top: var(--wp--preset--spacing--6);
		padding-top: var(--wp--preset--spacing--6);
		border-top: 1px solid var(--wp--preset--color--border-subtle);
	}
}

.wp-block-andrei-saguna-mega-menu-item__panel-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
}

.wp-block-andrei-saguna-mega-menu-item__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--ivypresto-headline);
	font-size: var(--wp--preset--font-size--h-4);
	color: #002547;
}

.wp-block-andrei-saguna-mega-menu-item__intro {
	margin: var(--wp--preset--spacing--2) 0 0;
	max-width: 640px;
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--body-base);
	color: var(--wp--preset--color--neutral-700);
}

/* ==================== Mobile / tablet: inline accordion ==================== */

@media (max-width: 1024px) {
	/*
	 * The mobile overlay's nav list (.wp-block-navigation__container) has no
	 * explicit width of its own in core's CSS - it's a flex item inside the
	 * modal's column layout, meant to stretch via "align-items: stretch".
	 * But this nav uses "items-justified-right" for its desktop row layout,
	 * and core reuses that SAME setting as the modal's cross-axis alignment
	 * (--navigation-layout-justification-setting resolves to "flex-end"
	 * instead of "stretch" here) - some browsers then size the list to its
	 * own shrink-to-fit content width instead of the full modal width, only
	 * correcting themselves once something else forces a layout recalc
	 * (e.g. opening one of this block's own accordion panels). Giving the
	 * list an explicit width removes the ambiguity outright instead of
	 * depending on a specific browser's flex sizing/recalc behavior.
	 * Scoped via :has() to this nav specifically, since other navigation
	 * blocks on the site (if any) aren't meant to be affected.
	 */
	.wp-block-navigation__container:has(> .wp-block-andrei-saguna-mega-menu-item) {
		width: 100%;
	}

	.wp-block-andrei-saguna-mega-menu-item {
		width: 100%;
	}

	/*
	 * The mobile overlay itself is dark with white text (core's own
	 * "has-base-white-color has-neutral-900-background-color" classes on
	 * .wp-block-navigation__responsive-container) — the plain Contact
	 * nav-link picks that up for free by inheriting color, but this
	 * trigger sets its own fixed dark color for the desktop row (where the
	 * header is light), so it needs an explicit override back to white
	 * here or it's invisible against the dark overlay. The expanded panel
	 * underneath stays its own white "card" regardless (unaffected by this
	 * rule) — a deliberate light drawer popping out of the dark overlay,
	 * not a full dark-mode reskin of the mega menu's own content.
	 */
	.wp-block-andrei-saguna-mega-menu-item__trigger {
		width: 100%;
		justify-content: space-between;
		padding: var(--wp--preset--spacing--3) 0;
		color: var(--wp--preset--color--base-white);
	}

	.wp-block-andrei-saguna-mega-menu-item.is-style-button .wp-block-andrei-saguna-mega-menu-item__trigger {
		justify-content: center;
		margin-bottom: var(--wp--preset--spacing--3);
	}

	/*
	 * Explicit white background + dark text — without this, the panel just
	 * inherits the dark overlay's own white-text-on-dark-background context
	 * (core's "has-base-white-color has-neutral-900-background-color"), and
	 * the heading/link text INSIDE the panel is hardcoded dark elsewhere in
	 * this stylesheet (#002547, neutral-900, etc.) — dark text on that dark,
	 * effectively-transparent background is invisible, not just hard to
	 * read. A real bug, not a hypothetical: an open-state test showed the
	 * expanded accordion rendering as a large blank gap with all its actual
	 * content present underneath, just unreadable. This makes the panel a
	 * distinct light "card" popping out of the dark overlay instead, same
	 * spirit as the floating dropdown panel on desktop.
	 */
	.wp-block-andrei-saguna-mega-menu-item__panel {
		display: none;
		width: 100%;
		padding: 0 0 var(--wp--preset--spacing--4);
		background-color: var(--wp--preset--color--base-white);
		color: var(--wp--preset--color--neutral-900);
		border-radius: var(--wp--custom--radius--md);
	}

	.wp-block-andrei-saguna-mega-menu-item.is-open .wp-block-andrei-saguna-mega-menu-item__panel {
		display: block;
	}

	.wp-block-andrei-saguna-mega-menu-item__panel-inner {
		padding: var(--wp--preset--spacing--4);
	}

	.wp-block-andrei-saguna-mega-menu-item__columns {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--6);
		margin-top: var(--wp--preset--spacing--4);
	}
}

/* Always-visible preview in the block editor canvas — same reasoning as
 * step/faq-item's own .editor-styles-wrapper overrides: an author needs to
 * see and edit every column/link without having to trigger the open state. */
.editor-styles-wrapper .wp-block-andrei-saguna-mega-menu-item__panel.is-editor-preview {
	position: static;
	visibility: visible;
	opacity: 1;
	transform: none;
	display: block;
	width: 100%;
	margin-top: var(--wp--preset--spacing--3);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-top: 3px solid var(--wp--preset--color--yellow-400);
}

.editor-styles-wrapper .wp-block-andrei-saguna-mega-menu-item__panel-inner {
	padding: var(--wp--preset--spacing--4);
}

.editor-styles-wrapper .wp-block-andrei-saguna-mega-menu-item__columns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--6);
	margin-top: var(--wp--preset--spacing--4);
	padding-top: var(--wp--preset--spacing--4);
	border-top: 1px solid var(--wp--preset--color--border-subtle);
}