/* ==========================================================================
   Madeit Help Scout Docs — custom styling
   Paste into: Manage > Docs > Madeit Help > Custom Code > Upload stylesheet
   ========================================================================== */

/* ---- Global type ---- */
body {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #2c2c2a;
}

/* ---- Header bar ---- */
.masthead,
#topBar,
.docs-header {
  background: #9eb8ac;
  border-bottom: none;
  min-height: 72px;
  display: flex;
  align-items: center;
  padding: 0 24px;
}

.masthead a,
#topBar a,
.docs-header a {
  color: #ffffff;
  font-weight: 500;
}

.masthead nav,
#topBar nav,
.docs-header nav,
.masthead ul,
#topBar ul,
.docs-header ul {
  display: flex;
  align-items: center;
}

.masthead nav a,
#topBar nav a,
.docs-header nav a,
.masthead li a,
#topBar li a,
.docs-header li a {
  padding: 8px 16px;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
}

.masthead img,
#topBar img,
.docs-header img {
  max-height: 32px;
  width: auto;
}

/* ---- Search hero ---- */
#docsSearch {
  background: #f4f2ec;
  border-bottom: none;
  padding: 64px 24px 56px;
  text-align: center;
}

#docsSearch h1,
#docsSearch .page-title {
  font-size: 28px;
  font-weight: 500;
  color: #2c2c2a;
  margin-bottom: 24px;
}

#searchBar {
  max-width: 480px;
  margin: 0 auto;
}

#searchBar .search-query {
  background: #ffffff;
  border: 1px solid #dcd9cf;
  border-radius: 8px 0 0 8px;
  box-shadow: none;
  color: #2c2c2a;
  padding: 14px 18px;
}

#searchBar button {
  background: #5f746b;
  border-color: #5f746b;
  border-radius: 0 8px 8px 0;
  color: #ffffff;
  font-weight: 500;
}

#searchBar button:hover {
  background: #4c5c54;
  border-color: #4c5c54;
}


/* Force 3-column layout — also strips the old theme's own width/float/
   margin off each card, since those were sized for its 2-column grid
   and were fighting the new one, causing uneven gaps */
.category-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.category-list .category {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* ---- Category cards ---- */
.category-list .category,
.twoCol .collection,
.threeCol .collection {
  background: #ffffff;
  border: 1px solid #e5e2d8;
  border-radius: 12px;
  padding: 24px 20px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.category-list .category:hover,
.twoCol .collection:hover,
.threeCol .collection:hover {
  border-color: #5f746b;
  transform: translateY(-2px);
}

.category-list .category h3,
.twoCol .collection h3,
.threeCol .collection h3 {
  font-size: 15px;
  font-weight: 500;
  color: #2c2c2a;
  margin: 8px 0 4px;
}

/* Article count line — targets whichever element sits last in the card,
   since the count text doesn't have a distinct class in your theme */
.category-list .category > *:last-child,
.twoCol .collection > *:last-child,
.threeCol .collection > *:last-child {
  font-size: 13px !important;
  color: #8a8878 !important;
  font-weight: 400 !important;
}

/* ---- Category icons ---- */
.category-list .category::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto 10px;
  background-repeat: no-repeat;
  background-size: contain;
}

.category-list .category[href*="361-getting-started"]::before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNWY3NDZiIiBzdHJva2Utd2lkdGg9IjEuNiI+PHBhdGggZD0iTTEyIDJjMyAyIDUgNiA1IDEwIDAgMi0xIDQtMSA0aC04cy0xLTItMS00YzAtNCAyLTggNS0xMHoiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjEwIiByPSIxLjYiIGZpbGw9IiM1Zjc0NmIiIHN0cm9rZT0ibm9uZSIvPjxwYXRoIGQ9Ik05IDE2bC0yIDQgMy0xLjVNMTUgMTZsMiA0LTMtMS41Ii8+PC9zdmc+");
}
.category-list .category[href*="352-madeit-live-updates"]::before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNWY3NDZiIiBzdHJva2Utd2lkdGg9IjEuNiI+PHJlY3QgeD0iNCIgeT0iNSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjEwIiByeD0iMSIvPjxwYXRoIGQ9Ik0yIDE5aDIwIi8+PC9zdmc+");
}
.category-list .category[href*="354-troubleshooting-help"]::before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNWY3NDZiIiBzdHJva2Utd2lkdGg9IjEuNiI+PHBhdGggZD0iTTEyIDRsOSAxNkgzeiIvPjxwYXRoIGQ9Ik0xMiAxMHY0Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxNyIgcj0iMC44IiBmaWxsPSIjNWY3NDZiIiBzdHJva2U9Im5vbmUiLz48L3N2Zz4=");
}
.category-list .category[href*="402-handmade-not-mass-made-movement"]::before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNWY3NDZiIiBzdHJva2Utd2lkdGg9IjEuNiI+PHBhdGggZD0iTTggMTNWNWExLjUgMS41IDAgMCAxIDMgMHY2TTExIDExVjRhMS41IDEuNSAwIDAgMSAzIDB2N00xNCAxMVY2YTEuNSAxLjUgMCAwIDEgMyAwdjgiLz48cGF0aCBkPSJNMTcgMTJ2LTFhMS41IDEuNSAwIDAgMSAzIDB2NGMwIDMtMiA2LTUgNmgtMmMtMyAwLTQtMS02LTRsLTItMy41Yy0uNS0uOC0uMi0xLjguNi0yLjIuNy0uNCAxLjYtLjEgMiAuNUw5IDE0Ii8+PC9zdmc+");
}
.category-list .category[href*="345-profile-membership"]::before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNWY3NDZiIiBzdHJva2Utd2lkdGg9IjEuNiI+PGNpcmNsZSBjeD0iMTIiIGN5PSI4IiByPSIzLjUiLz48cGF0aCBkPSJNNSAyMGMxLTQgNC02IDctNnM2IDIgNyA2Ii8+PC9zdmc+");
}
.category-list .category[href*="335-selling-orders"]::before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNWY3NDZiIiBzdHJva2Utd2lkdGg9IjEuNiI+PHBhdGggZD0iTTEyIDN2MTgiLz48cGF0aCBkPSJNMTYgN2MwLTEuNy0xLjgtMy00LTNzLTQgMS4zLTQgMyAxLjggMi40IDQgMyA0IDEuMyA0IDMtMS44IDMtNCAzLTQtMS4zLTQtMyIvPjwvc3ZnPg==");
}
.category-list .category[href*="333-shipping"]::before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNWY3NDZiIiBzdHJva2Utd2lkdGg9IjEuNiI+PHJlY3QgeD0iMiIgeT0iNyIgd2lkdGg9IjEyIiBoZWlnaHQ9IjkiLz48cGF0aCBkPSJNMTQgMTBoNGwzIDN2M2gtN3oiLz48Y2lyY2xlIGN4PSI2LjUiIGN5PSIxOCIgcj0iMS42Ii8+PGNpcmNsZSBjeD0iMTcuNSIgY3k9IjE4IiByPSIxLjYiLz48L3N2Zz4=");
}
.category-list .category[href*="334-products"]::before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNWY3NDZiIiBzdHJva2Utd2lkdGg9IjEuNiIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEyIDNsMi42IDUuOUwyMSA5LjZsLTQuNyA0LjIgMS4zIDYuMkwxMiAxNi45IDYuNCAyMGwxLjMtNi4yTDMgOS42bDYuNC0uN3oiLz48L3N2Zz4=");
}
.category-list .category[href*="353-madeit-terms-conditions"]::before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNWY3NDZiIiBzdHJva2Utd2lkdGg9IjEuNiI+PHBhdGggZD0iTTYgMmg5bDQgNHYxNkg2eiIvPjxwYXRoIGQ9Ik0xNSAydjRoNCIvPjxwYXRoIGQ9Ik05IDEyaDdNOSAxNmg3Ii8+PC9zdmc+");
}

/* ---- Footer ---- */
.docs-footer,
#footer {
  background: #f4f2ec;
  color: #8a8878;
  font-size: 13px;
  padding: 32px 0;
}