/* ==========================================================================
   Aligned Automation Studio — Help Scout Docs Stylesheet
   Upload via: Docs > Site Settings > Custom Code > Upload stylesheet
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&family=Montserrat:wght@300;400;500;600&family=Noto+Sans:wght@300;400&display=swap');

:root {
  --aas-terracotta: #c68c6d;
  --aas-peach: #d6ab93;
  --aas-taupe: #bb9d8c;
  --aas-cream: #f4f0ee;
  --aas-text: #3f3a37;
}

/* Base type */
body, .contentWrapper, #fullArticle, #fullArticle p, #fullArticle li {
  font-family: 'Montserrat', sans-serif;
  color: var(--aas-text);
}

h1, h2, h3, #fullArticle .title, .contentWrapper h1, .category-list h3 {
  font-family: 'Playfair Display', serif;
}

#fullArticle h2, #fullArticle h3, .category-list h3 {
  color: var(--aas-terracotta);
}

a, .contentWrapper a, #fullArticle a {
  color: var(--aas-terracotta);
}
a:hover, .contentWrapper a:hover, #fullArticle a:hover {
  color: var(--aas-taupe);
}

/* Hero / search section */
#docsSearch {
  background: var(--aas-cream);
  padding-bottom: 8px;
}
#docsSearch h1 {
  font-family: 'Noto Sans', sans-serif;
  font-size: 18px;
  font-weight: 300;
  white-space: pre-line;
}

/* Icon wrap — shared by nav pills and category cards */
.aas-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.aas-icon-wrap svg {
  width: 16px;
  height: 16px;
}

/* Nav pills — homepage (below search, grid) */
.aas-nav-moved {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: 16px 20px;
  list-style: none;
  padding: 0 0 24px;
  margin: 0;
}
.aas-nav-moved li a {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff !important;
  background: var(--aas-terracotta);
  padding: 10px 18px;
  border-radius: 24px;
  transition: background 0.2s ease;
}
.aas-nav-moved li a:hover {
  background: var(--aas-taupe);
  color: #ffffff !important;
}
.aas-nav-moved .aas-icon-wrap svg { stroke: #ffffff; }

/* Nav pills — every other page (inline, single row) */
.aas-nav-inline {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.aas-nav-inline li a {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffffff !important;
  background: var(--aas-terracotta);
  padding: 6px 14px;
  border-radius: 20px;
  transition: background 0.2s ease;
}
.aas-nav-inline li a:hover {
  background: var(--aas-taupe);
  color: #ffffff !important;
}
.aas-nav-inline .aas-icon-wrap svg { stroke: #ffffff; }

/* Header bar spacing (homepage, since links move below search) */
.navbar .navbar-inner {
  min-height: 0;
  padding-bottom: 10px;
}

/* Category cards — card grid, icon circle, generous whitespace */
.category-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  padding: 32px 0;
  text-align: left;
}
.category-list .category {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  padding: 28px 24px;
  width: auto;
  min-height: 0;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.category-list .category:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  transform: translateY(-2px);
  background: #ffffff;
}
.category-list h3 {
  font-size: 19px;
  margin: 0;
}
.category-list .category p {
  font-size: 14px;
  color: #7e756f;
}

/* Category icon circle */
.aas-cat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--aas-cream);
}
.aas-cat-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--aas-terracotta);
}

/* Buttons / search */
.btn, #searchBar button {
  background: var(--aas-terracotta);
  border: none;
  border-radius: 8px;
}
.btn:hover, #searchBar button:hover {
  background: var(--aas-taupe);
}

/* Footer */
footer p a {
  color: var(--aas-terracotta);
}

/* Sidebar "Categories" heading */
#sidebar h3 {
  font-size: 20px;
}