/* ==========================================================================
   Sticky header (Elementor) – add the class "cc-sticky-header"
   to the main header container in Elementor.
   ========================================================================== */

/* Default: header sits on top of the hero and scrolls away with the page */
.cc-sticky-header {
    position: absolute;
    top: 39px;
    left: 0;
    right: 0;
    z-index: 999;
    width: 100%;
    /* avoid the iOS notch overlapping the bar */
    padding-top: env(safe-area-inset-top, 0px);
    transition: background-color .35s ease, box-shadow .35s ease;
}

/* Smaller top offset on mobile (default, non-pinned state) */
@media screen and (max-width: 767px) {
    .cc-sticky-header {
        top: 38px;
    }
}

/* Drawer effect: once scrolled, header becomes fixed and slides down */
@keyframes ccDrawerDown {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

.cc-sticky-header.cc-pinned {
    position: fixed;
    top: 0;
    background-color: #021662;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
    animation: ccDrawerDown .35s ease both;
}

/* ----- WordPress admin bar offsets (only the fixed/pinned state) -------- */
.admin-bar .cc-sticky-header.cc-pinned {
    top: 32px;
}

/* WP shrinks the admin bar to 46px under 782px width */
@media screen and (max-width: 782px) {
    .admin-bar .cc-sticky-header.cc-pinned {
        top: 46px;
    }
}

/* Under 600px the admin bar is position:absolute (scrolls away),
   so the pinned header must stick to the very top. */
@media screen and (max-width: 600px) {
    .admin-bar .cc-sticky-header.cc-pinned {
        top: 0;
    }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cc-sticky-header {
        transition: none;
    }
    .cc-sticky-header.cc-pinned {
        animation: none;
    }
}