/*
 * Affiliates page (v3 — 2026-07-29, Fable).
 * Brand + layout polish to match the home page: blue pill kickers, Soofos
 * pill CTAs (red convert / outline secondary), de-boxed "Why it converts"
 * section, aligned audience grid with brand-blue outline icons.
 * Page-scoped layout only; the Soofos token system owns colour, type,
 * spacing, radii and elevation. No raw hex / px values.
 */

/* =====================================================================
   Root + box-sizing reset
   ===================================================================== */
.sf-aff,
.sf-aff * { box-sizing: border-box; }

.sf-aff {
    background: var(--page);
    color: var(--body);
    font-family: var(--font);
    overflow: clip;
}

/* Neutralise core default block margins inside this page so each block
   owns its own spacing. :where() keeps this at zero extra specificity. */
.sf-aff :where(p, h1, h2, h3, h4, ul, ol, li, figure, summary, a) { margin: 0; }
.sf-aff :where(.wp-block-image) { margin: 0; }
.sf-aff :where(.wp-block-columns) { margin: 0; }
.sf-aff > .wp-block-group__inner-container > * { margin-block-start: 0; }

.sf-aff a { text-decoration: none; }

/* =====================================================================
   Shared: eyebrow (blue pill kicker, home-page style)
   ===================================================================== */
.sf-aff__eyebrow {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    background: var(--blue-fill);
    color: var(--deep-blue);
    font-size: .71875rem;
    font-weight: var(--soofos-font-weight-black);
    letter-spacing: .1em;
    line-height: 1.4;
    text-transform: uppercase;
    padding: var(--soofos-space-2xs) var(--soofos-space-md);
    border-radius: var(--r-pill);
}

.sf-aff__section-heading--center .sf-aff__eyebrow { align-self: center; }

.sf-aff__title {
    font-size: clamp(1.875rem, 4vw, 2.625rem);
    font-weight: var(--soofos-font-weight-black);
    letter-spacing: -.04em;
    line-height: 1.12;
}

.sf-aff__section-title {
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
    font-weight: var(--soofos-font-weight-black);
    letter-spacing: -.022em;
    line-height: 1.18;
    color: var(--ink);
}

/* =====================================================================
   Shared: CTA buttons (Soofos pill treatment)
   ===================================================================== */
.sf-aff__button { width: 100%; }

.sf-aff .sf-aff__button .wp-block-button__link {
    display: inline-flex;
    min-height: var(--soofos-control-min-height);
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--soofos-space-md) var(--soofos-space-xl);
    border: var(--soofos-space-2xs) solid transparent;
    border-radius: var(--r-pill);
    font-size: .96875rem;
    font-weight: var(--soofos-font-weight-black);
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease,
                color .18s ease, box-shadow .18s ease;
}

/* Primary = convert → red (home-page convention).
   Specificity 0,3,0 to override core's :root :where(.wp-block-button__link)
   default background (#32373c). */
.sf-aff .sf-aff__button--primary .wp-block-button__link {
    background: var(--red);
    color: var(--white);
    box-shadow: var(--soofos-shadow-red-cta);
}

.sf-aff .sf-aff__button--primary .wp-block-button__link:hover,
.sf-aff .sf-aff__button--primary .wp-block-button__link:focus-visible {
    background: var(--red-hover);
    color: var(--white);
}

/* Secondary = quiet outline on the navy hero */
.sf-aff .sf-aff__button--secondary .wp-block-button__link {
    background: transparent;
    border-color: var(--on-navy-line);
    color: var(--white);
    box-shadow: none;
}

.sf-aff .sf-aff__button--secondary .wp-block-button__link:hover,
.sf-aff .sf-aff__button--secondary .wp-block-button__link:focus-visible {
    border-color: var(--white);
    color: var(--white);
}

.sf-aff .sf-aff__button .wp-block-button__link:focus-visible {
    outline: var(--soofos-space-2xs) solid var(--white);
    outline-offset: var(--soofos-space-xs);
}

/* =====================================================================
   HERO (navy band)
   ===================================================================== */
.sf-aff__hero {
    background: var(--ink);
    color: var(--white);
    padding: var(--soofos-space-3xl) var(--soofos-space-xl);
}

.sf-aff__hero > .wp-block-group__inner-container {
    max-width: 77.5rem;
    margin: 0 auto;
    width: 100%;
    min-width: 0;
}

.sf-aff__hero-inner,
.sf-aff__hero-inner > .wp-block-group__inner-container {
    display: grid;
    gap: var(--soofos-space-2xl);
    align-items: center;
    min-width: 0;
}

.sf-aff__hero-inner > .wp-block-group__inner-container {
    grid-template-columns: minmax(0, 1fr);
}

.sf-aff__hero-copy,
.sf-aff__hero-copy > .wp-block-group__inner-container {
    display: grid;
    justify-items: start;
    gap: var(--soofos-space-md);
    min-width: 0;
}

.sf-aff__hero-copy > .wp-block-group__inner-container {
    grid-column: 1 / -1;
    width: 100%;
}

.sf-aff__hero-copy .sf-aff__eyebrow {
    background: var(--on-navy-fill);
    color: var(--on-navy-strong);
}

.sf-aff__hero-copy .sf-aff__title {
    margin: 0;
    max-width: 24ch;
    color: var(--white);
}

.sf-aff__lead {
    margin: 0;
    max-width: 30rem;
    color: var(--on-navy-muted);
    font-size: 1.0625rem;
    line-height: 1.6;
}

.sf-aff__actions,
.sf-aff__actions > .wp-block-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--soofos-space-md);
    align-items: stretch;
    margin: var(--soofos-space-md) 0 0;
}

.sf-aff__hero-cards,
.sf-aff__hero-cards > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    gap: var(--soofos-space-sm);
    min-width: 0;
}

.sf-aff__hero-cards > .wp-block-group__inner-container {
    grid-column: 1 / -1;
    width: 100%;
}

.sf-aff__rate,
.sf-aff__rate > .wp-block-group__inner-container {
    display: flex;
    align-items: center;
    gap: var(--soofos-space-lg);
    min-width: 0;
}

.sf-aff__rate {
    padding: var(--soofos-space-lg) var(--soofos-space-xl);
    background: var(--on-navy-fill);
    border: var(--soofos-space-2xs) solid var(--on-navy-line);
    border-radius: var(--soofos-radius-lg);
}

.sf-aff__rate > .wp-block-group__inner-container {
    grid-column: 1 / -1;
    width: 100%;
}

.sf-aff__rate-value {
    flex: none;
    min-width: 5.5rem;
    color: var(--white);
    font-size: 2rem;
    font-weight: var(--soofos-font-weight-black);
    line-height: 1;
}

.sf-aff__rate-value--accent { color: var(--yellow); }

.sf-aff__rate-copy {
    color: var(--on-navy-muted);
    font-size: .8125rem;
    font-weight: var(--soofos-font-weight-bold);
    line-height: 1.55;
}

.sf-aff__rates-note {
    text-align: center;
    color: var(--on-navy-faint);
    font-size: .71875rem;
    font-weight: var(--soofos-font-weight-bold);
    margin: var(--soofos-space-sm) 0 0;
}

/* =====================================================================
   MAIN (light page)
   ===================================================================== */
.sf-aff__main {
    max-width: 77.5rem;
    margin: 0 auto;
    padding: 0 var(--soofos-space-xl) var(--soofos-space-3xl);
}

/* =====================================================================
   HOW IT WORKS
   ===================================================================== */
.sf-aff__how { padding: var(--soofos-space-3xl) 0; }

.sf-aff__section-heading,
.sf-aff__section-heading > .wp-block-group__inner-container {
    display: grid;
    gap: var(--soofos-space-sm);
    min-width: 0;
}

.sf-aff__section-heading > .wp-block-group__inner-container {
    grid-column: 1 / -1;
    width: 100%;
}

.sf-aff__section-heading--center {
    text-align: center;
    max-width: 40rem;
    margin: 0 auto;
    justify-items: center;
}

.sf-aff__how-grid,
.sf-aff__how-grid > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--soofos-space-lg);
    min-width: 0;
}

.sf-aff__how-grid { margin-top: var(--soofos-space-2xl); }

.sf-aff__how-grid > .wp-block-group__inner-container {
    grid-column: 1 / -1;
    width: 100%;
}

.sf-aff__step {
    padding: var(--soofos-space-xl);
    border: var(--soofos-space-2xs) solid var(--card-border);
    border-radius: var(--r-card);
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.sf-aff__step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--blue-fill);
    color: var(--deep-blue);
    border-radius: var(--r-pill);
    font-size: 1.0625rem;
    font-weight: var(--soofos-font-weight-black);
    line-height: 1;
    margin: 0 0 var(--soofos-space-md);
}

.sf-aff__step-title {
    color: var(--ink);
    font-size: 1.0625rem;
    font-weight: var(--soofos-font-weight-black);
    line-height: 1.35;
    margin: 0;
}

.sf-aff__step-copy {
    color: var(--muted);
    font-size: .875rem;
    line-height: 1.6;
    margin: var(--soofos-space-sm) 0 0;
}

/* =====================================================================
   WHO IT'S FOR
   ===================================================================== */
.sf-aff__for {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--soofos-space-2xl);
    align-items: start;
    padding: var(--soofos-space-3xl) 0;
}

.sf-aff__for-copy,
.sf-aff__for-copy > .wp-block-group__inner-container {
    display: grid;
    justify-items: start;
    gap: var(--soofos-space-sm);
    min-width: 0;
}

.sf-aff__for-sub {
    color: var(--muted);
    font-size: .9375rem;
    line-height: 1.7;
}

.sf-aff__for-mention {
    color: var(--muted);
    font-size: .875rem;
    line-height: 1.7;
}

.sf-aff__for-mention a {
    color: var(--deep-blue);
    font-weight: var(--soofos-font-weight-extrabold);
}

.sf-aff__for-mention a:hover { color: var(--blue-hover); }

.sf-aff__for-grid,
.sf-aff__for-grid > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--soofos-space-lg);
    min-width: 0;
}

.sf-aff__audience {
    display: grid;
    gap: var(--soofos-space-sm);
    padding: var(--soofos-space-xl);
    border: var(--soofos-space-2xs) solid var(--card-border);
    border-radius: var(--r-card);
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.sf-aff__audience-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    background: var(--blue-fill);
    color: var(--deep-blue);
    border-radius: var(--r-card-sm);
}

.sf-aff__audience-icon svg {
    display: block;
    width: 1.375rem;
    height: 1.375rem;
}

.sf-aff__audience-title {
    color: var(--ink);
    font-size: 1rem;
    font-weight: var(--soofos-font-weight-black);
    line-height: 1.35;
}

.sf-aff__audience-copy {
    color: var(--muted);
    font-size: .84375rem;
    line-height: 1.6;
    margin: 0;
}

/* =====================================================================
   WHY IT CONVERTS — de-boxed, open image-beside-text
   ===================================================================== */
.sf-aff__why { padding: var(--soofos-space-3xl) 0 0; }

.sf-aff__why-card,
.sf-aff__why-card > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--soofos-space-2xl);
    align-items: center;
    min-width: 0;
}

.sf-aff__why-card > .wp-block-group__inner-container { width: 100%; }

.sf-aff__why-copy {
    display: grid;
    justify-items: start;
    gap: var(--soofos-space-sm);
    align-content: center;
    min-width: 0;
}

.sf-aff__why-title {
    color: var(--ink);
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
    font-weight: var(--soofos-font-weight-black);
    letter-spacing: -.022em;
    line-height: 1.22;
    margin: 0;
}

.sf-aff__why-list {
    list-style: none;
    padding: 0;
    margin: var(--soofos-space-sm) 0 0;
    display: grid;
    gap: var(--soofos-space-sm);
}

.sf-aff__why-list li {
    color: var(--body);
    font-size: .9375rem;
    font-weight: var(--soofos-font-weight-bold);
    line-height: 1.55;
    padding-left: var(--soofos-space-xl);
    position: relative;
}

.sf-aff__why-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--green);
    font-weight: var(--soofos-font-weight-black);
}

/* The source image carries its own soft padding, so it sits open (no card
   frame) as an illustration — matching the home page's open imagery. */
.sf-aff__why-image {
    width: 100%;
    margin: 0;
}

.sf-aff__why-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

/* =====================================================================
   FAQ
   ===================================================================== */
.sf-aff__faq {
    max-width: 53.75rem;
    margin: 0 auto;
    padding: var(--soofos-space-3xl) var(--soofos-space-xl)
             var(--soofos-space-2xl);
}

.sf-aff__faq-heading {
    text-align: center;
    color: var(--ink);
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
    font-weight: var(--soofos-font-weight-black);
    letter-spacing: -.022em;
    line-height: 1.22;
    margin: 0 0 var(--soofos-space-lg);
}

.sf-aff__faq-item {
    background: var(--white);
    border: var(--soofos-space-2xs) solid var(--card-border);
    border-radius: var(--r-card);
    padding: var(--soofos-space-lg) var(--soofos-space-xl);
    margin: 0 0 var(--soofos-space-sm);
}

.sf-aff__faq-item[open] { border-color: var(--blue-border); }

.sf-aff__faq-item:last-child { margin-bottom: 0; }

.sf-aff__faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--soofos-space-md);
    color: var(--ink);
    font-size: .9375rem;
    font-weight: var(--soofos-font-weight-extrabold);
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}

.sf-aff__faq-item[open] summary {
    font-weight: var(--soofos-font-weight-black);
}

.sf-aff__faq-item summary::-webkit-details-marker { display: none; }

.sf-aff__faq-item summary::after {
    content: '▾';
    color: var(--deep-blue);
    font-size: 1rem;
    font-weight: var(--soofos-font-weight-extrabold);
    transition: transform .15s ease;
}

.sf-aff__faq-item[open] summary::after {
    content: '▴';
    transform: rotate(0deg);
}

.sf-aff__faq-answer {
    color: var(--muted);
    font-size: .875rem;
    line-height: 1.6;
    margin: var(--soofos-space-sm) 0 0;
}

/* =====================================================================
   FINAL CTA (light blue)
   ===================================================================== */
.sf-aff__cta {
    display: flex;
    flex-direction: column;
    gap: var(--soofos-space-xl);
    align-items: stretch;
    margin: var(--soofos-space-3xl) 0 0;
    padding: var(--soofos-space-3xl) var(--soofos-space-2xl);
    border: var(--soofos-space-2xs) solid var(--blue-border);
    border-radius: var(--r-card-lg);
    background: var(--blue-fill);
}

.sf-aff__cta-copy {
    display: grid;
    gap: var(--soofos-space-sm);
    min-width: 0;
}

.sf-aff__cta-title {
    color: var(--ink);
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
    font-weight: var(--soofos-font-weight-black);
    letter-spacing: -.022em;
    line-height: 1.2;
    margin: 0;
}

.sf-aff__cta-sub {
    color: var(--muted);
    font-size: .9375rem;
    line-height: 1.6;
}

.sf-aff__cta-sub a {
    color: var(--deep-blue);
    font-weight: var(--soofos-font-weight-extrabold);
}

.sf-aff__cta-sub a:hover { color: var(--blue-hover); }

.sf-aff__cta-actions {
    display: flex;
    align-items: center;
    margin: 0;
}

.sf-aff__cta-actions .sf-aff__button { width: auto; }
.sf-aff__cta-actions .sf-aff__button .wp-block-button__link { width: auto; }

/* CTA primary keeps the red convert style; ensure focus ring reads on blue */
.sf-aff .sf-aff__cta .sf-aff__button--primary .wp-block-button__link:focus-visible {
    outline-color: var(--deep-blue);
}

/* =====================================================================
   Responsive — tablet and up
   ===================================================================== */
@media (min-width: 40rem) {
    .sf-aff__actions,
    .sf-aff__actions > .wp-block-buttons {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .sf-aff__actions .sf-aff__button { width: auto; }
    .sf-aff__actions .sf-aff__button .wp-block-button__link { width: auto; }

    .sf-aff__how-grid,
    .sf-aff__how-grid > .wp-block-group__inner-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sf-aff__for-grid,
    .sf-aff__for-grid > .wp-block-group__inner-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sf-aff__cta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--soofos-space-2xl);
    }

    .sf-aff__cta-copy { flex: 1 1 auto; }
    .sf-aff__cta-actions { flex: none; }
}

@media (min-width: 52rem) {
    .sf-aff__hero-inner > .wp-block-group__inner-container {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }

    .sf-aff__hero-copy,
    .sf-aff__hero-cards { min-width: 0; }

    .sf-aff__for {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
        gap: var(--soofos-space-3xl);
    }

    .sf-aff__for-copy { align-content: start; }

    .sf-aff__why-card,
    .sf-aff__why-card > .wp-block-group__inner-container {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: var(--soofos-space-3xl);
    }
}

/* =====================================================================
   Responsive — mobile
   ===================================================================== */
@media (max-width: 39.9375rem) {
    .sf-aff__hero,
    .sf-aff__main {
        padding-left: var(--soofos-space-lg);
        padding-right: var(--soofos-space-lg);
    }

    .sf-aff__hero {
        padding-top: var(--soofos-space-2xl);
        padding-bottom: var(--soofos-space-2xl);
    }

    .sf-aff__faq {
        padding-left: var(--soofos-space-lg);
        padding-right: var(--soofos-space-lg);
    }

    .sf-aff__cta { padding: var(--soofos-space-2xl) var(--soofos-space-xl); }
}

/* =====================================================================
   Reduced motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .sf-aff .sf-aff__button .wp-block-button__link,
    .sf-aff__faq-item summary::after { transition: none; }
}