/*
   Global page backdrop for the public and admin Flask templates.

   The background image is intentionally rendered as a full-screen decorative layer
   instead of an inline image so every route can share the same visual treatment while
   the HTML remains focused on content and accessibility.  The image itself lives in
   EPApp/static/background.jpg so Flask can serve it from the existing /static path.
*/
html {
    /*
       Ensure the document always has at least the full viewport height available.
       This supports pages with very little content while still allowing longer pages
       to scroll naturally over the fixed background image.
    */
    min-height: 100%;
}

body {
    /*
       Keep the site's text black as requested.  The translucent white overlay below
       intentionally fades the uploaded background image so black text, form labels,
       navigation links, flash messages, and Bootstrap content remain readable across
       desktop and mobile viewport sizes.
    */
    color: #000;

    /*
       Establish a safe stacking context for the fixed white overlay.  isolation keeps
       the overlay layered within the page instead of slipping behind the body
       background, while direct body children are lifted above it later in this file.
    */
    position: relative;
    isolation: isolate;

    /*
       Use the uploaded image as a full-screen background.  cover fills the viewport
       without distortion, center keeps the focal point balanced at different widths,
       no-repeat prevents tiling artifacts, and fixed keeps the image visually stable
       while content scrolls over it on browsers that support fixed backgrounds well.
    */
    background-image: url("/static/background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    /*
       Preserve full-height coverage even on short pages, and remove the browser's
       default margin so the background and overlay reach every viewport edge.
    */
    min-height: 100vh;
    margin: 0;
}

body::before {
    /*
       Create the white translucent overlay with a pseudo-element so no template needs
       extra decorative markup.  This layer is deliberately placed above the background
       image but below all page content, fading the photo enough to preserve black text
       contrast without hiding the image completely.
    */
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: rgba(255, 255, 255, 0.72);
}

body > * {
    /*
       Lift every direct page section into a stacking context above body::before.
       The overlay therefore sits behind headers, main content, forms, and admin-wide
       blocks, while remaining above the background image painted on the body itself.
    */
    position: relative;
    z-index: 1;
}

@media (max-width: 767.98px) {
    body {
        /*
           Mobile browsers can treat fixed backgrounds inconsistently during scrolling.
           Switching to scroll on small screens keeps the same centered, cover-sized
           image while avoiding rendering jank; the white overlay still preserves black
           text contrast on compact viewports.
        */
        background-attachment: scroll;
    }
}