/* Style for Help Scout Docs for Legacy FM */

/* 1. Logo */
.brand img {
  max-height: 60px !important;
  width: auto;
}

/* 2. Global Fonts */
body,
input, button, textarea {
  font-family: 'Open Sans', Arial, sans‑serif !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: #666666 !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #333333 !important;
  font-weight: 500 !important;
  padding-bottom: 10px;
  line-height: 1em;
}

/* Exact heading sizes */
h1 { font-size: 30px !important; }
h2 { font-size: 26px !important; }
h3 { font-size: 22px !important; }
h4 { font-size: 18px !important; }
h5 { font-size: 16px !important; }
h6 { font-size: 14px !important; }

/* 3. Brand Colors */
:root {
  --brand-bg:       #ffffff;
  --brand-header:   #012060;  /* or #072060 if that’s the darker shade you prefer */
  --brand-nav-text: #ffffff;
  --brand-nav-active: #FFC107; /* keep your accent if you have one */
  --brand-link:     #05105B;
  --brand-text:     #333333;
}

/* Background & text */
body {
  background-color: var(--brand-bg) !important;
  color: var(--brand-text) !important;
}

/* Header & nav */
#docsHeader,
.header {
  background-color: var(--brand-header) !important;
}
#docsHeader a,
.header a {
  color: var(--brand-nav-text) !important;
}
#docsHeader a.active,
.header a.active {
  color: var(--brand-nav-active) !important;
}

/* Links */
a {
  color: var(--brand-link) !important;
  text-decoration: none !important;
}
a:hover {
  opacity: 0.8 !important;
}

/* Article content */
.docs-article-content,
.article-body {
  color: var(--brand-text) !important;
}
.category-list .category {
	width: 28%;
}

/* 4. Search bar */
#searchBar .search-query {
  background: #fff !important;
  border: 1px solid #bbb !important;
  box-shadow: none !important;
  color: #4e4e4e !important;
}
#searchBar button {
  background: var(--brand-header) !important;
  border: none !important;
  color: var(--brand-nav-text) !important;
  margin-top: 4px;
}
#searchBar button:hover {
  background: var(--brand-link) !important;
}

/* Sidebar & footer widgets */
.sidebar a,
.docs-sidebar a,
footer a,
.docs-footer a {
  color: var(--brand-link) !important;
}
footer,
.docs-footer {
  background: var(--brand-bg) !important;
  color: #666666 !important;
  border-top: 1px solid #e1e1e1 !important;
}

/* Make the search button wider and flush right */
#searchBar.sm button {
    width: 48px !important;           /* Increase clickable area */
    height: 40px !important;          /* Match input height */
    right: 0 !important;              /* Align with field edge */
    top: 0 !important;                /* Align top */
    border-radius: 0 4px 4px 0 !important;  /* Match field's right corners */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--brand-header) !important; /* Use your brand color */
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove extra right padding from the input so text doesn't overlap the icon */
#searchBar.sm input[type="text"] {
    padding-right: 50px !important; /* Allow space for wider button */
    height: 40px !important;
    box-sizing: border-box;
}
