/*
 Theme Name:   Divi Child
 Theme URI:    https://www.elegantthemes.com/gallery/divi/
 Description:  A custom child theme for Divi.
 Author:       Your Name
 Author URI:   https://yourwebsite.com
 Template:     Divi
 Version:      1.0.0
*/

/* Custom CSS Starts Below This Line */

/* ==========================================================================
   PART 1: GLOBAL SOCIAL MODULE CUSTOM BRAND ICONS ENGINE
   ========================================================================== */

/* 1. Strip native SVGs automatically for ANY link assigned a data-logo tag inside our module */
.custom-brand-icons [data-logo] svg,
.custom-brand-icons [data-logo] icon,
.custom-brand-icons [data-logo] .et-pb-icon,
.custom-brand-icons [data-logo]::before {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 2. Standardized Layout Engine (Applies universal size & margins across all your layouts) */
.custom-brand-icons [data-logo] {
    background-color: transparent !important;
    background-image: none !important; 
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 65px !important; 
    overflow: visible !important;
    margin-left: 20px !important; /* Retains your exact left-hand spacing rule */
}

/* 3. Universal Pseudo-Element Engine */
.custom-brand-icons [data-logo]::after {
    content: "" !important;
    position: absolute !important;
    width: 70px !important;  
    height: 24px !important; 
    background-size: contain !important; 
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

/* 4. Global Hover Lock */
.custom-brand-icons [data-logo]:hover,
.custom-brand-icons [data-logo]:hover::after {
    background-color: transparent !important;
}

/* ==========================================================================
   PART 2: LOGO REGISTRY (GLOBAL DEFAULT VALUES)
   ========================================================================== */

/* --- MODULE #1 LOGO (White variant registered globally) --- */
.custom-brand-icons [data-logo="white-logo"]::after {
    background-image: url('http://academyfiitstuba.local/wp-content/uploads/2026/06/fiit.png') !important;
}

/* --- MODULE #2 LOGO (Black variant registered globally) --- */
.custom-brand-icons [data-logo="black-logo"]::after {
    background-image: url('http://academyfiitstuba.local/wp-content/uploads/2026/06/fiit_b.png') !important;
}


/* ==========================================================================
   PART 3: CUSTOM HEADER OVERRIDES FOR PAGE 293 ONLY
   ========================================================================== */

/* 1. Base Header Settings & Background Picture */
/* body.page-id-293 .dynamic-header {
    background-image: url('http://academyfiitstuba.local/wp-content/uploads/2026/06/chips-scaled.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    height: 360px !important;
    position: relative !important; 
}*/

/* 2. The Black Gradient Layer */
/* body.page-id-293 .dynamic-header::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1.0) 0%, rgba(0, 0, 0, 0) 100%) !important;
    pointer-events: none !important; 
    z-index: 1 !important;
}*/

/* 3. Force the MENU Row to lock to the absolute top of the section */
/*body.page-id-293 .dynamic-header .et_pb_row {
    position: absolute !important;
    top: 10px !important;        
    left: 0 !important;          
    right: 0 !important;         
    margin-left: auto !important;
    margin-right: auto !important;
    z-index: 2 !important;
}*/

/* 4. Change the menu link font colors */
/*body.page-id-293 .dynamic-menu .et_pb_menu__wrap a {
    color: #ffffff !important; 
}*/

/* 5. Force Native Social Media Icons to White via Graphics Filter Overrides */
body.page-id-293 .custom-brand-icons .et_pb_social_icon,
body.page-id-293 .custom-brand-icons .et-pb-icon,
body.page-id-293 .custom-brand-icons [data-icon] {
    /* Turns whatever layout element Divi displays into pure 100% white */
    filter: brightness(0) invert(1) !important;
}

/* 6. Removes default network colored background boxes on this specific page */
body.page-id-293 .dynamic-header .custom-brand-icons li a {
    background-color: transparent !important; 
}

/* 7. DYNAMIC SWAP: Forces the black-logo to render the white asset on Page 293 */
body.page-id-293 .custom-brand-icons [data-logo="black-logo"]::after {
    background-image: url('http://academyfiitstuba.local/wp-content/uploads/2026/06/fiit.png') !important;
}

/* 8. Swap the main header navigation logo with the alternate picture */
body.page-id-293 img.dynamic-logo,
body.page-id-293 .dynamic-logo img {
    content: url('http://academyfiitstuba.local/wp-content/uploads/2026/06/logo_w.png') !important;
}



/* ==========================================================================
   SECOND LEVEL BULLETS - EMPTY CIRCLE
   ========================================================================== */

/* Make second-level bullets empty circles */
.et_pb_module ul ul {
    list-style-type: circle !important;
}




/* ==========================================================================
   MENU ITEMS SPACING
   ========================================================================== */

/* Adjust spacing for modern Menu Modules */
.et_pb_menu ul.et-menu {
    gap: 20px; /* Change 25px to your preferred spacing */
}

/* Adjust spacing for Default Divi Header */
#top-menu-nav #top-menu {
    display: flex !important;
    gap: 20px; 
}


/* ==========================================================================
   PHONE MENU WIDTH
   ========================================================================== 

@media only screen and (max-width: 980px) {
    /* Centers the entire dropdown container box unit */
    .et_pb_menu .et_mobile_menu {
        /* Sets a clean box width */
        width: 90% !important; 
        max-width: 350px !important;
        min-width: 280px !important; 
        
        /* The magic trick to center an absolute container */
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        
        /* Keeps the text alignment inside the box to the left */
        text-align: left !important; 
    }
    
    /* Prevents text cropping and adds spacing to the links */
    .et_mobile_menu li a {
        white-space: nowrap !important;
        width: auto !important;
        padding-left: 30px !important; /* Adds breathing room to the left side */
    }
}