/* Masjid photo behind every page. Loaded by layout_head.php only when both
   images/bg-landscape.jpg and images/bg-portrait.jpg exist; phones held upright
   use the portrait photo. The photo stays clear; readable content sits on white
   cards (public pages) or a parchment sheet (logged-in pages).
   --photo-tint: darker = calmer photo, lighter = brighter photo. */
:root { --photo-tint: .25; }

html { background: var(--navy-950); }
body { background: transparent; }
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(rgba(2, 26, 55, var(--photo-tint)), rgba(2, 26, 55, calc(var(--photo-tint) / 2))),
        url("../images/bg-landscape.jpg") center bottom / cover no-repeat;
}
@media (orientation: portrait) {
    body::before {
        background:
            linear-gradient(rgba(2, 26, 55, var(--photo-tint)), rgba(2, 26, 55, calc(var(--photo-tint) / 2))),
            url("../images/bg-portrait.jpg") center bottom / cover no-repeat;
    }
}

/* Public pages + login: see-through header over the sky */
.site-bar {
    background: rgba(2, 26, 55, .55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom-color: rgba(59, 164, 240, .6);
}

/* Footer sits on the photo */
.site-footer { color: #D6E4F2; border-top-color: rgba(255, 255, 255, .15); background: rgba(2, 26, 55, .35); }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--gold-300); }

/* Logged-in pages: photo shows through the sidebar and around a parchment sheet */
.app-side-inner {
    background: linear-gradient(180deg, rgba(3, 58, 100, .82), rgba(2, 26, 55, .9));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
body.app main.page {
    background: rgba(247, 243, 232, .97);
    margin: .75rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(2, 26, 55, .35);
}
@media (min-width: 768px) { body.app main.page { margin: 1rem 1.25rem; } }