/* ============================================================
   KA Region Switch v1.3.0 — app-style header system
   White utility topbar + segmented country switcher + per-region CTA
   (US: Get a Quote / Kenya: Book a Consultation), mirroring the
   Base44 web app. The header bar is dark in BOTH regions so the two
   sites feel like one experience.
   ============================================================ */

/* ---------- White utility topbar ---------- */
.ka-topbar {
	background: #fff;
	border-bottom: 1px solid #ECECEC;
	font-family: 'Sora', 'Inter', -apple-system, 'Segoe UI', sans-serif;
	font-size: 13px;
	position: relative;
	z-index: 9990;
}
.ka-topbar-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 9px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.ka-topbar-left {
	display: flex;
	align-items: center;
	gap: 30px;
	min-width: 0;
}
.ka-tb-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #4F4653;
	text-decoration: none;
	white-space: nowrap;
}
.ka-tb-item svg {
	width: 15px;
	height: 15px;
	flex: none;
}
a.ka-tb-item:hover { color: #F1131A; }
.ka-tb-hours { color: #858585; }
.ka-tb-portal {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #1F1C21;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.ka-tb-portal svg { width: 15px; height: 15px; }
.ka-tb-portal:hover { color: #F1131A; }

@media (max-width: 820px) {
	.ka-tb-hours { display: none; }
	.ka-topbar-left { gap: 18px; }
}
@media (max-width: 560px) {
	.ka-tb-item span { font-size: 12px; }
}

/* ---------- Get a Quote button (appended to primary nav) ---------- */
.ct-main-menu > li.ka-menu-quote {
	display: inline-flex;
	align-items: center;
	margin-left: 6px;
}
.ct-main-menu > li.ka-menu-quote > a {
	background: #F1131A !important;
	color: #fff !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	padding: 11px 24px !important;
	border-radius: 10px !important;
	line-height: 1.2 !important;
	text-decoration: none;
	white-space: nowrap;
}
.ct-main-menu > li.ka-menu-quote > a:hover {
	background: #C90E14 !important;
	color: #fff !important;
}

/* ---------- Segmented country switcher (appended to primary nav) ---------- */
.ct-main-menu > li.ka-menu-switcher {
	display: inline-flex;
	align-items: center;
	margin-left: 14px;
}
.ka-seg {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	padding: 3px;
}
/* Scoped with !important: the theme's own .ct-main-menu link rules otherwise
   inflate the switcher (they beat plain .ka-seg-opt on specificity). */
.ct-main-menu > li.ka-menu-switcher .ka-seg-opt {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	padding: 8px 16px !important;
	border-radius: 999px !important;
	color: #CFCFCF !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
.ct-main-menu > li.ka-menu-switcher .ka-seg-opt svg { width: 14px !important; height: 14px !important; flex: none !important; }
.ct-main-menu > li.ka-menu-switcher .ka-seg-opt:hover { color: #fff !important; }
.ct-main-menu > li.ka-menu-switcher .ka-seg-opt.is-active { background: #F1131A !important; color: #fff !important; }

/* Keep the appended items tidy inside mobile menus. */
@media (max-width: 1024px) {
	#ct-header-elementor li.ka-menu-switcher { margin: 10px 0 0; }
	#ct-header-elementor li.ka-menu-quote { margin: 10px 0 0; }
}

/* ============================================================
   Single-row app header (desktop, BOTH regions).
   The logo, nav, CTA and country switcher share one dark row,
   mirroring the Base44 web app. Elementor builds the header as
   three equal columns (logo | nav | icons) inside section
   6d65599 (main) / the sticky variant — we let them size by
   content instead, and keep the menu on one line.
   ============================================================ */
@media (min-width: 1025px) {
	/* Full-bleed header + content-sized columns (1.4.6).
	   Measured 2026-09-22: the menu row (8 links + CTA + pills) is
	   ~1200px wide — it cannot fit in a boxed 1280px container's
	   middle column at ANY percentage split, so the 18/60/22 approach
	   is abandoned. The header goes edge-to-edge on desktop (the hero
	   below is already full-bleed): logo and icons columns shrink to
	   their content, the nav column takes every remaining pixel.
	   No region prefix: the layout is identical for both regions.
	   Two selector strategies are listed (structural nth-child, plus
	   the current Elementor data-id classes) so the sizing survives
	   either a markup or an ID change. */
	#ct-header-elementor .ct-header-elementor-main .elementor-container,
	#ct-header-elementor .ct-header-elementor-sticky .elementor-container,
	#ct-header-elementor .elementor-container {
		max-width: 100% !important;
		padding-left: 32px !important;
		padding-right: 32px !important;
		flex-wrap: nowrap !important;
	}
	/* Column 1: logo — shrink to content. */
	#ct-header-elementor .elementor-container > .elementor-column:nth-child(1),
	#ct-header-elementor .elementor-element-2215ff2c,
	#ct-header-elementor .elementor-element-5eb58ad5 {
		width: auto !important;
		flex: 0 0 auto !important;
	}
	/* Column 2: nav — take all remaining space. */
	#ct-header-elementor .elementor-container > .elementor-column:nth-child(2),
	#ct-header-elementor .elementor-element-79152c19,
	#ct-header-elementor .elementor-element-68a26dd1 {
		width: auto !important;
		flex: 1 1 auto !important;
		min-width: 0 !important;
	}
	/* Column 3: search/cart/hamburger — shrink to content. */
	#ct-header-elementor .elementor-container > .elementor-column:nth-child(3),
	#ct-header-elementor .elementor-element-76c8fb41,
	#ct-header-elementor .elementor-element-3c13b531 {
		width: auto !important;
		flex: 0 0 auto !important;
	}
}
/* ============================================================
   Single-row menu (desktop, BOTH regions) — restored 2026-09-22.
   The column rebalance above gives the nav room; these rules keep
   the <ul> itself on one line: flex row, no wrap, compact links.
   (A 1.4.4 rewrite accidentally dropped this block, which caused
   the two-row wrap.) Elementor IDs are avoided — they go stale.
   ============================================================ */
@media (min-width: 1025px) {
	body.ka-region-us #ct-header-elementor .ct-main-menu,
	body.ka-region-ke #ct-header-elementor .ct-main-menu {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-end !important;
	}
	body.ka-region-us #ct-header-elementor .ct-main-menu > li,
	body.ka-region-ke #ct-header-elementor .ct-main-menu > li {
		flex: 0 0 auto !important;
	}
	body.ka-region-us #ct-header-elementor .ct-main-menu > li > a,
	body.ka-region-ke #ct-header-elementor .ct-main-menu > li > a {
		white-space: nowrap !important;
		font-size: 12.5px !important;
		letter-spacing: .04em !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
	/* Keep the CTA + switcher compact on the shared row. */
	body.ka-region-us #ct-header-elementor .ct-main-menu > li.ka-menu-quote,
	body.ka-region-ke #ct-header-elementor .ct-main-menu > li.ka-menu-quote {
		margin-left: 8px !important;
		display: inline-flex !important;
		visibility: visible !important;
	}
	body.ka-region-us #ct-header-elementor .ct-main-menu > li.ka-menu-switcher,
	body.ka-region-ke #ct-header-elementor .ct-main-menu > li.ka-menu-switcher {
		margin-left: 10px !important;
	}
	body.ka-region-us #ct-header-elementor .ct-main-menu > li.ka-menu-switcher .ka-seg-opt,
	body.ka-region-ke #ct-header-elementor .ct-main-menu > li.ka-menu-switcher .ka-seg-opt {
		font-size: 11.5px !important;
		padding: 7px 10px !important;
	}
	body.ka-region-us #ct-header-elementor .ct-main-menu > li.ka-menu-switcher .ka-seg-opt span,
	body.ka-region-ke #ct-header-elementor .ct-main-menu > li.ka-menu-switcher .ka-seg-opt span {
		white-space: nowrap !important;
	}
}


/* ============================================================
   Sticky-header clone fix.
   The theme renders a second copy of the header
   (.ct-header-elementor-sticky) that should only appear after
   scrolling (theme JS adds .h-fixed). The clone currently ships
   with .h-fixed already present in the initial markup, so it sits
   visibly on top of the transparent main header — the "stacked
   menus". Keep the clone hidden until the visitor really scrolls
   (JS toggles body.ka-scrolled). On mobile/tablet the clone stays
   off entirely; the theme's own off-canvas mobile header takes over.
   ============================================================ */
#ct-header-elementor .ct-header-elementor-sticky {
	visibility: hidden !important;
	-webkit-transform: translateY(-100%) !important;
	transform: translateY(-100%) !important;
}
@media (min-width: 1025px) {
	body.ka-scrolled #ct-header-elementor .ct-header-elementor-sticky {
		visibility: visible !important;
		-webkit-transform: translateY(0) !important;
		transform: translateY(0) !important;
	}
}
@media (max-width: 1024px) {
	#ct-header-elementor .ct-header-elementor-sticky {
		display: none !important;
	}
}

/* ============================================================
   Mid-width desktops: the full row (8 links + CTA + pills, ~1200px)
   only fits above ~1770px. Below that, shed the CTA first, then
   tighten links and pills. No region prefix needed.
   ============================================================ */
@media (min-width: 1025px) and (max-width: 1770px) {
	/* The CTA button does not fit the tighter row; the menu's Contact
	   link covers the same action. Body-prefixed to match the
	   specificity of the desktop show rule above (later order wins). */
	body.ka-region-us #ct-header-elementor .ct-main-menu > li.ka-menu-quote,
	body.ka-region-ke #ct-header-elementor .ct-main-menu > li.ka-menu-quote { display: none !important; }
}
@media (min-width: 1025px) and (max-width: 1650px) {
	#ct-header-elementor .ct-main-menu > li > a {
		font-size: 11.5px !important;
		padding-left: 7px !important;
		padding-right: 7px !important;
	}
	#ct-header-elementor .ct-main-menu > li.ka-menu-switcher { margin-left: 8px !important; }
	#ct-header-elementor .ct-main-menu > li.ka-menu-switcher .ka-seg { padding: 2px !important; gap: 0 !important; }
	#ct-header-elementor .ct-main-menu > li.ka-menu-switcher .ka-seg-opt {
		padding: 7px 12px !important;
		font-size: 12px !important;
		gap: 6px !important;
	}
}
@media (min-width: 1025px) and (max-width: 1400px) {
	#ct-header-elementor .ct-main-menu > li > a {
		font-size: 11px !important;
		padding-left: 6px !important;
		padding-right: 6px !important;
	}
	/* Inactive region: globe icon only (click to switch). */
	#ct-header-elementor .ct-main-menu > li.ka-menu-switcher .ka-seg-opt:not(.is-active) span { display: none !important; }
}

/* ============================================================
   Narrow desktops (1025–1560px): even tightened, the row cannot
   fit — measured 2026-09-22 it clips under the logo through ~1530px.
   Fall back to the theme's hamburger menu, which carries the
   same region menu + region switcher.
   ============================================================ */
@media (min-width: 1025px) and (max-width: 1560px) {
	body.ka-region-us #ct-header-elementor .ct-header-elementor-main .ct-main-menu,
	body.ka-region-ke #ct-header-elementor .ct-header-elementor-main .ct-main-menu,
	body.ka-region-us #ct-header-elementor .ct-header-elementor-sticky .ct-main-menu,
	body.ka-region-ke #ct-header-elementor .ct-header-elementor-sticky .ct-main-menu {
		display: none !important;
	}
	body.ka-region-us #ct-header-elementor .ct-icon-hidden-sidebar,
	body.ka-region-ke #ct-header-elementor .ct-icon-hidden-sidebar {
		display: block !important;
	}
}

/* ============================================================
   Mobile drawer (<=1024px): the theme renders the region menu in a
   white slide-in panel. Keep the switcher inside the panel: full
   width, wrapping, centered options.
   ============================================================ */
@media (max-width: 1024px) {
	/* Structural selectors: the mobile drawer's <ul> class is theme-
	   dependent, so match the appended items wherever they render. */
	#ct-header-elementor li.ka-menu-switcher {
		display: flex !important;
		width: 100% !important;
		margin: 12px 0 0 !important;
	}
	#ct-header-elementor li.ka-menu-switcher .ka-seg {
		flex-wrap: wrap !important;
		width: 100% !important;
	}
	#ct-header-elementor li.ka-menu-switcher .ka-seg-opt {
		flex: 1 1 auto !important;
		justify-content: center !important;
	}
	#ct-header-elementor li.ka-menu-quote { margin: 10px 0 0 !important; }
}

/* Small phones: the utility topbar cannot fit phone + email +
   Portal Login on one row — keep phone + login, drop the email. */
@media (max-width: 600px) {
	.ka-topbar-inner { padding: 8px 16px; }
	.ka-topbar-left { gap: 14px; }
	.ka-topbar-left a.ka-tb-item[href^="mailto:"] { display: none; }
}

/* ============================================================
   Compact pill labels on desktop (1.4.4).
   Full country names cannot fit on the desktop header row next to
   the menu, quote button and search box, so desktop pills show
   globe + currency code only (full name in title/aria-label).
   The mobile drawer keeps the full labels.
   ============================================================ */
.ct-main-menu > li.ka-menu-switcher .ka-seg-short,
.ka-header-extras .ka-seg-short { display: none; }
@media (min-width: 1025px) {
	.ct-main-menu > li.ka-menu-switcher .ka-seg-full,
	.ka-header-extras .ka-seg-full { display: none !important; }
	.ct-main-menu > li.ka-menu-switcher .ka-seg-short,
	.ka-header-extras .ka-seg-short { display: inline !important; }
	/* Guard: theme menu-link styles (underline/line-through) must never
	   bleed onto the switcher pills. */
	.ct-main-menu > li.ka-menu-switcher .ka-seg-opt,
	.ka-header-extras .ka-seg-opt { text-decoration: none !important; }
}