/*
Theme Name:   Maktub Child
Theme URI:    https://1.envato.market/wp-maktub-preview
Author: EstudioPatagon
Author URI: https://1.envato.market/ep-portfolio-themes
Description:  Child theme, based on Maktub
Template: maktub

*/

/* Add your custom code just below */

/* Source2IT article palette. Keep the article surface white even when the
 * parent theme injects a different background through its theme options. */
body.home,
body.blog,
body.archive,
body.single-post {
    background: #fff !important;
    background-color: #fff !important;
}

body.home::before,
body.blog::before,
body.archive::before,
body.single-post::before {
    background: none !important;
}

/* Keep the right sidebar on the same white surface as the articles. */
#sidebar,
#sidebar .sidebar-wrapper,
#sidebar .widget {
    background: transparent !important;
    background-color: transparent !important;
}

#single,
div.articles,
#sidebar {
    --source2it-dark-blue: #011C45;
    --source2it-brand-red: #FF4C60;
    --source2it-link-blue: #6AB8EE;
    --epcl-main-color: var(--source2it-brand-red);
    --epcl-secondary-color: var(--source2it-brand-red);
    --epcl-black-color: var(--source2it-dark-blue);
    --epcl-titles-color: var(--source2it-dark-blue);
    --epcl-text-color: var(--source2it-dark-blue);
}

#single .main-article,
div.articles article,
div.articles.grid-posts .epcl-bg {
    background: #fff !important;
    background-color: #fff !important;
}

#single .main-article .title,
#single .main-article .title a,
#single .main-article .text h1,
#single .main-article .text h2,
#single .main-article .text h3,
#single .main-article .text h4,
#single .main-article .text h5,
#single .main-article .text h6,
div.articles article .title,
div.articles article .title a {
    color: var(--source2it-dark-blue) !important;
}

#single .main-article .text,
#single .main-article .text p,
#single .main-article .text li,
#single .main-article .text td,
div.articles article,
div.articles article p,
div.articles article li {
    color: var(--source2it-dark-blue);
}

#single .main-article .text a:not([class]),
#single .main-article .text a:not([class]) strong {
    color: var(--source2it-link-blue) !important;
}

#single .main-article .text a:not([class]):hover,
#single .main-article .text a:not([class]):hover strong {
    color: var(--source2it-link-blue) !important;
}

/* Keep blog and sidebar URLs in the same blue as article-content links. */
div.articles article a:not(.thumb):not(.button),
#sidebar .widget a:not(.button):not(.tag-cloud-link) {
    color: var(--source2it-link-blue) !important;
}

div.articles article a:not(.thumb):not(.button):hover,
#sidebar .widget a:not(.button):not(.tag-cloud-link):hover {
    color: var(--source2it-link-blue) !important;
}

/* Linked post titles stay dark blue. Hover underline uses the link blue. */
div.articles article .main-title.title.underline-effect > a,
#sidebar .widget .item .title.underline-effect > a {
    color: var(--source2it-dark-blue) !important;
}

div.articles article .main-title.title.underline-effect > a:hover,
#sidebar .widget .item .title.underline-effect > a:hover {
    color: var(--source2it-dark-blue) !important;
}

div.articles article .main-title.title.underline-effect > a:not(.epcl-button),
#sidebar .widget .item .title.underline-effect > a:not(.epcl-button),
div.articles article .main-title.title.underline-effect > a:not(.epcl-button):hover,
#sidebar .widget .item .title.underline-effect > a:not(.epcl-button):hover {
    background-image: linear-gradient(
        to right,
        var(--source2it-link-blue) 0%,
        var(--source2it-link-blue) 100%
    ) !important;
}

/* Sidebar copy uses the dark brand blue; only links keep the lighter blue. */
#sidebar,
#sidebar .widget,
#sidebar .widget p,
#sidebar .widget li,
#sidebar .widget time,
#sidebar .widget .info,
#sidebar .widget .widget-title,
#sidebar .widget .widget-title .bg {
    color: var(--source2it-dark-blue) !important;
}

/* Siblings heading border follows the dark blue border tone. */
#single section.siblings .title.bordered span.border {
    background: var(--source2it-dark-blue) !important;
    background-color: var(--source2it-dark-blue) !important;
}

/* Center siblings-card image and its inner white frame. */
#single section.siblings article .thumb {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

#single section.siblings article .thumb::before {
    content: '';
    position: absolute;
    z-index: 5;
    top: 4px;
    right: 4px;
    bottom: 4px;
    left: 4px;
    box-sizing: border-box;
    border: 2px solid #fff;
    pointer-events: none;
}

#single section.siblings article .thumb .fullimage {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    transform: none !important;
    background-position: center center !important;
    background-size: cover !important;
}

/* The social links remain available in the sidebar, not in the header. */
#header .epcl-social-buttons {
    display: none !important;
}

/* Prevent moved widgets from appearing twice if a cached footer is served. */
#footer .widget_epcl_posts_thumbs,
#footer .widget_epcl_social {
    display: none !important;
}

/* Accessible primary navigation. */
.epcl-blog-heading,
.epcl-archive-heading {
    padding-top: 50px;
    padding-bottom: 20px;
}

#header div.menu-mobile .menu-mobile-toggle {
    display: block;
    width: 31px;
    height: 31px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
}

#header div.menu-mobile .menu-mobile-toggle svg {
    pointer-events: none;
}

#epcl-mobile-primary-navigation .menu-item-has-children::after {
    display: none !important;
}

#epcl-mobile-primary-navigation .epcl-submenu-toggle {
    position: absolute;
    z-index: 6;
    top: 14px;
    right: 0;
    display: block;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--epcl-text-color);
}

#epcl-mobile-primary-navigation .epcl-submenu-toggle::before {
    display: block;
    font-family: "FontAwesome";
    font-size: 14px;
    line-height: 44px;
    content: "\f107";
    transition: transform 200ms ease;
}

#epcl-mobile-primary-navigation .menu-item-has-children.submenu-open > .epcl-submenu-toggle::before {
    transform: rotate(180deg);
}

#epcl-mobile-primary-navigation .menu-item-has-children.submenu-open > ul.sub-menu {
    max-height: 50vh !important;
    padding: 10px 0 0;
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
}

#epcl-mobile-primary-navigation ul.menu li.menu-item-has-children:not(.submenu-open):hover > ul.sub-menu {
    max-height: 0 !important;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
}

#epcl-desktop-primary-navigation ul.menu li:focus-within > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
}

#header a:focus-visible,
#header button:focus-visible,
#epcl-mobile-primary-navigation a:focus-visible,
#epcl-mobile-primary-navigation button:focus-visible {
    outline: 3px solid var(--epcl-main-color) !important;
    outline-offset: 3px;
}

@media screen and (min-width: 1201px) {
    #header div.menu-mobile .menu-mobile-toggle {
        display: none;
    }
}

/* Failsafe for the inherited RD Station WhatsApp popup loaded through GTM. */
.rdstation-popup-js-floating-button[aria-label*="WhatsApp" i] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@supports selector(:has(*)) {
    [id^="bricks-component-"][class*="floating-button"]:has(.rdstation-popup-js-floating-button[aria-label*="WhatsApp" i]) {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* Show blog sidebar below article/list on mobile, before the footer. */
@media screen and (max-width: 767px) {
    #sidebar,
    #sidebar.grid-30 {
        display: block !important;
        float: none !important;
        clear: both;
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        margin-top: 35px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    #sidebar.no-sidebar .default-sidebar,
    #sidebar .sidebar-wrapper.default-sidebar {
        display: block !important;
        width: 100%;
        margin-top: 0;
    }

    #sidebar .widget {
        width: 100%;
        float: none;
        padding-left: 0;
        padding-right: 0;
    }
}