/* ================================================
   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;
	}
}