/**
 * Receptek mega menü (inc/mega-menu.php, template-parts/mega-menu.php).
 *
 * Asztali nézetben (≥ 900px) a fejlécsáv alá teljes szélességben nyíló panel:
 * balra képes kategórialista + kereső + „Összes recept” gomb, jobbra blush
 * dobozban a kiemelt receptek. A menüpont alá a brand lefelé mutató
 * háromszöge kerül. Mobilon a panel rejtett, a szokásos almenü látszik.
 */

/* Mobilon nincs panel */
.otthonizei-mega {
	display: none;
}

@media (min-width: 900px) {
	/* A panel a fejlécsávhoz (.site-header__bar) igazodik, nem a menüponthoz */
	.site-nav .menu > li.menu-item--mega {
		position: static;
	}

	.site-nav .menu-item--mega > .sub-menu {
		display: none;
	}

	.site-nav .menu-item--mega > a {
		position: relative;
	}

	/* Brand jelölő: blush háromszög a menüpont alatt, a panel felé mutat */
	.site-nav .menu-item--mega > a::after {
		content: "";
		position: absolute;
		top: 100%;
		left: calc(50% - 7px);
		z-index: 30;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 8px 7px 0 7px;
		border-color: var(--wp--preset--color--accent) transparent transparent transparent;
		opacity: 0;
		transition: opacity 0.15s ease;
	}

	.otthonizei-mega {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		z-index: 25;
		display: block;
		background: var(--wp--preset--color--base);
		border-top: 1px solid var(--wp--preset--color--border);
		box-shadow: 0 28px 40px -16px rgba(0, 0, 0, 0.18);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		/* Záráskor kis késleltetés: átlós egérmozgásnál ne csukódjon be */
		transition: opacity 0.18s ease 0.1s, transform 0.18s ease 0.1s, visibility 0s linear 0.28s;
	}

	/* Híd a menüpont és a panel közti résen át */
	.otthonizei-mega::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: 14px;
	}

	.menu-item--mega:hover > .otthonizei-mega,
	.menu-item--mega:focus-within > .otthonizei-mega {
		opacity: 1;
		visibility: visible;
		transform: none;
		/* Nyitáskor is egy pillanat: átsuhanó egérnél ne villanjon fel */
		transition: opacity 0.2s ease 0.12s, transform 0.2s ease 0.12s, visibility 0s linear 0.12s;
	}

	.menu-item--mega:hover > a::after,
	.menu-item--mega:focus-within > a::after {
		opacity: 1;
		transition-delay: 0.12s;
	}

	/* Escape-pel bezárva (navigation.js), amíg az egér / fókusz el nem hagyja */
	.menu-item--mega.is-mega-closed > .otthonizei-mega {
		opacity: 0;
		visibility: hidden;
		transition: none;
	}

	.menu-item--mega.is-mega-closed > a::after {
		opacity: 0;
	}
}

/* =========================================================
   Elrendezés
   ========================================================= */
.otthonizei-mega__inner {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--wp--preset--spacing--50);
	padding-block: 2rem 2.25rem;
	text-align: left;
}

.otthonizei-mega--no-featured .otthonizei-mega__inner {
	grid-template-columns: minmax(0, 1fr);
}

/* A menü linkstílusainak (uppercase, padding, aláhúzás) semlegesítése a panelben.
   A :hover változat csak színt / aláhúzást állít — elrendezést (display, padding)
   nem, különben felülírná a kategórialink flexét, és hoverre szétesne a sor. */
.site-nav .menu .otthonizei-mega a:not(.wp-element-button) {
	display: block;
	padding: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: inherit;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
}

.site-nav .menu .otthonizei-mega a:not(.wp-element-button):hover {
	color: var(--wp--preset--color--contrast);
	box-shadow: none;
}

.otthonizei-mega .otthonizei-mega__title {
	margin: 0 0 1.25rem;
	line-height: 32px;
}

/* =========================================================
   Kategóriák
   ========================================================= */
/* Minden kategória látszik; ami nem fér ki, az a lista saját helyén görgethető */
.otthonizei-mega__cats {
	display: grid;
	grid-template-columns: repeat(var(--otthonizei-mega-cols, 3), minmax(0, 1fr));
	align-content: start;
	gap: 0.25rem 1.5rem;
	max-height: clamp(180px, calc(100vh - 300px), 360px);
	margin: 0;
	padding: 0 0.75rem 0 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--accent-2) transparent;
}

.otthonizei-mega__cats::-webkit-scrollbar {
	width: 6px;
}

.otthonizei-mega__cats::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--accent-2);
}

.site-nav .menu .otthonizei-mega a.otthonizei-mega__cat {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.35rem 0;
}

.otthonizei-mega__cats--plain .otthonizei-mega__cat {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.site-nav .menu .otthonizei-mega .otthonizei-mega__cats--plain a.otthonizei-mega__cat {
	padding: 0.6rem 0;
}

.otthonizei-mega__cat-media {
	display: block;
	flex: none;
	width: 46px;
	height: 46px;
	overflow: hidden;
	border: 2px solid var(--wp--preset--color--accent);
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
	transition: border-color 0.25s ease;
}

.otthonizei-mega__cat-media .otthonizei-mega__cat-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.otthonizei-mega__cat-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.otthonizei-mega__cat-name {
	font-size: 0.95rem;
	line-height: 1.3;
}

.otthonizei-mega__cat-count {
	margin-top: 0.15rem;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--meta);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.4;
	text-transform: uppercase;
}

.otthonizei-mega__cat:hover .otthonizei-mega__cat-media {
	border-color: var(--wp--preset--color--contrast);
}

.otthonizei-mega__cat:hover .otthonizei-mega__cat-image {
	transform: scale(1.08);
}

.otthonizei-mega__cat:hover .otthonizei-mega__cat-name {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* =========================================================
   Kereső + „Összes recept” gomb
   ========================================================= */
.otthonizei-mega__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

.otthonizei-mega__search {
	display: flex;
	flex: 1 1 260px;
	max-width: 440px;
}

.otthonizei-mega__search input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 0.7em 0.9em;
	border-right: 0;
	font-size: 0.95rem;
}

.otthonizei-mega__search button {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 46px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	cursor: pointer;
}

.otthonizei-mega__search button:hover {
	background: var(--wp--preset--color--dark);
	border-color: var(--wp--preset--color--dark);
}

/* A gomb a theme.json gombstílusát kapja vissza a menü linkstílusai ellen */
.site-nav .menu .otthonizei-mega .otthonizei-mega__all {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.9em 1.6em;
	color: var(--wp--preset--color--base);
	font-weight: 500;
	text-decoration: none;
	box-shadow: none;
}

.site-nav .menu .otthonizei-mega .otthonizei-mega__all:hover {
	color: var(--wp--preset--color--base);
}

.otthonizei-mega__all svg {
	transition: transform 0.2s ease;
}

.otthonizei-mega__all:hover svg {
	transform: translateX(3px);
}

/* =========================================================
   Kiemelt receptek — blush doboz
   ========================================================= */
/* A doboz a panel teljes magasságát kitölti, a címe egy vonalban a bal oldaliéval */
.otthonizei-mega__featured {
	margin-block: -2rem -2.25rem;
	padding: 2rem 1.75rem 2.25rem;
	background: var(--wp--preset--color--accent);
}

/* A blush háttéren az eyebrow vonala és háromszöge fehér */
.otthonizei-mega__featured .otthonizei-mega__title {
	border-bottom-color: var(--wp--preset--color--base);
}

.otthonizei-mega__featured .otthonizei-mega__title::after {
	border-top-color: var(--wp--preset--color--base);
}

.otthonizei-mega__recipes {
	display: grid;
	grid-template-columns: repeat(var(--otthonizei-mega-featured, 2), minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.otthonizei-mega__recipe-media {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background-color: var(--wp--preset--color--accent-2);
}

.otthonizei-mega__featured--1 .otthonizei-mega__recipe-media {
	aspect-ratio: 16 / 10;
}

.otthonizei-mega__featured--3 .otthonizei-mega__recipe-media {
	aspect-ratio: 4 / 5;
}

.otthonizei-mega__recipe-media .otthonizei-mega__recipe-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

/* Brand jelölő: blush háromszög a kép alján, a szöveg felé mutat */
.otthonizei-mega__recipe-media::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 1rem;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 7px 10px 7px;
	border-color: transparent transparent var(--wp--preset--color--accent) transparent;
}

.otthonizei-mega__badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.4rem 0.65rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--meta);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.2;
	text-transform: uppercase;
}

.otthonizei-mega__recipe-cat {
	display: block;
	margin-top: 0.9rem;
	color: var(--wp--preset--color--contrast-2);
	font-family: var(--wp--preset--font-family--meta);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.5;
	text-transform: uppercase;
}

.otthonizei-mega__recipe-title {
	display: block;
	margin-top: 0.3rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.05rem;
	line-height: 1.3;
}

.otthonizei-mega__recipe-time {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.5rem;
	color: var(--wp--preset--color--dark);
	font-family: var(--wp--preset--font-family--meta);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.otthonizei-mega__recipe-link:hover .otthonizei-mega__recipe-image {
	transform: scale(1.05);
}

.otthonizei-mega__recipe-link:hover .otthonizei-mega__recipe-title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* Szűkebb asztali nézet: 3 oszlopos kategórialista, egyetlen kiemelt recept */
@media (min-width: 900px) and (max-width: 1199px) {
	.otthonizei-mega__inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 2fr);
		gap: var(--wp--preset--spacing--40);
	}

	.otthonizei-mega__cats {
		grid-template-columns: repeat(min(var(--otthonizei-mega-cols, 3), 3), minmax(0, 1fr));
		gap: 0.25rem 1rem;
	}

	.otthonizei-mega__cat-media {
		width: 40px;
		height: 40px;
	}

	.otthonizei-mega__cat-name {
		font-size: 0.9rem;
	}

	.otthonizei-mega__featured {
		padding-inline: 1.25rem;
	}

	.otthonizei-mega__recipes {
		grid-template-columns: minmax(0, 1fr);
	}

	.otthonizei-mega__recipe:nth-child(n + 2) {
		display: none;
	}

	.otthonizei-mega__featured .otthonizei-mega__recipe-media {
		aspect-ratio: 4 / 3;
	}
}

@media (prefers-reduced-motion: reduce) {
	.otthonizei-mega,
	.menu-item--mega:hover > .otthonizei-mega,
	.menu-item--mega:focus-within > .otthonizei-mega,
	.otthonizei-mega__cat-image,
	.otthonizei-mega__recipe-image {
		transition: none;
	}
}