/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ==========================================
   HOMEPAGE HEADER
   ========================================== */

#rw-home-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    background: transparent !important;
    transition: background 0.3s ease, padding 0.3s ease !important;
    padding: 20px !important;
    overflow: visible !important;
}

#rw-home-header.scrolled {
    background: var(--bg-ultra-light) !important;
    padding: 0 20px !important;
    min-height: 60px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

#rw-home-header.scrolled .rw-header-container {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
}

#rw-home-header.scrolled .rw-header-btn {
    order: 1 !important;
}

#rw-home-header.scrolled .rw-header-logo {
    order: 2 !important;
}

#rw-home-header.scrolled .rw-menu-toggle {
    order: 3 !important;
}

/* Logo - Initial full width, always centered */
#rw-home-header .rw-header-logo {
    width: 100%;
    max-width: 100%;
    opacity: 0;
    position: absolute !important;
    left: 50% !important;
    top: 15px !important;
    transform: translate(-50%, -40px);
    transition: width 0.6s ease, max-width 0.6s ease, transform 0.6s ease, opacity 0.6s ease;
}

#rw-home-header .rw-header-logo.animate-in {
    opacity: 1;
    transform: translate(-50%, 0);
}

#rw-home-header .rw-header-logo path {
    fill: white !important;
    transition: fill 0.3s ease;
}

/* Button - Hidden initially */
#rw-home-header .rw-header-btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Toggle - Hidden initially */
#rw-home-header .rw-menu-toggle {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* ==========================================
   DESKTOP - After Scroll
   ========================================== */
@media (min-width: 992px) {
    #rw-home-header.scrolled .rw-header-logo {
        width: 200px !important;
        max-width: 200px !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        /* Don't animate top - only animate transform */
        transition: width 0.6s ease, max-width 0.6s ease, transform 0.6s ease, opacity 0.6s ease, top 0s !important;
    }

    #rw-home-header.scrolled .rw-header-logo path {
        fill: var(--base) !important;
    }

    #rw-home-header.scrolled .rw-header-btn {
        opacity: 1 !important;
        pointer-events: auto !important;
        position: static !important;
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    #rw-home-header.scrolled .rw-menu-toggle {
        opacity: 1 !important;
        pointer-events: auto !important;
        position: static !important;
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    #rw-home-header.scrolled .rw-menu-toggle svg path {
        fill: var(--base) !important;
    }
}

/* ==========================================
   MOBILE - After Scroll
   ========================================== */
@media (max-width: 991px) {
    #rw-home-header.scrolled .rw-header-logo {
        width: 150px !important;
        max-width: 150px !important;
        top: 0 !important;
        transform: translate(calc(20px - 50vw), -50%) !important;
        transition: width 0.6s ease, max-width 0.6s ease, transform 0.6s ease, opacity 0.6s ease, top 0s !important;
    }

    #rw-home-header.scrolled .rw-header-logo path {
        fill: var(--base) !important;
    }

    #rw-home-header.scrolled .rw-menu-toggle {
        opacity: 1 !important;
        pointer-events: auto !important;
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    #rw-home-header.scrolled .rw-menu-toggle svg path {
        fill: var(--base) !important;
    }

    /* Hide button on mobile */
    #rw-home-header .rw-header-btn {
        display: none !important;
    }
}

/* ==========================================
   TESTIMONIALS SECTION - Mobile Background Fix
   ========================================== */
@media (max-width: 991px) {
    #brxe-kytbrt {
        clip-path: inset(0);
        background-attachment: scroll !important;
        background-image: none !important;
        background-color: var(--bg-ultra-dark) !important;
    }

    #brxe-kytbrt::before {
        content: '' !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-image: url('/wp-content/uploads/2025/09/Rosewick-Brand-Mark_Dark.svg') !important;
        background-size: 350px !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-color: var(--bg-ultra-dark) !important;
        z-index: -1 !important;
        pointer-events: none !important;
        opacity: 0.3 !important;
    }
}

/* ==========================================
   PROPERTIES PAGE - Logo & Toggle Colors
   ========================================== */
.page-id-1554 #headerLogo path {
    fill: var(--base) !important;
}

.page-id-1554 .alt-menu-toggle svg path {
    fill: var(--base) !important;
}