/**
 * PSEC Sticky Header CSS
 * Styles for sticky header functionality
 * 
 * @package PSEC_Sticky_Header
 * @version 1.0.0
 */

/* ============================================
   TOPBAR STICKY (Initial top bar)
   ============================================ */

.topbar-sticky {
    position: relative;

    z-index: 999;
}

/* ============================================
   STICKY HEAD (Main header that becomes sticky)
   ============================================ */

.sticky-head {
    position: relative;
    transition: all 0.3s ease;
    z-index: 998;
}

/* When sticky class is added */
.sticky-head.is-sticky {
    position: fixed !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    animation: psecSlideDown 0.3s ease;
    z-index: 998 !important;
    width:100%;
    top:0;
    height:80px;
    padding-top:20px;
}

.sticky-head.is-sticky .custom-logo {
  scale: 0.7;
  transition: scale ease-in;
}

/* Slide down animation */
@keyframes psecSlideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ============================================
   OPTIONAL: Style changes when sticky
   ============================================ */

/* Add background if header is transparent */
.sticky-head.is-sticky {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Add bottom border when sticky */
.sticky-head.is-sticky {
    border-bottom: 3px solid #C59963;
}

/* Reduce padding when sticky */
.sticky-head.is-sticky {
    padding-top: 20px !important;
    padding-bottom: 10px !important;
}

/* ============================================
   OPTIONAL: Hide/show elements when sticky
   ============================================ */

/* Make logo smaller when sticky (if you have .logo class) */
.sticky-head .logo {
    transition: all 0.3s ease;
}

.sticky-head.is-sticky .logo {
    transform: scale(0.85);
}

/* Hide tagline when sticky (if you have .tagline class) */
.sticky-head .tagline {
    transition: all 0.3s ease;
    opacity: 1;
    max-height: 100px;
}

.sticky-head.is-sticky .tagline {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .sticky-head.is-sticky {
        padding: 10px 15px !important;
    }
}

@media (max-width: 480px) {
    .sticky-head.is-sticky {
        padding: 8px 10px !important;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .sticky-head,
    .sticky-head.is-sticky {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================
   WORDPRESS ADMIN BAR COMPATIBILITY
   ============================================ */

/* Adjust for WP admin bar when logged in */
body.admin-bar .sticky-head.is-sticky {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar .sticky-head.is-sticky {
        top: 46px !important;
    }
}

/* ============================================
   COMMON PAGE BUILDER COMPATIBILITY
   ============================================ */

/* Elementor */
.elementor .sticky-head.is-sticky {
    position: fixed !important;
}

/* Divi */
.et_pb_section .sticky-head.is-sticky {
    position: fixed !important;
}

/* WPBakery */
.vc_row .sticky-head.is-sticky {
    position: fixed !important;
}

/* ============================================
   DEBUG MODE (Remove in production)
   ============================================ */

/* Uncomment to see borders for debugging */
/*
.topbar-sticky {
    outline: 2px solid red !important;
}

.sticky-head {
    outline: 2px solid blue !important;
}

.sticky-head.is-sticky {
    outline: 2px solid green !important;
}
*/