/**
 * BetterDocs Custom Styles
 * -------------------------
 * Purpose: Overrides and enhancements for BetterDocs single doc pages
 * Created: 2026-01-23
 * Scope: Help center layout, CTA styling, TOC visibility
 * Notes:
 * - Mobile-specific layout fixes for CTA Info Box
 * - Hides in-body Table of Contents (TOC) while preserving sidebar TOC
 * - All styles scoped to BetterDocs templates only
 */

/* Hide the in‑content Table of Contents on BetterDocs single pages */
.betterdocs-entry-content .betterdocs-toc {
    display: none !important;
}

/* ==========================================================================
   Search Hero and Search field
   ========================================================================== */

/* 1. Global Page Background */
body.post-type-archive-docs, 
.betterdocs-wrapper, 
.site-content-grid {
    background-color: #E6F9D5 !important;
}

/* 2. THE HERO: Full width background */
.betterdocs-search-form-wrapper {
    background-color: #E6F9D5 !important;
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    margin-left: -50vw !important;
    padding-top: 80px !important;
    padding-bottom: 60px !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important; /* Critical for dropdown visibility */
}

/* 3. THE SEARCH BAR: Shape and Alignment */
.betterdocs-searchform {
    max-width: 700px !important;
    margin: 0 auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    justify-content: center !important;
    overflow: visible !important;
}

.betterdocs-searchform-input-wrap {
    width: 100% !important;
    position: relative !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

input.betterdocs-search-field {
    height: 60px !important;
    border-radius: 30px !important;
    border: 1px solid #d1d1d1 !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    width: 100% !important;
    font-size: 17px !important;
    outline: none !important;
    padding-left: 70px !important; 
    margin: 0 !important;
    appearance: none !important;
}

/* Search Icon Positioning */
.betterdocs-searchform-input-wrap .docs-search-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 25px !important; 
    fill: #999 !important;
    z-index: 10 !important;
    width: 20px !important;
    height: 20px !important;
}

/* ==========================================================================
   Live Search Results Dropdown
   ========================================================================== */

.betterdocs-search-result-wrap {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    margin-top: 10px !important;
    left: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
    border: 1px solid #eef2f5 !important;
    z-index: 999999 !important;
}

/* STABILITY FIX: Limit to 6 items. 
   We hide everything starting from the 7th item. 
   This is safer than the previous 'none/block' logic.
*/
.betterdocs-search-result-wrap ul.docs-search-result li:nth-child(n+7) {
    display: none !important;
}

/* Remove Categories, BR tags, and allow Title Wrapping */
.betterdocs-search-result-wrap span.betterdocs-search-category,
.betterdocs-search-result-wrap br {
    display: none !important;
}

.betterdocs-search-result-wrap span.betterdocs-search-title {
    font-size: 16px !important;
    color: #333 !important;
    white-space: normal !important; /* Fixes title cut-off */
    line-height: 1.4 !important;
    display: block !important;
}

.betterdocs-search-result-wrap ul.docs-search-result li a {
    padding: 15px 20px !important;
    display: block !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f2f5f7 !important;
    transition: background 0.2s ease !important;
}

.betterdocs-search-result-wrap ul.docs-search-result li a:hover {
    background-color: #f9fef5 !important;
}

.betterdocs-search-result-wrap ul.docs-search-result li a:hover span.betterdocs-search-title {
    color: #1dbf73 !important;
}

/* ==========================================================================
   Category Grid Boxes
   ========================================================================== */

a.category-box.layout-4 {
    margin: 15px !important;
    padding: 45px 30px !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
    text-align: center !important;
    flex: 1 1 calc(33.333% - 30px) !important;
    transition: all 0.3s ease !important;
}

a.category-box.layout-4:hover {
    transform: translateY(-6px) !important;
    border-color: #1dbf73 !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.07) !important;
}

/* ==========================================================================
   5. Mobile Adjustments (Final Force-Wrap Version)
   ========================================================================== */

@media only screen and (max-width: 768px) {
    .betterdocs-search-form-wrapper {
        padding-top: 50px !important;
        padding-bottom: 40px !important;
    }

    input.betterdocs-search-field {
        height: 54px !important;
        padding-left: 65px !important;
    }

    .betterdocs-searchform-input-wrap .docs-search-icon {
        left: 22px !important;
        width: 18px !important;
        height: 18px !important;
    }

    /* --- Force Title Wrapping --- */
    .betterdocs-search-result-wrap ul.docs-search-result li {
        height: auto !important; /* Allows row to grow */
        min-height: 50px !important;
    }

    .betterdocs-search-result-wrap ul.docs-search-result li a {
        padding: 18px 20px !important;
        height: auto !important; /* Allows link area to grow */
        display: block !important;
        overflow: visible !important; /* Prevents clipping */
    }

    .betterdocs-search-result-wrap span.betterdocs-search-title {
        white-space: normal !important;    /* Force wrap */
        word-break: break-word !important; /* Break long words if necessary */
        display: block !important;
        line-height: 1.4 !important;
        overflow: visible !important;
        text-overflow: clip !important;    /* Removes the "..." ellipsis */
    }

    a.category-box.layout-4 {
        flex: 1 1 100% !important;
        margin: 10px 0 !important;
    }
}