/* ============================================================
   Turf Pro Logic — Help Center theme
   Matches the marketing site at turfprologic.com
   Paste into: Manage › Docs › Turf Pro Logic Help Center › Custom Code
   (Upload this file as the stylesheet, OR paste it into a
   <style> block in the Insert <head> code field.)
   ============================================================ */

/* Body font — Inter, same as the app */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --tpl-green: #16a34a;        /* green-600  (primary) */
  --tpl-green-dark: #15803d;   /* green-700  (hover)   */
  --tpl-green-50: #f0fdf4;
  --tpl-green-100: #dcfce7;
  --tpl-blue-50: #eff6ff;
  --tpl-ink: #111827;          /* gray-900 headings */
  --tpl-body: #374151;         /* gray-700 body     */
  --tpl-gray-600: #4b5563;
  --tpl-gray-500: #6b7280;
  --tpl-border: #e5e7eb;       /* gray-200 */
}

/* ---------- Type ---------- */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--tpl-body);
  background: #ffffff;
}

/* Headings use Fieldwork — the marketing display face.
   Requires the Typekit kit in Insert <head> code (see setup step 2):
   <link rel="stylesheet" href="https://use.typekit.net/orb8wtx.css"> */
#docsSearch h1,
h1, h2, h3,
.category-list .category h2,
.category-list .category h3 {
  font-family: 'fieldwork-hum', 'Inter', sans-serif;
  letter-spacing: -0.01em;
  color: var(--tpl-ink);
}

/* ---------- Hero / search banner ----------
   Soft green→blue→green gradient — the marketing hero,
   in place of the current black block. */
#docsSearch {
  background: linear-gradient(to bottom right, #f0fdf4, #eff6ff, #dcfce7);
  border-bottom: 1px solid var(--tpl-border);
  padding: 72px 20px 84px;
}
#docsSearch h1 {
  font-weight: 700;
  font-size: 40px;
}
#docsSearch p,
#docsSearch h2 {
  color: var(--tpl-gray-600);
}

/* Search field */
#searchBar .search-query,
#searchBar input[type="text"] {
  background: #ffffff;
  border: 1px solid var(--tpl-border);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  color: var(--tpl-ink);
  height: 52px;
}
#searchBar .search-query:focus,
#searchBar input[type="text"]:focus {
  border-color: var(--tpl-green);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
  outline: none;
}

/* Search button — brand green */
#searchBar button {
  background: var(--tpl-green);
  border: none;
  border-radius: 10px;
  color: #ffffff;
  font-weight: 600;
  padding: 0 24px;
}
#searchBar button:hover {
  background: var(--tpl-green-dark);
}

/* ---------- Topic cards ---------- */
.category-list .category {
  background: #ffffff;
  border: 1px solid var(--tpl-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.category-list .category:hover {
  transform: translateY(-2px);
  border-color: var(--tpl-green);
  box-shadow: 0 12px 24px -12px rgba(22, 163, 74, 0.35);
}
.category-list .category h2,
.category-list .category a {
  color: var(--tpl-ink);
  font-weight: 600;
}

/* Article-count pill */
.category-list .category .article-count {
  display: inline-block;
  background: var(--tpl-green-50);
  color: var(--tpl-green-dark);
  font-weight: 600;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 999px;
}

/* ---------- Article body links ---------- */
.contentWrapper a,
#fullArticle a {
  color: var(--tpl-green);
}
.contentWrapper a:hover,
#fullArticle a:hover {
  color: var(--tpl-green-dark);
}

/* ---------- Footer ---------- */
#footer, .footer {
  background: #f9fafb;
  color: var(--tpl-gray-500);
}
