/* ============================================================
   New look - header (ported from the Hebrew site)
   Opt-in: the page's <body class="tnv-new"> plus this file. Loaded on top of /css/site-header.css
   (linked by partials/header.ejs) and changes only the look: same markup, menus, hamburger and script.
   A flat full-width bar with a bottom line, at the page frame's width, so the logo and the menu line up
   with the content. The mega menus hang straight under the bar.
   ============================================================ */

.tnv-new .site-header {
	padding: 0;
	border-bottom: 1px solid #e6e7ea;
	background: #ffffff;
	pointer-events: auto;
}

.tnv-new .site-header__inner {
	max-width: none;
	width: min(1344px, calc(100% - 2 * clamp(12px, 3.4vw, 48px)));
	height: 68px;
	padding-inline: clamp(20px, 3vw, 40px);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.tnv-new .site-header__nav-link {
	color: #3b3f44;
	font-size: 16px;
	font-weight: 400;
}

.tnv-new .site-header__nav-link:hover,
.tnv-new .site-header__nav-link:focus-visible {
	color: #8e56dc;
}

.tnv-new .site-header__login {
	color: #3b3f44;
	font-size: 15px;
}

/* Contact us: a quiet text link beside Login */
.tnv-new .site-header__btn--outline {
	border-color: transparent;
	background: transparent;
	color: #3b3f44;
	font-size: 15px;
}

.tnv-new .site-header__btn--outline:hover {
	border-color: transparent;
	background: transparent;
	color: #7b3bd6;
}

/* Start free trial: the bar's one button, in the primary purple */
.tnv-new .site-header__btn--primary {
	padding: 7px 16px;
	border: 1px solid #8e56dc;
	border-radius: 48px;
	background-color: #8e56dc;
	color: #ffffff;
	font-size: 15px;
	font-weight: 500;
}

.tnv-new .site-header__btn--primary:hover {
	border-color: #7b3bd6;
	background-color: #7b3bd6;
	color: #ffffff;
}

@media (max-width: 970px) {
	.tnv-new .site-header__inner {
		width: 100%;
		height: 60px;
		padding-inline: 16px;
	}

	.tnv-new .site-header__nav {
		top: 100%;
		border-radius: 0 0 12px 12px;
	}

	.tnv-new .site-header__hamburger-line {
		background-color: #8e56dc;
	}

	/* On phones Contact us is the bar's button (Start free trial is hidden there) */
	.tnv-new .site-header__btn--outline {
		padding: 6px 14px;
		border-radius: 48px;
		background: #8e56dc;
		color: #ffffff;
	}

	.tnv-new .site-header__btn--outline:hover {
		background: #7b3bd6;
		color: #ffffff;
	}
}

/* ---------- Mega menus ----------
   Hang straight under the bar at the page frame's width, so their sides continue the frame lines.
   Inside: the items in cells divided by thin lines, the promo beside them behind a line, and the
   scan bar along the foot. Desktop only; the phone menu keeps its own layout. */
@media (min-width: 971px) {
	.tnv-new .site-header__dropdown.site-header__mega-menu {
		top: 69px;
		width: min(1344px, calc(100% - 2 * clamp(12px, 3.4vw, 48px)));
		max-width: none;
		border: 1px solid #e6e7ea;
		border-top: 0;
		border-radius: 0 0 16px 16px;
		box-shadow: 0 24px 48px -28px rgba(20, 16, 40, 0.28);
		font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	}

	.tnv-new .site-header__mega-content {
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: 0;
		padding: 0;
	}

	.tnv-new .site-header__mega-title {
		margin: 0;
		padding: 22px 28px 16px;
		color: #66656f;
		font-size: 0.9375rem;
		font-weight: 400;
		letter-spacing: normal;
	}

	.tnv-new .site-header__mega-left {
		display: flex;
		flex-direction: column;
	}

	.tnv-new .site-header__mega-grid {
		flex: 1 1 auto;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-auto-rows: 1fr;
		gap: 0;
		border-top: 1px solid #e6e7ea;
	}

	.tnv-new .site-header__mega-item {
		align-items: center;
		gap: 14px;
		padding: 22px 28px;
		border-radius: 0;
		border-bottom: 1px solid #e6e7ea;
		border-inline-start: 1px solid #e6e7ea;
		transition: background-color 0.15s ease;
	}

	.tnv-new .site-header__mega-item:nth-child(3n + 1) {
		border-inline-start: 0;
	}

	.tnv-new .site-header__mega-item:nth-last-child(-n + 3) {
		border-bottom: 0;
	}

	.tnv-new .site-header__mega-item:hover,
	.tnv-new .site-header__mega-item:focus-visible {
		background-color: #f8f8fb;
	}

	.tnv-new .site-header__mega-item:focus-visible {
		outline: 3px solid #8e56dc;
		outline-offset: -3px;
	}

	/* Quiet icons: a light grey square with a thin line; purple only on hover or focus */
	.tnv-new .site-header__mega-icon {
		width: 40px;
		height: 40px;
		margin-top: 2px;
		border: 1px solid #e6e7ea;
		border-radius: 10px;
		background-color: #f8f8fb;
		color: #4a4858;
		transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
	}

	.tnv-new .site-header__mega-icon svg {
		width: 22px;
		height: 22px;
	}

	.tnv-new .site-header__mega-icon svg [stroke]:not([stroke="none"]) {
		stroke: currentColor;
	}

	.tnv-new .site-header__mega-icon svg [fill]:not([fill="none"]):not([fill="white"]):not([fill="#fff"]):not([fill="#FFF"]):not([fill="#ffffff"]) {
		fill: currentColor;
	}

	.tnv-new .site-header__mega-item:hover .site-header__mega-icon,
	.tnv-new .site-header__mega-item:focus-visible .site-header__mega-icon {
		border-color: #ddd0f3;
		background-color: #f7f2fe;
		color: #7b3bd6;
	}

	.tnv-new .site-header__mega-item-title {
		color: #2c2b36;
		font-size: 1rem;
		font-weight: 500;
		transition: color 0.15s ease;
	}

	.tnv-new .site-header__mega-item:hover .site-header__mega-item-title {
		color: #7b3bd6;
	}

	/* Lets the text column shrink inside its cell, so a description wraps within it */
	.tnv-new .site-header__mega-text {
		min-width: 0;
	}

	/* The English descriptions run longer than the Hebrew ones: up to two lines, then an ellipsis */
	.tnv-new .site-header__mega-item-desc {
		display: -webkit-box;
		margin-top: 2px;
		overflow: hidden;
		color: #66656f;
		font-size: 0.875rem;
		line-height: 1.45;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.tnv-new .site-header__mega-right {
		padding-left: 0;
		border-inline-start: 1px solid #e6e7ea;
	}

	.tnv-new .site-header__mega-promo {
		padding: 0 28px 24px;
	}

	.tnv-new .site-header__mega-image {
		aspect-ratio: 2 / 1;
		height: auto;
		border-radius: 10px;
		object-fit: cover;
	}

	.tnv-new .site-header__mega-promo-title {
		margin: 16px 0 4px;
		color: #2c2b36;
		font-size: 1.0625rem;
		font-weight: 500;
	}

	.tnv-new .site-header__mega-promo-desc {
		margin: 0 0 14px;
		color: #66656f;
		font-size: 0.875rem;
	}

	.tnv-new .site-header__mega-promo-link {
		color: #7b3bd6;
		font-size: 0.9375rem;
		font-weight: 500;
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.tnv-new .site-header__mega-cta {
		padding: 14px 28px;
		border-top: 1px solid #e6e7ea;
		background-color: #f8f8fb;
	}

	.tnv-new .site-header__mega-cta-icon {
		border: 1px solid #e6e7ea;
		background-color: #ffffff;
	}

	.tnv-new .site-header__mega-cta-icon path {
		fill: #4a4858;
	}

	.tnv-new .site-header__mega-cta-text {
		color: #66656f;
		font-size: 0.875rem;
	}

	.tnv-new .site-header__mega-cta-text strong {
		color: #2c2b36;
		font-size: 0.875rem;
		font-weight: 500;
	}

	.tnv-new .site-header__mega-cta-divider {
		color: #d4d5db;
	}

	.tnv-new .site-header__mega-cta-btn {
		min-height: 40px;
		padding: 8px 20px;
		border-radius: 48px;
		background-color: #8e56dc;
		font-size: 0.875rem;
		font-weight: 500;
	}

	.tnv-new .site-header__mega-cta-btn:hover {
		background-color: #7b3bd6;
	}

	/* No hover bridge: the menu hangs straight from the bar's bottom line, so there is no gap to cross */
	.tnv-new .site-header__nav-item:hover::after,
	.tnv-new .site-header__inner:hover .site-header__nav-item--active-hover::after,
	.tnv-new .site-header__dropdown::before {
		content: none;
	}

	/* A hover-opened menu stays open by its class alone; the header script removes the class
	   (after a short delay) when the pointer really leaves the bar and the menu */
	.tnv-new .site-header__nav-item--active-hover > .site-header__dropdown {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
}

/* Narrower desktops: two columns of items and a narrower promo */
@media (min-width: 971px) and (max-width: 1199px) {
	.tnv-new .site-header__mega-content {
		grid-template-columns: minmax(0, 1fr) 300px;
	}

	.tnv-new .site-header__mega-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tnv-new .site-header__mega-item {
		padding: 18px 22px;
	}

	.tnv-new .site-header__mega-item:nth-child(n) {
		border-bottom: 1px solid #e6e7ea;
		border-inline-start: 1px solid #e6e7ea;
	}

	.tnv-new .site-header__mega-item:nth-child(2n + 1) {
		border-inline-start: 0;
	}

	.tnv-new .site-header__mega-item:nth-last-child(-n + 2) {
		border-bottom: 0;
	}

	.tnv-new .site-header__mega-promo {
		padding-inline: 22px;
	}
}