/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║   NUDGE HELP CENTER — Helpscout Docs custom styles           ║
 * ║   Source of truth: this file in repo.                        ║
 * ║   Deploy: paste into Helpscout admin → Docs Site →           ║
 * ║           Settings → Custom Code → Custom CSS.               ║
 * ║                                                              ║
 * ║   Targets real selectors found in help.nudge.new DOM         ║
 * ║   (#mainNav, #docsSearch, .twoCol, section.collection,       ║
 * ║   .popArticles, #fullArticle, footer.center).                ║
 * ║                                                              ║
 * ║   IMPORTANT: Helpscout injects an inline <style> block       ║
 * ║   with admin-set colors. Selectors below carry enough        ║
 * ║   specificity (or !important) to win that fight.             ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

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

/* ───────────────────────────────────────────────────────────────
   Design tokens — mirrored from nudge.new tokens.css
   ─────────────────────────────────────────────────────────────── */
:root {
  --nudge-primary:        #4B4E80;
  --nudge-primary-dark:   #3A3D65;
  --nudge-primary-glow:   rgba(75, 78, 128, 0.30);
  --nudge-primary-tint:   rgba(75, 78, 128, 0.08);

  --nudge-bg:             #FFFFFF;
  --nudge-bg-soft:        #FCFCFA;
  --nudge-bg-lavender:    #EEF1FA;

  --nudge-fg:             #1C1917;
  --nudge-fg-muted:       #78716C;
  --nudge-fg-on-primary:  #FAFAF9;

  --nudge-border:         #E7E5E4;
  --nudge-border-warm:    rgba(41, 37, 36, 0.08);

  --nudge-radius:         10px;
  --nudge-radius-card:    14px;
  --nudge-radius-lg:      18px;
  --nudge-radius-pill:    9999px;

  --nudge-shadow-card:    0 1px 3px rgba(41,37,36,0.06), 0 6px 24px -6px rgba(41,37,36,0.10);
  --nudge-shadow-hover:   0 1px 3px rgba(41,37,36,0.08), 0 12px 32px -6px rgba(41,37,36,0.14);
  --nudge-shadow-input:   0 1px 1px rgba(41,37,36,0.06), 0 0 0 1px rgba(41,37,36,0.04), 0 6px 20px -6px rgba(41,37,36,0.10);
  --nudge-shadow-btn:     0 2px 12px rgba(75,78,128,0.30), 0 1px 3px rgba(75,78,128,0.18);
  --nudge-shadow-btn-h:   0 4px 20px rgba(75,78,128,0.38), 0 1px 4px rgba(75,78,128,0.22);

  --nudge-font-body:      'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --nudge-font-display:   'Urbanist', 'Inter', sans-serif;
}

/* ───────────────────────────────────────────────────────────────
   Base — body + typography
   The admin block sets `body { background: #ffffff; }` already;
   we layer our font stack on top.
   ─────────────────────────────────────────────────────────────── */
html, body {
  font-family: var(--nudge-font-body) !important;
  color: var(--nudge-fg);
  background: var(--nudge-bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.55;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--nudge-font-display) !important;
  color: var(--nudge-fg);
  letter-spacing: -0.02em;
  font-weight: 800;
  line-height: 1.15;
}

a { color: var(--nudge-primary); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--nudge-primary-dark); text-decoration: underline; }

/* ───────────────────────────────────────────────────────────────
   Header (#mainNav.navbar)
   Override the admin-set dark navbar. Use ID-level specificity so
   we beat the inline `.navbar .navbar-inner { background: ... }`.
   ─────────────────────────────────────────────────────────────── */
body #mainNav.navbar {
  margin: 0;
  border: 0;
  background: transparent;
}

body #mainNav .navbar-inner {
  background: var(--nudge-bg) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--nudge-border) !important;
  box-shadow: 0 1px 2px rgba(41,37,36,0.04);
  border-radius: 0;
  min-height: 64px;
  padding: 0;
}

body #mainNav .container-fluid {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  min-height: 64px;
}

/* Logo */
body #mainNav .brand {
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
body #mainNav .brand img {
  height: 36px !important;
  width: auto !important;
  display: block;
}

/* Hide Helpscout's auto-generated nav — JS replaces it with a
   single "Browse Topics" dropdown + back link (see docs-custom.html). */
body #mainNav .nav-collapse {
  display: none !important;
}

/* Spacer pushes the custom controls to the right of the logo */
body #mainNav .nudge-nav-spacer {
  flex: 1;
}

/* Browse Topics dropdown */
body #mainNav .nudge-topics {
  position: relative;
  flex-shrink: 0;
}
body #mainNav .nudge-topics-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  font-family: var(--nudge-font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--nudge-fg) !important;
  background: var(--nudge-bg);
  border: 1px solid var(--nudge-border);
  border-radius: var(--nudge-radius-pill);
  cursor: pointer;
  text-decoration: none;
  text-shadow: none;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
body #mainNav .nudge-topics-toggle:hover,
body #mainNav .nudge-topics-toggle:focus {
  background: var(--nudge-primary-tint);
  border-color: rgba(75, 78, 128, 0.30);
  color: var(--nudge-primary) !important;
  text-decoration: none;
}
body #mainNav .nudge-topics.open .nudge-topics-toggle {
  background: var(--nudge-primary-tint);
  border-color: rgba(75, 78, 128, 0.30);
  color: var(--nudge-primary) !important;
}
body #mainNav .nudge-topics-toggle .nudge-chev {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
body #mainNav .nudge-topics.open .nudge-chev {
  transform: rotate(180deg);
}

/* Dropdown panel */
body #mainNav .nudge-topics-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  min-width: 260px;
  background: var(--nudge-bg);
  border: 1px solid var(--nudge-border);
  border-radius: var(--nudge-radius-card);
  box-shadow: var(--nudge-shadow-hover);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 1000;
}
body #mainNav .nudge-topics.open .nudge-topics-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
body #mainNav .nudge-topics-menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}
body #mainNav .nudge-topics-menu li a {
  display: flex;
  align-items: center;
  padding: 0.55rem 0.75rem;
  font-family: var(--nudge-font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--nudge-fg) !important;
  border-radius: var(--nudge-radius);
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
body #mainNav .nudge-topics-menu li a:hover,
body #mainNav .nudge-topics-menu li a:focus {
  background: var(--nudge-bg-lavender);
  color: var(--nudge-primary) !important;
  text-decoration: none;
}
body #mainNav .nudge-topics-menu li.active a {
  background: var(--nudge-primary-tint);
  color: var(--nudge-primary) !important;
  font-weight: 600;
}

/* "← nudge.new" back link */
body #mainNav .nudge-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.95rem;
  font-family: var(--nudge-font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--nudge-fg-muted) !important;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--nudge-radius-pill);
  text-decoration: none;
  text-shadow: none;
  flex-shrink: 0;
  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
body #mainNav .nudge-back-link:hover {
  color: var(--nudge-primary) !important;
  background: var(--nudge-primary-tint);
  border-color: rgba(75, 78, 128, 0.20);
  text-decoration: none;
}

/* Hide Helpscout's hamburger — single dropdown handles all widths */
body #mainNav .btn-navbar { display: none !important; }

/* ───────────────────────────────────────────────────────────────
   Hero / search (#docsSearch)
   Calm + minimal: subtle lavender wash, no amber glow.
   ─────────────────────────────────────────────────────────────── */
#docsSearch {
  background: linear-gradient(180deg, var(--nudge-bg-lavender) 0%, var(--nudge-bg) 100%);
  padding: 5rem 1.5rem 4rem;
  text-align: center;
  border-bottom: 0;
}

#docsSearch h1 {
  font-family: var(--nudge-font-display) !important;
  font-weight: 800;
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--nudge-fg) !important;
  margin: 0 auto 2rem;
  max-width: 720px;
  text-shadow: none;
}

/* Search form */
#searchBar {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  display: block;
}

#searchBar input.search-query {
  width: 100% !important;
  box-sizing: border-box;
  height: auto !important;
  padding: 1rem 1.25rem 1rem 1.25rem !important;
  padding-right: 7rem !important;
  font-family: var(--nudge-font-body) !important;
  font-size: 1rem !important;
  color: var(--nudge-fg) !important;
  background: var(--nudge-bg) !important;
  border: 1px solid var(--nudge-border) !important;
  border-radius: var(--nudge-radius-pill) !important;
  box-shadow: var(--nudge-shadow-input) !important;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  margin: 0;
  line-height: 1.3;
}

#searchBar input.search-query::placeholder { color: var(--nudge-fg-muted); opacity: 1; }

#searchBar input.search-query:focus {
  border-color: var(--nudge-primary) !important;
  box-shadow:
    0 0 0 3px var(--nudge-primary-glow),
    var(--nudge-shadow-input) !important;
}

#searchBar button[type="submit"] {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  font-family: var(--nudge-font-body);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--nudge-fg-on-primary) !important;
  background: var(--nudge-primary) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: var(--nudge-radius-pill);
  box-shadow: var(--nudge-shadow-btn);
  cursor: pointer;
  text-shadow: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
#searchBar button[type="submit"]:hover {
  background: var(--nudge-primary-dark) !important;
  box-shadow: var(--nudge-shadow-btn-h);
}
#searchBar button[type="submit"] .icon-search { color: var(--nudge-fg-on-primary); }

/* Search-result dropdown */
#searchBar #serp-dd {
  margin-top: 0.5rem;
  background: var(--nudge-bg);
  border: 1px solid var(--nudge-border);
  border-radius: var(--nudge-radius);
  box-shadow: var(--nudge-shadow-card);
  overflow: hidden;
}
#serp-dd .result a:hover,
#serp-dd .result > li.active {
  color: var(--nudge-primary) !important;
  background: var(--nudge-bg-lavender);
}

/* ───────────────────────────────────────────────────────────────
   Main content (#contentArea)
   ─────────────────────────────────────────────────────────────── */
#contentArea.container-fluid,
#contentArea {
  max-width: 1120px !important;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem !important;
}

/* ───────────────────────────────────────────────────────────────
   Collections grid (.twoCol / .threeCol / any *Col)
   Replace Bootstrap row-fluid floats with explicit CSS grid.
   ─────────────────────────────────────────────────────────────── */
#contentArea section[class*="Col"].row-fluid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  justify-content: stretch;
  justify-items: stretch;
}
#contentArea section.twoCol.row-fluid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#contentArea section.threeCol.row-fluid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Bootstrap's row-fluid uses ::before/::after clearfix pseudos which
   become grid items when we flip the parent to display:grid — that's
   what causes the diagonal staircase layout. Suppress them. */
#contentArea section[class*="Col"].row-fluid::before,
#contentArea section[class*="Col"].row-fluid::after {
  content: none !important;
  display: none !important;
}

#contentArea section.collection {
  display: block !important;
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  vertical-align: top;
  background: var(--nudge-bg);
  border: 1px solid var(--nudge-border);
  border-radius: var(--nudge-radius-lg);
  padding: 1.5rem 1.5rem 1.25rem;
  box-shadow: var(--nudge-shadow-card);
  transition: box-shadow 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.15s ease;
}
#contentArea section.collection:hover {
  box-shadow: var(--nudge-shadow-hover);
  transform: translateY(-2px);
  border-color: rgba(75, 78, 128, 0.25);
}

/* Card header — icon badge + title, horizontal layout */
#contentArea section.collection .collection-head {
  display: flex !important;
  align-items: center;
  gap: 0.85rem;
  text-align: left !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 0 1rem !important;
}

/* Icon badge — lavender square with brand-purple SVG (default: folder).
   Per-collection overrides below set the right icon per collection ID. */
#contentArea section.collection .collection-head::before {
  content: '';
  display: block;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--nudge-radius-card);
  background-color: var(--nudge-bg-lavender);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  transition: background-color 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Default fallback: folder icon */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B4E80' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/></svg>");
}
#contentArea section.collection:hover .collection-head::before {
  background-color: rgba(75, 78, 128, 0.14);
  transform: rotate(-4deg) scale(1.06);
}

/* Per-collection icons (matched by Helpscout's auto-assigned IDs) */
#contentArea #collection-1 .collection-head::before {       /* Campaigns — send */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B4E80' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M22 2 11 13'/><path d='M22 2l-7 20-4-9-9-4z'/></svg>");
}
#contentArea #collection-5 .collection-head::before {       /* Getting Started — play */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B4E80' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><polygon points='5 3 19 12 5 21 5 3'/></svg>");
}
#contentArea #collection-17 .collection-head::before {      /* Automations — zap */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B4E80' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><polygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/></svg>");
}
#contentArea #collection-25 .collection-head::before {      /* Contacts & Lists — users */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B4E80' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
}
#contentArea #collection-32 .collection-head::before {      /* Integrations — grid */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B4E80' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7' rx='1'/><rect x='14' y='3' width='7' height='7' rx='1'/><rect x='3' y='14' width='7' height='7' rx='1'/><rect x='14' y='14' width='7' height='7' rx='1'/></svg>");
}
#contentArea #collection-43 .collection-head::before {      /* Brand & Design — sparkles */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B4E80' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z'/><path d='M19 17l.7 1.8L21.5 19.5l-1.8.7L19 22l-.7-1.8L16.5 19.5l1.8-.7z'/><path d='M5 5l.5 1.3L6.8 6.8l-1.3.5L5 8.5l-.5-1.3L3.2 6.8l1.3-.5z'/></svg>");
}
#contentArea #collection-50 .collection-head::before {      /* Deliverability — shield-check */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B4E80' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><polyline points='9 12 11 14 15 10'/></svg>");
}
#contentArea #collection-56 .collection-head::before {      /* Analytics & Reporting — line chart */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B4E80' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3v18h18'/><polyline points='7 14 11 10 15 14 20 9'/></svg>");
}
#contentArea #collection-62 .collection-head::before {      /* Account & Billing — credit card */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B4E80' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><line x1='2' y1='10' x2='22' y2='10'/></svg>");
}
#contentArea #collection-69 .collection-head::before {      /* Troubleshooting & FAQ — help circle */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B4E80' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
}

/* Collection head wrap: title takes remaining space next to icon */
#contentArea section.collection .collection-head h2 {
  margin: 0 !important;
  flex: 1;
  min-width: 0;
  text-align: left !important;
  font-family: var(--nudge-font-display) !important;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
#contentArea section.collection .collection-head h2 a {
  color: var(--nudge-fg) !important;
  text-align: left !important;
}
#contentArea section.collection .collection-head h2 a:hover {
  color: var(--nudge-primary) !important;
  text-decoration: none;
}
#contentArea section.collection .collection-head p {
  display: none;     /* hide the empty "no-desc" paragraph Helpscout renders */
}

#contentArea .collection-body { padding: 0; }

#contentArea .popArticles {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#contentArea .popArticles li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#contentArea .popArticles li a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  margin: 0 -0.5rem;
  color: var(--nudge-fg) !important;
  font-size: 0.9375rem;
  border-radius: var(--nudge-radius);
  transition: background 0.12s ease, color 0.12s ease;
}
#contentArea .popArticles li a:hover {
  background: var(--nudge-bg-lavender);
  color: var(--nudge-primary) !important;
  text-decoration: none;
}
#contentArea .popArticles li a span {
  flex: 1;
  line-height: 1.4;
}
#contentArea .popArticles li a .icon-article-doc,
#contentArea .popArticles li a i {
  color: var(--nudge-primary) !important;
  flex-shrink: 0;
  opacity: 0.7;
}

/* ───────────────────────────────────────────────────────────────
   Category page (.category-list)
   ─────────────────────────────────────────────────────────────── */
.category-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}
.category-list .category {
  background: var(--nudge-bg);
  border: 1px solid var(--nudge-border);
  border-radius: var(--nudge-radius-lg);
  padding: 1.25rem 1.5rem;
  list-style: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.15s ease;
}
.category-list .category:hover {
  box-shadow: var(--nudge-shadow-hover);
  transform: translateY(-2px);
  border-color: rgba(75, 78, 128, 0.25);
}
.category-list .category h3,
.category-list .category h2 {
  margin: 0 0 0.25rem;
  font-size: 1.0625rem;
}
.category-list .category .article-count,
.category-list .category:hover .article-count {
  color: var(--nudge-primary) !important;
  font-size: 0.8125rem;
  font-weight: 600;
}

/* ───────────────────────────────────────────────────────────────
   Article page (#fullArticle)
   Override admin's #585858 body color to our brand black.
   ─────────────────────────────────────────────────────────────── */
#fullArticle,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
  color: var(--nudge-fg) !important;
}

#fullArticle {
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--nudge-font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
}

#fullArticle h1 {
  font-family: var(--nudge-font-display) !important;
  font-size: clamp(2rem, 3.6vw, 2.5rem);
  letter-spacing: -0.025em;
  margin: 0 0 0.5rem;
}
#fullArticle h2 {
  font-family: var(--nudge-font-display) !important;
  font-size: 1.5rem;
  margin: 2.5rem 0 0.75rem;
  letter-spacing: -0.02em;
}
#fullArticle h3 {
  font-family: var(--nudge-font-display) !important;
  font-size: 1.25rem;
  margin: 2rem 0 0.5rem;
}

#fullArticle strong a,
#fullArticle a strong,
.contentWrapper a {
  color: var(--nudge-primary) !important;
}
#fullArticle a {
  color: var(--nudge-primary) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(75, 78, 128, 0.30);
  transition: border-color 0.15s ease, color 0.15s ease;
}
#fullArticle a:hover {
  color: var(--nudge-primary-dark) !important;
  border-bottom-color: var(--nudge-primary-dark);
}

#fullArticle img {
  max-width: 100%;
  height: auto;
  border-radius: var(--nudge-radius-card);
  border: 1px solid var(--nudge-border);
  box-shadow: var(--nudge-shadow-card);
  margin: 1.5rem 0;
}

#fullArticle blockquote {
  border-left: 3px solid var(--nudge-primary);
  background: var(--nudge-bg-lavender);
  padding: 0.9rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 0 var(--nudge-radius) var(--nudge-radius) 0;
}

#fullArticle code,
#fullArticle pre {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  background: #F5F5F4;
  border-radius: 6px;
}
#fullArticle code { padding: 0.1em 0.35em; font-size: 0.9em; }
#fullArticle pre {
  padding: 1rem 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--nudge-border);
  margin: 1.25rem 0;
}
#fullArticle pre code { background: none; padding: 0; }

/* Article meta / breadcrumbs */
.docs-meta,
.article-meta,
.meta,
.breadcrumb,
.breadcrumbs {
  color: var(--nudge-fg-muted) !important;
  font-size: 0.875rem;
}

/* ───────────────────────────────────────────────────────────────
   Pipeline render hooks (.nudge-video, .nudge-intro)
   Emitted by src/render.ts when rendering each article body.
   ─────────────────────────────────────────────────────────────── */
.nudge-video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin: 0.5rem 0 2rem;
  border-radius: var(--nudge-radius-lg);
  overflow: hidden;
  box-shadow: var(--nudge-shadow-card);
  background: #000;
}
.nudge-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.nudge-intro {
  font-size: 1.125rem;
  color: var(--nudge-fg) !important;
  line-height: 1.6;
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  background: var(--nudge-bg-lavender);
  border-left: 3px solid var(--nudge-primary);
  border-radius: 0 var(--nudge-radius) var(--nudge-radius) 0;
}

/* ───────────────────────────────────────────────────────────────
   Footer (footer.center)
   ─────────────────────────────────────────────────────────────── */
footer.center {
  background: var(--nudge-bg-soft);
  border-top: 1px solid var(--nudge-border);
  margin-top: 3rem;
  padding: 2rem 1.5rem 1.75rem;
  text-align: center;
}
footer.center p {
  color: var(--nudge-fg-muted);
  font-size: 0.8125rem;
  margin: 1rem 0 0;
}
footer.center a {
  color: var(--nudge-fg-muted);
  text-decoration: none;
}
footer.center a:hover {
  color: var(--nudge-primary);
  text-decoration: underline;
}

/* Branded Nudge footer block (injected via JS, sits above the
   default "© Nudge.new ... Powered by Help Scout" line). */
.nudge-footer-branding {
  font-family: var(--nudge-font-body);
  font-size: 0.9375rem;
  color: var(--nudge-fg-muted);
  text-align: center;
  margin-bottom: 0.5rem;
}
.nudge-footer-branding .nudge-footer-tagline {
  margin-bottom: 0.75rem;
}
.nudge-footer-branding .nudge-footer-brand-link {
  color: var(--nudge-primary) !important;
  font-weight: 700;
  text-decoration: none;
}
.nudge-footer-branding .nudge-footer-brand-link:hover {
  text-decoration: underline;
}
.nudge-footer-branding .nudge-footer-links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.nudge-footer-branding .nudge-footer-links a {
  color: var(--nudge-fg-muted) !important;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.12s ease;
}
.nudge-footer-branding .nudge-footer-links a:hover {
  color: var(--nudge-primary) !important;
  text-decoration: none;
}

/* ───────────────────────────────────────────────────────────────
   Responsive
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body #mainNav .container-fluid {
    gap: 0.75rem;
    padding: 0 1rem;
  }
  body #mainNav .brand img { height: 30px !important; }
  body #mainNav .nudge-back-link {
    /* hide text, keep arrow only — saves space */
    padding: 0.5rem 0.7rem;
  }
  body #mainNav .nudge-back-link .nudge-back-label { display: none; }
  body #mainNav .nudge-topics-toggle { padding: 0.5rem 0.85rem; }
  body #mainNav .nudge-topics-menu {
    right: 0;
    left: auto;
    min-width: calc(100vw - 2rem);
    max-width: 320px;
  }

  #docsSearch { padding: 3rem 1rem 2.5rem; }
  #docsSearch h1 { font-size: 2rem; }
  #searchBar input.search-query { padding-right: 1.25rem !important; }
  #searchBar button[type="submit"] {
    position: static;
    transform: none;
    width: 100%;
    margin-top: 0.75rem;
    justify-content: center;
    padding: 0.85rem 1rem;
  }
  #contentArea.container-fluid { padding: 2rem 1rem 3rem !important; }
  #contentArea section.collection { padding: 1.25rem; }
  #contentArea section[class*="Col"].row-fluid,
  #contentArea section.twoCol.row-fluid,
  #contentArea section.threeCol.row-fluid {
    grid-template-columns: 1fr !important;
  }
  #contentArea section.collection .collection-head::before {
    width: 40px;
    height: 40px;
    background-size: 22px;
  }
}