/* CTA Popup — right-docked drawer opened from a CTA card. FRONTEND ONLY
   (not in add_editor_style, so the editor keeps the popup visible/inline).
   Container gets .rhsc-cta-popup; the popup is .is-cta-popup-wrap.
   JS (assets/js/js.js) toggles .is-open on the container.
   position/overflow use !important to win over the element's inline GB rule. */

/* closed: parked off-screen to the right, hidden */
.is-cta-popup-wrap {
  position: fixed !important;
  top: 0;
  /* Full viewport height, not the content's height.

     Only `top` was set, so the panel was as tall as whatever was inside it and
     read as a floating card pinned to the top-right corner rather than a drawer
     docked to the edge. The rh-viz popup hid this: its content is long enough to
     fill the screen on its own. The CSMB Report archive is nine table rows, and
     the panel stopped two thirds of the way down (QA, 2026-08-20).

     `bottom: 0` rather than a height unit: no dvh/vh disagreement on mobile
     browsers whose toolbars change the viewport, and it composes with the `top`
     above instead of restating it. Content taller than the panel scrolls, which
     is what the overflow-y in the open state is for. */
  bottom: 0;
  /* ...clamped to the DYNAMIC viewport (QA row 121: "when opening the drawer,
     it does not fully work to scroll all the way down on mobile. Some of the
     content gets cut off").

     top: 0 with bottom: 0 sizes the panel to the fixed-position containing
     block, and on a phone that is the LARGE viewport - the one you get with
     the browser toolbar hidden. With the toolbar showing, the foot of the
     drawer, and the last stretch of its scroll, sits behind it. dvh tracks the
     viewport that is actually visible, so the panel ends where the screen
     does.

     max-height rather than height, so this only ever clips: on a desktop
     browser dvh and the top/bottom pair resolve to the same number and nothing
     moves - measured 736px either way on the 740px frame this was checked in. */
  max-height: 100dvh;
  right: 0;
  width: min(940px, 96vw);
  z-index: 1001;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .34s cubic-bezier(.4, 0, .2, 1), visibility 0s .34s;
}

/* Header pinned, body takes the rest of the drawer and scrolls.

   Every popup in the site is the same two blocks - a header bar and a body -
   and the body's GenerateBlocks element carries a hard-coded
   `max-height: 703px` with `overflow-y: scroll`. 703 is a magic number: on the
   902px viewport this was measured at, header 114 + body 703 leaves an 85px
   white strip at the foot of the drawer, and on any other window height it is
   wrong by a different amount. Before `bottom: 0` above, the panel was as tall
   as its content, so nobody noticed.

   Flex column instead: the header keeps its own height, the body takes whatever
   is left and scrolls inside it. `min-height: 0` is what lets a flex item shrink
   below its content and actually scroll - without it the item stays content-tall
   and the drawer grows past the viewport again.

   `max-height: none !important` overrides the element's own GB rule, the same
   reason position, overflow and radius use it here.

   :first-child / :last-child rather than the .gb-element-* ids: those are
   per-page uniqueIds (the body is 234aad2a on rh-viz and on the pages cloned
   from it, but that is not a contract). Checked on rh-viz, member-group-item
   and csmb-report: two children each. */
.is-cta-popup-wrap {
  display: flex !important;
  flex-direction: column;
}

.is-cta-popup-wrap > :first-child {
  flex: 0 0 auto;
}

.is-cta-popup-wrap > :last-child {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-y: auto;
  /* A flick that reaches the end of this body stops there instead of carrying
     on into the page behind the drawer. The reveal panel already does this for
     the same reason; a modal scroller that chains its overscroll onto a locked
     document is how a drawer ends up feeling like it will not scroll. */
  overscroll-behavior: contain;
}

/* Round only the leading edge, like the profile drawer (profile-drawer.css).
   The page's GenerateBlocks element carries `border-radius: 12px` on all four
   corners, which was fine on a floating card but leaves two white notches
   against the viewport edge once the panel is docked full height.

   !important for the same reason as position and overflow above: the radius
   comes from the element's own GB rule, and this has to win over it. */
.is-cta-popup-wrap {
  border-radius: 12px 0 0 12px !important;
}

/* open: slide in from the right */
.rhsc-cta-popup.is-open .is-cta-popup-wrap {
  transform: translateX(0);
  visibility: visible;
  overflow-y: auto !important;
  transition: transform .34s cubic-bezier(.4, 0, .2, 1);
}

/* dark overlay, fades */
.rhsc-cta-popup::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(24, 20, 35, .55);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .34s ease, visibility 0s .34s;
}
.rhsc-cta-popup.is-open::before {
  opacity: 1;
  visibility: visible;
  transition: opacity .34s ease;
}

.rhsc-cta-popup { cursor: pointer; }
.rhsc-cta-popup.is-open { cursor: default; }

body.rhsc-cta-open { overflow: hidden; }

/* The body rule above cannot hold the page still on its own — documentElement is
   the scrolling element here — so js.js also adds .rhsc-scroll-locked to <html>.
   That rule lives in style.css (see "scroll lock"), which is always loaded —
   deliberately not in a pattern stylesheet, since this popup and the profile
   drawer are enqueued independently of each other. */

.rhsc-cta-popup
  :has(> p.has-body-large-font-size)
  > p:not([class*="font-size"]) {
  font-size: var(--wp--preset--font-size--body-large, 20px);
}

/* The CTA card itself, in the band where its heading and button stop fitting
   side by side: the heading gains air above it and the button is pulled back up
   into the space that opens beside it, right-aligned.

   :not(.is-cta-popup-wrap) is what keeps this on the CARD. The drawer panel is
   a DESCENDANT of .rhsc-cta-popup, not a sibling — the container is the card and
   the panel lives inside it — so a plain `.rhsc-cta-popup .wp-block-buttons`
   also matches everything in the open drawer. Measured on
   /data-tools/general-tool-name/: 3 headings and 4 button groups inside the
   panel, all of which would have been shifted 60px up (the transform plus the
   negative margin) whenever the drawer was open at these widths.

   476-781 rather than a single max-width: below 476 the card stacks and needs
   none of this, and 781 is the theme's own stacking breakpoint — the last width
   before core breaks a columns row apart — so the band ends where the layout
   this compensates for stops existing. An earlier pass cut it off at 735, which
   left the gap between 736 and 781 unhandled. */
@media (min-width: 476px) and (max-width: 781px) {

  .rhsc-cta-popup > :not(.is-cta-popup-wrap) .wp-block-heading,
  .rhsc-cta-popup > .wp-block-heading {
    margin-top: 20px;
  }

  .rhsc-cta-popup > :not(.is-cta-popup-wrap) .wp-block-buttons,
  .rhsc-cta-popup > .wp-block-buttons {
    justify-content: flex-end;
    transform: translateY(-40px);
    margin-top: -20px;
  }
}

/* The close control is a drawn icon, not a typed letter (QA row 114: "can we
   update the 'X' for the closing of the modal to an icon or something a bit
   easier on the eye").

   It was exactly that - a letter. The block is a text-style button whose label
   is a capital "X" at 40px in Instrument Sans, so it inherited the style's
   underline and rendered as an underlined X in the orange band rather than a
   close affordance.

   The icon font already carries the right glyph: .ic-btn-xmark is \e916. The
   label cannot simply be swapped for that class, because the control is
   authored in the page content and lives in the database on every member group
   page. Drawing the glyph in the ::after and taking the letter out of the
   colour flow does the same job from here, and picks up any page that gets one
   of these popups later.

   color: transparent rather than font-size: 0 - the label carries
   has-heading-2-font-size, and WordPress emits its preset font sizes with
   !important, so the size is not ours to win. Transparent takes the underline
   with it (text-decoration-color follows currentColor) and leaves the box the
   same size, which keeps the band's layout exactly where it was. */
.js-cta-close .wp-block-button__link {
  color: transparent !important;
  text-decoration: none !important;
  position: relative;
}

/* Sized off the button, not a number of my own (QA 114 retest, 17.09: "Icon is
   too small on desktop and mobile, please check design").

   It was 22px against a label that is 40px, so swapping the letter for the
   glyph shrank the control by nearly half. The design node the retest links
   (Figma 4455-11748) specifies the close as type at Size H2, line-height 120%,
   in a 25x48 box, coloured Neutral/90.

   Every one of those is already a theme token: heading-2 is 40px, and
   40 x 1.2 is the 48px box. So `font-size: inherit` IS the design value - the
   label carries has-heading-2-font-size, the pseudo-element inherits it, and
   the control tracks the label at every breakpoint instead of being pinned to
   one number that was only ever right at one width. That is what makes this
   fix mobile as well as desktop.

   Colour was the other half of it: neutral-inky-deep (#181423) is a shade
   darker than the Neutral/90 (#36323F) the design asks for. */
.js-cta-close .wp-block-button__link::after {
  content: '\e916';
  font-family: 'Icon-Font' !important;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.2;
  color: var(--wp--preset--color--neutral-90, #36323F);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}