/* ============================================================
   Trustisto Help Center (help.trustisto.com) — Help Scout Docs theme
   Based on the Trustisto Design System (Claude Design 019e1798):
   tokens are a subset of `colors_and_type.css`, the same file that
   socialproof-blog and socialproof-doc copy as `tokens.css`.

   Upload as the custom stylesheet in Help Scout:
   Docs → Site settings → Custom Code → Stylesheet (.css file).
   Help Scout injects its own colour <style> before this file, so plain
   selectors win on order; `!important` is only used where Help Scout's
   inline styles or launch.css force it.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap");

:root {
  /* Brand */
  --brand-50:  #f1edff;
  --brand-100: #e3daff;
  --brand-200: #c6b5ff;
  --brand-300: #a489ff;
  --brand-400: #7d5cff;
  --brand-500: #4a24ea;
  --brand-600: #3d1ac9;
  --brand-700: #3014a0;
  --brand-wash: #f6f2ff;
  --brand-tint: #ede5ff;
  --brand-glow: rgba(74, 36, 234, 0.18);

  /* Neutrals */
  --neutral-0:   #ffffff;
  --neutral-25:  #fbfbfd;
  --neutral-50:  #f6f6f9;
  --neutral-100: #eeeef3;
  --neutral-200: #e2e2ea;
  --neutral-300: #cbcbd6;
  --neutral-400: #9b9bab;
  --neutral-500: #6e6e80;
  --neutral-600: #4d4d5d;
  --neutral-700: #353544;
  --neutral-800: #1f1f2c;
  --neutral-900: #0d0d18;

  /* Semantic */
  --bg:        var(--neutral-25);
  --bg-elev:   var(--neutral-0);
  --bg-sunken: var(--neutral-50);
  --fg:   var(--neutral-900);
  --fg-1: var(--neutral-800);
  --fg-2: var(--neutral-600);
  --fg-3: var(--neutral-500);
  --fg-4: var(--neutral-400);
  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-soft:   var(--neutral-100);

  --success-50: #e8f8f0; --success-500: #12a05f; --success-700: #0a6a3f;
  --warning-50: #fff4e0; --warning-500: #f5a524; --warning-700: #a8690a;
  --danger-50:  #fdecec; --danger-500:  #e0394a; --danger-700:  #a01a28;
  --info-50:    #eaf3ff; --info-500:    #2563eb; --info-700:    #1c47ad;

  /* Type */
  --font-sans:  "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-caps:  0.08em;

  /* Shape & elevation */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 15, 30, 0.06), 0 1px 0 rgba(15, 15, 30, 0.03);
  --shadow-md: 0 4px 12px rgba(15, 15, 30, 0.06), 0 1px 2px rgba(15, 15, 30, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 15, 30, 0.08), 0 2px 6px rgba(15, 15, 30, 0.04);
  --shadow-focus: 0 0 0 4px var(--brand-glow);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;

  --max-w-page: 1200px;
}

/* ------------------------------------------------------------ base */

html, body {
  background: var(--bg) !important;
  color: var(--fg);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body, input, button, select, textarea,
h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); }

h1, h2, h3, h4 { color: var(--fg-1); }

a { color: var(--brand-500); transition: color var(--dur-fast) var(--ease-out); }
a:hover, a:focus { color: var(--brand-700); }

::selection { background: var(--brand-tint); color: var(--brand-700); }

.container-fluid { max-width: var(--max-w-page); margin: 0 auto; }

/* ---------------------------------------------------------- header */

#mainNav.navbar { margin-bottom: 0; }

#mainNav .navbar-inner {
  position: relative;
  background: rgba(251, 251, 253, 0.88) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 0;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  min-height: 64px;
}

/* Wordmark + "Centrum pomocy" label instead of the plain site name */
#mainNav .brand {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 64px;
  padding: 0 !important;
  margin: 0;
  line-height: 1;
  color: var(--fg-1) !important;
  text-shadow: none;
}
#mainNav .brand::before {
  content: "";
  display: block;
  width: 182px;
  height: 19px;
  background: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 209.54'%3E%3Cg fill='%230d0d18'%3E%3Cpolygon points='0%2C3.04 0%2C48.66 56.87%2C48.66 56.87%2C205.89 109.18%2C205.89 109.18%2C48.66 165.74%2C48.66 165.74%2C3.04'%3E%3C/polygon%3E%3Cpath d='M332.99%2C47.14h-41.36v45.62h41.36c13.68%2C0%2C25.24-8.82%2C25.24-22.81S346.68%2C47.14%2C332.99%2C47.14 M318.39%2C137.16h-26.76v68.73h-52.31V3.04H340.9c45.01%2C0%2C70.56%2C29.81%2C70.56%2C67.51c0%2C35.28-21.59%2C54.13-40.45%2C60.82l41.36%2C74.51h-59.91L318.39%2C137.16z'%3E%3C/path%3E%3Cpath d='M489%2C3.04h53.22v118.91c0%2C24.03%2C12.77%2C41.36%2C41.05%2C41.36c27.98%2C0%2C40.75-17.33%2C40.75-41.36V3.04h53.22v120.43c0%2C50.48-28.89%2C86.07-93.97%2C86.07c-65.08%2C0-94.27-35.89-94.27-85.76V3.04z'%3E%3C/path%3E%3Cpath d='M775.46%2C138.07c14.6%2C14.6%2C37.1%2C26.76%2C64.78%2C26.76c17.94%2C0%2C28.89-7.6%2C28.89-17.34c0-11.56-13.08-16.12-34.67-20.68c-33.45-6.69-80.29-15.2-80.29-63.26C754.17%2C29.5%2C783.06%2C0%2C835.06%2C0c32.54%2C0%2C60.82%2C9.73%2C82.42%2C28.28l-28.59%2C37.41C871.87%2C51.7%2C849.66%2C44.7%2C831.72%2C44.7c-17.34%2C0-24.02%2C7-24.02%2C15.82c0%2C10.64%2C12.47%2C14.29%2C34.97%2C18.55c33.45%2C6.99%2C79.68%2C16.73%2C79.68%2C62.65c0%2C40.75-30.11%2C67.82-84.54%2C67.82c-41.06%2C0-69.65-12.77-90.02-32.24L775.46%2C138.07z'%3E%3C/path%3E%3Cpolygon points='1039.42%2C48.66 982.55%2C48.66 982.55%2C3.04 1148.29%2C3.04 1148.29%2C48.66 1091.73%2C48.66 1091.73%2C205.89 1039.42%2C205.89'%3E%3C/polygon%3E%3Crect x='1221.87' y='3.04' width='52.31' height='202.85'%3E%3C/rect%3E%3Cpath d='M1372.4%2C138.07c14.6%2C14.6%2C37.1%2C26.76%2C64.78%2C26.76c17.94%2C0%2C28.89-7.6%2C28.89-17.34c0-11.56-13.08-16.12-34.67-20.68c-33.45-6.69-80.29-15.2-80.29-63.26c0-34.06%2C28.89-63.56%2C80.89-63.56c32.54%2C0%2C60.82%2C9.73%2C82.42%2C28.28l-28.58%2C37.41c-17.03-13.99-39.23-20.99-57.18-20.99c-17.34%2C0-24.02%2C7-24.02%2C15.82c0%2C10.64%2C12.47%2C14.29%2C34.97%2C18.55c33.45%2C6.99%2C79.68%2C16.73%2C79.68%2C62.65c0%2C40.75-30.11%2C67.82-84.54%2C67.82c-41.06%2C0-69.64-12.77-90.01-32.24L1372.4%2C138.07z'%3E%3C/path%3E%3Cpolygon points='1636.36%2C48.66 1579.49%2C48.66 1579.49%2C3.04 1745.23%2C3.04 1745.23%2C48.66 1688.67%2C48.66 1688.67%2C205.89 1636.36%2C205.89'%3E%3C/polygon%3E%3C/g%3E%3Cpath fill='%234a24ea' d='M1896.74%2C160.51c-29.95%2C0-54.23-24.28-54.23-54.23c0-29.95%2C24.28-54.23%2C54.23-54.23c29.95%2C0%2C54.23%2C24.28%2C54.23%2C54.23C1950.97%2C136.23%2C1926.69%2C160.51%2C1896.74%2C160.51 M1896.74%2C3.02c-57.03%2C0-103.26%2C46.23-103.26%2C103.26s46.23%2C103.26%2C103.26%2C103.26c57.03%2C0%2C103.26-46.23%2C103.26-103.26V3.02H1896.74z'%3E%3C/path%3E%3C/svg%3E") no-repeat left center / contain;
}
#mainNav .brand span {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0;
}
#mainNav .brand span::before {
  content: "";
  width: 1px;
  height: 20px;
  background: var(--border-strong);
}
#mainNav .brand span::after {
  content: "Centrum pomocy";
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-500);
}
#mainNav .brand:hover { text-decoration: none; }

#mainNav .nav { top: 15px; margin: 0; }
#mainNav .nav li a {
  color: var(--fg-on-brand, #fff) !important;
  background: var(--brand-500);
  border: 1px solid var(--brand-500);
  border-radius: var(--radius-md);
  height: 34px;
  line-height: 32px;
  padding: 0 14px !important;
  font-size: 14px;
  font-weight: 500;
  text-shadow: none;
  box-shadow: none;
  transition: background var(--dur-fast) var(--ease-out);
}
#mainNav .nav li a:hover,
#mainNav .nav li a:focus {
  background: var(--brand-600) !important;
  border-color: var(--brand-600);
  color: #fff !important;
  text-decoration: none;
}

/* Mobile menu toggle */
#mainNav .btn-navbar {
  margin-top: 15px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: none;
}
#mainNav .btn-navbar .icon-bar { background: var(--fg-1) !important; box-shadow: none; }

/* ------------------------------------------------- homepage search */

#docsSearch {
  position: relative;
  background:
    radial-gradient(60% 120% at 50% 0%, var(--brand-wash) 0%, rgba(246, 242, 255, 0) 70%),
    var(--bg) !important;
  border-bottom: 1px solid var(--border);
  margin-bottom: 56px;
  padding: clamp(48px, 8vw, 96px) 20px clamp(40px, 6vw, 72px);
  text-align: center;
}
#docsSearch h1 {
  max-width: 20ch;
  margin: 0 auto 8px;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--fg-1);
  text-wrap: balance;
}

#searchBar { max-width: 640px; width: 100%; padding: 28px 0 0; }

#searchBar .search-query {
  height: 56px;
  padding: 0 140px 0 22px;
  font-size: 16px;
  line-height: 24px;
  color: var(--fg);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
#searchBar .search-query::placeholder { color: var(--fg-4); }
#searchBar .search-query:focus,
#searchBar .search-query:focus:invalid {
  outline: none;
  border-color: var(--brand-500) !important;
  box-shadow: var(--shadow-focus), var(--shadow-md);
}

#docsSearch #searchBar button {
  top: 36px;
  right: 8px;
  height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--brand-500) !important;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-shadow: none;
  box-shadow: none;
  transition: background var(--dur-fast) var(--ease-out);
}
#docsSearch #searchBar button:hover { background: var(--brand-600) !important; }

/* Live search dropdown */
#serp-dd {
  top: calc(100% + 8px);
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 20;
}
#docsSearch #serp-dd { top: 92px; }
#serp-dd .result a {
  padding: 10px 18px;
  font-size: 14px;
  color: var(--fg-1) !important;
}
#serp-dd .result a:hover,
#serp-dd .result > li.active,
#serp-dd .result > li.active a {
  background: var(--brand-wash);
  color: var(--brand-600) !important;
}

/* ---------------------------------------------- homepage categories */

.category-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin: 0 auto 64px;
}
.category-list .category {
  display: flex;
  flex-direction: column;
  width: auto;
  margin: 0;
  padding: 24px;
  text-align: left;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.category-list .category:hover {
  background: var(--bg-elev);
  border-color: var(--brand-200);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}
.category-list h3 {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: var(--tracking-snug);
  font-weight: 600;
  color: var(--fg-1);
}
.category-list .category p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-2);
}
.category-list .category p.article-count,
.category-list .category:hover p.article-count {
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-500) !important;
}

/* Popular articles block on the homepage (if enabled) */
.most-pop-articles { margin-bottom: 64px; }
.most-pop-articles h2 { font-size: 24px; font-weight: 600; letter-spacing: var(--tracking-snug); }
.most-pop-articles .popArticles a { color: var(--fg-1) !important; }
.most-pop-articles .popArticles a:hover span { color: var(--brand-500) !important; }

/* ------------------------------------------------------- content area */

#contentArea { padding-bottom: 32px; }

/* launch.css draws a paper-shadow image above the content column */
#main-content { padding-top: 0; background: none; }

.contentWrapper {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(24px, 4vw, 48px);
  margin-top: 32px;
}
.contentWrapper.withRelated { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

/* ----------------------------------------------------- category page */

#categoryHead { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
#categoryHead h1 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  color: var(--fg-1);
}
#categoryHead .descrip { margin: 8px 0 0; font-size: 16px; color: var(--fg-2); }
#categoryHead .sort { top: 4px; }
#categoryHead .sort select {
  width: auto;
  height: 34px;
  padding: 0 32px 0 12px;
  font-size: 13px;
  line-height: 34px;
  color: var(--fg-2);
  background-color: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.articleList { margin: 0; font-size: 16px; }
.articleList li { margin: 0; padding: 0; border-bottom: 1px solid var(--border-soft); }
.articleList li:last-child { border-bottom: 0; }
.articleList a {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 10px;
  border-radius: var(--radius-md);
  line-height: 1.4;
  color: var(--fg-1) !important;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.articleList a:hover { background: var(--brand-wash); color: var(--brand-600) !important; }
.articleList a:hover span { text-decoration: none; }
.articleList a i { color: var(--brand-300); }
.articleList a:hover i { color: var(--brand-500); }

/* Search results page */
#serp h1, #serp-header h1 { font-weight: 600; letter-spacing: var(--tracking-tight); }
#serp .articleList > li a { font-size: 16px; margin-bottom: 0; }
#serp .articleList > li p { margin: -6px 10px 12px 38px; font-size: 14px; color: var(--fg-3); }
#noResults { color: var(--fg-3); }

/* ------------------------------------------------------------ article */

#fullArticle {
  position: relative;
  max-width: 72ch;
  font-size: 16px;
  line-height: 1.7;
}
#fullArticle,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table { color: var(--fg-2) !important; }

#fullArticle p { font-size: 16px; line-height: 1.7; margin: 0 0 1em; }

#fullArticle .title {
  margin: 0 48px 28px 0;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--fg-1);
  text-wrap: balance;
}
#fullArticle h2 {
  margin: 2em 0 0.6em;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: var(--tracking-snug);
  font-weight: 600;
}
#fullArticle h3 {
  margin: 1.8em 0 0.5em;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
}
#fullArticle h4 { margin: 1.6em 0 0.5em; font-size: 17px; font-weight: 600; }
#fullArticle h2, #fullArticle h3, #fullArticle h4 { color: var(--fg-1); }

#fullArticle strong, #fullArticle b { color: var(--fg-1); font-weight: 600; }

#fullArticle a {
  color: var(--brand-500);
  text-decoration: underline;
  text-decoration-color: var(--brand-200);
  text-underline-offset: 3px;
}
#fullArticle a:hover { color: var(--brand-700); text-decoration-color: currentColor; }

#fullArticle ul, #fullArticle ol { margin: 0 0 1em 1.4em !important; padding: 0; }
#fullArticle li { margin: 0.25em 0 !important; padding-left: 0.2em; }
#fullArticle li::marker { color: var(--brand-400); }

#fullArticle img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

#fullArticle hr { margin: 2.5em 0; border: 0; border-top: 1px solid var(--border); }

#fullArticle blockquote {
  margin: 1.5em 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--brand-300);
}
#fullArticle blockquote p { font-size: 17px; color: var(--fg-1) !important; }

#fullArticle code {
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--brand-700);
  background: var(--brand-wash);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-sm);
}
#fullArticle pre {
  margin: 1.5em 0;
  padding: 18px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--neutral-100);
  background: var(--neutral-900);
  border: 0;
  border-radius: var(--radius-md);
  overflow-x: auto;
}
#fullArticle pre code { padding: 0; color: inherit; background: none; border: 0; }

#fullArticle table {
  width: 100%;
  margin: 1.5em 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: 14px;
}
#fullArticle table th,
#fullArticle table td { padding: 10px 14px; border: 0; border-bottom: 1px solid var(--border-soft); text-align: left; }
#fullArticle table th { background: var(--bg-sunken); color: var(--fg-1); font-weight: 600; }
#fullArticle table tr:last-child td { border-bottom: 0; }

#fullArticle .video-responsive,
#fullArticle iframe { border-radius: var(--radius-md); overflow: hidden; }

/* Print icon */
#fullArticle .printArticle {
  position: absolute;
  top: 6px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--fg-3);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
#fullArticle .printArticle:hover { color: var(--brand-500); border-color: var(--brand-200); }

/* Callouts — design-system status colours */
#fullArticle .callout,
#fullArticle .callout-blue,
#fullArticle .callout-green,
#fullArticle .callout-red,
#fullArticle .callout-yellow,
#fullArticle .private-note {
  margin: 1.5em 0;
  padding: 16px 20px;
  font-size: 15px;
  border: 1px solid;
  border-left-width: 4px;
  border-radius: var(--radius-md);
}
#fullArticle .callout p,
#fullArticle .callout-blue p,
#fullArticle .callout-green p,
#fullArticle .callout-red p,
#fullArticle .callout-yellow p,
#fullArticle .private-note p { font-size: 15px; line-height: 1.6; margin-bottom: 0.6em; }
#fullArticle .callout > :last-child,
#fullArticle .callout-blue > :last-child,
#fullArticle .callout-green > :last-child,
#fullArticle .callout-red > :last-child,
#fullArticle .callout-yellow > :last-child,
#fullArticle .private-note > :last-child { margin-bottom: 0; }

#fullArticle .callout        { background: var(--brand-wash); border-color: var(--brand-100); border-left-color: var(--brand-500); }
#fullArticle .callout-blue   { background: var(--info-50);    border-color: #cfe0fb;           border-left-color: var(--info-500); }
#fullArticle .callout-green  { background: var(--success-50); border-color: #c6ebd7;           border-left-color: var(--success-500); }
#fullArticle .callout-yellow { background: var(--warning-50); border-color: #fbe2b5;           border-left-color: var(--warning-500); }
#fullArticle .callout-red    { background: var(--danger-50);  border-color: #f7c9ce;           border-left-color: var(--danger-500); }
#fullArticle .private-note   { background: var(--bg-sunken);  border-color: var(--border);     border-left-color: var(--neutral-400); }

#fullArticle .callout-blue,   #fullArticle .callout-blue p   { color: var(--neutral-700) !important; }
#fullArticle .callout-green,  #fullArticle .callout-green p  { color: var(--neutral-700) !important; }
#fullArticle .callout-yellow, #fullArticle .callout-yellow p { color: var(--neutral-700) !important; }
#fullArticle .callout-red,    #fullArticle .callout-red p    { color: var(--neutral-700) !important; }

/* Article rating */
.articleRatings {
  margin: 40px 0 0;
  padding: 16px 20px;
  gap: 16px;
  font-size: 14px;
  color: var(--fg-2);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.articleRatings-question { margin-right: 0; font-weight: 500; color: var(--fg-1); }
.articleRatings-actions { display: flex; gap: 8px; width: auto; }
.rateAction {
  width: 40px;
  height: 40px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: none;
}
.rateAction--positive { margin-right: 0; }
/* The face is a 24px icon positioned inside the button */
.rateAction .rating-face { left: 7px; top: 7px; fill: var(--fg-4); }
.rateAction:not([disabled=disabled]):hover,
.rateAction:not([disabled=disabled]):focus,
.rateAction.selected { background: var(--brand-wash); border-color: var(--brand-300); box-shadow: none; transform: scale(1.1); }
.rateAction.selected .rating-face,
.rateAction:hover:not([disabled=disabled]) .rating-face,
.rateAction:focus:not([disabled=disabled]) .rating-face { fill: var(--brand-500); }
.rateAction.selected::after { width: 40px; height: 40px; top: -5px; left: -5px; border-color: var(--success-500); }

/* "Still need help?" footer of an article */
.articleFoot {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--fg-3);
}
.articleFoot p,
.articleFoot time { font-family: var(--font-sans); font-style: normal; font-size: 14px; color: var(--fg-2); }
.articleFoot i { color: var(--brand-400); }
.articleFoot a.contactUs { font-weight: 500; color: var(--brand-500) !important; }
.articleFoot .lu {
  float: right;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-4);
}

/* Related articles, attached under the article card */
.related {
  margin-bottom: 32px;
  padding: 24px clamp(24px, 4vw, 48px) 28px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.related h3,
#sidebar h3 {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}
.related ul { margin: 0; padding: 10px 0 0; }
.related ul > li { padding: 5px 0; }
.related ul > li a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  color: var(--fg-1) !important;
}
.related ul > li a i { color: var(--brand-300); }
.related ul > li a:hover { color: var(--brand-500) !important; }
.related ul > li a:hover span { text-decoration: none; }

/* ------------------------------------------------------------ sidebar */

#sidebar { margin-top: 32px; }

#sidebar form .search-query {
  height: 42px;
  padding: 0 40px 0 14px;
  font-size: 14px;
  color: var(--fg);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: none;
}
#sidebar form .search-query:focus,
#sidebar form .search-query:focus:invalid {
  outline: none;
  border-color: var(--brand-500) !important;
  box-shadow: var(--shadow-focus);
}
#sidebar form button { top: 12px; right: 14px; }
#sidebar #searchBar .icon-search { color: var(--brand-500) !important; }
#sidebar #serp-dd { top: 50px; }

#sidebar h3 { margin: 0 0 8px 10px; }
#sidebar .nav-list { margin: 0 0 32px; }
#sidebar .nav-list > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--fg-2);
  text-shadow: none;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
#sidebar .nav-list > li > a:hover { background: var(--bg-sunken); color: var(--fg-1); }
#sidebar .nav-list > li.active > a,
#sidebar .nav-list > li.active > a:hover {
  background: var(--brand-tint);
  color: var(--brand-600);
  font-weight: 500;
}
#sidebar .nav-list .icon-arrow { color: var(--brand-300); font-size: 10px; }
#sidebar .nav-list li.active .icon-arrow { color: var(--brand-500); }

/* ------------------------------------------------------------- footer */

#contentArea > footer,
footer {
  margin-top: 48px;
  padding: 24px 0 8px;
  border-top: 1px solid var(--border);
}
footer p {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-4);
}
footer p a { color: var(--fg-3); }
footer p a:hover { color: var(--brand-500); }

/* --------------------------------------------------------- responsive */

@media (max-width: 979px) {
  #mainNav .nav-collapse { clear: both; }
  #mainNav .nav { position: static; margin: 0; padding: 4px 0 16px; }
  #mainNav .nav li a { display: inline-block; }
}

@media (max-width: 768px) {
  #mainNav .brand { height: 56px; }
  #mainNav .brand { gap: 10px; }
  #mainNav .brand::before { width: 120px; height: 13px; }
  #mainNav .brand span { gap: 10px; }
  #mainNav .brand span::after { font-size: 11px; white-space: nowrap; }
  #mainNav .btn-navbar { margin-top: 11px; }

  #docsSearch { margin: 0 -20px 32px; }
  #searchBar .search-query { padding-right: 22px; }
  #docsSearch #searchBar button { padding: 0 14px; }
  #docsSearch #searchBar button span { display: none; }
  #docsSearch #searchBar button .icon-search { display: inline; color: #fff; }

  .category-list { grid-template-columns: 1fr; gap: 12px; }
  #categoryHead .sort { margin-top: 16px; }

  #contentArea { padding-left: 16px; padding-right: 16px; }
  .contentWrapper { margin-top: 20px; padding: 24px 20px; }
  #fullArticle .title { margin-right: 0; }
  #fullArticle .printArticle { display: none; }
  .articleRatings { flex-direction: column; text-align: center; }
  .related { padding-left: 24px; padding-right: 24px; }
  .related h3 { padding-left: 0; }
}

@media print {
  #mainNav, #sidebar, .articleRatings, .related, footer { display: none !important; }
  .contentWrapper { border: 0; box-shadow: none; padding: 0; }
}