/* 1. HOMEPAGE: Initial State (Transparent) */
body.home #wrapper-header {
    background-color: transparent !important;
    transition: background-color 0.4s ease, box-shadow 0.4s ease !important;
}

/* 2. HOMEPAGE: Scrolled State (Solid White) */
body.home #wrapper-header.scrolled {
    background-color: #ffffff !important; /* Turns white on scroll */
    box-shadow: 0px 2px 10px rgba(0,0,0,0.1); /* Adds a nice subtle shadow */
}

/* 3. HOMEPAGE: Logo & Text Change on Scroll */
/* Turns white logo/text to BLACK when the header turns white */
body.home #wrapper-header.scrolled .nav__link,
body.home #wrapper-header.scrolled .header__main-menu a {
    color: #000000 !important;
}

body.home #wrapper-header.scrolled .site .custom-logo-link .img-fluid,
body.home #wrapper-header.scrolled .custom-logo-link .img-fluid {
    filter: brightness(0) !important; /* Turns logo black */
}

/* END HOMEPAGE: Initial State (Transparent) */

/* BLOG & OTHER PAGES: Turn Logo and Menu BLACK */
body:not(.home) .site .custom-logo-link .img-fluid,
body:not(.home) .custom-logo-link .img-fluid {
    filter: brightness(0) !important; /* Turns white logo to black */
}

body:not(.home) .nav__link, 
body:not(.home) .header__menu .nav__link,
body:not(.home) .header__main-menu a {
    color: #000000 !important; /* Turns menu text black */
}

/* HOME PAGE: Keep everything WHITE */
body.home .site .custom-logo-link .img-fluid,
body.home .custom-logo-link .img-fluid {
    filter: none !important; /* Keeps original white logo */
}

body.home .nav__link {
    color: #ffffff !important; /* Keeps white menu text */
}

/* ==========================================
   1. GLOBAL STICKY HEADER (All Pages)
   ========================================== */
#wrapper-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999 !important;
    background-color: #ffffffff !important; /* This is the black you see */
    padding: 10px 0 !important;
}

/* 2. LOGO & MENU VISIBILITY (The "Ghost" Fix) */
/* This forces your black logo and text to be WHITE so you can see them */
.nav__link, 
.header__menu .nav__link {
    color: #ffffff !important;
}

.custom-logo-link img {
    filter: brightness(0) invert(1) !important; /* Turns black logo white */
}

/* 3. HOME PAGE: TRANSPARENCY */
body.home #wrapper-header {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

/* Pull image to the very top on Home */
body.home #page, 
body.home #page-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative;
    top: -80px !important; 
}

/* 4. BLOG PAGE: PUSH CONTENT DOWN */
/* This ensures the blog title doesn't hide behind the black bar */
body:not(.home) #page, 
body:not(.home) #page-content {
    padding-top: 110px !important; 
    margin-top: 0 !important;
}

/* 5. ADMIN BAR FIX */
.admin-bar #wrapper-header {
    top: 32px !important;
}
@media screen and (max-width: 782px) {
    .admin-bar #wrapper-header { top: 46px !important; }
}

/* [KEEP ALL YOUR PREVIOUS DESKTOP CODE HERE] */

/* ... your existing code ... */

/* ==========================================
   MOBILE SPECIFIC FIXES (Screens smaller than 991px)
   ========================================== */
@media screen and (max-width: 991px) {
    
    /* 1. SHRINK LOGO: Prevents it from hitting the hamburger menu */
    .site .custom-logo-link .img-fluid,
    .custom-logo-link img {
        width: 180px !important; /* Adjust this until it looks perfect */
        max-width: 60% !important;
        height: auto !important;
    }

    /* 2. HOMEPAGE IMAGE: Fix the "thin strip" and make it a tall hero */
    body.home .wp-block-cover, 
    body.home .wp-block-group.has-background {
        min-height: 70vh !important; /* Forces a tall, cool visualization */
        padding-top: 100px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* 3. HOME HEADER: Ensure transparency works on mobile tap */
    body.home #wrapper-header {
        padding: 5px 0 !important;
    }

    /* 4. BLOG PAGE MOBILE: Adjust top gap for smaller header */
    body:not(.home) #page {
        padding-top: 70px !important;
    }
}

/* ==========================================
   MOBILE FINE-TUNING (Logo & Burger)
   ========================================== */
@media screen and (max-width: 991px) {

    /* 1. MAKE LOGO LARGER (About 50% of the screen width) */
    .site .custom-logo-link .img-fluid,
    .custom-logo-link img {
        width: 340px !important; /* Bigger, but still leaves room for burger */
        max-width: 70% !important;
			
    }
	/* 2. FIX HAMBURGER COLOR ON HOME (Transparent state) */
/* Targets the SVG 'Open' icon specifically on the Home page */
body.home #wrapper-header:not(.scrolled) .mobile-menu__open-icon {
    fill: #ffffff !important;
    stroke: #ffffff !important;
    color: #ffffff !important;
}

/* Also targets the 'use' tag inside the SVG to be safe */
body.home #wrapper-header:not(.scrolled) .mobile-menu__open-icon use {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* 3. FIX HAMBURGER COLOR ON SCROLL (White state) */
/* Turns the icon BLACK when the header turns white */
body.home #wrapper-header.scrolled .mobile-menu__open-icon,
body.home #wrapper-header.scrolled .mobile-menu__open-icon use {
    fill: #000000 !important;
    stroke: #000000 !important;
}

	

    /* 2. FIX HAMBURGER COLOR ON HOME (Transparent state) */
    /* This targets the little lines to make them WHITE on the dark image */
    body.home .header__mobile-menu-toggler span,
    body.home .header__mobile-menu-toggler i,
    body.home .mobile-menu-toggle-icon {
        background-color: #ffffff !important;
        color: #ffffff !important;
    }

    /* 3. FIX HAMBURGER COLOR ON SCROLL (White state) */
    /* When you scroll down and header turns white, burger turns BLACK */
    body.home #wrapper-header.scrolled .header__mobile-menu-toggler span,
    body.home #wrapper-header.scrolled .header__mobile-menu-toggler i {
        background-color: #000000 !important;
        color: #000000 !important;
    }
}