/**
 * PDF Poster - layout fixes
 *
 * 1) Width collapse inside shrink-to-fit parents.
 *    The block root is rendered as `display:flex` with no width of its own and
 *    `.pdfp_wrapper{width:100%}` inside it. Inside a parent that sizes itself to
 *    its content (an Elementor flex container / widget, Bricks, a table cell, an
 *    inline-block, ...) the percentage cannot resolve, so the whole viewer
 *    collapses to a narrow strip and the PDF renders as a tiny thumbnail.
 *    Giving the block root an explicit width breaks that circular reference.
 *
 * 2) The stray dark bar drawn under every viewer.
 */

.wp-block-pdfp-pdf-poster {
  width: 100%;
  box-sizing: border-box;
}

/* Page builders that wrap the shortcode in a shrink-to-fit flex item. */
.elementor-shortcode > .wp-block-pdfp-pdf-poster,
.elementor-widget-container > .wp-block-pdfp-pdf-poster {
  width: 100%;
}

.e-con-inner > .elementor-widget:has(.wp-block-pdfp-pdf-poster),
.e-con > .elementor-widget:has(.wp-block-pdfp-pdf-poster),
.elementor-widget-container:has(> .elementor-shortcode > .wp-block-pdfp-pdf-poster),
.brxe-container > .brxe-shortcode:has(.wp-block-pdfp-pdf-poster) {
  width: 100%;
}

/* The viewer iframe had a hard-coded 10px dark border along the bottom. */
.wp-block-pdfp-pdf-poster .pdfp_wrapper iframe {
  border-bottom: 0;
}

/* view.css forces `height: calc(100vw + 120px)` on every iframe below 768px,
   which overrides the tablet/mobile height configured for the poster. */
@media screen and (max-width: 768px) {
  .wp-block-pdfp-pdf-poster .pdfp_wrapper iframe {
    height: 100%;
  }
}

/* Keep the flipbook/slider canvas from spilling out of its box. */
.wp-block-pdfp-pdf-poster .dflipWrapper,
.wp-block-pdfp-pdf-poster .dflip-container {
  max-width: 100%;
}

/* ------------------------------------------------------------------ *
 * Action buttons (download / fullscreen)
 *
 * Layout, colour and size are emitted by the per-block <style> that view.js
 * renders inside the block, fed by PDFP_Functions::pdfp_button_styles(). That
 * style element is the last one in the document and CSS optimisers re-inject a
 * copy of it later still, so anything set there cannot be reliably overridden
 * from a stylesheet -- which is why the sizing and the brand gradient are fixed
 * at that source rather than here.
 *
 * What is left below is the polish view.js does not emit at all, so it applies
 * cleanly: depth, hover feedback and a visible keyboard focus ring.
 *
 * To change the button colour, use the poster's Styles tab -> Button
 * Background. Any colour set there replaces the gradient.
 * ------------------------------------------------------------------ */

.wp-block-pdfp-pdf-poster .pdfp_wrapper .cta_wrapper a,
.wp-block-pdfp-pdf-poster .pdfp_wrapper .cta_wrapper button,
.wp-block-pdfp-pdf-poster .pdfp_wrapper .popup-btn {
  box-shadow: 0 4px 14px rgba(106, 120, 230, 0.25);
  transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wp-block-pdfp-pdf-poster .pdfp_wrapper .cta_wrapper a:hover,
.wp-block-pdfp-pdf-poster .pdfp_wrapper .cta_wrapper button:hover,
.wp-block-pdfp-pdf-poster .pdfp_wrapper .popup-btn:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 20px rgba(230, 68, 115, 0.3);
  transform: translateY(-1px);
}

.wp-block-pdfp-pdf-poster .pdfp_wrapper .cta_wrapper a:active,
.wp-block-pdfp-pdf-poster .pdfp_wrapper .cta_wrapper button:active,
.wp-block-pdfp-pdf-poster .pdfp_wrapper .popup-btn:active {
  filter: none;
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(106, 120, 230, 0.28);
}

.wp-block-pdfp-pdf-poster .pdfp_wrapper .cta_wrapper a:focus-visible,
.wp-block-pdfp-pdf-poster .pdfp_wrapper .cta_wrapper button:focus-visible,
.wp-block-pdfp-pdf-poster .pdfp_wrapper .popup-btn:focus-visible {
  outline: 2px solid #6a78e6;
  outline-offset: 2px;
}

/* view.css restacks the row into a stretched column below 576px, which fights
   the centred row above; !important is needed only for these two overrides. */
@media screen and (max-width: 576px) {
  .wp-block-pdfp-pdf-poster .pdfp_wrapper .cta_wrapper {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .wp-block-pdfp-pdf-poster .pdfp_wrapper .cta_wrapper a,
  .wp-block-pdfp-pdf-poster .pdfp_wrapper .cta_wrapper button {
    margin: 0 !important;
    padding: 11px 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-pdfp-pdf-poster .pdfp_wrapper .cta_wrapper a,
  .wp-block-pdfp-pdf-poster .pdfp_wrapper .cta_wrapper button,
  .wp-block-pdfp-pdf-poster .pdfp_wrapper .popup-btn {
    transition: none;
  }

  .wp-block-pdfp-pdf-poster .pdfp_wrapper .cta_wrapper a:hover,
  .wp-block-pdfp-pdf-poster .pdfp_wrapper .cta_wrapper button:hover {
    transform: none;
  }
}