/**
* Sponsored Links (text ads) — front-end + admin-preview styling.
* Classes mirror the "sponsored-link-snippets.html" mockup 1:1, just
* namespaced "fnns-sl-" so they can't collide with anything else on the
* site. Loaded both on the front end (wherever a shortcode actually
* renders) and on this CPT's own admin screens, so the live preview in the
* edit screen looks exactly like the real thing.
*/
/**
* Accent color is per-instance, set as inline CSS custom properties on the
* element itself (see
* FNS_Sponsored_Links::render_markup() / admin.js's renderPreviewMarkup())
* — these are only the SITE-WIDE fallbacks, used if an instance somehow
* doesn't set them (shouldn't happen via the admin UI, but keeps the CSS
* safe to use standalone too).
*/
.fnns-sl {
--fnns-sl-accent: #3c98ca;
--fnns-sl-hover-text: #2f7ba6;
--fnns-sl-hover-button: #2f7ba6;
--fnns-sl-hover-arrow: #1d2230;
--fnns-sl-arrow-bg: #3c98ca;
--fnns-sl-outline-bg: #f5fafd;
--fnns-sl-outline-bg-hover: #eaf4fb;
--fnns-sl-button-bg: #3c98ca;
}
/* shared */
.fnns-sl { display: flex; align-items: center; text-decoration: none; color: #1d2230; }
/* :not(.fnns-sl-hover-none) — "No hover color change" (hover_style =
* 'none') is meant to mean exactly that: picking it previously still left
* the headline text (and, below, Outlined's background) darkening on
* hover, since this rule wasn't gated by the hover-style class at all. Its
* own independent "Hover color" setting (--fnns-sl-hover-text) — see
* render_markup()'s docblock — not the button-label/arrow ones below. */
.fnns-sl:hover:not(.fnns-sl-hover-none) { color: var(--fnns-sl-hover-text); }
.fnns-sl-tag { flex: none; background: var(--fnns-sl-accent); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 4px 8px; line-height: 1; }
.fnns-sl-title { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; line-height: 1.35; }
/* Split button (Card/Outlined styles). No align-items here (default:
* stretch) — both segments must stretch to match the TALLER one's height
* so a Square arrow sits flush against the label at equal height, not
* shrunk down to the SVG's own intrinsic size. (align-items: center was
* tried here briefly and broke exactly that — see the Square arrow-shape
* height mismatch this comment exists to prevent regressing again.)
* gap: 0 — Square mode is meant to read as one connected button, so the
* label and arrow segments sit flush against each other with nothing
* between them (border-radius/overflow:hidden still round only the
* outer corners). The Circle modifier below overrides this with its own,
* smaller gap, since circle mode deliberately separates the two pieces. */
.fnns-sl-btn { flex: none; display: flex; gap: 0; border-radius: 8px; overflow: hidden; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
/* Resting (non-hover) background is its OWN var, --fnns-sl-button-bg —
* defaults to the plain accent color (so at rest the label reads as part
* of the accent-colored button, not a separately-colored segment), or an
* explicit "Button color" from the admin. Independent of --fnns-sl-accent
* (which still colors the tag and, for Outlined, the border/tint) and of
* --fnns-sl-arrow-bg below (the arrow/icon segment's own resting color). */
.fnns-sl-btn-label { background: var(--fnns-sl-button-bg); padding: 9px 16px; display: flex; align-items: center; }
/* Resting (non-hover) background is its OWN var, --fnns-sl-arrow-bg —
* defaults to the plain accent color (so at rest the arrow reads as part
* of the same solid button as the label, not a separately-colored
* segment), or an explicit "Arrow button color" from the admin. This used
* to reuse --fnns-sl-accent-dark, which also doubled as the label's hover
* shade — meaning a custom hover color bled into the arrow's permanent,
* not-hovered color too. Keep this var and the hover vars below separate. */
/* padding: 9px 12px (not "0 12px") — matches the label's own 9px vertical
* padding, so the arrow has a comfortable height ON ITS OWN, not only when
* align-items: stretch (above) has a taller label sibling to match. Without
* this, an icon-only button (label hidden via "Show the text button"
* unchecked) collapsed to the bare 16px SVG's height — the "Square height
* too small" bug this fixes. */
.fnns-sl-btn-arrow { background: var(--fnns-sl-arrow-bg); padding: 9px 12px; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.fnns-sl-btn-arrow svg { display: block; }
/* Arrow shape "None": just the icon, no colored badge at all — the icon
* takes var(--fnns-sl-arrow-bg) via `color` (its SVG uses currentColor, set
* in PHP/JS) instead of staying the white that's meant to sit on a colored
* background. --fnns-sl-arrow-bg is the same "Arrow button color" setting
* Square/Circle use for their badge background, reused here as a plain
* foreground color — defaults to the accent color, or an explicit custom
* color from the admin. !important on background is needed to beat the
* plain .fnns-sl-btn-arrow rule above's var(--fnns-sl-arrow-bg) at equal
* specificity (both are single classes on the same element). */
.fnns-sl-btn--bare { background: none; gap: 6px; border-radius: 0; overflow: visible; align-items: center; }
.fnns-sl-btn-arrow--bare { background: none !important; padding: 0 2px; color: var(--fnns-sl-arrow-bg); }
/* Hover color, per segment — gated by a modifier class on the outer
* (fnns-sl-hover-{both,button,arrow,none}, set from the "Hover effect"
* admin field) rather than always-on, since which part (if either) darkens
* on hover is meant to be adjustable, not fixed. Each segment uses its OWN
* independently-customizable hover color var (--fnns-sl-hover-button /
* --fnns-sl-hover-arrow — see render_markup()'s docblock), each defaulting
* to its own derived shade of the accent color (mix_hex_color() in PHP /
* mixHexColor() in admin.js) unless overridden, so a custom accent color
* stays consistent all the way through its hover state too. These hover
* vars are independent of --fnns-sl-arrow-bg above, so picking a hover
* color never changes what color the arrow shows when it's NOT hovered. */
.fnns-sl-hover-both:hover .fnns-sl-btn-label,
.fnns-sl-hover-button:hover .fnns-sl-btn-label { background: var(--fnns-sl-hover-button); }
.fnns-sl-hover-both:hover .fnns-sl-btn-arrow,
.fnns-sl-hover-arrow:hover .fnns-sl-btn-arrow { background: var(--fnns-sl-hover-arrow); }
/* Bare arrow (shape "None") has no background to darken, so its hover
* feedback is a color change instead — same hover-style gating as above. */
.fnns-sl-hover-both:hover .fnns-sl-btn-arrow--bare,
.fnns-sl-hover-arrow:hover .fnns-sl-btn-arrow--bare { background: none !important; color: var(--fnns-sl-hover-arrow); }
/* Arrow shape modifier: a separate circular badge, pulled away from the
* label with a (small) gap, instead of a flush rectangle sharing the
* label's border-radius/overflow clip. Deliberately a tighter gap than a
* typical "two separate buttons" layout would use — the badge should read
* as attached to the label, just rounded off, not as a second unrelated
* button floating next to it. */
.fnns-sl-btn--circle-arrow { gap: 4px; border-radius: 0; overflow: visible; align-items: center; }
.fnns-sl-btn--circle-arrow .fnns-sl-btn-label { border-radius: 999px; }
.fnns-sl-btn--circle-arrow .fnns-sl-btn-arrow { border-radius: 50%; width: 34px; height: 34px; padding: 0; flex: none; }
/* 1. Card */
.fnns-sl-card { gap: 16px; background: #fff; border-radius: 12px; padding: 14px 18px; box-shadow: 0 1px 3px rgba(20,30,50,.08), 0 4px 14px rgba(20,30,50,.06); transition: box-shadow .15s; }
.fnns-sl-card:hover { box-shadow: 0 2px 6px rgba(20,30,50,.1), 0 8px 24px rgba(20,30,50,.1); }
/* 2. Outlined */
.fnns-sl-outline { gap: 16px; background: var(--fnns-sl-outline-bg); border: 1.5px solid var(--fnns-sl-accent); border-radius: 12px; padding: 12.5px 16.5px; transition: background .15s; }
/* Same :not(.fnns-sl-hover-none) gating as the title-color rule above — a
* background color change on hover is still a "hover color change". */
.fnns-sl-outline:hover:not(.fnns-sl-hover-none) { background: var(--fnns-sl-outline-bg-hover); }
/* 3. Inline */
.fnns-sl-inline { gap: 12px; padding: 10px 0; border-top: 1px solid #e3e7ec; border-bottom: 1px solid #e3e7ec; }
.fnns-sl-inline .fnns-sl-tag { font-size: 11px; padding: 4px 7px; }
.fnns-sl-inline .fnns-sl-title { font-size: 15px; }
/* CTA is its own text segment (show_button_label) + icon segment
* (show_arrow, same Icon choice as Card/Outlined's arrow button) — each
* independently toggleable. No badge/background here (Inline never had
* one). This replaces the old hardcoded "›" character, which showed
* regardless of any icon setting and couldn't be turned off.
*
* line-height: 1 on the whole CTA (not just the label) is what keeps the
* icon level with the text: the label's UPPERCASE text otherwise sits in a
* line box taller than its own cap-height (normal line-height ~1.4), so an
* icon centered via align-items against that full box reads as sitting
* noticeably higher than the text's visible glyphs. Collapsing the line
* box to the text's own height first makes "centered against the text"
* and "centered against the glyphs" the same thing. */
.fnns-sl-inline-cta { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; line-height: 1; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
/* Label color: var(--fnns-sl-button-bg), same "Button color" setting
* Card/Outlined's filled label segment uses for its background (defaults
* to the accent color, so by default this still just matches the accent) —
* not the icon's own "Arrow button color" setting, see .fnns-sl-inline-icon. */
.fnns-sl-inline-cta-label { color: var(--fnns-sl-button-bg); }
/* Icon color: var(--fnns-sl-arrow-bg), same "Arrow button color" setting
* Square/Circle use for their badge background (defaults to the accent
* color too, so by default label and icon still match) — see
* .fnns-sl-btn-arrow--bare's docblock above for the shared reasoning. */
.fnns-sl-inline-icon { display: flex; align-items: center; color: var(--fnns-sl-arrow-bg); transition: color .15s; }
.fnns-sl-inline-icon svg { display: block; }
/* Hover, gated by hover_style the same way as Card/Outlined's segments
* (button -> label, arrow -> icon, both -> either, none -> neither) — see
* that section's docblock. Each targets its own element directly, so it
* overrides that element's explicit resting color above regardless of the
* outer 's own :hover color rule. */
.fnns-sl-hover-both:hover .fnns-sl-inline-cta-label,
.fnns-sl-hover-button:hover .fnns-sl-inline-cta-label { color: var(--fnns-sl-hover-button); }
.fnns-sl-hover-both:hover .fnns-sl-inline-icon,
.fnns-sl-hover-arrow:hover .fnns-sl-inline-icon { color: var(--fnns-sl-hover-arrow); }
/* Mobile: stack Card/Outlined into tag → title → button rows instead of
* one squeezed row. Without this, `.fnns-sl` stays a single flex row at
* any width — `.fnns-sl-title` has `min-width: 0` so it CAN shrink/wrap,
* but `.fnns-sl-tag` and `.fnns-sl-btn` are both `flex: none` (fixed
* width), so a long title still fights them for the same narrow row: the
* button ends up squeezed down to a sliver next to several lines of
* wrapped text, vertically centered against the whole wrapped block
* (`align-items: center` on `.fnns-sl`) — exactly the cramped, off-balance
* "Card (stylized for a Webinar)" look this is meant to prevent, not an
* overflow/clipping bug (title and button were already both wrapping/
* shrinking, just badly).
*
* Fix: flex-wrap + the title at flex-basis 100% forces every row onto its
* own line (tag alone first — there's no room left for a 100%-wide title
* next to it — then title alone, filling the row, then the button last,
* since nothing fits beside a 100%-wide item either). No markup/order
* change needed: tag, title, btn are already children in that order.
* `.fnns-sl-btn`'s own `margin-left: auto` only takes effect on its own
* flex line (the title above doesn't interfere, it's a separate line), so
* the button settles bottom-right under the title — reads as the card's
* CTA rather than a stray leftover next to cramped text.
*
* Inline is deliberately left alone: its CTA is a plain text+icon pair,
* not a filled button, so it doesn't get visually "squeezed" the same
* way — see .fnns-sl-inline-cta's docblock above.
*/
@media ( max-width: 600px ) {
.fnns-sl-card,
.fnns-sl-outline {
flex-wrap: wrap;
row-gap: 10px;
}
.fnns-sl-card .fnns-sl-title,
.fnns-sl-outline .fnns-sl-title {
flex-basis: 100%;
}
.fnns-sl-card .fnns-sl-btn,
.fnns-sl-outline .fnns-sl-btn {
margin-left: auto;
}
}
/* Defends against an ad-placement plugin (e.g. Advanced Ads) wrapping the
* shortcode in its OWN container with `float: left` (with or without a
* fixed pixel width) — e.g. a "Before the Final Paragraph"-style
* placement, meant for a small banner image that's supposed to sit beside
* text, not a full-width text/button card. Two symptoms seen from this,
* both from the same cause:
* - WITH a fixed width (e.g. "width: 800px"): that width wins regardless
* of viewport, so on mobile the card renders at desktop-banner size
* and the button overflows off-screen instead of wrapping.
* - WITHOUT a width (float: left alone): the floated box shrinks to its
* own content width instead of filling the column, and — since it's
* still floated — the NEXT paragraph (e.g. an image-credit caption)
* wraps up alongside it instead of flowing below, which reads as
* broken layout regardless of screen size.
* `float: none` fixes both: a non-floated block defaults to the full
* width of its container and pushes following content below it. Kept
* unconditional (not just the mobile media query above) since the
* wrap-around-next-paragraph symptom shows on desktop too. :has() scopes
* this to only a wrapper that actually contains one of our cards, so a
* genuine floated image-banner placement elsewhere on the page is
* untouched. */
.fintech-entity-placement:has( > .fnns-sl-card ),
.fintech-entity-placement:has( > .fnns-sl-outline ),
.fintech-entity-placement:has( > .fnns-sl-inline ) {
width: auto !important;
max-width: 100% !important;
float: none !important;
}
/* Admin edit-screen live preview wrapper only */
.fnns-sl-preview-wrap { max-width: 640px; margin-top: 4px; }
/* No pointer-events: none here (on purpose) — the preview's :hover state
* (text color, button segment colors, Outlined's background, Card's
* shadow) should be genuinely hoverable so it previews real hover
* behavior, not just a static snapshot. Navigation is still blocked
* separately: the preview's href="#" + onclick="return false;" (see
* renderPreviewMarkup() in admin.js) stop a click from going anywhere. */
.fnns-sl-preview-wrap .fnns-sl { cursor: default; }