/*--------------------------------------------------------------
Hello, this is the BuddyPress Activity Link Preview stylesheet.

@version 1.0.0

----------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1 - Activity Page (Main Posts)
2 - Activity Comments & Replies
3 - Responsive Design

--------------------------------------------------------------*/


/*--------------------------------------------------------------
0 - Color Tokens (light defaults + dark mode)
----------------------------------------------------------------
Previews are painted through the plugin's own --bpalp-* tokens, so
you can retheme every preview from this one block.

THEME BRIDGE - the fallback order is deliberate (same chain as Member
Reviews, bupr-front.css), do not shorten it:
  1. --bx-color-*             BuddyX.
  2. --reign-*                Reign 8+ (8.0.8 measured; Reign emits no --bx-color-*).
  3. --wp--preset--color--*   BuddyX Pro and any other theme.json theme (light only).
  4. a literal                Themes that expose none of the above. Every
                              text literal passes WCAG AA 4.5:1 on its surface.

Only tokens a tier really names get that tier. theme.json presets name no
button pair (BuddyX Pro primary + base = 3.46:1), so buttons read only the
BuddyX / Reign button tokens. "Muted" has no Reign or preset equivalent,
so it keeps its literal. The dark block never reads presets: a theme that
does not redefine them in dark would paint a light card.

Two rule sets assign the tokens:
  1. Base rule (below)              - light defaults, applied always.
  2. :root[data-bx-mode="dark"]     - BuddyX / Reign explicit dark mode.

Dark values still read --bx-color-* first, and BuddyX / Reign only flip
those vars under [data-bx-mode="dark"] (NOT under a bare body dark class),
so keying the dark scope off data-bx-mode is what actually produces a
dark card - a body.buddyx-dark-theme scope would resolve back to the
light --bx-color-* values and render light. Verified in-browser.

There is intentionally NO @media (prefers-color-scheme: dark) block.
Dark is opt-in via the theme's explicit data-bx-mode attribute only; the
plugin never maintains a duplicate OS-driven palette.
--------------------------------------------------------------*/

.activity-url-scrapper-container,
.activity-comment-url-scrapper-container,
.activity-link-preview-container,
.activity-comment-link-preview-container,
.comment-attachments {
    --bpalp-surface: var(--bx-color-bg-elevated, var(--reign-site-sections-bg-color, var(--wp--preset--color--base, #fff)));
    --bpalp-surface-alt: var(--bx-color-bg-muted, var(--reign-site-body-bg-color, #f9f9f9));
    --bpalp-border: var(--bx-color-border, var(--reign-site-border-color, #e5e5e5));
    --bpalp-border-soft: #ddd;
    --bpalp-title: var(--bx-color-h4, var(--bx-color-fg, var(--reign-site-headings-color, var(--wp--preset--color--contrast, #32373c))));
    --bpalp-text: var(--bx-color-fg, var(--reign-site-body-text-color, var(--wp--preset--color--contrast, #50575e)));
    --bpalp-text-strong: var(--bx-color-fg, var(--reign-site-body-text-color, var(--wp--preset--color--contrast, #3c434a)));
    --bpalp-muted: var(--bx-color-fg-muted, #646970);
    --bpalp-close: rgba(0, 0, 0, 0.4);
    --bpalp-btn-bg: var(--bx-color-button-bg, var(--reign-site-button-bg-color, #f0f0f1));
    --bpalp-btn-fg: var(--bx-color-button-fg, var(--reign-site-button-text-color, #2c3338));
    --bpalp-btn-border: var(--bx-color-button-border, var(--reign-site-button-bg-color, #c3c4c7));
    --bpalp-btn-bg-hover: var(--bx-color-button-bg-hover, var(--reign-site-button-bg-hover-color, #dcdcde));
    --bpalp-btn-fg-hover: var(--bx-color-button-fg-hover, var(--reign-site-button-text-hover-color, #1d2327));
}

:root[data-bx-mode="dark"] .activity-url-scrapper-container,
:root[data-bx-mode="dark"] .activity-comment-url-scrapper-container,
:root[data-bx-mode="dark"] .activity-link-preview-container,
:root[data-bx-mode="dark"] .activity-comment-link-preview-container,
:root[data-bx-mode="dark"] .comment-attachments {
    --bpalp-surface: var(--bx-color-bg-elevated, var(--reign-site-sections-bg-color, #1e2126));
    --bpalp-surface-alt: var(--bx-color-bg-muted, var(--reign-site-body-bg-color, #23262b));
    --bpalp-border: var(--bx-color-border, var(--reign-site-border-color, rgba(255, 255, 255, 0.16)));
    --bpalp-border-soft: rgba(255, 255, 255, 0.12);
    --bpalp-title: var(--bx-color-h4, var(--bx-color-fg, var(--reign-site-headings-color, #e9eaec)));
    --bpalp-text: var(--bx-color-fg, var(--reign-site-body-text-color, #b6bcc3));
    --bpalp-text-strong: var(--bx-color-fg, var(--reign-site-body-text-color, #cfd3d8));
    --bpalp-muted: var(--bx-color-fg-muted, #9aa0a6);
    --bpalp-close: rgba(255, 255, 255, 0.6);
    --bpalp-btn-bg: var(--bx-color-button-bg, var(--reign-site-button-bg-color, #2c3138));
    --bpalp-btn-fg: var(--bx-color-button-fg, var(--reign-site-button-text-color, #e9eaec));
    --bpalp-btn-border: var(--bx-color-button-border, var(--reign-site-button-bg-color, rgba(255, 255, 255, 0.24)));
    --bpalp-btn-bg-hover: var(--bx-color-button-bg-hover, var(--reign-site-button-bg-hover-color, #3a4048));
    --bpalp-btn-fg-hover: var(--bx-color-button-fg-hover, var(--reign-site-button-text-hover-color, #fff));
}

/*--------------------------------------------------------------
1 - Activity Page (Main Posts) - Original Styles
--------------------------------------------------------------*/

.activity-link-preview-container {
    margin: 15px 0 0;
    padding: 25px;
    line-height: 1.5;
    color: var(--bpalp-text, #50575e);
    background: var(--bpalp-surface, #fff);
    border: 1px solid var(--bpalp-border, #e5e5e5);
    border-radius: 3px !important;
    position: relative;
    overflow: auto;
    zoom: 1;
}

.activity-form .activity-link-preview-container {
    margin: 0 0 15px;
}

.activity-video-preview .activity-link-preview-container {
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    max-width: 640px;
}

.activity-link-preview-container div.fluid-width-video-wrapper {
    margin-top: 0;
    margin-bottom: 0;
}

.activity-link-preview-image {
    float: left;
    max-width: 160px;
    margin-inline-end: 20px;
    margin-bottom: 20px;
    position: relative;
}

.activity-link-preview-image img {
    width: 100%;
    height: auto;
    border: none;
}

.activity-url-scrapper-container #activity-url-scrapper-img-holder {
    margin-bottom: 30px;
}

.activity-video-preview {
    padding: 0;
}

.activity-link-preview-title {
    font-weight: 500;
    font-size: 22px;
    line-height: 1.3;
    color: var(--bpalp-title, #32373c);
}

.activity-list .activity-item .activity-content .activity-link-preview-title,
.activity-link-preview-title {
    margin: 0 0 15px;
}

.activity-link-preview-title a:hover {
    text-decoration: underline !important;
}

/* The 40px well exists to clear the composer's image nav. Saved previews in the
   feed have no nav, so scope it to the composer instead of dragging empty space
   under every posted card. */
.activity-link-preview-excerpt {
    padding: 0;
}

.activity-url-scrapper-container .activity-link-preview-excerpt,
.activity-comment-url-scrapper-container .activity-link-preview-excerpt {
    padding: 0 0 40px;
}

.activity-link-preview-excerpt p {
    font-size: 14px;
    font-weight: 400;
}

/* Themes pad every stream paragraph (BuddyX Pro: .buddypress-wrap .activity-inner p); the excerpt aligns with the card instead. */
.activity-inner .activity-link-preview-container .activity-link-preview-excerpt p {
    padding: 0;
}

.activity-link-preview-excerpt a.activity-link-preview-more:hover {
    text-decoration: underline !important;
}

/* The composer wraps the thumbnail and its nav in #activity-url-scrapper-img-holder.
   The holder carries the float and the positioning context so the prev/next controls
   sit directly under the image they change. Previously the nav was absolutely
   positioned but the holder was static, so the nav escaped to
   .activity-link-preview-container and centred itself across the whole card - on a
   wide screen that put the arrows several hundred pixels from the thumbnail. */
#activity-url-scrapper-img-holder {
    float: left;
    max-width: 160px;
    margin-inline-end: 20px;
    margin-bottom: 20px;
    position: relative;
}

#activity-url-scrapper-img-holder .activity-link-preview-image {
    float: none;
    max-width: 100%;
    margin-inline-end: 0;
    margin-bottom: 0;
}

.activity-url-thumb-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    text-align: center;
}

#buddypress .activity-url-thumb-nav button,
.activity-url-thumb-nav button {
    cursor: pointer;
    /* 40px minimum touch target (WCAG 2.2 SC 2.5.8 asks for 24px; the Wbcom
       responsive contract asks for 40px). Two of these plus the gap still fit
       inside the 160px thumbnail column. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 40px;
    padding: 3px 6px;
    margin: 0;
    height: auto;
    min-height: 40px;
    background: var(--bpalp-btn-bg, #f0f0f1);
    color: var(--bpalp-btn-fg, #2c3338);
    border: 1px solid var(--bpalp-btn-border, #c3c4c7);
    border-radius: 3px;
}

#buddypress .activity-url-thumb-nav button:hover,
#buddypress .activity-url-thumb-nav button:focus-visible,
.activity-url-thumb-nav button:hover,
.activity-url-thumb-nav button:focus-visible {
    background: var(--bpalp-btn-bg-hover, #dcdcde);
    color: var(--bpalp-btn-fg-hover, #1d2327);
    border-color: var(--bpalp-btn-border, #c3c4c7);
}

#activity-url-scrapper-img-count {
    font-size: 12px;
    color: var(--bpalp-muted, #646970);
    margin-top: 5px;
}

/* Targets BuddyBoss Platform's own composer markup, not ours - nothing in this
   plugin emits #activity-url-scrapper-url. Kept because it only costs a selector
   and removing it silently changes BuddyBoss-paired sites; do not assume it is
   dead without testing against an active BuddyBoss install. */
#activity-url-scrapper-url {
    color: var(--bpalp-text-strong, rgba(0, 0, 0, 0.6));
    font-size: 14px;
}

/* Dismiss sits top-right, the corner every other close control in the stream uses.
   It was previously pinned inset-inline-start, which put it top-left on desktop
   while a narrow-screen rule moved it right - two different corners for the same
   control. The 40px box is the touch-target minimum; the icon stays 20px. */
#activity-close-link-suggestion {
    border: 0;
    color: var(--bpalp-close, rgba(0, 0, 0, 0.4));
    font-size: 16px;
    position: absolute;
    inset-inline-end: 4px;
    inset-inline-start: auto;
    top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    text-decoration: none;
}

#activity-close-link-suggestion .dashicons.dashicons-no-alt {
    font-size: 20px;
}

/* BuddyBoss Platform's own composer wrapper - it renders the oEmbed card edge to
   edge, so the dismiss needs a filled chip to stay legible over it. Same corner as
   the default case above. */
.activity-post-form-link-wp-embed #activity-close-link-suggestion {
    top: 8px;
    inset-inline-end: 8px;
    inset-inline-start: auto;
    background: var(--bpalp-surface, #fff);
    z-index: 11;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
}

/* Overlays the thumbnail, so it stays smaller than the 40px card control - 32px
   still clears the WCAG 2.2 SC 2.5.8 minimum of 24px without covering a quarter of
   a 160px image. */
#activity-link-preview-close-image {
    border: 0;
    /* Sits on top of an arbitrary remote image, so the glyph cannot rely on the
       image behind it. A fixed scrim keeps it legible over a white screenshot as
       well as a dark photo - white-on-transparent disappeared on light images. */
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 50%;
    font-size: 16px;
    inset-inline-start: 3px;
    position: absolute;
    top: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    text-decoration: none;
}

#activity-link-preview-close-image:hover,
#activity-link-preview-close-image:focus {
    color: #fff;
    background: rgba(0, 0, 0, 0.75);
}

#activity-link-preview-close-image .dashicons.dashicons-no-alt {
    font-size: 20px;
}

#activity-close-link-suggestion:focus-visible,
#activity-link-preview-close-image:focus-visible {
    outline: 2px solid var(--bpalp-title, #1d2327);
    outline-offset: 2px;
    border-radius: 2px;
}

.activity-list .activity-item .activity-content .activity-inner .fb-post {
    margin: 0 15px 15px;
}

/*--------------------------------------------------------------
2 - Activity Comments & Replies (New Styles)
--------------------------------------------------------------*/

/* Comment attachments container */
.comment-attachments {
    margin: 10px 0;
    padding: 0;
}

/* Comment-specific link preview container */
.activity-comment-link-preview-container {
    margin: 10px 0;
    padding: 15px;
    line-height: 1.4;
    color: var(--bpalp-text-strong, #666);
    background: var(--bpalp-surface-alt, #f9f9f9);
    border: 1px solid var(--bpalp-border-soft, #ddd);
    border-radius: 3px;
    position: relative;
    overflow: auto;
    zoom: 1;
    font-size: 13px;
}

/* Smaller sizing for comment previews */
.activity-comment-link-preview-container .activity-link-preview-title {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    color: var(--bpalp-title, #32373c);
    margin: 0 0 10px;
}

.activity-comment-link-preview-container .activity-link-preview-image {
    float: left;
    max-width: 120px;
    margin-inline-end: 15px;
    margin-bottom: 15px;
    position: relative;
}

.activity-comment-link-preview-container .activity-link-preview-excerpt {
    padding: 0 0 25px;
}

.activity-comment-link-preview-container .activity-link-preview-excerpt p {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}

/* Comment-specific close buttons */
[id^="activity-close-comment-link-suggestion"] {
    border: 0;
    color: var(--bpalp-close, rgba(0, 0, 0, 0.4));
    font-size: 14px;
    position: absolute;
    inset-inline-end: 5px;
    top: 5px;
    text-decoration: none;
    z-index: 10;
}

[id^="activity-close-comment-link-suggestion"] .dashicons.dashicons-no-alt {
    font-size: 16px;
}

[id^="activity-comment-link-preview-close-image"] {
    border: 0;
    color: #fff;
    font-size: 14px;
    inset-inline-start: 3px;
    position: absolute;
    top: 3px;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 18px;
}

[id^="activity-comment-link-preview-close-image"] .dashicons.dashicons-no-alt {
    font-size: 14px;
    line-height: 18px;
}

/* Comment navigation buttons */
.activity-comment-link-preview-container .activity-url-thumb-nav button {
    cursor: pointer;
    width: auto;
    padding: 2px 4px;
    margin: 0 2px;
    height: auto;
    min-height: 8px;
    font-size: 12px;
}

.activity-comment-link-preview-container [id^="activity-comment-url-scrapper-img-count"] {
    font-size: 11px;
    color: var(--bpalp-muted, #646970);
    margin-top: 3px;
}

/* Comment scrapper container */
.activity-comment-url-scrapper-container {
    margin: 5px 0;
}

/* Form styling for comment forms */
.ac-form .comment-attachments {
    background: var(--bpalp-surface, #fff);
    border: 1px solid var(--bpalp-border, #e5e5e5);
    border-radius: 3px;
    padding: 10px;
    margin-top: 10px;
}

/* Comment form link preview in reply area */
.ac-form .activity-comment-link-preview-container {
    background: var(--bpalp-surface, #fff);
    border: 1px solid var(--bpalp-border, #e5e5e5);
    margin: 0;
    padding: 15px;
}

/*--------------------------------------------------------------
3 - Responsive Design
--------------------------------------------------------------*/

@media screen and (max-width: 32em) {
    /* Main activity previews */
    #activity-close-link-suggestion {
        color: var(--bpalp-title, #000);
        inset-inline-end: 5px;
        top: 5px;
        inset-inline-start: auto;
    }

    .activity-link-preview-container {
        padding: 15px;
        margin: 10px 0;
    }

    .activity-link-preview-image {
        max-width: 100px;
        margin-inline-end: 10px;
        margin-bottom: 10px;
    }

    .activity-link-preview-title {
        font-size: 18px;
    }

    /* Comment previews */
    .activity-comment-link-preview-container {
        padding: 10px;
        margin: 8px 0;
    }

    .activity-comment-link-preview-container .activity-link-preview-image {
        max-width: 80px;
        margin-inline-end: 10px;
        margin-bottom: 10px;
    }

    .activity-comment-link-preview-container .activity-link-preview-title {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .activity-comment-link-preview-container .activity-link-preview-excerpt p {
        font-size: 12px;
    }

    [id^="activity-close-comment-link-suggestion"] {
        inset-inline-end: 3px;
        top: 3px;
        font-size: 12px;
    }

    [id^="activity-close-comment-link-suggestion"] .dashicons.dashicons-no-alt {
        font-size: 14px;
    }
}

@media screen and (max-width: 24em) {
    /* Stack images on very small screens. In the composer the float and the width
       cap sit on the holder (it also carries the image nav), so it has to unstack
       alongside the plain image wrapper used by saved previews. */
    #activity-url-scrapper-img-holder,
    .activity-link-preview-image,
    .activity-comment-link-preview-container .activity-link-preview-image {
        float: none;
        max-width: 100%;
        margin-inline-end: 0;
        margin-bottom: 10px;
        text-align: center;
    }

    /* Stacked, the wrapper spans the card while the image centres inside it, which
       would strand the image's own close control off to the left. Shrink the
       wrapper to the image so the control stays on the thumbnail corner. */
    #activity-url-scrapper-img-holder .activity-link-preview-image {
        display: inline-block;
        max-width: 100%;
    }

    .activity-comment-link-preview-container {
        font-size: 12px;
    }
}

/* Social media embeds in comments. Tweets are injected by widgets.js as a
   .twitter-tweet-rendered iframe, not a .twitter-post element, so only .fb-post
   needs a rule here. */
.activity-comment-link-preview-container .fb-post {
    margin: 0;
    max-width: 100%;
}

/* Focus states for accessibility (keyboard-only ring, token-driven) */
[id^="activity-close-comment-link-suggestion"]:focus-visible,
[id^="activity-comment-link-preview-close-image"]:focus-visible {
    outline: 2px solid var(--bpalp-title, #1d2327);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Hover effects */
[id^="activity-close-comment-link-suggestion"]:hover {
    color: #d33;
}

[id^="activity-comment-link-preview-close-image"]:hover {
    background: rgba(0, 0, 0, 0.8);
}
/*--------------------------------------------------------------
4 - Preview error notice (parse endpoint rejected the URL)
--------------------------------------------------------------*/

.bpalp-preview-error {
    --bpalp-error-fg: #8a1f2d;
    --bpalp-error-bg: #fdeaea;
    --bpalp-error-border: #f0b8b8;
    margin: 10px 0 0;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--bpalp-error-fg);
    background: var(--bpalp-error-bg);
    border: 1px solid var(--bpalp-error-border);
}

:root[data-bx-mode="dark"] .bpalp-preview-error {
    --bpalp-error-fg: #f3b6bd;
    --bpalp-error-bg: rgba(200, 60, 75, 0.16);
    --bpalp-error-border: rgba(220, 95, 110, 0.45);
}

/*--------------------------------------------------------------
5 - RTL
----------------------------------------------------------------
Spacing and single-side offsets use logical properties
(margin-inline-*, inset-inline-*) so they mirror automatically.
The preview image float is the one thing logical values cannot flip
with the browser support this plugin targets, so the side is flipped
explicitly for RTL. Gated above the 24em stacking breakpoint so it
never fights the small-screen "float: none" stack rule.
--------------------------------------------------------------*/

@media screen and (min-width: 24.0625em) {
    [dir="rtl"] .activity-link-preview-image,
    [dir="rtl"] .activity-comment-link-preview-container .activity-link-preview-image {
        float: right;
    }
}