/* =============================================================================
   Foxco Social Media Product  v1.17.0
   -----------------------------------------------------------------------------
   LAYOUT CONTRACT (read this before touching anything below)

   Elementor writes its Style-tab CSS as:
       .elementor-{page} .elementor-element.elementor-element-{id} .foxco-smp { ... !important }
   That is specificity (0,3,0) and Desktop values are NOT wrapped in a media
   query -- Desktop CSS applies at every viewport width.

   This stylesheet can only ever reach (0,1,0) -- `.foxco-smp`. Media queries
   add zero specificity. So a rule in here, even with !important, can NEVER
   beat an Elementor Style-tab rule, at any screen size. Restricting a
   control to `devices => [desktop, tablet]` does not help either: it only
   removes the mobile INPUT, it does not stop the desktop OUTPUT from
   applying on mobile.

   Therefore: every Style control that participates in layout writes a
   CUSTOM PROPERTY, never the property itself. This file decides how those
   properties are consumed per breakpoint. That makes the mobile stack
   non-negotiable (mobile never reads the desktop column var at all) while
   still letting Elementor's normal responsive cascade work for spacing.

   NO !important anywhere in this file. It isn't needed once the two layers
   stop writing the same property, and it was actively hiding the bug.
============================================================================= */

.foxco-smp {
    /* Defaults. Elementor overrides these by redefining the var, not by
       redefining the property that consumes it. */
    --smp-mockup-col: 320px;      /* desktop/tablet mockup COLUMN width */
    --smp-mockup-mobile-w: 220px; /* mobile mockup BOX width (centered)  */
    --smp-gap-default: 48px;
    --smp-pad-default: 0px;
    --smp-img-min-h: 200px;

    display: grid;
    /* minmax(0,1fr) not 1fr: a bare 1fr track has an automatic minimum of
       min-content, so one long unbreakable word can push the track wider
       than the viewport and clip off-screen. */
    grid-template-columns: var(--smp-mockup-col) minmax(0, 1fr);
    gap: var(--smp-gap, var(--smp-gap-default));
    align-items: center;
    max-width: var(--smp-max-w, 980px);
    padding: var(--smp-pad, var(--smp-pad-default));
    margin: 0 auto;
    font-family: var(--smp-body-font, 'Inter'), -apple-system, BlinkMacSystemFont, sans-serif;
    /* Anchors .foxco-smp__lead-time to the whole container. */
    position: relative;
}

.foxco-smp__mockup {
    position: relative;
    min-width: 0;
}

.foxco-smp__img {
    width: 100%;
    min-height: var(--smp-img-min-h);
    background-color: #1a1a2e;
    border-radius: inherit;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.foxco-smp__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.foxco-smp__img-placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-align: center;
    padding: 0 16px;
}

.foxco-smp__content { min-width: 0; }

.foxco-smp__headline {
    font-family: var(--smp-heading-font, 'Sora'), 'Inter', sans-serif;
    margin: 0 0 14px;
    line-height: 1.1;
    /* Safety net: no headline can clip past the viewport edge again,
       whatever a parent container does to the available width. */
    overflow-wrap: break-word;
}

.foxco-smp__desc {
    margin: 0 0 24px;
    line-height: 1.6;
    max-width: 440px;
    overflow-wrap: break-word;
}

.foxco-smp__callouts {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--smp-callout-gap, 12px);
}

.foxco-smp__callouts li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    overflow-wrap: break-word;
}

.foxco-smp__cta {
    display: inline-block;
    text-decoration: none;
    font-weight: 700;
}

/* -----------------------------------------------------------------------------
   MOBILE -- 767px to match Elementor's own mobile breakpoint exactly.
   (Was 720px, which left a 721-767px dead zone where Elementor applied its
   mobile values while this file was still in desktop layout.)
----------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .foxco-smp {
        /* Deliberately does NOT reference --smp-mockup-col. That is the
           fix: the desktop column width is not part of the mobile layout
           calculation at all, so it cannot leak in no matter what
           Elementor writes into that variable. */
        grid-template-columns: minmax(0, 1fr);
        --smp-gap-default: 28px;
        --smp-pad-default: 0px;
        text-align: center;
    }

    .foxco-smp__mockup {
        width: var(--smp-mockup-mobile-w);
        max-width: 100%;
        margin: 0 auto;
    }

    /* Callout list centred as a block, rows still left-aligned -- matches
       the approved mockup. */
    .foxco-smp__callouts {
        width: -moz-max-content;
        width: max-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
    .foxco-smp__callouts li { justify-content: flex-start; }

    .foxco-smp__desc { margin-left: auto; margin-right: auto; }
}

/* =============================================================================
   PRESET: FEED POST -- native Instagram/TikTok post look
============================================================================= */
.foxco-smp--feed-post .foxco-smp__mockup {
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #e8e8ec;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
}
.foxco-smp--feed-post .foxco-smp__post-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    text-align: left;
}
.foxco-smp--feed-post .foxco-smp__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--smp-accent, #df6737), var(--smp-accent-2, #f4a261));
    flex-shrink: 0;
}
.foxco-smp--feed-post .foxco-smp__post-name { font-weight: 700; font-size: 13px; color: #14141f; }
.foxco-smp--feed-post .foxco-smp__post-tag { font-size: 11px; color: #6b6b7d; }
.foxco-smp--feed-post .foxco-smp__img { aspect-ratio: 1 / 1; }
.foxco-smp--feed-post .foxco-smp__post-actions {
    display: flex;
    gap: 16px;
    padding: 12px 16px;
    font-size: 20px;
    color: #14141f;
}
.foxco-smp--feed-post .foxco-smp__post-caption {
    padding: 0 16px 16px;
    font-size: 12.5px;
    color: #14141f;
    line-height: 1.5;
    text-align: left;
}
.foxco-smp--feed-post .foxco-smp__eyebrow {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--smp-accent, #df6737);
    margin: 0 0 10px;
}
.foxco-smp--feed-post .foxco-smp__headline { font-weight: 800; font-size: clamp(26px, 4vw, 38px); color: #14141f; }
.foxco-smp--feed-post .foxco-smp__desc { color: #6b6b7d; font-size: 15px; }
.foxco-smp--feed-post .foxco-smp__callouts li { font-size: 14.5px; color: #14141f; font-weight: 500; }
.foxco-smp--feed-post .foxco-smp__callout-mark {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--smp-accent, #df6737);
    color: var(--smp-cta-text, #14141f);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
}
.foxco-smp--feed-post .foxco-smp__cta {
    padding: 14px 30px;
    background: var(--smp-cta-bg, #df6737);
    color: var(--smp-cta-text, #14141f);
    border-radius: 999px;
    font-size: 14.5px;
    font-family: var(--smp-heading-font, 'Sora'), 'Inter', sans-serif;
}
/* Feed Post + FixWP: this mark's background is --smp-accent and its text
   is --smp-cta-text -- two different tokens for every other palette
   (e.g. orange bg / dark-navy text), but FixWP's guide-mandated design
   makes both of them the same ink navy (#172a45), since accent IS the
   button text color there too. Same navy on navy is a 1:1 ratio --
   completely invisible, not just low-contrast. White reads clearly
   against the navy background and matches how every other FixWP
   accent-colored circle in this widget already uses white (the badge,
   the CTA hover state). */
.foxco-smp--feed-post.foxco-smp--palette-fixwp .foxco-smp__callout-mark {
    color: #ffffff;
}

/* =============================================================================
   PRESET: SIGNAL -- matches the site's approved dark/glow aesthetic
============================================================================= */
.foxco-smp--signal {
    background: var(--smp-bg, #14141f);
    border-radius: 16px;
    /* Preset padding is a DEFAULT now, not a literal -- so the Style-tab
       Padding control still wins when set, and this applies when it isn't. */
    --smp-pad-default: 48px;
}
.foxco-smp--signal .foxco-smp__mockup {
    background: var(--smp-bg-2, #1e1e2e);
    border-radius: 24px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.foxco-smp--signal .foxco-smp__img {
    aspect-ratio: 9 / 16;
    border-radius: 16px;
    box-shadow: 0 0 40px color-mix(in srgb, var(--smp-accent, #df6737) 30%, transparent);
}
.foxco-smp--signal .foxco-smp__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--smp-text-muted, #8f8ea3);
    margin: 0 0 16px;
}
.foxco-smp--signal .foxco-smp__eyebrow-bar { width: 24px; height: 2px; background: var(--smp-accent, #df6737); flex-shrink: 0; }
.foxco-smp--signal .foxco-smp__headline {
    font-weight: 800;
    font-size: clamp(26px, 4vw, 40px);
    color: var(--smp-text, #f5f4f2);
    letter-spacing: -0.01em;
    text-shadow: 0 0 18px color-mix(in srgb, var(--smp-accent, #df6737) 30%, transparent),
                 0 0 46px color-mix(in srgb, var(--smp-accent, #df6737) 12%, transparent);
}
.foxco-smp--signal .foxco-smp__desc { color: var(--smp-text-muted, #8f8ea3); font-size: 15px; }
.foxco-smp--signal .foxco-smp__callouts li { font-size: 14.5px; color: var(--smp-text, #f5f4f2); }
.foxco-smp--signal .foxco-smp__callout-mark { flex-shrink: 0; color: var(--smp-accent, #df6737); font-weight: 700; }
.foxco-smp--signal .foxco-smp__cta {
    padding: 14px 30px;
    border: 1.5px solid var(--smp-accent, #df6737);
    color: var(--smp-accent, #df6737);
    border-radius: 999px;
    font-size: 14.5px;
    font-family: var(--smp-heading-font, 'Sora'), 'Inter', sans-serif;
    font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.foxco-smp--signal .foxco-smp__cta:hover {
    background: var(--smp-accent, #df6737);
    color: var(--smp-bg, #14141f);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--smp-accent, #df6737) 45%, transparent);
    transform: translateY(-1px);
}
/* Signal + FixWP: the shared palette system can't give Signal a
   different accent value than Bold Stack/Feed Post use from the same
   palette record, and FixWP's ink-navy accent (#172a45) is correct for
   those two (badges/dots on paper) but measures 2.79:1 against Signal's
   felt-blue background (#3b70a7) -- under both the 4.5:1 text minimum
   and the 3:1 UI-component minimum, not just a duller look. The guide's
   own hero reference also doesn't use Signal's outline-button style for
   FixWP at all -- it's a solid white fill with navy text, so this
   matches that rather than trying to force the outline treatment to
   somehow work in navy. Scoped to this one combination via the
   foxco-smp--palette-fixwp hook (see render()) -- doesn't touch the
   other six palettes' Signal button at all. */
.foxco-smp--signal.foxco-smp--palette-fixwp .foxco-smp__cta {
    background: var(--smp-cta-bg, #ffffff);
    border-color: transparent;
    color: var(--smp-cta-text, #172a45);
}
.foxco-smp--signal.foxco-smp--palette-fixwp .foxco-smp__cta:hover {
    background: var(--smp-bg-2, #2c6095);
    color: var(--smp-cta-bg, #ffffff);
    box-shadow: 0 4px 20px rgba(23, 42, 69, .35);
}
/* Same contrast problem, same fix, for the callout mark -- it's the one
   other place Signal puts --smp-accent directly on the felt background. */
.foxco-smp--signal.foxco-smp--palette-fixwp .foxco-smp__callout-mark {
    color: var(--smp-text, #ffffff);
}
@media (max-width: 767px) {
    .foxco-smp--signal { --smp-pad-default: 32px 20px; }
    /* The accent bar stacks ABOVE the eyebrow text on mobile instead of
       sitting beside it. Inline, it has to share a narrow centered line
       with text that now wraps to two lines, so it hangs off the left of
       the first line and reads as a stray dash rather than a rule. */
    .foxco-smp--signal .foxco-smp__eyebrow {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .foxco-smp--signal .foxco-smp__eyebrow-bar { width: 32px; }
}

/* =============================================================================
   PRESET: BOLD STACK -- punchy, colorful ad-creative energy
============================================================================= */
.foxco-smp--bold-stack .foxco-smp__mockup {
    background: linear-gradient(160deg, var(--smp-accent, #df6737), var(--smp-bg, #b8471f));
    border-radius: 26px;
    padding: 16px;
    box-shadow: 0 20px 44px color-mix(in srgb, var(--smp-accent, #df6737) 30%, transparent);
}
.foxco-smp--bold-stack .foxco-smp__img {
    aspect-ratio: 4 / 5;
    border-radius: 16px;
}
.foxco-smp--bold-stack .foxco-smp__img--empty {
    background-color: rgba(255, 255, 255, 0.15);
    border: 2px dashed rgba(255, 255, 255, 0.3);
}
.foxco-smp--bold-stack .foxco-smp__img--empty .foxco-smp__img-placeholder {
    color: rgba(255, 255, 255, 0.65);
    font-weight: 800;
}
.foxco-smp__badge {
    position: absolute;
    top: -14px;
    right: -14px;
    background: var(--smp-accent-3, #f4c542);
    color: var(--smp-bg, #14141f);
    font-weight: 900;
    font-size: 12px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
    transform: rotate(8deg);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    z-index: 2;
}
.foxco-smp--bold-stack .foxco-smp__headline {
    font-weight: 900;
    font-size: clamp(28px, 4.5vw, 42px);
    color: var(--smp-bg, #14141f);
    margin-bottom: 22px;
}
.foxco-smp--bold-stack .foxco-smp__callouts li {
    background: #fff;
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 700;
    color: var(--smp-bg, #14141f);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    align-items: center;
}
.foxco-smp__callout-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; }
.foxco-smp__callout-dot--0 { background: var(--smp-accent, #df6737); }
.foxco-smp__callout-dot--1 { background: var(--smp-accent-2, #2dd4bf); }
.foxco-smp__callout-dot--2 { background: var(--smp-accent-3, #f4c542); }
.foxco-smp--bold-stack .foxco-smp__cta {
    padding: 16px 36px;
    background: var(--smp-cta-bg, #df6737);
    color: var(--smp-cta-text, #14141f);
    border-radius: 12px;
    font-size: 15px;
    font-family: var(--smp-heading-font, 'Sora'), 'Inter', sans-serif;
    font-weight: 800;
}
@media (max-width: 767px) {
    /* Bold Stack's callouts are full cards, so they stretch rather than
       shrink-wrap like the other two presets. */
    .foxco-smp--bold-stack .foxco-smp__callouts { width: auto; }
    .foxco-smp--bold-stack .foxco-smp__callouts li { justify-content: flex-start; text-align: left; }
    .foxco-smp__badge { top: -10px; right: 50%; transform: translateX(50%) rotate(8deg); }
}

/* =============================================================================
   SLIDESHOW -- only rendered when 2+ images are set (see
   render_image_block() in the widget file). Stacked/absolute positioning is
   unconditional so the first slide still renders correctly with zero JS
   (CSP-blocked scripts, a JS error earlier on the page, deferred loading).
============================================================================= */

.foxco-smp__img--slideshow { position: relative; }

.foxco-smp__slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.foxco-smp__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.foxco-smp__slide.is-active { opacity: 1; }

.foxco-smp__img--fade .foxco-smp__slide { transition: opacity 0.5s ease; }

.foxco-smp__img--slide .foxco-smp__slides {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
}
.foxco-smp__img--slide .foxco-smp__slide {
    position: static;
    opacity: 1;
    flex: 0 0 100%;
    height: 100%;
}

.foxco-smp__slide-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: background 0.2s ease;
}
.foxco-smp__slide-btn:hover { background: rgba(0, 0, 0, 0.7); }
.foxco-smp__slide-prev { left: 10px; }
.foxco-smp__slide-next { right: 10px; }

.foxco-smp__slide-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    z-index: 3;
}
.foxco-smp__slide-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.foxco-smp__slide-dot.is-active {
    background: #fff;
    transform: scale(1.3);
}

@media (max-width: 767px) {
    /* Arrows are redundant with the swipe gesture the JS adds at this
       same breakpoint (touchstart/touchend in foxco-smp.js), and at
       mockup width they're cramped enough to sit half over the image
       itself rather than the edges they're meant to hug. Dots stay --
       they're a position indicator, not a control competing with the
       swipe, and a card offering nothing else with slide 3 of 5
       reads as broken at a glance without them. */
    .foxco-smp__slide-btn { display: none; }
}

/* =============================================================================
   LEAD TIME -- Corner Banner or Side Button, independent of Bold Stack's own
   Corner Badge (both can be shown together).
============================================================================= */

.foxco-smp__lead-time {
    position: absolute;
    z-index: 3;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.foxco-smp__lead-time--banner {
    padding: 6px 14px;
    border-radius: 6px;
    background: var(--smp-accent-2, #2dd4bf);
    color: var(--smp-bg, #14141f);
    transform: rotate(-8deg);
}
.foxco-smp__lead-time--banner.foxco-smp__lead-time--top-left {
    top: 12px;
    left: 12px;
    transform-origin: top left;
}
.foxco-smp__lead-time--banner.foxco-smp__lead-time--top-right {
    top: 12px;
    right: 12px;
    transform-origin: top right;
}

.foxco-smp__lead-time--side {
    top: 50%;
    padding: 14px 8px;
    border-radius: 8px;
    background: var(--smp-accent-2, #2dd4bf);
    color: var(--smp-bg, #14141f);
    writing-mode: vertical-rl;
    transform: translateY(-50%) rotate(180deg);
}
.foxco-smp__lead-time--side.foxco-smp__lead-time--left {
    left: 12px;
    border-radius: 0 8px 8px 0;
}
.foxco-smp__lead-time--side.foxco-smp__lead-time--right {
    right: 12px;
    border-radius: 8px 0 0 8px;
}

@media (max-width: 767px) {
    .foxco-smp__lead-time--banner { font-size: 10px; padding: 5px 11px; }
    .foxco-smp__lead-time--side { font-size: 10px; padding: 11px 6px; }
}

/* Lead time banner/tab + FixWP: text color is --smp-bg, assuming (true
   for all six existing palettes) that bg is a near-black dark suitable
   as text on the accent_2 background. FixWP's bg is a medium felt blue
   against a light mist-blue accent_2 -- 4.00:1, under the 4.5:1 minimum
   this small (11px) bold text actually needs (bold alone doesn't clear
   WCAG's large-text exception until ~18.7px). Not layout-scoped like the
   other two fixes above -- this element isn't specific to one preset,
   so the override keys off the palette hook alone. */
.foxco-smp--palette-fixwp .foxco-smp__lead-time--banner,
.foxco-smp--palette-fixwp .foxco-smp__lead-time--side {
    color: var(--smp-accent, #172a45);
}