/**
 * wyg-css-masthead
 *
 * WHAT: The page masthead's scrim, eyebrow and title residue -- the parts
 * Elementor has no control for. Every page on this site opens with the same
 * masthead: a photograph, a two-layer scrim over it, an optional eyebrow, and
 * the page title. Everything Elementor does expose -- the background image and
 * its position, the minimum height, the boxed width, the padding per
 * breakpoint, the flex column, the centering, the title's typography and color
 * -- is set on the containers and widgets, not here.
 *
 * WHY: this file exists so the treatment is defined once rather than per page.
 * On 2026-08-18 the scrim was retuned in the mockups and silently did nothing
 * on two of six pages, because those two had no eyebrow markup or CSS at all.
 * Twelve pages repeating the same gradient by hand is that failure waiting to
 * happen again. The container structure is rebuilt per page -- it is five
 * settings and visible in the editor -- but the treatment is central.
 *
 * REJECTED: expressing the scrim as an Elementor background overlay. The
 * overlay control takes one gradient with two stops. This scrim is two stacked
 * gradients, a radial of three stops over a linear of three stops, which the
 * control cannot represent at all. Measured against the approved mockup
 * 2026-08-18, not assumed.
 *
 * REJECTED: a Theme Builder Single template for pages carrying the masthead
 * above a Post Content widget. It would centralize the structure as well as the
 * treatment, but it applies to every page including Privacy Policy, Terms and
 * the Accessibility Statement, none of which have a hero photograph or were
 * ever designed with one. That is a decision for whoever designs those pages,
 * not a side effect of building Contact first.
 *
 * GOTCHAS: the eyebrow collapse uses :has(), which is already a dependency of
 * wyg-css-footer. Where it is unsupported the slot renders as empty space
 * rather than breaking. Elementor puts a widget's own class on the widget
 * wrapper, one level above the heading it contains, so both the eyebrow and the
 * title are reached through a descendant selector rather than directly -- see
 * the same trap in wyg-css-footer section 3.
 */

/* --------------------------------------------------------------------------
   1. The scrim
   Drawn as a pseudo-element rather than a real element so the masthead stays
   two containers deep and the page keeps its budget of three.
   -------------------------------------------------------------------------- */

.wyg-masthead {
	position: relative;
	overflow: hidden;
	border-block-end: 1px solid var( --e-global-color-3e660e4c );
}

.wyg-masthead.wyg-masthead::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient( ellipse 72% 62% at 50% 46%, rgba( 22, 33, 40, .60 ) 0%, rgba( 22, 33, 40, .34 ) 58%, rgba( 22, 33, 40, 0 ) 100% ),
		linear-gradient( 180deg, rgba( 38, 54, 63, .18 ) 0%, rgba( 38, 54, 63, .30 ) 55%, rgba( 38, 54, 63, .50 ) 100% );
}

/* 🚨 The doubled class is load-bearing, and this rule painted nothing without
   it. Elementor sets `.e-con::before { content: var( --background-overlay ) }` at
   0,1,0 -- the same specificity as a single-class rule -- and loads after the
   snippet stylesheets. On a container with no Elementor overlay configured the
   variable is unset, so `content` resolved to `none`, the pseudo-element was
   never generated, and the gradient below was applied to a box that did not
   exist. Measured 2026-08-19: background-image present on ::before, content
   `none`. Nothing looked broken in the stylesheet; the scrim was simply absent
   from the page.

   The radial darkens only behind the text, so the photograph reads brighter at
   its edges. That is what the client asked for; do not flatten it to one
   linear gradient. */

.wyg-masthead__inner {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   2. The eyebrow slot
   Present on every page, whether or not that page uses it. A page without an
   eyebrow is a page whose eyebrow is empty, not a page built differently.
   -------------------------------------------------------------------------- */

/* 🚨 THE CLASS IS DOUBLED ON PURPOSE -- DO NOT SIMPLIFY IT.
   `post-<id>.css` ties every heading widget to the Primary global at 0,2,0 and
   loads after this file, so the single-class form ties and loses on order: the
   eyebrow rendered Nunito Sans 19px in Dark Blue instead of mono 13px in the
   warm cream below. Found on Research & Publications 2026-08-19, the FIRST page
   on this site to put text in the eyebrow slot -- the homepage has no masthead
   and Contact's eyebrow is empty, so this had never been visible.
   [[elementor-per-post-css-outguns-components]] */
.wyg-masthead__eyebrow.wyg-masthead__eyebrow .elementor-heading-title {
	margin: 0;
	font-family: var( --wyg-mono );
	/* HO-40: scaled up in Hebrew/Arabic -- see wyg-css-global section 5g. */
	font-size: calc( 0.8125rem * var( --wyg-label-size-scale, 1 ) );
	/* HO-39: see wyg-css-global section 5e for the token. */
	font-weight: var( --wyg-label-weight, 600 );
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #F0DCC0;
	text-shadow: 0 1px 12px rgba( 18, 26, 31, .75 ), 0 0 2px rgba( 18, 26, 31, .5 );
}

/* Tan is too dark to sit legibly on a photograph even under the scrim, so the
   eyebrow uses a lightened relative of it plus a shadow. This is the one place
   on the site where a literal hex outside the palette is correct. */

.wyg-masthead__eyebrow:has( .elementor-heading-title:empty ) {
	display: none;
}

/* --------------------------------------------------------------------------
   3. The title
   Typography and color come from the WYG / Display global and the Off White
   global, bound on the widget. Only the measure and the shadow are here.
   -------------------------------------------------------------------------- */

.wyg-masthead__title.wyg-masthead__title .elementor-heading-title {
	max-inline-size: 20ch;
	margin-inline: auto;
	text-shadow: 0 2px 18px rgba( 20, 28, 33, .5 );
}