/* ============================================================
   Everything is namespaced .rh- so it can drop into an
   Elementor page without colliding with theme CSS. Rules a
   theme/Elementor selector would otherwise beat (button, img,
   h2/h3, ul) are scoped under .rh-shelf-block.

   Every element styled here is built by rec-animation-main.js,
   so without JS none of this applies and the page is unchanged.
   ============================================================ */

/* Elementor product cards, hidden once the shelf has read them. */
.rh-source-hidden { display: none !important; }

/* At phone width the shelf hides too (same breakpoint as NARROW in
   the script). */
@media (max-width: 767px) {
  .rh-shelf-block .rh-shelf { display: none; }
}

.rh-shelf-block {
  --rh-red:   #934745;
  --rh-navy:  #1e3a52;
  --rh-cream: #ebe2d9;
  --rh-tan:   #a9855e;
  --rh-ink:   #1b1b1b;

  /* Sampled from post-46587.css so the card matches the page cards. */
  --rh-heading: #2f495a;
  --rh-label:   #566987;
  --rh-body:    #4a4a4a;
  --rh-cta:     #c9330a;
  --rh-focus-ring: #1e3a52;
  --rh-focus-halo: #f2b705;

  /* Motion parallels .click-DoOO in post-46587.css: a single
     simultaneous rotate + scale over 1s ease, no intermediate beat. */
  --rh-eject-duration: 1s;
  --rh-hover-scale: 1.12;

  max-width: 1200px;
  margin: 0 auto;
  color: var(--rh-ink);
}

/* ---------- Shelf ---------- */

.rh-shelf {
  position: relative;
  aspect-ratio: 1899 / 978;
  /* Container query units let each tape slice line up with the
     artwork without any JS measurement. */
  container-type: size;
  container-name: rh-shelf;
  overflow: visible;          /* never clip a focus ring or a tape mid-eject */
}

.rh-shelf-block .rh-shelf__art {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  transition: opacity .35s ease, filter .35s ease;
}

.rh-shelf.is-open .rh-shelf__art,
.rh-shelf.is-open .rh-tape__art {
  opacity: .3;
  filter: blur(2px);
}

.rh-tape__art { transition: opacity .35s ease, filter .35s ease; }

.rh-shelf-block .rh-shelf__list { list-style: none; margin: 0; padding: 0; }
.rh-shelf-block .rh-shelf__list li { margin: 0; padding: 0; }

/* ---------- Tape hotspots ---------- */

.rh-shelf-block .rh-tape,
.rh-shelf-block .rh-tape:hover,
.rh-shelf-block .rh-tape:focus {
  position: absolute;
  left:   calc(var(--l) * 1cqw);
  top:    calc(var(--t) * 1cqh);
  width:  calc(var(--w) * 1cqw);
  height: calc(var(--h) * 1cqh);
  min-height: 0;

  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
  overflow: hidden;           /* clips the art slice to this tape */
  transform-origin: 50% 50%;
  transition: transform .3s ease;
  border-radius: 2px;
}

.rh-shelf-block .rh-tape[data-shape="disc"] { border-radius: 50%; }

/* EDU tape sits in front of the record in the artwork. */
.rh-tape[data-product="edu"] { z-index: 2; }

/* Each button carries a full-size copy of the shelf art, offset so
   that only its own region shows through. --rh-art is set on
   .rh-shelf by the JS from the page's own image src. */
.rh-tape__art {
  position: absolute;
  left:   calc(var(--l) * -1cqw);
  top:    calc(var(--t) * -1cqh);
  width:  100cqw;
  height: 100cqh;
  background: var(--rh-art) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}

.rh-tape__label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Focus: dark ring plus amber halo so it reads on both the white
   page and the near-black tape. Offset keeps it off the artwork. */
.rh-shelf-block .rh-tape:focus-visible {
  outline: 3px solid var(--rh-focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--rh-focus-halo);
}

/* .click-DoOO:hover grows the tape 1.2x. Same idea here, but at
   .3s rather than the mockup's 1s — a one-second hover response
   reads as lag. .3s is already the mockup's own panel timing. */
.rh-shelf-block .rh-tape:hover,
.rh-shelf-block .rh-tape:focus-visible { transform: scale(var(--rh-hover-scale)); z-index: 5; }

/* ---------- Hero reveal ----------
   Mirrors .click-DoOO / .DoOODescription in post-46587.css, just
   relocated into the dialog: the header image starts turned and
   small, straightens to full size in place over 1s ease, and only
   once that finishes does the description content fade in below it. */

.rh-dialog__title img {
  transform-origin: 50% 50%;
  transition: transform var(--rh-eject-duration) ease;
  transform: rotate(var(--rh-hero-start-rotate, -90deg)) scale(.5);
}
.rh-dialog__title img.active { transform: rotate(0deg) scale(1); }

/* Fields and actions stay reserved-but-invisible until the hero
   settles, then fade in. Opacity rather than display:none keeps the
   dialog's height steady as the image finishes. */
.rh-dialog__grid,
.rh-dialog__actions {
  opacity: 0;
  transition: opacity .5s ease;
}
.rh-dialog__grid.show,
.rh-dialog__actions.show { opacity: 1; }

/* ---------- Dialog ----------
   Matches the "Content Description Cards" on the page: white card,
   20px radius, 0 0 10px rgba(0,0,0,.22) shadow, the horizontal tape
   art as the heading, then italic #566987 field labels each marked
   with an outlined square, in two columns. */

.rh-dialog {
  width: min(64rem, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100vh - 3rem);
  padding: 0;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .22);
  background: #fff;
  color: var(--rh-body);
  font-family: "Inter", system-ui, sans-serif;
  overflow: auto;
  overscroll-behavior: contain;
  transition: background-color .4s ease, box-shadow .4s ease;
}

/* While the hero is turning/growing into place (open) or turning
   back down (close), the dialog's own white surface, close button,
   and scrollbar all stay out of the way — just the image, floating
   over the dimmed page. */
.rh-dialog.rh-bg-hidden {
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}
.rh-dialog.rh-bg-hidden .rh-dialog__close {
  opacity: 0;
  pointer-events: none;
}

/* Suppresses the background/box-shadow transition for exactly one
   style commit — applied together with rh-bg-hidden right before
   showModal() so the very first rendered frame is instantly
   transparent, with no transition value in flight to fade or flash. */
.rh-dialog.rh-no-transition,
.rh-dialog.rh-no-transition .rh-dialog__close { transition: none !important; }

.rh-dialog::backdrop { background: rgba(27, 27, 27, .62); }

.rh-dialog__card {
  position: relative;
  padding: 3.75rem 6% 2rem;
}

/* The tape art is the heading. Its alt carries the product name, so
   there is no separate title line to duplicate it. */
.rh-shelf-block .rh-dialog__title { margin: 0 0 2rem; padding: 0; }
.rh-shelf-block .rh-dialog__title img { display: block; width: 100%; max-width: none; height: auto; }
/* The Reclaim Cloud logo is square, so full width is far too big. */
.rh-shelf-block .rh-dialog__title img[src*="cloud-logo"] { width: 300px; max-width: 100%; margin: 0 auto; }
.rh-shelf-block .rh-dialog__title--text {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--rh-heading);
}

.rh-shelf-block .rh-dialog__close,
.rh-shelf-block .rh-dialog__close:focus {
  position: absolute;
  top: .75rem;
  inset-inline-end: .75rem;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--rh-label);
  border-radius: 50%;
  background: #fff;
  box-shadow: none;
  color: var(--rh-label);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  opacity: 1;
  transition: opacity .3s ease;
}
.rh-shelf-block .rh-dialog__close:hover { background: var(--rh-label); color: #fff; }
.rh-shelf-block .rh-dialog__close:focus-visible {
  outline: 3px solid var(--rh-focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--rh-focus-halo);
}

/* ---------- Fields ---------- */

.rh-dialog__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.9rem 3rem;
}

.rh-field--full { grid-column: 1 / -1; }

.rh-shelf-block .rh-field h3 {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  margin: 0 0 .5rem;
  padding: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--rh-label);
}

/* Decorative square marker, matching the icon-list glyph. */
.rh-field h3::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  transform: translateY(1px);
}
.rh-field--icon h3::before { content: none; }

/* Icon copied from the matching heading on the page. */
.rh-field__icon {
  flex: 0 0 auto;
  display: inline-flex;
  width: 1em;
  justify-content: center;
  transform: translateY(2px);
}
.rh-field__icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}
.rh-field__icon i {
  font-size: 1em;
  line-height: 1;
}

.rh-shelf-block .rh-field__body {
  margin-inline-start: 30px;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.55;
}
.rh-shelf-block .rh-field__body p  { margin: 0; }
.rh-shelf-block .rh-field__body ul { margin: 0; padding-inline-start: 1.15rem; list-style: disc; }

/* ---------- Actions ---------- */

.rh-dialog__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  margin-top: 2.25rem;
}

.rh-shelf-block .rh-btn,
.rh-shelf-block .rh-btn:focus {
  display: inline-block;
  padding: .62em 1.3em;
  border: 0;
  border-radius: 3px;
  box-shadow: none;
  color: #fff;
  font-family: "Roboto", system-ui, sans-serif;
  line-height: normal;
  text-decoration: none;
  cursor: pointer;
}
.rh-shelf-block .rh-btn--primary   { background: var(--rh-cta); font-size: 1.3rem; font-weight: 500; }
.rh-shelf-block .rh-btn--secondary { background: var(--rh-label); font-size: 1rem; font-weight: 400; }
.rh-shelf-block .rh-btn:hover { color: #fff; text-decoration: underline; }
.rh-shelf-block .rh-btn--primary:hover   { background: var(--rh-cta); }
.rh-shelf-block .rh-btn--secondary:hover { background: var(--rh-label); }
.rh-shelf-block .rh-btn:focus-visible {
  outline: 3px solid var(--rh-focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--rh-focus-halo);
}

@media (max-width: 47.9375em) {
  .rh-dialog__grid { grid-template-columns: 1fr; }
  .rh-dialog__card { padding: 2rem 1.25rem 1.5rem; }
  .rh-shelf-block .rh-field__body { margin-inline-start: 21px; }
}

/* ---------- Reduced motion ----------
   The eject is decoration. Skip it entirely rather than shortening
   it, and open the dialog straight away. */

@media (prefers-reduced-motion: reduce) {
  .rh-dialog__title img, .rh-dialog, .rh-shelf-block .rh-dialog__close,
  .rh-dialog__grid, .rh-dialog__actions { transition: none !important; }
  .rh-shelf-block .rh-tape:hover,
  .rh-shelf-block .rh-tape:focus-visible { transform: none; }
  .rh-shelf-block .rh-tape, .rh-shelf__art, .rh-tape__art { transition: none; animation: none; }
}