/*
Theme Name: CommercialHosting UK Master
Theme URI: https://commercialhosting.co.uk
Version: 1.0
Description: CommercialHosting UK Child Theme
Author: CommercialHosting UK
Author URI: https://commercialhosting.co.uk
template: bb-theme
*/

/* Add your custom styles here... */ 



.fl-page-nav-wrap {
border-bottom: 1px solid #e6e6e6;
border-top: 1px solid #e6e6e6;
padding: 0;
border-color: #0b9444;
background-color: #0b9444;
color: #fff;
}

.fl-page-nav .navbar-toggle {

margin-top: 20px;
margin-bottom: 0px;

}


/* Turns the inner column wrapper into a flex column that fills the full height */
.bb-bottom-align-buttons .fl-column-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Forces the button module to absorb all empty space above it, pushing it to the bottom */
.bb-bottom-align-buttons .fl-module-button {
  margin-top: auto;
}



/* 1. SECURE THE CONTAINER: Stop the gradient from escaping */
.fl-row.screen-overlay > .fl-row-content-wrap,
.fl-col.screen-overlay > .fl-col-content,
.fl-photo.screen-overlay .fl-photo-content {
    position: relative;
}

/* Ensure the photo wrapper hugs the image tightly so the gradient doesn't spill out */
.fl-photo.screen-overlay .fl-photo-content {
    display: inline-block;
    overflow: hidden; /* Best practice: Keeps the gradient clipped if you use rounded corners */
}

/* 2. THE OVERLAY: Applies to Rows, Columns, and Photos */
.fl-row.screen-overlay > .fl-row-content-wrap::after,
.fl-col.screen-overlay > .fl-col-content::after,
.fl-photo.screen-overlay .fl-photo-content::after {
    content: "" !important;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* The gradient: #51bfb5 to #0b91cd at 48% opacity */
    background: linear-gradient(90deg, rgba(81, 191, 181, 0.48) 0%, rgba(11, 145, 205, 0.48) 100%) !important;
    
    mix-blend-mode: screen !important;
    
    /* Ensures the overlay doesn't block clicks */
    pointer-events: none; 
    z-index: 1; 
}

/* 3. BRING INNER CONTENT FORWARD: Keeps text/buttons on top (Applies mainly to Rows/Cols) */
.fl-row.screen-overlay > .fl-row-content-wrap > .fl-row-content,
.fl-col.screen-overlay > .fl-col-content > *, 
.bring-to-front {
    position: relative;
    z-index: 10;
}



/* 1. Secure the wrappers: Targets central content AND the specific Featured Image node */
.single-post .fl-post-content .fl-photo-content,
.single-post .entry-content .fl-photo-content,
.fl-node-5e690a5c6fed2 .fl-photo-content {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

/* 2. Apply the gradient overlay */
.single-post .fl-post-content .fl-photo-content::after,
.single-post .entry-content .fl-photo-content::after,
.fl-node-5e690a5c6fed2 .fl-photo-content::after {
    content: "" !important;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* The gradient: #51bfb5 to #0b91cd at 48% opacity */
    background: linear-gradient(90deg, rgba(81, 191, 181, 0.48) 0%, rgba(11, 145, 205, 0.48) 100%) !important;
    mix-blend-mode: screen !important;
    
    pointer-events: none; 
    z-index: 1; 
}







/* Scope strictly to Beaver Builder front-end content AND Post Content modules */

/* Remove default bullets */
.fl-builder-content .fl-module-rich-text ul,
.fl-builder-content .fl-module-fl-post-content ul {
    list-style-type: none;
    padding-left: 0;
    margin-left: 20px; 
}

/* Style the list items and create space for the custom bullet */
.fl-builder-content .fl-module-rich-text ul li,
.fl-builder-content .fl-module-fl-post-content ul li {
    position: relative;
    padding-left: 30px; 
    margin-bottom: 10px;
}

/* Create the custom bullet using the primary logo */
.fl-builder-content .fl-module-rich-text ul li::before,
.fl-builder-content .fl-module-fl-post-content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px; 
    width: 16px; 
    height: 16px; 
    background-image: url('https://recbos.co.uk/wp-content/uploads/2026/04/bulletpoint.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Styling for indented (nested) bullet points */
.fl-builder-content .fl-module-rich-text ul ul,
.fl-builder-content .fl-module-fl-post-content ul ul {
    margin-top: 10px;
    margin-left: 25px; 
}

/* Use the secondary logo for indented bullets and adjust size */
.fl-builder-content .fl-module-rich-text ul ul li::before,
.fl-builder-content .fl-module-fl-post-content ul ul li::before {
    background-image: url('https://recbos.co.uk/wp-content/uploads/2026/04/indent-bulletpoint.png'); 
    width: 14px;
    height: 14px;
    top: 5px; 
}










/* Safely apply rounded corners directly to the image and its link tag */
body .round-corner-post .uabb-post-thumbnail {
    border-radius: 10px !important;
}


@media (max-width: 768px) {
    /* Centralise the hamburger toggle button and text strictly in the footer */
    .center-footer-menu .fl-menu-responsive-toggle-mobile .fl-menu-mobile-toggle {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Centralise the expanded menu list container */
    .center-footer-menu .fl-menu-responsive-toggle-mobile nav .menu {
        text-align: center;
    }

    /* Force the individual links to centralise */
    .center-footer-menu .fl-menu-responsive-toggle-mobile nav .menu li a {
        justify-content: center;
        text-align: center;
    }
}