/* =========================================================================
   Veleslavín – Menu bytů: mega-menu „Naše byty"
   Akcentní barva přichází jako --vmenu-accent (inline z PHP); fallback níže.
   ========================================================================= */

:root {
	--vmenu-accent: #d32a5a; /* fallback akcent (hover) — přebíjeno inline stylem z pluginu */
}

/* Kořen samostatného rozbalovacího menu (mimo strukturu hlavního menu) */
.vmenu--standalone {
	position: relative;        /* kotva pro absolutně poziciovaný panel */
	display: inline-block;
}

/* Horní položka „Naše byty", která panel rozbaluje */
.vmenu-toggle {
	display: inline-block;
	cursor: pointer;
	text-decoration: none;
	color: inherit;            /* převzít barvu z hlavičky webu */
}

/* Obal panelu — skrytý, dokud se menu nerozbalí */
.vmenu--standalone .vmenu-panel-wrap {
	position: absolute;
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	top: 100%;
	z-index: 999;
	min-width: 640px;
	max-width: 92vw;
	opacity: 0;
	visibility: hidden;        /* skryté i pro čtečky, dokud není otevřeno */
	transition: opacity 0.15s ease, transform 0.15s ease;
	pointer-events: none;
}

/* Rozbalení: hover, klávesový fokus i klik (třída .is-open z JS) */
.vmenu--standalone:hover .vmenu-panel-wrap,
.vmenu--standalone:focus-within .vmenu-panel-wrap,
.vmenu--standalone.is-open .vmenu-panel-wrap {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

/* Bílý panel se skupinami — jemný rámeček kolem celého prvku (4 strany) je povolen */
.vmenu-panel {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem 2rem;
	padding: 1.75rem 2rem;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);   /* rámeček kolem celého panelu */
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* jemný stín ≤6px dle pravidel */
}

/* Jedna dispozice = jeden sloupec */
.vmenu-group {
	min-width: 0;
}

/* Nadpis skupiny „Byty 1+kk …" */
.vmenu-group-title {
	display: block;
	margin-bottom: 0.6rem;
	font-size: 1.0625rem;      /* ~17px, nad minimem 16px */
	font-weight: 700;
	line-height: 1.25;
	color: inherit;
	text-decoration: none;
}

.vmenu-group-title:hover,
.vmenu-group-title:focus {
	color: var(--vmenu-accent); /* akcent při najetí */
}

/* Seznam jednotlivých bytů ve skupině */
.vmenu-byty {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vmenu-byty li {
	margin: 0;
	padding: 0;
}

.vmenu-byty a {
	display: block;
	padding: 0.2rem 0;
	font-size: 1rem;           /* minimum 16px pro běžný text */
	line-height: 1.4;
	color: inherit;
	text-decoration: none;
}

.vmenu-byty a:hover,
.vmenu-byty a:focus {
	color: var(--vmenu-accent);
	text-decoration: underline;
}

/* ---- Responzivita: na užších obrazovkách méně sloupců ---- */
@media (max-width: 900px) {
	.vmenu-panel {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.vmenu--standalone .vmenu-panel-wrap {
		min-width: 320px;
	}
}

@media (max-width: 560px) {
	.vmenu-panel {
		grid-template-columns: 1fr;
		padding: 1.25rem 1.25rem;
	}
}

/* =========================================================================
   Dlaždicové mega-menu pro „Naše byty" VLOŽENÉ do hlavního menu (Elementor Pro
   Nav Menu + UAE). Header pohání knihovna SmartMenus, která otevírání/zavírání
   řeší sama přes inline `display` na <ul class="sub-menu">.

   KLÍČOVÉ: viditelnost (open/close) NECHÁVÁME na SmartMenusu — `display` na úrovni 1
   ZÁMĚRNĚ nepřepisujeme. (Když jsme ho dřív forsírovali, SmartMenus nemohl menu
   schovat → zůstávalo natrvalo otevřené.) My jen přebíjíme rozměry, pozici a vzhled,
   aby z úzkého výsuvníku vznikl vycentrovaný panel s dlaždicemi.
   (Na mobilu < 901px necháme nativní rozbalování — beze změny.)
   ========================================================================= */
@media (min-width: 901px) {

	/* „Naše byty" = kotva pro absolutně poziciovaný panel */
	.vmenu-megamenu {
		position: relative;
	}

	/*
	 * Úroveň 1 = bílý panel. `display` neřešíme (skrývá/odkrývá SmartMenus); jen
	 * přebíjíme inline rozměry/pozici od SmartMenusu přes !important a vzhled.
	 * Sloupce dispozic řešíme přes column-count — funguje i s display:block,
	 * který SmartMenus při otevření nastaví (žádný boj o flex/grid).
	 */
	.vmenu-megamenu > .sub-menu {
		position: absolute !important;
		top: 100% !important;                 /* těsně pod položku → plynulý přejezd myší */
		left: 50% !important;
		transform: translateX(-50%) !important; /* vycentrovat → panel nepřetéká z obrazovky */
		margin: 0 !important;
		width: min(760px, 92vw) !important;   /* přebít inline šířku od SmartMenusu */
		min-width: 0 !important;
		max-width: 92vw !important;
		max-height: none !important;          /* žádný vnitřní scroll */
		overflow: visible !important;
		z-index: 999 !important;              /* panel vždy nad obsahem stránky */
		column-count: 3;                      /* dispozice do 3 sloupců */
		column-gap: 2.5rem;
		padding: 2rem 2.25rem !important;     /* vzduch kolem celého boxu (Elementor jinak padding sráží) */
		font-family: 'Roboto', sans-serif;    /* běžný text webu */
		background: #ffffff;
		border: 1px solid rgba(0, 0, 0, 0.06);   /* jemný rámeček kolem celého panelu */
		border-radius: 14px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 6px 8px rgba(0, 0, 0, 0.07); /* vrstvená měkká elevace (blur ≤8px) */
	}

	/* Zrušit Elementorovy „divider" linky na položkách (vypadaly jako wireframe) */
	.vmenu-megamenu > .sub-menu .menu-item {
		border: 0 !important;
		box-shadow: none !important;
	}

	/* Jedna dispozice = jeden blok, který se neláme přes sloupce */
	.vmenu-megamenu > .sub-menu > .menu-item {
		display: inline-block;                /* zabrání rozlomení skupiny mezi sloupci */
		width: 100%;
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
		margin: 0 0 1.75rem;                  /* vzduch mezi dispozicemi místo linky */
		padding: 0;
		background: transparent;
	}

	/* Nadpis dispozice „Byty …" (zruší 8px border-inline-start i tmavý hover Elementoru) */
	.vmenu-megamenu > .sub-menu > .menu-item > a {
		display: block;
		margin: 0 0 0.8rem;
		padding: 0;
		border: 0;
		font-family: 'Playfair Display', serif; /* nadpisy webu */
		font-size: 1.1875rem;     /* ~19px */
		font-weight: 700;
		line-height: 1.25;
		color: #1f2124;
		background: transparent !important;   /* přebít Elementor hover #3f444b */
		/* Delší EN nadpisy („Apartments 2+kk with a balcony") musí zalomit, jinak dědí
		   nowrap z Elementor/UAE nav menu a přetečou sloupec/panel. */
		white-space: normal !important;
		overflow-wrap: break-word;
	}

	.vmenu-megamenu > .sub-menu > .menu-item > a:hover,
	.vmenu-megamenu > .sub-menu > .menu-item > a:focus {
		color: var(--vmenu-accent) !important; /* akcent webu při najetí na nadpis */
	}

	/* Výrazný CTA box „Aktuálně dostupné byty" — přes celou šířku nad sloupci dispozic */
	.vmenu-megamenu > .sub-menu > .menu-item.vmenu-cta {
		display: block;
		column-span: all;            /* roztáhnout přes všechny sloupce */
		-webkit-column-span: all;
		width: 100%;
		margin: 0 0 1.6rem;
	}

	.vmenu-megamenu > .sub-menu > .menu-item.vmenu-cta > a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		margin: 0;
		padding: 0.95rem 1.4rem !important;
		border: 0;
		border-radius: 10px;
		background: var(--vmenu-accent) !important;   /* magenta box rgb(211,42,90) */
		color: #ffffff !important;
		font-family: 'Playfair Display', serif;       /* nadpisový font webu */
		font-size: 1.1875rem;        /* ~19px */
		font-weight: 700;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
		white-space: normal;
		transition: filter 0.12s ease, transform 0.12s ease;
	}

	/* Šipka vpravo (inline SVG, styl Feather) — jako u tlačítek webu */
	.vmenu-megamenu > .sub-menu > .menu-item.vmenu-cta > a::after {
		content: "";
		flex: 0 0 auto;
		width: 18px;
		height: 18px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	.vmenu-megamenu > .sub-menu > .menu-item.vmenu-cta > a:hover,
	.vmenu-megamenu > .sub-menu > .menu-item.vmenu-cta > a:focus {
		filter: brightness(1.08);
		color: #ffffff !important;
		transform: translateY(-1px);
	}

	/* Skrýt SmartMenus „sub-arrow" šipky — dlaždice jsou vidět rovnou */
	.vmenu-megamenu .sub-arrow {
		display: none !important;
	}

	/* Úroveň 2 (byty) — vždy viditelné dlaždice, ne výsuvný flyout (přebít inline od SmartMenusu) */
	.vmenu-megamenu > .sub-menu > .menu-item > .sub-menu {
		display: flex !important;
		position: static !important;
		top: auto !important;
		left: auto !important;
		transform: none !important;
		flex-wrap: wrap;
		gap: 0.4rem;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		max-height: none !important;
		overflow: visible !important;
		margin: 0;
		padding: 0;
		background: transparent !important;
		border: 0;
		box-shadow: none;
	}

	.vmenu-megamenu > .sub-menu > .menu-item > .sub-menu > .menu-item {
		display: block;
		width: auto;
		margin: 0;
		padding: 0;
		background: transparent;
	}

	/* Samotná dlaždice bytu (rámeček kolem celého prvku je povolen) */
	.vmenu-megamenu > .sub-menu > .menu-item > .sub-menu > .menu-item > a {
		display: block;
		margin: 0;
		padding: 0.45rem 0.9rem;
		border: 1px solid transparent;          /* rámeček bez viditelné barvy (objeví se až na hover) */
		border-radius: 9px;
		font-family: 'Roboto', sans-serif;      /* běžný text webu */
		font-size: 1rem;          /* minimum 16px */
		font-weight: 500;
		line-height: 1.2;
		white-space: nowrap;
		background: #f3f3f4;                     /* měkký chip místo drátěného rámečku */
		color: #2d2d2d;
		text-decoration: none;
		transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
	}

	/* Hover dlaždice = výplň akcentní barvou webu (přebít Elementor #3f444b) */
	.vmenu-megamenu > .sub-menu > .menu-item > .sub-menu > .menu-item > a:hover,
	.vmenu-megamenu > .sub-menu > .menu-item > .sub-menu > .menu-item > a:focus {
		background: var(--vmenu-accent) !important;
		border-color: var(--vmenu-accent);
		color: #ffffff !important;
		transform: translateY(-1px);                       /* jemné nadzvednutí */
		box-shadow: 0 2px 6px rgba(211, 42, 90, 0.28);     /* akcentní stín ≤6px */
	}
}