/* ── Revolutionary suite font: self-hosted Inter (theme-independent) ──────────
 * Bundled per-plugin so the suite renders in a fixed font regardless of the
 * active theme or any custom font uploaded in the theme dashboard. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter/inter-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter/inter-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter/inter-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter/inter-latin-700-normal.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/inter/inter-latin-800-normal.woff2) format('woff2');}

/* Layers inherit the site's fonts (the theme is the parent): body text takes
 * --rev-font, headings --rev-heading-font, buttons the CTA button font. The
 * bundled Inter stack is only the fallback when no theme contract is present.
 * !important still beats the inline per-layer font-family the editor writes. */
.rs-root,
.rs-root .rs-layer,
.rs-root .rs-layer--text{font-family:var(--rev-font,'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif) !important;}
.rs-root .rs-layer--heading{font-family:var(--rev-heading-font,var(--rev-font,'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif)) !important;}
.rs-root .rs-layer--button{font-family:var(--rev-btn-font-family,var(--rev-font,'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif)) !important;}

.rs-root {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: none;
  background: #000;
  font-family: var(--rev-font, 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif);
}

.rs-track {
  position: absolute;
  inset: 0;
}

.rs-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

/* ─── Transition: fade ─────────────────────────────────────────────── */
.rs-transition-fade .rs-slide {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.rs-transition-fade .rs-slide.is-active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

/* ─── Transition: slide-h (horizontal) ─────────────────────────────── */
.rs-transition-slide-h .rs-slide {
  transform: translateX(100%);
  transition: transform 0.7s ease;
}
.rs-transition-slide-h .rs-slide.is-active {
  transform: translateX(0);
  z-index: 1;
  pointer-events: auto;
}

/* ─── Transition: slide-v (vertical) ──────────────────────────────── */
.rs-transition-slide-v .rs-slide {
  transform: translateY(100%);
  transition: transform 0.7s ease;
}
.rs-transition-slide-v .rs-slide.is-active {
  transform: translateY(0);
  z-index: 1;
  pointer-events: auto;
}

/* ─── Transition: directional slides ──────────────────────────────── */
.rs-transition-slide-left  .rs-slide { transform: translateX(100%);  transition: transform 0.7s ease; }
.rs-transition-slide-right .rs-slide { transform: translateX(-100%); transition: transform 0.7s ease; }
.rs-transition-slide-up    .rs-slide { transform: translateY(100%);  transition: transform 0.7s ease; }
.rs-transition-slide-down  .rs-slide { transform: translateY(-100%); transition: transform 0.7s ease; }
.rs-transition-slide-left  .rs-slide.is-active,
.rs-transition-slide-right .rs-slide.is-active,
.rs-transition-slide-up    .rs-slide.is-active,
.rs-transition-slide-down  .rs-slide.is-active {
  transform: translate(0, 0);
  z-index: 1;
  pointer-events: auto;
}

/* ─── Transition: zoom ────────────────────────────────────────────── */
.rs-transition-zoom-in  .rs-slide { opacity: 0; transform: scale(0.85); transition: opacity 0.7s ease, transform 0.7s ease; }
.rs-transition-zoom-out .rs-slide { opacity: 0; transform: scale(1.15); transition: opacity 0.7s ease, transform 0.7s ease; }
.rs-transition-zoom-in  .rs-slide.is-active,
.rs-transition-zoom-out .rs-slide.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
  pointer-events: auto;
}

/* ─── Transition: flip ────────────────────────────────────────────── */
.rs-transition-flip .rs-slide {
  opacity: 0;
  transform: perspective(1200px) rotateY(90deg);
  transition: opacity 0.7s ease, transform 0.7s ease;
  backface-visibility: hidden;
}
.rs-transition-flip .rs-slide.is-active {
  opacity: 1;
  transform: perspective(1200px) rotateY(0deg);
  z-index: 1;
  pointer-events: auto;
}

/* ─── Layers ──────────────────────────────────────────────────────── */
/* .rs-layer-pos handles positioning + anchor offset (no animation).
   .rs-layer handles animation transforms (no positioning conflict). */
.rs-layer-pos {
  position: absolute;
  max-width: 90%;
  pointer-events: none;
}
.rs-layer {
  display: inline-block;
  margin: 0;
  line-height: 1.15;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  will-change: transform, opacity;
  /* No CSS transition here on purpose: layer In/Out animations are driven
     entirely by the Web Animations API (see playLayer in the JS). A CSS
     transition on transform/opacity would race the WAAPI animation and
     produce inconsistent results between layers (e.g. the heading
     finishing a zoom early while the subheading looked correct). */
}

/* Off-stage states. JS adds these classes to enter the off-stage transform,
   then removes them (after delay) to animate to the natural state.
   For out animations, JS *adds* the matching class to animate back off. */
.rs-anim-off-fade        { opacity: 0; }
.rs-anim-off-slide-left  { opacity: 0; transform: translateX(-80px); }
.rs-anim-off-slide-right { opacity: 0; transform: translateX(80px); }
.rs-anim-off-slide-up    { opacity: 0; transform: translateY(-60px); }
.rs-anim-off-slide-down  { opacity: 0; transform: translateY(60px); }
.rs-anim-off-zoom-in     { opacity: 0; transform: scale(0.85); }
.rs-anim-off-zoom-out    { opacity: 0; transform: scale(1.15); }
.rs-anim-off-flip-x      { opacity: 0; transform: perspective(600px) rotateX(90deg); }
.rs-anim-off-flip-y      { opacity: 0; transform: perspective(600px) rotateY(90deg); }
.rs-anim-off-rotate      { opacity: 0; transform: rotate(180deg); }

/* "Suspend transitions", used by JS while seeding the initial off-stage
   state so the seed doesn't itself animate. */
.rs-anim-no-transition { transition: none !important; }

.rs-layer--heading {
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 700;
  color: #fff;
}
.rs-layer--text {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 400;
  line-height: 1.45;
  color: #fff;
}

/* Default slide button consumes the theme's --rev-btn-* contract so an unstyled
   CTA matches the site's buttons; a per-layer bgcolor set in the editor is an
   inline style and still overrides this. */
.rs-layer--button {
  display: inline-block;
  padding: var(--rev-btn-padding, 0.85rem 1.85rem);
  background: var(--rev-btn-bg, #fff);
  color: var(--rev-btn-color, #111);
  text-decoration: none;
  font-weight: var(--rev-btn-font-weight, 600);
  font-size: var(--rev-btn-font-size, inherit);
  text-transform: var(--rev-btn-text-transform, none);
  border-radius: var(--rev-btn-radius, 4px);
  box-shadow: var(--rev-btn-shadow, none);
  transition: transform 0.2s ease, filter 0.2s ease;
  text-shadow: none;
}
.rs-layer--button:hover {
  filter: brightness(0.95);
  transform: translateY(-2px) translate(var(--rs-tx, 0), var(--rs-ty, 0));
}

.rs-layer--image img {
  display: block;
  width: 100%;
  height: auto;
}

/* ─── Navigation: arrows + dots ───────────────────────────────────── */
.rs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  cursor: pointer;
  width: 48px;
  height: 48px;
  font-size: 28px;
  line-height: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.rs-arrow:hover { background: rgba(0, 0, 0, 0.75); }
.rs-arrow--prev { left: 16px; }
.rs-arrow--next { right: 16px; }

.rs-dots {
  position: absolute;
  bottom: 17px; /* 24px minus the dots' 7px hit-area padding: visual position unchanged */
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 8px;
}
/* Dots render as 10px circles but expose a 24x24 hit box (WCAG 2.5.8 target
   size / Lighthouse "target-size"): the button box is 24px and the painted
   circle is clipped to the 10px content area via background-clip. */
.rs-dot {
  width: 24px;
  height: 24px;
  padding: 7px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  background-clip: content-box;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.rs-dot.is-active {
  background-color: #fff;
  transform: scale(1.3);
}

/* Visible keyboard focus. The root sets `outline:none` for mouse use; restore a
   clear ring for keyboard users via :focus-visible on the root and the nav. */
.rs-root:focus-visible {
  outline: 3px solid #4d90fe;
  outline-offset: -3px;
}
.rs-arrow:focus-visible,
.rs-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ─── Background effects: Ken Burns + parallax + video ──────────── */
.rs-slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.rs-kb {
  animation-name: rs-kb-zoom-in;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.rs-kb--zoom-in   { animation-name: rs-kb-zoom-in; }
.rs-kb--zoom-out  { animation-name: rs-kb-zoom-out; }
.rs-kb--pan-left  { animation-name: rs-kb-pan-left; }
.rs-kb--pan-right { animation-name: rs-kb-pan-right; }

@keyframes rs-kb-zoom-in   { from { transform: scale(1);    } to { transform: scale(1.2); } }
@keyframes rs-kb-zoom-out  { from { transform: scale(1.2);  } to { transform: scale(1);   } }
@keyframes rs-kb-pan-left  { from { transform: scale(1.15) translateX(3%);  } to { transform: scale(1.15) translateX(-3%); } }
@keyframes rs-kb-pan-right { from { transform: scale(1.15) translateX(-3%); } to { transform: scale(1.15) translateX(3%);  } }

.rs-parallax { /* JS sets translateY based on scroll position; CSS keeps it cheap. */
  transform: translateY(0);
  transition: none;
}

.rs-slide-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.rs-slide-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  /* The wrap is pointer-events:none so it never blocks layer clicks, but
     that also kills the native video controls. Re-enable them here; the
     text/button layers sit above at z-index 2 so they still take clicks. */
  pointer-events: auto;
}
/* iframe variant: oversize so a 16:9 video covers most slide aspect ratios. */
.rs-slide-video-wrap--iframe .rs-slide-video {
  width: 177.78%;
  height: 177.78%;
}
/* Hero background video is decorative: clicks must NOT reach it (no native
   click-to-pause, no embed player toggling). Override the pointer-events:auto
   that exists only to expose controls in standalone sliders. The text/button
   layers sit above at z-index 2, so they still take clicks. */
.revolutionary-hero .rs-slide-video {
  pointer-events: none;
}

/* Shade/tint overlay: sits above bg + video, below the text/button layers,
   so a strong-enough opacity makes white text legible over busy footage. */
.rs-slide-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Keep layers above the bg layer/video/shade. */
.rs-layer-pos { z-index: 2; }

/* ─── Mode: carousel ─────────────────────────────────────────────── */
.rs-mode-carousel { overflow: hidden; }
.rs-mode-carousel .rs-track {
  position: relative;
  inset: auto;
  display: flex;
  height: 100%;
  gap: var(--rs-carousel-gap, 16px);
  transition: transform 0.45s ease;
  will-change: transform;
}
.rs-mode-carousel .rs-slide {
  position: relative;
  inset: auto;
  flex: 0 0 calc((100% - (var(--rs-spv, 1) - 1) * var(--rs-carousel-gap, 16px)) / var(--rs-spv, 1));
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.rs-mode-carousel .rs-arrow[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ─── Mode: scene ────────────────────────────────────────────────── */
.rs-mode-scene .rs-slide {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ─── Zoom triggers + lightbox (click to enlarge) ────────────────── */

/* Slide-level corner cluster for background image / video triggers. The
   container ignores pointer events so it never blocks layers; the buttons
   inside re-enable them. Sits above layers (z2) but below arrows (z5). */
.rs-zoom-controls {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 4;
  display: flex;
  gap: 8px;
  pointer-events: none;
}
.rs-zoom-btn {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.rs-zoom-btn:hover { background: rgba(0, 0, 0, 0.8); }
.rs-zoom-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rs-zoom-btn svg { display: block; }

/* Image-layer trigger: tucked into the image corner, revealed on hover. */
.rs-layer--zoomable { position: relative; }
.rs-zoom-btn--layer {
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: 36px;
  height: 36px;
  opacity: 0;
}
.rs-layer--zoomable:hover .rs-zoom-btn--layer,
.rs-zoom-btn--layer:focus-visible { opacity: 1; }

.rs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  background: rgba(0, 0, 0, 0.9);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.rs-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.rs-lightbox__content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 92vw;
  max-height: 92vh;
}
.rs-lightbox__img,
.rs-lightbox__video {
  display: block;
  max-width: 92vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}
/* 16:9 embed sized to fit the viewport without overflowing either axis. */
.rs-lightbox__embed {
  position: relative;
  width: min(92vw, 163.55vh); /* 92vh * 16/9 */
  aspect-ratio: 16 / 9;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}
.rs-lightbox__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.rs-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.rs-lightbox__close:hover { background: rgba(0, 0, 0, 0.85); }
.rs-lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Lock page scroll behind an open lightbox. */
.rs-lightbox-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .rs-lightbox { transition: none; }
  /* Suppress the genuinely motion-sickness-inducing background effects only
     (the Ken Burns zoom loop; scroll parallax is disabled in JS). Layer
     entrance/exit animations, slide transitions, and autoplay are left intact, 
     disabling them dropped the whole layer sequence and stacked every layer on
     top of each other. */
  .rs-root .rs-kb { animation: none !important; }
}

/* ─── Legacy class fallbacks (in case any theme CSS targets old names) ─ */
.rs-hero { /* old root class */ }
.rs-hero__slide { /* old slide class */ }

/* ─── Conditional display: device rules ──────────────────────────────
   Set from the editor's "Display rules" panel; classes emitted by
   revslider_render_config(). CSS-only so cached HTML stays device-correct.
   781px matches WordPress's own admin mobile breakpoint. */
@media (max-width: 781px) {
  .rs-root.rs-display-desktop { display: none !important; }
}
@media (min-width: 782px) {
  .rs-root.rs-display-mobile { display: none !important; }
}