/* CSS variables */
/* All custom CSS files refer to this CSS variables. */
/* ------------- */
:root {
    --primary: #E76106;
    --secondary: #3f91cc;
    --accent: #EC8138;
    --heading: #313e50; /* Typo setting at Theme options */
    --color_gray: #666; /* citrus.css */
    --color_body: #444; /* citrus.css */
    --border: #ddd;
    --white: #fff;
    --white_smoke: #f4f4f4;
    --pine_green: #00796b;
    --pine_green_50: #009688;
    --linkedin: #0a66c2;
    --linkedin_hover: #1a73e8;
    --email: #0a2463;
    --email_hover: #1a3d8c;
    --card_radius: 12px;
    --card_transform_hover: -8px;
    --menu_bg: #313e50;
    --menu_color: #313e50;
}

/* Elementor plugin */
/* ---------------- */
html {
    /*
    To ensure the 'Back to Top' functionality of my theme works correctly,
    I disable the smooth scroll CSS setting in the Elementor plugin.
    This will prevent Elementor's frontend (`plugins/elementor/assets/css/frontend.min.css`) from overriding my theme's default behavior.
    (Note: I am not using Elementor's internal smooth anchor feature.)
    Remember to clear the cache for both Elementor and your caching plugin.
    Solution by Grok.
    */
    scroll-behavior: auto !important;
}
.elementor-widget-container {
    box-shadow: unset !important;
}

/* Global style */
/* ------------ */
#kad-head-cart-popup a.button, .button, .kad-btn {
    font-size: 16px;
}

a:focus {
    outline: unset; /* Remove outline */
}

/* ScorllToTop */
/* To pass the SEO checker from PageSpeed insight, I change from the a tag to button tag via JavaScript for the "ScorllToTop" feature. So the new button style needs to be added. */
button.icon-arrow-up {
    color: var(--white);
    font-size: 16px;
    line-height: 20px;
    padding-top: 10px;
    background-color: unset;
    border: 0;
}
button.icon-arrow-up:hover,
button.icon-arrow-up:focus,
button.icon-arrow-up:visited,
button.icon-arrow-up:active {
    color: var(--white);
    background-color: unset;
}


/* Virtue Menu */
#nav-main ul.sf-menu > li {
    border: 0;
}
/* -- Setting for the menu dropdown full-width -- */
/* #nav-main .current-menu-item > a {
    color: var(--white);
    background-color: var(--menu_bg);
}
.mobileclass.collapsed {
    background-color: var(--menu_bg);
} */
/* -- End -- */
/* -- Setting for the menu button -- */
/* Adjust the tablet and mobile menu button color becasue the Elementor button setting is override the Theme setting. -- */
.mobileclass.collapsed {
    color: var(--menu_color);
}
.mobileclass.collapsed:hover,
.mobileclass.collapsed:focus {
    color: var(--menu_color);
    background-color: var(--white_smoke);
}
.nav-trigger-case { /* Adjust the menu button position */
    top: -60px;
}
@media (max-width: 767px) {
    header .nav-trigger .nav-trigger-case {
        top: -60px !important;
    }
    .id-kad-mobile-nav {
        margin-top: 0 !important;
    }
}
/* -- End -- */


/* Social button color */
/* To use with menu, you must add the classname into the menu */
.ar-email-bg > a {
    background-color: var(--email);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease-out !important;
}
.ar-email-bg > a:hover {
    transform: translateY(-8px);
    background-color: var(--email_hover) !important;
}
.ar-linkedin-bg > a {
    background-color: var(--linkedin);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease-out !important;
}
.ar-linkedin-bg > a:hover {
    transform: translateY(-8px);
    background-color: var(--linkedin_hover) !important;
}

/* Footer copyright */
/* ---------------- */
.footercredits p, .footernav ul li a {
    font-size: 14px;
}

/* Sticky footer menu on mobile. No apply to the single blog post */
/* -------------------------------------------------------------- */
.footerclass a, .footernav ul li a {
    color: var(--white) !important;
}

.footernav ul li a {
    padding: 10px 15px;
}

@media screen and (max-width: 640px) {
    /* Combine page-related selectors for brevity */
    body:not(.single-post) {
        /* Sticky footer for CTAs */
        #menu-footer-menu {
            position: fixed;
            bottom: env(safe-area-inset-bottom, 0); /* Support for notched devices */
            left: 0;
            right: 0;
            background: var(--white);
            box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1); /* Lighter shadow for performance */
            padding: 8px 10px; /* Slightly more padding for touch targets */
            display: flex;
            align-items: center;
            gap: 8px; /* Slightly larger gap for better spacing */
            justify-content: center;
            z-index: 1000;
        }

        /* Footer menu items */
        .footernav > ul > li {
            flex: 1;
            width: 100%;
            min-height: 48px; /* Increased for WCAG touch target */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* CTA button styles */
        #menu-footer-menu a {
            text-decoration: none;
            color: var(--white);
            font-size: 16px;
            text-align: center;
            transition: transform 0.2s ease, background-color 0.2s ease;
            -webkit-transition: transform 0.2s ease, background-color 0.2s ease; /* Safari */
            min-height: 48px; /* Ensure touch target size */
            line-height: 48px; /* Center text vertically */
            width: 100%;
        }

        /* Hover, focus, and active states */
        #menu-footer-menu a:hover,
        #menu-footer-menu a:focus,
        #menu-footer-menu a:active {
            color: #f8f8f8;
            outline: 2px solid var(--white); /* Visible focus for accessibility */
            outline-offset: 2px;
        }

        /* Footer copyright */
        .footercredits p {
            text-align: center;
        }

        /* Ensure content is not hidden behind sticky footer */
        margin-bottom: 72px; /* Increased to account for larger footer */
    }

    /* Table layout for single post */
    .single-post .single-head-before-content table > tbody > tr {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}


/* Box shadow */
.ar-box-shadow {
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
    box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
}

/* Avaiable tag */
/* ------------ */
.ar-available .ar-available-tag {
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 14px;
}
.ar-available .ar-available-bullet {
    display:inline-block;
    margin-right: 5px;
    margin-bottom: 2px;
    width:8px;
    height:8px;
    border-radius:5px;
    opacity: 0.8;
}
.ar-green-status .ar-available-tag {
    color:#017345;
    background-color: #dcfce8;
}
.ar-green-status .ar-available-bullet {
    background-color: #57de8d;
}
.ar-red-status .ar-available-tag {
    color:#d02c2f;
    background-color: #FBEEEE;
}
.ar-red-status .ar-available-bullet {
    background-color: #d02c2f;
}
.ar-orange-status .ar-available-tag {
    color:#74290F;
    background-color: #FFE7D6;
}
.ar-orange-status .ar-available-bullet {
    background-color: #74290F;
}
.ar-blue-status .ar-available-tag {
    color:#0a2240;
    background-color: #DCE9F9;
}
.ar-blue-status .ar-available-bullet {
    background-color: #0a2240;
}
.ar-lightblue-status .ar-available-tag {
    color:#0D2F57;
    background-color: #CFE8FF;
}
.ar-lightblue-status .ar-available-bullet {
    background-color: #0D2F57;
}

/* Call To Action */
.ar-call-to-action-bg {
	background-color: var( --e-global-color-da49ebb );
}

/* Resume page */
.page-id-24566 h2 {
	border-top: 1px solid #eee;
	padding-top: 40px !important;
}