/* =====================================================================
 * Nabed — global Header, redesigned shell
 *
 * Split out of `seamlessmd-theme.css` the same way the footer is, and
 * enqueued with `seamlessmd-theme` as a dependency so it loads AFTER the
 * legacy bundle. That ordering is what lets these rules win at equal
 * specificity without editing the 107 KB legacy file or deleting the
 * mega-nav CSS that is still sitting in it.
 *
 * Every selector is scoped under `.seamlessmd-site-header`. Nothing here
 * may match page content, the footer, or any block.
 *
 * Reference: `.ai-local/design-references/New Website - Platform.png`
 * (desktop only — no tablet, mobile or RTL reference was supplied).
 * Values below were sampled from that file; see the report for the
 * measurements and for the two reference details deliberately NOT
 * implemented (nav chevrons, `Login` link) because the approved
 * decisions override the mockup.
 * ===================================================================== */

.seamlessmd-site-header {
	/* Header-local tokens. The palette has no blue, and adding a global
	 * one needs approval, so the brand blue lives on this root only. */
	--seamlessmd-header-blue: #3b53f0;
	--seamlessmd-header-blue-hover: #2f44cc;
	/* Tints of the header blue above, for the secondary CTA's resting
	 * border and its hover fill. Mixed against white at 30% / 8% so the
	 * outlined button reads as the same family as the solid one. */
	--seamlessmd-header-blue-border: #c4cbfa;
	--seamlessmd-header-blue-soft: #eff1fe;
	--seamlessmd-header-ink: #393a60;
	--seamlessmd-header-ink-muted: #464663;
	/* Follows the shared page-margin token so the header's edges align
	 * with content sections and the footer at every width. */
	--seamlessmd-header-max: var(--seamlessmd-container-max, 1440px);

	/* Inline SVG masks — no external request, no markup, and nothing the
	 * accessibility tree can pick up. `stroke='black'` is only the mask's
	 * alpha source; the painted colour is `currentColor`. */
	--seamlessmd-header-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	--seamlessmd-header-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");

	/* Flat white bar. The legacy rule painted a translucent panel with a
	 * backdrop blur and a hairline border; the reference has neither —
	 * the white simply meets the page tint. */
	background: #fff;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-bottom: 0;
}

/* Scrolled state is kept (approved) but softened so it reads as a lift
 * rather than the hairline the border used to provide. */
.seamlessmd-site-header.is-scrolled {
	box-shadow: 0 1px 0 rgba(30, 42, 92, 0.06), 0 6px 18px rgba(30, 42, 92, 0.06);
}

/* ---------------------------------------------------------------------
 * Row: logo | centred nav | actions
 * The reference runs the header wider than the 1280px page container —
 * logo and CTA sit ~65px from the viewport edges at 1536px. Widen the
 * header container only; the global container token is untouched.
 * ------------------------------------------------------------------ */
.seamlessmd-site-header .navbar--container {
	max-width: var(--seamlessmd-header-max);
	gap: var(--space-6);
}

/* ---------------------------------------------------------------------
 * Logo — same asset, same markup. Cap the rendered height so the
 * wordmark sits on the row's optical centre and cannot stretch.
 * ------------------------------------------------------------------ */
.seamlessmd-site-header .navbar--logo img,
.seamlessmd-site-header .navbar--logo .custom-logo {
	display: block;
	block-size: auto;
	max-block-size: 44px;
	inline-size: auto;
	max-inline-size: 100%;
	object-fit: contain;
}

/* ---------------------------------------------------------------------
 * Navigation — plain links, evenly spaced, no dropdown residue.
 * Reference spacing: 49px between adjacent labels at 1536px. The link
 * keeps its 14px inline padding (28px between text boxes), so a 20px
 * gap lands on the reference rhythm while keeping a comfortable
 * hit area.
 * ------------------------------------------------------------------ */
.seamlessmd-site-header .navbar-menu__list {
	gap: 20px;
}

.seamlessmd-site-header .dropdown-toggle-7 {
	gap: 0; /* nothing left to sit beside the label */
	padding-block: 10px;
	padding-inline: 14px;
	font-size: 15px;
	font-weight: 500;
	color: var(--seamlessmd-header-ink);
	border-radius: var(--seamlessmd-radius-md);
}

/* Subtle hover/focus: colour shift only. The legacy rule tinted the
 * whole pill teal, which reads as a button — the reference nav has no
 * background at rest or on hover. */
.seamlessmd-site-header .dropdown-toggle-7:hover,
.seamlessmd-site-header .dropdown-toggle-7:focus-visible {
	color: var(--seamlessmd-header-blue);
	background-color: transparent;
}

.seamlessmd-site-header .dropdown-toggle-7:focus-visible {
	outline: 2px solid var(--seamlessmd-header-blue);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * Child dropdown (the "About" item) — a small CSS-only flyout of plain
 * links: opens on hover and on keyboard focus (:focus-within), no JS.
 * Rendered by seamlessmd_primary_nav_items(); deliberately NOT the
 * mega-nav machinery.
 * ------------------------------------------------------------------ */
.seamlessmd-site-header .navbar-menu__item--has-children {
	position: relative;
}

/* Down caret. PHYSICAL borders on purpose: a down-pointing chevron is
 * direction-neutral and must not mirror under RTL. */
.seamlessmd-site-header .navbar-caret {
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-inline-start: 7px;
	margin-top: -3px;
	border-right: 1.8px solid currentColor;
	border-bottom: 1.8px solid currentColor;
	transform: rotate(45deg);
	transition: transform 150ms ease;
}

.seamlessmd-site-header .navbar-menu__item--has-children:hover .navbar-caret {
	transform: rotate(225deg);
	margin-top: 3px;
}

.seamlessmd-site-header .navbar-submenu {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	z-index: 60;
	min-inline-size: 210px;
	margin: 10px 0 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border: 1px solid #e4e8f2;
	border-radius: 12px;
	box-shadow: 0 14px 30px rgba(15, 30, 70, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
}

/* Invisible bridge over the 10px gap so the pointer can travel from the
 * toggle into the flyout without closing it. */
.seamlessmd-site-header .navbar-submenu::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: -12px;
	block-size: 12px;
}

.seamlessmd-site-header .navbar-menu__item--has-children:hover > .navbar-submenu,
.seamlessmd-site-header .navbar-menu__item--has-children:focus-within > .navbar-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.seamlessmd-site-header .navbar-submenu__link {
	display: block;
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 500;
	color: var(--seamlessmd-header-ink);
	text-decoration: none;
}

.seamlessmd-site-header .navbar-submenu__link:hover,
.seamlessmd-site-header .navbar-submenu__link:focus-visible {
	background: #eff4ff;
	color: var(--seamlessmd-header-blue);
	text-decoration: none;
}

.seamlessmd-site-header .navbar-submenu__link.is-current {
	color: var(--seamlessmd-header-blue);
}

/* ---------------------------------------------------------------------
 * Active page. Driven entirely by `aria-current="page"`, which the
 * renderer emits from the resolved request — attribute selector first so
 * the state cannot drift from the accessible one, `.is-current` only for
 * the pseudo-element hook.
 *
 * The reference underlines the label, not the padded hit area, so the bar
 * is drawn on the inner text span and inherits its width. It sits at the
 * bottom edge of the nav item. Anchoring it to the header's own bottom
 * edge (~16px lower, where the reference puts it) would mean either
 * hardcoding that offset or stretching the nav to full row height — the
 * first breaks the moment the header height changes, the second alters
 * the link box this stage must not touch.
 *
 * No background, no pill, no icon: colour plus the bar, per the design.
 * `inline-size` / `inset-inline` keep it mirroring in RTL for free.
 * ------------------------------------------------------------------ */
.seamlessmd-site-header .dropdown-toggle-7[aria-current="page"] {
	color: var(--seamlessmd-header-blue);
	font-weight: 600;
	position: relative;
}

.seamlessmd-site-header .dropdown-toggle-7[aria-current="page"] .dropdown-toggle-text {
	position: relative;
	display: inline-block;
}

.seamlessmd-site-header .dropdown-toggle-7[aria-current="page"] .dropdown-toggle-text::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	/* Clears the descender line without touching the link's padding. */
	bottom: -9px;
	block-size: 3px;
	border-radius: 2px;
	background-color: var(--seamlessmd-header-blue);
}

/* Hover must not fight the active state — the rest-colour rule above
 * already wins on specificity, this keeps the intent explicit. */
.seamlessmd-site-header .dropdown-toggle-7[aria-current="page"]:hover,
.seamlessmd-site-header .dropdown-toggle-7[aria-current="page"]:focus-visible {
	color: var(--seamlessmd-header-blue);
}

/* ---------------------------------------------------------------------
 * Actions cluster — CTA then language control, per the approved order.
 * ------------------------------------------------------------------ */
.seamlessmd-site-header .navbar--ctas {
	gap: 16px;
}

/* ---------------------------------------------------------------------
 * Book a Demo — solid blue, 8px radius, 42px tall in the reference.
 * ------------------------------------------------------------------ */
.seamlessmd-site-header .nav-button {
	gap: 8px;
	min-block-size: 42px;
	padding-block: 0;
	padding-inline: 20px;
	font-size: 15px;
	font-weight: 600;
	border-radius: 8px;
	background-color: var(--seamlessmd-header-blue);
	color: #fff;
	transition: background-color 160ms ease;
}

.seamlessmd-site-header .nav-button:hover,
.seamlessmd-site-header .nav-button:focus-visible {
	background-color: var(--seamlessmd-header-blue-hover);
	color: #fff;
}

.seamlessmd-site-header .nav-button:focus-visible {
	outline: 2px solid var(--seamlessmd-header-blue);
	outline-offset: 2px;
}

/* Trailing arrow from the reference. Drawn as a masked pseudo-element so
 * it inherits the button colour and is never announced by a screen
 * reader — the accessible name stays the CTA label alone. */
.seamlessmd-site-header .nav-button::after {
	content: "";
	flex: 0 0 auto;
	inline-size: 16px;
	block-size: 16px;
	background-color: currentColor;
	-webkit-mask: var(--seamlessmd-header-arrow) center / contain no-repeat;
	mask: var(--seamlessmd-header-arrow) center / contain no-repeat;
}

/* ---------------------------------------------------------------------
 * Secondary CTA — the optional second button. Outlined rather than
 * solid, so the pair reads as one hierarchy: the primary keeps every
 * value it had, and the secondary borrows only its geometry.
 *
 * Deliberately NOT `.nav-button.green-btn`. That is the pre-redesign
 * secondary ("Patient Support", `#2ecb70`) still sitting in
 * `seamlessmd-theme.css`; its green was retired site-wide on 2026-09-03
 * and it never received the redesign's height, radius or type scale.
 * It is left untouched and simply unused.
 *
 * Geometry is inherited from `.nav-button` above — same 42px block size,
 * same 8px radius, same padding and type — so the two buttons align on
 * one baseline. `border-box` (bootstrap's global reset) keeps the 1px
 * border inside that 42px, so heights match exactly.
 * ------------------------------------------------------------------ */
.seamlessmd-site-header .nav-button.nav-button--secondary {
	background-color: transparent;
	color: var(--seamlessmd-header-blue);
	border: 1px solid var(--seamlessmd-header-blue-border);
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.seamlessmd-site-header .nav-button.nav-button--secondary:hover,
.seamlessmd-site-header .nav-button.nav-button--secondary:focus-visible {
	background-color: var(--seamlessmd-header-blue-soft);
	border-color: var(--seamlessmd-header-blue);
	color: var(--seamlessmd-header-blue-hover);
}

/* Same focus ring as the primary — the outline is the affordance, and it
 * must not weaken just because the button is secondary. Inherited from
 * `.nav-button:focus-visible`; restated here only because the rule above
 * changes `border-color` on the same state. */
.seamlessmd-site-header .nav-button.nav-button--secondary:focus-visible {
	outline: 2px solid var(--seamlessmd-header-blue);
	outline-offset: 2px;
}

/* No trailing arrow. The arrow marks the primary conversion path; giving
 * it to both buttons would flatten the hierarchy the colour just built.
 * Nothing to mirror in RTL as a result. */
.seamlessmd-site-header .nav-button.nav-button--secondary::after {
	content: none;
}

/* ---------------------------------------------------------------------
 * Language control — globe + the opposite-language label. Plain link,
 * no dropdown, no chevron. The globe is a mask so it takes the link's
 * colour on hover and adds nothing to the accessible name (which comes
 * from the aria-label the renderer already sets).
 * ------------------------------------------------------------------ */
.seamlessmd-site-header .nav-lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-block: 8px;
	padding-inline: 10px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--seamlessmd-header-ink-muted);
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--seamlessmd-radius-md);
	transition: color 160ms ease;
}

.seamlessmd-site-header .nav-lang-switch::before {
	content: "";
	flex: 0 0 auto;
	inline-size: 18px;
	block-size: 18px;
	background-color: currentColor;
	-webkit-mask: var(--seamlessmd-header-globe) center / contain no-repeat;
	mask: var(--seamlessmd-header-globe) center / contain no-repeat;
}

.seamlessmd-site-header .nav-lang-switch:hover,
.seamlessmd-site-header .nav-lang-switch:focus-visible {
	color: var(--seamlessmd-header-blue);
}

.seamlessmd-site-header .nav-lang-switch:focus-visible {
	outline: 2px solid var(--seamlessmd-header-blue);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * RTL. Spacing is all logical, so only the directional arrow needs an
 * explicit mirror — the globe is symmetric and must not be flipped.
 * ------------------------------------------------------------------ */
[dir="rtl"] .seamlessmd-site-header .nav-button::after {
	transform: scaleX(-1);
}

/* ---------------------------------------------------------------------
 * ≤1102px — the existing drawer, untouched in structure. Only the minimum
 * needed so the desktop rules above degrade cleanly.
 *
 * The threshold moved 900 → 1032 → 1102 (2026-09-10, when the optional
 * secondary CTA was restored) to close the header's horizontal overflow;
 * the reasoning and the measurements are recorded once, at the matching
 * query in `seamlessmd-theme.css`. Keep the two in sync, along with the
 * `matchMedia` query in `assets/js/seamlessmd-blocks.js`.
 * ------------------------------------------------------------------ */
@media (max-width: 1102px) {
	/* Legacy rule keeps `.navbar--container` at min-height 80px; just make
	 * sure the wider max-width cannot introduce a horizontal scrollbar. */
	.seamlessmd-site-header .navbar--container {
		max-width: 100%;
		gap: var(--space-4);
	}

	.seamlessmd-site-header .navbar--logo img,
	.seamlessmd-site-header .navbar--logo .custom-logo {
		max-block-size: 38px;
	}

	/* Drawer links: full-width rows, comfortable target, no pill tint. */
	.seamlessmd-site-header.is-mobile-open .dropdown-toggle-7 {
		display: flex;
		inline-size: 100%;
		padding-block: 14px;
		font-size: 16px;
	}

	/* Active row in the drawer. Same blue, but a 3px bar on the leading
	 * edge instead of under the label — a full-width underline in a stacked
	 * list reads as a divider between rows, not as selection. Logical
	 * `border-inline-start` puts it on the right in Arabic. Nothing else
	 * about the drawer changes. */
	.seamlessmd-site-header.is-mobile-open .dropdown-toggle-7[aria-current="page"] {
		border-inline-start: 3px solid var(--seamlessmd-header-blue);
		padding-inline-start: 11px;
	}

	.seamlessmd-site-header.is-mobile-open .dropdown-toggle-7[aria-current="page"] .dropdown-toggle-text::after {
		display: none;
	}

	/* The drawer copy of the language control sits under the CTA, which
	 * the legacy rule stretches to 100%. Match it so the pair reads as
	 * one stack rather than a button with a stray link beside it. */
	.seamlessmd-site-header.is-mobile-open .mobile-ctas .nav-lang-switch {
		justify-content: center;
		inline-size: 100%;
		padding-block: 12px;
	}

	/* Submenus in the drawer: hover does not exist on touch, so the
	 * hidden absolute flyout would strand the children. Render them
	 * always-expanded as indented rows under their parent, and drop the
	 * caret's open/closed pantomime — nothing toggles. */
	.seamlessmd-site-header.is-mobile-open .navbar-submenu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-inline-size: 0;
		margin: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
		padding: 0 0 4px;
	}

	.seamlessmd-site-header.is-mobile-open .navbar-submenu::before {
		display: none;
	}

	.seamlessmd-site-header.is-mobile-open .navbar-submenu__link {
		padding-block: 10px;
		padding-inline-start: 28px;
		font-size: 15px;
	}

	.seamlessmd-site-header.is-mobile-open .navbar-menu__item--has-children:hover .navbar-caret {
		transform: rotate(45deg);
		margin-top: -3px;
	}
}