/**
 * Casas Choice — desktop "supermenu" panel (inc/supermenu.php). Penpot:
 * "Header - Supermenu - Comprar (aberto)" / "... A Choice (aberto)" boards,
 * page "Gerais".
 *
 * assets/js/nav.js moves each panel (printed once in the footer) to be a
 * real DOM child of its trigger `<li>` — not just visually near it — so
 * that Blocksy's own `mouseleave`/`focusout` listeners on that `<li>` (which
 * key off DOM containment, not screen position) don't close the dropdown
 * the instant the pointer/focus moves from the "Comprar" link down into
 * this panel. Once nested there, the panel is revealed by nothing more
 * than Blocksy's own `.ct-active` class — no bespoke open/close JS needed;
 * see nav.js's initSupermenu() for the (~15 line) DOM move + position-on-
 * resize logic.
 *
 * Desktop-only (≥1000px) — same breakpoint Blocksy itself switches to the
 * off-canvas mobile menu at, where the existing drill-down submenu
 * (.cc-submenu-*, assets/css/nav.css) already covers this.
 */

.menu-item.cc-has-supermenu > .sub-menu {
	/* Blocksy's own plain-list dropdown — superseded by .cc-supermenu below
	 * for these items, but left in the DOM (Blocksy's JS still queries it). */
	display: none !important;
}

.cc-supermenu {
	--cc-ink: var( --theme-palette-color-5, #333538 );
	--cc-bg: var( --theme-palette-color-8, #FFFFFF );
	--cc-accent: var( --theme-palette-color-1, #00A6CE );

	position: fixed;
	left: 0;
	right: 0;
	/* top is set in px by nav.js (header's own rendered height — admin bar,
	 * language-modal state, etc. all already factored in via getBoundingClientRect). */
	top: 0;
	z-index: 45; /* below Blocksy's own #header (z-index:50), above page content. */
	background: var( --cc-bg );
	border-top: 1px solid var( --cc-border );
	box-shadow: 0 16px 32px rgba( 0, 0, 0, 0.08 );
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY( -10px );
	transition:
		opacity 0.28s cubic-bezier( 0.16, 1, 0.3, 1 ),
		transform 0.28s cubic-bezier( 0.16, 1, 0.3, 1 ),
		visibility 0s linear 0.28s;
	font-family: 'Montserrat', sans-serif;
}

.menu-item.ct-active > .cc-supermenu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY( 0 );
	transition:
		opacity 0.28s cubic-bezier( 0.16, 1, 0.3, 1 ),
		transform 0.28s cubic-bezier( 0.16, 1, 0.3, 1 ),
		visibility 0s linear 0s;
}

/* Cards ease in a beat after the panel itself, each slightly later than the
 * last — subtle enough to read as polish rather than a distinct "effect". */
.cc-supermenu__card {
	opacity: 0;
	transform: translateY( 6px );
	transition: opacity 0.24s ease, transform 0.24s ease;
}

.menu-item.ct-active > .cc-supermenu .cc-supermenu__card {
	opacity: 1;
	transform: translateY( 0 );
}

.menu-item.ct-active > .cc-supermenu .cc-supermenu__card:nth-child( 1 ) { transition-delay: 0.04s; }
.menu-item.ct-active > .cc-supermenu .cc-supermenu__card:nth-child( 2 ) { transition-delay: 0.09s; }
.menu-item.ct-active > .cc-supermenu .cc-supermenu__card:nth-child( 3 ) { transition-delay: 0.14s; }

@media ( prefers-reduced-motion: reduce ) {
	.cc-supermenu,
	.cc-supermenu__card {
		transition-duration: 0.01s;
		transform: none;
	}

	.cc-supermenu__card-photo img {
		transition: none;
	}

	.cc-supermenu__card:hover .cc-supermenu__card-photo img {
		transform: none;
	}

	.cc-supermenu__card:hover .cc-supermenu__card-arrow svg {
		animation: none;
	}
}

.cc-supermenu *,
.cc-supermenu *::before,
.cc-supermenu *::after {
	box-sizing: border-box;
}

.cc-supermenu__inner {
	margin-inline: auto;
	display: flex;
	align-items: stretch;
	gap: 48px;
	padding-block: 24px;
}

.cc-supermenu__sidebar {
	flex: 0 0 354px;
	width: 354px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	padding-right: 24px;
	border-right: 1px solid var( --cc-border );
}

.cc-supermenu__tagline {
	margin: 0;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	color: var( --cc-ink );
}

.cc-supermenu__areas {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	color: var( --cc-ink );
}

.cc-supermenu__cards {
	flex: 1;
	display: flex;
	gap: 32px;
}

.cc-supermenu__card {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.cc-supermenu__card-photo {
	display: block;
	width: 100%;
	aspect-ratio: 445 / 295;
	background: #E9E4D6;
	overflow: hidden;
}

.cc-supermenu__card-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.cc-supermenu__card:hover .cc-supermenu__card-photo img {
	transform: scale( 1.08 );
}

/* Fallback for a page with no featured image — solid brand card with the
 * light-background logo (Penpot: the "Sobre a Choice" card). */
.cc-supermenu__card-photo-fallback {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --cc-accent );
}

.cc-supermenu__card-photo-fallback img {
	width: auto;
	height: auto;
	max-width: 55%;
	max-height: 45%;
	object-fit: contain;
}

.cc-supermenu__card-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
}

.cc-supermenu__card-title {
	font-size: 16px;
	font-weight: 500;
	color: var( --cc-ink );
}

.cc-supermenu__card-arrow {
	flex: 0 0 auto;
	display: flex;
	color: var( --cc-accent );
}

.cc-supermenu__card-arrow svg {
	width: 24px;
	height: 24px;
	display: block;
}

/* Nudges right and back on a loop for as long as the card is hovered —
 * animation (not just a transition) is what lets it keep repeating rather
 * than settling after a single move. */
.cc-supermenu__card:hover .cc-supermenu__card-arrow svg {
	animation: cc-supermenu-arrow-nudge 1.1s ease-in-out infinite;
}

@keyframes cc-supermenu-arrow-nudge {
	0%, 100% { transform: translateX( 0 ); }
	50% { transform: translateX( 4px ); }
}

.cc-supermenu__card-excerpt {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: rgba( 51, 53, 56, 0.6 );
}

@media ( max-width: 999px ) {
	.cc-supermenu {
		display: none !important;
	}
}