/* Immersive visit: below the logo without changing the header grid. */
header #immersive-cta {
  position: absolute;
  top: 100%;
  grid-column: 7 / 9;
  left: 0;
  display: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  /* The existing logo and menu cells include their borders outside the grid. */
  width: calc(100% + 2px);
  height: calc(3.8rem + 2px);
  max-width: calc(100vw - 2rem);
  padding: 0.5rem;
  border: 1px solid hsla(0, 0%, 100%, 0.3);
  background: transparent;
  color: white;
  font-size: 0.8rem;
  line-height: 1.4;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  white-space: normal;
}

header #immersive-cta:before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid hsla(0, 0%, 100%, 0.3);
  pointer-events: none;
}

header.solid #immersive-cta {
  border-color: rgba(76, 76, 76, 0.3);
  background: white;
  color: rgb(16, 28, 54);
  text-shadow: none;
}

header.solid #immersive-cta:before {
  border-color: rgba(76, 76, 76, 0.3);
}

#pageHome #immersive-cta,
#pageMaison #immersive-cta,
#pageChambres #immersive-cta,
#pageEnvirons #immersive-cta {
  display: flex;
}

header #immersive-cta span {
  color: inherit;
}

header #immersive-cta:focus {
  outline: 2px solid white;
  outline-offset: 3px;
}

body.modal-active #immersive-cta,
header.modal #immersive-cta {
  visibility: hidden;
  pointer-events: none;
}

@media screen and (max-width: 900px) {
  header #immersive-cta {
    grid-column: 6 / 10;
    height: 5rem;
  }
}

@media screen and (max-width: 700px) {
  header #immersive-cta {
    /* The mobile logo has no bordered cell; keep the label readable below it. */
    grid-column: 3 / 7;
    height: 3.8rem;
    width: 100%;
  }
}

/* Match the header's existing upward text slide and gold replacement. */
@media screen and (min-width: 1000px) {
  header #immersive-cta > span {
    display: inline-block;
    overflow: hidden;
  }

  header #immersive-cta > span > span {
    display: inline-block;
    position: relative;
    transition: color 0.5s, transform 0.2s;
  }

  header #immersive-cta:hover > span > span,
  header #immersive-cta:focus > span > span {
    transform: translateY(-100%);
  }

  header #immersive-cta > span > span:after {
    content: attr(data-span);
    color: #c9a96a;
    display: inline-block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  header #immersive-cta > span > span {
    transition: none;
  }
}

/* Room links reuse the existing secondary button and local typography. */
#chambres .immersive-room-cta {
  color: rgb(62, 116, 60);
  box-sizing: border-box;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 100%;
}

#chambres .immersive-room-cta:focus {
  outline: 2px solid rgb(16, 28, 54);
  outline-offset: 3px;
}