/*
 * Legibility overrides: white text over photo backgrounds.
 * Darkens the image overlays slightly and adds a soft text shadow so
 * light text stays readable regardless of the photo behind it.
 */

/* Base overlay on photos (continent menu columns, etc.): 15% -> 35% black.
   Guarded so the already-dark .overlay-dark and the hero's .overlay-gradient
   keep their own backgrounds. */
.overlay:not(.overlay-dark):not(.overlay-gradient) {
    background: rgba(0, 0, 0, 0.35);
}

/* Hero overlay gradient: stronger at the top (behind nav + slogan) and
   bottom (behind the scroll button). */
.overlay-gradient {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.40) 0,
        rgba(0, 0, 0, 0.30) 35%,
        rgba(0, 0, 0, 0.35) 75%,
        rgba(0, 0, 0, 0.65) 100%);
}

/* Soft shadow behind all white-on-photo text: hero slogan, top navigation,
   scroll button, and the continent mega-menu titles/links/buttons. */
.video-title,
.home-slogan h1,
.btn-scroll,
.main-nav ul li a,
.world-nav,
.continent-block,
.continent-block h1 a,
.continent-block ul li a,
.world-column .btn-reverse {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 12px rgba(0, 0, 0, 0.35);
}