/*
 Theme Name:   Aramco Child
 Description:  Aramco Child Theme
 Template:     aramco
 Version:      1.0.0
*/
/* --- Aggressive Custom CSS for AC Wellness Header Fixes (FINAL DEFINITIVE FIX) --- */

/* NEW: OPACITY FIX - Use RGBA for the background color on the main header */
#pxl-header-integrated {
    background-color: rgba(69, 106, 92, 0.9) !important; /* #456a5c with 90% opacity */
}

/* NEW: Center the main menu links */
#pxl-header-integrated .pxl-header-menu {
    display: flex !important;
    justify-content: center !important;
}

/* 0. HIDE THE LANGUAGE SWITCHER / FLAGS */
.pxl-switcher-lang,
.pxl-switcher-lang > a,
.lang-item.lang-item-786, 
.lang-item.lang-item-416, 
.menu-item.menu-item-6643-nl,
.menu-item.menu-item-6643-en {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* 1. FORCE LOGO SIZE */
.acw-logo-img {
    max-height: 80px !important; /* Reduced max height for thinner look */
    width: auto !important;
}

/* 2. FORCE ALL TOP BAR TEXT (CONTACT INFO & ICONS) TO WHITE */
#pxl-header-integrated {
    color: #ffffff !important;
}
#pxl-header-integrated .acw-contact-info,
#pxl-header-integrated .acw-contact-info .pxl-info-item {
    color: #ffffff !important;
}
#pxl-header-integrated .acw-contact-info .pxl-info-item i {
    color: #ffffff !important;
}

/* 3. FORCE CONTACT INFO LINKS TO WHITE */
#pxl-header-integrated .acw-contact-info a {
    color: #ffffff !important;
}

/* 4. FORCE SOCIAL MEDIA ICONS/LINKS TO WHITE */
#pxl-header-integrated .acw-socials a i {
    color: #ffffff !important;
}
/* Ensure the Font Awesome TikTok and WhatsApp icons are white */
#pxl-header-integrated .acw-socials a .fab.fa-tiktok,
#pxl-header-integrated .pxl-contact-info .fab.fa-whatsapp {
    color: #ffffff !important;
}


/* 5. FORCE MAIN MENU LINKS TO WHITE & FINAL SPACING ADJUSTMENT */
#pxl-header-integrated .pxl-header-nav .pxl-menu-primary > li > a {
    color: #ffffff !important;
    padding: 5px 5px !important; /* Reduced padding for thinner look */
    transition: all 0.3s;
    font-weight: 500 !important;
    white-space: nowrap !important; 
    /* Aggressive negative margin to pull the text closer to the underline */
    margin-bottom: -12px !important; /* Increased negative margin */
}

/* 6. FORCE LIGHT GREEN HOVER EFFECT & REDUCED UNDERLINE SPACING */
#pxl-header-integrated .pxl-header-nav .pxl-menu-primary > li:hover > a,
#pxl-header-integrated .pxl-header-nav .pxl-menu-primary > li.current-menu-item > a,
#pxl-header-integrated .pxl-header-nav .pxl-menu-primary > li.current-menu-ancestor > a {
    color: #c4d7b9 !important; 
    border-bottom: 1px solid #c4d7b9 !important; /* Thin, close underline */
    background-color: transparent !important;
    padding: 5px 5px !important; /* Reduced padding for thinner look */
    margin-bottom: -12px !important; /* Match the negative margin for hover state */
}

/* 7. REMOVE DEFAULT THEME LINE EFFECTS */
#pxl-header-integrated .pxl-header-nav .pxl-menu-primary > li > a:after,
#pxl-header-integrated .pxl-header-nav .pxl-menu-primary > li > a:before {
    display: none !important;
}
/* --- Blog Post Single View Customizations --- */

/* 1. HIDE AUTHOR, COMMENTS, AND THE SEPARATORS */
.pxl---post .pxl--metas .pxl-info-item.pxl--item-author,
.pxl---post .pxl--metas .pxl-info-item.pxl--item-comment,
.pxl---post .pxl--metas .pxl--divider {
    display: none !important;
}

/* 2. ENSURE DATE AND VIEWS ARE ALIGNED CORRECTLY */
/* This ensures the remaining items (Date & Views) look correct without dividers */
.pxl---post .pxl--metas {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.pxl---post .pxl--metas .pxl-info-item.pxl--item-date,
.pxl---post .pxl--metas .pxl-info-item.pxl--item-view {
    margin-right: 15px !important; /* Add spacing between Date and Views */
}

/* 3. REMOVE COMMENTS SECTION */
/* Stop the comments template from loading, but ONLY if you want to completely disable it. 
   If you only want to hide the count in the metas, the line above is enough. 
   To hide the whole comments section at the bottom: */
#comments {
    display: none !important;
}
/* 4. ENSURE FEATURED IMAGE IS FULL WIDTH AND RESPONSIVE */
.pxl---post .pxl-item--image img {
    width: 100% !important; 
    height: auto !important; /* Maintain aspect ratio */
    object-fit: cover !important; /* Ensures consistency */
    display: block;
}
/* --- Blog Post Single View Metadata Hiding (Definitive Fix) --- */

/* HIDE AUTHOR ELEMENT using the exact class */
.pxl-item--author.pxl-mr-40 {
    display: none !important;
}

/* HIDE COMMENTS COUNT ELEMENT using the exact class */
.pxl-item--comment.pxl-mr-40 {
    display: none !important;
}

/* Optional: If there is a divider element between the metas, hide that too */
.pxl---post .pxl--metas .pxl--divider {
    display: none !important;
}
/* --- Definitive Fix for the Post Author Info Box at the bottom --- */
#pxl-author-info, 
.pxl-author-info {
    display: none !important;
}
/* --- Definitive Fix for the Elementor Author Box Widget at the bottom --- */

/* Targets the specific widget class and the ID to ensure maximum hiding power */
.widget.widget_pxl_elementor_box,
#pxl_elementor_box-5 {
    display: none !important;
}