/* Homepage styles extracted from Hero A for front-end development */
:root { --brand-blue: #1877F2; --brand-blue-dark: #0A66C2; --text-color: #0b1722; --muted: #6b7280; --surface:#ffffff; --card-border:#e6e9ef; }
.fb-style-wrapper { max-width: 1200px; margin: 0 auto; padding: 18px; }
.hero-a-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; }
.hero-a-brand { font-weight:900; color:var(--brand-blue); font-size:1.4rem; text-decoration:none; letter-spacing:0.2px; }
.hero-a-container { max-width:1100px; margin: 16px auto; display:grid; grid-template-columns: 1fr 360px; gap: 20px; align-items:start; }
.hero-a-left { background: linear-gradient(180deg, rgba(24,119,242,0.04), rgba(255,255,255,0.0)); padding:20px; border-radius:12px; }
.hero-a-left h1 { font-size:34px; margin-bottom:10px; color:var(--text-color); line-height:1.08; }
.hero-a-left p { font-size:16px; color:var(--muted); margin-bottom:14px; line-height:1.45; }
.hero-a-stats { display:flex; gap:10px; margin-top:12px; align-items:center; }
.stat-pill { background:var(--surface); padding:8px 12px; border-radius:10px; border:1px solid var(--card-border); box-shadow:0 4px 12px rgba(7,17,39,0.03); font-size:13px; }
.hero-auth-card { background:var(--surface); border-radius:12px; padding:16px; border:1px solid var(--card-border); box-shadow:0 8px 28px rgba(7,17,39,0.04); }
.auth-input { width:100%; padding:10px 12px; margin-bottom:10px; border-radius:8px; border:1px solid rgba(0,0,0,0.08); font-size:14px; }
.auth-btn { width:100%; padding:10px 12px; border-radius:8px; font-weight:700; border:none; background:linear-gradient(180deg,var(--brand-blue),var(--brand-blue-dark)); color:white; font-size:14px; }
.auth-secondary { padding:9px 12px; border-radius:8px; margin-top:10px; border:1px solid var(--card-border); background:white; color:var(--text-color); font-size:14px; }
.hero-footer-links { margin-top:10px; font-size:13px; color:var(--muted); }
.launching-soon-badge { background: rgba(0,0,0,0.04); padding:6px 8px; border-radius:8px; font-weight:700; }
.composer-card, .post-card, .live-card { background:var(--surface); padding:14px; border-radius:10px; border:1px solid var(--card-border); box-shadow:0 6px 18px rgba(7,17,39,0.03); margin-bottom:12px; }
.live-video-wrap { background:#000; border-radius:8px; overflow:hidden; position:relative; padding-top:56.25%; }
.live-video-wrap video, .live-video-wrap .placeholder { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:flex; align-items:center; justify-content:center; }
.live-controls { display:flex; gap:8px; margin-top:10px; align-items:center; }
.live-comments { margin-top:12px; max-height:220px; overflow:auto; border-top:1px dashed rgba(0,0,0,0.03); padding-top:10px; }
.comment-input { flex:1; padding:8px 10px; border-radius:8px; border:1px solid var(--card-border); }

/* Focus styles */
button:focus, a:focus, input:focus, textarea:focus { outline:3px solid rgba(24,119,242,0.12); outline-offset:2px; }

@media (max-width: 992px) {
    .hero-a-container { grid-template-columns: 1fr; padding: 0 12px; }
    .hero-a-left h1 { font-size:22px; }
}