/* ==========================================================================
   TheOptimizer Help Center — Custom Theme
   Target: help.theoptimizer.io (Help Scout Docs)
   Brand: theoptimizer.io
   Updated: 2026
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS — Import Inter from Google Fonts
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* --------------------------------------------------------------------------
   2. CSS VARIABLES — Brand tokens
   -------------------------------------------------------------------------- */
:root {
  --color-bg:          #f8fafc;
  --color-surface:     #ffffff;
  --color-header-bg:   #111827;
  --color-header-text: #f9fafb;
  --color-primary:     #6c5ce7;
  --color-primary-hover: #5a4bd1;
  --color-primary-light: rgba(108, 92, 231, 0.08);
  --color-text:        #0f172a;
  --color-text-muted:  #64748b;
  --color-border:      #e2e8f0;
  --color-border-hover:#6c5ce7;
  --radius-card:       12px;
  --radius-btn:        8px;
  --shadow-card:       0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 8px 24px rgba(108, 92, 231, 0.12), 0 2px 8px rgba(0,0,0,0.06);
  --font-base:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* --------------------------------------------------------------------------
   3. BASE — Global font & colour reset
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

body,
html {
  font-family: var(--font-base) !important;
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   4. HIDE TOP NAVIGATION ITEMS
      Hides all nav links inside the Help Scout header navigation bar.
      The logo / site name is preserved.
   -------------------------------------------------------------------------- */

/* Primary navigation list items */
.Header-navigation,
.Header-navigationList,
.Header-navigationItem,
.Header-nav,
.c-nav,
.c-nav__list,
.c-nav__item,
[class*="Header-nav"],
[class*="Navigation-list"],
[class*="nav-list"],
.Navigation,
.Navigation ul,
.Navigation li,
.navigation,
.navigation ul,
.navigation li,
header nav,
header nav ul,
header nav li {
  display: none !important;
}

/* Keep the header itself visible — only hide its nav children */
.Header,
[class*="Header"],
header {
  display: block !important;
}

/* Re-show non-nav header children (logo, search icon, etc.) */
.Header-logo,
.Header-title,
.Header-search,
.Header-searchToggle,
[class*="Header-logo"],
[class*="Header-title"],
[class*="Header-brand"] {
  display: flex !important;
}

/* --------------------------------------------------------------------------
   5. HEADER — Dark background matching theoptimizer.io
   -------------------------------------------------------------------------- */
.Header,
[class*="Header"]:not([class*="Header-nav"]):not([class*="Header-logo"]):not([class*="Header-search"]),
header {
  background-color: var(--color-header-bg) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2) !important;
}

/* Header text & links */
.Header a,
.Header-title,
.Header-logo,
[class*="Header"] a,
header a {
  color: var(--color-header-text) !important;
  font-family: var(--font-base) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.Header a:hover,
[class*="Header"] a:hover,
header a:hover {
  color: #c4b8ff !important;
}

/* --------------------------------------------------------------------------
   6. HERO / SEARCH SECTION — Matches website style
   -------------------------------------------------------------------------- */
.Hero,
[class*="Hero"],
.SearchBar,
[class*="SearchBar"],
.search-section,
[class*="search-section"],
.hs-search-wrap,
.hs-search-header {
  background: linear-gradient(135deg, #1e1b4b 0%, #2e1065 50%, #111827 100%) !important;
  padding: 56px 24px !important;
}

/* Hero title */
.Hero-title,
[class*="Hero-title"],
.SearchBar-title,
[class*="SearchBar"] h1,
[class*="SearchBar"] h2 {
  font-family: var(--font-base) !important;
  font-weight: 800 !important;
  font-size: 2rem !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
}

/* Hero subtitle */
.Hero-subtitle,
[class*="Hero-subtitle"],
[class*="SearchBar"] p {
  font-family: var(--font-base) !important;
  color: rgba(255,255,255,0.7) !important;
  font-size: 1rem !important;
}

/* Search input */
.SearchBar-input,
[class*="SearchBar"] input,
[class*="search"] input[type="search"],
[class*="search"] input[type="text"],
input[type="search"] {
  font-family: var(--font-base) !important;
  border-radius: var(--radius-btn) !important;
  border: 1.5px solid var(--color-border) !important;
  padding: 12px 16px !important;
  font-size: 0.9375rem !important;
  color: var(--color-text) !important;
  background: #ffffff !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.SearchBar-input:focus,
[class*="SearchBar"] input:focus,
input[type="search"]:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.15) !important;
}

/* Search button */
.SearchBar-btn,
.SearchBar-submit,
[class*="SearchBar"] button,
[class*="search"] button[type="submit"],
button[type="submit"] {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
  font-family: var(--font-base) !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: var(--radius-btn) !important;
  padding: 12px 20px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, transform 0.1s ease !important;
}

.SearchBar-btn:hover,
[class*="SearchBar"] button:hover,
button[type="submit"]:hover {
  background-color: var(--color-primary-hover) !important;
  transform: translateY(-1px) !important;
}

/* --------------------------------------------------------------------------
   7. MAIN CONTENT AREA
   -------------------------------------------------------------------------- */
.content,
.Content,
[class*="content"],
main,
.main,
[role="main"] {
  background-color: var(--color-bg) !important;
  font-family: var(--font-base) !important;
}

/* Page wrapper */
.wrapper,
.Wrapper,
.container,
.Container,
[class*="wrapper"],
[class*="container"] {
  font-family: var(--font-base) !important;
}

/* --------------------------------------------------------------------------
   8. COLLECTION CARDS — Category tiles on home page
   -------------------------------------------------------------------------- */
.Collection,
[class*="Collection"],
.Category,
[class*="Category"],
.card,
.Card,
[class*="card"] {
  background-color: var(--color-surface) !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
  font-family: var(--font-base) !important;
}

.Collection:hover,
[class*="Collection"]:hover,
.Category:hover,
[class*="Category"]:hover,
.card:hover,
.Card:hover,
[class*="card"]:hover {
  border-color: var(--color-border-hover) !important;
  box-shadow: var(--shadow-card-hover) !important;
  transform: translateY(-2px) !important;
}

/* Collection / category title */
.Collection-name,
.Collection-title,
[class*="Collection-name"],
[class*="Collection-title"],
[class*="Category-name"],
[class*="Category-title"] {
  font-family: var(--font-base) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: var(--color-text) !important;
}

/* Collection description */
.Collection-description,
[class*="Collection-description"],
[class*="Category-description"] {
  font-family: var(--font-base) !important;
  font-size: 0.875rem !important;
  color: var(--color-text-muted) !important;
  line-height: 1.5 !important;
}

/* Article count badge */
.Collection-articleCount,
[class*="articleCount"],
[class*="article-count"] {
  font-family: var(--font-base) !important;
  font-size: 0.8125rem !important;
  color: var(--color-text-muted) !important;
}

/* --------------------------------------------------------------------------
   9. ARTICLE LIST / SIDEBAR
   -------------------------------------------------------------------------- */
.Article,
[class*="Article"],
.article,
article {
  font-family: var(--font-base) !important;
}

/* Article list items */
.ArticleList,
[class*="ArticleList"],
.ArticleList-item,
[class*="ArticleList-item"] {
  font-family: var(--font-base) !important;
}

/* Article links in list */
.ArticleList a,
[class*="ArticleList"] a {
  font-family: var(--font-base) !important;
  color: var(--color-text) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.ArticleList a:hover,
[class*="ArticleList"] a:hover {
  color: var(--color-primary) !important;
}

/* --------------------------------------------------------------------------
   10. ARTICLE PAGE — Reading view
   -------------------------------------------------------------------------- */

/* Article title */
.Article-title,
[class*="Article-title"],
.article-title,
h1.title {
  font-family: var(--font-base) !important;
  font-weight: 800 !important;
  font-size: 1.875rem !important;
  color: var(--color-text) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
}

/* Article body text */
.Article-body,
[class*="Article-body"],
.article-body,
.content-body {
  font-family: var(--font-base) !important;
  font-size: 0.9375rem !important;
  line-height: 1.7 !important;
  color: var(--color-text) !important;
}

.Article-body h2,
.Article-body h3,
.Article-body h4,
[class*="Article-body"] h2,
[class*="Article-body"] h3,
[class*="Article-body"] h4 {
  font-family: var(--font-base) !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  letter-spacing: -0.01em !important;
}

.Article-body a,
[class*="Article-body"] a {
  color: var(--color-primary) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(108, 92, 231, 0.3) !important;
  transition: text-decoration-color 0.15s ease !important;
}

.Article-body a:hover,
[class*="Article-body"] a:hover {
  text-decoration-color: var(--color-primary) !important;
}

/* Inline code */
.Article-body code,
[class*="Article-body"] code {
  background: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 0.875em !important;
}

/* Code blocks */
.Article-body pre,
[class*="Article-body"] pre {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-radius: var(--radius-btn) !important;
  padding: 20px !important;
  overflow-x: auto !important;
}

/* Blockquote */
.Article-body blockquote,
[class*="Article-body"] blockquote {
  border-left: 3px solid var(--color-primary) !important;
  background: var(--color-primary-light) !important;
  border-radius: 0 var(--radius-btn) var(--radius-btn) 0 !important;
  padding: 12px 16px !important;
  margin-left: 0 !important;
  color: var(--color-text-muted) !important;
}

/* --------------------------------------------------------------------------
   11. BREADCRUMBS
   -------------------------------------------------------------------------- */
.Breadcrumbs,
[class*="Breadcrumbs"],
.breadcrumbs,
[class*="breadcrumb"] {
  font-family: var(--font-base) !important;
  font-size: 0.8125rem !important;
}

.Breadcrumbs a,
[class*="Breadcrumbs"] a,
[class*="breadcrumb"] a {
  color: var(--color-text-muted) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.Breadcrumbs a:hover,
[class*="Breadcrumbs"] a:hover,
[class*="breadcrumb"] a:hover {
  color: var(--color-primary) !important;
}

/* --------------------------------------------------------------------------
   12. SIDEBAR NAVIGATION (on article pages)
   -------------------------------------------------------------------------- */
.Sidebar,
[class*="Sidebar"],
.sidebar,
aside {
  font-family: var(--font-base) !important;
}

.Sidebar a,
[class*="Sidebar"] a,
aside a {
  color: var(--color-text-muted) !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.15s ease !important;
}

.Sidebar a:hover,
[class*="Sidebar"] a:hover,
aside a:hover {
  color: var(--color-primary) !important;
}

/* Active sidebar link */
.Sidebar a.is-active,
.Sidebar a[aria-current],
[class*="Sidebar"] a.is-active,
[class*="Sidebar"] a[aria-current] {
  color: var(--color-primary) !important;
  font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   13. BUTTONS — General button styles
   -------------------------------------------------------------------------- */
.btn,
.Btn,
.button,
.Button,
[class*="btn-primary"],
[class*="Button--primary"] {
  font-family: var(--font-base) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-btn) !important;
  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease !important;
  cursor: pointer !important;
}

.btn-primary,
.Button--primary,
[class*="btn-primary"],
[class*="Button--primary"] {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
  border: none !important;
}

.btn-primary:hover,
.Button--primary:hover,
[class*="btn-primary"]:hover,
[class*="Button--primary"]:hover {
  background-color: var(--color-primary-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3) !important;
}

/* --------------------------------------------------------------------------
   14. LINKS — Global link colour
   -------------------------------------------------------------------------- */
a {
  color: var(--color-primary) !important;
  transition: color 0.15s ease !important;
}

a:hover {
  color: var(--color-primary-hover) !important;
}

/* Anchors inside the header keep white colour (overridden above) */
header a,
.Header a,
[class*="Header"] a {
  color: var(--color-header-text) !important;
}

/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */
.Footer,
[class*="Footer"],
footer {
  background-color: var(--color-header-bg) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.5) !important;
  font-family: var(--font-base) !important;
  font-size: 0.8125rem !important;
}

.Footer a,
[class*="Footer"] a,
footer a {
  color: rgba(255,255,255,0.6) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.Footer a:hover,
[class*="Footer"] a:hover,
footer a:hover {
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   16. PAGINATION
   -------------------------------------------------------------------------- */
.Pagination,
[class*="Pagination"],
.pagination {
  font-family: var(--font-base) !important;
}

.Pagination a,
[class*="Pagination"] a {
  color: var(--color-primary) !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-btn) !important;
  padding: 6px 12px !important;
  text-decoration: none !important;
  transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

.Pagination a:hover,
[class*="Pagination"] a:hover {
  border-color: var(--color-primary) !important;
  background-color: var(--color-primary-light) !important;
}

/* --------------------------------------------------------------------------
   17. CONTACT / FEEDBACK — "Was this helpful?" section
   -------------------------------------------------------------------------- */
.ArticleFeedback,
[class*="ArticleFeedback"],
[class*="feedback"],
.Feedback {
  font-family: var(--font-base) !important;
}

.ArticleFeedback button,
[class*="ArticleFeedback"] button,
[class*="feedback"] button {
  font-family: var(--font-base) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-btn) !important;
  border: 1.5px solid var(--color-border) !important;
  background: transparent !important;
  color: var(--color-text-muted) !important;
  transition: border-color 0.2s ease, color 0.2s ease !important;
  cursor: pointer !important;
}

.ArticleFeedback button:hover,
[class*="ArticleFeedback"] button:hover,
[class*="feedback"] button:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

/* --------------------------------------------------------------------------
   18. CONTACT SUPPORT LINK
   -------------------------------------------------------------------------- */
.ContactButton,
[class*="ContactButton"],
[class*="contact-button"],
.contact-link {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
  font-family: var(--font-base) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-btn) !important;
  border: none !important;
  transition: background-color 0.2s ease !important;
}

.ContactButton:hover,
[class*="ContactButton"]:hover {
  background-color: var(--color-primary-hover) !important;
}

/* --------------------------------------------------------------------------
   19. TYPOGRAPHY — General headings & body copy
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-base) !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  letter-spacing: -0.01em !important;
}

p, li, td, th, label, span, div {
  font-family: var(--font-base) !important;
}

/* --------------------------------------------------------------------------
   20. SCROLLBAR (webkit) — subtle brand accent
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}