/**
 * Sticky Header for All Pages
 * Does NOT change any default styling - only adds sticky behavior on scroll
 */

/* ========================================
   Sticky header wrapper - ONLY when sticky
   ======================================== */
.header-sticky .sticky-header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgb(0 0 0 / 65%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.3s ease forwards;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Hide top panel when sticky */
/*.header-sticky .panel.wrapper {
    display: none;
}*/

/* Compact header when sticky - Desktop */
/*.cms-index-index.header-sticky .page-header .header.content {
    padding-top: 10px;
    padding-bottom: 10px;
}*/

/* Add padding to body to prevent content jump when header becomes fixed */
.header-sticky .page-wrapper {
    padding-top: var(--sticky-header-height, 140px);
}

/* Logo adjustments when sticky */
.header-sticky .logo img {
    /*max-height: 45px;*/
    transition: max-height 0.3s ease;
}

.header-sticky .sticky-header-wrapper .header.content,
.header-sticky .nav-sections {
	background: rgb(0 0 0 / 65%);
}

/* ========================================
   Mobile Styles (max-width: 768px)
   ======================================== */
@media (max-width: 768px) {
    .header-sticky .sticky-header-wrapper {
        position: fixed;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /*.header-sticky .panel.wrapper {
        display: none;
    }*/

    .header-sticky .page-wrapper {
        padding-top: var(--sticky-header-height-mobile, 60px);
    }

    /*.cms-index-index.header-sticky .page-header .header.content {
        padding-top: 8px;
        padding-bottom: 8px;
    }*/

    .header-sticky .logo img {
        /*max-height: 35px;*/
    }
}

/* ========================================
   Tablet Styles (769px - 1024px)
   ======================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .header-sticky .page-wrapper {
        padding-top: var(--sticky-header-height-tablet, 100px);
    }

    .header-sticky .logo img {
        /*max-height: 40px;*/
    }
}