/* ============================================
   BATCHLY HELP CENTER – ZOHO DESK CSS
   Elegant theme restore with clickable article previews
   ============================================ */

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

/* GLOBAL */
body,
html {
  background: #FFFFFF !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: #1E1637 !important;
  -webkit-font-smoothing: antialiased !important;
}

[class*="portalContainer"],
[class*="AppContainer"],
[class*="portal_"],
#portal_main,
#main,
#container,
#middle_container,
[id*="middle_container"] {
  background: #FFFFFF !important;
}

a {
  text-decoration: none !important;
}

/* NAVBAR */
.Header__navbar {
  background: #1E1637 !important;
  border-bottom: 1px solid rgba(162,136,248,0.08) !important;
  box-shadow: none !important;
}

.Header__navbar .Header__container {
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 36px !important;
  display: flex !important;
  align-items: center !important;
  height: 60px !important;
}

.Header__logo a {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

.Header__logo img {
  height: 43px !important;
  width: auto !important;
}

.Header__name {
  display: none !important;
}

.Header__clBoth {
  display: none !important;
}

.Header__menuTab {
  margin-left: auto !important;
}

.Header__menuList {
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.Header__tabsTab a,
.Header__tabsTab span {
  display: block !important;
  padding: 7px 16px !important;
  color: rgba(255,255,255,0.55) !important;
  text-decoration: none !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
}

.Header__tabsTab a:hover,
.Header__tabsTab span:hover {
  color: #FFFFFF !important;
  background: rgba(255,255,255,0.06) !important;
}

.Header__tabsTab.active a,
.Header__tabsTab.active span {
  color: #FFFFFF !important;
  background: rgba(162,136,248,0.15) !important;
}

/* Hide nav items we do not need */
#portal_tabsignin,
.LoginDetail__signin,
.globalSignin,
#portal_tabCommunity,
#portal_tabCases {
  display: none !important;
}

/* HERO / SEARCH */
.Header__searchSection {
  background: #1E1637 !important;
  padding: 48px 36px 56px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

.Header__searchTitle {
  font-family: 'Inter', sans-serif !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.8px !important;
  margin-bottom: 10px !important;
  text-align: center !important;
}

.Header__description {
  font-size: 15px !important;
  color: rgba(255,255,255,0.45) !important;
  margin: 0 auto 28px !important;
  text-align: center !important;
}

/* Search bar */
.Header__searchSection input,
.Header__searchSection [type="search"],
[class*="Search"] input {
  font-family: 'Inter', sans-serif !important;
  border-radius: 10px !important;
  border: 1px solid rgba(30,22,55,0.08) !important;
  box-shadow: none !important;
}

.Header__searchSection input:focus,
.Header__searchSection [type="search"]:focus,
[class*="Search"] input:focus {
  border-color: #A288F8 !important;
  box-shadow: 0 0 0 3px rgba(162,136,248,0.12) !important;
  outline: none !important;
}

/* MAIN LAYOUT */
#layoutContainer {
  max-width: 1100px !important;
  margin: 32px auto !important;
  padding: 0 36px !important;
  background: transparent !important;
}

#layoutContainer a,
#layoutContainer span,
#layoutContainer div,
#layoutContainer li,
#layoutContainer p,
#layoutContainer h2,
#layoutContainer h3,
#layoutContainer h4 {
  text-align: left !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
}

#layoutContainer a {
  color: #1E1637 !important;
  text-decoration: none !important;
  opacity: 1 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

#layoutContainer a:hover {
  color: #A288F8 !important;
}

/* CATEGORY CARDS */
[class*="KbSubCategoryContainer__contentList"] {
  background: #F9F9F9 !important;
  border: 1px solid rgba(30,22,55,0.06) !important;
  border-radius: 16px !important;
  padding: 30px 28px !important;
  margin-bottom: 20px !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 235px !important;
}

[class*="KbSubCategoryContainer__contentList"]::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #A288F8, #c4b0ff) !important;
  opacity: 0 !important;
  transition: opacity 0.2s !important;
}

[class*="KbSubCategoryContainer__contentList"]:hover {
  border-color: rgba(162,136,248,0.30) !important;
  box-shadow: 0 14px 36px rgba(30,22,55,0.08) !important;
  transform: translateY(-2px) !important;
}

[class*="KbSubCategoryContainer__contentList"]:hover::before {
  opacity: 1 !important;
}

/* Neutralise outer wrapper frame */
#subCategoryContainer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

#subCategoryContainer::before,
#subCategoryContainer::after {
  content: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Category header */
[class*="ListHeader__listHeader"],
[class*="ListHeader__listHeader2"] {
  border-bottom: none !important;
  margin-bottom: 18px !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Category title */
[class*="ListHeader__listHeader"] a,
[class*="ListHeader__listHeader"] span,
[class*="ListHeader__listHeader"] div,
[class*="ListHeader__listHeader2"] a,
[class*="ListHeader__listHeader2"] span,
[class*="ListHeader__listHeader2"] div {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1E1637 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
}

/* Icons */
.ListHeader__listIcon,
svg[class*="ListHeader__listIcon"] {
  width: 52px !important;
  height: 52px !important;
  margin-right: 18px !important;
  flex-shrink: 0 !important;
}

/* ARTICLE PREVIEWS — keep visible because cards are not clickable */
[class*="ContentList__topicList"],
[class*="contentList__topicList"] {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 10px 12px !important;
  margin: 7px 0 !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(30,22,55,0.05) !important;
  transition: all 0.12s ease !important;
  cursor: pointer !important;
}

[class*="ContentList__topicList"]:hover,
[class*="contentList__topicList"]:hover {
  background: rgba(162,136,248,0.04) !important;
  border-color: rgba(162,136,248,0.18) !important;
}

[class*="ContentList__topicList"] a,
[class*="contentList__topicList"] a {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1E1637 !important;
  line-height: 1.35 !important;
}

[class*="ContentList__topicList"] a:hover,
[class*="contentList__topicList"] a:hover {
  color: #A288F8 !important;
}

[class*="KbSubCategoryContainer__contentList"] ul,
[class*="KbSubCategoryContainer__contentList"] ol,
[class*="KbSubCategoryContainer__contentList"] [class*="ContentList"] {
  padding-left: 0 !important;
}

/* HIDE THREE-DOT MENUS */
[class*="KbSubCategoryContainer"] [class*="dot"],
[class*="KbSubCategoryContainer"] [class*="Dot"],
[class*="KbSubCategoryContainer"] [class*="more"],
[class*="KbSubCategoryContainer"] [class*="More"],
[class*="KbSubCategoryContainer"] [class*="ellipsis"],
[class*="KbSubCategoryContainer"] [class*="Ellipsis"],
[class*="KbSubCategoryContainer"] [class*="optionMenu"],
[class*="KbSubCategoryContainer"] [class*="OptionMenu"],
[class*="KbSubCategoryContainer"] [class*="option_menu"],
[class*="KbSubCategoryContainer"] [class*="ActionMenu"],
[class*="KbSubCategoryContainer"] [class*="actionMenu"],
[class*="KbSubCategoryContainer"] [class*="action_menu"],
[class*="ListHeader"] [class*="dot"],
[class*="ListHeader"] [class*="more"],
[class*="ListHeader"] [class*="ellipsis"],
[class*="ListHeader"] [class*="option"],
[class*="ListHeader"] [class*="action"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* BREADCRUMB / SEARCH BAR */
[class*="BreadCrumb"],
[class*="breadcrumb"],
[class*="Breadcrumb"] {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 14px 36px !important;
  font-size: 13px !important;
  color: #888888 !important;
}

[class*="BreadCrumb"] a,
[class*="breadcrumb"] a {
  color: #A288F8 !important;
  text-decoration: none !important;
}

[class*="searchContainer"] input,
[class*="SearchBar"] input,
[id*="global_leftpanel_search"] input {
  border: 1px solid #EEEEEE !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  background: #FFFFFF !important;
}

[class*="searchContainer"] input:focus,
[class*="SearchBar"] input:focus {
  border-color: #A288F8 !important;
  box-shadow: 0 0 0 3px rgba(162,136,248,0.10) !important;
  outline: none !important;
}

/* HIDE RECENT / POPULAR ARTICLE WIDGETS */
[data-id="recentArticles"],
[data-id="popularArticles"],
[class*="RecentArticles"],
[class*="recentArticles"],
[class*="PopularArticles"],
[class*="popularArticles"],
[id*="recentArticles"],
[id*="popularArticles"],
[id*="RecentArticles"],
[id*="PopularArticles"] {
  display: none !important;
}

li.WidgetsContainer__lftWd:has([data-id="recentArticles"]),
li.WidgetsContainer__lftWd:has([data-id="popularArticles"]),
.Feed__feed:has([data-id="recentArticles"]),
.Feed__feed:has([data-id="popularArticles"]),
div:has(> [data-id="recentArticles"]),
div:has(> [data-id="popularArticles"]) {
  display: none !important;
}

#layoutContainer [data-id="recentArticles"],
#layoutContainer [data-id="popularArticles"],
#layoutContainer [class*="Recent"],
#layoutContainer [class*="recent"],
#layoutContainer [class*="Popular"],
#layoutContainer [class*="popular"] {
  display: none !important;
}

/* ARTICLE DETAIL PAGE */
[class*="articleBody"],
[class*="ArticleBody"],
[class*="article-body"],
[class*="solnContent"],
[class*="SolnContent"] {
  max-width: 760px !important;
  margin: 32px auto !important;
  padding: 36px !important;
  background: #FFFFFF !important;
  border-radius: 16px !important;
  border: 1px solid rgba(30,22,55,0.06) !important;
  line-height: 1.75 !important;
  font-size: 15px !important;
  color: #1E1637 !important;
}

[class*="articleBody"] h1,
[class*="solnContent"] h1 {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #1E1637 !important;
  margin-bottom: 16px !important;
}

[class*="articleBody"] h2,
[class*="solnContent"] h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  margin: 28px 0 12px !important;
}

[class*="articleBody"] a,
[class*="solnContent"] a {
  color: #A288F8 !important;
}

/* FOOTER */
footer,
[role="contentinfo"],
#footerContainer,
[id*="footer"] {
  background: #1E1637 !important;
  color: rgba(255,255,255,0.50) !important;
  font-family: 'Inter', sans-serif !important;
}

footer a,
[role="contentinfo"] a {
  color: #A288F8 !important;
}

/* Hide "Still can't find an answer" */
.Footer__footerInfo,
[class*="Footer__footerInfo"] {
  display: none !important;
}

/* Footer stretch */
.Footer__footerBg {
  background: #1E1637 !important;
  min-height: 30vh !important;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .Header__navbar .Header__container {
    padding: 0 16px !important;
    height: 56px !important;
  }

  .Header__tabsTab a,
  .Header__tabsTab span {
    padding: 6px 10px !important;
    font-size: 12.5px !important;
  }

  .Header__searchSection {
    padding: 36px 16px 44px !important;
  }

  .Header__searchTitle {
    font-size: 26px !important;
  }

  #layoutContainer {
    padding: 0 16px !important;
  }

  [class*="KbSubCategoryContainer__contentList"] {
    min-height: 190px !important;
    padding: 24px 20px !important;
  }

  [class*="ListHeader__listHeader"] a,
  [class*="ListHeader__listHeader"] span,
  [class*="ListHeader__listHeader"] div,
  [class*="ListHeader__listHeader2"] a,
  [class*="ListHeader__listHeader2"] span,
  [class*="ListHeader__listHeader2"] div {
    font-size: 18px !important;
  }

  .ListHeader__listIcon,
  svg[class*="ListHeader__listIcon"] {
    width: 44px !important;
    height: 44px !important;
    margin-right: 14px !important;
  }
}

@media (max-width: 480px) {
  .Header__menuTab {
    display: none !important;
  }

  .Header__menuicon {
    display: block !important;
    margin-left: auto !important;
  }
}
/* ============================================
   Compact category cards + article links
   ============================================ */

[class*="KbSubCategoryContainer__contentList"] {
  min-height: auto !important;
  padding: 26px 26px !important;
}

[class*="ListHeader__listHeader"],
[class*="ListHeader__listHeader2"] {
  margin-bottom: 14px !important;
}

[class*="ContentList__topicList"],
[class*="contentList__topicList"] {
  padding: 9px 12px !important;
  margin: 6px 0 !important;
  border-radius: 9px !important;
}

[class*="ContentList__topicList"] a,
[class*="contentList__topicList"] a {
  font-size: 12.5px !important;
  line-height: 1.35 !important;
}

/* Make the article rows less chunky */
[class*="ContentList__topicList"] svg,
[class*="contentList__topicList"] svg,
[class*="ContentList__topicList"] [class*="Icon"],
[class*="contentList__topicList"] [class*="Icon"] {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.55 !important;
}

/* Better spacing between cards */
#subCategoryContainer {
  row-gap: 18px !important;
}

/* Hide empty whitespace under short cards where possible */
[class*="KbSubCategoryContainer__contentList"] > div:last-child {
  margin-bottom: 0 !important;
}
/* ============================================
   Wider category cards
   ============================================ */

/* Widen the main KB content area */
#layoutContainer,
#subCategoryContainer {
  max-width: 1240px !important;
}

/* Let three cards use more horizontal space */
#layoutContainer {
  padding-left: 28px !important;
  padding-right: 28px !important;
}

/* Wider card layout */
[class*="KbSubCategoryContainer__contentList"] {
  min-width: 0 !important;
}

/* If Zoho is using a grid/flex wrapper, give it more room */
[class*="KbSubCategoryContainer"],
[class*="SubCategoryContainer"],
[class*="subcategoryContainer"] {
  max-width: 1240px !important;
}
/* ============================================
   Force article rows to left-align properly
   ============================================ */

/* Make each article row use a simple left-aligned flex layout */
[class*="ContentList__topicList"],
[class*="contentList__topicList"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 12px !important;
}

/* Force every inner wrapper inside article rows to stop centering */
[class*="ContentList__topicList"] *,
[class*="contentList__topicList"] * {
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* Keep the icon in a fixed left column */
[class*="ContentList__topicList"] svg,
[class*="contentList__topicList"] svg,
[class*="ContentList__topicList"] [class*="Icon"],
[class*="contentList__topicList"] [class*="Icon"],
[class*="ContentList__topicList"] [class*="icon"],
[class*="contentList__topicList"] [class*="icon"] {
  width: 14px !important;
  min-width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  flex: 0 0 14px !important;
  align-self: flex-start !important;
  margin-top: 4px !important;
}

/* Make the article text fill the remaining space from the left */
[class*="ContentList__topicList"] a,
[class*="contentList__topicList"] a {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

/* Remove Zoho's internal centering/auto margins */
[class*="ContentList__topicList"] div,
[class*="contentList__topicList"] div,
[class*="ContentList__topicList"] span,
[class*="contentList__topicList"] span {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* ============================================
   Cleaner article list inside category cards
   ============================================ */

/* Make article rows feel like a clean list, not mini cards */
[class*="ContentList__topicList"],
[class*="contentList__topicList"] {
  display: grid !important;
  grid-template-columns: 16px 1fr !important;
  column-gap: 12px !important;
  align-items: start !important;

  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  padding: 7px 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

/* Subtle hover only */
[class*="ContentList__topicList"]:hover,
[class*="contentList__topicList"]:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Document icon */
[class*="ContentList__topicList"] svg,
[class*="contentList__topicList"] svg,
[class*="ContentList__topicList"] [class*="Icon"],
[class*="contentList__topicList"] [class*="Icon"],
[class*="ContentList__topicList"] [class*="icon"],
[class*="contentList__topicList"] [class*="icon"] {
  width: 13px !important;
  min-width: 13px !important;
  height: 13px !important;
  margin: 3px 0 0 0 !important;
  opacity: 0.38 !important;
  grid-column: 1 !important;
}

/* Article title */
[class*="ContentList__topicList"] a,
[class*="contentList__topicList"] a {
  grid-column: 2 !important;
  display: block !important;

  font-size: 13.5px !important;
  font-weight: 650 !important;
  line-height: 1.38 !important;
  color: #1E1637 !important;

  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

/* Hover the text only */
[class*="ContentList__topicList"]:hover a,
[class*="contentList__topicList"]:hover a {
  color: #A288F8 !important;
}

/* Stop inner wrappers from centring or stretching */
[class*="ContentList__topicList"] *,
[class*="contentList__topicList"] * {
  text-align: left !important;
  justify-content: flex-start !important;
}

/* Card spacing now that article rows are flatter */
[class*="KbSubCategoryContainer__contentList"] {
  padding: 30px 34px 34px !important;
}

/* Header spacing */
[class*="ListHeader__listHeader"],
[class*="ListHeader__listHeader2"] {
  margin-bottom: 18px !important;
}
/* ============================================
   Reduce article title weight
   ============================================ */

[class*="ContentList__topicList"] a,
[class*="contentList__topicList"] a {
  font-weight: 450 !important;
}

/* Keep category headings strong */
[class*="ListHeader__listHeader"] a,
[class*="ListHeader__listHeader"] span,
[class*="ListHeader__listHeader"] div,
[class*="ListHeader__listHeader2"] a,
[class*="ListHeader__listHeader2"] span,
[class*="ListHeader__listHeader2"] div {
  font-weight: 900 !important;
}
/* ============================================
   Dribl-style help centre polish
   Hero + cleaner category cards
   ============================================ */

/* Stronger hero section */
.Header__searchSection {
  padding: 62px 36px 70px !important;
  background:
    radial-gradient(circle at 25% 20%, rgba(162,136,248,0.28), transparent 30%),
    linear-gradient(135deg, #1E1637 0%, #21163F 52%, #2A1D55 100%) !important;
}

.Header__searchTitle {
  font-size: 42px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: -1.1px !important;
  margin-bottom: 12px !important;
}

.Header__description {
  font-size: 16px !important;
  color: rgba(255,255,255,0.66) !important;
  margin-bottom: 30px !important;
}

/* Make search feel like the main action */
.Header__searchSection input,
.Header__searchSection [type="search"] {
  height: 52px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  padding-left: 18px !important;
}

/* Pull content closer to hero */
#layoutContainer {
  margin-top: 40px !important;
}

/* Slightly more portal-like card grid */
[class*="KbSubCategoryContainer__contentList"] {
  background: #FFFFFF !important;
  border: 1px solid rgba(30,22,55,0.08) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 45px rgba(30,22,55,0.045) !important;
  padding: 34px 36px 36px !important;
}

[class*="KbSubCategoryContainer__contentList"]:hover {
  border-color: rgba(162,136,248,0.32) !important;
  box-shadow: 0 22px 55px rgba(30,22,55,0.075) !important;
}

/* Add subtle top accent like a modern help card */
[class*="KbSubCategoryContainer__contentList"]::before {
  opacity: 1 !important;
  height: 4px !important;
  background: linear-gradient(90deg, #A288F8, rgba(162,136,248,0.15)) !important;
}

/* Bigger category headings */
[class*="ListHeader__listHeader"] a,
[class*="ListHeader__listHeader"] span,
[class*="ListHeader__listHeader"] div,
[class*="ListHeader__listHeader2"] a,
[class*="ListHeader__listHeader2"] span,
[class*="ListHeader__listHeader2"] div {
  font-size: 21px !important;
  font-weight: 800 !important;
}

/* Make article list feel secondary */
[class*="ContentList__topicList"] {
  padding: 6px 0 !important;
}

[class*="ContentList__topicList"] a,
[class*="contentList__topicList"] a {
  font-size: 13.5px !important;
  font-weight: 450 !important;
  line-height: 1.35 !important;
  color: rgba(30,22,55,0.86) !important;
}

/* Cleaner icon treatment */
[class*="ContentList__topicList"] svg,
[class*="contentList__topicList"] svg,
[class*="ContentList__topicList"] [class*="Icon"],
[class*="contentList__topicList"] [class*="Icon"],
[class*="ContentList__topicList"] [class*="icon"],
[class*="contentList__topicList"] [class*="icon"] {
  opacity: 0.26 !important;
}

/* More breathing room between cards */
#subCategoryContainer {
  gap: 26px !important;
}

/* Mobile */
@media (max-width: 768px) {
  .Header__searchSection {
    padding: 44px 18px 52px !important;
  }

  .Header__searchTitle {
    font-size: 31px !important;
  }

  .Header__description {
    font-size: 14px !important;
  }

  [class*="KbSubCategoryContainer__contentList"] {
    padding: 28px 24px !important;
  }
}
/* ============================================
   Centre and enlarge KB cards
   ============================================ */

/* Centre the whole card grid */
#layoutContainer,
#subCategoryContainer {
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Make the card grid wider but still centred */
#subCategoryContainer {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 380px)) !important;
  justify-content: center !important;
  gap: 34px !important;
}

/* Slightly larger cards */
[class*="KbSubCategoryContainer__contentList"] {
  width: 380px !important;
  min-height: 245px !important;
  padding: 38px 42px 40px !important;
  box-sizing: border-box !important;
}

/* Better spacing inside card headers */
[class*="ListHeader__listHeader"],
[class*="ListHeader__listHeader2"] {
  margin-bottom: 24px !important;
}

/* Keep article list readable after card expansion */
[class*="ContentList__topicList"],
[class*="contentList__topicList"] {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

/* Responsive fallback */
@media (max-width: 900px) {
  #subCategoryContainer {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  [class*="KbSubCategoryContainer__contentList"] {
    width: 100% !important;
    min-height: auto !important;
  }
}
/* ============================================
   Slightly smaller card headings and article text
   ============================================ */

/* Category headings */
[class*="ListHeader__listHeader"] a,
[class*="ListHeader__listHeader"] span,
[class*="ListHeader__listHeader"] div,
[class*="ListHeader__listHeader2"] a,
[class*="ListHeader__listHeader2"] span,
[class*="ListHeader__listHeader2"] div {
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

/* Category icons slightly smaller */
.ListHeader__listIcon,
svg[class*="ListHeader__listIcon"] {
  width: 42px !important;
  height: 42px !important;
  margin-right: 16px !important;
}

/* Article titles */
[class*="ContentList__topicList"] a,
[class*="contentList__topicList"] a {
  font-size: 12.5px !important;
  line-height: 1.32 !important;
  font-weight: 450 !important;
}

/* Article row spacing */
[class*="ContentList__topicList"],
[class*="contentList__topicList"] {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

/* Reduce top card padding slightly */
[class*="KbSubCategoryContainer__contentList"] {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

/* Header spacing inside each card */
[class*="ListHeader__listHeader"],
[class*="ListHeader__listHeader2"] {
  margin-bottom: 18px !important;
}