/* ─────────────────────────────────────────────────────────────────────────────
   Collective CTA inline partial — minimal styles to render _CollectiveCtaInline
   on pages that DON'T load the full collective.css. Previously blog/recipe pages
   pulled ~84KB of Collective styles just for this form; this trims it to ~3KB.

   Source of truth for these rules is still collective.css — if the CTA visuals
   change there, mirror the change here.
   ───────────────────────────────────────────────────────────────────────────── */

/* Scoped tokens — identical to collective.css but namespaced to the CTA section
   so we don't pollute the global :root when included on blog/recipe pages. */
.c-cta {
    --c-ink:          #18181b;
    --c-ink-2:        #27272a;
    --c-body:         #3f3f46;
    --c-muted:        #71717a;
    --c-paper:        #faf6ef;
    --c-paper-2:      #f3ede1;
    --c-surface:      #ffffff;
    --c-border:       #e7e2d6;
    --c-border-strong:#d6cfbf;
    --c-accent:       #c2410c;
    --c-accent-ink:   #7c2d12;
    --c-sans:         "DM Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --c-radius-sm:    6px;
    --c-radius-lg:    20px;
    --c-radius-pill:  999px;
    --c-shadow-sm:    0 1px 2px rgba(24, 24, 27, 0.05);
    --c-shadow-md:    0 4px 14px rgba(24, 24, 27, 0.06), 0 1px 2px rgba(24, 24, 27, 0.04);
    --c-shadow-pop:   0 28px 60px -22px rgba(124, 45, 18, 0.25), 0 4px 10px rgba(24, 24, 27, 0.05);
    --c-dur-1:        140ms;
    --c-ease:         cubic-bezier(.2, .8, .2, 1);

    position: relative;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius-lg);
    padding: 1.75rem 1.5rem;
    margin: 2rem auto;
    max-width: min(100%, 620px);
    text-align: center;
    box-shadow: var(--c-shadow-sm);
    font-family: var(--c-sans);
    color: var(--c-body);
}

.c-cta[data-placement="end-of-article"] {
    background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink);
}
/* Eyebrow is #c2410c (accent) which failed AA on the dark ink; brighten for contrast. */
.c-cta[data-placement="end-of-article"] .c-eyebrow { color: #fb923c; }
.c-cta[data-placement="end-of-article"] h3,
.c-cta[data-placement="end-of-article"] label { color: #fff; }
.c-cta[data-placement="end-of-article"] p { color: rgba(250, 246, 239, 0.85); }
.c-cta[data-placement="end-of-article"] input[type="email"] {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-color: rgba(255,255,255,0.25);
}
.c-cta[data-placement="end-of-article"] input[type="email"]::placeholder {
    color: rgba(250, 246, 239, 0.55);
}
.c-cta[data-placement="end-of-article"] .c-interest-toggle {
    background: rgba(250, 246, 239, 0.08);
    border-color: rgba(250, 246, 239, 0.18);
}
.c-cta[data-placement="end-of-article"] .c-interest-toggle label {
    background: transparent;
    color: var(--c-paper);
    border-color: transparent;
}
.c-cta[data-placement="end-of-article"] .c-interest-toggle label:hover { color: #fff; }
.c-cta[data-placement="end-of-article"] .c-interest-toggle input:checked + label {
    background: var(--c-accent); color: #fff; border-color: var(--c-accent);
}
.c-cta[data-placement="end-of-article"] .c-cta-fine { color: rgba(250, 246, 239, 0.75); }
.c-cta[data-placement="end-of-article"] a,
.c-cta[data-placement="end-of-article"] .c-cta-fine a {
    color: #fb923c;
    text-decoration-color: rgba(251, 146, 60, 0.55);
}
.c-cta[data-placement="end-of-article"] a:hover,
.c-cta[data-placement="end-of-article"] .c-cta-fine a:hover { color: #fdba74; }

.c-cta[data-placement="mid-article"] {
    background: linear-gradient(180deg, #ffffff, var(--c-paper-2));
    border-color: var(--c-border-strong);
}

.c-cta .c-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--c-sans);
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-accent);
}
.c-cta .c-eyebrow::before {
    content: ""; width: 24px; height: 1px;
    background: currentColor; opacity: 0.6;
}

.c-cta-eyebrow { justify-content: center; margin-bottom: 0.5rem; }

.c-cta h3 {
    font-family: "DM Serif Display", Georgia, serif;
    font-weight: 400;
    font-size: 1.5rem;
    margin: 0 0 0.4rem;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--c-ink);
}

.c-cta-sub { color: var(--c-muted); margin: 0 0 1.15rem; }

.c-cta-form {
    display: flex; flex-direction: column; gap: 0.6rem;
    max-width: 420px; margin: 0 auto;
    text-align: left;
}

.c-cta-label {
    font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--c-muted);
}

.c-cta-form input[type="email"] {
    font-family: var(--c-sans);
    font-size: 1rem;
    padding: 0.85rem 1rem;
    background: var(--c-paper-2);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--c-radius-sm);
    color: var(--c-ink);
    transition: border-color var(--c-dur-1) var(--c-ease), background var(--c-dur-1) var(--c-ease);
}
.c-cta-form input[type="email"]:focus {
    outline: none;
    border-color: var(--c-accent);
    background: var(--c-surface);
    box-shadow: 0 0 0 4px rgba(194, 65, 12, 0.12);
}

/* Pill-toggle radio group for Interest */
.c-interest-toggle {
    display: inline-flex; padding: 3px;
    background: var(--c-paper-2);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius-pill);
    align-self: center;
    margin: 0.15rem 0;
}
.c-interest-toggle fieldset {
    border: 0; padding: 0; margin: 0;
    display: inline-flex; gap: 2px;
}
.c-interest-toggle input[type="radio"] {
    position: absolute; opacity: 0; pointer-events: none;
}
.c-interest-toggle label {
    padding: 0.45rem 0.9rem;
    border-radius: var(--c-radius-pill);
    font-size: 0.88rem; font-weight: 600;
    color: var(--c-ink-2);
    cursor: pointer;
    transition: background var(--c-dur-1) var(--c-ease), color var(--c-dur-1) var(--c-ease);
    border: 1px solid transparent;
}
.c-interest-toggle label:hover { color: var(--c-ink); }
.c-interest-toggle input:checked + label {
    background: var(--c-ink); color: var(--c-paper);
}
.c-interest-toggle input:focus-visible + label {
    outline: 2px solid var(--c-accent); outline-offset: 2px;
}

.c-cta-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.9rem 1.25rem;
    background: var(--c-accent); color: #fff;
    border: 0; border-radius: var(--c-radius-pill);
    font-weight: 700; font-size: 1rem;
    cursor: pointer;
    transition: background var(--c-dur-1) var(--c-ease),
                transform var(--c-dur-1) var(--c-ease),
                box-shadow 240ms var(--c-ease);
    box-shadow: var(--c-shadow-md);
}
.c-cta-btn:hover { background: var(--c-accent-ink); box-shadow: var(--c-shadow-pop); }
.c-cta-btn:active { transform: translateY(1px); }

.c-cta-fine {
    font-size: 0.78rem; color: var(--c-muted);
    margin: 0.6rem 0 0;
    text-align: center;
}

/* Dark-mode pass for the CTA when .is-dark is on the root. */
.is-dark .c-cta {
    background: #1a1f26;
    border-color: #2a3039;
    color: #c3c7cd;
}
.is-dark .c-cta h3 { color: #e5e7eb; }
/* Eyebrow (accent orange) needs brightening on any dark card — not just end-of-article. */
.is-dark .c-cta .c-eyebrow { color: #fb923c; }
/* c-cta-label is a small uppercase hint ("Your email"). On dark cards, the default
   muted gray drops below AA — brighten specifically. */
.is-dark .c-cta .c-cta-label { color: #b0b6bc; }
.is-dark .c-cta .c-cta-sub { color: #b0b6bc; }
.is-dark .c-cta .c-cta-fine { color: #a0a4aa; }
.is-dark .c-cta[data-placement="end-of-article"] {
    background: #0a0d11;
    border-color: #1a1f26;
}
.is-dark .c-cta-form input[type="email"] {
    background: #0f1419;
    color: #e5e7eb;
    border-color: #2a3039;
}
.is-dark .c-interest-toggle {
    background: #0f1419;
    border-color: #2a3039;
}
.is-dark .c-interest-toggle label { color: #c3c7cd; }
.is-dark .c-interest-toggle input:checked + label {
    background: var(--c-accent); color: #fff;
}

/* Links inside dark-mode CTAs (reCAPTCHA attribution, fine-print) — default
   accent-ink (#7c2d12) is invisible on dark cards. Keep them readable while
   still reading as links. */
.is-dark .c-cta a { color: #fb923c; text-decoration-color: rgba(251, 146, 60, 0.5); }
.is-dark .c-cta a:hover { color: #fdba74; }