/* ============================================
   Slimio Knowledge Base — HelpScout Custom CSS
   ============================================ */

/* --- Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* --- Base --- */
body {
    background: #ffffff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #333333;
}

/* --- Article body --- */
#fullArticle,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    line-height: 1.7;
}

#fullArticle h1 { font-size: 24px; font-weight: 700; }
#fullArticle h2 { font-size: 20px; font-weight: 600; }
#fullArticle h3 { font-size: 17px; font-weight: 600; }

/* --- Sidebar & nav --- */
#sidebar,
.navbar .nav li a,
.category-list .category,
.most-pop-articles .popArticles a {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
}


/* --- Navbar background --- */
.navbar .navbar-inner { background: #101f39; }

.navbar .nav li a,
.navbar .icon-private-w { color: #c0c0c0; }

.navbar .brand,
.navbar .nav li a:hover,
.navbar .nav li a:focus,
.navbar .nav .active a,
.navbar .nav .active a:hover,
.navbar .nav .active a:focus { color: #ffffff; }

.navbar a:hover .icon-private-w,
.navbar a:focus .icon-private-w,
.navbar .active a .icon-private-w,
.navbar .active a:hover .icon-private-w,
.navbar .active a:focus .icon-private-w { color: #ffffff; }


/* --- Navbar vertical centering --- */
.navbar .navbar-inner {
    padding-top: 20px;
    padding-bottom: 20px;
}

@media (min-width: 769px) {
    .navbar .nav {
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
    }
}

.navbar .nav {
    margin: 0 !important;
}


/* --- Logo --- */
.navbar .brand {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1;
}

.navbar .brand img {
    width: 160px;
    height: auto;
    display: block;
}


/* --- Contact button --- */
.navbar .nav li#contact a,
.navbar .nav li#contactMobile a {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 6px !important;
    padding: 6px 16px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
    color: #ffffff !important;
    line-height: normal !important;
}

.navbar .nav li#contact a:hover,
.navbar .nav li#contactMobile a:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}


/* --- Hero search section --- */
#docsSearch {
    background: linear-gradient(135deg, #1e4a8a 0%, #2d6ab0 100%);
    padding: 60px 20px;
    text-align: center;
}

#docsSearch h1 {
    color: #ffffff;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 24px;
    opacity: 0.95;
}


/* --- Search bar (homepage hero) --- */
#searchBar:not(.sm) input.search-query {
    border-radius: 8px 0 0 8px;
    border: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    font-size: 16px;
    padding: 14px 18px;
    height: auto;
}

#searchBar:not(.sm) button[type="submit"] {
    border-radius: 0 8px 8px 0;
    background: #4381b5;
    border: none;
    padding: 14px 20px;
}

/* --- Search bar (article page sidebar) --- */
#searchBar.sm {
    display: flex !important;
    align-items: stretch !important;
    height: 36px;
}

#searchBar.sm input.search-query {
    border-radius: 6px 0 0 6px !important;
    border: 1px solid #dde2e8 !important;
    border-right: none !important;
    font-size: 14px;
    padding: 8px 12px !important;
    height: 100% !important;
    margin: 0 !important;
    flex: 1;
    box-sizing: border-box;
}

#searchBar.sm button[type="submit"] {
    position: static !important;
    border-radius: 0 6px 6px 0 !important;
    background: #4381b5 !important;
    border: 1px solid #4381b5 !important;
    padding: 0 12px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    cursor: pointer;
    margin: 0 !important;
    box-sizing: border-box;
    float: none !important;
}
#searchBar button {
    top: inherit;
    right: -10px !important;
}

/* --- Link colors --- */
#serp-dd .result a:hover,
#serp-dd .result > li.active,
#fullArticle strong a,
#fullArticle a strong,
.collection a,
.contentWrapper a,
.most-pop-articles .popArticles a,
.most-pop-articles .popArticles a:hover span,
.category-list .category .article-count,
.category-list .category:hover .article-count { color: #4381b5; }



/* --- Content area --- */
#contentArea {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 24px;
}


/* --- Most Popular Articles --- */
.most-pop-articles h2 {
    font-size: 20px;
    font-weight: 600;
    color: #1a2b45;
    margin-bottom: 16px;
}

.most-pop-articles .popArticles li {
    border-bottom: 1px solid #f0f2f5;
    padding: 8px 0;
}

.most-pop-articles .popArticles li:last-child {
    border-bottom: none;
}

.most-pop-articles .popArticles a {
    font-size: 14px;
    font-weight: 500;
}


/* --- Section separator --- */
hr.sep {
    border-color: #e8edf2;
    margin: 40px 0;
}


/* --- Category grid --- */
.category-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.category-list .category {
    width: auto !important;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    border: 1px solid #e8edf2;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    padding: 24px 20px;
}

.category-list .category:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    border-color: #4381b5;
}

.category-list .category h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #1a2b45;
}