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


/*********************************
 * WILL0 x HELPSCOUT THEME
 * Based on Willo Brand Guide Apr 2024
 *********************************/

/* ---- Brand tokens from guidelines ---- */
:root {
  /* Primary */
  --willo-primary: #5A2AF2;      /* Primary Purple (brand primary) */
  --willo-primary-600: #4A21D6;  /* derived hover shade */
  --willo-primary-100: #EFE9FF;  /* derived tint */

  /* Secondary highlights (not for text backgrounds per guide) */
  --willo-pink: #FFC3E8;
  --willo-green: #8CE9A3;
  --willo-yellow: #F4D371;

  /* In-app semantic colours */
  --willo-danger: #FA401F;
  --willo-success: #26CC00;

  /* Neutrals */
  --willo-bg: #F1EEEB;          /* Neutral Grey */
  --willo-surface: #FFFFFF;     /* Neutral White */
  --willo-text: #1A1A1A;        /* safe body tone; close to Neutral Dark */
  --willo-muted: #444444;       /* Neutral Dark tuned for crispness */       /* Neutral Dark for long-form body copy */
  --willo-border: #E7E1DB;      /* derived warm border */

  /* Typography */
  --willo-font-sans: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --willo-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
                     "Courier New", monospace;

  /* Shape / effects */
  --willo-radius-lg: 16px;
  --willo-radius-md: 12px;
  --willo-radius-sm: 8px;
  --willo-shadow-sm: 0 4px 14px rgba(89, 89, 89, 0.08);
  --willo-shadow-md: 0 10px 30px rgba(89, 89, 89, 0.12);

  /* Layout */
  --willo-maxw: 1100px;
}

/* ===== Global ===== */
html, body {
  font-family: var(--willo-font-sans);
  color: var(--willo-text);
  background: var(--willo-bg);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
}

a, a:visited {
  color: var(--willo-primary);
  text-decoration: none;
  transition: color .15s ease;
}
a:hover {
  color: var(--willo-primary-600);
  text-decoration: underline;
}

/* Keep content width tidy */
.container,
#main,
.contentWrapper,
.content {
  max-width: var(--willo-maxw);
}

/* ===== Top nav / header ===== */
.navbar, .topbar, header {
  background: var(--willo-surface) !important;
  border-bottom: 1px solid var(--willo-border);
  box-shadow: var(--willo-shadow-sm);
}

.navbar a, .topbar a, header a {
  color: var(--willo-text) !important;
  font-weight: 600;
  font-size: inherit; /* larger top nav items */
}
.navbar a:hover, .topbar a:hover, header a:hover {
  color: var(--willo-primary) !important;
}

/* ===== Search hero ===== */
#docsSearch {
  /* Brand texture vibe without needing custom images */
  background:
    radial-gradient(1200px circle at 10% -10%, rgba(90, 42, 242, 0.16), transparent 55%),
    radial-gradient(900px circle at 110% 0%, rgba(255, 195, 232, 0.18), transparent 60%),
    var(--willo-surface);
  border-bottom: 1px solid var(--willo-border);
  padding: 64px 0 56px;
  position: relative;
}

#docsSearch h1 {
  font-weight: 700;              /* Poppins Semibold feel */
  letter-spacing: -0.02em;
  color: var(--willo-text);
}

/* Search bar + button */
#searchBar .search-query {
  background: var(--willo-surface);
  border: 1px solid var(--willo-border);
  box-shadow: var(--willo-shadow-sm);
  color: var(--willo-text);
  border-radius: 999px;
  padding: 14px 18px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#searchBar .search-query::placeholder {
  color: color-mix(in srgb, var(--willo-muted) 70%, white);
}
#searchBar .search-query:focus {
  border-color: var(--willo-primary);
  box-shadow: 0 0 0 4px rgba(90, 42, 242, 0.18);
  outline: none;
}

#searchBar button {
  background: var(--willo-primary);
  border-color: transparent;
  color: #fff;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
  box-shadow: var(--willo-shadow-sm);
  transition: background .15s ease, transform .05s ease;
}
#searchBar button:hover {
  background: var(--willo-primary-600);
  transform: translateY(-1px);
}
#searchBar button:active {
  transform: translateY(0);
}

/* ===== Category cards / home layout ===== */
.category-list .category,
.twoCol .collection, .threeCol .collection {
  background: var(--willo-surface);
  border: 1px solid var(--willo-border);
  border-radius: var(--willo-radius-lg);
  box-shadow: var(--willo-shadow-sm);
  padding: 18px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.category-list .category:hover,
.twoCol .collection:hover, .threeCol .collection:hover {
  transform: translateY(-2px);
  border-color: rgba(90, 42, 242, 0.35);
  box-shadow: var(--willo-shadow-md);
}

.category-list .category h3,
.collection h3 {
  font-weight: 700;              /* headline semibold */
  letter-spacing: -0.01em;
  color: var(--willo-text);
}

/* category meta / counts */
.category-list .category p,
.collection p,
.small, .muted {
  color: var(--willo-muted);
}

/* ===== Article list ===== */
.article-list a,
.collection a {
  font-weight: 600;
}

/* ===== Article pages ===== */
.article,
#article,
.article-body,
.content {
  background: var(--willo-surface);
  border: 1px solid var(--willo-border);
  border-radius: var(--willo-radius-lg);
  box-shadow: var(--willo-shadow-sm);
  padding: 28px;
}

.article h1, .article h2, .article h3,
.content h1, .content h2, .content h3 {
  letter-spacing: -0.02em;
  color: var(--willo-text);
  font-weight: 700;              /* Poppins Semibold for titles */
}

.article p, .content p,
.article li, .content li {
  line-height: 1.7;
  font-size: 16px;
  color: var(--willo-muted);     /* Neutral Dark for long-form */
}

/* subtle highlight blocks using secondary colours (as accents, not full text BGs) */
.alert, .note, .callout {
  border-left: 4px solid var(--willo-primary);
  background: var(--willo-primary-100);
  padding: 12px 14px;
  border-radius: var(--willo-radius-sm);
  color: var(--willo-text);
}

/* blockquotes */
blockquote {
  border-left: 4px solid var(--willo-primary);
  background: rgba(90, 42, 242, 0.06);
  padding: 12px 14px;
  border-radius: var(--willo-radius-sm);
  color: var(--willo-text);
}

/* code blocks */
pre, code {
  font-family: var(--willo-font-mono);
  font-size: 14px;
}
pre {
  background: #120A2C; /* deep purple-black */
  color: #F9FAFB;
  padding: 14px 16px;
  border-radius: var(--willo-radius-md);
  overflow: auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
code {
  background: #F6F2FF;
  padding: 2px 6px;
  border-radius: 6px;
}

/* tables */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
th, td {
  border-bottom: 1px solid var(--willo-border);
  padding: 10px 8px;
}
th {
  text-align: left;
  color: var(--willo-text);
  font-weight: 700;
}

/* optional: hide last updated line for cleaner feel */
.articleFoot time.lu {
  display: none;
}

/* ===== Footer ===== */
footer, .footer {
  margin-top: 40px;
  padding: 28px 0;
  color: var(--willo-muted);
  border-top: 1px solid var(--willo-border);
  background: var(--willo-bg);
}

/* ===== Buttons (CTAs) ===== */
.content a.button, .article a.button, button, .btn {
  background: var(--willo-primary);
  color: #fff !important;
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: var(--willo-shadow-sm);
}
.content a.button:hover, .article a.button:hover, button:hover, .btn:hover {
  background: var(--willo-primary-600);
  text-decoration: none;
}

/* ===== Mobile polish ===== */
@media (max-width: 640px) {
  #docsSearch { padding: 44px 0 36px; }
  .article, #article, .article-body, .content { padding: 18px; }
  .category-list .category { padding: 14px; }
}


/* ===== Top nav menu size (tuned) ===== */
/* Help Scout themes sometimes use different nav structures; this covers the common ones. */
.navbar a,
.navbar-nav a,
.navbar .nav a,
.topbar a,
.topbar .nav a,
header a,
header .nav a,
#docsNav a,
#docsNav .nav a,
#docsNav .navList a,
.siteNav a {
  font-size: clamp(14px, 0.85vw + 10px, 16px) !important;
  line-height: 1.25 !important;
  font-weight: 600;
}