/* =========================================================================
   Makeplans — Help Center theme
   Restyles the Help Scout knowledge base to match makeplans.com.

   Help Scout only lets us add CSS (not change the HTML), so we target its
   existing classes. Everything is driven by the design tokens below — change
   a token once and it updates everywhere.
   ========================================================================= */

:root {
  /* Brand */
  --mp-brand:        #bb4e45;   /* primary red */
  --mp-brand-dark:   #9e413a;   /* footer / pressed */
  --mp-gold:         #f2c14e;   /* accent / CTA */
  --mp-gold-ink:     #3d261b;   /* text on gold */

  /* Surfaces & text */
  --mp-canvas:       #fbf7f3;   /* warm page background */
  --mp-surface:      #ffffff;   /* cards / article */
  --mp-ink:          #333333;   /* body text */
  --mp-muted:        #6f6a67;   /* secondary text */
  --mp-on-dark:      #f8f6f1;   /* text on red */
  --mp-border:       rgba(93, 47, 42, .16);

  /* Shape & type */
  --mp-radius:       16px;
  --mp-radius-lg:    20px;
  --mp-serif:        "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --mp-sans:         "Avenir Next", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */
body {
  background:
    radial-gradient(circle at top left, rgba(242, 193, 78, .08), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, var(--mp-canvas) 45%, #ffffff 100%);
  color: var(--mp-ink);
  font-family: var(--mp-sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .title {
  font-family: var(--mp-serif);
  letter-spacing: -.01em;
  color: var(--mp-ink);
}

a {
  color: var(--mp-brand);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease,
              background .15s ease, transform .15s ease;
}
a:hover { color: var(--mp-brand-dark); }

/* -------------------------------------------------------------------------
   Top navigation
   ------------------------------------------------------------------------- */
#mainNav.navbar .navbar-inner {
  background: var(--mp-brand);
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: none;
  padding: .35rem 0;
}

#mainNav .nav > li > a,
#mainNav .contactUs {
  color: var(--mp-on-dark);
  font-family: var(--mp-sans);
  font-weight: 500;
  border-radius: var(--mp-radius);
}
#mainNav .nav > li > a:hover,
#mainNav .contactUs:hover {
  color: #fff;
  background: rgba(255, 255, 255, .10);
}

/* -------------------------------------------------------------------------
   Search hero (home)
   ------------------------------------------------------------------------- */
#docsSearch {
  background:
    radial-gradient(circle at top left, rgba(242, 193, 78, .10), transparent 26%),
    linear-gradient(180deg, #f8f4ef 0%, #f3ede7 100%);
  border-bottom: 1px solid var(--mp-border);
  padding: 3rem 0 3.25rem;
}
#docsSearch h1,
#docsSearch h2 {
  font-family: var(--mp-serif);
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  text-align: center;
}

/* -------------------------------------------------------------------------
   Search field + button  (shared: hero + sidebar)
   ------------------------------------------------------------------------- */
.search-query {
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  background: var(--mp-surface);
  color: var(--mp-ink);
  box-shadow: none;
  padding: .7rem 1rem;
}
.search-query:focus {
  border-color: var(--mp-brand);
  box-shadow: 0 0 0 3px rgba(187, 78, 69, .12);
  outline: none;
}

/* -------------------------------------------------------------------------
   Collections + category cards (home)
   ------------------------------------------------------------------------- */
.collection-category h2 {
  font-size: 1.6rem;
  margin-bottom: 1.1rem;
}

a.category {
  display: block;
  background: var(--mp-surface);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  padding: 1.5rem 1.25rem;
  color: var(--mp-ink);
  text-align: center;
}
a.category:hover {
  border-color: var(--mp-brand);
  transform: translateY(-2px);
  color: var(--mp-ink);
}
/* #contentArea id keeps this ahead of Help Scout's default link colour */
#contentArea a.category .article-count {
  color: var(--mp-brand);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   Article page — content card + body
   ------------------------------------------------------------------------- */
.contentWrapper {
  background: var(--mp-surface);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-lg);
  box-shadow: none;
}

#fullArticle .title {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--mp-brand);
  margin-bottom: 1.25rem;
}
#fullArticle { color: var(--mp-ink); line-height: 1.65; }
#fullArticle p { margin: 0 0 1.1rem; }
#fullArticle h2,
#fullArticle h3,
#fullArticle strong { color: var(--mp-ink); }
#fullArticle a {
  color: var(--mp-brand);
  border-bottom: 1px solid rgba(187, 78, 69, .35);
}
#fullArticle a:hover { border-bottom-color: var(--mp-brand); }

#fullArticle code {
  font-size: .9em;
  background: rgba(93, 47, 42, .06);
  border: 1px solid var(--mp-border);
  border-radius: 6px;
  padding: .1em .4em;
  color: var(--mp-brand-dark);
}
#fullArticle pre {
  background: #f8f4ef;
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  padding: 1rem 1.1rem;
}
#fullArticle blockquote {
  border-left: 3px solid var(--mp-gold);
  background: rgba(242, 193, 78, .08);
  border-radius: 0 var(--mp-radius) var(--mp-radius) 0;
  color: var(--mp-muted);
  padding: .75rem 1.1rem;
  margin: 1.25rem 0;
}

/* -------------------------------------------------------------------------
   Sidebar (article page)
   ------------------------------------------------------------------------- */
#sidebar .nav-list > li > a {
  color: var(--mp-muted);
  border-radius: 10px;
  padding: .45rem .6rem;
}
#sidebar .nav-list > li > a:hover {
  color: var(--mp-brand);
  background: rgba(187, 78, 69, .06);
}
#sidebar .nav-list > li.active > a {
  color: var(--mp-brand);
  font-weight: 700;
  background: rgba(187, 78, 69, .08);
}
#sidebar h4 { color: var(--mp-muted); letter-spacing: .04em; }

/* -------------------------------------------------------------------------
   Buttons + footer
   ------------------------------------------------------------------------- */
.btn {
  border-radius: var(--mp-radius);
  border: none;
  font-weight: 600;
}

footer.center {
  color: var(--mp-muted);
  font-size: .85rem;
  padding: 2.5rem 0 3rem;
}
footer.center a { color: var(--mp-brand); }