/* Social Butterflies - warm, family-friendly section theme */
body.social-butterflies-page {
  --sb-bg: #fff8f3;
  --sb-bg-soft: #fff0e6;
  --sb-surface: #ffffff;
  --sb-text: #3d2c29;
  --sb-text-2: #6b534d;
  --sb-text-3: #9a7f78;
  --sb-coral: #e87461;
  --sb-coral-dark: #c95644;
  --sb-gold: #f4a261;
  --sb-teal: #2a9d8f;
  --sb-lavender: #b5838d;
  --sb-border: rgba(61, 44, 41, 0.12);
  --sb-shadow: 0 12px 40px rgba(232, 116, 97, 0.12);
  background: linear-gradient(165deg, var(--sb-bg) 0%, #ffe8dc 45%, #fff5ef 100%);
  color: var(--sb-text);
}
body.social-butterflies-page .grain-overlay { opacity: 0.04; mix-blend-mode: multiply; }
body.social-butterflies-page .navbar {
  background: #1a1a1c;
  border: 2px solid var(--gold);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
}
body.social-butterflies-page .navbar .nav-links {
  background: #121214;
  border: 2px solid var(--gold);
}
body.social-butterflies-page .navbar .nav-links a { color: #f0f0f0; }
body.social-butterflies-page .navbar .nav-links a:hover,
body.social-butterflies-page .navbar .nav-links a.active {
  color: #1a1a1a;
  background: var(--gold);
}
body.social-butterflies-page .nav-logo span, body.social-butterflies-page .nav-logo-fallback span { color: var(--text); }
body.social-butterflies-page .page-shell { background: transparent; }
body.social-butterflies-page .sb-hero { text-align: center; padding: 24px 0 48px; max-width: 820px; margin: 0 auto; }
body.social-butterflies-page .sb-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: rgba(244, 162, 97, 0.18); border: 1px solid rgba(244, 162, 97, 0.35); color: var(--sb-coral-dark); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 20px; }
body.social-butterflies-page .sb-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sb-coral); box-shadow: 0 0 0 4px rgba(232, 116, 97, 0.2); }
body.social-butterflies-page .sb-hero h1 { font-family: var(--font); font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 16px; color: var(--sb-text); }
body.social-butterflies-page .sb-hero h1 span { background: linear-gradient(120deg, var(--sb-coral) 0%, var(--sb-gold) 55%, var(--sb-teal) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.social-butterflies-page .sb-hero-lead { font-size: 1.05rem; line-height: 1.75; color: var(--sb-text-2); max-width: 640px; margin: 0 auto 28px; }
body.social-butterflies-page .sb-hero-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
body.social-butterflies-page .sb-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
body.social-butterflies-page .sb-btn:hover { transform: translateY(-1px); }
body.social-butterflies-page .sb-btn-primary { background: linear-gradient(135deg, var(--sb-coral) 0%, var(--sb-gold) 100%); color: #fff; box-shadow: var(--sb-shadow); }
body.social-butterflies-page .sb-btn-outline { background: var(--sb-surface); color: var(--sb-coral-dark); border: 1px solid var(--sb-border); }
body.social-butterflies-page .sb-section { margin-bottom: 48px; }
body.social-butterflies-page .sb-section-title { font-family: var(--font); font-size: 1.45rem; font-weight: 700; margin-bottom: 8px; color: var(--sb-text); letter-spacing: -0.02em; }
body.social-butterflies-page .sb-section-intro { color: var(--sb-text-2); font-size: 0.95rem; line-height: 1.7; margin-bottom: 24px; max-width: 720px; }
body.social-butterflies-page .sb-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
body.social-butterflies-page .sb-card { background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 16px; padding: 24px; box-shadow: var(--sb-shadow); }
body.social-butterflies-page .sb-card-icon { font-size: 1.6rem; margin-bottom: 12px; }
body.social-butterflies-page .sb-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; color: var(--sb-text); }
body.social-butterflies-page .sb-card p, body.social-butterflies-page .sb-card li { font-size: 0.92rem; line-height: 1.65; color: var(--sb-text-2); }
body.social-butterflies-page .sb-card ul { margin: 0; padding-left: 18px; }
body.social-butterflies-page .sb-card li + li { margin-top: 8px; }
body.social-butterflies-page .sb-card--coral { border-top: 4px solid var(--sb-coral); }
body.social-butterflies-page .sb-card--gold { border-top: 4px solid var(--sb-gold); }
body.social-butterflies-page .sb-card--teal { border-top: 4px solid var(--sb-teal); }
body.social-butterflies-page .sb-card--lavender { border-top: 4px solid var(--sb-lavender); }
body.social-butterflies-page .sb-callout { background: linear-gradient(135deg, rgba(244, 162, 97, 0.15) 0%, rgba(42, 157, 143, 0.1) 100%); border: 1px solid var(--sb-border); border-radius: 16px; padding: 28px 32px; text-align: center; }
body.social-butterflies-page .sb-callout p { color: var(--sb-text-2); line-height: 1.7; margin-bottom: 16px; }
body.social-butterflies-page .sb-callout strong { color: var(--sb-text); }
body.social-butterflies-page .sb-driver-link { color: var(--sb-teal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
body.social-butterflies-page .footer { background: rgba(255, 240, 230, 0.85); border-top: 1px solid var(--sb-border); }
body.social-butterflies-page .footer, body.social-butterflies-page .footer a { color: var(--sb-text-2); }
body.social-butterflies-page .footer-brand span { color: var(--sb-text); }
/* Family Circle community */
body.sb-community-page .sb-back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px; font-size: 0.88rem; color: var(--sb-text-2); text-decoration: none; }
body.sb-community-page .sb-back-link:hover { color: var(--sb-coral-dark); }
body.sb-community-page .sb-community-hero { text-align: center; padding: 8px 0 32px; max-width: 720px; margin: 0 auto 24px; }
body.sb-community-page .sb-community-welcome { margin-bottom: 28px; max-width: 720px; }
body.sb-community-page .sb-community-welcome ul { margin: 12px 0 0; padding-left: 20px; }
body.sb-community-page .sb-community-welcome li { margin-top: 8px; font-size: 0.92rem; line-height: 1.65; color: var(--sb-text-2); }
body.sb-community-page .sb-signin-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; padding: 20px 24px; }
body.sb-community-page .sb-signin-title { font-weight: 600; margin-bottom: 4px; color: var(--sb-text); }
body.sb-community-page .sb-signin-sub { font-size: 0.88rem; color: var(--sb-text-2); margin: 0; }
body.sb-community-page .sb-signin-actions { display: flex; gap: 10px; flex-wrap: wrap; }
body.sb-community-page .sb-community-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
body.sb-community-page .sb-thread-list { margin-bottom: 24px; }
body.sb-community-page .sb-thread-item { background: var(--sb-surface); border-color: var(--sb-border); color: var(--sb-text); }
body.sb-community-page .sb-thread-item:hover { border-color: rgba(232, 116, 97, 0.35); background: var(--sb-bg-soft); }
body.sb-community-page .sb-thread-item .thread-item-meta { color: var(--sb-text-3); }
body.sb-community-page .sb-thread-item .thread-item-stats { color: var(--sb-text-3); }
body.sb-community-page .sb-empty-state { text-align: center; padding: 32px 24px; max-width: 560px; margin: 0 auto; }
body.sb-community-page .sb-empty-lead { font-weight: 600; font-size: 1.05rem; color: var(--sb-text); margin-bottom: 10px; }
body.sb-community-page .sb-muted { color: var(--sb-text-2); font-size: 0.92rem; line-height: 1.65; }
body.sb-community-page .sb-thread-article { padding: 28px; margin-bottom: 24px; }
body.sb-community-page .sb-thread-title { font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin-bottom: 8px; color: var(--sb-text); }
body.sb-community-page .sb-thread-meta { font-size: 0.85rem; color: var(--sb-text-3); margin-bottom: 20px; }
body.sb-community-page .sb-thread-body { font-size: 0.95rem; line-height: 1.75; color: var(--sb-text-2); white-space: pre-wrap; }
body.sb-community-page .sb-reply-card { background: var(--sb-surface); border-color: var(--sb-border); }
body.sb-community-page .sb-reply-card .reply-author { color: var(--sb-coral-dark); font-weight: 600; }
body.sb-community-page .sb-reply-card .reply-date { color: var(--sb-text-3); }
body.sb-community-page .sb-reply-card .reply-body { color: var(--sb-text-2); }
body.sb-community-page .sb-form .form-label { color: var(--sb-text); }
body.sb-community-page .sb-form .form-input { background: var(--sb-surface); border-color: var(--sb-border); color: var(--sb-text); }
body.sb-community-page .hidden { display: none !important; }
body.sb-community-page .sb-community-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
body.sb-community-page .sb-community-tab { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--sb-border); background: var(--sb-surface); color: var(--sb-text-2); font-size: 0.88rem; font-weight: 600; text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease; }
body.sb-community-page .sb-community-tab:hover { border-color: rgba(232, 116, 97, 0.45); color: var(--sb-coral-dark); }
body.sb-community-page .sb-community-tab.is-active { border-color: var(--sb-coral); color: var(--sb-coral-dark); background: rgba(244, 162, 97, 0.12); }
body.sb-community-page .sb-recipe-label-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
body.sb-community-page .sb-recipe-label-chip { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--sb-border); background: var(--sb-surface); color: var(--sb-text-2); font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: border-color 0.2s ease, background 0.2s ease; }
body.sb-community-page .sb-recipe-label-chip:hover { border-color: rgba(42, 157, 143, 0.45); }
body.sb-community-page .sb-recipe-label-chip.is-active { border-color: var(--sb-teal); color: var(--sb-teal); background: rgba(42, 157, 143, 0.1); }
body.sb-community-page .sb-recipe-label-picker { display: flex; flex-wrap: wrap; gap: 8px; }
body.sb-community-page .sb-recipe-list { display: grid; gap: 12px; margin-bottom: 24px; }
body.sb-community-page .sb-recipe-item { padding: 0; overflow: hidden; }
body.sb-community-page .sb-recipe-summary { list-style: none; cursor: pointer; padding: 18px 20px; display: grid; gap: 8px; }
body.sb-community-page .sb-recipe-summary::-webkit-details-marker { display: none; }
body.sb-community-page .sb-recipe-summary::after { content: '▸'; justify-self: end; color: var(--sb-text-3); font-size: 0.9rem; grid-column: 1 / -1; }
body.sb-community-page .sb-recipe-item[open] .sb-recipe-summary::after { content: '▾'; }
body.sb-community-page .sb-recipe-item-title { font-weight: 700; font-size: 1.02rem; color: var(--sb-text); }
body.sb-community-page .sb-recipe-item-meta { font-size: 0.82rem; color: var(--sb-text-3); }
body.sb-community-page .sb-recipe-label-row { display: flex; flex-wrap: wrap; gap: 6px; }
body.sb-community-page .sb-recipe-label { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(42, 157, 143, 0.12); color: var(--sb-teal); font-size: 0.75rem; font-weight: 600; text-decoration: none; }
body.sb-community-page a.sb-recipe-label:hover { background: rgba(42, 157, 143, 0.2); }
body.sb-community-page .sb-recipe-item-body { padding: 0 20px 18px; border-top: 1px solid var(--sb-border); }
body.sb-community-page .sb-recipe-item-body p { font-size: 0.92rem; line-height: 1.65; color: var(--sb-text-2); margin: 14px 0; }
body.sb-community-page .sb-recipe-detail { padding: 28px; margin-bottom: 24px; }
body.sb-community-page .sb-recipe-detail-title { font-size: 1.55rem; font-weight: 700; margin-bottom: 10px; color: var(--sb-text); }
body.sb-community-page .sb-recipe-detail-meta { font-size: 0.85rem; color: var(--sb-text-3); margin-bottom: 12px; }
body.sb-community-page .sb-recipe-detail-summary { font-size: 0.95rem; line-height: 1.7; color: var(--sb-text-2); margin-bottom: 16px; }
body.sb-community-page .sb-recipe-owner-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
body.sb-community-page .sb-recipe-delete-btn { color: var(--sb-coral-dark); border-color: rgba(232, 116, 97, 0.35); }
body.sb-community-page .sb-recipe-fold { border: 1px solid var(--sb-border); border-radius: 12px; margin-top: 12px; background: var(--sb-bg-soft); }
body.sb-community-page .sb-recipe-fold summary { cursor: pointer; padding: 14px 18px; font-weight: 600; color: var(--sb-text); list-style: none; }
body.sb-community-page .sb-recipe-fold summary::-webkit-details-marker { display: none; }
body.sb-community-page .sb-recipe-fold-body { padding: 0 18px 16px; font-size: 0.92rem; line-height: 1.75; color: var(--sb-text-2); white-space: pre-wrap; }
body.sb-community-page .sb-blog-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-bottom: 32px; }
body.sb-community-page .sb-blog-card { padding: 0; overflow: hidden; }
body.sb-community-page .sb-blog-card-link { display: block; text-decoration: none; color: inherit; }
body.sb-community-page .sb-blog-card-media { aspect-ratio: 16/9; background: var(--sb-bg-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; }
body.sb-community-page .sb-blog-card-img { width: 100%; height: 100%; object-fit: cover; }
body.sb-community-page .sb-blog-card-placeholder { color: var(--sb-text-3); }
body.sb-community-page .sb-blog-card-body { padding: 18px 20px 22px; }
body.sb-community-page .sb-blog-card-meta { font-size: 0.82rem; color: var(--sb-text-3); margin-bottom: 8px; }
body.sb-community-page .sb-blog-card-title { font-size: 1.08rem; font-weight: 700; color: var(--sb-text); margin-bottom: 8px; line-height: 1.35; }
body.sb-community-page .sb-blog-card-excerpt { font-size: 0.9rem; line-height: 1.6; color: var(--sb-text-2); margin: 0; }
body.sb-community-page .sb-blog-article { padding: 28px; }
body.sb-community-page .sb-blog-article-title { font-size: 1.65rem; font-weight: 700; line-height: 1.25; margin-bottom: 10px; color: var(--sb-text); }
body.sb-community-page .sb-blog-article-image { margin: 16px 0; border-radius: 12px; overflow: hidden; }
body.sb-community-page .sb-blog-article-image img { width: 100%; display: block; }
body.sb-community-page .sb-blog-article-body { font-size: 0.96rem; line-height: 1.75; color: var(--sb-text-2); }
body.sb-community-page .sb-blog-article-body img { max-width: 100%; height: auto; border-radius: 8px; }
@media (max-width: 640px) { body.social-butterflies-page .sb-hero { padding-bottom: 32px; } body.social-butterflies-page .sb-callout { padding: 20px; } body.sb-community-page .sb-signin-banner { flex-direction: column; align-items: flex-start; } }