/*
Theme Name: IBCT Divi Child Theme
Theme URI: https://ibct-global.com
Description: A custom Divi child theme for IBCT Global
Author: IBCT Global
Author URI: https://ibct-global.com
Template: Divi
Version: 1.0.1
*/

/* Start your custom CSS bellow this comment
============================================ */

/* Custom Login Logo */
.login h1 a {
    background-image: url('https://badge.ibct-global.com/wp-content/uploads/2025/03/cropped-IBCT_Logo_Final_with_White_Ring_500x500.png') !important;
    background-size: contain;
    width: 200px;
    height: 200px;
}

/* Custom Header Logo */
.et_header_style_left #logo {
    max-height: 80px;
    /* Adjust size as needed */
}

#main-header .logo_container a img {
    height: auto !important;
    max-height: 80px !important;
    /* Adjust size as needed */
    width: auto;
}

/* Force Custom Logo */
body #main-header .logo_container #logo {
    max-height: 80px !important;
}

body.et_header_style_left #main-header .logo_container a img#logo {
    height: auto !important;
    max-height: 80px !important;
    width: auto !important;
}

/* Override any dynamic logo changes */
.et_header_style_left .et-fixed-header #logo {
    max-height: 80px !important;
}

/* Aggressive Logo Override */
body #page-container #main-header .container.clearfix.et_menu_container .logo_container a img#logo,
body.et_header_style_left .et-fixed-header #logo,
body.et_header_style_split .et-fixed-header #logo {
    content: url('/wp-content/themes/IBCT-Child-Theme-master/images/IBCT_Logo_Final_with_White_Ring_500x500.png') !important;
    max-height: 80px !important;
    height: auto !important;
    width: auto !important;
}

/* Ensure logo visibility */
#main-header .logo_container {
    visibility: visible !important;
    opacity: 1 !important;
}




/* 
 * Elegant Themes Blog Style for Divi Comments
 * Target: ibct-mena.com
 * Matches: elegantthemes.com/blog comments section exactly
 * 
 * Uses Divi-specific selectors discovered during testing:
 * - .comment_avatar, .comment_postinfo, .comment_area, 
 * - .reply-container, .comment_date, .fn
 */

/* Font Import */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

/* ===================================
   MAIN CARD CONTAINER - THE WHITE BOX WITH SHADOW
   =================================== */
#comment-wrap,
.et_pb_comments_module #comment-wrap,
.et_pb_comments_0 #comment-wrap,
.et_pb_comments_0_tb_body #comment-wrap {
    background-color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 60px 0 rgba(103, 151, 255, 0.11),
        0 12px 90px 0 rgba(103, 151, 255, 0.11) !important;
    padding: 32px !important;
    font-family: 'Lato', sans-serif !important;
    color: #6d7c90 !important;
    line-height: 1.8em !important;
}

/* ===================================
   HEADINGS (Comments Title, Leave A Reply)
   =================================== */
#comment-wrap h1,
#comment-wrap h2,
#comment-wrap h3,
#comment-wrap h4,
#comment-wrap .page_title,
#comment-wrap #reply-title,
.comment-reply-title {
    font-family: 'Lato', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #20292f !important;
    margin-bottom: 24px !important;
}

/* ===================================
   COMMENT LIST & LAYOUT
   =================================== */
#comment-wrap ol.commentlist,
#comment-wrap ul.commentlist,
.et_pb_comments_module ol.commentlist {
    padding: 0 !important;
    list-style: none !important;
    margin: 0 0 32px 0 !important;
}

#comment-wrap ol.commentlist>li.comment,
#comment-wrap li.comment {
    padding: 24px 0 !important;
    margin-bottom: 17px !important;
    border-bottom: 1px solid rgba(109, 124, 144, 0.15) !important;
    position: relative !important;
    background: transparent !important;
    list-style: none !important;
}

#comment-wrap li.comment:last-child {
    border-bottom: none !important;
}

/* Comment body - structure container */
#comment-wrap li.comment .comment-body,
.et_pb_comments_module li.comment .comment-body {
    position: relative !important;
    padding-left: 0 !important;
    min-height: 50px !important;
}

/* ===================================
   AVATAR STYLING - 50x50px, absolute positioned
   Uses Divi's .comment_avatar class
   =================================== */
#comment-wrap .comment_avatar,
.et_pb_comments_module .comment_avatar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 50px !important;
    height: 50px !important;
    margin: 0 !important;
}

#comment-wrap .comment_avatar img,
.et_pb_comments_module .comment_avatar img,
#comment-wrap .comment-author .avatar,
.et_pb_comments_module .comment-author .avatar {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    border: none !important;
    display: block !important;
}

/* Fallback for standard WP avatar positioning */
#comment-wrap .comment-author .avatar,
.et_pb_comments_module .comment-author .avatar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
}

/* ===================================
   POST INFO (Name & Date) - DIVI SPECIFIC
   Uses .comment_postinfo class with .fn and .comment_date
   =================================== */
#comment-wrap .comment_postinfo,
.et_pb_comments_module .comment_postinfo {
    margin-left: 64px !important;
    display: block !important;
    margin-bottom: 16px !important;
}

/* Author name - on its own line */
#comment-wrap .comment_postinfo .fn,
.et_pb_comments_module .comment_postinfo .fn,
#comment-wrap .comment-author .fn,
#comment-wrap .comment-author .fn a,
.et_pb_comments_module .comment-author .fn,
.et_pb_comments_module .comment-author .fn a {
    font-family: 'Lato', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #20292f !important;
    font-style: normal !important;
    text-decoration: none !important;
    display: block !important;
    margin-bottom: 2px !important;
}

/* Date - on separate line below name */
#comment-wrap .comment_postinfo .comment_date,
.et_pb_comments_module .comment_postinfo .comment_date,
#comment-wrap .comment-meta,
.et_pb_comments_module .comment-meta {
    font-family: 'Lato', sans-serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    color: #6d7c90 !important;
    text-decoration: none !important;
    display: block !important;
    line-height: 1.5 !important;
}

#comment-wrap .comment-meta a,
#comment-wrap .comment-meta time,
.et_pb_comments_module .comment-meta a,
.et_pb_comments_module .comment-meta time {
    font-family: 'Lato', sans-serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    color: #6d7c90 !important;
    text-decoration: none !important;
}

/* Hide "says" text */
#comment-wrap .says {
    display: none !important;
}

/* ===================================
   COMMENT CONTENT AREA - Aligned with name (64px from left)
   Uses Divi's .comment_area class
   =================================== */
#comment-wrap .comment_area,
.et_pb_comments_module .comment_area {
    margin-left: 64px !important;
}

#comment-wrap .comment-content,
.et_pb_comments_module .comment-content {
    margin-top: 8px !important;
    margin-left: 0 !important;
}

#comment-wrap .comment-content p,
.et_pb_comments_module .comment-content p {
    font-family: 'Lato', sans-serif !important;
    font-size: 17px !important;
    color: #6d7c90 !important;
    margin-bottom: 16px !important;
    line-height: 29px !important;
}

/* Reply container needs to align link to far right edge */
#comment-wrap .reply-container,
.et_pb_comments_module .reply-container,
#comment-wrap .reply,
.et_pb_comments_module .reply {
    position: absolute !important;
    top: 24px !important;
    right: 0 !important;
    margin: 0 !important;
    clear: none !important;
}

/* Each comment needs relative positioning for Reply to anchor to */
#comment-wrap li.comment,
.et_pb_comments_module li.comment {
    position: relative !important;
}

#comment-wrap .comment-reply-link,
.et_pb_comments_module .comment-reply-link,
#comment-wrap .comment-reply-link.et_pb_button {
    display: inline-block !important;
    padding: 0 !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    color: #3776ff !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    float: none !important;
}

#comment-wrap .comment-reply-link:hover,
.et_pb_comments_module .comment-reply-link:hover {
    color: #20292f !important;
    text-decoration: underline !important;
}

/* Remove Divi button icon */
#comment-wrap .comment-reply-link:after,
.et_pb_comments_module .comment-reply-link:after {
    display: none !important;
}

/* ===================================
   NESTED REPLIES - Additional 40px indent per level
   =================================== */
#comment-wrap .children,
.et_pb_comments_module .children {
    margin-left: 40px !important;
    padding-left: 0 !important;
    list-style: none !important;
}

#comment-wrap .children .children {
    margin-left: 40px !important;
}

/* ===================================
   FORM SECTION - LEAVE A REPLY
   Separate card with gap above
   =================================== */
#comment-wrap .comment-respond,
#comment-wrap #respond,
.et_pb_comments_module .comment-respond {
    margin-top: 48px !important;
    padding: 32px !important;
    border-top: none !important;
    /* Separate card styling */
    background-color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 60px 0 rgba(103, 151, 255, 0.11),
        0 12px 90px 0 rgba(103, 151, 255, 0.11) !important;
}

/* Logged in as note */
#comment-wrap .logged-in-as,
.et_pb_comments_module .logged-in-as {
    font-family: 'Lato', sans-serif !important;
    font-size: 17px !important;
    color: #6d7c90 !important;
    margin-bottom: 16px !important;
}

#comment-wrap .logged-in-as a {
    color: #3776ff !important;
    text-decoration: none !important;
}

/* ===================================
   FORM INPUTS - LIGHT GREY BACKGROUND
   =================================== */
#comment-wrap #respond textarea#comment,
#comment-wrap #respond input#author,
#comment-wrap #respond input#email,
#comment-wrap #respond input#url,
#comment-wrap textarea,
#comment-wrap input[type="text"],
#comment-wrap input[type="email"],
#comment-wrap input[type="url"],
.et_pb_comments_module textarea#comment,
.et_pb_comments_module input#author,
.et_pb_comments_module input#email,
.et_pb_comments_module input#url {
    background-color: rgba(109, 124, 144, 0.1) !important;
    border: 2px solid transparent !important;
    border-radius: 5px !important;
    padding: 12px 16px !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    color: #20292f !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
    margin-bottom: 16px !important;
}

#comment-wrap #respond textarea#comment {
    min-height: 180px !important;
    resize: vertical !important;
}

/* Placeholder styling */
#comment-wrap input::placeholder,
#comment-wrap textarea::placeholder,
.et_pb_comments_module input::placeholder,
.et_pb_comments_module textarea::placeholder {
    color: #6d7c90 !important;
    opacity: 0.7 !important;
}

/* Focus state - blue border */
#comment-wrap #respond textarea#comment:focus,
#comment-wrap #respond input#author:focus,
#comment-wrap #respond input#email:focus,
#comment-wrap #respond input#url:focus,
#comment-wrap textarea:focus,
#comment-wrap input:focus,
.et_pb_comments_module textarea:focus,
.et_pb_comments_module input:focus {
    background-color: rgba(109, 124, 144, 0.1) !important;
    border-color: #3776ff !important;
    outline: none !important;
}

/* ===================================
   SUBMIT BUTTON - BRIGHT BLUE PILL, RIGHT ALIGNED
   =================================== */
#comment-wrap .form-submit,
.et_pb_comments_module .form-submit {
    text-align: right !important;
    margin-top: 16px !important;
}

#comment-wrap .form-submit input#submit,
#comment-wrap #submit,
.et_pb_comments_module .form-submit input#submit,
.et_pb_comments_module #submit,
#et_pb_submit,
.et_pb_comments_module #et_pb_submit {
    background: #399eff !important;
    color: #fff !important;
    border: none !important;
    padding: 14px 32px !important;
    font-family: 'Lato', sans-serif !important;
    font-weight: 900 !important;
    border-radius: 100px !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    font-size: 15px !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

#comment-wrap .form-submit input#submit:hover,
#comment-wrap #submit:hover,
.et_pb_comments_module .form-submit input#submit:hover,
.et_pb_comments_module #submit:hover,
#et_pb_submit:hover,
.et_pb_comments_module #et_pb_submit:hover {
    background: #2a8ae6 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(57, 158, 255, 0.4) !important;
}

/* Remove Divi button icon from submit */
#comment-wrap #submit:after,
.et_pb_comments_module #submit:after,
#et_pb_submit:after,
.et_pb_comments_module #et_pb_submit:after {
    display: none !important;
}

/* ===================================
   LABELS (if visible)
   =================================== */
#comment-wrap label,
.et_pb_comments_module label {
    font-family: 'Lato', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #20292f !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* ===================================
   AUTHOR BADGE (for post authors)
   WordPress adds .bypostauthor class to author comments
   =================================== */
#comment-wrap li.bypostauthor>.comment-body .comment_avatar img,
#comment-wrap li.bypostauthor .comment_avatar img {
    border: 4px solid #ff4a9e !important;
    box-sizing: border-box !important;
}

#comment-wrap li.bypostauthor>.comment-body .fn,
#comment-wrap li.bypostauthor>.comment-body .fn a,
#comment-wrap li.bypostauthor .comment_postinfo .fn {
    color: #ff4a9e !important;
    display: inline-block !important;
}

/* Pink AUTHOR badge pill - appears after author name */
#comment-wrap li.bypostauthor .comment_postinfo .fn::after,
#comment-wrap li.bypostauthor>.comment-body .fn::after {
    content: 'AUTHOR' !important;
    display: inline-block !important;
    background-color: #ff4a9e !important;
    color: #ffffff !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 1px 10px !important;
    border-radius: 100px !important;
    margin-left: 8px !important;
    vertical-align: middle !important;
    letter-spacing: 0.5px !important;
}





/* 
   ================================================================
   DESKTOP MEGA MENU STYLES (Scoped to Desktop)
   ================================================================
*/
@media only screen and (min-width: 981px) {

    /* Style Level 2 Items (Mega Menu Headers) */
    #top-menu li.mega-menu>ul>li>a {
        font-weight: 700 !important;
        /* Bold */
        color: #fff !important;
        /* Brighter White */
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        /* Underline to separate */
        padding-bottom: 8px !important;
        margin-bottom: 8px !important;
        font-size: 15px !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding-left: 0 !important;
        /* Move to the left */
    }

    /* Style Level 3 Items (Links under headers) */
    #top-menu li.mega-menu>ul>li>ul>li>a {
        color: rgba(255, 255, 255, 0.8) !important;
        /* Slightly transparent for hierarchy */
        padding-left: 5px !important;
        /* Slight indent */
        transition: color 0.3s ease;
    }

    #top-menu li.mega-menu>ul>li>ul>li>a:hover {
        color: #fff !important;
        padding-left: 10px !important;
        /* Slight movement on hover */
    }
}