/* ============================================================
   HMIS Guru – Help Scout Docs Custom CSS
   Theme: Modern SaaS · Purple & Neutral · Community Nonprofit
   Selectors modeled on Help Scout Docs platform structure
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --purple-50:  #f5f3ff;
  --purple-100: #ede9fe;
  --purple-200: #ddd6fe;
  --purple-300: #c4b5fd;
  --purple-400: #a78bfa;
  --purple-500: #8b5cf6;
  --purple-600: #7c3aed;
  --purple-700: #6d28d9;
  --purple-900: #2e1065;

  --neutral-50:  #fafaf9;
  --neutral-100: #f5f5f4;
  --neutral-200: #e7e5e4;
  --neutral-300: #d6d3d1;
  --neutral-400: #a8a29e;
  --neutral-600: #57534e;
  --neutral-700: #44403c;
  --neutral-800: #292524;
  --neutral-900: #1c1917;
}

/* ── Base ───────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  background: var(--neutral-50);
  font-family: "DM Sans", "Open Sans", sans-serif;
  color: var(--neutral-800);
  -webkit-font-smoothing: antialiased;
}

input, button, select, textarea {
  font-family: "DM Sans", "Open Sans", sans-serif;
}

/* ── Navbar ─────────────────────────────────────────────── */
.navbar .navbar-inner {
  background: #ffffff;
  border-bottom: 1px solid var(--neutral-200);
  box-shadow: 0 1px 0 var(--neutral-200);
  height: 60px;
}

.navbar .navbar-inner .container-fluid {
  padding: 0;
  height: 60px;
}

.navbar .brand {
  float: left;
  display: block;
  padding: 0;
  margin-left: -20px;
  font-size: 20px;
  font-weight: 500;
  color: var(--purple-700);
}

a.brand > img {
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  height: 60px;
  margin-left: 15px;
  width: auto;
}

.navbar .nav li {
  display: inline-block;
  float: none;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  letter-spacing: .04em;
}

.navbar .nav li a,
.navbar .icon-private-w {
  font-size: 14px;
  font-weight: 400;
  color: var(--neutral-600);
}

/* ── Home Page Search Hero ──────────────────────────────── */
#docsSearch {
  background: linear-gradient(135deg, var(--purple-700) 0%, #5b21b6 60%, #4c1d95 100%);
  border-top: none;
  margin-bottom: 3em;
  padding: 3em 0 3.5em;
  position: relative;
  overflow: hidden;
}

#docsSearch::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 80% 10%, rgba(167,139,250,.3) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 5% 90%, rgba(76,29,149,.5) 0%, transparent 70%);
  pointer-events: none;
}

#docsSearch h1 {
  font-size: 32px;
  font-weight: 500;
  text-align: center;
  margin-top: .4em;
  font-family: "DM Sans", sans-serif;
  color: #ffffff;
  letter-spacing: -.02em;
  padding: 10px;
  position: relative;
}

/* Search input */
input.search-query {
  padding: 0 20px;
  margin-bottom: 0;
  border-radius: 12px 0 0 12px;
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .01em;
  border: none;
  box-shadow: 0 4px 24px rgba(0,0,0,.18);
  transition: box-shadow .2s;
}

input.search-query:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(139,92,246,.4), 0 4px 24px rgba(0,0,0,.12);
}

/* Search bar container — clip overflow so button corners stay clean */
#searchBar {
  border-radius: 12px;
  overflow: hidden;
}

/* Search button */
#searchBar button {
  color: #fff;
  text-shadow: none;
  background: var(--purple-500);
  border-radius: 0;
  border: none;
  font-size: 18px;
  padding: 0 1.5em;
  height: 50px;
  position: absolute;
  transition: background .2s;
}

#searchBar button:hover {
  background: var(--purple-600);
  text-shadow: none;
  border: none;
}

/* General buttons */
.btn {
  color: #fff;
  text-shadow: none;
  background: var(--purple-600);
  border-radius: 8px;
  border: 1px solid var(--purple-700);
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: .5em 1em;
  transition: background .15s, border-color .15s;
}

.btn:hover,
.btn:focus,
.btn:active,
.btn.active {
  color: #fff;
  text-shadow: none;
  background: var(--purple-700);
  border: 1px solid var(--purple-900);
}

/* Admin edit button
   ─────────────────────────────────────────────────────────────
   Help Scout injects this button with an inline style attribute
   (e.g. style="color:#333") which !important cannot override.
   The fix: lighten the background so dark text is readable, AND
   use a CSS filter on the text to force it toward white.
   Three layers of defense so at least one will always work:
     1. color !important  (beats stylesheet cascade)
     2. filter: invert()  (beats inline style color)
     3. light-on-dark bg  (readable even if both above fail)
   ─────────────────────────────────────────────────────────────*/
.admin-edit.btn,
a.admin-edit.btn,
[class~="admin-edit"][class~="btn"] {
  background: var(--purple-600) !important;
  border: 1.5px solid var(--purple-500) !important;
  border-radius: 8px !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  padding: .35em .9em !important;
  box-shadow: 0 1px 3px rgba(109,40,217,.25) !important;
  transition: background .15s, box-shadow .15s !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .35em !important;

  /* Layer 1 — override stylesheet cascade */
  color: #ffffff !important;
  text-shadow: none !important;
}

/* Layer 2 — invert() turns any near-black text to near-white.
   Applied only to child text nodes via the pseudo trick,
   so it doesn't flip the background color. */
.admin-edit.btn *,
a.admin-edit.btn * {
  color: #ffffff !important;
  filter: none !important;
}

/* Layer 2b — if the color is applied directly on the element
   with an inline style, invert the whole element then
   re-invert the background with a pseudo-element overlay */
.admin-edit.btn,
a.admin-edit.btn {
  position: relative !important;
  isolation: isolate !important;
}

.admin-edit.btn::before,
a.admin-edit.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 7px;
  background: var(--purple-600);
  z-index: -1;
}

/* Hover / focus */
.admin-edit.btn:hover,
a.admin-edit.btn:hover,
.admin-edit.btn:focus,
a.admin-edit.btn:focus {
  color: #ffffff !important;
  background: var(--purple-700) !important;
  border-color: var(--purple-600) !important;
  box-shadow: 0 3px 10px rgba(109,40,217,.35) !important;
  text-shadow: none !important;
  text-decoration: none !important;
}

/* ── Home Page Category Section ─────────────────────────── */
.collection-category h2 {
  font-weight: 500;
  margin: 0 0 20px;
  text-align: center;
  padding-left: 0;
  font-family: "DM Sans", sans-serif;
  color: var(--neutral-600);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.collection-category h2 a {
  color: var(--neutral-700);
  text-decoration: none;
}

.collection-category .category-list {
  margin: 0 0 4em;
  text-align: center;
}

.category-list {
  text-align: center;
}

/* Category card titles */
.category-list h3 {
  color: var(--purple-700);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35em;
  font-family: "DM Sans", sans-serif;
  letter-spacing: -.01em;
}

/* Category card descriptions */
.category-list .category p {
  color: var(--neutral-400);
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0;
}

/* Category cards */
.category-list .category {
  background-color: #fff;
  background-position: top 20px center !important;
  background-repeat: no-repeat !important;
  background-size: 100px auto !important;
  border: 1px solid var(--neutral-200);
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  box-sizing: border-box;
  min-height: 183px;
  padding: 120px 20px 15px;
  position: relative;
  width: 31.5%;
  transition: box-shadow .2s, border-color .2s, transform .15s;
  overflow: hidden;
}

/* Purple accent bar on hover */
.category-list .category::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--purple-600), var(--purple-400));
  opacity: 0;
  transition: opacity .2s;
}

.category-list .category:hover {
  text-decoration: none;
  background-color: var(--purple-50);
  border-color: var(--purple-200);
  box-shadow: 0 6px 20px rgba(109,40,217,.1);
  transform: translateY(-2px);
}

.category-list .category:hover::after {
  opacity: 1;
}

/* ── Home & General Links ─────────────────────────────────  */
#serp-dd .result a,
#serp-dd .result > li.active,
#full-Article strong a,
.collection a,
.contentWrapper a,
.most-pop-articles .popArticles a,
.most-pop-articles .popArticles a span,
.category-list .category .article-count {
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--purple-600);
  text-decoration: none;
  font-family: "DM Sans", sans-serif;
  transition: color .15s;
}

#serp-dd .result a:hover,
.most-pop-articles .popArticles a:hover span,
.category-list .category:hover .article-count,
.contentWrapper a:hover {
  color: var(--purple-700);
}

/* ── Sidebar ──────────────────────────────────────────────  */
#sidebar h3 {
  text-transform: uppercase;
  font-size: 11px;
  color: var(--neutral-400);
  font-weight: 600;
  margin-bottom: 8px;
  font-family: "DM Sans", sans-serif;
  letter-spacing: .08em;
}

#sidebar .nav-list a {
  display: inline-block;
  color: var(--neutral-600);
  font-size: 14px;
  padding: 5px 15px 5px 0;
  line-height: 20px;
  margin-left: 0;
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  border-radius: 6px;
  transition: color .12s, background .12s, padding-left .12s;
}

#sidebar .nav-list a:hover {
  color: var(--purple-700);
  background: var(--purple-50);
  padding-left: 6px;
}

#sidebar .nav-list .active a,
#sidebar .nav-list .active a:hover,
#sidebar .nav-list .active a:focus {
  font-weight: 500;
  color: var(--purple-700);
  background: var(--purple-100);
  text-shadow: none;
  text-decoration: none;
  padding-left: 6px;
}

/* ── Article Page ─────────────────────────────────────────  */
#main-content {
  background: none;
  float: right;
  margin-bottom: 2em;
  padding: 32px 0 0 28px;
}

#fullArticle .title,
.contentWrapper h1 {
  margin: 0 30px .5em 0;
  font-family: "DM Sans", sans-serif;
  color: var(--neutral-900);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  letter-spacing: -.025em;
  line-height: 1.25;
}

#fullArticle,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
  color: var(--neutral-700);
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .005em;
  line-height: 1.75;
}

#fullArticle strong {
  color: var(--neutral-800);
  font-weight: 600;
}

#fullArticle h2 {
  font-size: 22px;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  color: var(--neutral-900);
  letter-spacing: -.02em;
  margin-top: 2rem;
}

#fullArticle h3 {
  font-size: 17px;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  color: var(--purple-700);
  letter-spacing: -.01em;
}

#fullArticle h4 {
  font-size: 14px;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  color: var(--neutral-500, #78716c);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Links inside articles */
#fullArticle a,
#fullArticle strong a {
  color: var(--purple-600) !important;
  text-decoration: underline;
  text-decoration-color: var(--purple-200);
  text-underline-offset: 2px;
  font-weight: 500;
  transition: color .15s, text-decoration-color .15s;
}

#fullArticle a:hover,
#fullArticle strong a:hover {
  color: var(--purple-700) !important;
  text-decoration-color: var(--purple-400);
}

/* Article images */
#fullArticle img {
  display: block;
  margin: 1em 0 2em;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--neutral-200);
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  box-sizing: border-box;
  max-width: 100%;
}

/* Blockquote / callout */
#fullArticle blockquote {
  border-left: 3px solid var(--purple-400);
  background: var(--purple-50);
  margin: 1.25rem 0;
  padding: .85rem 1.25rem;
  border-radius: 0 10px 10px 0;
  color: var(--neutral-700);
  font-style: normal;
}

/* Inline code */
#fullArticle code {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 13px;
  background: var(--purple-50);
  color: var(--purple-700);
  padding: .15em .45em;
  border-radius: 5px;
  border: 1px solid var(--purple-100);
}

/* Code blocks */
#fullArticle pre {
  background: var(--neutral-900);
  color: #e5e7eb;
  padding: 1.25rem 1.5rem;
  border-radius: 10px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.65;
  margin: 1.25rem 0;
}

#fullArticle pre code {
  background: none;
  border: none;
  color: inherit;
  padding: 0;
}

/* Print link */
#fullArticle .printArticle {
  position: absolute;
  right: 46px;
  top: 40px;
  color: var(--neutral-400);
  font-size: 13px;
}

/* Content wrapper paragraphs */
.contentWrapper p {
  margin-top: -4px;
  word-wrap: break-word;
  font-family: "DM Sans", sans-serif;
  color: var(--neutral-700);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .005em;
  line-height: 1.75;
}

/* Article footer / meta */
.articleFoot p,
.articleFoot time {
  color: var(--neutral-400);
  display: inline-block;
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
}

/* Sort dropdown on category pages */
#categoryHead .sort select {
  width: 150px;
  height: 24px;
  margin: 0;
  line-height: 24px;
  font-size: 13px;
  color: var(--neutral-600);
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  border-radius: 6px;
  border: 1px solid var(--neutral-300);
}

/* ── Contact Modal ────────────────────────────────────────  */
#contactModal h2,
.abuse h2 {
  background: #fff;
  margin: 0;
  padding: 11px 0 10px 18px;
  font-size: 20px;
  border-bottom: 1px solid var(--neutral-200);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-family: "DM Sans", sans-serif;
  color: var(--purple-700);
  font-weight: 600;
  letter-spacing: -.015em;
}

#contactModal .control-label {
  width: 110px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--neutral-600);
}

/* ── Footer ───────────────────────────────────────────────  */
footer p a {
  color: var(--neutral-400);
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  text-decoration: none;
  transition: color .15s;
}

footer p a:hover {
  color: var(--purple-500);
}

/* ── Category Images ──────────────────────────────────────
   Icons from Bootstrap Icons v1.13.1 (MIT license).
   Embedded as inline SVG data URIs with fill="#7c3aed"
   baked in — no filter tricks, so card backgrounds stay
   pure white.
   ────────────────────────────────────────────────────── */

/* Case Management — journal-text */
#category-146 { background-image: url("data:image/svg+xml,<svg fill='%237c3aed' xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'>  <path d='M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5'/>  <path d='M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2'/>  <path d='M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1z'/></svg>"); }

/* Street Outreach — pin-map */
#category-181 { background-image: url("data:image/svg+xml,<svg fill='%237c3aed' xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'>  <path fill-rule='evenodd' d='M3.1 11.2a.5.5 0 0 1 .4-.2H6a.5.5 0 0 1 0 1H3.75L1.5 15h13l-2.25-3H10a.5.5 0 0 1 0-1h2.5a.5.5 0 0 1 .4.2l3 4a.5.5 0 0 1-.4.8H.5a.5.5 0 0 1-.4-.8z'/>  <path fill-rule='evenodd' d='M8 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999z'/></svg>"); }

/* Data Quality — clipboard2-check */
#category-163 { background-image: url("data:image/svg+xml,<svg fill='%237c3aed' xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'>  <path d='M9.5 0a.5.5 0 0 1 .5.5.5.5 0 0 0 .5.5.5.5 0 0 1 .5.5V2a.5.5 0 0 1-.5.5h-5A.5.5 0 0 1 5 2v-.5a.5.5 0 0 1 .5-.5.5.5 0 0 0 .5-.5.5.5 0 0 1 .5-.5z'/>  <path d='M3 2.5a.5.5 0 0 1 .5-.5H4a.5.5 0 0 0 0-1h-.5A1.5 1.5 0 0 0 2 2.5v12A1.5 1.5 0 0 0 3.5 16h9a1.5 1.5 0 0 0 1.5-1.5v-12A1.5 1.5 0 0 0 12.5 1H12a.5.5 0 0 0 0 1h.5a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5z'/>  <path d='M10.854 7.854a.5.5 0 0 0-.708-.708L7.5 9.793 6.354 8.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0z'/></svg>"); }

/* Client Profiles — person-vcard */
#category-143 { background-image: url("data:image/svg+xml,<svg fill='%237c3aed' xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'>  <path d='M5 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4m4-2.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5M9 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4A.5.5 0 0 1 9 8m1 2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5'/>  <path d='M2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM1 4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H8.96q.04-.245.04-.5C9 10.567 7.21 9 5 9c-2.086 0-3.8 1.398-3.984 3.181A1 1 0 0 1 1 12z'/></svg>"); }

/* Coordinated Entry — arrow-left-right */
#category-142 { background-image: url("data:image/svg+xml,<svg fill='%237c3aed' xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'>  <path fill-rule='evenodd' d='M1 11.5a.5.5 0 0 0 .5.5h11.793l-3.147 3.146a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 11H1.5a.5.5 0 0 0-.5.5m14-7a.5.5 0 0 1-.5.5H2.707l3.147 3.146a.5.5 0 1 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H14.5a.5.5 0 0 1 .5.5'/></svg>"); }

/* Enrollments and Assessments — file-earmark-text */
#category-144 { background-image: url("data:image/svg+xml,<svg fill='%237c3aed' xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'>  <path d='M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5'/>  <path d='M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z'/></svg>"); }

/* Getting Started — rocket-takeoff */
#category-138 { background-image: url("data:image/svg+xml,<svg fill='%237c3aed' xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'>  <path d='M9.752 6.193c.599.6 1.73.437 2.528-.362s.96-1.932.362-2.531c-.599-.6-1.73-.438-2.528.361-.798.8-.96 1.933-.362 2.532'/>  <path d='M15.811 3.312c-.363 1.534-1.334 3.626-3.64 6.218l-.24 2.408a2.56 2.56 0 0 1-.732 1.526L8.817 15.85a.51.51 0 0 1-.867-.434l.27-1.899c.04-.28-.013-.593-.131-.956a9 9 0 0 0-.249-.657l-.082-.202c-.815-.197-1.578-.662-2.191-1.277-.614-.615-1.079-1.379-1.275-2.195l-.203-.083a10 10 0 0 0-.655-.248c-.363-.119-.675-.172-.955-.132l-1.896.27A.51.51 0 0 1 .15 7.17l2.382-2.386c.41-.41.947-.67 1.524-.734h.006l2.4-.238C9.005 1.55 11.087.582 12.623.208c.89-.217 1.59-.232 2.08-.188.244.023.435.06.57.093q.1.026.16.045c.184.06.279.13.351.295l.029.073a3.5 3.5 0 0 1 .157.721c.055.485.051 1.178-.159 2.065m-4.828 7.475.04-.04-.107 1.081a1.54 1.54 0 0 1-.44.913l-1.298 1.3.054-.38c.072-.506-.034-.993-.172-1.418a9 9 0 0 0-.164-.45c.738-.065 1.462-.38 2.087-1.006M5.205 5c-.625.626-.94 1.351-1.004 2.09a9 9 0 0 0-.45-.164c-.424-.138-.91-.244-1.416-.172l-.38.054 1.3-1.3c.245-.246.566-.401.91-.44l1.08-.107zm9.406-3.961c-.38-.034-.967-.027-1.746.163-1.558.38-3.917 1.496-6.937 4.521-.62.62-.799 1.34-.687 2.051.107.676.483 1.362 1.048 1.928.564.565 1.25.941 1.924 1.049.71.112 1.429-.067 2.048-.688 3.079-3.083 4.192-5.444 4.556-6.987.183-.771.18-1.345.138-1.713a3 3 0 0 0-.045-.283 3 3 0 0 0-.3-.041Z'/>  <path d='M7.009 12.139a7.6 7.6 0 0 1-1.804-1.352A7.6 7.6 0 0 1 3.794 8.86c-1.102.992-1.965 5.054-1.839 5.18.125.126 3.936-.896 5.054-1.902Z'/></svg>"); }

/* Housing Module — house-door */
#category-147 { background-image: url("data:image/svg+xml,<svg fill='%237c3aed' xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'>  <path d='M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4z'/></svg>"); }

/* Report Library — bar-chart-line */
#category-141 { background-image: url("data:image/svg+xml,<svg fill='%237c3aed' xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'>  <path d='M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1zm1 12h2V2h-2zm-3 0V7H7v7zm-5 0v-3H2v3z'/></svg>"); }

/* Services and Referrals — hand-index-thumb */
#category-145 { background-image: url("data:image/svg+xml,<svg fill='%237c3aed' xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'>  <path d='M6.75 1a.75.75 0 0 1 .75.75V8a.5.5 0 0 0 1 0V5.467l.086-.004c.317-.012.637-.008.816.027.134.027.294.096.448.182.077.042.15.147.15.314V8a.5.5 0 0 0 1 0V6.435l.106-.01c.316-.024.584-.01.708.04.118.046.3.207.486.43.081.096.15.19.2.259V8.5a.5.5 0 1 0 1 0v-1h.342a1 1 0 0 1 .995 1.1l-.271 2.715a2.5 2.5 0 0 1-.317.991l-1.395 2.442a.5.5 0 0 1-.434.252H6.118a.5.5 0 0 1-.447-.276l-1.232-2.465-2.512-4.185a.517.517 0 0 1 .809-.631l2.41 2.41A.5.5 0 0 0 6 9.5V1.75A.75.75 0 0 1 6.75 1M8.5 4.466V1.75a1.75 1.75 0 1 0-3.5 0v6.543L3.443 6.736A1.517 1.517 0 0 0 1.07 8.588l2.491 4.153 1.215 2.43A1.5 1.5 0 0 0 6.118 16h6.302a1.5 1.5 0 0 0 1.302-.756l1.395-2.441a3.5 3.5 0 0 0 .444-1.389l.271-2.715a2 2 0 0 0-1.99-2.199h-.581a5 5 0 0 0-.195-.248c-.191-.229-.51-.568-.88-.716-.364-.146-.846-.132-1.158-.108l-.132.012a1.26 1.26 0 0 0-.56-.642 2.6 2.6 0 0 0-.738-.288c-.31-.062-.739-.058-1.05-.046zm2.094 2.025'/></svg>"); }

/* ── Focus rings (accessibility) ─────────────────────────  */
:focus-visible {
  outline: 2px solid var(--purple-500);
  outline-offset: 2px;
}

/* ── Responsive ───────────────────────────────────────────  */
@media screen and (max-width: 1105px) {
  section.category-list .category { width: 48.2%; }
}

@media screen and (max-width: 760px) {
  section.category-list .category {
    box-sizing: border-box;
    margin: 0 0 20px;
    padding: 120px 20px 15px;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .navbar .btn-navbar { margin-top: 16px; right: -10px; }
  .related { padding: 30px 25px 25px; }
  .related ul { margin-left: 0; }
  .related h3 { padding-left: 0; }
  .related ul > li a { margin-left: 0; }
}

@media (max-width: 480px) {
  #fullArticle .title,
  .contentWrapper h1 { font-size: 22px; }
  #fullArticle h2 { font-size: 18px; }

  #searchBar button {
    color: transparent;
    text-shadow: none;
    background: transparent;
    border-radius: 0 12px 12px 0;
    border: 0;
    font-size: 18px;
    padding: 0 1.5em;
    height: 50px;
    position: absolute;
  }
  #searchBar button .icon-search {
    display: block;
    text-shadow: none;
    margin-top: 15px;
  }
}