/* =====================================================================
   FLAVIO KNOWLEDGE BASE - Help Scout Docs custom stylesheet
   Paste into: Help Scout > Docs > [your site] > Settings > Styling >
   "Custom CSS".  Palette matches your Branding panel.
   ===================================================================== */

/* ---- 1. Brand variables (edit colors in ONE place) ---------------- */
:root {
  --fl-page-bg:      #ffffff;
  --fl-header-bg:    #2c323d;  /* dark header; pink logo pops on it */
  --fl-nav-text:     #c0c0c0;
  --fl-nav-active:   #ffffff;
  --fl-brand:        #F20CB8;  /* Flavio magenta: buttons, accents, hovers */
  --fl-link:         #C00A93;  /* inline links: darkened pink, WCAG AA ~5.7:1 */
  --fl-link-hover:   #F20CB8;
  --fl-text:         #585858;
  --fl-heading:      #2c323d;
  --fl-border:       #e6e8eb;
  --fl-surface:      #f7f8f9;
  --fl-radius:       10px;
  --fl-maxwidth:     760px;
}

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

body, .docs, .page, input, button, select, textarea {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--fl-text);
  background: var(--fl-page-bg);
}
body { font-size: 16px; line-height: 1.65; }

/* ---- 3. Headings -------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.article h1, .article h2, .article h3 {
  color: var(--fl-heading);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.article h1 { font-size: 2rem; margin-bottom: .5em; }
.article h2 { font-size: 1.5rem; margin-top: 1.8em; }
.article h3 { font-size: 1.2rem; margin-top: 1.4em; }

/* ---- 4. Header / top bar + HARD logo cap -------------------------- */
#header, .header, .page-header, header.full {
  background: var(--fl-header-bg) !important;
  border-bottom: none;
}
/* Logo can never blow up again, whatever markup HS uses. Tune 48px. */
#header img, .header img, .logo img, .logo a img, #logo img, a.logo img {
  max-height: 48px !important;
  width: auto !important;
}
#header .container, .header .container, .page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}

/* ---- 5. Navigation styling ---------------------------------------- */
#header a, .header a, .nav a, .navbar a {
  color: var(--fl-nav-text);
  transition: color .15s ease;
}
#header a:hover, .header a:hover,
.nav a:hover, .nav a.active, .nav li.active a {
  color: var(--fl-nav-active);
}

/* ---- 5b. Hide the auto-generated collection menu in the header ---- */
/* Those "Local Business...", "Troubleshooting"... links are your Docs
   collections. The theme prints them in the header with NO admin toggle.
   We hit them by their /collection/ URL so it works no matter what the
   theme names the wrapper. :has() removes the empty <li> too. Comment
   this block out to bring the menu back. */
#header a[href*="/collection/"],
.header a[href*="/collection/"],
header a[href*="/collection/"]            { display: none !important; }
#header li:has(a[href*="/collection/"]),
.header li:has(a[href*="/collection/"]),
header li:has(a[href*="/collection/"])    { display: none !important; }
#toggleNav, a.toggleNav, .nav-toggle, button[class*="toggle"] {
  display: none !important;
}

/* ---- 6. Search box ------------------------------------------------ */
#docsSearch input, .search input, input[type="search"] {
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius);
  padding: 12px 16px;
}

/* ---- 7. Links ----------------------------------------------------- */
a { color: var(--fl-link); text-decoration: none; }
a:hover { color: var(--fl-link-hover); text-decoration: underline; }

/* ---- 8. Article / content body ------------------------------------ */
.content, .article, .article-body {
  max-width: var(--fl-maxwidth);
  margin: 0 auto;
}
.article p, .article li { color: var(--fl-text); }
.article img, .article video {
  max-width: 100%;
  border-radius: var(--fl-radius);
  border: 1px solid var(--fl-border);
}
.article blockquote {
  border-left: 4px solid var(--fl-brand);
  background: var(--fl-surface);
  margin: 1.5em 0;
  padding: 1em 1.25em;
  border-radius: 0 var(--fl-radius) var(--fl-radius) 0;
  color: var(--fl-text);
}
.article code {
  background: var(--fl-surface);
  border: 1px solid var(--fl-border);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: .9em;
}
.article pre {
  background: var(--fl-header-bg);
  color: #f5f5f5;
  border-radius: var(--fl-radius);
  padding: 1em 1.25em;
  overflow-x: auto;
}
.article pre code { background: none; border: none; color: inherit; }
.article table { width: 100%; border-collapse: collapse; margin: 1.5em 0; }
.article th, .article td {
  border: 1px solid var(--fl-border);
  padding: 10px 14px;
  text-align: left;
}
.article th { background: var(--fl-surface); color: var(--fl-heading); }

/* ---- 9. Category / landing cards ---------------------------------- */
.category, .category-list li, .docs-category {
  background: #fff;
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius);
  transition: box-shadow .15s ease, transform .15s ease;
}
.category:hover, .category-list li:hover, .docs-category:hover {
  box-shadow: 0 6px 20px rgba(44,50,61,.08);
  transform: translateY(-2px);
}

/* ---- 10. Buttons -------------------------------------------------- */
.button, .btn, button[type="submit"] {
  background: var(--fl-brand);
  color: #fff;
  border: none;
  border-radius: var(--fl-radius);
  padding: 12px 22px;
  font-weight: 600;
  transition: background .15s ease;
}
.button:hover, .btn:hover, button[type="submit"]:hover {
  background: var(--fl-link);   /* darker pink on hover */
  color: #fff;
}

/* ---- 11. Footer --------------------------------------------------- */
#footer, .footer, footer {
  background: var(--fl-header-bg);
  color: var(--fl-nav-text);
  border-top: none;
}
#footer a, .footer a, footer a { color: var(--fl-nav-text); }
#footer a:hover, .footer a:hover, footer a:hover { color: var(--fl-nav-active); }

/* ---- 12. Mobile polish ------------------------------------------- */
@media (max-width: 600px) {
  body { font-size: 15px; }
  .article h1 { font-size: 1.6rem; }
  .content, .article { padding-left: 16px; padding-right: 16px; }
}