/* ─── Universal + body baseline ─────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
body{
    margin:0;font-family:'Arial',sans-serif;color:#fff;
    min-height:100vh;display:flex;flex-direction:column;
}
main{flex:1}

/* ── header & copyright tweaks ──────────────────────────────── */
header{position:relative;z-index:2;}     /* keep header above page  */
header h1{margin:0;width:100%;text-align:center;}

.copyright{
    position:fixed;bottom:2vh;right:2vw;transform:none;
    font-size:1rem;text-shadow:0 0 .4rem #000;
    background:rgba(0,0,0,.5);padding:.5em 1em;border-radius:.25em;
    z-index:2;                            /* below drawer & button  */
}

/* ── drawer base ─────────────────────────────────────────────── */
/* clickable elements share hand cursor */
.open-menu-btn,
.close-btn,
.menu-item{cursor:pointer}

/* hamburger trigger – must sit top‑most so it’s always clickable */
.open-menu-btn{
    position:fixed;top:2%;right:2%;
    background:rgba(0,0,0,.7);color:#fff;font-size:2rem;
    padding:.5em;border-radius:50%;
    z-index:10;                           /* << highest layer       */
}

/* slide-out drawer */
.menu{
    position:fixed;top:0;right:0;
    width:250px;height:100%;
    background:rgba(0,0,0,.9);
    transform:translateX(100%);
    transition:transform .45s ease;
    overflow:hidden;
    z-index:9;                            /* just under the button  */
}
.menu.is-open{transform:translateX(0)}

/* close “×” stays inside drawer */
.close-btn{
    position:absolute;top:.75rem;right:.9rem;
    font-size:2.5rem;line-height:1;color:#fff;text-decoration:none;
}

/* first real link gets head-room */
.menu-item{
    display:block;padding:1em;text-align:center;
    font-size:1.2rem;color:#fff;text-decoration:none;
    transition:.3s
}
.menu-item:first-of-type{margin-top:3.5rem}
.menu-item:hover{background:#b30000}

/* ── page‑specific backgrounds ──────────────────────────────── */
/* .bg-index   {background:url("/static/images/jinglecats_festive_image.png")    center/cover no-repeat} */
.bg-login   {background:url("/static/images/festive_jinglecats_login.png")    center/cover no-repeat}
.bg-logout  {background:url("/static/images/festive_jinglecats_register.png") center/cover no-repeat}
.bg-register{background:url("/static/images/festive_jinglecats_register.png") center/cover no-repeat}
.bg-account {background:url("/static/images/account_bg.jpg")   center/cover no-repeat}
.bg-contact {background:url("/static/images/jinglecats_festive_office.png")   center/cover no-repeat}
.bg-shop    {background:url("/static/images/jinglecats_festive_shop.jpg")                     center/cover no-repeat}
.bg-product {background:url("/static/images/christmas_bg_preview.jpg")        center/cover no-repeat}
.bg-donate  {background:url("/static/images/jinglecats_festive_image.png")    center/cover no-repeat}

.bg-index {
    position: relative;
    overflow: hidden;
}

.bg-index {
    position: relative;
    overflow: hidden;
    background: url("/static/images/black_bg.png") center/cover no-repeat;
}

.bg-index .bg-video {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: 1;
    pointer-events: none; /* ensures video doesn't block interaction */
}