/* ============================================
   DIPUENTES - HelpScout Docs - Custom CSS
   Brand: #007b43 - Premium - Minimalistisch
   ============================================ */

/* --- TYPOGRAFIE --- */

body {
    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
    color: #1a1a1a;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* --- HEADER / NAVIGATION --- */

#mainNav {
    background-color: #111111 !important;
    border-bottom: 1px solid #1f1f1f !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 72px !important;
}

#mainNav .navbar-inner {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 72px !important;
}

#mainNav .navbar-inner::before,
#mainNav .navbar-inner::after {
    content: none !important;
}

#mainNav .container-fluid {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 72px !important;
    padding: 0 24px !important;
    width: 100% !important;
}

#mainNav .container-fluid::before,
#mainNav .container-fluid::after {
    content: none !important;
}

#mainNav .brand {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

#mainNav .brand img {
    height: 40px !important;
    width: auto !important;
}

#mainNav .nav-collapse {
    float: none !important;
    display: flex !important;
    align-items: center !important;
}

#mainNav .nav {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

#mainNav .nav > li {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

#mainNav .nav > li > a {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 1rem !important;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 0 18px !important;
    line-height: 72px !important;
    transition: color 0.2s ease;
    display: block !important;
}

#mainNav .nav > li > a:hover,
#mainNav .nav > li.active > a {
    color: #ffffff !important;
    background: transparent !important;
}

#mainNav .nav > li.active > a {
    border-bottom: 2px solid #007b43;
}

/* --- SEARCH HERO --- */

#docsSearch {
    background-color: #f7f7f5 !important;
    border-bottom: 1px solid #e8e8e6 !important;
    padding: 72px 24px !important;
}

#docsSearch h1 {
    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    color: #111111 !important;
    letter-spacing: -0.02em;
    margin-bottom: 32px !important;
}

#searchBar {
    display: flex !important;
    align-items: center !important;
    max-width: 616px !important;
    margin: 0 auto !important;
    height: 60px !important;
}

#searchBar .search-query {
    background: #ffffff !important;
    border: 1px solid #d4d4d0 !important;
    border-right: none !important;
    box-shadow: none !important;
    color: #1a1a1a !important;
    font-size: 1.0625rem !important;
    border-radius: 6px 0 0 6px !important;
    height: 60px !important;
    line-height: 60px !important;
    padding: 0 20px !important;
    flex: 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#searchBar .search-query::placeholder {
    color: #9a9a94 !important;
}

#searchBar .search-query:focus {
    outline: none !important;
    border-color: #007b43 !important;
    box-shadow: none !important;
}

#searchBar button {
    background: #007b43 !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    height: 60px !important;
    padding: 0 32px !important;
    border-radius: 0 6px 6px 0 !important;
    line-height: 60px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    vertical-align: top !important;
    transition: background 0.2s ease;
}

#searchBar button:hover {
    background: #005f34 !important;
    color: #ffffff !important;
}

/* --- HAUPTINHALT --- */

#docsContent {
    background-color: #ffffff;
    padding-top: 48px !important;
    padding-bottom: 64px !important;
}

.docsSection h2,
.docsSection > h2,
h2.section-title {
    font-size: 0.6875rem !important;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9a9a94 !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8e8e6;
}

/* --- CATEGORY / COLLECTION CARDS --- */

.twoCol .collection,
.threeCol .collection,
.category-list .category {
    background: #ffffff !important;
    border: 1px solid #e8e8e6 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    padding: 24px !important;
}

.twoCol .collection:hover,
.threeCol .collection:hover,
.category-list .category:hover {
    border-color: #007b43 !important;
    box-shadow: 0 2px 12px rgba(0, 123, 67, 0.08) !important;
}

.twoCol .collection h3,
.threeCol .collection h3,
.category-list .category h3 {
    font-size: 1rem !important;
    font-weight: 600;
    color: #111111 !important;
    margin-bottom: 6px !important;
}

.twoCol .collection .article-count,
.threeCol .collection .article-count,
.category-list .category .article-count,
.twoCol .collection a.article-count,
.threeCol .collection a.article-count {
    color: #007b43 !important;
    font-size: 0.8125rem !important;
    font-weight: 500;
}

/* --- ARTIKEL-SEITE --- */

#fullArticle h1,
.article h1 {
    font-size: 1.625rem !important;
    font-weight: 700;
    color: #111111 !important;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin-bottom: 24px !important;
}

#fullArticle h2 {
    font-size: 1.125rem !important;
    font-weight: 600;
    color: #1a1a1a !important;
    margin-top: 36px !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.01em;
}

#fullArticle h3 {
    font-size: 1rem !important;
    font-weight: 600;
    color: #1a1a1a !important;
    margin-top: 28px !important;
    margin-bottom: 8px !important;
}

#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
    font-size: 1rem !important;
    color: #3a3a3a !important;
    line-height: 1.7 !important;
}

#fullArticle a {
    color: #007b43 !important;
    text-decoration: underline;
    text-decoration-color: rgba(0, 123, 67, 0.3);
}

#fullArticle a:hover {
    color: #005f34 !important;
    text-decoration-color: #005f34;
}

#fullArticle code {
    background: #f4f4f2 !important;
    border: 1px solid #e8e8e6 !important;
    color: #1a1a1a !important;
    font-size: 0.875em !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
}

#fullArticle pre {
    background: #111111 !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 20px !important;
}

#fullArticle pre code {
    background: transparent !important;
    border: none !important;
    color: #e8e8e6 !important;
}

/* --- BREADCRUMB --- */

.breadcrumb {
    font-size: 0.8125rem !important;
    color: #9a9a94 !important;
}

.breadcrumb a {
    color: #9a9a94 !important;
}

.breadcrumb a:hover {
    color: #007b43 !important;
}

.breadcrumb .divider {
    color: #d4d4d0 !important;
}

/* --- RELATED ARTICLES --- */

.relatedArticles h4,
#related-articles h4 {
    font-size: 0.6875rem !important;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9a9a94 !important;
    margin-bottom: 12px !important;
}

.relatedArticles li a,
#related-articles li a {
    color: #1a1a1a !important;
    font-size: 0.9375rem !important;
    text-decoration: none;
}

.relatedArticles li a:hover,
#related-articles li a:hover {
    color: #007b43 !important;
}

/* --- FEEDBACK --- */

.articleFoot .vote {
    border-top: 1px solid #e8e8e6 !important;
    padding-top: 24px !important;
}

.articleFoot .vote p {
    font-size: 0.875rem !important;
    color: #9a9a94 !important;
}

.articleFoot .vote .btn {
    background: #ffffff !important;
    border: 1px solid #d4d4d0 !important;
    color: #3a3a3a !important;
    border-radius: 4px !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease;
}

.articleFoot .vote .btn:hover {
    border-color: #007b43 !important;
    color: #007b43 !important;
}

/* --- FOOTER --- */

#footer {
    background-color: #111111 !important;
    border-top: 1px solid #1f1f1f !important;
    padding: 24px !important;
}

#footer,
#footer p,
#footer a {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 0.8125rem !important;
}

#footer a:hover {
    color: rgba(255, 255, 255, 0.75) !important;
}

#footer .hs-branding {
    opacity: 0.4;
}

/* --- NAVBAR OVERRIDE CLEANUP --- */

.navbar .nav li {
    font-size: 1rem !important;
}