/* -------------------------------------------------- */
/* OpenDay Theme for Help Scout - V12 (Final Version) */
/* -------------------------------------------------- */

/* 1. Design Tokens (Variables) */
:root {
  --brand-accent: #f97316; /* Vibrant Orange */
  --brand-accent-hover: #ea580c;
  --brand-dark: #1F2937; /* Dark Gray/Slate */
  --brand-light: #ffffff;
  --color-border: #e5e7eb;
  --color-bg-subtle: #f9fafb;
  --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --border-radius: 8px;
  --input-height-main: 44px;
  --input-height-sidebar: 40px;
  --hs-accent-color: var(--brand-accent);
}

/* 2. Base Styles & Typography */
*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  font-family: var(--font-family-base);
  color: var(--brand-dark);
  background-color: var(--brand-light);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6,
.jumbotron h1,
.jumbotron h2 {
  font-weight: 700;
  color: var(--brand-dark);
}
a,
.content a {
  color: var(--brand-accent);
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover,
.content a:hover {
  text-decoration: underline;
  color: var(--brand-accent-hover);
}

/* 3. Header & Navigation */
#header,
.header,
#main-header,
.navbar {
  background-color: var(--brand-light);
  border-bottom: 1px solid var(--color-border);
}
/* Logo Fix - Keep logo at reasonable size */
header img {
  max-height: 32px !important;
  height: auto !important;
  width: auto !important;
  vertical-align: middle !important;
}
.navbar .nav > li > a,
.nav-link,
#header-nav a,
#main-header .nav li a {
  color: var(--brand-accent);
  font-weight: 500;
}
.navbar .nav > li > a:hover,
.nav-link:hover,
.navbar .nav > .active > a,
#header-nav a:hover,
#main-header .nav li a:hover {
  color: var(--brand-dark);
}

/* 4. Buttons & Inputs */
input[type="text"],
input[type="search"],
input[type="email"],
textarea,
.form-control,
.search-query {
  padding: 10px 15px;
  height: var(--input-height-sidebar);
  border: 1px solid var(--color-border);
  font-family: inherit;
  background-color: var(--color-bg-subtle);
  box-shadow: none;
  border-radius: var(--border-radius);
  vertical-align: middle;
  transition: border-color 0.3s ease, background-color 0.3s ease,
    box-shadow 0.3s ease;
}
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
textarea:focus,
.form-control:focus,
.search-query:focus {
  outline: none;
  border-color: var(--brand-accent);
  background-color: var(--brand-light);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
}
.input-group .form-control,
#searchForm .form-control,
#searchBar .search-query {
  border-top-left-radius: var(--border-radius) !important;
  border-bottom-left-radius: var(--border-radius) !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.input-group-btn .btn,
#searchForm .btn,
#searchBar button,
#sidebar .search-query + button {
  border-top-right-radius: var(--border-radius) !important;
  border-bottom-right-radius: var(--border-radius) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
body .btn-primary,
body input[type="submit"],
body .input-group-btn .btn,
body #searchBar button,
body #docsSearch .jumbotron #searchBar.input-group button.btn,
#sidebar .search-query + button {
  background: var(--brand-accent) !important;
  background-color: var(--brand-accent) !important;
  background-image: none !important;
  color: var(--brand-light) !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 600;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
}
body .btn-primary:hover,
body input[type="submit"]:hover,
body .input-group-btn .btn:hover,
body #searchBar button:hover,
body #docsSearch .jumbotron #searchBar.input-group button.btn:hover,
#sidebar .search-query + button:hover {
  text-decoration: none;
  background: var(--brand-accent-hover) !important;
  background-color: var(--brand-accent-hover) !important;
  background-image: none !important;
}
body .btn-primary:focus,
body input[type="submit"]:focus,
body .input-group-btn .btn:focus,
body #searchBar button:focus,
body #docsSearch .jumbotron #searchBar.input-group button.btn:focus,
#sidebar .search-query + button:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2) !important;
}

/* 5. Contextual Search Bar Styling */
#sidebar .search-query {
  height: var(--input-height-sidebar) !important;
  vertical-align: top !important;
  box-sizing: border-box !important;
}

/* Orange focus state for sidebar search */
#sidebar .search-query:focus,
#sidebar input[type="search"]:focus {
  outline: none !important;
  border-color: var(--brand-accent) !important;
  background-color: var(--brand-light) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2) !important;
}
#sidebar .search-query + button {
  /* Search Button Alignment Fix */
  height: var(--input-height-sidebar) !important;
  vertical-align: top !important;
  box-sizing: border-box !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Fix search icon color to be white */
#searchBar button svg,
#searchBar button i,
#searchBar button::before,
#sidebar .search-query + button svg,
#sidebar .search-query + button i,
#sidebar .search-query + button::before,
.input-group-btn .btn svg,
.input-group-btn .btn i,
.input-group-btn .btn::before,
button[type="submit"] svg,
button[type="submit"] i,
button[type="submit"]::before {
  color: white !important;
  fill: white !important;
  opacity: 1 !important;
}

/* Ensure icon visibility on orange background */
#searchBar button span,
#sidebar .search-query + button span,
.input-group-btn .btn span,
button[type="submit"] span {
  color: white !important;
  opacity: 1 !important;
}
#sidebar #searchBar,
#sidebar #search-form {
  /* Stretches search bar container */
  width: 100% !important;
}
.jumbotron .search-query,
#docsSearch .jumbotron #searchBar .search-query {
  height: var(--input-height-main) !important;
}
body .jumbotron #search-form .btn,
body .jumbotron .input-group-btn .btn,
body #docsSearch .jumbotron #searchBar.input-group button.btn {
  padding: 10px 20px !important;
  height: var(--input-height-main) !important;
  line-height: normal;
  vertical-align: middle;
}

/* 6. Content & Layout Adjustments */

/* --- SEARCH BUTTON ALIGNMENT FIX --- */
/* Remove all spacing between search input and button - ONLY in sidebar search */
#sidebar form[role="search"],
#sidebar #searchBar,
#sidebar .input-group:has(.search-query),
#sidebar .search-form {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Ensure search input takes available space and connects to button */
#sidebar .search-query,
#sidebar input[type="search"].search-query,
#sidebar .search-form .form-control {
  flex: 1 1 auto !important;
  margin: 0 !important;
  margin-right: 0 !important;
  border-right: none !important;
  display: inline-block !important;
  float: none !important;
}

/* Fix search button positioning WITHOUT overriding orange styling */
#sidebar .search-query + button,
#sidebar .input-group-btn button,
#sidebar form[role="search"] button[type="submit"] {
  flex: 0 0 auto !important;
  margin: 0 !important;
  margin-left: -1px !important; /* Overlap to prevent gap */
  /* DO NOT add border-left - it overrides the orange button styling */
  display: inline-block !important;
  float: none !important;
  position: relative !important;
}

/* Remove any table-cell display that might cause gaps - only for search components */
#sidebar .input-group:has(.search-query) > *,
#sidebar .input-group > * {
  display: inline-block !important;
  vertical-align: middle !important;
}

/* --- ORIGINAL GRID FIX --- */
/* This removes the grid system's default right-side spacing on the sidebar */
#sidebar.span3 {
  margin-right: 0 !important;
  padding-right: 0 !important;
}

.article-list a,
.c-wrapper-Sidenav__childCategory a,
#most-popular a,
.articles-list li a {
  color: var(--brand-dark);
  font-weight: 600;
}
.article-list a:hover,
.c-wrapper-Sidenav__childCategory a:hover,
#most-popular a:hover,
.articles-list li a:hover {
  color: var(--brand-accent);
  text-decoration: none;
}

/* 7. Category Card Styling */
.card,
.category-list .category {
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
  background-color: var(--brand-light);
  text-align: center;
  padding: 25px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover,
.category-list .category:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-3px);
  text-decoration: none;
}
.card h3,
.card h4,
.card .card-title,
.category-list .category h3,
.category-list .category-name {
  color: var(--brand-dark);
  font-weight: 700;
  margin-bottom: 10px;
}
.card p,
.category-list .category p,
.category-list .article-count,
.card .card-meta {
  color: var(--brand-accent);
  font-weight: 500;
}
/* Keep category titles dark, only make other links orange */
.card a:not(h3 a):not(h4 a):not(.card-title),
.category-list .category a:not(.category-name) {
  color: var(--brand-accent) !important;
  font-weight: 500;
}
.card a:not(h3 a):not(h4 a):not(.card-title):hover,
.category-list .category a:not(.category-name):hover {
  text-decoration: none;
  color: var(--brand-accent-hover) !important;
}
/* Ensure category titles stay dark even when they're links */
.card h3 a,
.card h4 a,
.card .card-title a,
.category-list .category h3 a,
.category-list .category-name a {
  color: var(--brand-dark) !important;
  font-weight: 700;
}
.card h3 a:hover,
.card h4 a:hover,
.card .card-title a:hover,
.category-list .category h3 a:hover,
.category-list .category-name a:hover {
  color: var(--brand-dark) !important;
  text-decoration: none;
}

/* 8. Footer */
#hc-footer,
.footer,
#footer {
  background-color: var(--color-bg-subtle);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-light);
  margin-top: 60px;
  padding-top: 30px;
}