/* ==========================================================================
   Royal Central Hero Video Shades
   Edit this file to control hero video shade strength across the site.
   ========================================================================== */

:root {
  /*
   Main hero shade.
   This is intentionally lighter than many old page-level shades because several
   source videos are already dark.
  */
  --rhf-central-hero-shade:
    radial-gradient(900px 460px at 78% 16%, rgba(254, 218, 106, 0.10), transparent 58%),
    linear-gradient(90deg, rgba(13, 14, 18, 0.38) 0%, rgba(13, 14, 18, 0.18) 46%, rgba(13, 14, 18, 0.04) 100%),
    linear-gradient(180deg, rgba(13, 14, 18, 0.04) 0%, rgba(13, 14, 18, 0.28) 100%);

  /*
   Mobile needs slightly stronger shade so white text stays readable.
  */
  --rhf-central-hero-mobile-shade:
    radial-gradient(700px 320px at 78% 10%, rgba(254, 218, 106, 0.10), transparent 58%),
    linear-gradient(180deg, rgba(13, 14, 18, 0.42) 0%, rgba(13, 14, 18, 0.54) 56%, rgba(13, 14, 18, 0.72) 100%);

  /*
   Keep the video itself clean. Change this only if a video is too bright.
   Example: brightness(0.95) contrast(1.04)
  */
  --rhf-central-hero-video-filter: none;

  /*
   Optional media overlay. Default transparent so we do not double-darken videos.
  */
  --rhf-central-hero-media-overlay: transparent;
}

/* Map old shared variables to the new central controls. */
.rhf-page {
  --rhf-hero-video-filter: var(--rhf-central-hero-video-filter);
  --rhf-hero-media-overlay: var(--rhf-central-hero-media-overlay);
  --rhf-hero-shade: var(--rhf-central-hero-shade);
  --rhf-hero-mobile-shade: var(--rhf-central-hero-mobile-shade);
}

/* Standard page hero system. */
.rhf-page .rhf-page-hero__media::after {
  background: var(--rhf-central-hero-media-overlay) !important;
}

.rhf-page .rhf-page-hero__video {
  filter: var(--rhf-central-hero-video-filter) !important;
}

.rhf-page .rhf-page-hero__shade {
  background: var(--rhf-central-hero-shade) !important;
}

/* Newer custom hero systems. */
.rhf-page--all-inclusive-pricing .rhf-aip-hero__overlay,
.rhf-page--all-inclusive-pricing .rhf-info-hero__overlay {
  background: var(--rhf-central-hero-shade) !important;
}

.rhf-page--all-inclusive-pricing .rhf-aip-hero__video,
.rhf-page--all-inclusive-pricing .rhf-info-hero__video {
  filter: var(--rhf-central-hero-video-filter) !important;
}

/* Homepage cinema hero system. */
.royal-cinema__shade {
  background: var(--rhf-central-hero-shade) !important;
}

.royal-cinema__video {
  filter: var(--rhf-central-hero-video-filter) !important;
}

@media (max-width: 760px) {
  .rhf-page .rhf-page-hero__shade,
  .rhf-page--all-inclusive-pricing .rhf-aip-hero__overlay,
  .rhf-page--all-inclusive-pricing .rhf-info-hero__overlay,
  .royal-cinema__shade {
    background: var(--rhf-central-hero-mobile-shade) !important;
  }
}

/* ==========================================================================
   Royal Central Hero Shades — Global Enforcement Layer
   This forces every page hero shade/overlay to use the same central variables.
   ========================================================================== */

html body .rhf-page .rhf-page-hero__shade,
html body .rhf-page-hero__shade,
html body .rhf-page [class*="hero__overlay"],
html body .rhf-info-page [class*="hero__overlay"],
html body .rhf-aip-hero__overlay,
html body .rhf-info-hero__overlay,
html body .royal-cinema__shade {
  background: var(--rhf-central-hero-shade) !important;
}

html body .rhf-page .rhf-page-hero__media::after,
html body .rhf-page-hero__media::after,
html body .rhf-info-hero__media::after,
html body .rhf-aip-hero__media::after,
html body .royal-cinema__media::after {
  background: var(--rhf-central-hero-media-overlay) !important;
}

html body .rhf-page .rhf-page-hero__video,
html body .rhf-page-hero__video,
html body .rhf-info-hero__video,
html body .rhf-aip-hero__video,
html body .royal-cinema__video {
  filter: var(--rhf-central-hero-video-filter) !important;
}

@media (max-width: 760px) {
  html body .rhf-page .rhf-page-hero__shade,
  html body .rhf-page-hero__shade,
  html body .rhf-page [class*="hero__overlay"],
  html body .rhf-info-page [class*="hero__overlay"],
  html body .rhf-aip-hero__overlay,
  html body .rhf-info-hero__overlay,
  html body .royal-cinema__shade {
    background: var(--rhf-central-hero-mobile-shade) !important;
  }
}