/* Site Builder — Law Firm Header widget styles */

/* GTranslate's own floating widget (enabled sitewide in GTranslate settings
   just so its script/window.doGTranslate loads) is redundant here since the
   top bar already provides its own language switcher UI wired to it.
   Whatever "widget look" style is chosen (float, flags, dropdown, popup…),
   GTranslate always renders it inside a generic .gtranslate_wrapper
   container, so hiding that class hides it regardless of style — the
   floating bubble's own more specific #gt_float_wrapper markup lives inside
   this same container. */
.gtranslate_wrapper {
	display: none !important;
}

.sb-lf-header {
	position: relative;
	z-index: 100;
	width: 100%;
	font-family: var(--sb-font-sans);
	/* One line-height for the whole header. Each cluster used to inherit
	   whatever the theme set, which is why the logo, nav and phone number
	   never quite shared a baseline — their boxes were different heights
	   before any alignment property got a chance to act on them. */
	line-height: 1.2;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Legibility over the hero image. A shadow this soft is invisible against
   the scrolled (darkened) header but keeps white text off a bright patch of
   photograph from going muddy — cheaper and far less intrusive than the
   usual fix of dropping an opaque bar behind the whole thing. */
.sb-lf-header-inner,
.sb-lf-topbar {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
}

.sb-lf-header.is-scrolled .sb-lf-header-inner,
.sb-lf-header.is-scrolled .sb-lf-topbar {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.sb-lf-header * {
	box-sizing: border-box;
}

.sb-lf-header.sb-lf-header-sticky {
	position: sticky;
	top: 0;
	/* Shadow only appears once scrolled, so it needs its own transition here —
	   otherwise it would pop in instantly the moment .is-scrolled is added,
	   while the background is still easing in. */
	transition: box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Instant CSS approximation for full-bleed; law-firm-header.js measures the
   real viewport offset on load/resize and overrides these with exact pixel
   margins via inline style, since the page theme's container/overflow rules
   (and position:sticky) can throw the pure-CSS 100vw trick off by a few
   pixels or clip it outright. */
.sb-lf-header.sb-lf-stretch {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.sb-lf-header-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: #0a0a0c;
	background-size: cover;
	background-position: center;
	opacity: 1;
	transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.sb-lf-header.is-scrolled {
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.sb-lf-header.sb-lf-header-sticky .sb-lf-header-bg,
.sb-lf-header.sb-lf-header-transparent .sb-lf-header-bg {
	transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.6s cubic-bezier(0.22, 1, 0.36, 1), backdrop-filter 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Scrolled state stays glass, not a flat solid bar — a soft blur behind the
   (still slightly translucent, via header_scrolled_bg_opacity below) dark
   panel keeps it reading as the same "liquid glass" language used by the
   nav's other pill/button elements, instead of an abrupt opaque block. */
.sb-lf-header.sb-lf-header-transparent.is-scrolled .sb-lf-header-bg {
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
}

/* Top bar (language switcher, social icons, contact info) */
.sb-lf-topbar {
	position: relative;
	/* Higher than .sb-lf-header-inner (z-index: 2) so the language dropdown —
	   an absolutely-positioned descendant confined to this stacking context —
	   is not painted underneath the header row's phone number/logo/nav. */
	z-index: 5;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.04);
	color: #c7cad1;
	font-size: 13px;
	letter-spacing: var(--sb-tracking-wide);
}

/* Flex with `flex: 1` on the two outer groups, which reproduces exactly what
   the old `1fr auto 1fr` grid was for — the outer groups share the leftover
   space equally, so the contact block lands on the row's true visual centre
   rather than "whatever's left between two differently-sized neighbours".
   What it adds is the ability to wrap.
   
   That matters because the row now carries a fifth item (the Farsi enquiry
   number). Grid tracks do not wrap, and these pills are all `nowrap`, so
   past a certain width the groups simply overlapped each other — the
   language buttons printed straight over the chambers phone pill. Wrapping
   to a tidy second row is the graceful version of running out of space. */
.sb-lf-topbar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: 24px;
	row-gap: 10px;
	padding: 9px 32px;
}

/* `flex: 1 1 0` — a zero basis, not `auto`.
   With `auto` each side starts at its own content width and only *shares the
   leftover* equally, so the wider side (the language buttons, ~515px against
   the social icons' ~128px) ends up wider overall and shoves the middle
   group off-centre — it was sitting 185px left of the page centre while the
   navigation directly below was centred exactly. A zero basis makes both
   outer groups the same width regardless of what is in them, which is what
   puts the contact details on the true centre line, aligned with the nav. */
.sb-lf-topbar-social {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	flex: 1 1 auto;
	min-width: 0;
}

/* The box is exactly the glyph, and the hover disc is painted *outside* it
   by the ::before overlay below. An earlier version used a 32px padded box
   with the glyph centred inside, which pushed the first icon ~5px in from
   the 32px page gutter — so it no longer lined up with the left edge of the
   logo sitting directly beneath it. Sizing the box to the glyph keeps that
   edge true whatever icon size the Top Bar controls are set to. */
.sb-lf-topbar-social-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	color: inherit;
	font-size: 13px;
	text-decoration: none;
	transition: color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.sb-lf-topbar-social-link::before {
	content: "";
	position: absolute;
	inset: -9px;
	border-radius: 50%;
	background: transparent;
	transition: background-color 0.3s ease;
}

.sb-lf-topbar-social-link:hover,
.sb-lf-topbar-social-link:focus-visible {
	color: var(--sb-gold-bright);
	transform: translateY(-2px);
}

.sb-lf-topbar-social-link:hover::before,
.sb-lf-topbar-social-link:focus-visible::before {
	background: rgba(255, 255, 255, 0.1);
}

/* These are inline SVG paths, so they are resolution-independent already —
   what made them look soft was being painted at a fractional pixel box.
   Pinning the glyph to a whole number of pixels puts its edges back on the
   pixel grid at the sizes the top bar actually uses. */
.sb-lf-topbar-social-link svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
	shape-rendering: geometricPrecision;
}

.sb-lf-topbar-contact {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 1 auto;
	gap: 14px;
}

/* "Liquid glass" pill: a blurred, translucent capsule with a soft inner
   highlight along the top edge to read as curved glass rather than a flat
   tinted box — same border/shape language as .sb-lf-topbar-lang-btn. */
.sb-lf-topbar-contact-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #f3f4f6;
	font-weight: var(--sb-weight-semibold);
	font-size: 12.5px;
	letter-spacing: var(--sb-tracking-wide);
	text-decoration: none;
	white-space: nowrap;
	padding: 7px 16px;
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
	border: 1px solid rgba(255, 255, 255, 0.22);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.sb-lf-topbar-contact-item i {
	display: inline-flex;
	color: #d9b654;
	font-size: 12px;
}

.sb-lf-topbar-contact-item:hover {
	color: #ffffff;
	border-color: rgba(182, 145, 44, 0.6);
	background: linear-gradient(180deg, rgba(182, 145, 44, 0.4), rgba(182, 145, 44, 0.16));
	transform: translateY(-1px);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.sb-lf-topbar-contact-item:hover i {
	color: #ffffff;
}

/* --- Language-tagged enquiry numbers -------------------------------------
   Both numbers sit together in the contact cluster. What separates them is
   not position but identity: each carries the flag of the language it is
   answered in, a small language label, and its own accent colour that the
   whole pill takes on hover. Two bare numbers side by side would read as two
   switchboards, which is the thing to avoid.

   --sb-tp-accent is set per language below and is the only thing that
   differs between the two rules. */
.sb-lf-topbar-phone {
	--sb-tp-accent: var(--sb-gold-bright, #d9b654);
	position: relative;
	padding-left: 9px;
}

.sb-lf-topbar-phone-en {
	--sb-tp-accent: #d9b654;
}

/* A cooler, paler shade than the English gold — different enough to tell the
   two apart at a glance, close enough not to look like a second brand. */
.sb-lf-topbar-phone-fa {
	--sb-tp-accent: #8fc3d6;
}

/* Flag chip in the mobile panel, matching the top bar's. */
.sb-lf-header-mobile-phone-flag {
	display: inline-flex;
	width: 22px;
	height: 16px;
	border-radius: 2px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.sb-lf-header-mobile-phone-flag svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sb-lf-header-mobile-phone-tagged .sb-lf-header-mobile-phone-icon {
	width: auto;
}

/* Mobile panel counterpart of .sb-lf-topbar-phone-lang — the top bar's
   contact cluster is hidden at that width, so the label does the work the
   flags do on desktop. */
/* Sits straight after the number rather than being pushed to the right edge:
   this row shares its width with the social icons, and `margin-left: auto`
   drove the tag out past the available space. */
.sb-lf-header-mobile-phone-lang {
	padding-left: 9px;
	color: var(--sb-gold-bright, #d9b654);
	font-size: 10px;
	font-weight: var(--sb-weight-semibold, 600);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.sb-lf-topbar-phone-flag {
	display: inline-flex;
	flex: none;
	width: 21px;
	height: 15px;
	border-radius: 2px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.sb-lf-topbar-phone-flag svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sb-lf-topbar-phone-lang {
	color: var(--sb-tp-accent);
	font-size: 10px;
	font-weight: var(--sb-weight-semibold, 600);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding-left: 8px;
	margin-left: 2px;
	border-left: 1px solid rgba(255, 255, 255, 0.22);
	transition: color 0.25s ease, border-color 0.25s ease;
}

/* Overrides the shared gold hover so each number glows in its own colour. */
.sb-lf-topbar-phone:hover {
	border-color: color-mix(in srgb, var(--sb-tp-accent) 65%, transparent);
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--sb-tp-accent) 34%, transparent),
		color-mix(in srgb, var(--sb-tp-accent) 12%, transparent)
	);
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3),
		0 0 0 3px color-mix(in srgb, var(--sb-tp-accent) 16%, transparent);
}

.sb-lf-topbar-phone:hover .sb-lf-topbar-phone-lang {
	color: #ffffff;
	border-left-color: rgba(255, 255, 255, 0.45);
}

.sb-lf-topbar-phone:hover .sb-lf-topbar-phone-flag {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* color-mix is well supported now but the hover must still change something
   visible without it, so the plain-colour fallback stays underneath. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.sb-lf-topbar-phone:hover {
		border-color: var(--sb-tp-accent);
	}
}

/* Prominent, always-visible flag buttons — no dropdown to open first. */
.sb-lf-topbar-lang-switch {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 14px;
	flex: 1 1 auto;
	min-width: 0;
}

.sb-lf-topbar-lang-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	color: #ffffff;
	font: inherit;
	font-weight: var(--sb-weight-semibold);
	font-size: 12.5px;
	letter-spacing: var(--sb-tracking-wide);
	white-space: nowrap;
	cursor: pointer;
	padding: 5px 16px 5px 5px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.sb-lf-topbar-lang-btn:hover,
.sb-lf-topbar-lang-btn.is-active {
	background: #b6912c;
	border-color: #b6912c;
	color: #0a0a0c;
	transform: translateY(-1px);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Flags are rendered as a landscape chip, not a circle. Both artworks are
   3:5-ish rectangles, so a circular crop threw away the left and right
   thirds of each — survivable for the Union Jack, whose design is the same
   at any crop, but it cut straight through the Lion and Sun emblem and left
   the Iranian flag reading as an indistinct smudge between two stripes.
   Showing each flag whole is what actually fixes its quality; the shared
   chip, hairline and radius are what keep the two consistent. */
.sb-lf-flag-icon {
	display: inline-flex;
	flex: none;
	width: 44px;
	height: 30px;
	border-radius: 4px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.sb-lf-topbar-lang-btn:hover .sb-lf-flag-icon,
.sb-lf-topbar-lang-btn.is-active .sb-lf-flag-icon {
	box-shadow: 0 0 0 1px rgba(10, 10, 12, 0.45), 0 1px 3px rgba(0, 0, 0, 0.25);
}

.sb-lf-flag-icon svg,


.sb-lf-flag-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Matches .sb-lf-topbar-inner's `1fr auto 1fr` rather than the flex
   `space-between` this used to be. With space-between the nav was pushed to
   whatever gap was left between a 259px logo and a much narrower utility
   cluster, so it sat visibly right of centre — and drifted again the moment
   the search field was added. Three tracks put the nav on the page's true
   centre line, directly under the top bar's centred contact block, which is
   what makes the two rows finally read as one aligned system.

   `minmax(0, 1fr)` (not plain `1fr`) lets the outer tracks shrink below
   their content's min-content width instead of overflowing the header. */
.sb-lf-header-inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 30px;
	padding: 18px 32px;
}

/* Logo */
.sb-lf-header-logo {
	grid-column: 1;
	justify-self: start;
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	min-width: 0;
}

.sb-lf-header-logo img {
	display: block;
	width: 180px;
	height: auto;
	/* Kills the ~4px of descender space an inline-level image leaves under
	   itself, which offset the logo from the nav's centre line. */
	vertical-align: middle;
}

.sb-lf-header-logo-bar {
	width: 3px;
	height: 46px;
	background: #b6912c;
	flex: none;
}

.sb-lf-header-logo-text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.sb-lf-header-logo-line1,
.sb-lf-header-logo-line2 {
	font-weight: 800;
	font-size: 25px;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.sb-lf-header-logo-line1 {
	color: #9aa0aa;
}

.sb-lf-header-logo-line2 {
	color: #ffffff;
}

.sb-lf-header-logo-tagline {
	margin-top: 5px;
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8a8f99;
}

/* Nav */
.sb-lf-header-nav {
	grid-column: 2;
	justify-self: center;
	display: flex;
	align-items: center;
	gap: 30px;
	justify-content: center;
}

.sb-lf-header-nav li {
	list-style: none;
	margin: 0;
}

.sb-lf-header-nav-item,
.sb-lf-header-nav .menu-item {
	position: relative;
}

/* The flex `gap` above already spaces the items evenly, but the items
   themselves were bare text of differing widths, so the *rhythm* still read
   as uneven — a short "Home" sat in the same 30px gap as a long "Practice
   Areas" with nothing framing either. The symmetric inline padding here
   gives every item an identical margin of its own, so the measured gap and
   the perceived gap finally agree. It also widens the hover/underline target
   to a consistent size regardless of label length. */
.sb-lf-header-nav a {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: #ffffff;
	text-decoration: none;
	font-weight: var(--sb-weight-bold);
	font-size: 15px;
	letter-spacing: var(--sb-tracking-wide);
	padding: 8px 2px;
	transition: color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	white-space: nowrap;
}

/* Underline animates with `transform: scaleX()` rather than `width`.
   Animating width re-runs layout on every frame — visibly gritty on a
   sticky header that is already compositing a backdrop-filter — whereas a
   transform stays on the compositor. Flipping transform-origin between the
   rest and hover states is what produces the wipe: it grows in from the
   left, and on mouse-out retreats back out to the right instead of
   collapsing leftward into nothing. */
.sb-lf-header-nav > .sb-lf-header-nav-item > a::after,
.sb-lf-header-nav > .menu-item > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--sb-gold);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.35s ease;
}

.sb-lf-header-nav a:hover,
.sb-lf-header-nav a:focus-visible {
	color: var(--sb-gold-light);
}

.sb-lf-header-nav > .sb-lf-header-nav-item > a:hover::after,
.sb-lf-header-nav > .menu-item > a:hover::after,
.sb-lf-header-nav > .sb-lf-header-nav-item > a:focus-visible::after,
.sb-lf-header-nav > .menu-item > a:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* Active page indicator — .is-current is set by law-firm-header.js (matches
   custom-link hrefs against the current URL); current-menu-item / ancestor /
   current_page_item are the classes WordPress's own nav-menu walker already
   applies for wp_nav_menu sources, so both menu types get the same treatment. */
.sb-lf-header-nav > .sb-lf-header-nav-item.is-current > a,
.sb-lf-header-nav > .menu-item.current-menu-item > a,
.sb-lf-header-nav > .menu-item.current-menu-ancestor > a,
.sb-lf-header-nav > .menu-item.current_page_item > a {
	color: #d9c98f;
}

/* The active page keeps its gold underline permanently — same 2px gold
   rule as before, just held at full scale rather than full width. */
.sb-lf-header-nav > .sb-lf-header-nav-item.is-current > a::after,
.sb-lf-header-nav > .menu-item.current-menu-item > a::after,
.sb-lf-header-nav > .menu-item.current-menu-ancestor > a::after,
.sb-lf-header-nav > .menu-item.current_page_item > a::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* Dropdown caret (injected by JS onto any nav item with a sub-menu) */
.sb-lf-header-submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-left: 4px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: inherit;
	flex: none;
}

.sb-lf-header-caret {
	display: block;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.25s ease;
}

.sb-lf-header-nav-item.is-open .sb-lf-header-caret,
.sb-lf-header-nav .menu-item.is-open .sb-lf-header-caret,
.sb-lf-header-nav-item:hover > .sb-lf-header-submenu-toggle .sb-lf-header-caret,
.sb-lf-header-nav .menu-item:hover > .sb-lf-header-submenu-toggle .sb-lf-header-caret {
	transform: rotate(-135deg);
}

/* Desktop dropdown panel */
.sb-lf-header-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 14px;
	min-width: 220px;
	background: #0a0a0c;
	border-radius: 8px;
	padding: 10px;
	box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.45);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
	z-index: 60;
}

.sb-lf-header-nav-item:hover > .sub-menu,
.sb-lf-header-nav .menu-item:hover > .sub-menu,
.sb-lf-header-nav-item:focus-within > .sub-menu,
.sb-lf-header-nav .menu-item:focus-within > .sub-menu,
.sb-lf-header-nav-item.is-open > .sub-menu,
.sb-lf-header-nav .menu-item.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sb-lf-header-nav .sub-menu li {
	list-style: none;
	margin: 0;
}

.sb-lf-header-nav .sub-menu a {
	display: block;
	padding: 10px 14px;
	border-radius: 5px;
	color: #ffffff;
	font-size: 14px;
	font-weight: var(--sb-weight-semibold);
	letter-spacing: var(--sb-tracking-wide);
	white-space: nowrap;
	transition: color 0.25s ease, background-color 0.25s ease;
}

.sb-lf-header-nav .sub-menu a:hover {
	color: #d9c98f;
	background: rgba(255, 255, 255, 0.08);
}

/* Nested (grandchild) dropdowns, if a WordPress menu goes deeper than one
   level, open to the side instead of stacking straight down. */
.sb-lf-header-nav .sub-menu .sub-menu {
	top: 0;
	left: 100%;
	margin-top: 0;
	margin-left: 10px;
}

.sb-lf-header-nav-btn {
	display: inline-flex;
	align-items: center;
	padding: 10px 22px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #ffffff;
	text-decoration: none;
	font-size: 13px;
	font-weight: var(--sb-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--sb-tracking-caps);
	transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
	white-space: nowrap;
}

.sb-lf-header-nav-btn:hover {
	background: #b6912c;
	border-color: #b6912c;
	color: #ffffff;
}

/* Utility (phone + search) */
.sb-lf-header-utility {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 20px;
	min-width: 0;
}

/* ---------------------------------------------------------------------
   Inline search field

   Sits in the utility track at the right-hand end of the navigation, and
   is deliberately quiet at rest: no fill, a hairline rule and a gold glyph,
   so it reads as one more piece of header furniture rather than competing
   with the nav for attention. It only asserts itself on focus, where the
   outline turns gold, a faint tint comes up behind the text and the field
   widens — enough to feel responsive without shifting anything around it,
   since the growth is absorbed by the flexible outer grid track.
   --------------------------------------------------------------------- */
.sb-lf-header-search {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: none;
	width: 192px;
	max-width: 100%;
	padding: 0 16px;
	height: 42px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.35s ease,
		background-color 0.35s ease,
		box-shadow 0.35s ease;
}

.sb-lf-header-search:hover {
	border-color: rgba(255, 255, 255, 0.45);
}

/* `:focus-within` rather than `:focus` on the input — the whole capsule is
   the thing that lights up, and the input itself is only part of it. */
.sb-lf-header-search:focus-within {
	width: 250px;
	border-color: var(--sb-gold);
	background: rgba(10, 10, 12, 0.35);
	box-shadow: 0 0 0 3px rgba(182, 145, 44, 0.18);
}

.sb-lf-header-search-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	color: var(--sb-gold-bright);
	transition: color 0.35s ease;
}

.sb-lf-header-search:focus-within .sb-lf-header-search-icon {
	color: var(--sb-gold);
}

.sb-lf-header-search-icon .sb-lf-header-search-glyph {
	display: block;
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

.sb-lf-header-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	background: none;
	box-shadow: none;
	color: #ffffff;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: var(--sb-weight-medium);
	letter-spacing: var(--sb-tracking-wide);
	line-height: 1;
}

.sb-lf-header-search input[type="search"]::placeholder {
	color: rgba(255, 255, 255, 0.62);
	font-weight: var(--sb-weight-regular);
	transition: color 0.35s ease;
}

.sb-lf-header-search:focus-within input[type="search"]::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

/* WebKit paints its own inset magnifier and a grey clear button inside
   type="search"; both fight the custom gold glyph. */
.sb-lf-header-search input[type="search"]::-webkit-search-decoration,
.sb-lf-header-search input[type="search"]::-webkit-search-cancel-button,
.sb-lf-header-search input[type="search"]::-webkit-search-results-button {
	-webkit-appearance: none;
	appearance: none;
}

.sb-lf-header-search-submit {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sb-lf-header-phone {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: #ffffff;
}

.sb-lf-header-phone-icon {
	color: #ffffff;
	font-size: 16px;
	display: inline-flex;
}

.sb-lf-header-divider {
	width: 1px;
	height: 22px;
	background: rgba(255, 255, 255, 0.25);
}

.sb-lf-header-phone-number {
	font-weight: var(--sb-weight-bold);
	font-size: 18px;
	letter-spacing: var(--sb-tracking-wide);
	color: #d9c98f;
	white-space: nowrap;
}

/* Mobile burger */
.sb-lf-header-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 30px;
	height: 30px;
	background: none;
	border: none;
	cursor: pointer;
	flex: none;
	padding: 0;
}

.sb-lf-header-burger span {
	display: block;
	width: 100%;
	height: 2px;
	background: #ffffff;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.sb-lf-header-burger.is-open span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.sb-lf-header-burger.is-open span:nth-child(2) {
	opacity: 0;
}

.sb-lf-header-burger.is-open span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Mobile panel */
.sb-lf-header-mobile-panel {
	display: none;
	position: relative;
	z-index: 2;
	background: #0a0a0c;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
}

.sb-lf-header-mobile-panel.is-open {
	max-height: 640px;
	overflow-y: auto;
}

/* Search inside the mobile panel, where the desktop row's field is hidden.
   Full-width and always visible — there is no hover on touch, so the
   "quiet until selected" treatment would just make it hard to find. */
.sb-lf-header-mobile-search {
	margin: 16px 32px 4px;
	width: auto;
	height: 46px;
}

.sb-lf-header-mobile-search:focus-within {
	width: auto;
}

.sb-lf-header-mobile-nav {
	display: flex;
	flex-direction: column;
	padding: 10px 32px 20px;
}

.sb-lf-header-mobile-nav li {
	list-style: none;
	margin: 0;
}

.sb-lf-header-mobile-nav a {
	display: block;
	padding: 13px 0;
	color: #ffffff;
	text-decoration: none;
	font-size: 16px;
	font-weight: var(--sb-weight-bold);
	letter-spacing: var(--sb-tracking-wide);
}

.sb-lf-header-mobile-nav a:hover {
	color: #d9c98f;
}

.sb-lf-header-mobile-nav .sb-lf-header-nav-item.is-current > a,
.sb-lf-header-mobile-nav .menu-item.current-menu-item > a,
.sb-lf-header-mobile-nav .menu-item.current-menu-ancestor > a,
.sb-lf-header-mobile-nav .menu-item.current_page_item > a {
	color: #d9c98f;
}

.sb-lf-header-mobile-nav .sb-lf-header-nav-item,
.sb-lf-header-mobile-nav .menu-item {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sb-lf-header-mobile-nav .sb-lf-header-nav-item > a,
.sb-lf-header-mobile-nav .menu-item > a {
	flex: 1 1 auto;
}

.sb-lf-header-mobile-nav .sb-lf-header-submenu-toggle {
	width: 34px;
	height: 34px;
}

/* Sub-items expand in place (accordion), no dropdown positioning needed
   since the mobile panel is already a full-width stacked list. */
.sb-lf-header-mobile-nav .sub-menu {
	flex: 1 0 100%;
	list-style: none;
	margin: 0;
	padding: 0 0 0 16px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
}

.sb-lf-header-mobile-nav .sb-lf-header-nav-item.is-open > .sub-menu,
.sb-lf-header-mobile-nav .menu-item.is-open > .sub-menu {
	max-height: 600px;
}

.sb-lf-header-mobile-nav .sub-menu a {
	padding: 11px 0;
	font-size: 14.5px;
	font-weight: var(--sb-weight-semibold);
	color: rgba(255, 255, 255, 0.75);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sb-lf-header-mobile-nav .sub-menu li:last-child a {
	border-bottom: none;
}

.sb-lf-header-mobile-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin: 4px 32px 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sb-lf-header-mobile-contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
}

.sb-lf-header-mobile-phone {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--sb-gold-light);
	text-decoration: none;
	font-weight: var(--sb-weight-bold);
	font-size: 16px;
	letter-spacing: var(--sb-tracking-wide);
	word-break: break-word;
}

/* Fixed icon box, independent of the link's own font-size — keeps the icon
   (icon-font glyph or inline SVG alike) from rendering at an inconsistent
   size the way an unwrapped icon does when it inherits font metrics. */
.sb-lf-header-mobile-phone-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	font-size: 16px;
	flex: none;
}

.sb-lf-header-mobile-phone-icon svg {
	display: block;
	width: 1em;
	height: 1em;
}

.sb-lf-header-mobile-social {
	display: flex;
	align-items: center;
	gap: 20px;
}

.sb-lf-header-mobile-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #c7cad1;
	font-size: 17px;
	text-decoration: none;
	transition: color 0.2s ease;
}

.sb-lf-header-mobile-social-link:hover {
	color: #d9c98f;
}

.sb-lf-header-mobile-social-link svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Centring the contact details on the page needs both outer groups to be the
   same width, which `flex: 1 1 0` (a zero basis) gives — with the default
   `auto` basis each side keeps its own content width and only shares the
   leftover, so the wider language cluster pushed the middle group 185px off
   centre while the navigation right below it was centred exactly.
   
   It is gated on width because the language cluster's content is ~515px: once
   half the free space drops below that it wraps onto a second line, which it
   started doing at 1440px. Above this breakpoint there is room for both. */
@media (min-width: 1500px) {
	.sb-lf-topbar-social,
	.sb-lf-topbar-lang-switch {
		flex: 1 1 0;
	}
}

/* Responsive */
/* Between the desktop layout and the burger breakpoint the logo, the full
   nav and the search field are all still on one line, so the field gives up
   width first — it is the element that can lose the most without losing
   meaning, and shrinking it protects the generous spacing everywhere else. */
@media (max-width: 1360px) {
	.sb-lf-header-search {
		width: 150px;
	}

	.sb-lf-header-search:focus-within {
		width: 210px;
	}

	.sb-lf-header-inner {
		gap: 20px;
	}
}

@media (max-width: 1280px) {
	.sb-lf-header-nav,
	.sb-lf-header-nav-btn {
		display: none;
	}

	/* The nav's centre track collapses with it, so the row falls back to a
	   plain flex line: logo left, then the search field and burger grouped
	   together on the right. `margin-right: auto` on the logo rather than
	   `justify-content: space-between` — with three children the latter
	   would strand the search field alone in the middle of the row. */
	.sb-lf-header-inner {
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.sb-lf-header-logo {
		margin-right: auto;
	}

	.sb-lf-header-utility {
		gap: 14px;
	}

	.sb-lf-header-burger {
		display: flex;
	}

	.sb-lf-header-mobile-panel {
		display: block;
	}

	.sb-lf-header-logo-line1,
	.sb-lf-header-logo-line2 {
		font-size: 20px;
	}

	.sb-lf-header-logo-bar {
		height: 36px;
	}
}

@media (min-width: 769px) {
	.sb-lf-header-mobile-search {
		display: none;
	}
}

@media (max-width: 768px) {
	.sb-lf-header-utility .sb-lf-header-search {
		display: none;
	}

	.sb-lf-topbar-contact {
		display: none;
	}
}

@media (max-width: 560px) {
	.sb-lf-topbar-inner {
		padding: 8px 18px;
		gap: 12px;
	}

	.sb-lf-topbar-social {
		display: none;
	}

	.sb-lf-topbar-lang-btn-text {
		display: none;
	}

	.sb-lf-topbar-lang-switch {
		gap: 10px;
	}

	.sb-lf-topbar-lang-btn {
		padding: 5px;
		border-radius: 8px;
	}

	.sb-lf-header-inner {
		padding: 14px 18px;
		gap: 14px;
	}

	.sb-lf-header-phone-number {
		display: none;
	}

	.sb-lf-header-divider {
		display: none;
	}

	.sb-lf-header-logo-tagline {
		display: none;
	}
}