/* =========================================
   1. OCEANWP DEFAULT FOOTER RESET
   ========================================= */
#footer-inner,
#footer-widgets {
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
    border: none !important;
}
#footer-widgets .oceanwp-row {
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================
   2. YBM FOOTER BASE STYLES
   ========================================= */
.ybm-footer {
    background-color: hsl(220, 8%, 20%); 
    color: hsl(210, 20%, 98%); 
    font-family: 'Inter', sans-serif;
    border-top: 1px solid hsla(220, 13%, 87%, 0.2);
}

.ybm-footer .ybm-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* --- THE MASTER LAYOUT --- */
.ybm-footer-main { padding: 80px 0 48px 0 !important; } /* Added 80px top padding for breathing room */

.ybm-footer-layout {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 40px !important;
    flex-wrap: wrap !important;
}

/* Fixed widths for the outside elements */
.ybm-footer-brand { flex: 0 0 280px !important; }
.ybm-footer-contact { flex: 0 0 220px !important; }

/* The Menu wrapper expands to fill the middle */
.ybm-footer-menu-wrapper { flex: 1 !important; }


/* =========================================
   3. UNPACKING THE HEADER MENU
   ========================================= */
ul.ybm-footer-mega-list, 
ul.ybm-footer-mega-list ul {
    list-style: none !important; 
    padding: 0 !important; 
    margin: 0 !important;
}

/* Turns top-level menu items into side-by-side columns */
ul.ybm-footer-mega-list {
    display: flex !important;
    justify-content: space-between !important;
    gap: 24px !important;
    width: 100% !important;
}

/* Level 1: Column Headers (Capabilities, Solutions, etc.) */
ul.ybm-footer-mega-list > li > a,
.ybm-contact-title {
    color: white !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-bottom: 24px !important;
    display: block !important;
    pointer-events: none !important; 
    border-bottom: 1px solid hsla(220, 13%, 87%, 0.1) !important;
    padding-bottom: 8px !important;
}
.ybm-contact-title { border-bottom: none !important; padding-bottom: 0 !important; margin: 0 0 24px 0 !important; }

/* Level 2: Sub-Headers (Moulding Services, By Industries, etc.) */
ul.ybm-footer-mega-list .sub-menu .menu-item-has-children > a {
    color: var(--ybm-primary) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin: 16px 0 8px 0 !important;
    display: block !important;
    font-weight: 700 !important;
    pointer-events: none !important;
}

/* Keep first sub-header flush with the top */
ul.ybm-footer-mega-list > li > ul.sub-menu > li.menu-item-has-children:first-child > a {
    margin-top: 0 !important;
}

/* Level 3: The Actual Links */
ul.ybm-footer-mega-list .sub-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important; 
}

ul.ybm-footer-mega-list .sub-menu li a {
    color: hsla(210, 20%, 98%, 0.7) !important;
    font-size: 14.5px !important;
    text-decoration: none !important;
    display: inline-block !important;
    /* Smooth Lovable Transition */
    transition: color 0.3s ease, text-decoration-color 0.3s ease !important;
}

/* The Lovable Hover Effect (Green text + underline) */
ul.ybm-footer-mega-list .sub-menu li a:hover {
    color: var(--ybm-primary) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--ybm-primary) !important;
    text-decoration-thickness: 1.5px !important;
    text-underline-offset: 6px !important;
}


/* =========================================
   4. CONTACT INFO, MAP & SVG ICONS
   ========================================= */
.ybm-footer-brand img.ybm-logo-img { height: 48px !important; margin-bottom: 16px !important; display: block !important; } 
.ybm-contact-list { display: flex; flex-direction: column; gap: 16px !important; } 

.ybm-contact-item { 
    display: flex; gap: 12px; align-items: flex-start; 
    color: hsla(210, 20%, 98%, 0.7); font-size: 14.5px !important; 
}

/* Force Lucide SVG icons to be green using stroke */
.ybm-contact-item i,
.ybm-contact-item svg { 
    width: 20px !important; 
    height: 20px !important; 
    color: var(--ybm-primary) !important; 
    stroke: var(--ybm-primary) !important; 
    flex-shrink: 0; 
    margin-top: 2px; 
}

.ybm-contact-item a { color: inherit; text-decoration: none !important; transition: all 0.3s ease !important; }

/* Contact Link Hover */
.ybm-contact-item a:hover { 
    color: var(--ybm-primary) !important; 
    text-decoration: underline !important; 
    text-decoration-color: var(--ybm-primary) !important;
    text-decoration-thickness: 1.5px !important;
    text-underline-offset: 6px !important;
}

/* =========================================
   5. BOTTOM BAR & RESPONSIVE
   ========================================= */
.ybm-footer-bottom { border-top: 1px solid hsla(220, 13%, 87%, 0.2); padding: 24px 0; }
.ybm-bottom-flex { display: flex; justify-content: space-between; align-items: center; color: hsla(210, 20%, 98%, 0.6); font-size: 13.5px; }
.ybm-bottom-links { display: flex; gap: 24px; }
.ybm-bottom-links a { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; transition: 0.2s; }
.ybm-bottom-links a:hover { color: var(--ybm-primary); }

@media (max-width: 1024px) {
    .ybm-footer-brand { flex: 0 0 100% !important; margin-bottom: 20px !important; }
    .ybm-footer-menu-wrapper { flex: 0 0 100% !important; }
    ul.ybm-footer-mega-list { flex-wrap: wrap !important; gap: 40px !important; }
    ul.ybm-footer-mega-list > li { flex: 1 1 45% !important; } /* 2 columns on tablet */
    .ybm-footer-contact { flex: 0 0 100% !important; margin-top: 20px !important; }
}
@media (max-width: 600px) {
    ul.ybm-footer-mega-list > li { flex: 1 1 100% !important; } /* Stack on mobile */
    .ybm-bottom-flex { flex-direction: column; gap: 16px; text-align: center; }
}