/*************************************************************
 * Interactive Globe Page - Custom Styling
 *
 * This stylesheet ensures that the Interactive Globe:
 *  - Fills the viewport and stays fully transparent,
 *  - Has no unwanted parent backgrounds,
 *  - Uses a custom sticky header (showing only the logo) in the upper left,
 *  - And displays a pseudo‑footer (with the moon surface image) fixed at the bottom.
 *
 * These styles apply to pages with the custom body class:
 * .interactive-globe-page
 *************************************************************/

/* 1. Interactive Globe Container
   - The globe fills the viewport and is fixed behind other content.
*/
.interactive-globe-page .interactive-globe {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -3 !important; /* Behind all other content */
  pointer-events: auto;
  overflow: visible !important;
  background: none !important;
  background-color: transparent !important;
}

/* 2. Globe Canvas Transparency
   - Forces the canvas within the globe to be transparent.
*/
.interactive-globe-page .interactive-globe canvas {
  background: none !important;
  background-color: transparent !important;
  /* Uncomment the following line if a blend mode is desired:
     mix-blend-mode: lighten !important;
  */
}

/* 3. Remove Unwanted Backgrounds from Parent Containers */
.interactive-globe-page .site-container,
.interactive-globe-page .site,
.interactive-globe-page .page {
  background: transparent !important;
  background-color: transparent !important;
}

/* 4. Custom Header for the Globe Page
   - A minimal, sticky header in the upper left displaying only the logo.
*/
.interactive-globe-custom-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  padding: 20px 40px;
  background: transparent;
  pointer-events: none; /* Allow interaction with content behind */
}

/* Logo Styling inside the Custom Header */
.interactive-globe-custom-header a {
  pointer-events: auto; /* Re-enable interaction just for the link */
}

.interactive-globe-custom-header a img {
  display: block;
  max-height: 60px;
  width: auto;
}

/* Add tablet styles */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .interactive-globe-custom-header {
    padding: 30px;
  }
  
  .interactive-globe-custom-header a img {
    max-height: 50px; /* Size between desktop and mobile */
    width: auto;
  }
}

/* Mobile styles (keep existing) */
@media only screen and (max-width: 767px) {
  .interactive-globe-custom-header {
    padding: 20px;
  }
  
  .interactive-globe-custom-header a img {
    max-height: 40px;
    width: auto;
  }
}

/* 5. Pseudo‑Footer (Moon Surface Image)
   - Fixed at the bottom, with a background image scaled to its height.
*/
.interactive-globe-page .pseudo-footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 80px !important;
  background: url("https://united.earth/wp-content/uploads/2025/02/moon-surface-horizon.png")
    no-repeat bottom center !important;
  background-size: auto 100% !important;
  z-index: 20 !important;
  pointer-events: auto;
  will-change: transform;
  padding-bottom: env(safe-area-inset-bottom) !important;
}

/* 6. Mobile Adjustments for the Pseudo‑Footer */
@media only screen and (max-width: 767px) {
  .interactive-globe-page .pseudo-footer {
    height: 60px !important;
    bottom: 0 !important;
    left: 0 !important;
    position: fixed !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
}

/* 7. Action Content Lightbox Styling */
.interactive-globe-action-content {
  position: fixed;
  top: 20px;
  left: 20px;
  max-width: 90vw;
  max-height: 80vh;
  overflow: auto;
  background: rgba(255, 255, 255, 0.95);
  color: #000;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 50;
  border-radius: 4px;
  font-family: Arial, sans-serif;
}

.interactive-globe-action-content h2 {
  font-size: 1.5em;
  margin-bottom: 5px;
}

.interactive-globe-action-content p {
  margin: 5px 0;
}

.interactive-globe-action-content a {
  color: #0056b3;
  text-decoration: none;
  font-weight: bold;
}

.interactive-globe-action-content a:hover {
  text-decoration: underline;
}