/* ==========================================================================
   Tilala LLP - Premium Header (Executive Industrial)
   Scope: HEADER ONLY (.bt-vertical-header-top, .mainHeader and children).
   Nothing here targets hero, content, or footer selectors.

   Structural rebuild, not a recolor: three deliberately UNEQUAL tiers.
     1. Utility bar   - near-invisible hairline, ghost icons
     2. Main row      - real grid, logo dominant, contact cluster quiet
     3. Nav band      - clearly secondary, spacious, thin center-out underline

   No filled icon chips (circular or square) anywhere. No diagonal cuts.
   Accent #1565D1 used only as a precision tool (hover/active), never as
   a large fill.
   ========================================================================== */

:root {
	--tl-ink: #10182B;
	--tl-ink-rgb: 16, 24, 43;
	--tl-accent: #1565D1;
	--tl-accent-rgb: 21, 101, 209;
	--tl-line: rgba(255, 255, 255, 0.20);
	--tl-line-dark: rgba(16, 24, 43, 0.12);
	--tl-heading-font: "Red Hat Display", Arial, sans-serif;
	--tl-body-font: "Lato", Arial, sans-serif;
	--tl-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   0. HEADER SURFACE - directional gradient over the hero, solid on scroll
   -------------------------------------------------------------------------- */

.btTransparentLightHeader .mainHeader {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.34) 55%, rgba(0, 0, 0, 0.06) 100%);
	transition: background 260ms var(--tl-ease);
}

.btStickyHeaderActive.btTransparentLightHeader .mainHeader,
.btHasAltLogo.btStickyHeaderActive.btMenuHorizontal.btTransparentLightHeader .mainHeader {
	background: #ffffff;
	color: var(--tl-ink);
	box-shadow: 0 1px 0 var(--tl-line-dark), 0 12px 24px -18px rgba(var(--tl-ink-rgb), 0.35);
}

body.btMenuVertical.btTransparentLightHeader .mainHeader {
	background-color: var(--tl-ink);
}

/* --------------------------------------------------------------------------
   1. UTILITY BAR - near-invisible hairline, ghost social icons
   -------------------------------------------------------------------------- */

body.btMenuHorizontal:not(.btMenuVertical) .mainHeader .topBar {
	line-height: 1;
	padding: 6px 0;
	border-bottom: 1px solid var(--tl-line);
	transition: border-color 220ms var(--tl-ease), opacity 200ms var(--tl-ease), max-height 220ms var(--tl-ease), padding 220ms var(--tl-ease);
}

.btStickyHeaderActive.btTransparentLightHeader .mainHeader .topBar,
.btHasAltLogo.btStickyHeaderActive.btMenuHorizontal.btTransparentLightHeader .mainHeader .topBar {
	border-bottom-color: var(--tl-line-dark);
}

/* Collapse the utility bar once the header solidifies - keeps the sticky bar tight */
body.btStickyHeaderActive.btMenuHorizontal .mainHeader .topBar {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-bottom-width: 0;
	opacity: 0;
	overflow: hidden;
}

body.btMenuHorizontal .mainHeader .topBar .topBarPort {
	align-items: center;
}

body.btMenuHorizontal .mainHeader .topBar .btTopToolsRight {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Ghost icon glyph - no background, no border, no shape */
body.btMenuHorizontal .mainHeader .topBar .btIconWidget.btAccentIconWidget {
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.72;
	transition: opacity 180ms var(--tl-ease), transform 180ms var(--tl-ease);
}

body.btMenuHorizontal .mainHeader .topBar .btIconWidget.btAccentIconWidget .btIconWidgetIcon,
body.btMenuHorizontal .mainHeader .topBar .btIconWidget.btAccentIconWidget .btIconWidgetIcon .bt_bb_icon_holder {
	color: #fff !important;
	font-size: 12px;
	line-height: 1;
}

body.btMenuHorizontal .mainHeader .topBar a.btIconWidget.btAccentIconWidget:hover {
	opacity: 1;
	transform: translateY(-1px);
}

body.btMenuHorizontal .mainHeader .topBar a.btIconWidget.btAccentIconWidget:hover .btIconWidgetIcon,
body.btMenuHorizontal .mainHeader .topBar a.btIconWidget.btAccentIconWidget:hover .btIconWidgetIcon .bt_bb_icon_holder {
	color: var(--tl-accent) !important;
}

/* --------------------------------------------------------------------------
   2. MAIN ROW - grid layout: logo dominant left, quiet contact cluster right
   -------------------------------------------------------------------------- */

body.btMenuHorizontal:not(.btMenuVertical) .mainHeader .bt-logo-area.menu-holder {
	padding-top: 18px;
	padding-bottom: 18px;
	transition: padding 220ms var(--tl-ease);
}

body.btStickyHeaderActive.btMenuHorizontal .mainHeader .bt-logo-area.menu-holder {
	padding-top: 8px;
	padding-bottom: 8px;
}

.mainHeader .bt-logo-area.menu-holder .port {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	column-gap: 24px;
}

/* Mobile hamburger trigger occupies grid col 1 only when present (hidden on desktop by theme CSS) */
body.btMenuHorizontal:not(.btMenuVertical) .mainHeader .bt-logo-area.menu-holder .port {
	grid-template-columns: auto 1fr auto;
}

body.btMenuHorizontal:not(.btMenuVertical) .mainHeader .bt-logo-area.menu-holder .bt-horizontal-menu-trigger {
	display: none;
}

.mainHeader .bt-logo-area.menu-holder .logo {
	grid-column: 1;
	justify-self: start;
}

.mainHeader .bt-logo-area.menu-holder .topBarInLogoArea {
	grid-column: 3;
}

/* Logo: protected as the dominant element - shrink gently on sticky, never grow past theme size */
body.btStickyHeaderActive.btMenuHorizontal .mainHeader .logo .btMainLogo,
body.btStickyHeaderActive.btMenuHorizontal .mainHeader .logo .btAltLogo {
	height: 52px !important;
	width: auto !important;
	transition: height 220ms var(--tl-ease);
}

.mainHeader .bt-logo-area .logo a {
	display: inline-flex;
	align-items: center;
	transition: transform 220ms var(--tl-ease);
}

/* Contact actions: quiet ghost cluster, hairline dividers, no fills */

.mainHeader .topBarInLogoArea .topBarInLogoAreaCell {
	display: flex;
	align-items: stretch;
	gap: 0;
}

.mainHeader .topBarInLogoArea .btIconWidget.btWidgetWithText {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 20px;
	margin: 0 !important;
	border-left: 1px solid var(--tl-line);
	transition: opacity 180ms var(--tl-ease);
	opacity: 0.92;
}

.btStickyHeaderActive.btTransparentLightHeader .mainHeader .topBarInLogoArea .btIconWidget.btWidgetWithText,
.btHasAltLogo.btStickyHeaderActive.btMenuHorizontal.btTransparentLightHeader .mainHeader .topBarInLogoArea .btIconWidget.btWidgetWithText {
	border-left-color: var(--tl-line-dark);
}

.mainHeader .topBarInLogoArea .btIconWidget.btWidgetWithText:first-child {
	border-left: 0;
	padding-left: 0;
}

.mainHeader .topBarInLogoArea .btIconWidget.btWidgetWithText:hover {
	opacity: 1;
}

/* Icon glyph only - no background shape of any kind */
.mainHeader .topBarInLogoArea .btIconWidgetIcon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
}

.mainHeader .topBarInLogoArea .btIconWidgetIcon .bt_bb_icon_holder {
	color: currentColor !important;
	font-size: 17px;
	transition: color 180ms var(--tl-ease);
}

.mainHeader .topBarInLogoArea .btIconWidget:hover .btIconWidgetIcon .bt_bb_icon_holder {
	color: var(--tl-accent) !important;
}

.mainHeader .topBarInLogoArea .btIconWidgetContent {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	text-align: left;
}

.mainHeader .topBarInLogoArea .btIconWidgetTitle {
	font-family: var(--tl-body-font);
	font-size: 10px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	opacity: 0.62;
}

.mainHeader .topBarInLogoArea .btIconWidgetText {
	font-family: var(--tl-heading-font);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   3. PRIMARY NAVIGATION - clearly secondary: spacious, wide tracking,
      thin underline that animates outward from the center.
   -------------------------------------------------------------------------- */

body.btMenuHorizontal:not(.btMenuVertical) .mainHeader .bt-below-logo-area {
	border-top: 1px solid var(--tl-line);
	transition: border-color 220ms var(--tl-ease);
}

.btStickyHeaderActive.btTransparentLightHeader .mainHeader .bt-below-logo-area,
.btHasAltLogo.btStickyHeaderActive.btMenuHorizontal.btTransparentLightHeader .mainHeader .bt-below-logo-area {
	border-top-color: var(--tl-line-dark);
}

.mainHeader .menuPort nav > ul.menu > li > a {
	font-family: var(--tl-heading-font);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	opacity: 0.86;
	padding: 0 1.15em !important;
	position: relative;
	transition: opacity 180ms var(--tl-ease), color 180ms var(--tl-ease);
}

/* Thin underline, animates from the center outward */
.mainHeader .menuPort nav > ul.menu > li > a::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 15px;
	height: 2px;
	background-color: var(--tl-accent);
	transition: left 240ms var(--tl-ease), right 240ms var(--tl-ease);
}

html:not(.touch) body.btMenuHorizontal .mainHeader .menuPort nav > ul.menu > li:hover > a,
.mainHeader .menuPort nav > ul.menu > li.current-menu-item > a,
.mainHeader .menuPort nav > ul.menu > li.current-menu-parent > a,
.mainHeader .menuPort nav > ul.menu > li.current-menu-ancestor > a {
	opacity: 1;
	color: var(--tl-accent) !important;
}

html:not(.touch) body.btMenuHorizontal .mainHeader .menuPort nav > ul.menu > li:hover > a::after,
.mainHeader .menuPort nav > ul.menu > li.current-menu-item > a::after,
.mainHeader .menuPort nav > ul.menu > li.current-menu-parent > a::after,
.mainHeader .menuPort nav > ul.menu > li.current-menu-ancestor > a::after {
	left: 1.15em;
	right: 1.15em;
}

/* Dropdown panels: quiet, hairline, no heavy shadow */
.mainHeader .menuPort nav ul.sub-menu {
	background-color: #fff;
	border: 1px solid var(--tl-line-dark);
	border-top: 2px solid var(--tl-accent);
	box-shadow: 0 20px 40px -24px rgba(var(--tl-ink-rgb), 0.30);
	padding: 6px 0;
}

.mainHeader .menuPort nav ul.sub-menu li a {
	font-family: var(--tl-body-font);
	font-size: 13.5px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: var(--tl-ink) !important;
	opacity: 1;
	padding: 9px 22px !important;
	transition: background-color 160ms var(--tl-ease), color 160ms var(--tl-ease);
}

.mainHeader .menuPort nav ul.sub-menu li a:hover {
	background-color: rgba(var(--tl-accent-rgb), 0.06);
	color: var(--tl-accent) !important;
}

/* --------------------------------------------------------------------------
   4. MOBILE / OFF-CANVAS (< 1200px, body.btMenuVertical)
   A genuinely designed panel, not a recolored desktop header.
   Cosmetic only - position/transform/width/z-index left to the theme so
   the existing slide-in mechanic (header.misc.js) keeps working.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1199px) {

	.bt-vertical-header-top {
		background-color: #ffffff;
		border-bottom: 1px solid var(--tl-line-dark);
		padding: 4px 0;
	}

	.btTransparentLightHeader .bt-vertical-header-top {
		color: var(--tl-ink);
	}

	.bt-vertical-header-top .logo .btMainLogo,
	.bt-vertical-header-top .logo .btAltLogo {
		height: 44px !important;
		width: auto !important;
	}

	.bt-vertical-header-top .bt-vertical-menu-trigger {
		color: var(--tl-ink);
		transition: color 180ms var(--tl-ease);
	}

	.bt-vertical-header-top .bt-vertical-menu-trigger:hover {
		color: var(--tl-accent);
	}

	/* Off-canvas panel: generous padding, deep ink ground, distinct blocks */
	body.btMenuVertical .mainHeader {
		background-color: var(--tl-ink);
	}

	body.btMenuVertical .mainHeader .topBar {
		padding: 20px 24px 14px;
		border-bottom: 1px solid var(--tl-line);
	}

	body.btMenuVertical .mainHeader .topBar .btTopToolsRight {
		gap: 20px;
	}

	body.btMenuVertical .mainHeader .bt-logo-area.menu-holder {
		padding: 18px 24px;
		border-bottom: 1px solid var(--tl-line);
	}

	/* Contact actions stack as a distinct quiet block, full width */
	body.btMenuVertical .mainHeader .topBarInLogoArea .topBarInLogoAreaCell {
		flex-direction: column;
		width: 100%;
		gap: 2px;
	}

	body.btMenuVertical .mainHeader .topBarInLogoArea .btIconWidget.btWidgetWithText {
		border-left: 0;
		padding: 10px 0;
		width: 100%;
		box-sizing: border-box;
		opacity: 1;
	}

	body.btMenuVertical .mainHeader .topBarInLogoArea .btIconWidgetTitle {
		opacity: 0.6;
	}

	body.btMenuVertical .mainHeader .menuPort nav > ul.menu > li > a {
		font-family: var(--tl-heading-font);
		font-size: 15px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		opacity: 0.92;
		padding: 15px 24px !important;
		min-height: 48px;
		display: flex;
		align-items: center;
	}

	body.btMenuVertical .mainHeader .menuPort nav > ul.menu > li > a::after {
		content: none;
	}

	body.btMenuVertical .mainHeader .menuPort nav > ul.menu > li.current-menu-item > a {
		opacity: 1;
		color: var(--tl-accent) !important;
		border-left: 2px solid var(--tl-accent);
		padding-left: 22px !important;
	}

	body.btMenuVertical .mainHeader .menuPort nav ul.sub-menu {
		background-color: rgba(255, 255, 255, 0.04);
		border: 0;
		box-shadow: none;
	}

	body.btMenuVertical .mainHeader .menuPort nav ul.sub-menu li a {
		color: rgba(255, 255, 255, 0.78) !important;
		font-size: 14px;
		font-weight: 400;
		text-transform: none;
		letter-spacing: normal;
		padding: 12px 36px !important;
	}

	body.btMenuVertical .mainHeader .menuPort nav ul.sub-menu li a:hover {
		color: #fff !important;
		background-color: rgba(255, 255, 255, 0.06);
	}
}

/* Small phones: keep the utility row tidy */
@media screen and (max-width: 380px) {
	body.btMenuVertical .mainHeader .topBar .btTopToolsRight {
		gap: 14px;
	}
}

/* --------------------------------------------------------------------------
   5. ACCESSIBILITY
   -------------------------------------------------------------------------- */

.mainHeader a:focus-visible,
.bt-vertical-header-top a:focus-visible,
.bt-vertical-menu-trigger:focus-visible,
.bt-horizontal-menu-trigger:focus-visible {
	outline: 2px solid var(--tl-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.mainHeader,
	.mainHeader *,
	.bt-vertical-header-top,
	.bt-vertical-header-top * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}