/* REDEMPTION RIDGE RP | GLOBAL PAGE ATMOSPHERE v1.8.2
   Uses the two existing images installed with v1.8.1.
   Shared header stylesheet; no page or RedM files changed.
   Homepage keeps its original cinematic hero. */
:root {
  --rr-global-banner: url('/assets/images/rr-page-banner.webp');
  --rr-global-landscape: url('/assets/images/rr-mountain-fade.webp');
  --rr-global-black: #0e0d0b;
}

/* The faint mountain landscape appears behind the BODY of every page,
   including pages without a dedicated hero. The source image is pre-faded. */
body { background-color: var(--rr-global-black); }
body > main {
  position: relative;
  isolation: isolate;
  background-image: var(--rr-global-landscape);
  background-position: right bottom;
  background-size: min(76vw, 1050px) auto;
  background-repeat: no-repeat;
}
body > main > * { position: relative; }

/* Banner images for EVERY existing interior hero style. The homepage's
   original .ridge-hero stays untouched. */
body:not([data-page='home']) .inner-hero,
body:not([data-page='home']) .journal-hero,
body:not([data-page='home']) .rr-citizen-hero {
  background-image:
    linear-gradient(90deg, rgba(8,8,7,.90) 0%, rgba(13,9,7,.73) 48%, rgba(22,12,6,.52) 100%),
    linear-gradient(0deg, rgba(10,9,8,.76), transparent 68%),
    var(--rr-global-banner) !important;
  background-position: center, center, center 48% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  border-bottom: 1px solid rgba(230,147,54,.38);
}

/* Pages with no hero at all get a quiet banner automatically, without
   replacing or moving their content. The :has() selector is supported by
   current Chrome, Firefox and Safari. */
body:not([data-page='home']) > main:not(:has(.inner-hero, .journal-hero, .rr-citizen-hero, .ridge-hero, .hero, .page-hero, .banner))::before {
  content: '';
  display: block;
  width: 100%;
  height: clamp(135px, 15vw, 220px);
  background-image:
    linear-gradient(0deg, var(--rr-global-black), rgba(9,8,7,.53) 72%),
    linear-gradient(90deg, rgba(9,8,7,.82), rgba(20,11,6,.35)),
    var(--rr-global-banner);
  background-position: center, center, center 48%;
  background-size: cover;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(230,147,54,.28);
  pointer-events: none;
}

/* Components with opaque full-section backgrounds need their own mountain
   fading on the bottom right, otherwise the body's landscape is hidden. */
.rr-citizen-portal,
.rr-journal,
.rr-commerce,
.rr-commerce-wrap {
  background-image: var(--rr-global-landscape) !important;
  background-position: right bottom !important;
  background-size: min(72vw, 950px) auto !important;
  background-repeat: no-repeat !important;
}
/* Restore commerce's solid deep canvas behind transparent artwork. */
.rr-citizen-portal, .rr-journal, .rr-commerce {
  background-color: #110e0b;
}
/* Keep cards, forms and text opaque for contrast. */
.rr-citizen-portal article, .rr-journal article, .rr-commerce article { background-color: rgba(24,17,12,.92); }

@media (max-width: 760px) {
  body > main { background-size: 100vw auto; }
  .rr-citizen-portal, .rr-journal, .rr-commerce, .rr-commerce-wrap {
    background-size: 100vw auto !important;
  }
  body:not([data-page='home']) .inner-hero,
  body:not([data-page='home']) .journal-hero,
  body:not([data-page='home']) .rr-citizen-hero {
    background-position: center, center, 56% center !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body > main { background-attachment: scroll; }
}