/* =============================================================================
   OVERLAY CSS - Cabarate Webcams Screensaver / Kiosk Display

   Provides reusable CSS classes for layering readable content over background
   images while maintaining the photo's visual impact and karmic beauty.

   Mobile-first, no frameworks. All values are configurable — see comments.
   ============================================================================= */

/* =============================================================================
   .bg-photo: Full-screen background image container
   ============================================================================= */

.bg-photo {
  /* Fixed positioning ensures background stays in place while content scrolls
     (if needed) */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* background-image: url() should be set inline or via JS */
  background-size: cover;

  /* Position: center favors the action in middle, but can be adjusted.
     For kitesurfing: "center top" might show more sky (good for text),
     "center" shows the surfer (good for visual balance) */
  background-position: center;

  /* Prevent scrolling this layer */
  background-attachment: fixed;

  /* Ensure background renders below content */
  z-index: -2;
}


/* =============================================================================
   .bg-wash: Overlaid layer to enhance contrast and reduce photo intensity

   This is the CRITICAL layer for text readability. Adjustable parameters:

   1. gradient-direction & colors: Controls how bright the wash is
      - Lighter at top (for text) → rgba(255,255,255,0.X)
      - Transitions to transparent at bottom

   2. Opacity values (0.X):
      - 0.15–0.25 = subtle, photo still vivid
      - 0.35–0.45 = moderate, text safe, photo visible but muted
      - 0.50+ = aggressive, photo becomes secondary

   3. backdrop-filter: blur()
      - Adds frosted-glass effect (modern browsers)
      - Values 0–6px suggested; 0 = no blur

   WCAG Contrast Rule: Dark text (#274b63) needs luminance contrast ≥ 4.5:1
   For mid-tone ocean photos: opacity ~0.25–0.35 usually works.
============================================================================= */

.bg-wash {
  /* Full-screen overlay, positioned above photo, below content */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Linear gradient: white fade from top to transparent.
     Adjusts the gradient angle and color stop positions if needed:
     - to bottom: vertical fade (recommended for full-height wash)
     - to bottom right: diagonal fade (can work if photo has dark corners)

     Color stops:
     - rgba(255, 255, 255, 0.28) at 0%: bright white at top (readable zone)
     - rgba(255, 255, 255, 0.12) at 50%: mid-intensity in middle
     - rgba(255, 255, 255, 0) at 100%: fully transparent at bottom

     ADJUST THESE OPACITIES if contrast is still too low:
     - Increase first value (e.g., 0.28 → 0.40) for safer text at cost of photo intensity
     - Decrease if photo looks washed out */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0) 100%
  );

  /* Optional: slight blur for sophisticated frosted effect.
     Try 2–4px for subtlety; 0px removes blur entirely.
     Note: backdrop-filter has ~95% browser support (2024) but not IE 11. */
  backdrop-filter: blur(0px);

  /* Ensure wash is above photo but below content */
  z-index: -1;

  /* Prevent pointer events from passing through (usually not needed,
     but ensures wash doesn't interfere with clicks if z-index is adjusted) */
  pointer-events: none;
}


/* =============================================================================
   .content-panel: Semi-transparent light panel for data tables, widgets

   Used for wind data, forecast tables, info cards. Provides readable
   background behind text while showing photo through transparency.

   Adjustable parameters:

   1. background-color opacity (rgba):
      - 0.85–0.95 = nearly opaque, safest for dense text (data tables)
      - 0.70–0.85 = transparent, shows photo, good for sparse content
      - 0.50–0.70 = very transparent, mostly shows photo, risky for text

   2. border-radius:
      - 0px = sharp corners (modern, data-forward look)
      - 8–16px = soft rounded (friendly, less industrial)
      - 20+ px = very rounded (playful, can look dated)

   3. backdrop-filter: blur():
      - Adds frosted-glass effect (modern browsers only)
      - 4–8px recommended; 0px disables
      - Improves readability even if background is semi-transparent

   4. box-shadow:
      - Subtle shadow lifts panel off background
      - Adjust blur (4px) and spread (1px) for subtlety
============================================================================= */

.content-panel {
  /* Semi-transparent light background */
  background-color: rgba(245, 243, 238, 0.90);
  /* cream/off-white: rgb(245, 243, 238) is warmer than pure white,
     matches typical weather-data aesthetics */

  /* Soft rounded corners */
  border-radius: 12px;

  /* Padding: space between edge and content */
  padding: 16px;

  /* Shadow for depth: blur-radius 4px, spread 1px, soft black at 0.15 opacity */
  box-shadow: 0 4px 1px rgba(0, 0, 0, 0.15);

  /* Frosted-glass effect (modern enhancement) */
  backdrop-filter: blur(4px);

  /* Ensure panel stays above wash and photo */
  z-index: 10;
}


/* =============================================================================
   .bg-vignette (Optional): Subtle darkening at edges

   Creates a frame-like effect that draws focus to center.
   Use sparingly — can easily look dated or claustrophobic.

   Adjustable:
   1. radial-gradient colors and stops: darker/lighter, inner vs. outer edge
   2. opacity in rgba: 0–0.4 range suggested (higher = more intense)
============================================================================= */

.bg-vignette {
  /* Full-screen vignette overlay */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Radial gradient: transparent in center, dark at edges
     Adjust rgba opacity (currently 0.20) for intensity:
     - 0.10 = very subtle, almost invisible
     - 0.20 = moderate, slight darkening at edges
     - 0.35 = pronounced, noticeable frame effect */
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.20) 100%
  );

  z-index: 0;
  pointer-events: none;
}


/* =============================================================================
   RESPONSIVE LAYOUT HELPERS

   Mobile-first: base styles apply to all screens, media queries add refinements.
============================================================================= */

/* Tablet and above: can afford larger panels */
@media (min-width: 768px) {
  .content-panel {
    padding: 20px;
    border-radius: 16px;
  }
}

/* Desktop: can use more space */
@media (min-width: 1024px) {
  .content-panel {
    padding: 24px;
    border-radius: 16px;
  }
}


/* =============================================================================
   UTILITY: Full-screen container (optional)

   If you need a centering container for content, this centers flex/grid items
   and ensures they don't exceed sensible width.
============================================================================= */

.viewport-full {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 5;
  pointer-events: none; /* Allows clicks to pass through */
}

.viewport-full > * {
  pointer-events: auto; /* Re-enable clicks on direct children */
}

/* =============================================================================
   WIDESCREEN LAYOUT ENHANCEMENTS (für Kontrast in Inhaltsspalte)
   ============================================================================= */

@media (min-width: 1200px) and (min-aspect-ratio: 4/3) {
  /* Horizontaler Wash-Verlauf für Inhaltsspalte (links dunkel, rechts transparent) */
  .bg-wash-horizontal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Horizontaler Gradient: von links (dicht) nach rechts (transparent) */
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.35) 40%,
      rgba(255, 255, 255, 0) 100%
    );

    z-index: -1;
    pointer-events: none;
  }

  /* Text-Schatten für Header im Breitbild (bereits in style.css, Fallback hier) */
  .header .location,
  .header .time {
    /* text-shadow ist bereits in style.css definiert */
  }
}

/* =============================================================================
   WIDESCREEN LAYOUT ENHANCEMENTS - ENHANCED WASH & GLOW
   ============================================================================= */

@media (min-width: 1200px) {
  /* VERSTÄRKTE Horizontale Wash für Inhaltsspalte */
  .bg-wash-horizontal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Verstärkt: Links 75%, bis 62% → 25%, danach zügig → 0 */
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.75) 0%,      /* Links: SEHR HELL (75% opacity) */
      rgba(255, 255, 255, 0.50) 40%,     /* Mid-left: 50% */
      rgba(255, 255, 255, 0.25) 62%,     /* Bei 62%: 25% (Kite-Bereich schemenhaft) */
      rgba(255, 255, 255, 0.08) 80%,     /* Übergang */
      rgba(255, 255, 255, 0) 100%        /* Rechts: 0% (Kiter brillant) */
    );

    z-index: -1;
    pointer-events: none;
  }

  /* Optional: Sanftes Glow-Oval hinter Header+Gauge (radial-gradient) */
  /* Hilft bei Lesbarkeit über dem Kite-Kopf (~35-45% Bildbreite) */
  .bg-glow-oval {
    position: fixed;
    top: -10%;              /* Leicht über dem Top */
    left: 20%;              /* Positioniert für Spalte */
    width: 40%;             /* Breit genug für Header+Gauge */
    height: 50vh;           /* Etwa halbe Höhe */

    /* Radiales Glow: Weiß in der Mitte, schnell transparent */
    background: radial-gradient(
      ellipse 80% 100% at center,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.15) 40%,
      rgba(255, 255, 255, 0) 100%
    );

    z-index: -1;
    pointer-events: none;
    filter: blur(40px);     /* Sanfter Blur für Halo-Effekt */
  }
}