/* IWS header GEOMETRY only. Sticky behaviour, mobile header layout, logo sizing.
 *
 * This file used to be iws-header-cta.css, extracted from WPCode snippet 36980 on
 * 28 Jul 2026. That extraction carried two unrelated things in one blob: the header
 * layout rules below, and a full re-skin of the .mfhcta call-to-action buttons.
 *
 * The CTA half was DELETED on 28 Jul 2026 because it was actively wrong:
 *
 *   1. It described the retired Mayfair design (flat transparent fill, 1.5px solid
 *      #0A1776 border), which breaks the rule that CTA backgrounds are never flat
 *      fills. iws-global.css carries the current gradient design.
 *   2. Its transparent-hero rules sat at specificity (0,6,2) and beat iws-global.css's
 *      mobile rules at (0,4,3), so on phones the fixed bottom bar rendered its buttons
 *      as white text with a white border and no fill, on a white bar. Invisible.
 *   3. Every other declaration in it was already shadowed by iws-global.css.
 *
 * So: .mfhcta belongs to iws-global.css and to nothing else. Do not add CTA rules
 * here. If a CTA rule seems to need a home other than iws-global.css, the real
 * problem is elsewhere and adding a competing selector will only restart the
 * specificity war this file was created to end.
 */

/* Sticky header. */
.site-header {
	position: -webkit-sticky !important;
	position: sticky !important;
	top: 0 !important;
	z-index: 9999;
	background: #fff;
	box-shadow: 0 2px 20px rgba(10, 23, 118, .08);
}

body.admin-bar .site-header {
	top: 32px;
}

/* Below 1024px the header is fixed rather than sticky, and the bar is rebuilt as a
   single flex row: burger, then logo, then the menu-right slot. body gets matching
   top padding so the fixed header never covers the first section. */
@media (max-width: 1024px) {

	.site-header {
		position: fixed !important;
		top: 0 !important;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 9999;
	}

	body {
		padding-top: 82px;
	}

	.navigation.container {
		display: flex !important;
		align-items: center;
		flex-wrap: nowrap;
		min-height: 82px;
		width: 100%;
		position: relative;
	}

	.navigation .mobile-menu-container.navbar-toggle {
		order: 1;
		margin: 0;
		flex: none;
	}

	.navigation .width-logo.sm-logo {
		order: 2;
		position: static;
		transform: none;
		margin: 0 0 0 14px;
		display: flex;
		align-items: center;
		flex: 0 1 auto;
		min-width: 0;
	}

	.navigation .width-logo.sm-logo img {
		max-height: 64px !important;
		height: auto !important;
		width: auto !important;
	}

	.navigation .menu-right {
		order: 3;
		margin-left: auto;
		padding: 0;
		display: flex !important;
		align-items: center;
	}
}

/* The logo steps down with the viewport so it never crowds the burger. */
@media (max-width: 768px) {
	.navigation .width-logo.sm-logo img {
		max-height: 58px !important;
	}
}

@media (max-width: 480px) {
	.navigation .width-logo.sm-logo img {
		max-height: 50px !important;
	}
}

@media (max-width: 380px) {
	.navigation .width-logo.sm-logo img {
		max-height: 44px !important;
	}
}

/* ---- header: equal gaps either side of the menu (29 Jul 2026) ----
   Burak measured this by eye and was right: logo -> menu was 98.9px while menu -> CTA
   was 12.5px, a difference of 86.4px.
   ROOT CAUSE, and it is a knock-on of the 29 Jul logo trim: `.width-logo` and its anchor
   carry an explicit width:206px, sized for the OLD untrimmed logo. The trimmed mark
   renders 119.6px, so the box kept 86.4px of dead space to the RIGHT of the ink -- which
   is exactly the discrepancy. The flex container is justify-content:space-between and was
   distributing correctly; it was being handed a padded box.
   Fix the box, not the distribution: with the logo hugging its ink, space-between splits
   the remaining 143.4px into two equal 71.7px gaps on its own.
   Desktop only. Below 1025px the header is a different layout (burger, no inline menu),
   so the width there is left alone. */
@media(min-width:1025px){
	html body .navigation.container .width-logo,
	html body .navigation.container .width-logo > a{
		width:auto !important;
		max-width:none !important;
		flex:0 0 auto !important;
	}
}