
/* ============================================================
   HOME LAYOUT 2026-05-16 — STAGE 2 additions
   Top utility bar / header redesign / sticky nav / hero split /
   stats / tools / categories with photo covers + overlay.
   ============================================================ */

/* ─── 1. Top utility bar (dark) ─── */
.rcp-home-topbar {
    background: var(--c-ink);
    color: var(--c-bg);
    font-family: var(--sans);
    font-size: 12px;
}
.rcp-home-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 38px;
}
.rcp-home-topbar__left,
.rcp-home-topbar__right {
    display: flex;
    align-items: center;
    gap: 14px;
}
.rcp-home-topbar__since {
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.6;
    font-size: 11px;
}
.rcp-home-topbar__sep {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.18);
}
.rcp-home-topbar__socials {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rcp-home-topbar__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--c-bg);
    text-decoration: none;
    font-size: 12px;
    opacity: 0.7;
    transition: opacity .12s, background .12s;
}
.rcp-home-topbar__social:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.14);
}
.rcp-home-topbar__link {
    color: var(--c-bg);
    opacity: 0.7;
    text-decoration: none;
    transition: opacity .12s;
}
.rcp-home-topbar__link:hover { opacity: 1; }
.rcp-home-topbar__langs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}
.rcp-home-topbar__lang {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    border-radius: 999px;
    color: var(--c-bg);
    text-decoration: none;
    transition: background .12s, color .12s;
}
.rcp-home-topbar__lang.is-active {
    background: var(--c-bg);
    color: var(--c-ink);
}

/* ─── 2. Main header (redesign — 3-col grid) ─── */
.rcp-home-header__inner {
    grid-template-columns: 1fr auto 1fr;
}
.rcp-home-header__actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-self: end;
}
.rcp-home-cta-saved {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--c-ink);
    text-decoration: none;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    background: transparent;
    transition: background .12s, border-color .12s;
}
.rcp-home-cta-saved:hover {
    background: var(--c-paper);
    border-color: var(--c-line-strong);
}
.rcp-home-cta-analyzer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background: var(--c-accent);
    border-radius: 999px;
    transition: background .12s, transform .12s;
}
.rcp-home-cta-analyzer:hover {
    background: var(--c-accent);
    filter: brightness(0.95);
    transform: translateY(-1px);
    color: #fff;
}

/* ─── 3. Sticky nav strip ─── */
.rcp-home-stickynav {
    background: var(--c-bg);
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    position: sticky;
    top: 0;
    z-index: 40;
}
.rcp-home-stickynav__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.rcp-home-stickynav__inner::-webkit-scrollbar { display: none; }
.rcp-home-stickynav__chip {
    flex-shrink: 0;
    padding: 14px 16px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--c-ink);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    opacity: 0.78;
    white-space: nowrap;
    transition: opacity .12s, border-color .12s;
}
.rcp-home-stickynav__chip:hover { opacity: 1; }
.rcp-home-stickynav__chip.is-active {
    opacity: 1;
    border-bottom-color: var(--c-accent);
}

/* ─── 4. Hero with featured (2-col) ─── */
.rcp-home-hero__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}
.rcp-home-hero__row.has-feat {
    grid-template-columns: 1.15fr 1fr;
}
.rcp-home-hero__cta-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 4px 0 22px;
}
.rcp-home-hero__cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    background: var(--c-ink);
    color: var(--c-bg);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    transition: filter .12s, transform .12s;
}
.rcp-home-hero__cta-primary:hover {
    color: var(--c-bg);
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.rcp-home-hero__cta-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    background: transparent;
    color: var(--c-ink);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--c-ink);
    border-radius: 999px;
    text-decoration: none;
    transition: background .12s, color .12s;
}
.rcp-home-hero__cta-ghost:hover {
    background: var(--c-ink);
    color: var(--c-bg);
}

/* Featured recipe card (right column) */
.rcp-home-hero__col-feat {
    display: flex;
    flex-direction: column;
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: 22px;
    overflow: hidden;
    text-decoration: none;
    color: var(--c-ink);
    transition: transform .15s, box-shadow .15s;
}
.rcp-home-hero__col-feat:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 32px -18px rgba(26, 31, 24, 0.28);
}
.rcp-home-hero__featArt {
    aspect-ratio: 5 / 4;
    position: relative;
    background-size: cover;
    background-position: center;
}
.rcp-home-hero__featArt::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.35) 100%);
}
.rcp-home-hero__featBadge {
    position: absolute;
    left: 20px;
    top: 20px;
    background: var(--c-bg);
    color: var(--c-ink);
    padding: 6px 13px;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 999px;
    z-index: 1;
}
.rcp-home-hero__featBody {
    padding: 24px 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rcp-home-hero__featCat {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-muted);
}
.rcp-home-hero__featTitle {
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -0.015em;
    margin: 2px 0 0;
    color: var(--c-ink);
    text-wrap: balance;
}
.rcp-home-hero__featSnippet {
    font-family: var(--serif);
    font-style: italic;
    font-size: 14.5px;
    color: var(--c-ink-2);
    line-height: 1.5;
    margin: 4px 0 6px;
}
.rcp-home-hero__featCta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-accent);
    margin-top: 6px;
}

/* ─── 5. Stats row ─── */
.rcp-home-stats {
    background: var(--c-bg);
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    padding: 36px 0;
}
.rcp-home-stats__inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    text-align: center;
}
.rcp-home-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.rcp-home-stat__num {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(40px, 5vw, 58px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--c-accent);
}
.rcp-home-stat__lbl {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-muted);
    max-width: 220px;
}

/* ─── 6. Tools row ─── */
.rcp-home-tools {
    background: var(--c-bg);
    padding: 60px 0 50px;
}
.rcp-home-tools__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.rcp-home-tool {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: 16px;
    text-decoration: none;
    color: var(--c-ink);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.rcp-home-tool:hover {
    transform: translateY(-2px);
    border-color: var(--c-accent);
    box-shadow: 0 10px 22px -16px rgba(26, 31, 24, 0.18);
}
.rcp-home-tool__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 500;
}
.rcp-home-tool__name {
    display: block;
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--c-ink);
}
.rcp-home-tool__desc {
    display: block;
    font-family: var(--serif);
    font-style: italic;
    font-size: 12.5px;
    color: var(--c-muted);
    margin-top: 2px;
    line-height: 1.4;
}
.rcp-home-tool__arrow {
    color: var(--c-accent);
}

/* ─── 7. Categories with photo covers — overlay & override ─── */
.rcp-home-cat-card__art {
    background-size: cover;
    background-position: center;
}
.rcp-home-cat-card__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;
}
.rcp-home-cat-card__num {
    z-index: 1;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ─── Mobile responsive — Stage 2 ─── */
@media (max-width: 1100px) {
    .rcp-home-hero__row.has-feat {
        grid-template-columns: 1fr;
    }
    .rcp-home-tools__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .rcp-home-cta-saved span { display: none; }
}

@media (max-width: 960px) {
    .rcp-home-topbar__since,
    .rcp-home-topbar__link { display: none; }
    .rcp-home-topbar__inner { gap: 12px; }
    .rcp-home-header__inner {
        grid-template-columns: auto 1fr auto;
    }
    .rcp-home-header__actions { gap: 6px; }
    .rcp-home-cta-saved { padding: 8px 12px; }
    .rcp-home-cta-analyzer { padding: 9px 14px; font-size: 12px; }
    .rcp-home-cta-analyzer span { display: inline; }
    .rcp-home-stickynav__inner {
        justify-content: flex-start;
        padding: 0 22px;
    }
    .rcp-home-hero__featArt { aspect-ratio: 16 / 10; }
    .rcp-home-hero__featTitle { font-size: 22px; }
    .rcp-home-stats__inner { gap: 18px; }
    .rcp-home-stat__num { font-size: 36px; }
    .rcp-home-stat__lbl { font-size: 11px; letter-spacing: 0.1em; }
}

@media (max-width: 600px) {
    .rcp-home-topbar__socials a:nth-child(n+5) { display: none; }
    .rcp-home-topbar__langs { padding: 1px; }
    .rcp-home-topbar__lang { padding: 2px 8px; font-size: 10px; }
    .rcp-home-header__inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 14px;
    }
    .rcp-home-header__actions {
        justify-self: center;
    }
    .rcp-home-hero__cta-row { width: 100%; }
    .rcp-home-hero__cta-primary,
    .rcp-home-hero__cta-ghost {
        flex: 1;
        justify-content: center;
        padding: 12px 16px;
        font-size: 13px;
    }
    .rcp-home-stats__inner { grid-template-columns: 1fr; gap: 20px; }
    .rcp-home-stat__num { font-size: 42px; }
    .rcp-home-tools__grid { grid-template-columns: 1fr; }
    .rcp-home-tool { padding: 14px; }
    .rcp-home-tool__name { font-size: 15px; }
    .rcp-home-hero__featBody { padding: 18px 20px 22px; }
    .rcp-home-hero__featTitle { font-size: 20px; }
}

/* ============================================================
   HOME LAYOUT 2026-05-16 — STAGE 3 additions
   Big CTA / Popular+Tips / Moments / Newsletter / SEO / Footer.
   ============================================================ */

/* ─── 1. Big CTA dark card ─── */
.rcp-home-bigcta {
    background: var(--c-bg);
    padding: 30px 0 70px;
}
.rcp-home-bigcta__card {
    background: var(--c-ink);
    color: var(--c-bg);
    border-radius: 24px;
    padding: 56px 64px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.rcp-home-bigcta__halo {
    position: absolute;
    right: -120px;
    top: -120px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: hsl(28, 48%, 50%);
    opacity: 0.55;
    filter: blur(48px);
    pointer-events: none;
}
.rcp-home-bigcta__col-text { position: relative; z-index: 1; }
.rcp-home-bigcta__kicker {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-gold);
    margin-bottom: 14px;
}
.rcp-home-bigcta__h {
    font-family: var(--serif);
    font-size: clamp(36px, 4.6vw, 56px);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.025em;
    margin: 0 0 16px;
    text-wrap: balance;
    color: var(--c-bg);
}
.rcp-home-bigcta__h em {
    font-style: italic;
    color: var(--c-gold);
    font-weight: 400;
}
.rcp-home-bigcta__sub {
    font-family: var(--serif);
    font-style: italic;
    font-size: 17px;
    line-height: 1.55;
    opacity: 0.78;
    margin: 0 0 26px;
    max-width: 520px;
}
.rcp-home-bigcta__cta-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 12px;
}
.rcp-home-bigcta__cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    background: var(--c-bg);
    color: var(--c-ink);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    transition: filter .12s, transform .12s;
}
.rcp-home-bigcta__cta-primary:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
    color: var(--c-ink);
}
.rcp-home-bigcta__cta-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    background: transparent;
    color: var(--c-bg);
    border: 1px solid rgba(247, 241, 230, 0.32);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    transition: background .12s, border-color .12s;
}
.rcp-home-bigcta__cta-ghost:hover {
    background: rgba(247, 241, 230, 0.1);
    border-color: rgba(247, 241, 230, 0.5);
    color: var(--c-bg);
}
.rcp-home-bigcta__photos {
    position: relative;
    height: 260px;
    z-index: 1;
}
.rcp-home-bigcta__photo {
    position: absolute;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.4);
    border: 3px solid var(--c-paper);
}
.rcp-home-bigcta__photo--1 { left: 0;   top: 10px;  width: 150px; height: 190px; transform: rotate(-4deg); }
.rcp-home-bigcta__photo--2 { left: 92px; top: 40px;  width: 160px; height: 200px; transform: rotate(5deg);  z-index: 1; }
.rcp-home-bigcta__photo--3 { left: 196px; top: 5px;  width: 145px; height: 185px; transform: rotate(-3deg); }

/* ─── 2. Popular + Tips wrapper ─── */
.rcp-home-poptips {
    background: var(--c-bg);
    padding: 60px 0 70px;
}
.rcp-home-poptips__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 56px;
}

/* Popular numbered list */
.rcp-home-popular__list {
    display: grid;
    gap: 6px;
}
.rcp-home-popular__row {
    display: grid;
    grid-template-columns: 32px 64px 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 14px 20px;
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: 12px;
    text-decoration: none;
    color: var(--c-ink);
    transition: transform .12s, box-shadow .12s, border-color .12s;
}
.rcp-home-popular__row:hover {
    transform: translateX(2px);
    border-color: var(--c-accent);
    box-shadow: 0 8px 18px -14px rgba(26, 31, 24, 0.2);
}
.rcp-home-popular__num {
    font-family: var(--serif);
    font-style: italic;
    font-size: 36px;
    font-weight: 500;
    line-height: 1;
    color: var(--c-accent);
    text-align: center;
}
.rcp-home-popular__thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: var(--c-paper-2);
}
.rcp-home-popular__body { min-width: 0; }
.rcp-home-popular__cat {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-muted);
}
.rcp-home-popular__title {
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-top: 3px;
    color: var(--c-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rcp-home-popular__arrow { color: var(--c-accent); }

/* Tips cards */
.rcp-home-tips__list {
    display: grid;
    gap: 14px;
}
.rcp-home-tips__card {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 16px;
    padding: 14px;
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: 14px;
    text-decoration: none;
    color: var(--c-ink);
    align-items: center;
    transition: transform .12s, box-shadow .12s;
}
.rcp-home-tips__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -16px rgba(26, 31, 24, 0.2);
}
.rcp-home-tips__thumb {
    width: 84px;
    height: 84px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-color: var(--c-paper-2);
}
.rcp-home-tips__title {
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.22;
    letter-spacing: -0.01em;
    color: var(--c-ink);
}
.rcp-home-tips__desc {
    font-family: var(--serif);
    font-style: italic;
    font-size: 13px;
    color: var(--c-muted);
    margin-top: 4px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rcp-home-tips__more {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-ink);
    text-decoration: none;
    border-bottom: 1.5px solid var(--c-ink);
    padding-bottom: 4px;
}

/* ─── 3. Moments grid ─── */
.rcp-home-moments {
    background: var(--c-paper-2);
    padding: 60px 0 70px;
}
.rcp-home-moments__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.rcp-home-moment {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px;
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: 18px;
    text-decoration: none;
    color: var(--c-ink);
    min-height: 200px;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: transform .15s, box-shadow .15s;
}
.rcp-home-moment:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 24px -16px rgba(26, 31, 24, 0.22);
}
.rcp-home-moment__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c-ink);
    font-family: var(--serif);
    font-style: italic;
    font-size: 26px;
    font-weight: 500;
}
.rcp-home-moment__k {
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.04;
    color: var(--c-ink);
}
.rcp-home-moment__d {
    font-family: var(--serif);
    font-style: italic;
    font-size: 14.5px;
    color: var(--c-ink-2);
    margin-top: 6px;
    line-height: 1.45;
}
.rcp-home-moment__arrow {
    position: absolute;
    right: 22px;
    bottom: 22px;
    color: var(--c-accent);
}

/* ─── 4. Newsletter ─── */
.rcp-home-newsletter {
    background: var(--c-bg);
    padding: 60px 0 30px;
}
.rcp-home-newsletter__card {
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: 22px;
    padding: 48px 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.rcp-home-newsletter__tag {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-bottom: 12px;
}
.rcp-home-newsletter__title {
    font-family: var(--serif);
    font-size: 36px;
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -0.025em;
    margin: 0 0 12px;
    text-wrap: balance;
    color: var(--c-ink);
}
.rcp-home-newsletter__title em {
    font-style: italic;
    color: var(--c-accent);
    font-weight: 400;
}
.rcp-home-newsletter__desc {
    font-family: var(--serif);
    font-style: italic;
    font-size: 15px;
    color: var(--c-ink-2);
    line-height: 1.5;
    margin: 0;
    max-width: 420px;
}
.rcp-home-newsletter__form-wrap { display: flex; flex-direction: column; gap: 10px; }
.rcp-home-newsletter__form {
    display: flex;
    gap: 8px;
    padding: 6px;
    background: var(--c-bg);
    border: 1.5px solid var(--c-ink);
    border-radius: 999px;
}
.rcp-home-newsletter__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 10px 16px;
    font-family: var(--serif);
    font-size: 15px;
    color: var(--c-ink);
    min-width: 0;
}
.rcp-home-newsletter__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--c-accent);
    color: #fff;
    border: none;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: filter .12s;
}
.rcp-home-newsletter__btn:hover { filter: brightness(1.06); }
.rcp-home-newsletter__legal {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--c-muted);
    text-align: center;
    margin: 0;
}

/* ─── 5. SEO text block ─── */
.rcp-home-seo {
    background: var(--c-bg);
    border-top: 1px solid var(--c-line);
    padding: 70px 0;
}
.rcp-home-seo__inner {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 32px;
}
.rcp-home-seo__kicker {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-accent);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.rcp-home-seo__kicker::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--c-accent);
}
.rcp-home-seo__title {
    font-family: var(--serif);
    font-size: clamp(30px, 3.4vw, 40px);
    font-weight: 500;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
    color: var(--c-ink);
}
.rcp-home-seo__body p {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.7;
    color: var(--c-ink-2);
    margin: 0 0 16px;
    text-wrap: pretty;
}

/* ─── 6. Footer redesign ─── */
.rcp-home-footer {
    background: var(--c-ink);
    color: var(--c-bg);
    padding: 56px 0 28px;
}
.rcp-home-footer__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 48px;
}
.rcp-home-footer__brand-name {
    display: block;
    font-family: var(--serif);
    font-style: italic;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--c-bg);
    text-decoration: none;
    margin-bottom: 12px;
}
.rcp-home-footer__brand-name em {
    color: var(--c-gold);
    font-style: italic;
}
.rcp-home-footer__tagline {
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    color: rgba(247, 241, 230, 0.62);
    max-width: 340px;
    line-height: 1.5;
    margin: 0 0 20px;
}
.rcp-home-footer__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.rcp-home-footer__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(247, 241, 230, 0.08);
    color: var(--c-bg);
    text-decoration: none;
    font-size: 14px;
    transition: background .12s, color .12s;
}
.rcp-home-footer__social:hover {
    background: var(--c-gold);
    color: var(--c-ink);
}
.rcp-home-footer__col h4 {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(247, 241, 230, 0.5);
    margin: 0 0 18px;
}
.rcp-home-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.rcp-home-footer__col a {
    color: rgba(247, 241, 230, 0.78);
    text-decoration: none;
    font-family: var(--serif);
    font-size: 15px;
    transition: color .12s;
}
.rcp-home-footer__col a:hover { color: var(--c-bg); }
.rcp-home-footer__bottom {
    border-top: 1px solid rgba(247, 241, 230, 0.12);
    margin-top: 44px;
    padding-top: 22px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.rcp-home-footer__copy {
    font-family: var(--sans);
    font-size: 12px;
    color: rgba(247, 241, 230, 0.55);
    margin: 0;
}
.rcp-home-footer__bottom-links {
    display: inline-flex;
    align-items: center;
    gap: 18px;
}
.rcp-home-footer__bottom-links a {
    font-family: var(--sans);
    font-size: 12px;
    color: rgba(247, 241, 230, 0.65);
    text-decoration: none;
    transition: color .12s;
}
.rcp-home-footer__bottom-links a:hover { color: var(--c-bg); }
.rcp-home-footer__bottom-langs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px;
    background: rgba(247, 241, 230, 0.08);
    border-radius: 999px;
}
.rcp-home-footer__bottom-lang {
    padding: 3px 10px;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    border-radius: 999px;
    color: var(--c-bg);
    text-decoration: none;
}
.rcp-home-footer__bottom-lang.is-active {
    background: var(--c-bg);
    color: var(--c-ink);
}
.rcp-home-footer__legal {
    font-family: var(--sans);
    font-size: 11px;
    color: rgba(247, 241, 230, 0.42);
    line-height: 1.55;
    margin: 18px 0 0;
    max-width: 920px;
}

/* ─── Stage 3 mobile responsive ─── */
@media (max-width: 1100px) {
    .rcp-home-bigcta__card { grid-template-columns: 1fr; padding: 44px 40px; }
    .rcp-home-bigcta__photos { display: none; }
    .rcp-home-poptips__grid { grid-template-columns: 1fr; gap: 40px; }
    .rcp-home-moments__grid { grid-template-columns: repeat(2, 1fr); }
    .rcp-home-newsletter__card { grid-template-columns: 1fr; gap: 24px; padding: 40px 36px; }
    .rcp-home-footer__inner { grid-template-columns: 1fr 1fr 1fr; gap: 36px; }
    .rcp-home-footer__brand-block { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
    .rcp-home-bigcta__card { padding: 36px 28px; }
    .rcp-home-bigcta__h { font-size: 34px; }
    .rcp-home-bigcta__cta-primary,
    .rcp-home-bigcta__cta-ghost { padding: 12px 18px; font-size: 13px; }
    .rcp-home-popular__row { grid-template-columns: 28px 56px 1fr auto; gap: 14px; padding: 12px 14px; }
    .rcp-home-popular__thumb { width: 56px; height: 56px; }
    .rcp-home-popular__num { font-size: 30px; }
    .rcp-home-tips__card { grid-template-columns: 72px 1fr; }
    .rcp-home-tips__thumb { width: 72px; height: 72px; }
    .rcp-home-moment { padding: 22px; min-height: 180px; }
    .rcp-home-moment__k { font-size: 24px; }
    .rcp-home-seo__title { font-size: 30px; }
    .rcp-home-seo__body p { font-size: 16px; }
    .rcp-home-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .rcp-home-bigcta__card { padding: 28px 22px; border-radius: 18px; }
    .rcp-home-bigcta__h { font-size: 28px; }
    .rcp-home-bigcta__sub { font-size: 15px; }
    .rcp-home-bigcta__cta-row { flex-direction: column; gap: 10px; width: 100%; }
    .rcp-home-bigcta__cta-primary,
    .rcp-home-bigcta__cta-ghost { justify-content: center; width: 100%; }
    .rcp-home-popular__row { grid-template-columns: 24px 48px 1fr; }
    .rcp-home-popular__arrow { display: none; }
    .rcp-home-popular__thumb { width: 48px; height: 48px; }
    .rcp-home-popular__title { font-size: 14px; }
    .rcp-home-tips__card { grid-template-columns: 64px 1fr; padding: 12px; }
    .rcp-home-tips__thumb { width: 64px; height: 64px; }
    .rcp-home-tips__title { font-size: 15px; }
    .rcp-home-moments__grid { grid-template-columns: 1fr; }
    .rcp-home-newsletter__card { padding: 28px 22px; }
    .rcp-home-newsletter__title { font-size: 26px; }
    .rcp-home-newsletter__form { flex-direction: column; gap: 8px; border-radius: 18px; }
    .rcp-home-newsletter__btn { justify-content: center; width: 100%; }
    .rcp-home-seo { padding: 50px 0; }
    .rcp-home-seo__title { font-size: 26px; }
    .rcp-home-seo__body p { font-size: 15px; line-height: 1.6; }
    .rcp-home-footer { padding: 44px 0 22px; }
    .rcp-home-footer__inner { grid-template-columns: 1fr; gap: 28px; }
    .rcp-home-footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════
   HIDE TEMPLATE WRAPPERS ON HOME PAGES (Stage 2/3 duplicate fix)
   Recepty template index.php renders <header.rcp-header> + <nav.rcp-nav>
   + <footer.rcp-footer>. Our default_home.php renders own .rcp-home-*
   wrappers. Both visible = duplicates.

   This rule hides template wrappers WHEN .rcp-home is present
   (only on home pages). 213 categories untouched.

   Browser support: CSS :has() Chrome 105+ / Firefox 121+ / Safari 15.4+
   (~96% users May 2026). Older browsers see duplicates (graceful).
   ═══════════════════════════════════════════════════════════════════ */

body:has(.rcp-home) > header.rcp-header,
body:has(.rcp-home) > nav.rcp-nav,
body:has(.rcp-home) > footer.rcp-footer {
    display: none !important;
}

/* Also hide if template uses .site-header / .site-footer (defensive) */
body:has(.rcp-home) .site-header,
body:has(.rcp-home) .site-footer {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   STAGE 4 — Fix A1: FA brand classes MISSING from JCH bundle
   recepty's CSS includes only USED FA classes (Telegram/IG/YT/VK).
   Pinterest-p / Facebook-f / Odnoklassniki — NOT used elsewhere → purged
   by JCH "Smart Bundle". We add them here (template-home.css is JCH-excluded).
   Generic .fa-brands rule (display/size/mask-position) already in bundle.
   SVG paths from FontAwesome 6.5.1 Free Brands (matching cdnjs version).
   ═══════════════════════════════════════════════════════════════════ */

.fa-pinterest-p {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path fill='currentColor' d='M204 6.5C101.4 6.5 0 74.9 0 185.6 0 256 39.6 296 63.6 296c9.9 0 15.6-27.6 15.6-35.4 0-9.3-23.7-29.1-23.7-67.8 0-80.4 61.2-137.4 140.4-137.4 68.1 0 118.5 38.7 118.5 109.8 0 53.1-21.3 152.7-90.3 152.7-24.9 0-46.2-18-46.2-43.8 0-37.8 26.4-74.4 26.4-113.4 0-66.2-93.9-54.2-93.9 25.8 0 16.8 2.1 35.4 9.6 50.7-13.8 59.4-42 147.9-42 209.1 0 18.9 2.7 37.5 4.5 56.4 3.4 3.8 1.7 3.4 6.9 1.5 50.4-69 48.6-82.5 71.4-172.8 12.3 23.4 44.1 36 69.3 36 106.2 0 153.9-103.5 153.9-196.8C384 71.3 277.5 6.5 204 6.5z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path fill='currentColor' d='M204 6.5C101.4 6.5 0 74.9 0 185.6 0 256 39.6 296 63.6 296c9.9 0 15.6-27.6 15.6-35.4 0-9.3-23.7-29.1-23.7-67.8 0-80.4 61.2-137.4 140.4-137.4 68.1 0 118.5 38.7 118.5 109.8 0 53.1-21.3 152.7-90.3 152.7-24.9 0-46.2-18-46.2-43.8 0-37.8 26.4-74.4 26.4-113.4 0-66.2-93.9-54.2-93.9 25.8 0 16.8 2.1 35.4 9.6 50.7-13.8 59.4-42 147.9-42 209.1 0 18.9 2.7 37.5 4.5 56.4 3.4 3.8 1.7 3.4 6.9 1.5 50.4-69 48.6-82.5 71.4-172.8 12.3 23.4 44.1 36 69.3 36 106.2 0 153.9-103.5 153.9-196.8C384 71.3 277.5 6.5 204 6.5z'/></svg>");
}

.fa-facebook-f {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path fill='currentColor' d='M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path fill='currentColor' d='M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z'/></svg>");
}

.fa-odnoklassniki {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path fill='currentColor' d='M275.1 334c-27.4 17.4-65.1 24.3-90 27l20.9 20.6 76.3 76.3c27.9 28.6-17.5 73.3-45.7 45.7-19.1-19.4-47.1-47.4-76.3-76.6L84 503.6c-28.2 27.5-73.6-17.6-45.4-45.7 19.4-19.4 47.1-47.1 76.3-76.3l20.6-20.6c-24.6-2.7-62.9-9.3-90.6-27-32.6-20.9-46.9-33.3-34.3-59 7.4-14.6 27.7-26.9 54.6-5.7 0 0 36.3 28.9 94.9 28.9s94.9-28.9 94.9-28.9c26.9-21.1 47.1-8.9 54.6 5.7 12.4 25.7-1.9 38.1-34.5 59.1zM30.3 129.7C30.3 58.1 88.6 0 160 0s129.7 58.1 129.7 129.7S231.4 259.4 160 259.4 30.3 201.1 30.3 129.7zm66.9 0c0 34.6 28.2 62.6 62.9 62.6s62.9-28 62.9-62.6S194.8 67 160 67s-62.9 28.1-62.9 62.7z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path fill='currentColor' d='M275.1 334c-27.4 17.4-65.1 24.3-90 27l20.9 20.6 76.3 76.3c27.9 28.6-17.5 73.3-45.7 45.7-19.1-19.4-47.1-47.4-76.3-76.6L84 503.6c-28.2 27.5-73.6-17.6-45.4-45.7 19.4-19.4 47.1-47.1 76.3-76.3l20.6-20.6c-24.6-2.7-62.9-9.3-90.6-27-32.6-20.9-46.9-33.3-34.3-59 7.4-14.6 27.7-26.9 54.6-5.7 0 0 36.3 28.9 94.9 28.9s94.9-28.9 94.9-28.9c26.9-21.1 47.1-8.9 54.6 5.7 12.4 25.7-1.9 38.1-34.5 59.1zM30.3 129.7C30.3 58.1 88.6 0 160 0s129.7 58.1 129.7 129.7S231.4 259.4 160 259.4 30.3 201.1 30.3 129.7zm66.9 0c0 34.6 28.2 62.6 62.9 62.6s62.9-28 62.9-62.6S194.8 67 160 67s-62.9 28.1-62.9 62.7z'/></svg>");
}

/* ═══════════════════════════════════════════════════════════════════
   STAGE 4 — Fix A2: Override .rcp-home-header padding (Stage 1 used 26px,
   too airy with current brand size). Reduce to 14px → header height
   115px → ~91px = saves 24px vertical stack.
   .rcp-home-header rule lives in template.css (Stage 1 portion). This
   override loads AFTER bundle (template-home.css is separate <link>).
   ═══════════════════════════════════════════════════════════════════ */

.rcp-home-header {
    padding: 14px 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   STAGE 4 — Fix B1+B2: vertical spacing (top breadcrumbs + bottom)
   User feedback 2026-05-16: большие отступы сверху и снизу.
   ═══════════════════════════════════════════════════════════════════ */

/* B1 — Hide empty recepty breadcrumbs on home pages (rcp-crumbs is direct
   body child от template index.php; empty on home but takes 22px + ~32 gap). */
body:has(.rcp-home) > .rcp-crumbs,
body:has(.rcp-home) .rcp-crumbs.container {
    display: none !important;
}

/* B2 — Reduce SEO block + footer paddings.
   Cuts ~50px between SEO text and footer content (126px → 76px gap). */
.rcp-home-seo {
    padding: 50px 0 36px !important;
}
.rcp-home-footer {
    padding: 36px 0 24px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   STAGE 4 — Fix B4: Remove .rcp-main wrapper vertical padding on home.
   .rcp-main has padding: 32px 0 64px (template critical CSS) — kills
   32px residual top gap + 64px residual bottom gap. Home only.
   ═══════════════════════════════════════════════════════════════════ */
body:has(.rcp-home) > main.rcp-main {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
}
