/* header-transition.css - Focus only on header-to-section transition */

/* Ensure smooth transition between header and hero */
#header {
    position: relative;
    z-index: 100;
    border-bottom: none;
}

/* Create a subtle gradient transition from header to hero section */
.header-inner:after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 15px;
    background: linear-gradient(to bottom, 
                rgba(0, 0, 0, 0.4) 0%, 
                rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

/* Add a subtle brown-colored border at the bottom of header */
.header-inner {
    border-bottom: 2px solid rgba(138, 113, 66, 0.10);
    position: relative;
}

/* Enhanced header background when scrolled */
#header.header-scrolled {
    background-color: rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease;
    /* Add subtle brown border when scrolled */
    border-bottom: 1px solid rgba(138, 113, 66, 0.06);
}