/* Kaido shared site chrome (5 Nov 2026).
   One header (nav.nav.kc) and one footer (footer.kc-foot) on every page except the homepage,
   which carries the same markup with its own inline CSS. These rules reproduce the homepage
   look whatever the host page's own CSS says: each chrome element is first reverted to
   browser defaults, then restyled. Load this file LAST in <head>.
   Markup lives in src/_includes/partials/{header,footer}-{en,ar}.njk; static pages are
   synced from those partials by tools/sync_chrome.py. */

/* 0. Scope tokens and reset */
nav.nav.kc,footer.kc-foot{
  --kc-ink:#111110;--kc-body2:#55524C;--kc-soft:#6F6A62;--kc-line:#ECE9E2;--kc-tint:#FAF9F6;
  --kc-copper:#E8500A;--kc-copper-d:#C94208;
  --line:var(--kc-line);--ink:var(--kc-ink);
  all:revert;box-sizing:border-box;margin:0;padding:0;
  font-family:var(--kd-body,'Inter',system-ui,-apple-system,'Segoe UI',sans-serif);
  font-size:16.5px;font-weight:400;font-style:normal;line-height:1.65;color:var(--kc-body2);
  text-align:start;-webkit-font-smoothing:antialiased;font-optical-sizing:auto;
  text-rendering:auto;-webkit-text-size-adjust:auto;text-size-adjust:auto}
html[lang="ar"] nav.nav.kc,html[lang="ar"] footer.kc-foot{font-family:'Readex',Geist,system-ui,sans-serif;line-height:1.85}
nav.nav.kc :where(*:not(svg,svg *)),footer.kc-foot :where(*:not(svg,svg *)){all:revert-layer;margin:0;padding:0;box-sizing:border-box}
nav.nav.kc a,footer.kc-foot a{text-decoration:none;color:inherit}
nav.nav.kc img,footer.kc-foot img{display:block;max-width:100%}
nav.nav.kc button{font-family:inherit}
nav.nav.kc .js-cal,footer.kc-foot .js-cal{cursor:pointer}
nav.nav.kc .wrap,footer.kc-foot .wrap{display:block;max-width:1120px;width:auto;margin:0 auto;padding:0 24px}

/* 1. Header */
nav.nav.kc{display:block;position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:0;border-bottom:1px solid var(--kc-line)}
nav.nav.kc .nav-in{display:flex;align-items:center;height:72px;gap:36px}
nav.nav.kc .nav-in img{height:25px}
nav.nav.kc .links{display:flex;gap:22px;white-space:nowrap;margin-left:auto;font-size:15px;font-weight:500;color:var(--kc-body2)}
html[dir="rtl"] nav.nav.kc .links{margin-left:0;margin-right:auto}
nav.nav.kc .links a{white-space:nowrap}
nav.nav.kc .links a:hover{color:var(--kc-ink)}
nav.nav.kc .hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:1px solid var(--kc-line);border-radius:10px;background:#fff;cursor:pointer;padding:0 11px;margin-left:12px}
nav.nav.kc .hamburger span{display:block;height:2px;width:100%;background:var(--kc-ink);border-radius:2px;transition:transform .25s,opacity .2s}
nav.nav.kc .hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
nav.nav.kc .hamburger.active span:nth-child(2){opacity:0}
nav.nav.kc .hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
nav.nav.kc .mobmenu{display:none;position:fixed;top:72px;left:0;right:0;background:#fff;border-bottom:1px solid var(--kc-line);box-shadow:0 22px 44px -22px rgba(17,17,16,.28);padding:12px 20px 22px;z-index:49;flex-direction:column;gap:2px;max-height:calc(100dvh - 72px);overflow-y:auto}
nav.nav.kc .mobmenu.open{display:flex}
nav.nav.kc .mobmenu a{padding:14px 6px;font-size:16.5px;font-weight:500;color:var(--kc-ink);border-bottom:1px solid var(--kc-tint)}
nav.nav.kc .mobmenu a:last-of-type{border-bottom:none}
nav.nav.kc .mobmenu a.mm-cta{margin-top:14px;background:var(--kc-copper);color:#fff;border-radius:12px;text-align:center;font-weight:600;border-bottom:none}
nav.nav.kc .dd{position:relative}
nav.nav.kc .dd::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);width:290px;height:22px}
nav.nav.kc .dd>span{cursor:pointer;display:inline-flex;align-items:center;gap:5px}
nav.nav.kc .dd>span::after{content:'';box-sizing:content-box;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.7}
nav.nav.kc .dd:hover>span{color:var(--kc-ink)}
nav.nav.kc .dd-menu{position:absolute;top:126%;left:50%;right:auto;transform:translateX(-50%) translateY(6px);background:#fff;border:1px solid #E4DED4;border-radius:14px;box-shadow:0 18px 50px rgba(14,14,14,.16);opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease,visibility 0s linear .22s;display:grid;min-width:0;width:min(680px,calc(100vw - 40px));grid-template-columns:repeat(4,1fr);gap:2px 20px;padding:24px 26px 20px}
nav.nav.kc .dd:hover .dd-menu,nav.nav.kc .dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition:opacity .18s ease,transform .18s ease,visibility 0s}
nav.nav.kc .mcol{display:flex;flex-direction:column;gap:1px}
nav.nav.kc .mcat{display:inline;font-size:9.5px;color:var(--kc-copper-d);margin-bottom:6px;padding:0 8px}
nav.nav.kc .mcat.mt{margin-top:14px}
nav.nav.kc .dd-menu a{display:block;padding:7px 8px;border-radius:8px;font-size:13.5px;color:#4A443E;white-space:nowrap;font-weight:500}
nav.nav.kc .dd-menu a:hover{background:var(--kc-tint);color:var(--kc-ink)}
nav.nav.kc .dd-menu .mall{grid-column:1/-1;margin-top:10px;border-top:1px solid var(--kc-line);padding-top:13px;font-weight:600;color:var(--kc-copper-d);font-size:13px}
nav.nav.kc .dd-menu .mall:hover{color:var(--kc-copper)}
nav.nav.kc .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 22px;border:0;font-size:14px;font-weight:600;line-height:1.65;white-space:nowrap;transition:.22s cubic-bezier(.2,.7,.2,1);box-shadow:0 6px 20px -6px rgba(232,80,10,.45)}
nav.nav.kc .btn:hover{transform:translateY(-1px)}
html[lang="ar"] nav.nav.kc .btn{line-height:1.85}

/* 2. Footer */
footer.kc-foot{display:block;background:var(--kc-tint);border:0;border-top:1px solid var(--kc-line);padding:70px 0 30px;margin:0}
footer.kc-foot .fg{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:44px;border-bottom:1px solid var(--kc-line)}
footer.kc-foot .fb img{height:24px;margin-bottom:16px}
footer.kc-foot .fb p{display:block;font-size:14px;max-width:280px}
footer.kc-foot .fsoc{display:flex;gap:10px;margin-top:18px}
footer.kc-foot .fsoc a{width:38px;height:38px;border:1px solid var(--kc-line);background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--kc-body2)!important;transition:.2s}
footer.kc-foot .fsoc a:hover{border-color:var(--kc-copper);color:var(--kc-copper)!important}
/* blog.css forces footer link colours with !important; keep the homepage values */
footer.kc-foot .fcol a,footer.kc-foot .fbot a{color:inherit!important}
footer.kc-foot .fcol a:hover,footer.kc-foot .fbot a:hover{color:var(--kc-ink)!important}
footer.kc-foot .fcol h4{color:var(--kc-soft)!important}
footer.kc-foot .fcol h4{display:block;font-weight:500;color:var(--kc-soft);margin-bottom:16px}
footer.kc-foot .fcol ul{list-style:none;display:grid;gap:11px;font-size:14.5px}
footer.kc-foot .fcol li{display:list-item}
footer.kc-foot .fcol a:hover{color:var(--kc-ink)}
footer.kc-foot .fcol .dir{color:var(--kc-copper-d);font-weight:600}
footer.kc-foot .fbot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:24px;padding-top:26px;font-size:13px;color:var(--kc-soft)}

/* 3. Responsive (same breakpoints as the homepage) */
@media (max-width:920px){
  nav.nav.kc .links{display:none}
  nav.nav.kc .hamburger{display:flex}
  footer.kc-foot .fg{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:600px){
  nav.nav.kc .wrap,footer.kc-foot .wrap{padding:0 18px}
  footer.kc-foot .fg{grid-template-columns:1fr;gap:30px}
  nav.nav.kc .btn{padding:10px 16px;font-size:13px}
  /* phone tap targets for footer links, as mobile-polish.css gives the homepage */
  footer.kc-foot a{display:inline-block;padding-top:4px;padding-bottom:4px;min-height:24px;line-height:1.3}
  footer.kc-foot .fsoc a{display:flex}
  /* Deliberate: 44px tap targets on phones (the homepage has 41px and a squeezed 26px hamburger) */
  nav.nav.kc .navbtn{min-height:44px}
  nav.nav.kc .hamburger{flex-shrink:0;margin-left:0}
}
@media (prefers-reduced-motion:reduce){nav.nav.kc *,footer.kc-foot *{transition:none!important;animation:none!important}}

/* 4. Body-text links are underlined, so they read as links without relying on colour (WCAG 1.4.1).
   Applies to links inside running text only; buttons and the shared header/footer are excluded. */
:is(p,dd,td,blockquote,figcaption,.prose li,article li,.faq li) a:not(.btn):not([class*="btn"]):not(.cta):not(.wa):not(.kc-a):not(nav.nav.kc *):not(footer.kc-foot *){text-decoration-line:underline;text-underline-offset:3px;text-decoration-thickness:1px}