/* ═══════════════════════════════════════════════════════════════════════
   Recommended PDFs widget — three horizontal scroll-snap carousels
   ═══════════════════════════════════════════════════════════════════════ */

.pdftopost-recommended-widget {
    width: 100% !important;
    max-width: 100% !important;
    display: block;
    /* Vertical rhythm between the three sections */
    --pdftopost-rec-gap: 32px;
}

.pdftopost-recommended-widget .pdftopost-recommended-section + .pdftopost-recommended-section {
    margin-top: var(--pdftopost-rec-gap);
}

/* ── Section header ────────────────────────────────────────────────── */
.pdftopost-recommended-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 14px;
    padding: 0 4px;
}

.pdftopost-recommended-heading {
    margin: 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1f1d3d !important;
    letter-spacing: -0.01em;
    line-height: 1.2 !important;
}

@media (max-width: 768px) {
    .pdftopost-recommended-heading {
        font-size: 15px !important;
    }
}

/* ── Rail wrapper + overlay arrows ─────────────────────────────────── */
.pdftopost-recommended-rail-wrap {
    position: relative;
    /* The arrows sit just outside the rail's content edge; allow them to
       overflow the wrap so they overlap the row's first / last card by a
       small amount for a "peek-around" affordance. */
}

.pdftopost-recommended-rail {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Pad with the same edge inset as the header so the first card aligns
       with the heading. Right padding gives the last card breathing room
       so users can over-scroll a tiny bit to "see" they've reached the end. */
    padding: 4px 24px 12px 4px;
    margin: -4px 0;
    /* Hide scrollbar UI on the rail itself — the arrows + native swipe
       are the affordance. Users can still drag the thumb on macOS if they
       force it on, but visually the rail is clean. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.pdftopost-recommended-rail::-webkit-scrollbar {
    height: 0 !important;
    width: 0 !important;
    display: none !important;
}

.pdftopost-recommended-rail:focus-visible {
    outline: 2px solid #312e56;
    outline-offset: 4px;
    border-radius: 6px;
}

/* ── Cards inside the rail — reuse the .pdftopost-card markup that the
   Related drawer already styles. We just size + snap them here. ───── */
.pdftopost-recommended-rail .pdftopost-card,
.pdftopost-recommended-rail .pdftopost-account-card-wrap {
    /* Card width: smaller cards → more visible per row. */
    flex: 0 0 165px !important;
    width: 165px !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

@media (max-width: 1024px) {
    .pdftopost-recommended-rail .pdftopost-card,
    .pdftopost-recommended-rail .pdftopost-account-card-wrap {
        flex: 0 0 150px !important;
        width: 150px !important;
    }
}

/* Mobile: ~2 cards visible — the partial 3rd card hints scrollability. */
@media (max-width: 600px) {
    .pdftopost-recommended-rail .pdftopost-card,
    .pdftopost-recommended-rail .pdftopost-account-card-wrap {
        flex: 0 0 130px !important;
        width: 130px !important;
    }
    .pdftopost-recommended-rail {
        gap: 14px;
        padding-right: 16px;
    }
}

/* ── Prev/Next arrow buttons (desktop only) ──────────────────────────
   Arrows + edge shadows derive their visibility from .has-prev / .has-next
   classes that the JS sets on .pdftopost-recommended-rail-wrap. The class
   is added only when the rail can actually scroll further in that direction,
   so the controls fade in together with the matching edge shadow. */

/* Theme / Elementor button reset.  We over-specify with the wrap class
   AND !important on every visual property so Elementor's default
   button styling (which can render as a bright theme accent on some
   sites) can't bleed through. The arrow is brand-navy on white,
   period. */
.pdftopost-recommended-rail-wrap button.pdftopost-recommended-arrow,
.pdftopost-recommended-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #312e56 !important;
    border: 1px solid #e0e3f5 !important;
    border-radius: 50% !important;
    box-shadow: 0 6px 16px -4px rgba(49, 46, 86, 0.18), 0 1px 2px rgba(49, 46, 86, 0.10) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    /* Hidden by default — only shown when the wrap signals scrollability
       in this direction. opacity + pointer-events lets us animate the
       reveal smoothly instead of an abrupt display:none flip.
       !important here because some themes target generic <button>
       opacity/pointer-events with !important; without matching strength
       on our show rules below, the arrows could stay stuck hidden. */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
        opacity 0.22s ease,
        visibility 0s linear 0.22s,
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

.pdftopost-recommended-rail-wrap button.pdftopost-recommended-arrow svg,
.pdftopost-recommended-arrow svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
    fill: none !important;
    display: block !important;
}

/* Show rules — !important on every visibility property so they win
   against the base + any third-party !important opacity rules. The
   visibility:visible needs zero transition delay so the fade-IN is
   instant from the visual point of view (the opacity animation is
   what the user actually sees). */
.pdftopost-recommended-rail-wrap.has-prev .pdftopost-recommended-arrow-prev,
.pdftopost-recommended-rail-wrap.has-next .pdftopost-recommended-arrow-next {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition:
        opacity 0.22s ease,
        visibility 0s linear 0s,
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

.pdftopost-recommended-rail-wrap button.pdftopost-recommended-arrow:hover,
.pdftopost-recommended-arrow:hover {
    background: #1f1d3d !important;
    background-color: #1f1d3d !important;
    background-image: none !important;
    color: #ffffff !important;
    /* Keep the same border thickness on hover — switching to
       border: none caused a 1px layout shift that confused the
       scroll handler's atStart computation. Same width, just a
       transparent colour so the visual stays clean. */
    border: 1px solid transparent !important;
    transform: translateY(-50%) scale(1.08) !important;
    box-shadow: 0 10px 24px -6px rgba(49, 46, 86, 0.55) !important;
}

.pdftopost-recommended-rail-wrap button.pdftopost-recommended-arrow:active,
.pdftopost-recommended-arrow:active {
    transform: translateY(-50%) scale(0.96) !important;
}

.pdftopost-recommended-rail-wrap button.pdftopost-recommended-arrow:focus,
.pdftopost-recommended-rail-wrap button.pdftopost-recommended-arrow:focus-visible,
.pdftopost-recommended-arrow:focus,
.pdftopost-recommended-arrow:focus-visible {
    outline: 3px solid rgba(49, 46, 86, 0.35) !important;
    outline-offset: 2px !important;
}

.pdftopost-recommended-arrow-prev { left: -8px; }
.pdftopost-recommended-arrow-next { right: -8px; }

/* Native [hidden] would force display:none which fights the fade. We
   override it so the JS can stop using the attribute entirely. */
.pdftopost-recommended-arrow[hidden] {
    display: inline-flex;
}

/* Touch devices — hide arrows, rely on native swipe. */
@media (hover: none), (pointer: coarse) {
    .pdftopost-recommended-arrow {
        display: none !important;
    }
}

/* ── Edge shadows ──
   Pair with the arrows: ::before (left) fades in when .has-prev is set,
   ::after (right) fades in when .has-next is set. They sit on top of the
   first/last cards in the rail so users perceive content "going under"
   the edge — a strong visual cue that more content exists beyond it. */
.pdftopost-recommended-rail-wrap::before,
.pdftopost-recommended-rail-wrap::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 12px !important;
    width: 56px !important;
    pointer-events: none !important;
    z-index: 2 !important;
    opacity: 0 !important;
    transition: opacity 0.22s ease !important;
}

.pdftopost-recommended-rail-wrap::before {
    left: 0 !important;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.85) 40%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
}

.pdftopost-recommended-rail-wrap::after {
    right: 0 !important;
    background: linear-gradient(
        to left,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.85) 40%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
}

/* Show — !important so they cannot be overridden by themes that
   target ::before/::after on adjacent divs. */
.pdftopost-recommended-rail-wrap.has-prev::before { opacity: 1 !important; }
.pdftopost-recommended-rail-wrap.has-next::after  { opacity: 1 !important; }

/* ── Compact spacing tweaks inside the card so it lives well at 200px ─ */
.pdftopost-recommended-rail .pdftopost-card .pdftopost-card-title {
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 500;
    color: #19172b;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.pdftopost-recommended-rail .pdftopost-card .pdftopost-card-meta {
    font-size: 11px !important;
}

/* ── Card root — explicit visual reset so theme/Elementor button + card
   styles can't override the base look the recommended widget needs. ── */
.pdftopost-rec-card.pdftopost-card {
    background: #ffffff !important;            /* color-white */
    border-radius: 12px !important;            /* radius-12 */
    box-shadow: inset 0 0 0 1px #e0e3f5 !important; /* navy-300 hairline outline */
    color: #73728b !important;                  /* navy-600 default text */
    align-content: flex-start !important;
    padding: 12px !important;
    border: none !important;
}

/* ── Thumb "paper stack" ──
   The recommended-card thumb is wrapped in .pdftopost-card-thumb-stack so
   the two shadow strips can sit BELOW the thumb element rather than
   inside it (the parent .pdftopost-card-thumb has overflow:hidden, so
   inside-children get clipped and there's no visible peek). Each shadow
   layer is a 6px tall pseudo-sheet inset slightly more than the one above,
   producing the stacked-paper effect at the bottom edge. */
.pdftopost-rec-card .pdftopost-card-thumb-stack {
    position: relative;
    /* Reserve room below the thumb for both shadow strips to peek out
       without overlapping the card body underneath. */
    padding-bottom: 6px;
}

.pdftopost-rec-card .pdftopost-card-thumb {
    position: relative;
    /* z-index intentionally NOT set here — leaving it at auto so the
       absolute-positioned .pdftopost-card-link (z-index 4 below) sits
       above the thumb and the whole thumb area becomes clickable. The
       stacked shadows are kept behind via explicit lower z-indexes. */
    /* 3:4 portrait — matches the Related carousel's taller image box so
       the cover takes more vertical space. The thumb contains either the
       bg-image div (when there's a featured image) or the fallback text. */
    aspect-ratio: 3 / 4;
    background: #f9faff !important;       /* navy-100 — soft tint behind image */
    background-color: #f9faff !important;
    border: 1px solid #b9bdd6 !important; /* navy-400 — clearer outline */
    border-radius: 10px;
    overflow: hidden;
}

/* Background-image-driven thumb (replaces <img> for cleaner cover-fit
   control + so the gradient fallback can sit beneath if the bg fails). */
.pdftopost-rec-card .pdftopost-card-thumb-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Two stacked sheets behind the thumb. Each peeks ~3-6px lower than
   the previous, narrower by 6px on each side so the silhouette tapers
   like a real paper stack rather than a uniform block. */
.pdftopost-rec-card .pdftopost-card-shadow1,
.pdftopost-rec-card .pdftopost-card-shadow2 {
    position: absolute;
    left: 6px;
    right: 6px;
    height: 6px;
    background: #ffffff;
    border-radius: 0 0 8px 8px;
    box-shadow: inset 0 0 0 1px #e0e3f5; /* navy-300 outline matches the thumb */
    pointer-events: none;
}

.pdftopost-rec-card .pdftopost-card-shadow1 {
    bottom: 3px;
    z-index: 0;
}

.pdftopost-rec-card .pdftopost-card-shadow2 {
    left: 12px;
    right: 12px;
    bottom: 0;
    z-index: 0;
    opacity: 0.75;
}

/* ── Stacking-context fix: card link must be ABOVE the thumb so the
   image area is clickable, and the save button must be above the link
   so its own click handler wins over the navigation. ── */
.pdftopost-rec-card .pdftopost-card-link {
    z-index: 4 !important;
}
.pdftopost-rec-card .pdftopost-card-save {
    z-index: 5 !important;
}

/* ── Format badge in the thumbnail's bottom-left corner ──
   Pure brand-navy pill with white type. Sits over the thumb image; uses
   z-index 1 so it stays above the image but below the card-link overlay. */

.pdftopost-rec-card .pdftopost-card-format {
    position: absolute;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    background: #312e56 !important;       /* navy-700 */
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em;
    line-height: 1;
    /* Only the top-right corner is rounded so the badge reads as a
       tab attached to the thumb's bottom-left corner — top-left,
       bottom-left, bottom-right all flush with the thumb's edge. */
    border-radius: 0 8px 0 0 !important;
    text-transform: uppercase;
    pointer-events: none;
    box-shadow: 1px -1px 2px rgba(0, 0, 0, 0.10);
}

/* ── Footer meta layout: all on ONE line ──
   "by <author> · <pages> · <views>" sits horizontally with the author as
   the shrinkable middle segment. If the author name is too long it
   truncates with an ellipsis so the bullet+stats stay visible. */
.pdftopost-rec-card .pdftopost-card-meta {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    overflow: hidden;
    line-height: 1.3;
}

/* The flex-row breaker added by earlier CSS isn't needed in this layout;
   collapse it to zero so the markup stays the same. */
.pdftopost-rec-card .pdftopost-card-meta-break {
    display: none !important;
}

.pdftopost-rec-card .pdftopost-card-by {
    flex: 0 0 auto;
    font-size: 11px;
    color: #73728b;             /* navy-600 */
}

/* Author shrinks first when the row is tight, then ellipsizes. */
.pdftopost-rec-card .pdftopost-card-author {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: #312e56;             /* navy-700 link colour */
    font-weight: 500;
}

/* Stats stay at natural width — the bullet + "N pages" + "X views"
   should never wrap or shrink. They're the most useful glanceable
   info on the card. */
.pdftopost-rec-card .pdftopost-card-stats {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #73728b;             /* navy-600 */
    font-size: 11px;
    white-space: nowrap;
}

.pdftopost-rec-card .pdftopost-card-stats .pdftopost-card-bullet {
    flex: 0 0 auto;
}

.pdftopost-rec-card .pdftopost-card-views {
    color: #73728b;
}

/* ── Save (bookmark) button — outlined-pill style ──
   Bigger 36×36 hit target, white background, navy-300 hairline by default.
   Hovers go to 2px navy-400 outline (keeps the size constant via inset
   box-shadow as the border so the icon doesn't shift). The saved state
   fills navy with a white icon. */
.pdftopost-rec-card .pdftopost-card-save {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    /* Inset shadow stands in for the border so width changes (1→2px on
       hover) don't reflow the icon's centre position. */
    box-shadow: inset 0 0 0 1px #e0e3f5 !important;
    color: #19172b !important;                /* navy-800 — icon stroke */
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: box-shadow 0.15s ease-in, background-color 0.15s ease-in !important;
}

.pdftopost-rec-card .pdftopost-card-save svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    fill: none !important;
    display: block !important;
}

.pdftopost-rec-card .pdftopost-card-save:hover {
    background: #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: inset 0 0 0 2px #b9bdd6 !important; /* navy-400, 2px */
    color: #312e56 !important;
}

.pdftopost-rec-card .pdftopost-card-save:active {
    background: #f2f4fe !important;                  /* navy-200 */
    background-color: #f2f4fe !important;
    box-shadow: inset 0 0 0 2px #b9bdd6 !important;
}

.pdftopost-rec-card .pdftopost-card-save:focus-visible {
    outline: 3px solid rgba(49, 46, 86, 0.30) !important;
    outline-offset: 2px !important;
}

/* Saved state — solid navy fill, white icon, no border showing */
.pdftopost-rec-card .pdftopost-card-save.is-saved {
    background: #312e56 !important;
    background-color: #312e56 !important;
    box-shadow: inset 0 0 0 1px #312e56 !important;
    color: #ffffff !important;
}

.pdftopost-rec-card .pdftopost-card-save.is-saved svg {
    fill: currentColor !important;
    stroke: currentColor !important;
}

.pdftopost-rec-card .pdftopost-card-save.is-saved:hover {
    background: #1f1d3d !important;
    background-color: #1f1d3d !important;
    box-shadow: inset 0 0 0 1px #1f1d3d !important;
}

/* Hover lift — uses the same navy-tinted shadow language as the rest of
   the brand UI, not the generic dark shadow the baseline card uses. */
.pdftopost-rec-card:hover {
    box-shadow:
        inset 0 0 0 1px #b9bdd6,
        0 10px 24px -8px rgba(49, 46, 86, 0.18) !important;
    transform: translateY(-2px);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.pdftopost-rec-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}