/*
Theme Name: Family Commerce Theme
Theme URI: https://example.local/family-commerce-theme
Author: Family EC Project
Description: Mobile-first WordPress theme for Family Growth Game OS commerce MVP.
Version: 0.7.2-usability
Requires PHP: 8.0
Text Domain: family-commerce-theme
*/

:root { --fc-bg:#f7f4ef; --fc-card:#fff; --fc-text:#1d2327; --fc-muted:#646970; --fc-accent:#2f5d50; --fc-border:rgba(0,0,0,.1); }
* { box-sizing:border-box; }
body { margin:0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:var(--fc-bg); color:var(--fc-text); line-height:1.7; }
a { color:var(--fc-accent); }
.site-header { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom:1px solid var(--fc-border); }
.site-header-inner, .site-main, .site-footer-inner { width:min(1080px, calc(100% - 32px)); margin:auto; }
.site-header-inner { display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:16px; }
.site-title { font-weight:800; color:var(--fc-text); text-decoration:none; }
.main-nav ul { list-style:none; display:flex; gap:14px; padding:0; margin:0; flex-wrap:wrap; }
.main-nav a { text-decoration:none; font-weight:600; color:var(--fc-text); }
.site-main { padding:32px 0; }
.hero { border-radius:28px; padding:32px; background:linear-gradient(135deg,#ffffff,#eef7f1); border:1px solid var(--fc-border); margin-bottom:24px; }
.hero h1 { font-size: clamp(2rem, 6vw, 4rem); line-height:1.1; margin:0 0 16px; }
.hero p { max-width: 720px; color:var(--fc-muted); }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
.button, .wp-block-button__link { display:inline-flex; min-height:44px; align-items:center; justify-content:center; padding:0 18px; border-radius:999px; background:var(--fc-accent); color:#fff !important; text-decoration:none; font-weight:700; }
.button.secondary { background:#fff; color:var(--fc-text) !important; border:1px solid var(--fc-border); }
.content-card { background:var(--fc-card); border:1px solid var(--fc-border); border-radius:22px; padding:22px; margin:20px 0; }
.site-footer { border-top:1px solid var(--fc-border); background:#fff; margin-top:48px; }
.site-footer-inner { padding:24px 0; color:var(--fc-muted); font-size:.92rem; }
@media (max-width: 720px) {
  .site-header-inner { align-items:flex-start; flex-direction:column; padding:12px 0; }
  .main-nav ul { gap:10px; font-size:.92rem; }
  .hero { padding:24px 18px; border-radius:20px; }
}