/*
Theme Name: Astra Project Child (UI Kit + Flexible Bars)
Template: astra
Version: 1.0.3
Description: Child theme for Astra with flexible bars (placeable via hooks) and a small UI kit (buttons + tokens).
*/

/* ===== Design tokens ===== */
:root{
  --brand: #2563eb;
  --accent: #22c55e;
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --border: rgba(17,24,39,.12);
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius: 14px;
}

/* ===== Flexible bars ===== */
.apc-bar{
  width:100%;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.apc-bar .hw{ width:100%; }
.apc-bar .hw + .hw{ margin-top: 8px; }

.apc-bar-1{ }
.apc-bar-2{ }
.apc-bar-3{ }
.apc-bar-4{ }
.apc-bar-5{ }

/* ===== Buttons (UI Kit) ===== */
.apc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid transparent;
  text-decoration:none !important;
  font-weight: 600;
  line-height: 1;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, opacity .15s ease;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.apc-btn:active{ transform: translateY(1px); }
.apc-btn:focus{ outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.18); }
.apc-btn__text{ white-space:nowrap; }

.apc-btn--primary{
  background: var(--brand);
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(37,99,235,.25);
}
.apc-btn--primary:hover{ opacity:.95; }

.apc-btn--accent{
  background: var(--accent);
  color:#fff !important;
  box-shadow: 0 8px 18px rgba(34,197,94,.20);
}
.apc-btn--accent:hover{ opacity:.95; }

.apc-btn--ghost{
  background: transparent;
  color: var(--text) !important;
  border-color: var(--border);
}
.apc-btn--ghost:hover{ background: rgba(17,24,39,.04); }

.apc-btn--soft{
  background: rgba(37,99,235,.10);
  color: var(--text) !important;
  border-color: rgba(37,99,235,.18);
}
.apc-btn--soft:hover{ background: rgba(37,99,235,.14); }

/* ===== “Facebook-like” header helpers =====
   استخدمها داخل HTML Widgets أو عناصر الهيدر:
   - fb-row: تقسيم يسار/وسط/يمين
*/
.fb-row{
  display:grid;
  grid-template-columns: 1fr minmax(280px, 520px) 1fr;
  align-items:center;
  gap: 12px;
}
@media (max-width: 921px){
  .fb-row{ grid-template-columns: 1fr 1fr; }
  .fb-center{ grid-column: 1 / -1; order: 3; }
}

/* ===== Small utilities ===== */
.apc-stack{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.apc-muted{ color: var(--muted); }


/* === APC Flexible Bars: Column Builder === */
.apc-bar{width:100%;}
.apc-bar-inner{display:grid;align-items:center;gap:12px;}
.apc-bar-inner.apc-cols-1{grid-template-columns:1fr;}
.apc-bar-inner.apc-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.apc-bar-inner.apc-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.apc-bar-inner.apc-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.apc-bar-col{min-width:0;}
@media(max-width:768px){.apc-bar-inner{gap:10px;}}


/* === APC Weather Widget === */
:root{
  --apc-w-sun:#fbbf24;
  --apc-w-moon:#93c5fd;
  --apc-w-cloud:#cbd5e1;
  --apc-w-rain:#38bdf8;
  --apc-w-storm:#a78bfa;
  --apc-w-snow:#e2e8f0;
  --apc-w-fog:#94a3b8;
}
.apc-weather{display:inline-flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.75);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);}
.apc-weather--compact{min-height:36px}
.apc-weather-ico{width:28px;height:28px;flex:0 0 auto}
.apc-weather-temp{font-weight:700;line-height:1}
.apc-weather-lbl{font-size:12px;opacity:.75;line-height:1.2;margin-top:2px}
.apc-weather-txt{display:flex;flex-direction:column;gap:2px}
@media(max-width:768px){
  .apc-weather{padding:7px 9px;border-radius:12px}
  .apc-weather-ico{width:24px;height:24px}
}


/* === APC Home Post Accordion === */
.apc-post-acc{margin-top:10px;border:1px solid rgba(0,0,0,.08);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.85)}
.apc-post-acc-sum{list-style:none;cursor:pointer;padding:10px 12px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:10px}
.apc-post-acc-sum::-webkit-details-marker{display:none}
.apc-post-acc-sum:after{content:'+';font-size:18px;line-height:1;opacity:.7}
.apc-post-acc[open] .apc-post-acc-sum:after{content:'–'}
.apc-post-acc-body{padding:12px 12px 14px;opacity:.98}
.apc-post-acc-body p:last-child{margin-bottom:0}


/* === APC Admin UI (Dashboard page) === */
.apc-admin-details summary{cursor:pointer;font-weight:700}
.apc-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:10px 0}
.apc-admin-box{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:10px}
.apc-admin-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
@media(max-width:900px){.apc-admin-grid{grid-template-columns:1fr}}


/* === APC Posts (Facebook-like cards) === */
.apc-posts-fb{display:grid;gap:14px}
.apc-post-fb-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:18px;padding:12px 12px 14px;box-shadow:0 10px 28px rgba(0,0,0,.05)}
.apc-post-fb-thumb{display:block;overflow:hidden;border-radius:16px}
.apc-post-fb-thumb img{width:100%;height:auto;display:block}
.apc-post-fb-title{font-size:16px;margin:10px 0 0;line-height:1.25}
.apc-post-fb-title a{text-decoration:none}
.apc-post-fb-body{margin-top:10px}


/* Weather wide style */
.apc-weather--wide{padding:10px 12px;border-radius:16px}
.apc-weather--wide .apc-weather-ico{width:32px;height:32px}
.apc-weather--wide .apc-weather-temp{font-size:16px}


/* === APC Facebook-like Comments (خفيف وسريع) === */
.comments-area{margin-top:18px}
.comment-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.comment-list .comment{background:transparent}
.comment-body{display:flex;gap:10px;align-items:flex-start}
.comment-author .avatar{border-radius:999px}
.comment-meta{font-size:12px;opacity:.75}
.comment-content{background:#f0f2f5;border-radius:18px;padding:10px 12px;line-height:1.45;max-width:820px}
.comment-content p{margin:0}
.comment-content p + p{margin-top:8px}
.comment-author .fn{font-weight:800;text-decoration:none}
.comment-metadata a{color:inherit;text-decoration:none}
.reply a,.comment-reply-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:12px;text-decoration:none;background:transparent;border:0;padding:4px 6px;border-radius:10px}
.reply a:hover,.comment-reply-link:hover{background:rgba(0,0,0,.05)}
.comment-respond{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:18px;padding:12px;margin-top:14px}
.comment-form textarea{border-radius:16px;border:1px solid rgba(0,0,0,.10);padding:10px 12px;background:#f0f2f5}
.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"]{border-radius:14px;border:1px solid rgba(0,0,0,.10);padding:9px 10px;background:#f0f2f5}
.comment-form .submit{border-radius:999px;padding:10px 14px;font-weight:800}
@media(max-width:768px){.comment-content{border-radius:16px}}

/* === APC Weather v1 icons/colors === */
:root{
  --apc-w-sun:#fbbf24;
  --apc-w-moon:#93c5fd;
  --apc-w-cloud:#cbd5e1;
  --apc-w-cloud2:#94a3b8;
  --apc-w-rain:#38bdf8;
  --apc-w-storm:#a78bfa;
  --apc-w-snow:#f1f5f9;
  --apc-w-fog:#94a3b8;
}
.apc-weather{border:1px solid rgba(0,0,0,.08)}
.apc-weather[data-kind="rain_heavy"]{background:rgba(224,242,254,.75)}
.apc-weather[data-kind="rain"]{background:rgba(224,242,254,.65)}
.apc-weather[data-kind="rain_light"]{background:rgba(224,242,254,.55)}
.apc-weather[data-kind="storm"]{background:rgba(237,233,254,.65)}
.apc-weather[data-kind^="snow"]{background:rgba(241,245,249,.75)}
.apc-weather[data-kind="clear"][data-day="1"]{background:rgba(254,243,199,.55)}
.apc-weather[data-kind="clear"][data-day="0"]{background:rgba(219,234,254,.55)}

@media(max-width:768px){.apc-bar-inner[data-mobile="keep"]{align-items:center;}}

/* === APC Comment Avatars (Neutral/Initials) === */
:root{
  --apc-av-bg: rgba(17,24,39,.08);
  --apc-av-fg: rgba(17,24,39,.55);
}
.apc-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;overflow:hidden;flex:0 0 auto}
.apc-avatar-svg{display:block}
.apc-avatar--neutral{background:transparent}
.apc-avatar--initials{background:var(--apc-av-bg);border:1px solid rgba(17,24,39,.12)}
.apc-avatar-initial{font-weight:800;font-size: calc(12px + 0.18em); color: rgba(17,24,39,.8); line-height:1}
.comment-author .avatar{border-radius:999px}