/* ═══════════════════════════════════════════════════
   SFH Knowledge Base — Custom Help Scout Docs Stylesheet
   Upload to: Help Scout → Docs → Site Settings → Custom CSS
   ═══════════════════════════════════════════════════ */

/* ─── Typography: Montserrat to match marketing site ─── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;900&display=swap');

body,
#contentArea,
.article-content,
.sidebar,
#docsSearch input,
h1, h2, h3, h4, h5, h6,
p, li, td, th {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ─── Brand Colors ─── */
:root {
  --sfh-navy: #073243;
  --sfh-navy-light: #0a4a63;
  --sfh-teal: #0199B9;
  --sfh-teal-dark: #016375;
  --sfh-sky: #8AC6E2;
  --sfh-gold: #FAB416;
  --sfh-orange: #F38020;
  --sfh-white: #FFFFFF;
  --sfh-light-bg: #f5f7f8;
  --sfh-text: #073243;
  --sfh-text-secondary: #4a5568;
}

/* ─── Header / Navigation ─── */
/* Help Scout uses: header.navbar#mainNav > .navbar-inner > .container-fluid */
.navbar {
  background: var(--sfh-navy) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.15) !important;
}

.navbar .navbar-inner {
  background: var(--sfh-navy) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Nav links */
.navbar .nav li a {
  color: var(--sfh-sky) !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
}

.navbar .nav li a:hover {
  color: var(--sfh-white) !important;
  background: transparent !important;
}

/* Logo */
.navbar .brand {
  color: var(--sfh-white) !important;
}

.navbar .brand img {
  height: 42px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Mobile toggle */
.navbar .btn-navbar {
  background: transparent !important;
  border-color: var(--sfh-sky) !important;
  box-shadow: none !important;
}

.navbar .btn-navbar .icon-bar {
  background: var(--sfh-sky) !important;
}

/* Collapsed mobile nav */
.navbar .nav-collapse,
.navbar .nav-collapse.in,
.navbar .nav-collapse.collapse.in {
  background: var(--sfh-navy) !important;
}

/* ─── Search Bar ─── */
/* Help Scout uses: section#docsSearch */
#docsSearch {
  background: linear-gradient(160deg, var(--sfh-navy) 0%, #0c5a78 60%, var(--sfh-navy-light) 100%) !important;
  padding: 60px 24px !important;
}

#docsSearch h1,
#docsSearch .title {
  color: var(--sfh-white) !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px !important;
}

#docsSearch input[type="text"],
#docsSearch input[type="search"] {
  border: 2px solid rgba(138,198,226,0.3) !important;
  border-radius: 8px !important;
  padding: 14px 20px !important;
  font-size: 15px !important;
  background: rgba(255,255,255,0.95) !important;
  color: var(--sfh-navy) !important;
  max-width: 600px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
}

#docsSearch input:focus {
  border-color: var(--sfh-teal) !important;
  outline: none !important;
  box-shadow: 0 4px 16px rgba(1,153,185,0.2) !important;
}

/* Search button */
#docsSearch button {
  background: var(--sfh-teal) !important;
  color: var(--sfh-white) !important;
  border-radius: 0 8px 8px 0 !important;
}

/* ─── Body / Content Area ─── */
body {
  color: var(--sfh-text) !important;
  background: var(--sfh-white) !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ─── Category Cards ─── */
/* Help Scout uses: section#contentArea with collection/category links */
#contentArea .category,
#contentArea .collection ul li,
#contentArea a[class*="category"],
.category-list a {
  background: var(--sfh-white) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 16px rgba(7,50,67,0.08) !important;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
  overflow: hidden !important;
  position: relative !important;
}

#contentArea .category:hover,
#contentArea .collection ul li:hover,
.category-list a:hover {
  box-shadow: 0 8px 32px rgba(7,50,67,0.14) !important;
  transform: translateY(-4px) !important;
}

/* Category titles */
#contentArea h3,
#contentArea h3 a,
.category-list h2 a,
.category-list h3 a {
  color: var(--sfh-navy) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* Category descriptions */
#contentArea .category p,
.category-list p {
  color: var(--sfh-text-secondary) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

/* ─── Section Headers (For Members / For Employers) ─── */
#contentArea h2,
#contentArea h2 a {
  color: var(--sfh-navy) !important;
  font-weight: 900 !important;
  font-size: 28px !important;
  letter-spacing: -0.5px !important;
  text-decoration: none !important;
}

#contentArea h2 a:hover {
  color: var(--sfh-teal) !important;
}

/* ─── Links (scoped to content, not nav) ─── */
#contentArea a {
  color: var(--sfh-teal) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

#contentArea a:hover {
  color: var(--sfh-teal-dark) !important;
}

/* ─── Article Page ─── */
.article-content h1 {
  color: var(--sfh-navy) !important;
  font-weight: 900 !important;
  font-size: 32px !important;
  letter-spacing: -0.5px !important;
  line-height: 1.2 !important;
}

.article-content h2 {
  color: var(--sfh-navy) !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  margin-top: 32px !important;
}

.article-content h3 {
  color: var(--sfh-navy) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}

.article-content p,
.article-content li {
  color: var(--sfh-text-secondary) !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
}

.article-content strong {
  color: var(--sfh-navy) !important;
}

/* Sidebar / Table of Contents */
.sidebar a,
.article-sidebar a {
  color: var(--sfh-text-secondary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.sidebar a:hover,
.article-sidebar a:hover {
  color: var(--sfh-teal) !important;
}

.sidebar a.active,
.article-sidebar a.active {
  color: var(--sfh-teal) !important;
  font-weight: 700 !important;
  border-left: 3px solid var(--sfh-teal) !important;
  padding-left: 12px !important;
}

/* ─── Breadcrumbs ─── */
.breadcrumbs,
.breadcrumbs a {
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.breadcrumbs a {
  color: var(--sfh-teal) !important;
}

/* ─── Buttons (scoped — not the mobile nav toggle) ─── */
#contentArea .btn,
.article-content .btn,
input[type="submit"] {
  background: var(--sfh-orange) !important;
  color: var(--sfh-white) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 28px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

#contentArea .btn:hover,
.article-content .btn:hover,
input[type="submit"]:hover {
  background: #d96d1a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(243,128,32,0.3) !important;
}

/* ─── Footer ─── */
/* Footer is inside .container-fluid (max-width: 1080px) so we break it out */
footer {
  background: #041e29 !important;
  color: var(--sfh-sky) !important;
  border-top: none !important;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  padding: 20px 24px !important;
  text-align: center !important;
}

footer a {
  color: var(--sfh-sky) !important;
}

footer a:hover {
  color: var(--sfh-white) !important;
}

/* ─── Feedback / Contact Widget ─── */
.contact-toggle,
.beacon-open {
  background: var(--sfh-teal) !important;
  border-radius: 50% !important;
}

/* ─── Article feedback ─── */
.feedbackMessage,
.article-helpful {
  background: var(--sfh-light-bg) !important;
  border-radius: 12px !important;
  padding: 24px !important;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  #docsSearch {
    padding: 40px 16px !important;
  }

  .article-content h1 {
    font-size: 26px !important;
  }
}

/* ─── Color bar accent (above footer) ─── */
footer::before {
  content: '' !important;
  display: block !important;
  height: 6px !important;
  background: linear-gradient(
    90deg,
    #F83148 0% 4.8%,
    #F38020 4.8% 14.5%,
    #073243 14.5% 18.1%,
    #A0A8AB 18.1% 25.4%,
    #B8BFC2 25.4% 32.7%,
    #C8E4F0 32.7% 37.6%,
    #A0A8AB 37.6% 41.3%,
    #073243 41.3% 42.5%,
    #F83148 42.5% 59.5%,
    #073243 59.5% 63.1%,
    #F38020 63.1% 67.9%,
    #073243 67.9% 70.4%,
    #A0A8AB 70.4% 77.7%,
    #C8E4F0 77.7% 85%,
    #F83148 85% 87.5%,
    #A0A8AB 87.5% 90%,
    #073243 90% 100%
  ) !important;
}

/* ─── Hide Help Scout branding (optional) ─── */
/* Uncomment if you have a paid plan that allows removing branding:
footer .powered-by {
  display: none !important;
}
*/