/* Tomer Asaf - Mega Menu. Scoped entirely under .ta-mega-menu to avoid touching existing nav styles. */

:root {
	--ta-mega-ink: #292566;
	--ta-mega-secondary: #33373d;
	--ta-mega-accent: #0075ff;
	--ta-mega-card-bg: #f3f6ff;
	--ta-mega-border: #e6e7ee;
	--ta-mega-divider: #ececf2;
	--ta-mega-radius: 5px;
	--ta-mega-header-h: 72px;
	--ta-mega-font: Alef, sans-serif;
}

.ta-mega-menu {
	box-sizing: border-box;
	position: fixed;
	inset-inline: 0;
	top: var(--ta-mega-header-h);
	z-index: 9000;
	max-height: calc(100vh - var(--ta-mega-header-h));
	overflow-y: auto;
	overflow-x: hidden;
	background: #fff;
	border-top: 1px solid var(--ta-mega-border);
	box-shadow: 0 12px 24px rgba(31, 31, 51, 0.12);
	font-family: var(--ta-mega-font);
	direction: rtl;
}

.ta-mega-menu * {
	box-sizing: border-box;
}

.ta-mega-menu[hidden] {
	display: none;
}

.ta-mega-menu__inner {
	padding: 8px 16px 24px;
}

/* ---- Consultation card ---- */

.ta-mega-menu__consultation {
	background: var(--ta-mega-card-bg);
	border-radius: var(--ta-mega-radius);
	padding: 24px 20px;
	text-align: center;
	color: var(--ta-mega-ink);
	margin-bottom: 20px;
}

.ta-mega-menu__consult-icon {
	display: inline-flex;
	width: 44px;
	height: 44px;
	color: var(--ta-mega-ink);
}

.ta-mega-menu__consult-icon svg {
	width: 100%;
	height: 100%;
}

.ta-mega-menu__consult-title {
	font-family: var(--ta-mega-font);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	margin: 12px 0 8px;
}

.ta-mega-menu__consult-text {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	margin: 0 0 16px;
}

.ta-mega-menu__consult-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 44px;
	padding: 10px 20px;
	background: var(--ta-mega-accent);
	color: #fff;
	font-family: var(--ta-mega-font);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	border-radius: var(--ta-mega-radius);
	width: 100%;
}

.ta-mega-menu__consult-button:hover,
.ta-mega-menu__consult-button:focus-visible {
	filter: brightness(1.08);
}

/* ---- Categories: mobile-first accordion ---- */

.ta-mega-menu__categories {
	display: flex;
	flex-direction: column;
}

.ta-mega-menu__category {
	border-bottom: 1px solid var(--ta-mega-divider);
}

.ta-mega-menu__cat-heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

/* button.<class> (not just .<class>): the theme's reset.css matches <button type="button">
   via an equal-specificity [type="button"] selector loaded after this stylesheet, so a bare
   class selector loses on source order. Tag+class breaks that tie safely. */
button.ta-mega-menu__cat-toggle {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 44px;
	padding: 14px 4px;
	cursor: pointer;
	color: var(--ta-mega-ink);
	font-family: var(--ta-mega-font);
	font-size: 16px;
	font-weight: 700;
}

/* The theme's reset.css ships a global `button:hover, button:focus { background-color: #cc3366
   (pink); color: #fff }` that is not part of the brand palette. `all: unset` above ties with it
   on specificity and the theme sheet loads later, so it wins and painted the category heading
   pink on hover/click. Re-assert the resting colors with a higher-specificity selector. */
button.ta-mega-menu__cat-toggle:hover,
button.ta-mega-menu__cat-toggle:focus,
button.ta-mega-menu__cat-toggle:active {
	background-color: transparent;
	color: var(--ta-mega-ink);
	text-decoration: none;
}

.ta-mega-menu__cat-toggle:focus-visible {
	outline: 2px solid var(--ta-mega-accent);
	outline-offset: 2px;
	border-radius: 3px;
}

.ta-mega-menu__cat-icon {
	display: inline-flex;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	color: var(--ta-mega-ink);
}

.ta-mega-menu__cat-icon svg {
	width: 100%;
	height: 100%;
}

.ta-mega-menu__cat-label {
	flex: 1 0 auto;
}

.ta-mega-menu__cat-caret {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-inline-end: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.ta-mega-menu__cat-toggle[aria-expanded='true'] .ta-mega-menu__cat-caret {
	transform: rotate(225deg);
}

/* The collapse/expand grid trick needs exactly one grid item, so it lives on this wrapper
   around the whole <ul> rather than on the <ul> itself (which has one <li> per link - grid
   would otherwise lay those out as N separate auto-sized rows instead of collapsing as one
   block). Toggled by JS adding/removing `.is-open`, not a CSS sibling selector: the toggle
   <button> lives inside an <h3>, so it has no direct sibling relationship to this wrapper. */
.ta-mega-menu__links-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.25s ease;
}

.ta-mega-menu__links-wrap.is-open {
	grid-template-rows: 1fr;
}

.ta-mega-menu__links {
	list-style: none;
	margin: 0;
	padding: 0 4px;
	overflow: hidden;
	min-height: 0;
}

.ta-mega-menu__links a {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 8px 8px 8px 4px;
	color: var(--ta-mega-secondary);
	font-family: var(--ta-mega-font);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.ta-mega-menu__links a:hover,
.ta-mega-menu__links a:focus-visible {
	color: var(--ta-mega-accent);
}

.ta-mega-menu__links a:focus-visible {
	outline: 2px solid var(--ta-mega-accent);
	outline-offset: 2px;
	border-radius: 3px;
}

.ta-mega-menu__chevron {
	display: inline-flex;
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	color: currentColor;
}

.ta-mega-menu__chevron svg {
	width: 100%;
	height: 100%;
}

/* ---- Desktop: 4 columns + consultation card beside them ---- */

@media (min-width: 1025px) {
	.ta-mega-menu {
		/* position: fixed is kept from the base rule; JS sets top/right/width inline
		   per-open from the trigger's live position (inline styles win over inset-inline: 0
		   below), since it can't rely on DOM adjacency to the trigger - see JS comment. */
		max-height: none;
		overflow: visible;
		border-radius: 10px;
		border: 1px solid var(--ta-mega-border);
	}

	.ta-mega-menu__inner {
		display: flex;
		/* row-reverse, not row: the consultation card is the first DOM child (for a sane
		   reading/tab order), and plain "row" inside this panel's direction:rtl puts the
		   first child at the main-start, which for RTL is the RIGHT edge - the opposite of
		   the intended layout (card on the left, categories - already right-to-left via
		   their own nested row - filling the right). row-reverse puts the first child at
		   the main-end (left in RTL) instead. */
		flex-direction: row-reverse;
		align-items: stretch;
		gap: 6px;
		padding: 30px 24px;
	}

	.ta-mega-menu__consultation {
		flex: 0 0 266px;
		margin-bottom: 0;
	}

	.ta-mega-menu__categories {
		flex: 1 0 0;
		flex-direction: row;
	}

	.ta-mega-menu__category {
		flex: 1 0 0;
		border-bottom: none;
		border-inline-start: 1px solid var(--ta-mega-divider);
		padding: 0 20px;
	}

	.ta-mega-menu__category:first-child {
		border-inline-start: none;
	}

	button.ta-mega-menu__cat-toggle {
		cursor: default;
		font-size: 14px;
		padding: 6px 0;
		min-height: 32px;
	}

	.ta-mega-menu__cat-caret {
		display: none;
	}

	.ta-mega-menu__links-wrap {
		grid-template-rows: 1fr;
	}

	.ta-mega-menu__links {
		padding: 8px 0 0;
	}

	.ta-mega-menu__links a {
		min-height: 40px;
		padding: 6px 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ta-mega-menu__links-wrap,
	.ta-mega-menu__cat-caret {
		transition: none;
	}
}

/* ---- Trigger indicator: "שירותי המשרד" gets a static circular chevron badge so it reads
   as a menu opener before it's ever clicked - no color/fill or rotation change on hover or
   open, by Naor's explicit request (2026-09-23: no "lighting up", a plain click should just
   open the panel with no effect on the badge itself). Pure CSS (::before = circle, ::after =
   chevron via a masked inline SVG) rather than injected markup, since Elementor Pro's Nav
   Menu widget uses its own walker and isn't guaranteed to honor the nav_menu_item_title
   filter - the data-mega-trigger attribute it's keyed off already reaches the final DOM
   either way (added via nav_menu_link_attributes, same attribute the JS above relies on). */

a[data-mega-trigger] {
	position: relative;
	padding-inline-end: 34px;
}

/* !important throughout - elementor-pro's own nav-menu widget CSS (both its base
   widget-nav-menu.css and this specific header's generated post-79.css) reuses ::before/::after
   on every .elementor-item for its own pointer-hover-effect feature, at all times (not just
   hover): a high-specificity ":not(:hover):not(:focus):not(.elementor-item-active)
   :not(.highlighted)" reset forces opacity:0 at rest, and ".elementor-nav-menu--main
   .elementor-item::before/::after" unconditionally sets background to the theme's accent
   color. Both outrank a plain a[data-mega-trigger] selector on specificity, so the static
   look (transparent circle, ink-colored chevron) needs !important just to render correctly
   at rest, independent of the open/closed state this badge intentionally no longer reacts to.
   transform also needs !important: elementor-pro ships a separate, pointer-type-agnostic
   reset - ".elementor-item:hover::before, .elementor-item:hover::after { transform: scale(1) }"
   (and the same for :focus/.elementor-item-active/.highlighted) - that silently replaced this
   badge's translateY(-50%) centering with scale(1) on hover, visibly shifting the circle and
   chevron ~5px out of vertical center. Locking the transform stops that shift too. */

a[data-mega-trigger]::before {
	content: '';
	position: absolute;
	inset-inline-end: 0;
	top: 50%;
	width: 24px;
	height: 24px;
	transform: translateY(-50%) !important;
	border-radius: 50%;
	border: 1.5px solid var(--ta-mega-border);
	background-color: transparent !important;
	opacity: 1 !important;
}

a[data-mega-trigger]::after {
	content: '';
	position: absolute;
	inset-inline-end: 7px;
	top: 50%;
	width: 10px;
	height: 10px;
	transform: translateY(-50%) !important;
	background-color: var(--ta-mega-ink) !important;
	opacity: 1 !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 10px 10px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 10px 10px;
}

/* ---- Header nav hover animation, replaced across the main nav's regular items (Naor's
   request, 2026-09-23): the header's Nav Menu widget has Elementor's built-in "Pointer:
   Text / Shrink" style set in its own Style tab (`e--pointer-text e--animation-shrink` on
   the nav's own container class), which scales hovered item text down to 80% - a "zoom out"
   jump Naor didn't want, on any nav item. Overridden here via CSS instead of editing the
   widget's own stored _elementor_data, to avoid another risky direct postmeta edit on this
   header (see the hero background video incident elsewhere in CHANGELOG.md for why that's
   worth avoiding when a pure CSS override can do the same job). Replaced with a thin,
   subtle underline that grows in on hover/focus - a background-image trick (not a
   pseudo-element), EXCLUDING the "שירותי המשרד" trigger item: Naor confirmed the mega-menu
   indicator badge must have zero visual change on hover or click (not the color/rotate
   effect removed above, and not this new underline either) - so the trigger keeps the
   shrink-neutralize (still no unwanted zoom) but never gets the underline treatment. */

.e--pointer-text.e--animation-shrink .elementor-item:focus,
.e--pointer-text.e--animation-shrink .elementor-item:hover {
	transform: none !important;
}

.elementor-nav-menu--main .elementor-item:not([data-mega-trigger]) {
	background-image: linear-gradient(var(--ta-mega-accent), var(--ta-mega-accent));
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 0% 2px;
	transition: background-size 0.25s ease;
}

.elementor-nav-menu--main .elementor-item:not([data-mega-trigger]):hover,
.elementor-nav-menu--main .elementor-item:not([data-mega-trigger]):focus {
	background-size: 55% 2px;
}

@media (prefers-reduced-motion: reduce) {
	.elementor-nav-menu--main .elementor-item:not([data-mega-trigger]) {
		transition: none;
	}
}