/* 1. The H1 Text Style */
h1.hover-reveal {
  display: inline-block !important;
  position: relative !important; 
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important; 
  font-size: 25px !important; 
  font-family: inherit; 
  line-height: 1.2 !important;
  text-transform: inherit;
  z-index: 100 !important; 
  /* Smooth transition for the shadow and color */
  transition: text-shadow 0.3s ease, color 0.3s ease !important; 
}

/* 2. The Pop-up Media */
.hover-reveal .pop-up-content {
  display: none !important; 
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 50vw !important; 
  max-width: 900px !important;
  height: auto !important;
  z-index: 50 !important; 
  pointer-events: none !important; 
}

/* 3. The Media Trigger */
.hover-reveal:hover .pop-up-content {
  display: block !important;
}

/* 4. The Text Hover Effect - BLUR ONLY THE TEXT */
h1.hover-reveal:hover {
  /* This hides the sharp edges of the text */
  color: transparent !important; 
  /* This creates the blur effect (0px offset, 4px blur radius) */
  text-shadow: 0 0 4px rgba(255, 255, 255, 1) !important; 
}

/* 5. Mobile Adjustments */
@media screen and (max-width: 768px) {
  h1.hover-reveal {
    z-index: 9999 !important;
    pointer-events: auto !important; 
  }

  .hover-reveal .pop-up-content {
    width: 70vw !important; 
    max-width: none !important; 
    z-index: 1 !important; 
    opacity: 0.6 !important; 
    pointer-events: none !important; 
  }

  .hover-reveal .pop-up-content img,
  .hover-reveal .pop-up-content video {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    will-change: transform, opacity;
  }
}

.lunchbox {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important; 
    min-height: 100vh !important; 
    height: auto !important; 
}

/* 5. Specific code for header text */

.header-contact {
  display: block !important;
  transition: text-shadow 0.3s ease, color 0.3s ease !important;
  margin-bottom: 40px !important; /* Space before your next elements */
}

.header-contact {
  color: #ffffff !important;
  font-size: 25px !important;
  line-height: 1.2 !important;
  margin: 0 0 10px 0 !important;
}

/* FORCE EMAIL LINK COLOR */
.header-contact a {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* KEEP IT WHITE AFTER CLICKING */
.header-contact a:visited {
  color: #ffffff !important;
}

/* THE GREY BLUR HOVER */
.header-contact a:hover {
  color: transparent !important;
  text-shadow: 0 0 4px rgba(150, 150, 150, 1) !important;
}