/* ============================================================
   POS Specialists Help Center - house brand
   Matched to posspecialists.com, August 2026
   Tokens: blue #262AFF | ink #0C0C0C | body #3D4250
           grey #F9F9F9 | hairline #E8E8E8 | radius 20px
   Styling only. Nothing here touches articles, categories,
   permissions or URLs.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

:root{
  --pos-blue:#262AFF;
  --pos-blue-dk:#1A1ECC;
  --pos-blue-lt:#EDEEFF;
  --pos-ink:#0C0C0C;
  --pos-body:#3D4250;
  --pos-grey:#F9F9F9;
  --pos-line:#E8E8E8;
  --pos-r:20px;
  --pos-font:"Poppins","Century Gothic",Futura,"Avenir Next",-apple-system,"system-ui","Segoe UI",Roboto,sans-serif;
}

/* ---- 1. Typography ---------------------------------------- */
#container,
#container :not(i):not(em):not([class*="ico"]):not([class*="Icon"]):not([class*="icn"]){
  font-family:var(--pos-font) !important;
}
#container{ color:var(--pos-body); }
#container h1,#container h2,#container h3,
#container h4,#container h5,#container h6{
  color:var(--pos-ink) !important;
  font-weight:800 !important;
  letter-spacing:-.01em;
}

/* ---- 2. Brand utilities the theme reuses everywhere -------- */
.commonStyle__zt3BrandBg{ background-color:var(--pos-blue) !important; }
.commonStyle__zt3Link,
.commonStyle__zt3Brand{ color:var(--pos-blue) !important; }
.commonStyle__zt3BrandFill{ fill:var(--pos-blue) !important; }
#container a:hover{ color:var(--pos-blue-dk) !important; }

/* ---- 3. Top navigation bar -------------------------------- */
#navBar.Header__navbar{
  background:#fff !important;
  border-bottom:1px solid var(--pos-line) !important;
  box-shadow:none !important;
}
#navBar .Header__container{ max-width:1180px !important; }
.Header__logo img{ max-height:40px !important; width:auto !important; }

.Header__tabs__link,
.LoginDetail__tabLink{
  color:var(--pos-ink) !important;
  font-weight:600 !important;
  font-size:15px !important;
}
.Header__tabsTab:hover .Header__tabs__link,
.LoginDetail__tabLink:hover{ color:var(--pos-blue) !important; }
.Header__tabsTab.Header__active .Header__tabs__link{
  color:var(--pos-blue) !important;
  font-weight:700 !important;
}
.Header__tabsTab.Header__active{
  border-bottom:2px solid var(--pos-blue) !important;
}

/* Sign Up as the site's blue pill */
.LoginDetail__signup .LoginDetail__tabLink{
  background:var(--pos-blue) !important;
  color:#fff !important;
  border-radius:100px !important;
  padding:9px 20px !important;
  font-weight:700 !important;
  display:inline-block !important;
  line-height:1 !important;
}
.LoginDetail__signup .LoginDetail__tabLink:hover{
  background:var(--pos-blue-dk) !important;
  color:#fff !important;
}

/* ---- 4. Hero ----------------------------------------------
   The nav bar overlays the hero in this theme, so the top
   padding has to clear it (85px nav + breathing room).       */
#headerContent.Header__searchSection{
  background-image:radial-gradient(rgba(38,42,255,.14) 1.1px, transparent 1.2px) !important;
  background-size:22px 22px !important;
  background-color:#fff !important;
  background-repeat:repeat !important;
  padding:152px 20px 80px !important;
  border-bottom:1px solid var(--pos-line) !important;
}
@media (max-width:767px){
  #headerContent.Header__searchSection{ padding:120px 16px 56px !important; }
}
#headerContent .Header__container{ max-width:860px !important; margin:0 auto !important; }
#headerContent .Header__searchTitle,
#headerContent .Header__searchTitle b{
  color:var(--pos-ink) !important;
  font-size:clamp(26px,3.2vw,40px) !important;
  font-weight:800 !important;
  letter-spacing:-.015em !important;
  line-height:1.14 !important;
  margin:0 !important;
}
/* second title line reads as a subhead, not a second headline */
#headerContent .Header__searchTitle + .Header__searchTitle,
#headerContent .Header__searchTitle + .Header__searchTitle b{
  color:var(--pos-blue) !important;
  font-size:clamp(16px,1.6vw,21px) !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  margin:10px 0 0 !important;
}
#headerContent .Header__description{
  color:var(--pos-body) !important;
  font-size:16px !important;
  font-weight:500 !important;
  margin:16px 0 26px !important;
}

/* ---- 5. Search field -------------------------------------- */
.SearchContainer__globalSearch input{
  border:1px solid var(--pos-line) !important;
  border-right:0 !important;
  border-radius:100px 0 0 100px !important;
  height:54px !important;
  padding:0 22px !important;
  font-size:15px !important;
  color:var(--pos-ink) !important;
  box-shadow:0 3px 14px rgba(12,12,12,.06) !important;
}
.SearchContainer__searchIcon{
  background:var(--pos-blue) !important;
  border-radius:0 100px 100px 0 !important;
  width:60px !important;
  height:54px !important;
}
.SearchContainer__searchIcon:hover{ background:var(--pos-blue-dk) !important; }
#searchContainer2 .SearchContainer__globalSearch input{ height:42px !important; }
#searchContainer2 .SearchContainer__searchIcon{ height:42px !important; width:48px !important; }

/* ---- 6. Home tiles ---------------------------------------- */
.ContentBox__boxInnerHome{
  background:#fff !important;
  border:1px solid var(--pos-line) !important;
  border-radius:var(--pos-r) !important;
  padding:34px 26px !important;
  box-shadow:none !important;
  transition:border-color .16s ease, transform .16s ease;
}
.ContentBox__boxInnerHome:hover{
  border-color:var(--pos-blue) !important;
  transform:translateY(-2px);
}
.ContentBox__headerMid a{
  color:var(--pos-ink) !important;
  font-weight:800 !important;
  font-size:18px !important;
}
.ContentBox__headerMid a:hover{ color:var(--pos-blue) !important; }
.ContentBox__indexIcon svg path{ fill:var(--pos-blue) !important; }

/* ---- 7. Section headings (Popular / Recent) --------------- */
.ListHeader__header2{
  color:var(--pos-ink) !important;
  font-weight:800 !important;
  font-size:17px !important;
}
.ListHeader__listIcon2 svg path{ fill:var(--pos-blue) !important; }
.ListHeader__description{ color:var(--pos-body) !important; }

/* ---- 8. Article lists ------------------------------------- */
.ContentList__topicList{ padding:9px 0 !important; }
.ContentList__listLink{
  color:var(--pos-blue) !important;
  font-weight:500 !important;
  font-size:15px !important;
}
.ContentList__listLink:hover{ text-decoration:underline !important; }
.ContentList__documentIcon svg path{ fill:#9AA0AE !important; }

/* ---- 9. Knowledge Base category cards --------------------- */
.KbSubCategoryContainer__contentList{
  background:#fff !important;
  border:1px solid var(--pos-line) !important;
  border-radius:var(--pos-r) !important;
  padding:22px 22px 16px !important;
  transition:border-color .16s ease;
}
.KbSubCategoryContainer__contentList:hover{ border-color:var(--pos-blue) !important; }
.KbSubCategoryContainer__contentList .ListHeader__header2 a,
.ListHeader__linkText{
  color:var(--pos-ink) !important;
  font-weight:800 !important;
}
.ViewMore__viewmore,
.ViewMore__viewmore a{
  color:var(--pos-blue) !important;
  font-weight:700 !important;
}

/* ---- 10. Buttons ------------------------------------------ */
#container button,
.Button__btnFont{
  font-family:var(--pos-font) !important;
  border-radius:100px !important;
  font-weight:700 !important;
  font-size:14px !important;
  padding:13px 28px !important;
  border:0 !important;
}

/* ---- 11. Footer CTA band (mirrors the site's blue band) ---- */
.Footer__footerBg{
  background:var(--pos-blue) !important;
  padding:66px 20px !important;
  border-top:0 !important;
}
.Footer__footerQus{
  color:#fff !important;
  font-size:clamp(22px,2.6vw,32px) !important;
  font-weight:800 !important;
  line-height:1.15 !important;
}
.Footer__footerDescription,
.Footer__footerDescription *{
  color:rgba(255,255,255,.92) !important;
  font-size:15px !important;
}
.Button__footerBtn{
  background:#fff !important;
  color:var(--pos-blue) !important;
}
.Button__footerBtn:hover{ background:var(--pos-blue-lt) !important; color:var(--pos-blue) !important; }

/* ---- 12. Breadcrumb bar + its search ---------------------- */
.AppContainer__breadCrumbs{
  border-bottom:1px solid var(--pos-line) !important;
  background:#fff !important;
}
.SearchContainer__searchBox{
  border:1px solid var(--pos-line) !important;
  border-radius:100px !important;
  background:#fff !important;
}
.SearchContainer__searchBox input{
  border:0 !important;
  box-shadow:none !important;
  border-radius:100px !important;
  height:40px !important;
}

/* ---- 13. Sprite icons that carry the old orange ----------- */
#container .Icon__brand,
#container .Icon__brand use,
#container .Icon__brand path{
  fill:var(--pos-blue) !important;
  color:var(--pos-blue) !important;
}
.Header__tabsTab.Header__active{ color:var(--pos-blue) !important; }

/* ---- 14. Genius mark in the hero --------------------------
   Home page only - #headerContent renders nowhere else.
   Self-hosted on posspecialists.com. The PNG carries its own
   padding, so the box is sized for the artwork, not the ink. */
#headerContent .Header__container::before{
  content:"";
  display:block;
  width:172px;
  height:97px;
  margin:-24px auto 16px;
  background:url('https://posspecialists.com/wp-content/uploads/2026/08/brand-genius-logo.png') center center / contain no-repeat;
}
@media (max-width:767px){
  #headerContent .Header__container::before{
    width:132px; height:74px; margin:-10px auto 6px;
  }
}

/* ---- 15. Last of the old navy ----------------------------- */
.BreadCrumbs__breadCrumbsLink,
.commonStyle__zt3breadCrumb{ color:var(--pos-blue) !important; }
.CustomizeContainer__aPlus,
.CustomizeContainer__aPlus svg,
.CustomizeContainer__aPlus svg use,
.CustomizeContainer__aPlus svg path{
  color:var(--pos-ink) !important;
  fill:var(--pos-ink) !important;
}

/* ---- 16. Misc --------------------------------------------- */
.AppContainer__backToTop{ border-radius:100px !important; }