/*
Theme Name: Setsco Revamp
Theme URI: 
Author: Clickr
Author URI: 
Description: This is block theme for revamp of setsco.
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: setsco-revamp
Tags: 
*/

/* Local font: Arimo */
@font-face {
    font-family: 'Arimo';
    src: url('./assets/fonts/Arimo-VariableFont_wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Arimo';
    src: url('./assets/fonts/Arimo-Italic-VariableFont_wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --container-width: 1280px;
}
.align-right-edge {
    max-width: calc(
        max(80px, var(--container-width) + (100vw - var(--container-width)) / 2)
    ) !important;
}
/* for mega menu 'tab' block, tab labels width */
.width-320px {
    width: 320px !important;
}
/* header navigation css for position fix, background, hover  */
.header-navigation {
    position: fixed !important;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: #ffffff;
}
.header-navigation
    #mega-menu-wrap-max_mega_menu_1
    #mega-menu-max_mega_menu_1
    > li.mega-menu-item
    > a.mega-menu-link {
    color: #003594 !important;
}
.header-navigation:hover
    #mega-menu-wrap-max_mega_menu_1
    #mega-menu-max_mega_menu_1
    > li.mega-menu-item
    > a.mega-menu-link:hover
    .mega-indicator {
    transform: rotate(180deg);
    transition: all 0.3s ease-in-out;
}
.header-navigation
    #mega-menu-wrap-max_mega_menu_1
    #mega-menu-max_mega_menu_1
    li.mega-menu-item-has-children
    > a.mega-menu-link
    > span.mega-indicator:after {
    color: var(--wp--preset--color--cyan-accent) !important;
}
.page-id-3885 .header-navigation:not(.scrolled) {
    backdrop-filter: blur(4px);
    background-color: #00000000;
    /* mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%); */
}
.page-id-3885 .header-navigation:hover {
    background-color: #ffffff !important;
}
@media (max-width: 1024px) {
    #mega-menu-wrap-max_mega_menu_1
        #mega-menu-max_mega_menu_1
        > li.mega-menu-item.mega-toggle-on
        > a.mega-menu-link:last-of-type {
        height: 60px !important;
    }
}
@media (min-width: 1025px) {
    .page-id-3885
        .header-navigation:not(.scrolled)
        #mega-menu-wrap-max_mega_menu_1
        #mega-menu-max_mega_menu_1
        > li.mega-menu-item
        > a.mega-menu-link {
        color: #ffffff !important;
    }
    .page-id-3885
        .header-navigation:hover
        #mega-menu-wrap-max_mega_menu_1
        #mega-menu-max_mega_menu_1
        > li.mega-menu-item
        > a.mega-menu-link {
        color: #003594 !important;
    }
    .header-navigation
        #mega-menu-wrap-max_mega_menu_1
        #mega-menu-max_mega_menu_1
        > li.mega-menu-item:not(:last-child) {
        margin-right: 20px;
    }
}
@media (min-width: 1440px) {
    .header-navigation
        #mega-menu-wrap-max_mega_menu_1
        #mega-menu-max_mega_menu_1
        > li.mega-menu-item:not(:last-child) {
        margin-right: 60px;
    }
}
/* Ensure the logo container can stack images */
.page-id-3885 .custom-logo-link {
    position: relative;
    display: block;
    /* Optional: Set fixed size here if logos don't have width/height attributes */
    width: 61px;
    height: 80px;
}

/* Ensure both logos are positioned on top of each other */
.page-id-3885 .custom-logo-link .custom-logo {
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.3s ease-in-out;
}

/* --- A. Initial State (NOT Scrolled) --- */
/* Header is transparent, text is white. Need White Logo visible. */
.page-id-3885 .header-navigation:not(.scrolled) .logo-white {
    opacity: 1; /* White Logo is visible */
    z-index: 2;
}
.page-id-3885 .header-navigation:not(.scrolled) .logo-blue {
    opacity: 0; /* Blue Logo is hidden */
    z-index: 1;
}

/* --- B. Scrolled State --- */
/* Header is opaque/white, text is blue. Need Blue Logo visible. */
.page-id-3885 .header-navigation.scrolled .logo-white {
    opacity: 0; /* White Logo is hidden */
    z-index: 1;
}
.page-id-3885 .header-navigation.scrolled .logo-blue,
.page-id-3885 .header-navigation:not(.scrolled):hover .logo-blue {
    opacity: 1; /* Blue Logo is visible */
    z-index: 2;
}

/* home page hero carousel section. group block doesn't have setting to set flex align */
.align-items-end {
    align-items: end !important;
}
.home-page-hero-section {
    position: relative;
}
.home-page-hero-section::after,
.service-card-section::after,
.enquiry-section::after {
    width: 546px;
    height: 400px;
    pointer-events: none;
    position: absolute;
    overflow: hidden;
}
.home-page-hero-section::after,
.enquiry-section::after {
    content: '';
    bottom: 0;
    right: 0;
    z-index: 99;
    background: url('/wp-content/themes/setsco-revamp/assets/img/Component1.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top left;
}
.enquiry-section::after {
    height: 250px;
    z-index: 0;
}
.service-card-section::after {
    content: '';
    width: 546px;
    height: 300px;
    bottom: 0;
    left: 0;
    z-index: 10;
    background: url('/wp-content/themes/setsco-revamp/assets/img/Component2.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top right;
}
.flex-1 {
    flex: 1 !important;
}

@media (max-width: 1024px) {
    .home-page-hero-section {
        min-height: 500px !important;
    }
    .home-page-hero-section::after {
        width: 400px;
        height: 200px;
    }
    .service-card-section::after {
        width: 400px;
        height: 100px;
    }
    .stk-block:is(.stk-block-button, .stk-block-icon-button, .stk-block-pagination):not(
            .is-style-link
        )
        .stk-button {
        padding: 10px 20px 10px 20px;
    }
    :where(.stk-block-button, .stk-block-icon-button, .stk-block-pagination):not(.is-style-link)
        .stk-button {
        font-size: 14px;
    }
}

/* mega menu */
#mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle.mega-menu-open + #mega-menu-max_mega_menu_1 {
    padding: 40px;
}
@media (max-width: 1024px) {
    .header-navigation
        #mega-menu-wrap-max_mega_menu_1
        #mega-menu-max_mega_menu_1
        > li.mega-menu-item.mega-toggle-on
        > a.mega-menu-link {
        color: var(--wp--preset--color--white) !important;
    }
    .header-navigation
        #mega-menu-wrap-max_mega_menu_1
        #mega-menu-max_mega_menu_1
        li.mega-menu-item-has-children
        > a.mega-menu-link
        > span.mega-indicator:after {
        color: var(--wp--preset--color--blue-primary) !important;
    }
    .header-navigation
        #mega-menu-wrap-max_mega_menu_1
        #mega-menu-max_mega_menu_1
        li.mega-menu-item-has-children.mega-toggle-on
        > a.mega-menu-link
        > span.mega-indicator:after {
        color: var(--wp--preset--color--white) !important;
    }
    .width-320px {
        width: 220px !important;
    }
}
@media (max-width: 767px) {
    .width-320px {
        width: 100% !important;
    }
}

.news-card {
    position: relative;
}
.news-card .stk-block-content {
    position: static;
}
.news-card .news-card-tag {
    position: absolute;
    top: 18px;
    left: 16px;
}
a:where(:not(.wp-element-button)) {
    text-decoration: none !important;
}

/* Target the main search icon button in the menu */
.dashicons-search.mega-menu-link {
    display: flex !important;
    align-items: center !important;
}
.dashicons-search.mega-menu-link span.custom-search-btn {
    /* 1. Set the background to white */
    background-color: white !important; /* Use !important if needed to override Max Mega Menu's defaults */

    /* 2. Hide the default Dashicon */
    /* This uses the CSS technique WordPress uses for Dashicons: */
    text-indent: -9999px !important; /* Move the pseudo-content off-screen */
    line-height: 1;

    /* Ensure the link has defined dimensions for the icon */
    width: 40px; /* Adjust size as needed */
    height: 40px; /* Adjust size as needed */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0; /* Remove default padding */

    /* Optional: Keep the rounded corners from the search button */
    border-radius: 25px;
    border: 1px solid #ccc; /* Optional border */
}

/* 3. Inject the custom SVG icon */
/* We target the link and use a background image */
.dashicons-search.mega-menu-link span.custom-search-btn {
    /* Replace 'your-svg-url.svg' with the actual URL to your uploaded SVG file */
    background-image: url('/wp-content/themes/setsco-revamp/assets/img/search.svg') !important;

    /* Center and size the icon */
    background-size: 20px 20px !important; /* Adjust size as needed */
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Important: Clear the Dashicon before applying the background image */
.dashicons-search.mega-menu-link::before {
    content: none !important;
}

/* Styling for a disabled button */
.stk-block-carousel__button__prev.disabled,
.stk-block-carousel__button__next.disabled {
    cursor: not-allowed; /* Change the cursor */
    pointer-events: none; /* Crucial for preventing clicks in some cases */
    background-color: #ffffff33 !important;
    backdrop-filter: blur(8px);
}
.home-page-carousel-one .stk-block-carousel__button__prev.disabled svg,
.home-page-carousel-one .stk-block-carousel__button__next.disabled svg {
    fill: white;
}

#back-to-top-wrapper {
    position: fixed;
    bottom: 20px;
    right: 20px;
    /* background: #333;
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px; */
    text-decoration: none;
    padding: 0;
    z-index: 99999;
    transition: color 0.3s ease;
}
#back-to-top {
    display: none;
    cursor: pointer;
    color: black; /* Default color */
}
/* Class we will toggle via JS */
#back-to-top.white-mode p {
    color: white !important;
}
.stk-03dcd8d .stk-block-tabs__tab--active .stk-block-tab-labels__text,
.stk-1cebed2 .stk-block-tabs__tab--active .stk-block-tab-labels__text {
    font-weight: 700 !important;
}
.stk-block.stk-block-divider hr.stk-block-divider__hr {
    opacity: 0.4 !important;
}