/* Eaton Square new header */

/* Moved out of an inline <style> block in header.php — was shipping
   unminified/uncacheable CSS inline on every request. */
#whatsapp-button {
	position: fixed;
	bottom: 10px;
	z-index: 100;
	padding: 24px;
	filter: drop-shadow( 4px 4px 8px #666666 );
}

#whatsapp-button img {
	max-height: 48px;
	padding: 0px;
}

.esq-top-bar {
	background: #000;
	color: #fff;
}

.esq-top-bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 20px;
}

.esq-top-bar-menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 8px;
}

.esq-top-bar-menu li {
	margin-bottom: 0 !important;
}

.esq-top-bar-menu a,
.esq-top-bar-phone,
.esq-nav-collapse-phone a,
.esq-header-cta-btn,
.esq-nav-desc {
	font-family: "Jost", Arial, sans-serif;
}

.esq-top-bar-menu a {
	color: #fff;
	font-size: 10px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.2s ease;
}

.esq-top-bar-menu a:hover {
	opacity: 1;
}

.esq-top-bar-right {
	display: flex;
	align-items: center;
	gap: 24px;
}

.esq-top-bar-phone,
.esq-nav-collapse-phone a {
	color: #B2B2B2;
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
}

.esq-icon-phone {
	display: inline-flex;
	align-items: center;
	margin-right: 6px;
}

.esq-icon-phone svg {
	display: block;
}

.esq-top-bar-search .esq_search,
.esq-nav-collapse-search .esq_search {
	display: flex;
	align-items: center;
}

.esq-top-bar-search .fl-search-input,
.esq-nav-collapse-search .fl-search-input {
	background: #1A1A1A;
	border: none;
	color: #fff;
	font-family: "Jost", Arial, sans-serif;
	font-size: 13px;
	padding: 4px 10px;
	min-width: 140px;
}

.esq-top-bar-search .fl-search-input::placeholder,
.esq-nav-collapse-search .fl-search-input::placeholder {
	color: rgba(255, 255, 255, 0.7);
}

/* bb-theme's own `.fl-page-nav-search form input.fl-search-input` rule
   (2 classes + 2 type selectors) otherwise outranks this and wins. */
.esq-nav-collapse-search .fl-search-input {
	background: #1A474F !important;
	padding: 12px 14px;
}

.esq-top-bar-search .search-button,
.esq-nav-collapse-search .search-button {
	background: transparent;
	border: none;
	color: #fff;
	cursor: pointer;
}

.esq-main-header {
	background: #2A444D;
	position: sticky;
	top: 0;
	z-index: 999;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.esq-main-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px 20px;
	gap: 32px;
}

/* The logo isn't an <img> — it's BB's icon-font logo (a single glyph,
   "esquare-logofull"), sized via font-size, not width/height. Its natural
   aspect ratio already closely matches 116:36 at this font-size, so
   bumping font-size scales both dimensions proportionally to land there.
   The Customizer's own inline style sets `fl-logo-font-size` — !important
   guarantees this wins regardless of where that gets output in <head>. */
.esq-main-header-logo .fl-logo-text {
	font-size: 40px !important;
}

@media ( min-width: 992px ) {
	.esq-main-header-logo .fl-logo-text {
		position: relative;
		top: 5px;
	}
}

.esq-main-header-logo img {
	width: 129px;
	height: 40px;
	object-fit: contain;
}

.esq-main-header-logo .fl-logo-text,
.esq-main-header-logo .fl-logo-text * {
	color: #fff !important;
}

.esq-main-nav {
	flex: 1;
}

.esq-main-menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 28px;
	flex-wrap: wrap;
	align-items: stretch;
}

.esq-main-menu > li {
	position: relative;
	margin-bottom: 0px;
}

.esq-main-menu > li > a,
.esq-main-menu > li > .nav-link {
	display: block;
	color: #fff;
	font-family: "Chronicle Display", Times, serif;
	font-size: 13px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
	padding: 8px 0;
	cursor: pointer;
	transition: color 0.2s ease;
}

.esq-main-menu > li > a:hover,
.esq-main-menu > li > .nav-link:hover {
	color: #B48C68;
}

.esq-nav-link-with-desc {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
}

.esq-nav-desc {
	font-size: 11px;
	letter-spacing: 0.3px;
	text-transform: none;
	color: rgba(255, 255, 255, 0.75);
}

.esq-nav-title {
	display: inline-flex;
	align-items: center;
}

/* Dropdown caret for nav items with sub-menus — rotates open on hover. */
.esq-nav-caret {
	display: inline-block;
	position: relative;
	top: -3px;
	width: 6px;
	height: 6px;
	margin-left: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate( 45deg );
	transition: transform 0.3s ease, top 0.3s ease;
}

.esq-main-menu > li:hover > a .esq-nav-caret,
.esq-main-menu > li:hover > .nav-link .esq-nav-caret {
	top: 0px;
	transform: rotate( 225deg );
}

.esq-main-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	background: #2A444D;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	list-style: none;
	margin: 0;
	padding: 4px 0;
	min-width: 200px;
	z-index: 50;
	opacity: 0;
	visibility: hidden;
	transform: translateY( 8px );
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.esq-main-menu li:hover > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
}

/* A third-level menu stacking directly beneath its second-level parent
   item (inside the same dropdown column) reads as a flat continuation of
   the list, not a sub-menu of that specific item — flying it out to the
   right instead makes the hierarchy clear. */
.esq-main-menu .sub-menu li {
	position: relative;
}

.esq-main-menu .sub-menu .sub-menu {
	top: -9px;
	left: 100%;
	transform: translateX( 8px );
}

/* Sub-menu items with their own children fly out to the right (see above),
   so their caret should point right too instead of the top-level's down
   chevron — same corner shape, just rotated the other way. Static, no
   hover-rotate, since opening here is a sideways reveal, not a flip. */
.esq-main-menu .sub-menu .esq-nav-caret {
	top: -2px;
	padding: 2px;
	transform: rotate( -45deg );
}

.esq-main-menu .sub-menu li:hover > .sub-menu {
	transform: translateX( 0 );
}

.esq-main-menu .sub-menu a {
	display: block;
	padding: 5px 20px;
	color: rgba(255, 255, 255, 0.85);
	font-family: "Jost", Arial, sans-serif;
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

.esq-main-menu .sub-menu a:hover {
	background: none;
	color: #B48C68;
	padding-left: 24px;
}

/* Special gold nav item (e.g. "ESQ Commercial") — add the CSS class
   "esq-nav-special" to the menu item in Appearance > Menus to opt in. */
.esq-main-menu > li.esq-nav-special {
	padding-left: 20px;
}

.esq-main-menu > li.esq-nav-special::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY( -50% );
	width: 1px;
	height: 26px;
	background: #B48C68;
}

.esq-main-menu > li.esq-nav-special > a,
.esq-main-menu > li.esq-nav-special > .nav-link {
	color: #B48C68;
}

.esq-main-menu > li.esq-nav-special .esq-nav-desc {
	color: rgba(180, 140, 104, 0.8);
}

.esq-header-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #B48C68;
	color: #171717;
	font-size: 12px;
	font-weight: bold;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	padding: 14px 22px;
	white-space: nowrap;
	transition: background 0.25s ease;
}

.esq-header-cta-btn:hover {
	background: #171717;
	color: #B48C68;
}

.esq-header-cta-btn .esq-icon-arrow {
	display: inline-block;
	transition: transform 0.25s ease;
}

.esq-header-cta-btn:hover .esq-icon-arrow {
	transform: translateX( 4px );
}

.esq-header-cta-text-short {
	display: none;
}

/* Mobile nav toggle (hidden above 991px) */

.esq-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: none;
	border: 1px solid rgba(42, 68, 77, 0.3);
	border-radius: 0px;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
}

/* Absolutely positioned (rather than margin-stacked) so the 3-line group
   is always exactly symmetric around the span's own box — margin-based
   spacing on overflowing pseudo-elements made the X look off-center when
   open since the visual group's center didn't reliably match where flex
   was centering the (collapsed) box. */
.esq-nav-toggle-bars {
	position: relative;
	display: block;
	width: 18px;
	height: 2px;
	background: #2A444D;
	transition: background 0.2s ease;
}

.esq-nav-toggle-bars::before,
.esq-nav-toggle-bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: #2A444D;
	transition: transform 0.2s ease, background 0.2s ease;
}

.esq-nav-toggle-bars::before {
	top: -7px;
}

.esq-nav-toggle-bars::after {
	top: 7px;
}

.esq-nav-toggle[aria-expanded="true"] {
	background: #B48C68;
	border-color: #B48C68;
}

.esq-nav-toggle[aria-expanded="true"] .esq-nav-toggle-bars {
	background: transparent;
}

.esq-nav-toggle[aria-expanded="true"] .esq-nav-toggle-bars::before,
.esq-nav-toggle[aria-expanded="true"] .esq-nav-toggle-bars::after {
	background: #2A444D;
}

.esq-nav-toggle[aria-expanded="true"] .esq-nav-toggle-bars::before {
	transform: translateY( 7px ) rotate( 45deg );
}

.esq-nav-toggle[aria-expanded="true"] .esq-nav-toggle-bars::after {
	transform: translateY( -7px ) rotate( -45deg );
}

/* Mobile full-screen nav overlay (hidden/empty above 991px since the
   desktop nav above already renders the menu inline) */

.esq-nav-collapse {
	display: none;
}

@media ( min-width: 992px ) {
	.esq-nav-collapse,
	.esq-nav-collapse-search,
	.esq-nav-collapse-phone {
		display: none !important;
	}
}

/* Between 992-1280px the inline desktop nav is still showing (no hamburger
   yet) but is cramped enough that it wraps to two lines with the CTA taking
   up space — dropping the CTA here gives the nav room to fit on one line.
   It comes back below 992px since the hamburger overlay replaces the inline
   nav entirely at that point, so there's no wrapping risk. */
@media ( min-width: 992px ) and ( max-width: 1280px ) {
	.esq-main-header-cta {
		display: none;
	}
}

@media ( max-width: 991px ) {
	.esq-top-bar {
		display: none;
	}

	.esq-main-header {
		background: #2A444D;
	}

	.esq-main-header-inner {
		padding: 2px 16px;
		gap: 12px;
	}

	.esq-main-header-logo img {
		width: 116px;
		height: 36px;
	}

	.esq-main-nav {
		display: none;
	}

	.esq-main-header-cta {
		margin-left: auto;
	}

	.esq-header-cta-btn {
		padding: 13px 14px;
		font-size: 10px;
	}

	.esq-header-cta-text-full {
		display: none;
	}

	.esq-header-cta-text-short {
		display: inline;
	}

	.esq-header-cta-btn .esq-icon-arrow {
		display: none;
	}

	.esq-main-header-inner {
		gap: 8px;
	}

	.esq-nav-toggle {
		display: flex;
		width: 36px;
		height: 36px;
		background: #B48C68;
		border: none;
	}

	.esq-nav-toggle-bars,
	.esq-nav-toggle-bars::before,
	.esq-nav-toggle-bars::after {
		background: #171717;
	}

	/* Swap both the header and the offcanvas panel to a darker shade while
	   the menu is open, so they read as one continuous surface. */
	body.esq-nav-open .esq-main-header {
		background: #00333B;
	}

	.esq-nav-collapse.is-open {
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #00333B;
		z-index: 99999;
	}

	.esq-nav-collapse-scroll {
		flex: 1;
		overflow-y: auto;
	}

	.esq-nav-collapse-search {
		padding: 8px 16px;
	}

	.esq-nav-collapse-menu .esq-main-menu {
		flex-direction: column;
		gap: 0;
		padding: 0 16px;
	}

	.esq-nav-collapse-menu .esq-main-menu > li > a {
		color: #fff;
		font-size: 16px;
		padding: 14px 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	}

	/* Desktop centers the title+desc group (it's a dropdown trigger there) —
	   on mobile this should read as a plain left-aligned list row instead,
	   with the caret pushed out to the far right edge. */
	.esq-nav-collapse-menu .esq-nav-link-with-desc {
		align-items: flex-start;
		text-align: left;
	}

	.esq-nav-collapse-menu .esq-nav-title {
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
	}

	/* Desktop reveals sub-menus on hover (opacity/visibility/transform) —
	   that doesn't apply on mobile, so reset it back to a normal, visible,
	   static-flow element and drive show/hide purely through `is-open`
	   instead. Without this reset the sub-menu was invisible but still
	   occupying its full layout height — a large blank gap, not a missing
	   menu. */
	.esq-nav-collapse-menu .esq-main-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
		background: none;
		box-shadow: none;
		padding-left: 16px;
		display: none;
	}

	.esq-nav-collapse-menu .esq-main-menu li.is-open > .sub-menu {
		display: block;
	}

	.esq-nav-collapse-menu .esq-main-menu .sub-menu a {
		color: rgba(255, 255, 255, 0.8);
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	/* Desktop's sub-menu hover (cream background + padding shift) doesn't
	   translate well to mobile touch — drop the background/shift and just
	   tint the text gold like the rest of the site's hover states. */
	.esq-nav-collapse-menu .esq-main-menu .sub-menu a:hover {
		background: none;
		color: #B48C68;
		padding-left: 20px;
	}

	/* As a flex item inside .esq-nav-title, the caret's own padding
	   (used to enlarge its tap target) inflates its flex min-content size
	   beyond the specified width/height unless min-width/min-height are
	   reset — without this it was rendering far bigger than intended. */
	.esq-nav-collapse-menu .esq-nav-caret {
		flex-shrink: 0;
		top: 0;
		width: 2px;
		height: 2px;
		min-width: 0;
		min-height: 0;
		border-width: 1px;
		box-sizing: content-box;
		cursor: pointer;
		padding: 4px;
		margin: -4px 0 -4px 7px;
	}

	.esq-nav-collapse-menu li.is-open > a .esq-nav-caret,
	.esq-nav-collapse-menu li.is-open > .nav-link .esq-nav-caret {
		transform: rotate( 225deg );
	}

	.esq-nav-collapse-phone {
		background: #B48C68;
		padding: 16px;
		text-align: center;
	}

	.esq-nav-collapse-phone a {
		color: #2A444D;
		font-weight: bold;
	}
}

body.esq-nav-open {
	overflow: hidden;
}

@media ( max-width: 768px ) {
	.esq-top-bar-menu {
		display: none;
	}
}