/* 
   Legacy Content Shim for CBMS/Odoo Content
   Fixes display issues for imported HTML with 'sh_' and 'oe_' classes.
*/

:root {
    --shim-primary: #6e2eff;
    --shim-secondary: #000000;
}

/* =========================================
   Reset & Grid Shim
   ========================================= */
/* Fix for Odoo structure containers having zero width */
.oe_structure,
.oe_empty {
    width: 100%;
    max-width: 100%;
}

/* Images should never overflow */
/* Images should never overflow but also not stretch if small */
.sh_img img,
.sh_image_box img,
.sh_why_softhealer_service_img img,
.sh_icon img,
.sh_icon_box img {
    max-width: 100%;
    width: auto;
    /* Prevent stretching */
    height: auto;
    display: inline-block;
}

/* Specific fix for large banner images if they need to be full width */
.sh_banner_img img {
    width: 100%;
}

/* =========================================
   Banners (Hero Sections)
   ========================================= */
.sh_why_softhealer_service_banner,
.sh_other_page_banner,
.sh_odoo_migration_page_banner,
.sh_web_development_banner,
.sh_pos_retail_shop_banner_section {
    background: var(--shim-primary);
    background: linear-gradient(135deg, var(--shim-primary) 0%, #3a0ca3 100%);
    color: #fff;
    padding: 80px 15px;
    text-align: center;
    margin-bottom: 40px;
}

.sh_banner_title,
.sh_section_heading_title {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.sh_banner_text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    max-width: 800px;
    margin: 0 auto 30px;
}

/* Breadcrumbs in Banners */
.sh_banner_breadcrumb {
    list-style: none;
    padding: 0;
    display: inline-flex;
    gap: 10px;
    background: rgba(255, 255, 255, 0.1);
    padding: 10px 20px;
    border-radius: 30px;
}

.sh_banner_breadcrumb li,
.sh_banner_breadcrumb a {
    color: #fff;
    text-decoration: none;
}

/* =========================================
   Service Cards & Boxes
   ========================================= */
.sh_service_content_box,
.sh_feature_box,
.sh_why_use_crm_section_content_box {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    height: 100%;
    transition: transform 0.3s;
    border: 1px solid #f0f0f0;
}

.sh_service_content_box:hover {
    transform: translateY(-5px);
}

.sh_service_content_box_title,
.sh_feature_title {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 15px 0;
    color: var(--shim-secondary);
}

.sh_service_content_box_text {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* =========================================
   Sections & Typography
   ========================================= */
.sh_section_heading {
    text-align: center;
    margin-bottom: 50px;
    margin-top: 50px;
}

/* Fix generic titles that might be black on black or hidden */
.sh_title,
.sh_heading {
    color: var(--shim-secondary);
}

.sh_btn,
.sh_button {
    display: inline-block;
    padding: 12px 25px;
    background: var(--shim-primary);
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 15px;
}

.sh_btn:hover {
    background: var(--shim-secondary);
    color: #fff;
}

/* =========================================
   Helpers
   ========================================= */
.sh_white {
    color: #fff !important;
}

.sh_mb_0 {
    margin-bottom: 0 !important;
}

.sh_mb_1 {
    margin-bottom: 15px !important;
}

.sh_mb_2 {
    margin-bottom: 30px !important;
}