/* ============================================================
   PsiFi Help Center — brand stylesheet
   Upload via: Help Scout → Manage → Docs → Psi Finance Knowledge Base
   → Customize → Custom Code → "Upload stylesheet" (or paste as a URL).
   Layers on top of the theme colors already set via the Docs API.
   Brand: signature green #77E36D; headings in Comfortaa; clean light UI.
   (Primary brand font is Versatylo — if you have its .woff2, drop in an
    @font-face below and swap --font-head to 'Versatylo'.)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;500;600;700&display=swap');

:root {
  --psi-green: #1f9d4e;        /* readable green for links/buttons on white */
  --psi-green-bright: #77e36d; /* signature accent */
  --psi-green-dark: #157a3a;   /* hover/active */
  --psi-tint: #f4fbf3;         /* light green wash */
  --psi-ink: #14181f;          /* body text */
  --psi-muted: #5b6470;        /* secondary text */
  --psi-border: #e6eae8;
  --font-head: 'Comfortaa', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Base typography ---- */
body, .body, p, li { font-family: var(--font-body); color: var(--psi-ink); }
body { background: #fff; -webkit-font-smoothing: antialiased; line-height: 1.65; }
h1, h2, h3, h4, .page-title, .hero h1, #hero h1 { font-family: var(--font-head); color: var(--psi-ink); letter-spacing: -0.01em; }
h1 { font-weight: 700; }
h2, h3 { font-weight: 600; }

/* ---- Links + accents ---- */
a, a:visited { color: var(--psi-green); text-decoration: none; }
a:hover { color: var(--psi-green-dark); text-decoration: underline; }

/* ---- Header / nav (Help Scout Docs uses a Bootstrap-style #mainNav.navbar > a.brand > img) ---- */
#mainNav, #mainNav.navbar, .navbar, #fullHeader, .site-header {
  background: var(--psi-tint) !important;
  border-bottom: 1px solid var(--psi-border);
}
#mainNav .nav a, .navbar .nav a, .site-header a { color: var(--psi-ink); }
/* Constrain the brand logo to a normal navbar height (it renders full-size otherwise) */
#mainNav .brand img, .navbar .brand img, a.brand img, .logo img {
  max-height: 32px;
  width: auto;
}

/* ---- Search hero ---- */
#hero, .hero, .docsHero, .search-hero {
  background: linear-gradient(180deg, var(--psi-tint) 0%, #ffffff 100%) !important;
  border-bottom: 1px solid var(--psi-border);
  padding: 48px 16px;
}
#hero h1, .hero h1 { color: var(--psi-ink); }
input[type="search"], input[type="text"], .searchInput, #searchInput, input.search-query, #searchBar input {
  border: 1.5px solid var(--psi-border);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: var(--font-body);
}
input[type="search"]:focus, .searchInput:focus, #searchInput:focus, input.search-query:focus, #searchBar input:focus {
  outline: none;
  border-color: var(--psi-green);
  box-shadow: 0 0 0 3px rgba(119, 227, 109, 0.35);
}

/* ---- Collection / category / article cards ---- */
.collection, .category, .article-list-item, .collections li, .categories li, .grid-item {
  border: 1px solid var(--psi-border);
  border-radius: 14px;
  background: #fff;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.collection:hover, .category:hover, .article-list-item:hover, .grid-item:hover {
  border-color: var(--psi-green-bright);
  box-shadow: 0 6px 20px rgba(20, 24, 31, 0.07);
  transform: translateY(-1px);
}
.collection h2, .category h2, .collection .icon, .category .icon { color: var(--psi-ink); }

/* ---- Article body ---- */
#artBody, .article-body, .article, .content {
  font-size: 16px;
  color: var(--psi-ink);
}
#artBody h2, .article-body h2 { margin-top: 1.8em; padding-bottom: .3em; border-bottom: 1px solid var(--psi-border); }
#artBody h3, .article-body h3 { margin-top: 1.4em; color: var(--psi-ink); }
#artBody ul li, .article-body ul li { margin: .35em 0; }
#artBody a, .article-body a { font-weight: 600; }
blockquote {
  border-left: 4px solid var(--psi-green-bright);
  background: var(--psi-tint);
  padding: 12px 16px;
  border-radius: 0 10px 10px 0;
  color: var(--psi-ink);
}
code, pre { background: #f5f7f6; border-radius: 8px; }
code { padding: 2px 6px; }
pre { padding: 14px 16px; border: 1px solid var(--psi-border); }

/* ---- Buttons ---- */
.button, button, .btn, a.button, input[type="submit"] {
  background: var(--psi-green) !important;
  color: #fff !important;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-family: var(--font-head);
  font-weight: 600;
}
.button:hover, button:hover, .btn:hover, a.button:hover { background: var(--psi-green-dark) !important; }

/* ---- Tables ---- */
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid var(--psi-border); padding: 10px 12px; text-align: left; }
th { background: var(--psi-tint); font-family: var(--font-head); }

/* ---- Footer ---- */
#footer, .site-footer, footer, footer.center { background: var(--psi-tint); border-top: 1px solid var(--psi-border); color: var(--psi-muted); }
#footer a, .site-footer a, footer a { color: var(--psi-green); }

/* Hide the "Powered by Help Scout" attribution (keeps your copyright line) */
footer a[href*="helpscout"],
footer span:has(a[href*="helpscout"]) { display: none !important; }