/*!
 * Riffle Header — layout for the stacked deck.
 *
 * .rfl-box holds one deck and its padding is what the script animates: growing
 * it pushes the neighbouring items aside. Inside, .rfl-in is the positioning
 * context, so the copies stay pinned to the real text however wide the box gets.
 * The real text sits in normal flow and keeps its baseline; the copies are
 * absolutely positioned over it and paint an opaque paper rect, which is what
 * makes the riffle read as stacked paper rather than as ghosting.
 */

.rfl-box {
  --rfl-paper: #fff;
  --rfl-px: 0px;
  --rfl-py: 0px;
  display: inline-block;
  white-space: pre;
  vertical-align: baseline;
  padding: 0;
}

.rfl-in {
  position: relative;
  display: inline-block;
  white-space: pre;
}

.rfl-t {
  display: inline-block;
  white-space: pre;
  /* themes set border-box globally; the copies are given an explicit width
     equal to the core's, and that width has to mean the text box */
  box-sizing: content-box;
  /* the paper extends past the text by the pad, but the negative margin keeps
     the layout box the size of the text itself, so cards butt up by their ink */
  padding: var(--rfl-py) var(--rfl-px);
  margin: calc(-1 * var(--rfl-py)) calc(-1 * var(--rfl-px));
  background: var(--rfl-paper);
  color: var(--rfl-ink, inherit);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

.rfl-core {
  position: relative;
}

.rfl-copy {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  /* a copy renders at its own weight, so its text can be narrower or wider than
     the card it sits in. the script anchors each one to the edge it is actually
     revealed at, which both equalises the two arms and keeps the outermost
     slivers from coming up blank */
}

/* the deck opens past the item's own box, so anything that clips it has to let
   go. themes that hide overflow on the nav will otherwise crop the riffle */
.rfl-host {
  overflow: visible;
}

/* ---- vertical decks and submenus ----
   A submenu hangs below its parent, out of flow, so opening it never disturbs
   the header row. Its items are block-level: vertical padding on an inline box
   would not move its neighbours, but on a block it does, which is what lets a
   sub-item riffling downward push the ones under it further down. */

.rfl-parent {
  position: relative;
}

/* The theme's dropdown arrow. Where the pointer can hover, the plugin opens the
   dropdown itself and the arrow is a second control for the same thing, so it
   goes. Where it cannot — touch, which has no hover at all — tapping the arrow
   is the only way into the dropdown, so it stays. Hence a query rather than a
   flat rule: this is one of the few places where the right answer genuinely
   differs by input device. */
@media (hover: hover) and (pointer: fine) {
  /* what the script could recognise: furniture carrying no text of its own,
     inside the link or beside it */
  .rfl-kept {
    display: none !important;
  }

  /* and what it structurally cannot. A toggle carrying a screen-reader label
     is not text-free, so it never gets marked; a caret drawn with ::after is
     not an element at all and cannot be. Both are named here instead. Every
     selector is anchored to a direct child of the item or the link so that
     nothing inside the dropdown itself can match — hiding that would take the
     menu with it. */
  .rfl-parent > [class*="toggle"]:not(.rfl-sub),
  .rfl-parent > button[aria-expanded],
  .rfl-parent > .rfl-host > [class*="toggle"],
  .rfl-parent > .rfl-host > [class*="caret"],
  .rfl-parent > .rfl-host > [class*="arrow"],
  .rfl-parent > .rfl-host > [class*="icon"],
  .rfl-parent > .rfl-host > svg {
    display: none !important;
  }
  .rfl-parent > .rfl-host::before,
  .rfl-parent > .rfl-host::after {
    content: none !important;
  }
}

/* The dropdown carries no background of its own, wherever the theme hung it.
   The script clears the container and the rows it can enumerate, but a panel
   drawn with ::before, or hung on some wrapper the script never walked, is out
   of its reach — so the rule is stated here as well, where it covers anything
   inside the dropdown at all. Each item paints its own opaque paper; that is
   the only background the dropdown should have. */
.rfl-parent .rfl-sub,
.rfl-parent .rfl-sub > *,
.rfl-parent .rfl-sub li,
.rfl-parent .rfl-sub li > a {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
/* Including the pseudo-elements, on anything in there — a panel is as often
   drawn on the link itself as on the row or the list, and naming the three
   places it might be leaves a fourth. The background is cleared rather than the
   pseudo-element removed, so an icon or a glyph drawn this way survives while
   the block of colour behind it does not. */
.rfl-parent .rfl-sub::before,
.rfl-parent .rfl-sub::after,
.rfl-parent .rfl-sub *::before,
.rfl-parent .rfl-sub *::after {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* and the same for a top-level item, where a pill can just as well be a
   pseudo-element as a background on the link */
.rfl-host::before,
.rfl-host::after {
  background: transparent !important;
  box-shadow: none !important;
}

/* A descendant selector, not a child one: a theme is free to wrap its submenu
   in a div, and everything here would then match nothing at all. */
.rfl-parent .rfl-sub {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 100%;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

/* Themes park a dropdown out of sight in every way going: off-canvas lefts,
   zero opacity, display none, a collapsed max-height, a clip rect. Which one
   is anybody's guess, so the open state overrides the lot. This is the case
   !important is for — beating third-party CSS that cannot be predicted. */
.rfl-parent.rfl-open .rfl-sub {
  left: 0 !important;
  right: auto !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  max-height: none !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
}

/* The dropdown stacks. A header menu is usually laid out as a row — flex on the
   list, inline or floated items — and a submenu inheriting that comes out as a
   row too, running off sideways instead of dropping down. The stack has to win
   over whatever the theme laid on the row. */
.rfl-parent .rfl-sub {
  display: block;
  flex-direction: column;
}
.rfl-parent .rfl-sub li {
  display: block !important;
  float: none !important;
  width: auto !important;
  list-style: none;
  white-space: nowrap;
}

.rfl-box-v {
  display: block;
}

/* a vertical deck's card is pulled in to the ink's own height, so its slices
   land on letters instead of on leading */
.rfl-box-v .rfl-t {
  line-height: var(--rfl-lh, inherit);
}

/* ---- image decks ----
   .rfl-img-in is the centre panel and the positioning context: the copies are
   pinned to it exactly, so they carry the panel's size whatever it is, and are
   moved by transform alone — they never take part in layout.

   In 'grow' the wrapper takes no width of its own, so the photo keeps whatever
   sizing rule the theme gave it and the wrapper's padding grows with the fan.
   In 'fit' the wrapper is the frame: it holds the box the theme laid out, the
   panel is narrowed and positioned inside it, and the frame clips the rest. */
.rfl-img-box {
  display: inline-block;
  vertical-align: top;
  line-height: 0;
}
.rfl-img-in {
  position: relative;
  display: block;
}
/* the deck is ordered deepest-first by z-index, and z-index is ignored on a
   static element — without this the real photo paints below every copy of
   itself, so the centre of the deck is a copy and the photo is never seen */
.rfl-img-core {
  position: relative;
}
.rfl-img-copy {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
/* Square corners. A theme that rounds its photos rounds every copy in the deck
   too, and the gutter ring follows the same radius — so instead of clean slices
   the fan comes out as a row of lozenges with nicked corners. A riffle is a cut
   through a rectangle; the corners have to be square for the cut to read. */
.rfl-img-box,
.rfl-img-in,
.rfl-img-core,
.rfl-img-copy {
  border-radius: 0 !important;
}

.rfl-img-box.rfl-img-fit {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
}
.rfl-img-box.rfl-img-fit > .rfl-img-in {
  position: absolute;
  top: 0;
}
/* the panel is narrower than the photo was, so the photo has to be re-cropped
   to it rather than squashed into it — and the copies with it, or a copy's
   sliver would not line up with the panel it is a copy of */
.rfl-img-box.rfl-img-fit .rfl-img-core,
.rfl-img-box.rfl-img-fit .rfl-img-copy {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}