/* ────────────────────────────────────────────────────────────────────────────
   Home Page Background Images

   This stylesheet provides a collection of background images for the Home/Login
   page. Change the image URL in .home-background to swap between backgrounds.

   Available backgrounds:
   - newyork-all: golden-hour aerial over the whole city (default)
   - newyork-panorama: wide panorama of the Manhattan skyline
   - manhattan-dusk: NYC Manhattan at dusk, from Top of the Rock
   - manhattan-skyline: NYC Manhattan skyline, daytime
   - city-lights: City lights at night
   - modern-office: Modern office building
   - urban-landscape: Urban landscape

   To add a new image:
   1. Add the image URL below in a CSS variable
   2. Uncomment/update the background-image in .home-background
   3. Optionally add overlay opacity adjustment if needed

   ──────────────────────────────────────────────────────────────────────────── */

:root {
    /* Background image URLs - edit these to change images */
    --bg-manhattan-skyline: url('https://images.unsplash.com/photo-1514565131-fce0801e5785?w=1920&q=80'); /* New York skyline - daytime */
    --bg-manhattan-dusk: url('https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?w=1920&q=80'); /* New York - Manhattan at dusk from Top of the Rock */
    --bg-newyork-panorama: url('https://images.unsplash.com/photo-1500916434205-0c77489c6cf7?w=2400&q=80'); /* New York - wide panorama of the whole Manhattan skyline */
    --bg-newyork-all: url('https://images.unsplash.com/photo-1546436836-07a91091f160?w=2400&q=80'); /* New York - golden-hour aerial over the WHOLE city, Empire State centre, city to the horizon */
    --bg-city-lights: url('https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=1920&q=80'); /* City lights */
    --bg-modern-office: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=1920&q=80'); /* Modern office */
    --bg-urban-landscape: url('https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?w=1920&q=80'); /* Urban landscape */

    /* Overlay opacity (0-1): controls how dark the overlay is */
    --bg-overlay-opacity: 0.4;
}

/* Home page body styling */
body.home-page {
    margin: 0;
    padding: 0;
    position: relative;
}

/* Background image container - fills entire viewport */
.home-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;

    /* CHANGE BACKGROUND IMAGE HERE */
    background-image: var(--bg-newyork-all);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Dark overlay to make text readable */
.home-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, var(--bg-overlay-opacity));
    z-index: -1;
}

/* Ensure content is readable over background */
body.home-page .page {
    position: relative;
    background: rgba(255, 255, 255, 0.95);
}

/* Login box styling to stand out against background */
#login-box {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .home-background {
        background-attachment: scroll; /* Better performance on mobile */
    }

    body.home-page .page {
        background: rgba(255, 255, 255, 0.98);
    }
}

/* ────────────────────────────────────────────────────────────────────────────
   QUICK IMAGE SWAP GUIDE

   To use a different background, replace the background-image URL:

   Current (whole-city aerial): var(--bg-newyork-all)

   Alternative options:

   0. Manhattan skyline panorama:
      background-image: var(--bg-newyork-panorama);

   1. Manhattan at dusk (Top of the Rock):
      background-image: var(--bg-manhattan-dusk);

   2. Manhattan daytime:
      background-image: var(--bg-manhattan-skyline);

   3. City Lights:
      background-image: var(--bg-city-lights);

   4. Modern Office:
      background-image: var(--bg-modern-office);

   5. Urban Landscape:
      background-image: var(--bg-urban-landscape);

   6. Custom URL:
      background-image: url('YOUR_IMAGE_URL_HERE');

   To darken/lighten the overlay, adjust --bg-overlay-opacity:
   - 0.2 = lighter (more image visible)
   - 0.4 = default (recommended)
   - 0.6 = darker (better text readability)

   ──────────────────────────────────────────────────────────────────────────── */