/*
Theme Name: Brand Circle (Hello Elementor Child)
Description: Coded header and footer for Brand Circle Kenya. Child of Hello Elementor. No scripts, no builder templates.
Template: hello-elementor
Version: 1.1.7
Text Domain: brand-circle
*/
:root{--bc-brand:#24376E;--bc-ink:var(--e-global-color-primary,#282D3C);--bc-accent:var(--e-global-color-accent,#2BA543);--bc-line:#e3e6ec;--bc-hh:76px}
body{margin:0}
/* ---------- HEADER ---------- */
.bch{position:sticky;top:0;z-index:999;background:#fff;border-bottom:1px solid var(--bc-line);font-family:inherit}
.admin-bar .bch{top:32px}
.bch-in{max-width:1240px;margin:0 auto;padding:0 clamp(14px,4vw,32px);min-height:var(--bc-hh);display:flex;align-items:center;gap:20px}
.bch-logo{display:flex;align-items:center;flex:0 0 auto;font-weight:700;font-size:1.25rem;color:var(--bc-brand);text-decoration:none}
.bch-logo img{display:block;max-height:46px;width:auto}
.bch-toggle{position:absolute;opacity:0;pointer-events:none}
.bch-burger{display:flex;margin-left:auto;width:46px;height:46px;align-items:center;justify-content:center;border:1px solid var(--bc-line);border-radius:10px;cursor:pointer}
.bch-burger span,.bch-burger span::before,.bch-burger span::after{display:block;width:20px;height:2px;background:var(--bc-brand);content:"";position:relative;transition:.2s}
.bch-burger span::before{position:absolute;top:-6px}.bch-burger span::after{position:absolute;top:6px}
.bch-toggle:focus-visible+.bch-burger{outline:2px solid var(--bc-accent);outline-offset:2px}
.bch-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--bc-line);padding:8px clamp(14px,4vw,32px) 18px;max-height:calc(100vh - var(--bc-hh));overflow:auto}
.bch-toggle:checked~.bch-nav{display:block}
.bch-nav ul{list-style:none;margin:0;padding:0}
.bch-nav a{display:flex;align-items:center;gap:10px;padding:12px 4px;color:var(--bc-ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--bc-line)}
.bch-nav a:hover,.bch-nav .current-menu-item>a{color:var(--bc-accent)}
.bch-nav .sub-menu{padding-left:18px}
.bch-nav .sub-menu a{font-weight:500;font-size:.95em}
.bch-cta{display:flex;align-items:center;justify-content:center;margin-top:14px;padding:.8em 1.6em;border-radius:999px;background:var(--bc-accent);color:#fff!important;font-weight:700;text-decoration:none}
/* menu icons (inline SVG masks, no font) */
.bc-ico-link::before,.bch-nav a::before,.bcf a::before{content:"";flex:0 0 18px;width:18px;height:18px;background:currentColor;opacity:.75;-webkit-mask:var(--i,var(--i-dot)) center/contain no-repeat;mask:var(--i,var(--i-dot)) center/contain no-repeat}
:root{--i-dot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
--i-home:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8M5 10v10h14V10'/%3E%3C/svg%3E");
--i-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7v.01'/%3E%3C/svg%3E");
--i-brief:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 012-2h2a2 2 0 012 2v2'/%3E%3C/svg%3E");
--i-trend:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8M15 7h6v6'/%3E%3C/svg%3E");
--i-users:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c0-3.5 3-6 6.5-6s6.5 2.5 6.5 6'/%3E%3C/svg%3E");
--i-news:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h14v16H5zM9 8h6M9 12h6M9 16h4'/%3E%3C/svg%3E");
--i-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
--i-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 018 0v3'/%3E%3C/svg%3E")}
a[href*="bc-home"]{--i:var(--i-home)}a[href*="about"]{--i:var(--i-info)}a[href*="bc-services"]{--i:var(--i-brief)}a[href*="market-entry"]{--i:var(--i-trend)}a[href*="workforce"]{--i:var(--i-users)}a[href*="/blog"]{--i:var(--i-news)}a[href*="contact"]{--i:var(--i-mail)}a[href*="privacy"]{--i:var(--i-lock)}
@media(min-width:1025px){
.bch-burger{display:none}
.bch-nav{display:flex;position:static;border:0;padding:0;max-height:none;overflow:visible;margin-left:auto;align-items:center;gap:6px}
.bch-nav>ul{display:flex;gap:2px}
.bch-nav>ul>li{position:relative}
.bch-nav a{border:0;padding:10px 12px;border-radius:8px;white-space:nowrap}
.bch-nav a::before{flex-basis:16px;width:16px;height:16px}
.bch-nav .sub-menu{display:none;position:absolute;left:0;top:100%;min-width:320px;background:#fff;border:1px solid var(--bc-line);border-radius:12px;box-shadow:0 14px 30px rgba(0,0,0,.12);padding:8px}
.bch-nav li:hover>.sub-menu,.bch-nav li:focus-within>.sub-menu{display:block}
.bch-nav .sub-menu a{white-space:normal}
.bch-cta{margin:0 0 0 10px}
}
/* ---------- FOOTER ---------- */
.bcf{background:var(--bc-ink);color:rgba(255,255,255,.82);margin-top:40px;font-family:inherit}
.bcf a{color:inherit;text-decoration:none}.bcf a:hover{color:#fff}
.bcf-in{max-width:1240px;margin:0 auto;padding:48px clamp(14px,4vw,32px) 24px;display:grid;gap:32px}
.bcf h2{color:#fff;font-size:1rem;margin:0 0 14px;text-transform:uppercase;letter-spacing:.1em}
.bcf ul{list-style:none;margin:0;padding:0}
.bcf li{margin:0 0 8px}
.bcf li a,.bcf-c a,.bcf-c span{display:flex;align-items:center;gap:10px}
.bcf-brand p{max-width:34ch}
.bcf-soc{display:flex;gap:10px;margin-top:16px}
.bcf-soc a{width:40px;height:40px;border:1px solid rgba(255,255,255,.3);border-radius:50%;display:flex;align-items:center;justify-content:center}
.bcf-soc a:hover{background:var(--bc-accent);border-color:var(--bc-accent)}
.bcf-soc svg{width:18px;height:18px;fill:#fff}
.bcf-c svg{width:18px;height:18px;flex:0 0 18px;stroke:var(--bc-accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bcf-c li{display:block}
.bcf-bar{border-top:1px solid rgba(255,255,255,.15);max-width:1240px;margin:0 auto;padding:18px clamp(14px,4vw,32px);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:.9em}
.bcf-bar ul{display:flex;gap:18px}.bcf-bar li{margin:0}
@media(min-width:700px){.bcf-in{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.bcf-in{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}
@media(max-width:781px){.admin-bar .bch{top:46px}}

/* ---------- Hide Hello duplicate page title on pages ---------- */
.page .page-header{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Layout variables (change in Customizer: Brand Circle Layout) ---------- */
:root{--bch-font:Arial,Helvetica,sans-serif;--bch-case:uppercase;--bch-size:13px;--bch-pad:14px;--bc-width:1350px}
.bch-in{max-width:var(--bc-width);padding-top:6px;padding-bottom:var(--bch-pad)}
.bch-nav a,.bch-cta{font-family:var(--bch-font);text-transform:var(--bch-case);font-size:var(--bch-size);letter-spacing:.04em}
@media(min-width:782px){.bch-nav a{padding:10px 9px}}

/* ---------- One width for every page: matches Workforce, still fluid on small screens ---------- */
body .bc-page{--bc-maxw:var(--bc-width,1350px);max-width:min(100%,var(--bc-width,1350px));margin-left:auto;margin-right:auto}
.elementor-widget:has(.bc-page){width:100%!important;max-width:100%!important;margin-left:auto;margin-right:auto}
.e-con:has(.bc-page){--content-width:100%;--width:100%;--flex-direction:column;align-items:stretch;justify-content:flex-start}
.e-con:has(.bc-page)>.e-con-inner{max-width:100%!important;width:100%}

/* ---------- Old Optive banner: keep its H1 for SEO, hide the big grey block ---------- */
[data-elementor-type="wp-page"]>.e-con:first-child:has(h1.elementor-heading-title),
[data-elementor-type="wp-page"]>.elementor-section:first-child:has(h1.elementor-heading-title){position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;border:0!important}
body:has([data-elementor-type="wp-page"]>.e-con:first-child h1.elementor-heading-title) .page-header{display:none!important}

/* ---------- Home hero slider: boxed and rounded like the sections below it ---------- */
.e-con:has(>.elementor-widget-html .bc-hs),.e-con:has(>.e-con-inner>.elementor-widget-html .bc-hs){--content-width:100%;padding:24px clamp(14px,3vw,32px) 0!important}
.elementor-widget:has(.bc-hs){width:100%!important;max-width:100%!important}
body .bc-hs{max-width:var(--bc-width,1350px);margin:0 auto 18px;border-radius:20px;border:1px solid var(--bc-line,#dfe2e6)}

/* ---------- Footer: smaller, tighter link text ---------- */
.bcf li{margin:0 0 3px}
.bcf li a,.bcf-c a,.bcf-c span{font-size:.8rem;line-height:1.35;gap:7px}
.bcf li a::before{flex-basis:12px;width:12px;height:12px}
.bcf-c svg{width:14px;height:14px;flex-basis:14px}
.bcf-brand p{font-size:.82rem;line-height:1.5}
.bcf h2{margin-bottom:10px}
.bcf-bar,.bcf-bar a{font-size:.78rem}

/* Partners strip: bluish-green gradient band, white tile behind the logos, greyscale until hover */
.bc-partners{background:linear-gradient(125deg,#24376E 0%,#1c6a86 52%,#2BA543 135%)!important;border:0!important;color:#fff}
.bc-sec.bc-partners .bc-acc{color:#c9f2d3!important}
.bc-sec.bc-partners h4{color:#fff!important}
.bc-ptile{max-width:1040px;margin:26px auto 0;background:rgba(255,255,255,.96);border-radius:18px;padding:clamp(14px,3vw,30px);box-shadow:0 10px 30px rgba(0,0,0,.18);overflow-x:auto;-webkit-overflow-scrolling:touch}
.bc-ptile img{display:block;width:100%;min-width:560px;height:auto;filter:grayscale(1);mix-blend-mode:multiply;transition:filter .3s}
.bc-ptile:hover img,.bc-ptile:focus-within img{filter:none}
@media(prefers-reduced-motion:reduce){.bc-ptile img{transition:none}}

/* Fonts: names come from Appearance > Customize > Brand Circle Layout (default Fraunces for headings, IBM Plex Sans for body).
   The fonts themselves must be installed (Custom Fonts, Elementor or a font plugin). Blank setting = theme font. */
body,.bch,.bcf,.bc-page,.bc-page input,.bc-page select,.bc-page textarea,.bc-page button{font-family:var(--bc-body-font,inherit)}
h1,h2,h3,h4,h5,h6,.bc-page :is(h1,h2,h3,h4,h5,h6),.bcf :is(h2,h3,h4){font-family:var(--bc-head-font,inherit)}
.bc-page h2.bc-acc,.bcf h2{font-family:var(--bc-body-font,inherit)}