/* ==== SRG Help Center — Merged Final with Mock-up Shapes ==== */
:root {
  --sr-ink:#1B202C;
  --sr-muted:#586174;
  --sr-border:#E6E6EA;
  --sr-accent:#080269;
  --sr-accent-hover:#0A0750;
  --sr-radius:14px;
  --sr-shadow:0 6px 18px rgba(0,0,0,.08);
  --sr-shadow-soft:0 2px 10px rgba(0,0,0,.06);

  /* soft hues */
  --sr-blue-soft:#E3F2FD;
  --sr-orange-soft:#FFEED9;
  --sr-yellow-soft:#FFF7D6;
  --sr-green-soft:#E8F5E9;
}

/* ===== Base & Links ===== */
* { box-sizing: border-box; }
a { color: var(--sr-accent); text-decoration: none; }
a:hover { color: var(--sr-accent-hover); }
footer a, .footer a, .site-footer a, .powered-by a { color: var(--sr-accent) !important; }

/* ==== Background Shapes ====
   Blue gradient base + 4 corner shapes (balanced) */
body {
  min-height: 100%;
  background:
    radial-gradient(650px 500px at 10% 8%, var(--sr-blue-soft) 0%, rgba(227,242,253,0) 70%),
    radial-gradient(400px 400px at 90% 10%, rgba(255,206,158,.22) 0%, rgba(255,206,158,0) 60%),
    radial-gradient(400px 400px at 10% 90%, rgba(255,247,214,.42) 0%, rgba(255,247,214,0) 60%),
    radial-gradient(450px 450px at 90% 90%, rgba(232,245,233,.65) 0%, rgba(232,245,233,0) 55%),
    radial-gradient(900px 600px at 50% 45%, rgba(93,163,255,.10) 0%, rgba(93,163,255,0) 70%),
    #fff;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Transparent header/wrappers to let bg show */
#header, .site-header, .header, .navbar, .navbar-inner,
.hc-header, .hc-navbar, .docs-header, .top-bar, .site-top, .header-wrap {
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
#page, #main, .main, .site, .site-container, .wrapper, .container,
.content, .site-content, .docs-container, .docs-wrap {
  background: transparent !important;
}

/* ==== Navigation ==== */
.nav { display:flex; gap:12px; flex-wrap:wrap; }
.nav>li { list-style:none; }
.nav a, .nav>li>a {
  padding:8px 12px;
  border-radius:10px;
  color:#080269 !important;
  font-weight:500;
}
.nav a:hover, .nav>li>a:hover { background:#F4F5F7; color:#0A0750 !important; }
.nav li a { text-decoration: none; }

/* ==== Hero ==== */
#docsSearch {
  border: none !important;
  padding: 64px 0 36px !important;
  text-align: center;
  background: transparent;
}
#docsSearch:before, #docsSearch:after { display:none !important; }
#docsSearch h1 {
  color: var(--sr-accent);
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0;
  font-size: 42px;
}
.docsearch-subtitle {
  margin-top: 24px;
  font-size: 18px;
  color: var(--sr-muted);
}

/* ==== Card Grid ==== */
.category-list, .collection-list, .twoCol, .threeCol,
.popular-articles, .article-list, .docs-article-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(320px, 1fr)) !important;
  gap: 24px;
  margin: 40px 0;
}
.category-list .category, .collection-list .collection,
.popular-articles li, .article-list li, .docs-article-list li {
  list-style: none;
  background: #fff;
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius);
  padding: 24px 26px;
  text-align: left;
  min-height: 160px;
  box-shadow: var(--sr-shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: hidden;
}
.category-list .category h3, .collection-list .collection h3 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.25;
}
.category-list .category h3 a, .collection-list .collection h3 a {
  color: var(--sr-accent);
  font-weight: 800;
  text-decoration: none;
}
.category-list .category p, .collection-list .collection p {
  margin: 0;
  color: var(--sr-muted);
  font-size: 15px;
  line-height: 1.55;
}
.category-list .category:hover, .collection-list .collection:hover,
.popular-articles li:hover, .article-list li:hover, .docs-article-list li:hover {
  transform: translateY(-2px);
  box-shadow: var(--sr-shadow);
}

/* ==== Responsive ==== */
@media (max-width:1024px){
  .category-list, .collection-list, .twoCol, .threeCol,
  .popular-articles, .article-list, .docs-article-list {
    grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
  }
}
@media (max-width:640px){
  .category-list, .collection-list, .twoCol, .threeCol,
  .popular-articles, .article-list, .docs-article-list {
    grid-template-columns: 1fr !important;
  }
}

/* === SRG Hot-fix: normalize card sizing & layout (max 3 per row) === */

/* Remove list padding so grid aligns */
.category-list,
.collection-list,
.twoCol,
.threeCol,
.popular-articles,
.article-list,
.docs-article-list {
  padding-left: 0 !important;
  margin-left: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(320px, 1fr)) !important; /* cap at 3 */
  gap: 24px !important;
  align-items: stretch !important;
}

/* Kill any inline/inline-block widths Help Scout sets */
.category-list > li,
.collection-list > li,
.twoCol > li,
.threeCol > li,
.popular-articles > li,
.article-list > li,
.docs-article-list > li {
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
}

/* Force real, roomy rectangles that stretch to the grid cell */
.category-list .category,
.collection-list .collection,
.twoCol .collection,
.threeCol .collection,
.popular-articles li,
.article-list li,
.docs-article-list li {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;        /* allow text to wrap instead of growing the card */
  min-height: 160px !important;
  padding: 24px 26px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid var(--sr-border) !important;
  box-shadow: var(--sr-shadow-soft) !important;
}

/* Headings/copy: wrap nicely, no squish */
.category-list .category h3,
.collection-list .collection h3,
.popular-articles li h3,
.article-list li h3,
.docs-article-list li h3 {
  margin: 0 0 10px !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}
.category-list .category p,
.collection-list .collection p,
.popular-articles li p,
.article-list li p,
.docs-article-list li p {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--sr-muted) !important;
}

/* Hover polish (optional) */
.category-list .category:hover,
.collection-list .collection:hover,
.popular-articles li:hover,
.article-list li:hover,
.docs-article-list li:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--sr-shadow) !important;
}

/* Tablet & mobile */
@media (max-width: 1024px){
  .category-list, .collection-list, .twoCol, .threeCol,
  .popular-articles, .article-list, .docs-article-list {
    grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
  }
}
@media (max-width: 640px){
  .category-list, .collection-list, .twoCol, .threeCol,
  .popular-articles, .article-list, .docs-article-list {
    grid-template-columns: 1fr !important;
  }
}