/*
 * Desktop mega menu (includes/mega-menu.php, assets/mega-menu.js): full-width panels under the fixed header bar, the
 * page dimmed behind them. RTL: logical properties; columns read from the right, the photo (or the designers' button)
 * at the end (left). Tablets and phones keep the burger panel.
 */

/* The panels' holder: the [nr_mega_menu] widget, hanging from the bar's bottom edge (the bar, fixed by Elementor, is
   its containing block). */
.nr-mega-holder.elementor-widget { position: absolute; top: 100%; inset-inline: 0; width: auto; margin: 0; }
@media (max-width: 1024px) { .nr-mega-holder.elementor-widget { display: none; } }

/* The menu's items with a panel (assets/mega-menu.js gives them aria-controls): red while their panel is open, and
   Elementor's arrow after the name turned up. Specific enough for the widget's own colour rule. */
.nr-main-menu.elementor-widget .elementor-nav-menu--main .elementor-nav-menu a.elementor-item[aria-expanded="true"] { color: #EE2C1F; }
.nr-main-menu .elementor-nav-menu--main a[aria-controls] .sub-arrow svg { transition: transform .2s; }
.nr-main-menu .elementor-nav-menu--main a[aria-expanded="true"] .sub-arrow svg { transform: rotate(180deg); }

/* Page dimmed under an open panel (and a click on it closes the panel). */
.nr-mega__scrim {
	position: absolute;
	top: 0;
	inset-inline: 0;
	height: 100vh;
	background: rgb(23 23 23 / 34%);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s, visibility 0s linear .2s;
}
.nr-mega.is-open .nr-mega__scrim { opacity: 1; visibility: visible; transition: opacity .2s; }

.nr-mega__panel {
	position: absolute;
	top: 0;
	inset-inline: 0;
	z-index: 1;
	max-height: calc(100vh - 76px);
	overflow-y: auto;
	padding: 34px 20px 38px;
	border-bottom: 1px solid #ececec;
	background: #fff;
	box-shadow: 0 26px 40px -18px rgb(0 0 0 / 18%);
	font-size: 15px;
	line-height: 22px;
	opacity: 0;
	visibility: hidden; /* Closed: not seen, not reachable by Tab. */
	transform: translateY(-8px);
	transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.nr-mega__panel.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease; }

.nr-mega__inner {
	display: grid;
	grid-template-columns: repeat(var(--nr-mega-cols, 3), minmax(0, 1fr)) 248px;
	gap: 48px;
	max-width: 1200px;
	margin: 0 auto;
}
.nr-mega__inner:not(:has(.nr-mega__feature)) { grid-template-columns: repeat(var(--nr-mega-cols, 3), minmax(0, 1fr)); }

.nr-mega__title { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid #ececec; font-size: 17px; line-height: 24px; }
.nr-mega a { color: #111; text-decoration: none; transition: color .15s; }
.nr-mega a:is(:hover, :focus-visible) { color: #EE2C1F; }
.nr-mega__links { margin: 0; padding: 0; list-style: none; }
.nr-mega__links a { display: block; padding: 5px 0; color: #525252; }
.nr-mega__col--wide .nr-mega__links { columns: 3; column-gap: 48px; }
.nr-mega__col--wide .nr-mega__links li { break-inside: avoid; }
.nr-mega a.nr-mega__all { display: inline-block; margin-top: 12px; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }

.nr-mega__feature { display: grid; gap: 6px; align-content: start; }
.nr-mega__photo { display: block; margin-bottom: 6px; overflow: hidden; aspect-ratio: .835; background: #f1f1f1; }
.nr-mega__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.nr-mega__feature:hover .nr-mega__photo img { transform: scale(1.03); }
.nr-mega__feature-name { font-size: 17px; line-height: 24px; }
.nr-mega__feature-count { color: #767676; font-size: 14px; }

/* Designers: a grid of brands, ruled like a table. (.nr-mega__inner twice: over the "no photo" layout above.) */
.nr-mega__inner.nr-mega__inner--brands { grid-template-columns: minmax(0, 1fr) 248px; }
.nr-mega__brands {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	border-top: 1px solid #ececec;
	border-inline-start: 1px solid #ececec;
	list-style: none;
}
.nr-mega__brands a {
	display: grid;
	gap: 4px;
	align-content: start; /* A long name that wraps doesn't push its row's other names out of line. */
	min-height: 104px;
	height: 100%;
	padding: 16px 20px;
	border-bottom: 1px solid #ececec;
	border-inline-end: 1px solid #ececec;
	transition: background .2s;
}
.nr-mega__brands a:is(:hover, :focus-visible) { background: #faf9f7; color: #111; }
/* The Latin name reads from the left but lines up with the Hebrew on the right. */
.nr-mega__latin { font-size: 13px; line-height: 20px; letter-spacing: .05em; text-transform: uppercase; text-align: end; }
.nr-mega__brand { color: #525252; font-size: 14px; }
.nr-mega__brand-count { color: #767676; font-size: 13px; font-variant-numeric: tabular-nums; }
.nr-mega__side { display: grid; gap: 14px; align-content: start; }
.nr-mega__side p { margin: 0; color: #525252; }
.nr-mega a.nr-mega__cta { display: block; padding: 13px 18px; background: #EE2C1F; color: #fff; text-align: center; transition: background .2s; }
.nr-mega a.nr-mega__cta:is(:hover, :focus-visible) { background: #c92318; color: #fff; }

@media (max-width: 1199px) {
	.nr-mega__inner { gap: 32px; grid-template-columns: repeat(var(--nr-mega-cols, 3), minmax(0, 1fr)) 200px; }
	.nr-mega__inner.nr-mega__inner--brands { grid-template-columns: minmax(0, 1fr) 200px; }
	.nr-mega__brands { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.nr-mega__panel, .nr-mega__scrim, .nr-mega__photo img { transition: none; }
}