/* ===== Tokens ===== */
:root{
  --kps-hero:#0B1A2A;
  --kps-header-base:#07121E;
  --kps-header-sticky:#040A13;
  --kps-navy-2:#0E2438;

  --kps-white:#fff;
  --kps-dim:#CFE2FF;

  --kps-radius:12px;
  --kps-pad:20px;
  --kps-max:1280px;
  --kps-font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --color-brand:#187EFF;
  --color-brand-2:#0445C5;
  --brand-accent-contrast:#fff;

  /* Header/profile avatars only */
  --kps-avatar-size:36px;
  --kps-avatar-fill:var(--color-brand);
  --kps-avatar-fill-hover:var(--color-brand-2);
  --kps-avatar-ring:#fff;
  --kps-avatar-text:#fff;
}

/* Base + container */
body{font-family:var(--kps-font)}
.KPS-Container{max-width:var(--kps-max);margin:0 auto;padding:0 var(--kps-pad)}

/* ---------- Header ---------- */
.KPS-Header,
.Header__navbar,
#navBar{
  background: var(--kps-header-base) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1000;
}
.KPS-Header .Header__container{display:flex;align-items:center;gap:24px;padding:12px var(--kps-pad)}
.KPS-Brand{display:flex;align-items:center;gap:10px}
.KPS-Logo{height:40px;width:auto;display:block}
.KPS-Header .Header__name,
.KPS-Header .Header__logoText,
.KPS-Header .Header__brandName{display:none !important}

/* Sticky header darker */
#navBar.Header__sticky,
#navBar.Header__fixed,
#navBar.is-sticky,
.Header__navbar.Header__sticky,
.Header__navbar.Header__fixed,
.Header__navbar.is-sticky,
.Header__navbar.sticky,
body.Header__sticky #navBar,
body.headerSticky #navBar{
  background: var(--kps-header-sticky) !important;
  border-bottom-color: rgba(255,255,255,.10) !important;
}

/* Desktop nav */
.KPS-Nav{margin-left:auto}
.KPS-NavList{display:flex;align-items:center;gap:18px;list-style:none;margin:0;padding:0}
.KPS-NavItem, .KPS-NavItem a{color:var(--kps-white);text-decoration:none;font-weight:600;opacity:.9;cursor:pointer}
.KPS-NavItem:hover, .KPS-NavItem a:hover{opacity:1;color:var(--kps-dim);text-decoration:underline}

/* Header icons always visible */
#navBar svg, #navBar svg *{fill:var(--kps-white) !important; stroke:var(--kps-white) !important}
#menuBox, #menuBox::before, #menuBox::after{background:var(--kps-white) !important}
.KPS-MenuIcon{background:transparent;border:0;color:var(--kps-white);margin-left:12px}

/* ---------- Our mobile panel ---------- */
.KPS-MobileNav{
  display:none;
  position:absolute;
  left:0; right:0;
  top:100%;
  background: var(--kps-header-sticky);
  border-top:1px solid rgba(255,255,255,.1);
  z-index: 1002;
}
.KPS-MobileList{
  list-style:none; margin:0; padding:12px 16px;
  display:flex; flex-direction:column; gap:12px;
}
.KPS-MobileList a, .KPS-MobileList li{
  color: var(--kps-white) !important;
  text-decoration:none; font-weight:600;
}

/* Show panel when burger is open (and fallback class some themes use) */
@media (max-width:900px){
  .KPS-NavList{ display:none; }                   /* hide desktop list */
  .KPS-Header:has(#menuIconContainer[aria-expanded="true"]) .KPS-MobileNav,
  .Header__navbar:has(#menuIconContainer[aria-expanded="true"]) .KPS-MobileNav,
  .KPS-Header.Header__openMenu .KPS-MobileNav,
  body.Header__openMenu .KPS-MobileNav{
    display:block !important;
  }
}

/* ---------- Hero (welcome/search) ---------- */
#headerContent,
.KPS-Hero,
.KPS-Hero.Header__searchSection,
.Header__searchSection{
  background: var(--kps-hero) !important;
  padding-top: 150px !important;
  padding-bottom: 90px !important;
}
#headerContent .KPS-Container,
#headerContent .Header__container{margin:0 auto !important;text-align:center !important}

#headerContent .Header__searchTitle,
.KPS-HeroTitle{
  color:var(--kps-white) !important;
  font-size:32px !important;
  font-weight:800 !important;
  margin:0 0 10px !important;
}
#headerContent .Header__description,
.KPS-HeroDesc{
  color:var(--kps-dim) !important;
  margin:0 auto 18px !important;
  max-width:860px !important;
}

/* Search bar */
.KPS-HeroSearch{max-width:900px;margin:0 auto}
.KPS-HeroSearch input[type="text"],
.KPS-HeroSearch input[type="search"],
.KPS-HeroSearch .search-field,
.KPS-HeroSearch .zd-search-input,
.KPS-HeroSearch .desk-search-field{
  height:52px !important;
  border-radius:var(--kps-radius) !important;
  padding:0 16px !important;
  font-size:16px !important;
  border:1px solid rgba(255,255,255,.25) !important;
  box-shadow:none !important;
}
#headerContent button,
#headerContent input[type="submit"],
.KPS-HeroSearch .search-btn,
.KPS-HeroSearch .zd-search-btn,
.KPS-HeroSearch .desk-search-btn,
#headerContent .Header__searchBtn{
  height:52px !important;
  border-radius:var(--kps-radius) !important;
  background:var(--kps-white) !important;
  color:var(--kps-navy-2) !important;
  font-weight:700 !important;
  border:0 !important;
  padding:0 18px !important;
}

/* Search icon: remove blue span + brand-colour icon */
[data-id="searchButton"].SearchContainer__searchBoxIcon{
  background: transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; border-radius:0 !important;
}
[data-id="searchButton"] svg, [data-id="searchButton"] svg *{
  fill: var(--color-brand) !important; stroke: var(--color-brand) !important;
}
[data-id="searchButton"]:hover svg, [data-id="searchButton"]:hover svg *{
  fill: var(--color-brand-2) !important; stroke: var(--color-brand-2) !important;
}

/* Back link */
.KPS-BackButton{
  display:inline-block; padding:8px 16px; background:#0052cc; color:#fff;
  text-decoration:none; border-radius:4px; font-weight:500; transition:background .2s;
  margin-left:12px; border:none; cursor:pointer;
}
.KPS-BackButton:hover{ background:#003d99 }
@media (max-width:640px){
  .KPS-BackButton{ padding:4px 10px; font-size:12px; border-radius:3px; margin-left:8px }
}

/* ---------- Header/profile avatars (scoped to header only) ---------- */
.Header__navbar [class*="initials"],
.Header__navbar [class*="Initials"],
.Header__navbar [class*="avatar"],
.Header__navbar [class*="Avatar"],
.Header__navbar img[class*="avatar"],
.Header__navbar .LoginDetail__profileImage{
  width: var(--kps-avatar-size) !important;
  height: var(--kps-avatar-size) !important;
  min-width: var(--kps-avatar-size) !important;
  min-height: var(--kps-avatar-size) !important;
  background: var(--kps-avatar-fill) !important;
  color: var(--kps-avatar-text) !important;
  border: 3px solid var(--kps-avatar-ring) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
}
.Header__navbar [class*="initials"]:hover,
.Header__navbar [class*="Initials"]:hover,
.Header__navbar [class*="avatar"]:hover,
.Header__navbar [class*="Avatar"]:hover{ background: var(--kps-avatar-fill-hover) !important; }

/* ---------- Category/home tiles: show full SVG, remove blue circle ---------- */
.ContentBox__indexIcon .Avatar__avatar,
.ContentBox__indexIcon .Avatar__avatar *{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.ContentBox__indexIcon .Avatar__avatarImg{
  width: 56px !important;
  height: 56px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  display: inline-block !important;
}
.ContentBox__indexIcon{ line-height:1 !important }

/* ---------- Footer (scoped so nothing else is affected) ---------- */
.KPS-SiteFooter{
  background:#fff;
  color:#24324A;
  border-top:1px solid #E7EDF5;
  padding:48px 0 24px;
  font-family:var(--kps-font);
}
.KPS-SiteFooter .KPS-Container{max-width:1280px;margin:0 auto;padding:0 20px}
.KPS-FooterGrid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:40px}
.KPS-FooterCol h4{margin:0 0 14px;font-size:16px;font-weight:700;color:#0E2438}
.KPS-FooterAbout p{margin:0 0 12px;line-height:1.7;color:#3D4B63}
.KPS-FooterEmail a{font-weight:700;color:#0E2438;text-decoration:none}
.KPS-FooterEmail a:hover{text-decoration:underline}
.KPS-FooterList{list-style:none;padding:0;margin:0}
.KPS-FooterList li{margin:8px 0}
.KPS-FooterList a{color:#3D4B63;text-decoration:none}
.KPS-FooterList a:hover{text-decoration:underline;color:#0E2438}
.KPS-FooterSocial{display:flex;gap:12px;margin-top:6px}
.kps-ico{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#F2F6FB;color:#0E2438;text-decoration:none;border:1px solid #E7EDF5}
.kps-ico:hover{background:#EAF2FF}
.KPS-FooterRule{margin:32px 0 20px;border:0;border-top:1px solid #E7EDF5}
.KPS-FooterLegal{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#5C6C82;font-size:14px}
@media (max-width:1024px){.KPS-FooterGrid{grid-template-columns:1fr 1fr;gap:28px}}
@media (max-width:640px){
  .KPS-FooterGrid{grid-template-columns:1fr}
  .KPS-FooterLegal{flex-direction:column;text-align:center}
}

/* ---------- Kill orange SVGs anywhere ---------- */
svg [stroke="#e46317" i], svg [fill="#e46317" i],
svg [stroke="#E46317" i], svg [fill="#E46317" i],
svg [stroke="#f37f20" i], svg [fill="#f37f20" i],
svg [stroke="#f08519" i], svg [fill="#f08519" i],
svg [stroke="#ff7f32" i], svg [fill="#ff7f32" i]{
  stroke: var(--color-brand) !important; fill: var(--color-brand) !important;
}

/* Optional: keep header/hero very dark like your dashboard */
.Header__navbar, .Header__searchSection{ background:#0E1116 !important; }

/* --- HAMBURGER always visible on mobile --- */
@media (max-width: 900px){
  .KPS-MenuIcon{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: transparent !important;
    border: 0 !important;
    z-index: 1003; /* above header */
  }
}

/* === MOBILE NAV: show our list when #menuBox has .Header__menuToggle === */
@media (max-width:900px){
  /* Keep the burger visible */
  .KPS-MenuIcon{
    display:inline-flex !important;
    align-items:center; justify-content:center;
    width:40px; height:40px;
    background:transparent !important; border:0 !important;
    z-index:1003;
  }

  /* Hide the desktop list by default on mobile */
  .KPS-NavList{ display:none; }

  /* When the burger is toggled (black bar shows), reveal our list */
  .KPS-Header:has(#menuBox.Header__menuToggle) .KPS-NavList,
  .Header__navbar:has(#menuBox.Header__menuToggle) .KPS-NavList{
    display:flex !important;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:12px;
    padding:12px 16px;
    background: var(--kps-header-sticky);
    border-top: 1px solid rgba(255,255,255,.1);
    z-index:1002;
  }

  .KPS-NavItem, .KPS-NavItem a{
    display:block; padding:10px 0;
    color:#fff !important; text-decoration:none;
  }

  /* Make sure header sits above page content */
  .KPS-Header, .Header__navbar { z-index:1001 !important; }
}

/* === SEARCH BUTTON: always brand blue + padding (keeps size natural) === */
[data-id="searchButton"].SearchContainer__searchIcon,
[data-id="searchButton"].commonStyle__zt3BrandBg{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 8px !important;   /* adds breathing room on the right */
  border-radius: 0 !important;
}
[data-id="searchButton"]{
  display:inline-flex; align-items:center; justify-content:center;
}
[data-id="searchButton"] svg,
[data-id="searchButton"] svg *{
  fill: var(--color-brand) !important;      /* default blue */
  stroke: var(--color-brand) !important;
}
[data-id="searchButton"]:hover svg,
[data-id="searchButton"]:hover svg *{
  fill: var(--color-brand-2) !important;    /* darker on hover */
  stroke: var(--color-brand-2) !important;
}

/* Hide the old text but keep the element */
#title_field_layoutId {
  font-size: 0 !important; /* visually hide text */
}

/* Add your new text before */
#title_field_layoutId::before {
  content: "I Am A…"; /* <-- change this to your preferred wording */
  font-size: 16px;      /* reset to readable */
  font-weight: 600;
  color: #0E2438;       /* your header/navy tone */
}