/*
 Theme Name:   Assembler Child
 Description:  A child theme for the Assembler block theme.
 Author:       Qairos, Inc.
 Template:     assembler-wpcom
 Version:      1.0.0
 Text Domain:  assembler-child
*/

/* Custom CSS can go here, though most styling in block themes happens in theme.json */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

html {
    scroll-behavior: auto;
}

html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

header.wp-block-template-part {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* 2. Prevent content from hiding behind the fixed header */
body {
    padding-top: 80px; /* Adjust this to the actual height of your header */
}

/* 3. Adjust for the WordPress Admin Bar when logged in */
.admin-bar header.wp-block-template-part {
    top: 32px !important;
    box-shadow: none;
}

@media screen and (max-width: 782px) {
    .admin-bar header.wp-block-template-part {
        top: 46px !important;
    }
    body {
        padding-top: 71px;
    }
}

.wp-block-navigation .wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
.wp-block-navigation .wp-block-navigation-item__link[aria-current="page"] .wp-block-navigation-item__label,
.wp-block-navigation .current-menu-item .wp-block-navigation-item__label,
.wp-block-navigation .current-page-item .wp-block-navigation-item__label {
    color: #FFCA00 !important;
}

.wp-block-navigation .contact-us-btn {
    padding: 12px 24px;
    border: 2px solid #fff;
    border-radius: 2px;
}


/* Smooth hover transition */
.wp-block-navigation-item__link, 
.wp-block-navigation-item__label {
    transition: all 0.2s ease-in-out;
}

/* Update the full-screen mobile menu background */
.wp-block-navigation__responsive-container.is-menu-open {
    background-color: #0045D3 !important;
}

/* Style the navigation links inside the mobile modal */
.is-menu-open .wp-block-navigation__responsive-container-close {
    color: #FFCA00 !important;
    font-size: 24px;
}

.is-menu-open .wp-block-navigation li.wp-block-navigation-item {
    font-size: 22px !important;
    color: #fff !important;
    font-weight: 800;
}

h1.has-text-shadow {
    text-shadow: 2px 2px 0 rgba(224, 61, 59, 0.60);
}

/* Ensure the Cover Block maintains a 16:9 ratio */
.wp-block-cover video.wp-block-cover__video-background {
    object-fit: cover; /* This makes it act like a background-image */
    min-height: 100%;
    width: 100%;
}

/* 2. Remove the filter when the user hovers over a specific slide */
.wp-block-cb-carousel-v2 .swiper-slide:hover img {
    filter: grayscale(0%);
}

/* Optional: Slightly dim the non-hovered images to make the hovered one pop */
.carousel-slider-v2 .swiper-wrapper:hover .swiper-slide:not(:hover) img {
    opacity: 0.7;
    filter: grayscale(100%);
}

/* Ensure the template groups have no outer margins */
.wp-site-blocks > .wp-block-group {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Remove default padding from the main wrapper if Assembler adds it */
.single-post .wp-site-blocks {
    padding-top: 0 !important;
}

.hidden-videos-container {
    display: none !important;
    opacity: 0;
}

.hidden-videos-container.is-visible {
    display: flex;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.see-more-button {
    display: block !important; /* Force show on mobile */
    margin: 30px auto;
}

/* Hide specific elements on desktop devices */
@media (min-width: 767px) {
    .hide-on-desktop {
        display: none !important;
    }

    .hidden-videos-container {
        display: flex !important;
        opacity: 1 !important;
    }

    .see-more-button {
        display: none !important; /* Hide on desktop */
    }
}


/* Hide specific elements on mobile devices */
@media (max-width: 767px) {
    .wp-block-navigation__responsive-container.is-menu-open {
        padding-top: 24px;
        /* padding-bottom: 23px; */
    }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        padding-top: 0;
    }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
        gap: 25px;
    }
    .custom-logo {
        width: 153px;
    }
    .hide-on-mobile {
        display: none !important;
    }
    .wp-block-cover {
        min-height: 500px;
    }
}

/* contact form */
/* div.contact-form-wrapper */

div.contact-form-wrapper label {
    width: 100%;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 22px; /* 157.143% */
    letter-spacing: 0.21px;
}

div.contact-form-wrapper p {
    margin-bottom: 25px;
}

div.contact-form-wrapper .contact-form-row {
    display: flex;
    gap: 20px;
}

div.contact-form-wrapper .contact-form-row p {
    width: 100%;
}

div.contact-form-wrapper input[type="text"],
div.contact-form-wrapper input[type="tel"],
div.contact-form-wrapper input[type="email"],
div.contact-form-wrapper textarea {
    width: 100%;
    padding: 14px 17px;
    border: 1px solid #000;
    border-radius: 5px;
    background-color: #fff;
    transition: border-color 0.3s ease;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 24px;
    -webkit-font-smoothing: antialiased;
}

div.contact-form-wrapper textarea {
    height: 226px !important;
    resize: none;
}

div.contact-form-wrapper .wpcf7-submit {
    background-color: #fff; /* Or your brand primary color */
    color: #000;
    padding: 12px 24px;
    border: 2px solid #000;
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.3s ease;
    font-family: "Franklin Gothic";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 155.556% */
    letter-spacing: 0.36px;
    text-transform: uppercase;
}

.wpcf7 form .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.unaccepted .wpcf7-response-output, 
.wpcf7 form.payment-required .wpcf7-response-output {
    order: -1;
    margin: 0 0 20px 0;
    padding: 0;
    border: none;
    font-weight: 700;
    font-weight: 1.125rem !important;
}

.wpcf7 form .wpcf7-response-output {
    color: #008000;
}

.wpcf7 form.invalid .wpcf7-response-output {
    color: #FF0000;
}