/* 
 Theme Name:     Bare bones for Divi
 Author:         Divi theme examples
 Author URI:     http://www.divithemeexamples.com 
 Template:       Divi
 Version:        1.1
*/ 


/* ----------- PUT YOUR CUSTOM CSS BELOW THIS LINE -- DO NOT EDIT ABOVE THIS LINE --------------------------- */

/* Dropdown Menu Width - Make wider for image + text menu items */
.et_pb_menu_0 .et-menu-nav li ul.sub-menu {
    width: 300px !important;
    min-width: 300px !important;
}

/* Prevent text wrapping in dropdown items */
.et_pb_menu_0 .et-menu-nav li ul.sub-menu li a {
    white-space: nowrap !important;
}

/* Optional: Add some padding for better spacing with images */
.et_pb_menu_0 .et-menu-nav li ul.sub-menu li a div {
    padding: 5px 10px !important;
}

/* ============================================
   Portfolio Filters - Clean Style with Dots
   ============================================ */

/* Filter Container */
.et_pb_portfolio_filters {
   text-align: center !important;
   padding: 20px 20px 35px 20px !important;
   margin: 0 !important;
   background: transparent !important;
   display: flex !important;
   justify-content: center !important;
   flex-wrap: wrap !important;
   align-items: center !important;
}

/* Remove list styling */
.et_pb_portfolio_filters li {
   display: flex !important;
   align-items: center !important;
   margin: 5px 0 !important;
   padding: 0 !important;
   list-style: none !important;
}

/* Simple Text Links */
.et_pb_portfolio_filters li a {
   /* Remove ALL styling */
   background: none !important;
   border: none !important;
   border-radius: 0 !important;
   box-shadow: none !important;

   /* Simple text */
   color: #999999 !important;
   font-size: 15px !important;
   font-weight: 400 !important;
   text-decoration: none !important;
   text-transform: none !important;

   /* Padding for spacing */
   padding: 5px 12px !important;

   /* Simple transition */
   transition: color 0.2s ease !important;
}

/* Hover - Darker */
.et_pb_portfolio_filters li a:hover {
   color: #555555 !important;
}

/* Active - Black and Bold */
.et_pb_portfolio_filters li a.active {
   color: #000000 !important;
   font-weight: 600 !important;
}

/* Add dot after each item EXCEPT the last */
.et_pb_portfolio_filters li:not(:last-child)::after {
   content: "·" !important;
   color: #cccccc !important;
   margin: 0 4px !important;
   font-size: 16px !important;
   line-height: 1 !important;
}

/* ============================================
   Mobile Responsive - Clean Touch Targets
   ============================================ */

/* Tablets and below */
@media (max-width: 768px) {
   /* Remove dots on mobile - they cause wrapping issues */
   .et_pb_portfolio_filters li:not(:last-child)::after {
      display: none !important;
   }

   /* Better spacing and wrapping */
   .et_pb_portfolio_filters {
      padding: 15px 10px 25px 10px !important;
      gap: 8px !important;
   }

   .et_pb_portfolio_filters li {
      margin: 0 !important;
      flex: 0 0 auto !important;
   }

   .et_pb_portfolio_filters li a {
      font-size: 14px !important;
      padding: 8px 12px !important;
      /* Add subtle background on mobile for easier tapping */
      background: #f5f5f5 !important;
      border-radius: 4px !important;
   }

   .et_pb_portfolio_filters li a:hover,
   .et_pb_portfolio_filters li a.active {
      background: #e8e8e8 !important;
   }
}

/* Smaller phones */
@media (max-width: 480px) {
   .et_pb_portfolio_filters {
      padding: 10px 5px 20px 5px !important;
      gap: 6px !important;
   }

   .et_pb_portfolio_filters li a {
      font-size: 13px !important;
      padding: 6px 10px !important;
   }
}

/* ============================================
   Portfolio Card Hover - YouTube-style
   ============================================ */

/* Card container */
.et_pb_portfolio_item {
   position: relative;
   padding: 10px;
   margin: -10px;
   border-radius: 12px;
}

/* Background glow element - expands + fades in */
.et_pb_portfolio_item::before {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: 12px;
   background-color: rgba(0, 0, 0, 0.045);
   opacity: 0;
   transform: scale(0.95);
   transition: opacity 550ms ease-out,
               transform 350ms cubic-bezier(0.2, 0, 0, 1);
   pointer-events: none;
   z-index: -1;
}

/* On hover - fade in + expand to full size */
.et_pb_portfolio_item:hover::before {
   opacity: 1;
   transform: scale(1);
}

/* Rounded corners on image */
.et_pb_portfolio_item .et_portfolio_image {
   border-radius: 8px;
   overflow: hidden;
}

/* ============================================
   Modern Card System - Two-Row Connected Cards
   Usage: Add "card-top" to first row, "card-bottom" to second row
   Or "card-single" for standalone single-row cards
   ============================================ */

/* Top row of two-row card */
.card-top {
    background-color: #ffffff !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -2px 20px rgba(0,0,0,0.06) !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Bottom row of two-row card */
.card-bottom {
    background-color: #ffffff !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
    margin-top: 0 !important;
    padding-top: 20px !important;
}

/* Single standalone card */
.card-single {
    background-color: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08) !important;
}

/* Chatbot inside card-single - contain content within the row */
.card-single:has([data-lucrative-chatbot]) {
    overflow: hidden !important;
}

/* The chatbot container itself - respect its set height and scroll internally */
.card-single [data-lucrative-chatbot] {
    overflow: hidden !important;
}

/* Page background for card sections - warmer gray */
.et_pb_section:has(.card-top),
.et_pb_section:has(.card-single) {
    background-color: #f7f7f5 !important;
}

/* ============================================
   Card System - Mobile Responsive
   ============================================ */

@media (max-width: 980px) {
    /* Force full-width and center on tablet */
    .card-top,
    .card-bottom,
    .card-single {
        width: 95% !important;
        max-width: 95% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        border-radius: 12px 12px 0 0 !important;
    }

    .card-bottom {
        border-radius: 0 0 12px 12px !important;
    }

    .card-single {
        border-radius: 12px !important;
    }
}

@media (max-width: 767px) {
    /* Full edge-to-edge on mobile */
    .card-top,
    .card-bottom,
    .card-single {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .card-bottom {
        border-radius: 0 !important;
    }

    .card-single {
        border-radius: 0 !important;
    }

    /* Remove background color difference on mobile - seamless */
    .et_pb_section:has(.card-top),
    .et_pb_section:has(.card-single) {
        background-color: #ffffff !important;
    }
}

/* ============================================
   Global Footer - Clean Minimal Style
   ============================================ */

/* Footer link hover effects */
#main-footer a,
.et-l--footer a {
    transition: color 0.2s ease, opacity 0.2s ease !important;
}

#main-footer a:hover,
.et-l--footer a:hover {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Footer responsive - stack on mobile */
@media (max-width: 767px) {
    .et-l--footer .et_pb_row {
        flex-direction: column !important;
        text-align: center !important;
    }

    .et-l--footer .et_pb_column {
        width: 100% !important;
        margin-bottom: 15px !important;
    }

    .et-l--footer .et_pb_image {
        margin: 0 auto !important;
    }

    .et-l--footer .et_pb_text {
        text-align: center !important;
    }
}