/*
 * SD CANADA — HELP SCOUT DOCS
 * Modern responsive stylesheet | November 2026
 * Brand accent: #ff00a9
 * Upload under Help Scout > Settings > Docs Sites > SD Canada > Custom Code.
 * This is a stand-alone override; it does not change your Shopify theme.
 */

:root {
  --sdc-pink: #ff00a9;
  --sdc-pink-hover: #e00096;
  --sdc-pink-soft: #fff0fa;
  --sdc-link: #ad0073;
  --sdc-ink: #20212a;
  --sdc-muted: #626778;
  --sdc-line: #e9e9ef;
  --sdc-page: #f8f9fc;
  --sdc-white: #ffffff;
  --sdc-radius: 16px;
  --sdc-shadow: 0 6px 28px rgba(27, 25, 45, .055);
}

/* Base */
html { scroll-behavior: smooth; }
body {
  background: var(--sdc-page) !important;
  color: var(--sdc-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
body, input, button, textarea { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--sdc-link); transition: color .18s ease, background-color .18s ease; }
a:hover { color: var(--sdc-pink-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--sdc-pink) !important;
  outline-offset: 3px;
}

/* Top navigation — tidy, white and uncluttered */
.navbar .navbar-inner {
  background: var(--sdc-white) !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sdc-line) !important;
  box-shadow: none !important;
  min-height: 74px;
}
.navbar .brand {
  color: var(--sdc-ink) !important;
  text-shadow: none !important;
  font-weight: 750;
  letter-spacing: -.02em;
}
.navbar .brand img, .navbar a.brand > img {
  max-height: 52px;
  width: auto;
  object-fit: contain;
}
.navbar .nav > li > a {
  color: #424453 !important;
  font-size: 14px;
  font-weight: 600;
  text-shadow: none !important;
  border-radius: 9px;
  transition: background .18s, color .18s;
}
.navbar .nav > li > a:hover,
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover {
  color: var(--sdc-link) !important;
  background: var(--sdc-pink-soft) !important;
  box-shadow: none !important;
}

/* Search hero — soft pink, no remote images/fonts */
#docsSearch {
  position: relative;
  height: auto !important;
  min-height: 245px;
  margin: 0 0 38px;
  padding: 52px 20px 57px;
  border: 0 !important;
  background: linear-gradient(125deg, #fff2fa 0%, #ffffff 53%, #ffe8f6 100%) !important;
  text-align: center;
}
#docsSearch h1 {
  max-width: 900px;
  margin: 0 auto 26px;
  color: var(--sdc-ink) !important;
  font-weight: 780;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.18;
  letter-spacing: -.035em;
  text-shadow: none;
}
#searchBar {
  width: min(100%, 720px);
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}
#searchBar .search-query,
#searchBar input[type="text"],
#searchBar input[type="search"] {
  box-sizing: border-box;
  min-height: 58px;
  width: 100%;
  padding: 15px 125px 15px 22px;
  background-color: #fff !important;
  color: var(--sdc-ink) !important;
  border: 1px solid #e3dce5 !important;
  border-radius: 13px !important;
  font-size: 16px;
  line-height: 1.3;
  box-shadow: 0 7px 26px rgba(100, 33, 79, .08) !important;
}
#searchBar .search-query:focus,
#searchBar input:focus {
  border-color: var(--sdc-pink) !important;
  box-shadow: 0 0 0 4px rgba(255, 0, 169, .12) !important;
}
#searchBar button {
  position: absolute;
  top: 6px;
  right: 6px;
  height: 46px;
  padding: 0 22px;
  border: 0 !important;
  border-radius: 10px;
  background: var(--sdc-pink) !important;
  background-image: none !important;
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer;
}
#searchBar button:hover { background: var(--sdc-pink-hover) !important; }
#serp-dd { border-radius: 12px; overflow: hidden; box-shadow: var(--sdc-shadow); }
#serp-dd .result a { color: var(--sdc-ink); }
#serp-dd .result a:hover,
#serp-dd .result > li.active { background: var(--sdc-pink-soft) !important; }

/* Main container — allow breathing room on wider monitors */
#main-content, .container-fluid.main-content { max-width: 1160px; margin-left: auto; margin-right: auto; }

/* Home category grid — 3 columns, then 2, then 1 */
.category-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
  margin-bottom: 50px;
}
.category-list::before, .category-list::after { display: none !important; }
.category-list .category {
  box-sizing: border-box;
  display: block;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 185px;
  margin: 0 !important;
  padding: 28px 28px 24px !important;
  overflow-wrap: anywhere;
  background: var(--sdc-white) !important;
  border: 1px solid var(--sdc-line) !important;
  border-top: 4px solid var(--sdc-pink) !important;
  border-radius: var(--sdc-radius) !important;
  box-shadow: var(--sdc-shadow);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.category-list .category:hover {
  transform: translateY(-3px);
  border-color: #f7b7e1 !important;
  border-top-color: var(--sdc-pink) !important;
  box-shadow: 0 14px 35px rgba(27, 25, 45, .095);
}
.category-list .category h2,
.category-list .category h3 {
  margin: 0 0 10px;
  padding: 0;
  color: var(--sdc-ink) !important;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 750;
  letter-spacing: -.02em;
}
.category-list .category h2 a,
.category-list .category h3 a,
.category-list .category > a {
  color: var(--sdc-ink) !important;
  text-decoration: none;
}
.category-list .category h2 a:hover,
.category-list .category h3 a:hover { color: var(--sdc-link) !important; }
.category-list .category p,
.category-list .category .description {
  margin: 0 0 12px;
  color: var(--sdc-muted) !important;
  font-size: 14px;
  line-height: 1.65;
}
.category-list .category .article-count,
.category-list .category .count,
.category-list .category small {
  color: var(--sdc-link) !important;
  font-size: 13px;
  font-weight: 700;
}

/* Collection and category lists */
.collection-category h2,
#categoryHead h1,
#categoryHead h2 {
  color: var(--sdc-ink);
  font-weight: 760;
  letter-spacing: -.025em;
}
.collection-category h2 a { color: var(--sdc-ink) !important; }
.collection-category h2 a:hover { color: var(--sdc-link) !important; text-decoration: none; }
.twoCol .collection, .threeCol .collection {
  background: #fff;
  border: 1px solid var(--sdc-line);
  border-radius: var(--sdc-radius);
  box-shadow: var(--sdc-shadow);
}
.article-list a, .articleList a, .collection-category li a {
  color: #343743;
  text-decoration: none;
}
.article-list a:hover, .articleList a:hover, .collection-category li a:hover { color: var(--sdc-link); }

/* Article readability — clear headings, spacing and helpful link states */
.contentWrapper {
  background: #fff;
  border: 1px solid var(--sdc-line);
  border-radius: var(--sdc-radius);
  box-shadow: var(--sdc-shadow);
  padding: 34px 42px;
}
#fullArticle { color: #363946; font-size: 16px; line-height: 1.8; }
#fullArticle .title, #fullArticle h1 {
  color: var(--sdc-ink);
  font-weight: 780;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -.03em;
  line-height: 1.25;
}
#fullArticle h2 {
  margin-top: 1.5em;
  color: var(--sdc-ink);
  font-size: 24px;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: -.02em;
}
#fullArticle h3 {
  margin-top: 1.25em;
  color: var(--sdc-ink);
  font-size: 19px;
  font-weight: 700;
}
#fullArticle p, #fullArticle li { line-height: 1.8; }
#fullArticle ul, #fullArticle ol { margin-bottom: 1.25em; }
#fullArticle li { margin-bottom: .35em; }
#fullArticle a { color: var(--sdc-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
#fullArticle a:hover { color: var(--sdc-pink-hover); }
#fullArticle img { max-width: 100%; height: auto; border-radius: 10px; }
#fullArticle blockquote {
  margin: 22px 0;
  padding: 15px 22px;
  background: var(--sdc-pink-soft);
  border-left: 4px solid var(--sdc-pink);
  border-radius: 0 10px 10px 0;
  color: var(--sdc-ink);
}
#fullArticle table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
#fullArticle th, #fullArticle td { padding: 11px 14px; border: 1px solid var(--sdc-line); }
#fullArticle th { background: #fdf0f8; color: var(--sdc-ink); }
#fullArticle pre, #fullArticle code { overflow-wrap: anywhere; }
#fullArticle pre { overflow-x: auto; border-radius: 9px; }
#fullArticle dt { background: var(--sdc-pink-soft); }

/* Sidebar navigation and helpful related-article panels */
#sidebar a { color: #464957; }
#sidebar a:hover, #sidebar .active > a { color: var(--sdc-link); }
#sidebar h3, #sidebar h4 { color: var(--sdc-ink); font-weight: 750; }
.related {
  background: #fff;
  border: 1px solid var(--sdc-line);
  border-radius: var(--sdc-radius);
  box-shadow: var(--sdc-shadow);
}
.related h3 { color: var(--sdc-ink); }
.related a { color: var(--sdc-link); }
.breadcrumb a, .breadcrumbs a { color: var(--sdc-link); }
.articleFoot { border-color: var(--sdc-line); }

/* Buttons and forms within Docs (not Shopify checkout) */
#main-content .btn-primary, #fullArticle .btn-primary {
  background: var(--sdc-pink) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid var(--sdc-pink) !important;
  border-radius: 10px;
  font-weight: 700;
  text-shadow: none;
}
#main-content .btn-primary:hover, #fullArticle .btn-primary:hover {
  background: var(--sdc-pink-hover) !important;
  border-color: var(--sdc-pink-hover) !important;
}

/* Footer */
footer, #footer { color: #777a86; }
footer a, #footer a { color: var(--sdc-link); }

/* Tablets */
@media (max-width: 1000px) {
  .category-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  #main-content { padding-left: 18px; padding-right: 18px; }
}

/* Mobile */
@media (max-width: 640px) {
  #docsSearch { min-height: 0; padding: 37px 16px 43px; margin-bottom: 24px; }
  #docsSearch h1 { font-size: 28px; margin-bottom: 22px; }
  #searchBar .search-query, #searchBar input[type="text"], #searchBar input[type="search"] {
    padding: 13px 94px 13px 15px;
    font-size: 16px;
    min-height: 54px;
  }
  #searchBar button { height: 42px; top: 6px; right: 6px; padding: 0 13px; font-size: 13px; }
  .category-list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .category-list .category { min-height: 0; padding: 23px 22px !important; }
  .category-list .category h2, .category-list .category h3 { font-size: 18px; }
  .contentWrapper { padding: 24px 20px; border-radius: 13px; }
  #fullArticle h2 { font-size: 21px; }
  #main-content { padding-left: 14px; padding-right: 14px; }
  .navbar .navbar-inner { min-height: 58px; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}