/*
Theme Name: AutoSocial Community
Theme URI: https://example.com/
Author: OpenAI
Description: Social-network style WordPress theme for automotive communities. Designed for feeds, members, groups, events, marketplace, and BuddyPress-compatible community workflows.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: autosocial
License: GNU General Public License v2 or later
Tags: community, automotive, social-network, buddypress, responsive, custom-logo, featured-images
*/

:root{
  --bg:#f1f3f6;
  --card:#ffffff;
  --text:#18202b;
  --muted:#6d7887;
  --line:#e4e8ee;
  --brand:#0f62fe;
  --brand2:#134fbf;
  --dark:#101722;
  --success:#16a34a;
  --danger:#ef4444;
  --shadow:0 8px 24px rgba(18,30,50,.08);
  --radius:16px;
  --max:1480px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button,input,textarea,select{font:inherit}
.site-shell{width:min(var(--max),calc(100% - 28px));margin:auto}
.topbar{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);
  backdrop-filter:blur(15px);border-bottom:1px solid var(--line);
}
.topbar-inner{height:68px;display:grid;grid-template-columns:280px 1fr 360px;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand-mark{
  width:42px;height:42px;border-radius:12px;background:linear-gradient(145deg,var(--brand),#4e8cff);
  color:#fff;display:grid;place-items:center;font-weight:900;font-size:20px;
}
.custom-logo{max-height:46px;width:auto}
.searchbar{
  position:relative;max-width:620px;width:100%;justify-self:center
}
.searchbar input{
  width:100%;height:44px;border:1px solid var(--line);background:#f7f8fa;
  border-radius:999px;padding:0 48px 0 18px;outline:none
}
.searchbar input:focus{background:#fff;border-color:#b7c6df;box-shadow:0 0 0 4px rgba(15,98,254,.06)}
.search-icon{position:absolute;right:17px;top:50%;transform:translateY(-50%);color:#8792a1}
.top-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.icon-btn{
  width:42px;height:42px;border-radius:50%;border:0;background:#edf0f5;
  display:grid;place-items:center;cursor:pointer;color:#334155;font-size:18px;
}
.icon-btn:hover{background:#e4e9f0}
.user-chip{
  display:flex;align-items:center;gap:9px;padding:5px 10px 5px 6px;border-radius:999px
}
.user-chip:hover{background:#f0f3f7}
.avatar{
  width:38px;height:38px;border-radius:50%;object-fit:cover;background:#dbe2ea;display:grid;place-items:center;font-weight:800;color:#51606f
}
.user-chip span{font-size:14px;font-weight:700}
.mobile-menu-btn{display:none}

.app-grid{
  display:grid;grid-template-columns:270px minmax(0,720px) 330px;gap:22px;
  padding-top:22px;align-items:start
}
.leftbar,.rightbar{position:sticky;top:90px}
.nav-card,.side-card,.feed-card,.composer,.hero-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)
}
.nav-card{padding:10px}
.nav-list{list-style:none;margin:0;padding:0}
.nav-list li{margin:2px 0}
.nav-list a{
  display:flex;align-items:center;gap:12px;padding:12px 12px;border-radius:12px;font-weight:650;font-size:14px
}
.nav-list a:hover,.nav-list a.active{background:#eef4ff;color:var(--brand)}
.nav-ico{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#f0f3f7
}
.nav-list a.active .nav-ico{background:#dce9ff}
.section-label{
  font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:#8b96a6;padding:14px 12px 7px
}
.hero-card{
  overflow:hidden;margin-bottom:16px;background:linear-gradient(135deg,#0e1726,#1e2d46);color:#fff;border:0;
}
.hero-cover{height:180px;background:
  radial-gradient(circle at 70% 30%,rgba(15,98,254,.5),transparent 25%),
  linear-gradient(145deg,#152238,#0c111c 65%);
  position:relative;overflow:hidden
}
.hero-cover:before{
  content:"";position:absolute;width:360px;height:360px;border:40px solid rgba(255,255,255,.06);
  border-radius:50%;right:-80px;bottom:-230px
}
.hero-content{padding:18px 20px 20px}
.hero-title{font-size:30px;font-weight:850;letter-spacing:-.03em;margin:0}
.hero-text{color:#c8d4e5;margin:7px 0 0;font-size:14px}
.hero-meta{display:flex;gap:18px;margin-top:15px;flex-wrap:wrap}
.hero-meta b{display:block;font-size:17px}
.hero-meta span{font-size:11px;color:#9fb0c5}
.composer{padding:14px;margin-bottom:16px}
.composer-top{display:flex;gap:11px;align-items:center}
.composer-fake{
  flex:1;background:#f2f4f7;border:1px solid var(--line);border-radius:999px;
  padding:12px 16px;color:#7a8491;font-size:14px
}
.composer-actions{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:12px;padding-top:10px}
.composer-actions button{
  border:0;background:none;padding:10px;border-radius:10px;font-weight:700;color:#66717f;cursor:pointer
}
.composer-actions button:hover{background:#f4f6f8}
.feed-card{margin-bottom:16px;overflow:hidden}
.feed-head{display:flex;justify-content:space-between;padding:16px 17px 10px;gap:12px}
.feed-author{display:flex;gap:11px}
.feed-author-info strong{display:block;font-size:14px}
.feed-author-info span{font-size:12px;color:#85909e}
.feed-body{padding:4px 17px 14px}
.feed-body p{margin:0;line-height:1.55;font-size:14px}
.feed-photo{
  margin-top:13px;border-radius:13px;overflow:hidden;background:#dfe4ea;min-height:280px;
  display:grid;place-items:center;position:relative
}
.feed-photo.auto{
  background:
    linear-gradient(to top,rgba(7,12,20,.55),transparent 55%),
    radial-gradient(circle at 30% 65%,#26313f 0 18%,transparent 19%),
    linear-gradient(145deg,#65717f,#1b2531);
}
.feed-photo.auto:before{
  content:"";width:66%;height:34%;border:8px solid rgba(255,255,255,.8);border-radius:45% 55% 25% 25%;
  transform:skewX(-12deg);box-shadow:0 30px 70px rgba(0,0,0,.4)
}
.feed-stats{
  display:flex;justify-content:space-between;padding:9px 17px;color:#7f8996;font-size:12px;border-bottom:1px solid var(--line)
}
.feed-actions{display:grid;grid-template-columns:repeat(3,1fr);padding:5px 8px}
.feed-actions a{padding:9px;border-radius:9px;text-align:center;color:#66717e;font-weight:700;font-size:13px}
.feed-actions a:hover{background:#f3f5f8}
.side-card{padding:16px;margin-bottom:16px}
.side-card h3{margin:0 0 12px;font-size:15px}
.member-row,.event-row,.group-row{display:flex;gap:11px;align-items:center;padding:9px 0}
.member-row+.member-row,.event-row+.event-row,.group-row+.group-row{border-top:1px solid var(--line)}
.member-meta{min-width:0;flex:1}
.member-meta strong{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.member-meta span{font-size:11px;color:#87919e}
.mini-btn{border:1px solid #dbe2ea;background:#fff;border-radius:9px;padding:7px 10px;font-weight:750;font-size:11px;color:#3f4d5f}
.mini-btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.event-date{
  width:44px;height:48px;border-radius:11px;background:#eef4ff;color:var(--brand);
  display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;line-height:1
}
.event-date span:first-child{font-size:10px}.event-date span:last-child{font-size:18px;margin-top:3px}
.market-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.market-item{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.market-img{height:90px;background:linear-gradient(145deg,#d9dfe7,#aeb9c7)}
.market-body{padding:8px}
.market-body strong{display:block;font-size:12px}.market-body span{font-size:11px;color:#7f8995}
.page-wrap{padding:26px 0 60px}
.content-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow)}
.content-card h1{margin-top:0}
.footer{padding:32px 0 45px;color:#7b8693;font-size:12px}
.bp-wrap,.buddypress-wrap{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.bp-wrap input,.bp-wrap textarea,.bp-wrap select,
.buddypress-wrap input,.buddypress-wrap textarea,.buddypress-wrap select{
  border:1px solid var(--line)!important;border-radius:10px!important;padding:10px!important
}
.wp-block-button__link{background:var(--brand)!important;border-radius:999px!important}
@media(max-width:1180px){
  .topbar-inner{grid-template-columns:240px 1fr 220px}
  .app-grid{grid-template-columns:230px minmax(0,1fr)}
  .rightbar{display:none}
}
@media(max-width:860px){
  .topbar-inner{grid-template-columns:1fr auto}
  .searchbar{display:none}.top-actions .icon-btn:nth-child(-n+2){display:none}
  .leftbar{display:none}.mobile-menu-btn{display:grid}
  .app-grid{grid-template-columns:1fr;max-width:720px;margin:auto}
}
@media(max-width:560px){
  .site-shell{width:min(100% - 16px,var(--max))}
  .topbar-inner{height:60px}.brand span:last-child{display:none}
  .user-chip span{display:none}.top-actions{gap:4px}
  .hero-cover{height:140px}.hero-title{font-size:25px}
  .composer-actions button{font-size:11px}
  .feed-photo{min-height:230px}
}