/**
 * Modify Header & Footer Builder — Frontend Styles
 * v1.0.0
 */

/* ── Base ─────────────────────────────────────── */

.modify-hf-header,
.modify-hf-footer,
.modify-hf-before-footer {
    position: relative;
    width: 100%;
    z-index: 100;
}

.modify-hf-header-inner,
.modify-hf-footer-inner {
    width: 100%;
}

/* Hide Hello Elementor default header/footer when our templates are active */
body.modify-hf-has-header .site-header,
body.modify-hf-has-header #site-header,
body.modify-hf-has-header header.site-header,
body.modify-hf-has-header .hello-elementor-header {
    display: none !important;
}

body.modify-hf-has-footer .site-footer,
body.modify-hf-has-footer #site-footer,
body.modify-hf-has-footer footer.site-footer,
body.modify-hf-has-footer .hello-elementor-footer {
    display: none !important;
}

/* When editing our template in Elementor, hide theme defaults completely */
body.modify-hf-editing-template .site-header,
body.modify-hf-editing-template #site-header,
body.modify-hf-editing-template header.site-header,
body.modify-hf-editing-template .hello-elementor-header,
body.modify-hf-editing-template .site-footer,
body.modify-hf-editing-template #site-footer,
body.modify-hf-editing-template footer.site-footer,
body.modify-hf-editing-template .hello-elementor-footer {
    display: none !important;
}

/* ── Transparent / Overlay Header ─────────────── */

.modify-hf-transparent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 500;
    background: transparent !important;
}

.modify-hf-transparent .modify-hf-header-inner {
    background: transparent;
}

body.modify-hf-transparent-header .site-main,
body.modify-hf-transparent-header .page-content,
body.modify-hf-transparent-header #content {
    /* Pull content up behind the transparent header */
}

/* ── Sticky Header ────────────────────────────── */

.modify-hf-sticky {
    position: sticky;
    top: 0;
    z-index: 999;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.modify-hf-sticky.modify-hf-stuck {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Scroll-up sticky: hidden by default when scrolling down */
.modify-hf-sticky--scroll-up {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(0);
}

.modify-hf-sticky--scroll-up.modify-hf-hidden {
    transform: translateY(-100%);
}

/* ── Shrink Header ────────────────────────────── */

.modify-hf-shrinkable .modify-hf-header-inner {
    transition: padding 0.3s ease;
}

.modify-hf-shrinkable.modify-hf-shrunk .modify-hf-header-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.modify-hf-shrinkable.modify-hf-shrunk img {
    transition: max-height 0.3s ease;
    max-height: 40px;
    width: auto;
}

/* ── Responsive Visibility ────────────────────── */

/* Desktop: > 1024px */
@media (min-width: 1025px) {
    .modify-hf-hide-desktop {
        display: none !important;
    }
}

/* Tablet: 768px – 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
    .modify-hf-hide-tablet {
        display: none !important;
    }
}

/* Mobile: < 768px */
@media (max-width: 767px) {
    .modify-hf-hide-mobile {
        display: none !important;
    }
}

/* ── Before Footer ────────────────────────────── */

.modify-hf-before-footer {
    z-index: 50;
}

/* ── WP Admin Bar Offset ──────────────────────── */

body.admin-bar .modify-hf-sticky {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .modify-hf-sticky {
        top: 46px;
    }
}

/* ── Print ────────────────────────────────────── */

@media print {
    .modify-hf-sticky {
        position: relative !important;
        box-shadow: none !important;
    }
}