/* ============================================================
   KA App Theme v1.3.0
   Ports the Kagiko & Associates web-app design language to WordPress:
   white app-style header, serif headlines, red CTAs, card grids, grey bands,
   blog cards with thumbnails, dark footer, and the KA App Homepage template.
   Palette (exact, from the app's CSS): red #F1131A, ink #1F1C21,
   grey #858585, muted #EDEDED, text #4F4653, border #E6E3E8.
   ============================================================ */

:root {
	--ka-red: #F1131A;
	--ka-red-dark: #C90E14;
	--ka-ink: #1F1C21;
	--ka-grey: #858585;
	--ka-muted: #EDEDED;
	--ka-text: #4F4653;
	--ka-border: #E6E3E8;
	--ka-serif: Georgia, 'ITC Galliard Pro Roman', 'Times New Roman', serif;
	--ka-sans: 'Sora', 'Inter', -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Base typography ---------- */
body {
	font-family: var(--ka-sans) !important;
	color: var(--ka-text);
}

h1, h2, h3, h4,
h1.page-title,
.entry-title,
.ka-logo-text {
	font-family: var(--ka-serif);
	color: var(--ka-ink);
}

a { color: var(--ka-red); }
a:hover { color: var(--ka-red-dark); }

/* ---------- Buttons: red, 12px radius (app style) ---------- */
.btn,
.btn-primary,
button,
input[type="submit"],
.wpcf7-submit,
.woocommerce button.button,
.woocommerce a.button {
	background: var(--ka-red) !important;
	border-color: var(--ka-red) !important;
	color: #fff !important;
	border-radius: 12px !important;
	font-family: var(--ka-sans);
	font-weight: 600;
}

/* ============================================================
   HEADER — white app-style bar (Equity reference):
   red KA mark + ink serif wordmark + red tagline.
   The theme keeps its own white bar; the plugin only restyles the
   logo lockup, which is deterministic across header variants.
   ============================================================ */
.ka-site-header {
	border-bottom: 1px solid #ececec;
}
/* App-style logo: red rounded-square mark + ink serif wordmark */
.ka-logo-link {
	display: inline-flex !important;
	align-items: center;
	gap: 12px;
	text-decoration: none !important;
}
img.ka-logo-mark {
	width: 40px !important;
	height: 40px !important;
	border-radius: 12px;
	object-fit: cover;
	flex: none;
}
.ka-logo-text {
	font-family: var(--ka-serif);
	font-size: 18px;
	font-weight: 700;
	color: var(--ka-ink) !important;
	line-height: 1.15;
	display: inline-flex;
	flex-direction: column;
	letter-spacing: .01em;
	white-space: nowrap;
}
.ka-logo-tag {
	font-family: var(--ka-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .2em;
	color: var(--ka-red) !important;
}
/* Footer is dark: the wordmark stays white there. */
.ka-site-footer .ka-logo-text { color: #fff !important; }

/* ============================================================
   HERO — grey gradient overlay (app homepage style)
   ============================================================ */
.ka-hero { position: relative; overflow: hidden; }
.ka-hero img[src*="ptitle-shape"] { display: none !important; }
.ka-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(133,133,133,.95), rgba(133,133,133,.8), rgba(133,133,133,.4));
	pointer-events: none;
}
.ka-hero > * { position: relative; z-index: 1; }
h1.page-title {
	font-size: 60px !important;
	font-weight: 700 !important;
	color: #fff !important;
	line-height: 1.25 !important;
}
a.breadcrumb-entry { color: rgba(255, 255, 255, .7) !important; font-size: 14px; }

/* Solid-band hero variant: Kenya service pages + blog (like the app) */
.ka-hero-solid { background: var(--ka-grey) !important; }
body.blog .ka-hero-solid { background: var(--ka-ink) !important; }
.ka-hero-solid::after { display: none; }

/* ============================================================
   KENYA PAGES — section pattern
   ============================================================ */
.ka-eyebrow {
	font-family: var(--ka-sans) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: .2em !important;
	text-transform: uppercase !important;
	color: var(--ka-red) !important;
	margin-bottom: 16px !important;
}
.ka-eyebrow-light { color: var(--ka-red) !important; }

body.ka-kenya-hub .entry-content h2,
body.ka-kenya-service .entry-content h2 {
	font-size: 36px;
	color: var(--ka-ink);
	text-align: center;
	margin: 64px 0 24px;
	line-height: 1.25;
}
body.ka-kenya-hub .entry-content h3,
body.ka-kenya-service .entry-content h3 {
	font-size: 20px;
	color: var(--ka-ink);
	margin: 40px 0 16px;
}
body.ka-kenya-hub .entry-content p,
body.ka-kenya-service .entry-content p {
	font-size: 16px;
	line-height: 1.7;
}

/* Service cards: list items that link out (Kenya hub + service pages) */
body.ka-kenya-hub .entry-content ul:has(> li > strong > a),
body.ka-kenya-service .entry-content ul:has(> li > strong > a) {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 56px !important;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}
body.ka-kenya-hub .entry-content ul:has(> li > strong > a) > li,
body.ka-kenya-service .entry-content ul:has(> li > strong > a) > li {
	background: #fff;
	border: 1px solid var(--ka-border);
	border-radius: 16px;
	padding: 32px;
	margin: 0 !important;
	font-size: 14px;
	color: var(--ka-text);
	line-height: 1.65;
	transition: box-shadow .3s ease, transform .3s ease;
}
body.ka-kenya-hub .entry-content ul:has(> li > strong > a) > li:hover,
body.ka-kenya-service .entry-content ul:has(> li > strong > a) > li:hover {
	box-shadow: 0 20px 25px rgba(0,0,0,.08), 0 0 0 1px rgba(241,19,26,.12);
	transform: translateY(-3px);
}
body.ka-kenya-hub .entry-content ul:has(> li > strong > a) > li strong a,
body.ka-kenya-service .entry-content ul:has(> li > strong > a) > li strong a {
	font-family: var(--ka-serif);
	font-size: 20px;
	font-weight: 600;
	color: var(--ka-ink) !important;
	display: block;
	margin-bottom: 10px;
	text-decoration: none !important;
	line-height: 1.35;
}
body.ka-kenya-hub .entry-content ul:has(> li > strong > a) > li strong a::after,
body.ka-kenya-service .entry-content ul:has(> li > strong > a) > li strong a::after {
	content: " \2192";
	color: var(--ka-red);
}
body.ka-kenya-hub .entry-content ul:has(> li > strong > a) > li strong a:hover,
body.ka-kenya-service .entry-content ul:has(> li > strong > a) > li strong a:hover {
	color: var(--ka-red) !important;
}

/* Checklist cards: plain lists on Kenya service pages */
body.ka-kenya-service .entry-content ul:not(:has(a)) {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 56px !important;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}
body.ka-kenya-service .entry-content ul:not(:has(a)) > li {
	background: #fff;
	border: 1px solid var(--ka-border);
	border-radius: 16px;
	padding: 24px 24px 24px 62px;
	margin: 0 !important;
	position: relative;
	font-size: 15px;
	line-height: 1.6;
}
body.ka-kenya-service .entry-content ul:not(:has(a)) > li::before {
	content: "\2713";
	position: absolute;
	left: 22px;
	top: 24px;
	width: 24px;
	height: 24px;
	border: 2px solid var(--ka-red);
	color: var(--ka-red);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

/* Process band: muted band wrapping the "Our Process" steps */
.ka-process-band {
	background: var(--ka-muted);
	border-radius: 16px;
	padding: 64px 48px;
	margin: 64px 0;
}
.ka-process-band h2 { margin-top: 0 !important; }
.ka-process-band ol {
	list-style: none !important;
	counter-reset: ka-step;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
	padding: 0 !important;
	margin: 36px 0 0 !important;
}
.ka-process-band ol > li {
	background: #fff;
	border: 1px solid var(--ka-border);
	border-radius: 16px;
	padding: 32px 24px;
	margin: 0 !important;
	counter-increment: ka-step;
	font-size: 14px;
	line-height: 1.65;
	color: var(--ka-text);
}
.ka-process-band ol > li::before {
	content: "STEP " counter(ka-step);
	display: block;
	font-family: var(--ka-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--ka-red);
	margin-bottom: 12px;
}
.ka-process-band ol > li strong {
	display: block;
	font-family: var(--ka-serif);
	font-size: 18px;
	font-weight: 600;
	color: var(--ka-ink);
	margin-bottom: 8px;
}

/* CTA band: grey band wrapping the closing section */
.ka-cta-band {
	background: var(--ka-grey);
	border-radius: 16px;
	padding: 64px 48px;
	margin: 64px 0;
	text-align: center;
}
.ka-cta-band h2 { color: #fff !important; margin-top: 0 !important; }
.ka-cta-band p { color: rgba(255, 255, 255, .88) !important; }
.ka-cta-band a {
	display: inline-block;
	background: var(--ka-red);
	color: #fff !important;
	border-radius: 12px;
	padding: 16px 32px;
	font-family: var(--ka-sans);
	font-size: 16px;
	font-weight: 600;
	margin: 8px 6px 0;
	text-decoration: none !important;
}
.ka-cta-band a:hover { background: var(--ka-red-dark); color: #fff !important; }

/* ============================================================
   BLOG ARCHIVE — card grid with thumbnails (app style)
   ============================================================ */
.ka-filter-pills {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin: 40px 0 8px;
}
.ka-filter-pills a {
	display: inline-block;
	padding: 8px 20px;
	border-radius: 999px;
	font-family: var(--ka-sans);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	background: #fff;
	color: var(--ka-text) !important;
	border: 1px solid var(--ka-border);
}
.ka-filter-pills a.active,
.ka-filter-pills a:hover {
	background: var(--ka-red);
	border-color: var(--ka-red);
	color: #fff !important;
}
.ka-blog-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
	margin: 32px 0 56px;
}
.ka-blog-grid article.single-hentry.archive {
	background: #fff;
	border: 1px solid var(--ka-border);
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .3s ease, box-shadow .3s ease;
	margin: 0 !important;
}
.ka-blog-grid article.single-hentry.archive:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 25px rgba(0,0,0,.08);
}
.ka-card-thumb {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: linear-gradient(135deg, var(--ka-ink), var(--ka-grey));
	flex: none;
}
.ka-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ka-thumb-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
}
.ka-thumb-fallback span {
	font-family: var(--ka-serif);
	font-size: 52px;
	font-weight: 700;
	color: rgba(255, 255, 255, .3);
	letter-spacing: .05em;
}
.ka-blog-grid .entry-body {
	padding: 24px !important;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}
.ka-blog-grid ul.entry-meta {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 12px;
	color: var(--ka-text);
}
.ka-blog-grid li.item-category a {
	display: inline-block;
	background: #FDE7E9;
	color: var(--ka-red) !important;
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none !important;
}
.ka-blog-grid h2.entry-title {
	font-size: 20px !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ka-blog-grid h2.entry-title a { color: var(--ka-ink) !important; text-decoration: none !important; }
.ka-blog-grid h2.entry-title a:hover { color: var(--ka-red) !important; }
.ka-blog-grid .entry-excerpt {
	font-size: 14px;
	color: var(--ka-text);
	line-height: 1.65;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ka-blog-grid .entry-readmore { margin-top: auto; padding-top: 8px; }
.ka-blog-grid .entry-readmore a.btn {
	background: var(--ka-red) !important;
	border: none !important;
	border-radius: 12px !important;
	color: #fff !important;
	padding: 10px 22px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	display: inline-block;
}

/* ============================================================
   FOOTER — dark, like the app
   ============================================================ */
.ka-site-footer,
.ka-site-footer div {
	background-color: var(--ka-ink) !important;
	background-image: none !important;
}
.ka-site-footer,
.ka-site-footer p,
.ka-site-footer div,
.ka-site-footer span {
	color: rgba(255, 255, 255, .7);
}
.ka-site-footer h3 {
	color: #fff !important;
	font-family: var(--ka-sans);
	font-size: 20px;
	font-weight: 600;
}
.ka-site-footer a { color: rgba(255, 255, 255, .7) !important; }
.ka-site-footer a:hover { color: var(--ka-red) !important; }
/* Social icons: white inside 40px outlined pills */
.ka-site-footer a[class*="ct_icon"] {
	display: inline-flex !important;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 999px;
	align-items: center;
	justify-content: center;
	margin: 0 8px 8px 0;
	text-decoration: none !important;
}
.ka-site-footer a[class*="ct_icon"] i,
.ka-site-footer a[class*="ct_icon"] svg {
	color: #fff !important;
	font-size: 16px;
}
.ka-site-footer a[class*="ct_icon"]:hover {
	background: var(--ka-red);
	border-color: var(--ka-red);
}
/* Newsletter input on dark footer */
.ka-site-footer input.wpcf7-email {
	background: rgba(255, 255, 255, .08) !important;
	border: 1px solid rgba(255, 255, 255, .15) !important;
	color: #fff !important;
	border-radius: 12px !important;
}
.ka-site-footer input.wpcf7-email::placeholder { color: rgba(255, 255, 255, .45); }

/* ============================================================
   RESPONSIVE (app breakpoints)
   ============================================================ */
@media (max-width: 1024px) {
	h1.page-title { font-size: 48px !important; }
}
@media (max-width: 900px) {
	.ka-blog-grid { grid-template-columns: 1fr; }
	body.ka-kenya-hub .entry-content ul:has(> li > strong > a),
	body.ka-kenya-service .entry-content ul:has(> li > strong > a),
	body.ka-kenya-service .entry-content ul:not(:has(a)) {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 640px) {
	h1.page-title { font-size: 36px !important; }
	body.ka-kenya-hub .entry-content h2,
	body.ka-kenya-service .entry-content h2 { font-size: 30px; }
	.ka-process-band, .ka-cta-band { padding: 48px 24px; margin: 48px 0; }
	.ka-cta-band a { display: block; margin: 12px 0 0; }
}

/* ============================================================
   US REGION — dark app-style header (mirrors the Base44 web app).
   Scoped to body.ka-region-us and body.ka-region-ke: both regions share the dark header.
   Header is Elementor-built: #ct-header-elementor > .ct-header-elementor-main
   (normal) + .ct-header-elementor-sticky (sticky clone).
   ============================================================ */

/* Dark bar: normal + sticky instances. */
body.ka-region-us #ct-header-elementor .ct-header-elementor-main .elementor-top-section, body.ka-region-ke #ct-header-elementor .ct-header-elementor-main .elementor-top-section,
body.ka-region-us #ct-header-elementor .ct-header-elementor-sticky .elementor-top-section , body.ka-region-ke #ct-header-elementor .ct-header-elementor-sticky .elementor-top-section {
	background: #141114 !important;
}

/* Primary nav links: white, red on hover. */
body.ka-region-us #ct-header-elementor .ct-main-menu > li > a , body.ka-region-ke #ct-header-elementor .ct-main-menu > li > a {
	color: #fff !important;
}
body.ka-region-us #ct-header-elementor .ct-main-menu > li > a:hover, body.ka-region-ke #ct-header-elementor .ct-main-menu > li > a:hover,
body.ka-region-us #ct-header-elementor .ct-main-menu > li.current-menu-item > a, body.ka-region-ke #ct-header-elementor .ct-main-menu > li.current-menu-item > a,
body.ka-region-us #ct-header-elementor .ct-main-menu > li.current-menu-ancestor > a , body.ka-region-ke #ct-header-elementor .ct-main-menu > li.current-menu-ancestor > a {
	color: #F1131A !important;
}

/* Dropdown sub-menus: dark panel, light links. */
body.ka-region-us #ct-header-elementor .ct-main-menu .sub-menu , body.ka-region-ke #ct-header-elementor .ct-main-menu .sub-menu {
	background: #1F1C21 !important;
	border-top: 2px solid #F1131A !important;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .35) !important;
}
body.ka-region-us #ct-header-elementor .ct-main-menu .sub-menu a , body.ka-region-ke #ct-header-elementor .ct-main-menu .sub-menu a {
	color: #EDEDED !important;
}
body.ka-region-us #ct-header-elementor .ct-main-menu .sub-menu a:hover , body.ka-region-ke #ct-header-elementor .ct-main-menu .sub-menu a:hover {
	color: #F1131A !important;
	background: rgba(255, 255, 255, .04) !important;
}

/* Logo wordmark: white on the dark bar (mark stays red). */
body.ka-region-us #ct-header-elementor .ka-logo-text , body.ka-region-ke #ct-header-elementor .ka-logo-text { color: #fff !important; }

/* Header icons (search, cart, hamburger): light on dark. */
body.ka-region-us #ct-header-elementor .ct-header-search-form .search-field , body.ka-region-ke #ct-header-elementor .ct-header-search-form .search-field {
	background: rgba(255, 255, 255, .08) !important;
	border-color: rgba(255, 255, 255, .18) !important;
	color: #fff !important;
}
body.ka-region-us #ct-header-elementor .ct-header-search-form .search-submit, body.ka-region-ke #ct-header-elementor .ct-header-search-form .search-submit,
body.ka-region-us #ct-header-elementor .ct-icon-hidden-sidebar .item--inner span, body.ka-region-ke #ct-header-elementor .ct-icon-hidden-sidebar .item--inner span,
body.ka-region-us #ct-header-elementor .elementor-menu-cart__toggle_button , body.ka-region-ke #ct-header-elementor .elementor-menu-cart__toggle_button {
	color: #fff !important;
}
body.ka-region-us #ct-header-elementor .ct-icon-hidden-sidebar .item--inner span, body.ka-region-ke #ct-header-elementor .ct-icon-hidden-sidebar .item--inner span,
body.ka-region-us #ct-header-elementor .ct-icon-hidden-sidebar .item--inner span::before, body.ka-region-ke #ct-header-elementor .ct-icon-hidden-sidebar .item--inner span::before,
body.ka-region-us #ct-header-elementor .ct-icon-hidden-sidebar .item--inner span::after , body.ka-region-ke #ct-header-elementor .ct-icon-hidden-sidebar .item--inner span::after {
	background: #fff !important;
}