/* ==========================================================================
   EPP Theme Builder — Header / Footer Frontend Styles
   ========================================================================== */

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

.eppro-hf-header {
    position: relative;
    z-index: 999;
    width: 100%;
}

/* Sticky Header */
.eppro-hf-header--sticky {
    position: sticky;
    top: 0;
    z-index: 9999;
    transition: background-color .3s, box-shadow .3s, transform .3s;
}

/* WP Admin bar offset */
.admin-bar .eppro-hf-header--sticky {
    top: 32px;
}

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

/* Scrolled state — added by JS */
.eppro-hf-header--sticky.eppro-hf-scrolled {
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}

/* Hide on scroll down, show on scroll up */
.eppro-hf-header--sticky.eppro-hf-hidden {
    transform: translateY(-100%);
}

.admin-bar .eppro-hf-header--sticky.eppro-hf-hidden {
    transform: translateY(calc(-100% - 32px));
}

@media (max-width: 782px) {
    .admin-bar .eppro-hf-header--sticky.eppro-hf-hidden {
        transform: translateY(calc(-100% - 46px));
    }
}

/* Transparent Header */
.eppro-hf-header--transparent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent !important;
}

/* Transparent + Sticky combo: absolute until scroll, then sticky */
.eppro-hf-header--transparent.eppro-hf-header--sticky {
    position: fixed;
}

.eppro-hf-header--transparent.eppro-hf-header--sticky.eppro-hf-scrolled {
    background: #fff !important;
}

/* Body padding for transparent header — content flows under it naturally */

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

.eppro-hf-footer {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* ── Mobile-specific header ─────────────────────────────────────────────── */

/* Mobile: Elementor sections inside header stack naturally by default */

/* ── Dynamic logo switch helper ─────────────────────────────────────────── */

.eppro-hf-header .eppro-logo-light {
    display: block;
}

.eppro-hf-header .eppro-logo-dark {
    display: none;
}

.eppro-hf-header--transparent:not(.eppro-hf-scrolled) .eppro-logo-light {
    display: block;
}

.eppro-hf-header--transparent:not(.eppro-hf-scrolled) .eppro-logo-dark {
    display: none;
}

.eppro-hf-header--transparent.eppro-hf-scrolled .eppro-logo-light {
    display: none;
}

.eppro-hf-header--transparent.eppro-hf-scrolled .eppro-logo-dark {
    display: block;
}

/* ── Canvas page layout ─────────────────────────────────────────────────── */

/* Remove any theme margin/padding the body might add */
body.eppro-canvas-page {
    margin: 0;
    padding: 0;
}

/* Content wrapper — sits between header and footer */
#eppro-canvas-content {
    min-height: 40vh;
    width: 100%;
}

/* Fallback WP-loop articles (shown when no EPP content template is set) */
.eppro-canvas-article {
    max-width: 860px;
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.eppro-canvas-article .entry-title {
    font-size: 1.6rem;
    margin-bottom: 0.5em;
}

.eppro-canvas-article .entry-title a {
    text-decoration: none;
    color: inherit;
}

.eppro-canvas-404 {
    max-width: 860px;
    margin: 80px auto;
    padding: 0 20px;
    text-align: center;
}

/* ── Lightbox body lock (shared) ────────────────────────────────────────── */

body.eppro-lightbox-open {
    overflow: hidden;
}