/*
 * Header navigation styling — owned by this theme, not by JetMenu.
 *
 * WHY THIS FILE EXISTS
 * Updating JetMenu 2.4.5 -> 3.0.3 renamed its entire CSS namespace
 * (.jet-menu* -> .jet-mega-menu*) and stopped reading the widget's stored
 * settings, so the header lost all styling and fell back to browser defaults.
 * Declarations below were translated verbatim from the pre-upgrade generated
 * CSS (uploads/elementor/css/post-52.css on production) so rendering is
 * unchanged.
 *
 * THE RULE FOR EDITING THIS FILE
 * Anchor on the classes we own (.sempre-topbar-nav / .sempre-mainnav, set in
 * Elementor under Advanced > CSS Classes) and express everything else through
 * HTML structure. Do NOT reintroduce plugin class names into the durable
 * section — that is what broke last time. Anything that genuinely cannot avoid
 * them goes in the quarantined block below.
 *
 * MARKUP THIS RELIES ON (JetMenu 3.0.3, verified in the DOM):
 *   ul
 *     li                          <- menu item
 *       :first-child              <- wrapper holding the link (+ arrow)
 *         a                       <- the link itself
 *       :first-child ~ *          <- the dropdown / mega panel
 * Expressed structurally so a class rename cannot reach it. The only real
 * assumption is "the link sits in the item's first child, the panel follows".
 *
 * Design: docs/plans/2026-08-01-header-nav-css-ownership-design.md
 */

/* ==========================================================================
   1. VENDOR-COUPLED — JetMenu 3.x class names. RE-CHECK ON MAJOR UPGRADE.
      Keep this block as small as possible.
   ========================================================================== */

/* Current-page item. WordPress core's .current-menu-item is not emitted by
   either JetMenu version here, so we match their class defensively. */
.sempre-topbar-nav ul > li[class*="current"] > :first-child > a,
.sempre-mainnav   ul > li[class*="current"] > :first-child > a {
	color: #9B2321;
}

.sempre-topbar-nav ul > li[class*="current"] > :first-child > a {
	border-style: solid;
	border-width: 0 1px 0 0;
	border-color: #FFFFFF;
}

/* ==========================================================================
   2. DURABLE — our own classes plus HTML structure only.
   ========================================================================== */

/* Neutralise the vendor's own spacing on the item wrapper so that OUR padding
   and margins are the only things affecting layout. JetMenu 3 ships
   `padding: 5px 10px` here; JetMenu 2 had no such wrapper at all, which is why
   items rendered 10px taller than production until this was zeroed.
   The class is intentionally repeated: the plugin's rule uses three classes
   (0,3,0) and would otherwise outrank a single-class selector. Doubling ours
   wins on specificity without naming anything the vendor controls.
   JetMenu 3 also exposes --jmm-top-items-ver-padding / -hor-padding for this,
   but those names are vendor-owned and would silently fall back to 5px/10px if
   renamed, so the structural override is preferred.

   `:not(a)` makes this inert on JetMenu 2, where the item's first child is the
   link itself rather than a wrapper. Without the guard this rule strips the
   padding from every link on a v2 site: measured against production, 98 main-nav
   links plus the top bar drop to `padding: 0` and the gaps between labels
   collapse from 60px to 40px. That matters because it lets the stylesheet be
   deployed and switched on BEFORE the plugin is upgraded, so the header never
   spends a moment unstyled. On v3 the first child is a div, so it still
   matches. Same guard on the height rule in 2a, for the same reason. */
.sempre-mainnav.sempre-mainnav     ul > li > :not(a):first-child,
.sempre-topbar-nav.sempre-topbar-nav ul > li > :not(a):first-child {
	padding: 0;
}

/* --------------------------------------------------------------------------
   2a. Main navigation — the wide nav with the mega panels
       (was Elementor element d666522)
   -------------------------------------------------------------------------- */

.sempre-mainnav ul {
	justify-content: flex-start !important;
	min-width: 0;
}

.sempre-mainnav ul > li {
	flex-grow: 0;
}

/* The item wrapper must fill the row. JetMenu 3's wrapper is only as tall as
   its own content (42px inside a 64px row), which left the labels sitting hard
   against the top of the bar and lifted the hover arrow in 2c by the same 11px.
   JetMenu 2 had no wrapper, so the link was the row and this was free.
   Doubled class for the specificity reason given above, and `:not(a)` for the
   reason given in section 2: on v2 the first child is the link itself, and this
   must not reach it. */
.sempre-mainnav.sempre-mainnav ul > li > :not(a):first-child {
	height: 100%;
	align-items: stretch;
}

.sempre-mainnav ul > li > :first-child > a {
	font-family: "Open Sans", Open-Sans;
	font-size: 16px;
	line-height: 22px;
	color: #FFFFFF;
	border-radius: 0;
	margin: 0 10px;
	/* JetMenu 2's own public.css supplied this; 3.x does not, so we own it
	   explicitly rather than inherit it from the plugin's defaults.
	   The left 30px is 10px of real padding plus the 20px production reserves
	   before every label: its dropdown arrow sits INSIDE the link, is coloured
	   transparent, and carries `order: -1`, so it occupies 10px of width and a
	   10px margin to the left of the text. JetMenu 3 emits that indicator
	   outside the link and we drop it from layout above, so the space has to be
	   reserved here instead. Without it every item creeps 20px left of
	   production, cumulatively: 120px by the sixth. It must be padding-LEFT,
	   not right; padding-right produces the same 60px gaps but leaves every
	   label 20px left of where production puts it. */
	padding: 10px 10px 10px 30px;
	position: relative; /* anchors the hover arrow in 2c */
}

.sempre-mainnav ul > li:hover > :first-child > a {
	color: #9B2321;
}

/* Dropdown indicator is deliberately absent on this menu. It lives beside the
   link inside the item's first child.
   Production's JetMenu 2 gives it no width, but v3 emits an 18px element, which
   spread the items 43px apart against production's 20px and left a faint mark
   beside every label. Colouring it transparent, which is what this rule did
   when it was translated from production, hides the mark but keeps the width,
   so it is taken out of layout instead. That is safe here: the item wrapper
   itself carries role="button" and is what opens the panel, and this widget
   renders at zero size below the tablet breakpoint where a separate mobile
   menu takes over, so nothing depends on it as a touch target. */
.sempre-mainnav ul > li > :first-child > a ~ * {
	display: none;
}

/* The mega panel: anything in the item after the link wrapper.
   The transition restores production's fade. JetMenu 3 rewrote the mega menu as
   its own widget and dropped the animation control the older Custom Menu widget
   has (`animation_type`, default fade), so there is no longer a setting that
   turns this back on. Nothing was lost in the upgrade either: neither widget has
   an animation value stored. The plugin still toggles opacity 0 -> 1 and
   visibility on hover, it just never declares how long that should take, so the
   browser uses the initial 0s and the panel snaps open. Timing is production's
   verbatim. Elementor's own `@media (prefers-reduced-motion: reduce)` rule zeroes
   this for visitors who ask for reduced motion, exactly as production does. */
.sempre-mainnav ul > li > :first-child ~ * {
	margin-top: 10px;
	transition: opacity 0.3s cubic-bezier( 0.48, 0.01, 0.5, 0.99 ), visibility 0.1s linear;
}

/* JetMenu 3 wraps the panel in a container of its own that paints a white
   background and pads it by 10px 20px. JetMenu 2 had no such wrapper, so the
   panel arrived with a white frame around it and the dark Elementor section
   inset by 20px on each side. Our template owns the panel's background, so the
   vendor's chrome has to be visually inert.
   Two levels are covered because the wrapper that paints is the panel's child,
   not the panel itself. The plugin's rule is
   `.jet-mega-menu.jet-mega-menu--layout-horizontal .jet-mega-menu-mega-container__inner`
   at (0,3,0); doubling our class gives (0,3,2) and wins without naming it.
   It reads those values from --jmm-sub-menu-bg-color and
   --jmm-mega-container-*-padding, but overriding those would silently fall back
   to white the day they are renamed, which is the failure this file exists to
   prevent. */
.sempre-mainnav.sempre-mainnav ul > li > :first-child ~ *,
.sempre-mainnav.sempre-mainnav ul > li > :first-child ~ * > * {
	background-color: transparent;
	padding: 0;
}

/* Mega panel columns align to the top (was custom CSS on section e0d5e0d). */
.sempre-mainnav ul > li > :first-child ~ * .elementor-element > .elementor-column-wrap {
	align-content: flex-start;
	align-items: flex-start;
}

/* --------------------------------------------------------------------------
   2b. Top utility bar — 6 links, right aligned, divider between each
       (was Elementor element f3fec00)
   -------------------------------------------------------------------------- */

.sempre-topbar-nav ul {
	justify-content: flex-end !important;
}

.sempre-topbar-nav ul > li {
	flex-grow: 0;
}

.sempre-topbar-nav ul > li > :first-child > a {
	font-family: "Open Sans", Open-Sans;
	font-size: 16px;
	line-height: 0;
	color: #FFFFFF;
	border-style: solid;
	border-width: 0 1px 0 0;
	border-radius: 0;
	/* See note on the main nav: JetMenu 2 default, now owned explicitly. */
	padding: 10px;
}

/* Divider colour, and no trailing divider on the last item. Replaces v2's
   .jet-regular-item / .jet-has-roll-up / .jet-no-roll-up :nth-last-child()
   rules, whose classes no longer exist in v3. */
.sempre-topbar-nav ul > li:first-child > :first-child > a {
	border-color: #FFFFFF;
}

.sempre-topbar-nav ul > li:last-child > :first-child > a {
	border-width: 0;
}

/* Width and style are deliberately NOT restated here. Both this selector and the
   `:last-child` rule above score (0,3,3) - one class plus two pseudo-classes and
   three element names each - so with equal specificity the later one wins, and
   restating `border-width: 0 1px 0 0` here put the trailing divider back on the
   last item whenever it was hovered. Leaving width alone lets `:last-child`
   stand.
   `border-color` must stay: this rule changes `color`, and border-color defaults
   to `currentColor`, so without it every remaining divider would turn red on
   hover. */
.sempre-topbar-nav ul > li:hover > :first-child > a {
	color: #9B2321;
	border-color: #FFFFFF;
}

/* Dropdown panel links on this menu sit on black. */
.sempre-topbar-nav ul > li > :first-child ~ * a {
	background-color: #000000;
	color: var( --e-global-color-4131ad76 );
}

.sempre-topbar-nav ul > li > :first-child ~ * a:hover {
	background-color: #000000;
	color: var( --e-global-color-accent );
}

.sempre-topbar-nav ul > li > :first-child > a ~ * {
	color: var( --e-global-color-accent );
}

/* --------------------------------------------------------------------------
   2c. Hover arrow beneath the active main-nav item
       (was custom CSS on section 40a50b9)
   -------------------------------------------------------------------------- */

.sempre-mainnav ul > li > :first-child > a::after {
	content: '';
	opacity: 0;
	position: absolute;
	bottom: -30px;
	left: calc( 50% - 40px );
	z-index: 9999999999 !important;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 20px solid #000;
	transition: opacity 1s;
}

.sempre-mainnav ul > li:hover > :first-child > a::after {
	opacity: 1;
}

/* Links inside the mega panel must not inherit the top-level treatment. */
.sempre-mainnav ul > li > :first-child ~ * a::after {
	content: none;
}