/* Describely Brand Colors CSS */

/* Root variables for brand colors */
:root {
    --brand-green: #43583D;
    --complementary-green: #3E8A78;
    --brand-cream: #F8F3EC;
    --brand-white: #FFFFFF;
    --brand-black: #000001;
}

/* Global body and background styling */
body { 
    background: var(--brand-cream) !important; 
    color: var(--brand-black) !important;
    font-family: "Kumba Sans", sans-serif !important;
}

/* Typography Styling */
h1, h2, h3, h4, h5, h6 {
    font-family: "Kumba Sans", sans-serif !important;
    color: var(--brand-black) !important;
}

p {
    font-family: "Kumba Sans", sans-serif !important;
    color: var(--brand-black) !important;
}

/* Navigation Bar Styling */
.navbar .navbar-inner { 
    background: var(--brand-cream) !important; 
}

.navbar .nav li a, 
.navbar .icon-private-w { 
    color: var(--brand-green) !important; 
    font-family: "Kumba Sans", sans-serif !important;
}

.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: var(--brand-green) !important; 
    font-family: "Kumba Sans", sans-serif !important;
}

.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: var(--brand-green) !important; 
}

/* Search Section Styling */
#docsSearch {
    background: var(--brand-cream) !important;
    border-bottom: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

/* "How can we help?" header styling */
#docsSearch h1 {
    font-family: "Kumba Sans", sans-serif !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    color: var(--brand-black) !important;
}

#searchBar input.search-query {
    background: var(--brand-white) !important;
    color: var(--brand-black) !important;
    border-color: var(--brand-green) !important;
    font-family: "Kumba Sans", sans-serif !important;
}

#searchBar button {
    background: var(--brand-green) !important;
    color: var(--brand-white) !important;
    border-color: var(--brand-green) !important;
    font-family: "Kumba Sans", sans-serif !important;
}

#searchBar button:hover {
    background: var(--complementary-green) !important;
}

/* Search Results Dropdown */
#serp-dd .result a:hover,
#serp-dd .result > li.active {
    color: var(--brand-green) !important;
    font-family: "Kumba Sans", sans-serif !important;
}

/* Category Cards/Collections Styling */
.category-list {
    background: var(--brand-cream) !important;
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 20px !important;
}

.category-list .category {
    background: var(--brand-white) !important;
    color: var(--brand-black) !important;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.3s ease;
    min-height: 180px;

    /* Keep Help Scout's default 3-column layout intact */
    box-sizing: border-box;

    /* Center text inside each card */
    text-align: center !important;
    padding: 40px 20px !important;
}

.category-list .category:hover {
    box-shadow: 0 4px 12px rgba(67, 88, 61, 0.1);
    transform: translateY(-2px);
}

.category-list .category h3 {
    color: var(--brand-black) !important;
    font-family: "Kumba Sans", sans-serif !important;
    margin-bottom: 10px !important;
}

.category-list .category p {
    color: var(--brand-black) !important;
    font-family: "Kumba Sans", sans-serif !important;
    margin-bottom: 10px !important;
}

/* Article Count Styling */
.category-list .category .article-count,
.category-list .category:hover .article-count {
    color: var(--brand-green) !important;
    font-weight: 600;
    font-family: "Kumba Sans", sans-serif !important;
}

.category-list .category .article-count span {
    color: var(--brand-green) !important;
    font-family: "Kumba Sans", sans-serif !important;
}

/* Content Links */
.collection a,
.contentWrapper a,
.most-pop-articles .popArticles a,
.most-pop-articles .popArticles a:hover span {
    color: var(--brand-green) !important;
    font-family: "Kumba Sans", sans-serif !important;
}

/* Full Article Content */
#fullArticle, 
#fullArticle p, 
#fullArticle ul, 
#fullArticle ol, 
#fullArticle li, 
#fullArticle div, 
#fullArticle blockquote, 
#fullArticle dd, 
#fullArticle table {
    color: var(--brand-black) !important;
    font-family: "Kumba Sans", sans-serif !important;
}

#fullArticle strong a,
#fullArticle a strong {
    color: var(--brand-green) !important;
    font-family: "Kumba Sans", sans-serif !important;
}

#fullArticle a {
    color: var(--brand-green) !important;
    font-family: "Kumba Sans", sans-serif !important;
}

#fullArticle a:hover {
    color: var(--complementary-green) !important;
}

/* Footer Styling */
footer {
    background: var(--brand-cream) !important;
    color: var(--brand-black) !important;
    font-family: "Kumba Sans", sans-serif !important;
}

footer a {
    color: var(--brand-green) !important;
    font-family: "Kumba Sans", sans-serif !important;
}

footer a:hover {
    color: var(--complementary-green) !important;
}

/* Content Area */
#contentArea {
    background: var(--brand-cream) !important;
    border-top: none !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Remove the divider line above containers */
#docsSearch + #contentArea::before,
#docsSearch::after,
section#docsSearch::after {
    display: none !important;
    content: none !important;
    border: none !important;
    background: none !important;
}

/* Remove any hr elements */
#contentArea hr:first-child,
.container-fluid > hr:first-child {
    display: none !important;
}

/* Help Scout Beacon (if visible) */
.BeaconFabButtonFrame {
    --pulse-background: var(--brand-green) !important;
}

/* Buttons and Interactive Elements */
.btn-primary {
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    color: var(--brand-white) !important;
    font-family: "Kumba Sans", sans-serif !important;
}

.btn-primary:hover {
    background-color: var(--complementary-green) !important;
    border-color: var(--complementary-green) !important;
}

/* Form Elements */
input, textarea, select {
    background: var(--brand-white) !important;
    color: var(--brand-black) !important;
    border-color: #e0e0e0 !important;
    font-family: "Kumba Sans", sans-serif !important;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--brand-green) !important;
    box-shadow: 0 0 0 2px rgba(67, 88, 61, 0.2) !important;
}

/* Additional hover states for better UX */
.category-list .category h3:hover {
    color: var(--brand-green) !important;
}

/* Ensure proper contrast and readability */
.text-muted {
    color: #666666 !important;
    font-family: "Kumba Sans", sans-serif !important;
}

/* Mobile responsiveness considerations */
@media (max-width: 768px) {
    .category-list .category {
        margin-bottom: 15px;
    }
    
    .navbar .brand {
        color: var(--brand-green) !important;
    }
}