/*
 * Google "Preferred Sources" card — end-of-article CTA.
 *
 * Hard limit worth knowing before editing this file: the button itself is a
 * cross-origin iframe served by news.google.com. Nothing below can reach it.
 * Google's own badge is .Q1sn3 inside that frame — inline-flex, min-height
 * 40px, border-radius 100px, white on #c4c7c5, Google Sans Text 14px/500,
 * white-space:nowrap, with a 22px Google "G". The library also writes inline
 * position/width/min-height onto .shifke-prefsrc__btn, so sizing has to happen
 * on .shifke-prefsrc__cta instead.
 *
 * The theme has no general design tokens (the --cf7-* set is contact-form
 * scoped), so the palette here is literal.
 */

.shifke-prefsrc {
    box-sizing: border-box;
    width: 100%;
    margin: 36px 0 40px;
    padding: 24px 20px;
    border: 1px solid #e2e7ee;
    border-radius: 18px;
    background: #f7f9fc;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.04);
    direction: rtl;
    text-align: center;
}

.shifke-prefsrc *,
.shifke-prefsrc *::before,
.shifke-prefsrc *::after {
    box-sizing: border-box;
}

.shifke-prefsrc[hidden] {
    display: none;
}

.shifke-prefsrc__inner {
    max-width: 600px;
    margin-inline: auto;
}

.shifke-prefsrc__title {
    display: block;
    margin: 0;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    color: #182230;
}

.shifke-prefsrc__text {
    display: block;
    max-width: 520px;
    margin-top: 8px;
    margin-inline: auto;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 400;
    color: #667085;
}

/*
 * 240px is measured, not chosen. Google's badge is inline-flex and its iframe
 * body sets no text-align, so in an RTL document the badge hugs the right edge
 * of whatever box we give it — any surplus width becomes dead, non-clickable
 * space on its left and visibly pushes the button off centre.
 *
 * Measured in Chrome across 320/360/390/430/768/1440: the badge renders the
 * short Hebrew label "הוספה למקורות המועדפים" at a stable 230.8px. Sizing this
 * box to 240px leaves ~4.6px each side, which centres the badge within the
 * card while keeping enough slack that a font fallback cannot clip the label
 * (the badge is white-space:nowrap inside a scrolling="no" frame).
 */
.shifke-prefsrc__cta {
    width: 240px;
    max-width: 100%;
    min-height: 60px;
    margin-top: 18px;
    margin-inline: auto;
    border-radius: 999px;
}

/*
 * Keyboard focus lands inside the iframe, where no outline of ours can reach.
 * :focus-within on the wrapper is the closest equivalent that still gives a
 * visible ring.
 */
.shifke-prefsrc__cta:focus-within {
    outline: 3px solid rgba(66, 133, 244, 0.25);
    outline-offset: 2px;
}

/*
 * #6B7280, not the #8A94A3 originally specced: that value measures 2.91:1
 * against #F7F9FC and fails WCAG AA for 13px text. This is 4.58:1. The size
 * step from 16px to 13px carries the hierarchy instead of the colour.
 */
.shifke-prefsrc__note {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 400;
    color: #6b7280;
}

@media (min-width: 601px) {
    .shifke-prefsrc {
        padding: 28px 32px;
    }
}

/*
 * At a 320px viewport the theme leaves a 260px content column, so the card's
 * horizontal padding is what decides whether the 240px CTA box still fits.
 * 10px each side leaves exactly 240px of inner width.
 */
@media (max-width: 380px) {
    .shifke-prefsrc {
        padding: 20px 10px;
    }
}