/**
 * wyg-css-header
 *
 * WHAT: The residue of header styling that Elementor has no control for --
 * the language control's pill and menu, the rule that separates the Pizzaballa
 * page link from the three anchor links above it, the logo's fluid height, the
 * nav's weight, and the mobile reordering that puts the globe before the
 * hamburger. Everything Elementor does expose -- nav family and size, colors,
 * the underline pointer, container padding, gap, alignment, sticky -- is set on
 * the widgets and containers, not here.
 *
 * WHY: architecture.md section 6. Elementor mirrors its own controls for RTL;
 * hand-written CSS does not, so every line written by hand is a line that has
 * to be checked in Hebrew and Arabic. Keeping this file to what Elementor
 * cannot express keeps that surface small. Two of three launch languages are
 * RTL, so every property here that has a side is a logical property --
 * inset-inline-end, padding-inline-start, border-block-start. There is not one
 * left or right in this file, and there must not be.
 *
 * REJECTED: styling WPML's own switcher markup instead of our own. It cannot
 * carry aria-expanded, so the CSS would have been the smaller half of a control
 * that failed its accessibility requirement anyway. See wyg-language-switcher.
 *
 * REJECTED: :last-child for the rule above the Pizzaballa link. The About Us
 * submenu is expected to grow -- architecture.md section 1 calls the page set a
 * floor, not a ceiling -- and the moment a sixth item is added below it the
 * rule silently moves to the wrong item. The menu item carries the class
 * wyg-nav-pagelink, set in wp-admin, so the rule is attached to the meaning
 * rather than to the position.
 *
 * GOTCHAS:
 * - EVERY SELECTOR HERE IS DELIBERATELY TWO CLASSES DEEP, and that is not
 *   stylistic. Elementor's kit stylesheet emits `.elementor-kit-6 button` and
 *   `.elementor-kit-6 img` -- specificity 0,1,1 -- and the body carries
 *   `elementor-kit-6`, so a single-class rule here loses to it. Measured
 *   2026-08-16: with `.wyg-ls__toggle` alone, the pill rendered with the kit's
 *   button background, radius, padding and color, and the logo kept its
 *   intrinsic 306px height. `.wyg-ls .wyg-ls__toggle` is 0,2,0 and wins.
 *   Do not "simplify" these selectors back to one class.
 * - The nav's font-weight is set here rather than on the widget because the
 *   widget's typography is bound to the WYG / Small global, and a bound global
 *   replaces the whole typography group -- a local weight alongside it is
 *   ignored. WYG / Small carries no weight of its own (checked on the kit
 *   2026-08-16), so without this rule the nav renders at the theme's default.
 *   The tidier fix is a weight on the global itself, which is a change to
 *   architecture.md section 3b and belongs to whoever owns that section.
 * - The sticky shadow keys off .elementor-sticky--effects, which Elementor Pro
 *   adds to a sticky element once it has scrolled past its Effects Offset. The
 *   offset must be 1 or greater on the header container or the class is never
 *   added and the shadow never appears.
 * - The nav collapses at Elementor's tablet breakpoint, 1024px, because that is
 *   what the Nav Menu widget's own Dropdown control offers. The approved mockup
 *   stepped at 1000px. 24px, deliberately traded -- architecture.md section 3c
 *   explains why the tablet breakpoint stays at 1024.
 * - Loaded as a real stylesheet, not inline: this snippet must keep
 *   load_as_file set to yes, which wyg-css-file-lock re-applies if it is lost.
 */

/* --------------------------------------------------------------------------
   1. The bar
   Sticky is Elementor's; only the scrolled state's shadow is ours, because
   Elementor has no control that changes box-shadow on the sticky state.
   -------------------------------------------------------------------------- */

.wyg-header.wyg-header {
	transition: box-shadow 0.25s cubic-bezier( 0.2, 0.6, 0.3, 1 );
}

.wyg-header.elementor-sticky--effects {
	box-shadow: 0 6px 22px rgba( 38, 54, 63, 0.10 );
}

/* --------------------------------------------------------------------------
   2. The logo
   Sized by height rather than width, matching the approved mockup, and in rem
   so it grows with a reader who has raised their browser's default size. The
   audience for this site runs to 85.
   -------------------------------------------------------------------------- */

/*
 * The doubled class is not decoration. Elementor core ships
 * `.elementor-widget-image a img[src$=".svg"] { width: 48px; }` at specificity
 * 0,2,2, and this logo is a linked image, so the moment the PNG was swapped for
 * the final SVG on 2026-08-18 that rule started matching and won against the
 * single-class selector this rule used to carry -- the mark rendered 48px wide
 * by 100px tall, ratio 0.48 against the artwork's own 1.96. 0,3,1 clears it.
 * Do not simplify this selector back to one class while the logo is an SVG.
 */
.wyg-header .wyg-header__logo.wyg-header__logo img {
	block-size: 6.25rem;
	inline-size: auto;
	max-inline-size: none;
}

/* --------------------------------------------------------------------------
   3. The navigation
   Only the weight -- see the note in the header block about the bound global.
   Five classes deep because Elementor's own per-widget rule for this widget is
   four (.elementor-282 .elementor-element .elementor-element-112b710
   .elementor-item); a tie would be decided by stylesheet order, which is not
   something to rely on.
   -------------------------------------------------------------------------- */

.wyg-header .wyg-header__nav.elementor-widget-nav-menu .elementor-nav-menu .elementor-item {
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   3b. The hamburger's tap area
   Elementor's Toggle Size control sizes the icon; the button box around it is
   the icon plus a fixed 0.25em, which measured 33x33 at the default. The floor
   for this header is 44.
   -------------------------------------------------------------------------- */

/*
 * No `display` here. Elementor hides this button above the collapse breakpoint
 * with `display: none`, and a `display` declaration in this rule overrides that
 * at every width -- the hamburger then renders next to the desktop nav and the
 * extra 44px pushes the row past the shell, wrapping the language control onto
 * a second line. Seen on a 1300px viewport, 2026-08-16. Set the box, never the
 * display.
 */
.wyg-header .wyg-header__nav .elementor-menu-toggle {
	align-items: center;
	justify-content: center;
	min-block-size: 2.75rem;
	min-inline-size: 2.75rem;

	/*
	 * Elementor derives the toggle's border color from its icon color, and the
	 * mockup draws that border in the hairline tan rather than in the icon's
	 * dark blue.
	 */
	border-color: #C3B9A7;
}

/* --------------------------------------------------------------------------
   4. The language control
   Markup from wyg-language-switcher, behavior from wyg-js-header.
   -------------------------------------------------------------------------- */

.wyg-ls {
	position: relative;
	flex: none;
}

.wyg-ls .wyg-ls__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-block-size: 2.75rem;
	padding-block: 0.5rem;
	padding-inline: 0.95rem;
	border: 1px solid #C3B9A7;
	border-radius: 999px;
	background: #FFFFFF;
	color: #325163;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

/*
 * The magenta this rule used to fight is gone at source. Site Settings ->
 * Theme Style -> Buttons now carries the sitewide button states, and Elementor
 * emits `.elementor-kit-6 button:hover, .elementor-kit-6 button:focus` at
 * specificity 0,2,1 -- which outranks Hello Elementor reset.css's own
 * `button:hover, button:focus` at 0,1,1. Nothing here patches that any more;
 * see the build log for 2026-08-16.
 *
 * :focus stays, and it is NOT the same rule living twice. The kit's focus
 * state paints every button in the accent Dark Red. This pill is a white
 * control with a tan hairline and a warm tint of its own, so without this rule
 * a keyboard arrival would repaint it solid Dark Red. `.wyg-ls
 * .wyg-ls__toggle:focus` is 0,3,0 and outranks the kit's 0,2,1, which is what
 * keeps the component's approved design. :focus-visible is dropped: it is a
 * strict subset of :focus and added nothing. The focus RING is not set here --
 * it comes from wyg-css-global and applies to every interactive element.
 */
.wyg-ls .wyg-ls__toggle:hover,
.wyg-ls .wyg-ls__toggle:focus {
	background: #EDE7DC;
	color: #325163;
	/* HO-39: border-color was the one property this rule left unanswered, so the
	   kit's `.elementor-kit-6 button:hover` -- Dark Red -- won it while background
	   and color above were already correctly overridden. Same family as the
	   comment above this rule: a keyboard arrival should not repaint the pill,
	   here specifically its border, in the kit's own hover color. Todd's call,
	   reversible in one line if a Dark Red hairline on hover is preferred instead. */
	border-color: #C3B9A7;
}

.wyg-ls .wyg-ls__globe {
	flex: none;
}

/*
 * A border triangle rather than a text character: a caret typed as text is
 * read aloud by some screen readers even inside an aria-hidden span, and a
 * glyph would need a font that carries it in all three scripts.
 */
.wyg-ls .wyg-ls__caret {
	inline-size: 0;
	block-size: 0;
	border-inline-start: 0.25rem solid transparent;
	border-inline-end: 0.25rem solid transparent;
	border-block-start: 0.3rem solid currentColor;
	transition: transform 0.18s cubic-bezier( 0.2, 0.6, 0.3, 1 );
}

.wyg-ls .wyg-ls__toggle[aria-expanded="true"] .wyg-ls__caret {
	transform: rotate( 180deg );
}

.wyg-ls .wyg-ls__menu {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: calc( 100% + 0.45rem );
	z-index: 40;

	/*
	 * 100% of .wyg-ls, which is the toggle's own width, so the panel sits flush
	 * under the pill instead of overhanging it. It was a fixed 9.375rem, which
	 * measured 150px against a 126px pill while the list's natural content width
	 * is only 71px -- the two non-Latin words are short. Percentage rather than a
	 * hardcoded 126px because the pill's width follows the current language's
	 * name, so it differs on the Hebrew and Arabic sites.
	 */
	min-inline-size: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	list-style: none;
	background: #FFFFFF;
	border: 1px solid #C3B9A7;
	border-radius: 5px;
	box-shadow: 0 8px 24px rgba( 38, 54, 63, 0.14 );
}

.wyg-ls .wyg-ls__item {
	margin: 0;
	list-style: none;
}

.wyg-ls .wyg-ls__link {
	display: block;
	min-block-size: 2.75rem;
	padding-block: 0.75rem;
	padding-inline: 1rem;
	color: #4C5A61;
	font-size: 0.9375rem;
	/*
	 * start, not end. Changed HO-38, 2026-08-19, with the matching markup
	 * change in wyg-language-switcher, and the two only work together.
	 *
	 * The pair of them fixes a dropdown that was aligning its rows to
	 * OPPOSITE edges of the same panel on /he/ and /ar/ -- English 16px from
	 * the right, Arabic 16px from the left. Cause was `dir` on each anchor:
	 * a logical alignment resolves against the element's own direction, so
	 * one rule produced two answers. The markup now carries `dir` on the
	 * <bdi> instead, and the anchor inherits the panel's direction.
	 *
	 * With that inheritance in place `end` would have meant the FAR edge from
	 * the toggle -- and on the English site it would have moved every row
	 * from the left, where the approved design puts them, to the right.
	 * `start` keeps English exactly as approved and mirrors it in Hebrew and
	 * Arabic, which is what the flip rule asks for. Measured on all three
	 * languages: every row 16px from the panel's start edge.
	 */
	text-align: start;
	text-decoration: none;
}

.wyg-ls .wyg-ls__link:hover,
.wyg-ls .wyg-ls__link:focus-visible {
	background: #F4F1EC;
	color: #325163;
}

/* --------------------------------------------------------------------------
   5. The About Us submenu
   The three anchors are secondary to the page link below them, so the page
   link is separated by a rule and left at full weight.
   -------------------------------------------------------------------------- */

/*
 * The rule that used to sit above the Pizzaballa link lived here as a
 * border-block-start. It is now the Nav Menu widget's own Dropdown Divider,
 * set to the same 1px #DCD5C8 on 2026-08-20 while matching the mobile drawer to
 * the mockup: the widget draws it between every dropdown item, which on desktop
 * is the single line this rule drew, and in the mobile drawer is every row
 * separator the mockup asks for. One control replaced one CSS rule and supplied
 * eight more lines for free -- so the rule is gone rather than duplicated.
 *
 * If the divider is ever switched off, the desktop submenu loses that
 * separation and this is the rule to bring back.
 */

.wyg-header .wyg-header__nav.elementor-widget-nav-menu .elementor-nav-menu--dropdown .wyg-nav-anchor > a.elementor-sub-item {
	position: relative;
	padding-inline-start: 1.9rem;
	font-weight: 400;
}

/*
 * The marker that makes the indent legible.
 *
 * The indent alone stopped reading as hierarchy once Fellows and Partners were
 * removed on 2026-08-18 and the submenu dropped to one anchor plus one page
 * link: a single item sitting 12.8px deeper than its neighbor reads as
 * misalignment, which is exactly how it was reported. Todd's call the same day
 * was to keep the tier and mark it rather than flatten it, since the anchor set
 * may grow again after launch.
 *
 * Drawn with borders rather than typed as a glyph, for the same two reasons the
 * language control's caret is: a character is announced by some screen readers
 * even inside decorative markup, and no single font carries a chevron across
 * Latin, Hebrew and Arabic. An empty ::before announces nothing.
 *
 * border-inline-start is what points it. Being a logical property it maps to the
 * right-hand border under RTL, so the triangle turns to face inline-end in
 * Hebrew and Arabic without a second rule.
 */
.wyg-header .wyg-header__nav.elementor-widget-nav-menu .elementor-nav-menu--dropdown .wyg-nav-anchor > a.elementor-sub-item::before {
	content: "";
	position: absolute;
	inset-inline-start: 1.15rem;
	inset-block-start: 50%;
	transform: translateY( -50% );
	inline-size: 0;
	block-size: 0;
	border-block-start: 0.25rem solid transparent;
	border-block-end: 0.25rem solid transparent;
	border-inline-start: 0.3rem solid currentColor;
	opacity: 0.5;
}

/* --------------------------------------------------------------------------
   6. Below the collapse breakpoint
   The nav becomes the hamburger's drawer; the language control loses its word
   and becomes the globe alone, sitting between the logo and the hamburger.
   -------------------------------------------------------------------------- */

@media ( max-width: 1024px ) {

	.wyg-header .wyg-header__logo.wyg-header__logo img {
		block-size: 5rem;
	}

	/*
	 * order is direction-agnostic in a flex row, so this reorders correctly in
	 * Hebrew and Arabic without a second rule.
	 */
	.wyg-header__controls .wyg-header__lang {
		order: -1;
	}

	.wyg-ls .wyg-ls__current,
	.wyg-ls .wyg-ls__caret {
		display: none;
	}

	.wyg-ls .wyg-ls__toggle {
		justify-content: center;
		min-inline-size: 2.75rem;
		padding-inline: 0.5rem;
		border-radius: 5px;
	}

	/* ----------------------------------------------------------------------
	   6b. The drawer
	   Reported 2026-08-20 (Userback 8241267) as not matching the mockup, from
	   an iPhone at 430px. Everything Elementor could express responsively --
	   the row padding -- is on the widget; everything below is a control that
	   is NOT responsive, so setting it there would have changed the desktop
	   submenu too. The mockup's desktop panel is white and its drawer is cream,
	   so they genuinely differ and one non-responsive control cannot serve both.
	   Measured against mockups/contact.html, which is the reference the ticket
	   points at.
	   ---------------------------------------------------------------------- */

	/*
	 * The drawer surface. --surface-warm in the mockup, with the rule and the
	 * shadow that separate it from the page beneath.
	 */
	/*
	 * Five classes, and the count is the point. The drawer's white background
	 * and its border color are WIDGET settings -- background_color_dropdown_item
	 * and dropdown_border_color, both bound to globals -- so Elementor emits
	 * `.elementor-282 .elementor-element.elementor-element-112b710
	 * .elementor-nav-menu--dropdown` at 0,4,0. Measured 2026-08-20: at four
	 * classes this rule tied and lost, and the drawer stayed white. Neither
	 * control is responsive, so changing them on the widget would repaint the
	 * desktop submenu, which the mockup draws in white on purpose.
	 */
	.wyg-header .wyg-header__nav.wyg-header__nav.elementor-widget-nav-menu nav.elementor-nav-menu--dropdown {
		background-color: #F4F1EC;
		border-block-end: 1px solid #DCD5C8;
		box-shadow: 0 12px 26px rgba( 38, 54, 63, 0.12 );
	}

	/*
	 * 52px floor per the mockup, and the flex is what makes a min-height mean
	 * anything on an anchor Elementor ships as display:block.
	 */
	.wyg-header .wyg-header__nav .elementor-nav-menu--dropdown a.elementor-item,
	.wyg-header .wyg-header__nav .elementor-nav-menu--dropdown a.elementor-sub-item {
		display: flex;
		align-items: center;
		min-block-size: 3.25rem;
	}

	/*
	 * Second level sits on its own darker band, --surface-warm-2, and indents by
	 * half a rem past the row padding. On desktop the same items carry an
	 * indent from section 5 instead; this replaces it at drawer widths, where
	 * the band is doing the work the indent does above.
	 */
	/*
	 * Elementor puts `elementor-nav-menu--dropdown` on the submenu UL as well as
	 * on the drawer NAV, so the rule above matched both and repainted this band
	 * with the drawer's own color -- my own rule beating my other rule, found
	 * 2026-08-20. The two are separated by element rather than by piling on more
	 * classes: the drawer is a nav, the band is a ul.
	 */
	.wyg-header .wyg-header__nav.wyg-header__nav.elementor-widget-nav-menu ul.sub-menu.elementor-nav-menu--dropdown {
		background-color: #EDE7DC;
	}

	.wyg-header .wyg-header__nav.elementor-widget-nav-menu .elementor-nav-menu--dropdown .wyg-nav-anchor > a.elementor-sub-item {
		padding-inline-start: 1.6rem;
	}

	/*
	 * The caret belongs at the trailing edge of its row with a divider before
	 * it, not tucked against the label. margin-inline-start:auto is what pushes
	 * it, and it mirrors under RTL without a second rule.
	 */
	.wyg-header .wyg-header__nav .elementor-nav-menu--dropdown .menu-item-has-children > a.elementor-item .sub-arrow {
		display: flex;
		align-items: center;
		align-self: stretch;
		margin-inline-start: auto;
		padding-inline: 0.9rem;
		border-inline-start: 1px solid #DCD5C8;
	}
}

@media ( max-width: 767px ) {

	.wyg-header .wyg-header__logo.wyg-header__logo img {
		block-size: 4.5rem;
	}
}

@media ( max-width: 374px ) {

	.wyg-header .wyg-header__logo.wyg-header__logo img {
		block-size: 4rem;
	}
}