/* ================================================
   AMOTZ — SITE HEADER  (Figma 538:3478 → "Frame 2147227130")
   ================================================
   row     1320x90 · space-between · gap 180 · padding 20/0
   brand   169x50 · logo 50x50 + name 16/600 + tagline 10/500
   links   472x46 pill · #252525 · r100 · padding 12/32 · gap 24 · six 14/500 links @ .82
   cta     170x44 gold pill · r1000 · padding 8/20 · 14/600
   ================================================

   TRANSPARENT BY DEFAULT, AND THAT IS THE WHOLE POINT.
   In the design this row is drawn INSIDE the hero, over the photograph — there is no header
   band of its own. As a theme-builder template it therefore has to overlay the first section
   rather than push it down, which is what `position: absolute` on the wrapper achieves. The
   hero's own top padding is zero precisely because this sits in that space.

   On pages with no hero behind it the row would be white-on-white, so `--az-header-fg` is a
   variable and the widget exposes a solid-background switch. */

.az-header {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0 var(--az-edge);
}

/* The overlay mode. Applied by the widget when "Overlay first section" is on — the header is
   lifted out of the document flow so the hero starts at y0 and the row floats in its top
   90px, exactly as the frame is drawn. */
.az-header--overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

.az-header__inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 180px;
	width: 100%;
	max-width: 1320px;
	min-height: 90px;
	padding: 20px 0;
}

/* ------------------------------------------------
   BRAND  — logo FIRST in source so it lands on the RIGHT under RTL, which is where the file
   draws it (text at x1211, logo at x1330).
   ------------------------------------------------ */
.az-header__brand {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 7.42px;
	text-decoration: none;
}

.az-section .az-header__logo {
	display: block;
	width: 50px;
	height: 50px;
	object-fit: contain;
}

.az-header__brandtext {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL start = right */
}

.az-header__name {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: right;
	color: var(--az-header-fg, #FFFFFF);
}

.az-header__tag {
	font-size: 10px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.185507px;
	text-align: right;
	color: var(--az-header-fg, #FFFFFF);
}

/* ------------------------------------------------
   LINK PILL
   ------------------------------------------------ */
.az-header__links {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;
	padding: 12px 32px;
	background-color: #252525;
	border-radius: 100px;
}

.az-header__link {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-align: center;
	white-space: nowrap;
	text-decoration: none;
	color: #FFFFFF;
	/* The file's own value, at rest — not a hover state. Every link carries it. */
	opacity: 0.82;
	transition: opacity 0.15s ease;
}

.az-header__link:hover,
.az-header__link:focus-visible {
	opacity: 1;
}

/* The current page's link, so a visitor can tell where they are. The design does not draw a
   current state; full opacity is the least invented thing that still communicates it. */
.az-header__link[aria-current='page'] {
	opacity: 1;
	font-weight: 600;
}

/* ------------------------------------------------
   GOLD CTA
   ------------------------------------------------ */
.az-header__cta {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 20px;
	background-image: var(--az-gradient-gold);
	border-radius: 1000px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
	white-space: nowrap;
	text-decoration: none;
	color: var(--az-on-gold);
}

/* ------------------------------------------------
   MOBILE
   ------------------------------------------------
   No hamburger. The design does not specify one, and a drawer is a behaviour — inventing it
   would bake a guess into the plugin that is then hard to walk back. Six short Hebrew words
   wrap to two tidy lines inside the pill, which is honest to the design and works.

   The 180px gap is the first casualty: it exists to hold three items apart across 1320px and
   is nonsense once they stack. */
@media (max-width: 1100px) {
	.az-header__inner {
		gap: 32px;
	}

	.az-header__links {
		gap: 16px;
		padding: 12px 20px;
	}
}

@media (max-width: 900px) {
	.az-header {
		padding: 0 16px;
	}

	.az-header__inner {
		flex-wrap: wrap;
		justify-content: center;
		gap: 16px;
		padding: 16px 0;
	}

	.az-header__links {
		flex-wrap: wrap;
		justify-content: center;
		gap: 14px;
	}

	/* Overlaying a wrapped, two-line header on top of a hero photograph pushes the headline
	   under it. On a phone the header takes its own space instead. */
	.az-header--overlay {
		position: relative;
	}
}

/* ══ ELEMENTOR PRO'S NAV MENU, WEARING THE APPROVED DESIGN ═══════════════════════════════════
   The navigation is drawn by Elementor Pro's Nav Menu widget (see render_pro_nav() in the widget)
   because it brings a hamburger, a drawer and the focus handling — behaviour the Figma file does
   not specify and we should not invent. What it does NOT bring is the design: its markup is its
   own, so the pill the client approved is restated here against its selectors.

   Measured off the live desktop header before the swap, so it can be checked rather than trusted:
   pill L444–R959, height 44, #252525, radius 100px, padding 12/32, gap 24, links 14/500 white at
   0.82 opacity.

   The pill went to 116px tall on first render — their <nav>/<ul>/<li> nesting each contributes a
   box, and `.elementor-item` ships 13px/20px padding of its own. Everything below is undoing that
   so the row measures what it measured before. */

/* The pill is our <nav>; their wrapper and list must add no box of their own. */
.az-header__links .elementor-widget-nav-menu,
.az-header__links .elementor-nav-menu--main,
.az-header__links .elementor-nav-menu__container {
	margin: 0;
	padding: 0;
	background: transparent;
	width: auto;
}

.az-header__links .elementor-nav-menu {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.az-header__links .elementor-nav-menu li,
.az-header__links .elementor-nav-menu .menu-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The link itself — the same values `.az-header__link` carries, since this now replaces it.
   `!important` on padding because Elementor sets it inline-equivalent from widget defaults. */
.az-header__links .elementor-nav-menu a.elementor-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	border: 0;
	border-radius: 4px;
	background: transparent;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-align: center;
	white-space: nowrap;
	text-decoration: none;
	color: #FFFFFF;
	/* The file's own value at rest, not a hover state. */
	opacity: 0.82;
	transition: opacity 0.15s ease;
}

.az-header__links .elementor-nav-menu a.elementor-item:hover,
.az-header__links .elementor-nav-menu a.elementor-item:focus,
.az-header__links .elementor-nav-menu a.elementor-item.elementor-item-active {
	background: transparent;
	color: #FFFFFF;
	opacity: 1;
}

.az-header__links .elementor-nav-menu a.elementor-item.elementor-item-active {
	font-weight: 600;
}

/* ══ MOBILE: THE PILL BECOMES A BURGER ══════════════════════════════════════════════════════
   Elementor hands over to its dropdown at tablet and below (1024px), set in render_pro_nav().
   These rules take the same breakpoint so there is no band where its main nav is hidden and our
   pill is still styled as if it were there.

   THERE IS NO MOBILE FRAME IN FIGMA. Rather than invent a look, the mobile header keeps the
   desktop design and only compacts it: same overlay on the hero, same brand lockup, same gold
   CTA, and the dark pill (#252525, r100) shrinks to hold the burger alone. The drawer that opens
   is the same pill colour, so nothing new is introduced.

   The overlay is restored here. It had been turned off on mobile because the old header wrapped
   to two lines and pushed the hero headline down; a one-line bar does not, and overlaying is what
   keeps the white brand text legible — on a white page background it was invisible. */
@media (max-width: 1024px) {
	.az-header--overlay {
		position: absolute;
	}

	.az-header {
		padding: 0 16px;
	}

	/* One row: brand at the right, burger and CTA at the left. No wrapping — wrapping is what
	   grew the bar to 236px. */
	.az-header__inner {
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		padding: 14px 0;
	}

	/* The pill now holds one control, so its 32px side padding would centre a 24px icon in a
	   90px lozenge. */
	.az-header__links {
		flex: 0 0 auto;
		width: auto;
		padding: 8px;
		gap: 0;
	}

	/* Their widget stretches to fill any flex parent — which is what put the toggle 475px wide
	   and 42px off the left edge of the screen. */
	.az-header__links .elementor-widget-nav-menu,
	.az-header__links .elementor-widget-container {
		width: auto;
		flex: 0 0 auto;
	}

	.az-header__links .elementor-menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: #FFFFFF;
	}

	.az-header__links .elementor-menu-toggle svg,
	.az-header__links .elementor-menu-toggle i {
		width: 22px;
		height: 22px;
		font-size: 22px;
		fill: #FFFFFF;
		color: #FFFFFF;
	}

	/* The drawer. Elementor positions this itself; it only needs the palette and room to open —
	   it was rendering 20px tall because our flex pill was constraining it. */
	.az-header__links .elementor-nav-menu--dropdown {
		position: absolute;
		top: calc(100% + 10px);
		right: 0;
		left: 0;
		width: auto;
		max-height: calc(100vh - 120px);
		overflow-y: auto;
		padding: 8px 0;
		border-radius: 16px;
		background-color: #252525;
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
	}

	.az-header__links .elementor-nav-menu--dropdown .elementor-nav-menu {
		display: block;
		width: 100%;
		gap: 0;
	}

	.az-header__links .elementor-nav-menu--dropdown a.elementor-item {
		display: block;
		padding: 14px 22px !important;
		border-radius: 0;
		font-size: 16px;
		font-weight: 500;
		line-height: 24px;
		text-align: right;
		color: #FFFFFF;
		opacity: 0.92;
	}

	.az-header__links .elementor-nav-menu--dropdown a.elementor-item:hover,
	.az-header__links .elementor-nav-menu--dropdown a.elementor-item:focus,
	.az-header__links .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active {
		background-color: rgba(255, 255, 255, 0.07);
		opacity: 1;
	}

	/* THE DRAWER ANCHORS TO THE HEADER, NOT THE PILL.
	   With the pill as its positioning context, `left:0;right:0` spanned the pill — 44px — and the
	   drawer opened as a vertical sliver down the page. The overlay header is already absolutely
	   positioned so it is a containing block; a header that is not overlaying needs to be made one. */
	.az-header:not(.az-header--overlay) {
		position: relative;
	}

	.az-header__links .elementor-nav-menu--dropdown {
		right: 16px;
		left: 16px;
	}

	/* HIDDEN ON A PHONE, at the client's request.
	   It competed with the brand lockup and the burger for 390px, and the same destination is the
	   first item inside the drawer — so nothing is lost by taking it out of the bar. */
	.az-header__cta {
		display: none;
	}
}

/* Below 420px the tagline is the first thing to go — it is a 10px line under the name, and
   losing it buys the CTA the room it needs to stay on one row. */
@media (max-width: 420px) {
	.az-header__tag {
		display: none;
	}

	.az-header__name {
		font-size: 15px;
	}

	.az-section .az-header__logo {
		width: 40px;
		height: 40px;
	}
}

/* The open drawer was measuring 380px tall with all seven links in it and still not appearing:
   the header and pill clip their overflow, and the hero paints over anything that escapes. */
@media (max-width: 1024px) {
	.az-header,
	.az-header__inner,
	.az-header__links,
	.az-header__links .elementor-widget-nav-menu,
	.az-header__links .elementor-widget-container {
		overflow: visible;
	}

	.az-header {
		z-index: 60;
	}

	.az-header__links .elementor-nav-menu--dropdown {
		z-index: 70;
	}
}

/* Elementor's own wrappers carry `position: relative`, so the drawer kept anchoring to the 28px
   toggle and measured 0 wide however its left/right were set. Flattening them makes the header —
   already absolutely positioned as the overlay — the containing block, which is what the
   left/right values above assume. */
@media (max-width: 1024px) {
	.az-header__links,
	.az-header__links .elementor-element,
	.az-header__links .elementor-widget-nav-menu,
	.az-header__links .elementor-widget-container,
	.az-header__links .elementor-nav-menu__container {
		position: static !important;
	}

	.az-header__links .elementor-nav-menu--dropdown {
		position: absolute !important;
		right: 16px !important;
		left: 16px !important;
		width: auto !important;
	}
}