/*
Theme Name: Turath Portal
Theme URI: https://turath.bahygroup.com
Description: ثيم هوية جمعية إحياء التراث الإسلامي — يطبّق الهوية كاملةً على الواجهة ولوحة التحكم وصفحة الدخول فور التفعيل (الاسم، الأيقونة، الشعار، الألوان، الروابط). صفحة رئيسية بتسجيل الدخول، ويتكامل تلقائيًا مع إضافة بحث المتبرعين أو بوابة WMC إن وُجدت.
Author: BahyGroup
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: turath
License: GPL-2.0-or-later
*/

/* ألوان مأخوذة من متغيّرات alturath.io الفعلية */
:root{
  --base:#07a54f;          /* الأخضر الأساسي — هوية الجمعية */
  --base-dark:#05803d;
  --base-soft:rgba(7,165,79,.10);
  --primary:#0071fe;
  --bg:#f8f8f8;
  --surface:#ffffff;
  --ink:#22272b;
  --muted:#676767;
  --gray:#a8a8a8;
  --border:#e6e8ea;
  --success:#21a67a;
  --error:#f23648;
  --error-bg:#fddfe2;
  --radius:16px;
  --shadow:0 10px 30px rgba(17,24,39,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* عمود مرن يملأ الشاشة: الترويسة والتذييل بحجمهما الطبيعي والمحتوى يتمدّد
   بينهما. هكذا يظهر التذييل ضمن أول شاشة بلا تمرير حين يكون المحتوى قصيرًا،
   بدل إجبار الواجهة على ارتفاع 100vh فينزل التذييل تحت الطيّة. */
body{
  font-family:'Cairo',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.7;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
  min-height:100vh; min-height:100dvh;
}
body > main, body > .portal-body{flex:1 0 auto}
body > .site-foot{margin-top:auto}
a{color:var(--base); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto}

.wrap{width:min(1120px,92vw); margin-inline:auto}

/* ---------- الزخرفة الذهبية ----------
   نقش إسلامي شفاف يُوضع فوق الأخضر عبر عنصر زائف، حتى تبقى النصوص
   والأزرار بكامل وضوحها فوقه. */
.pattern-bar{position:relative; background:var(--base); color:#fff}
.pattern-bar::before{
  content:""; position:absolute; inset:0;
  background:url('assets/img/pattern.png') repeat;
  background-size:200px auto;
  /* ملف النقش نفسه شفاف أصلًا (ألفا الخطوط الذهبية ~25%)، فأي تقليل إضافي
     للشفافية أو مزج soft-light يمحوه تمامًا فوق الأخضر. يُترك بكامل قوته
     ويُرفع سطوعه قليلًا ليبرز الذهب. */
  opacity:1;
  filter:brightness(1.35) saturate(1.25);
  pointer-events:none;
}
.pattern-bar > *{position:relative; z-index:1}

/* ---------- الترويسة ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  box-shadow:0 2px 12px rgba(0,0,0,.10);
}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand:hover{text-decoration:none}
/* شعار الجمعية بخلفية بيضاء أصلًا ونصّه أسود، فيوضع داخل بطاقة بيضاء
   ليُقرأ فوق الأخضر بدل أن يذوب فيه. */
.brand-logo{
  height:72px; width:auto; display:block;
  background:#fff; padding:9px 16px; border-radius:16px;
  box-shadow:0 3px 10px rgba(0,0,0,.13);
}
.head-actions{display:flex; align-items:center; gap:10px}

/* ---------- الأزرار ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--base); color:#fff; border:none; border-radius:12px;
  padding:12px 22px; font:inherit; font-weight:700; cursor:pointer;
  transition:transform .15s ease, filter .15s ease;
}
.btn:hover{filter:brightness(1.06); text-decoration:none; color:#fff}
.btn:active{transform:translateY(1px)}
.btn-light{background:#fff; color:var(--base)}
.btn-light:hover{color:var(--base-dark)}
.btn-ghost{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.65)}
.btn-ghost:hover{background:rgba(255,255,255,.14); color:#fff}
.btn-block{width:100%}

/* ---------- الواجهة الرئيسية: تسجيل الدخول فقط ---------- */
.hero{
  /* لا ارتفاع مفروض — الجسم عمود مرن والواجهة تأخذ ما تبقّى بعد
     الترويسة والتذييل، فيبقى التذييل مرئيًا في أول شاشة. */
  display:grid; place-items:center; padding:28px 0 40px;
  background:
    radial-gradient(1100px 460px at 50% -8%, var(--base-soft), transparent 70%),
    var(--bg);
}
.login-card{
  width:min(430px,92vw); background:var(--surface); border:1px solid var(--border);
  border-radius:22px; box-shadow:var(--shadow); padding:34px 30px 30px; text-align:center;
}
/* بطاقة الدخول بيضاء، وخلفية الشعار بيضاء أيضًا، فيظهر بلا إطار. */
.login-logo{
  display:block; width:min(280px, 100%); height:auto;
  margin:0 auto 14px;
}
.login-card .sub{margin:0 0 24px; color:var(--muted); font-size:.94rem}

.field{text-align:start; margin-bottom:14px}
.field label{display:block; font-size:.86rem; font-weight:700; color:var(--muted); margin-bottom:6px}
.field input[type=text], .field input[type=password]{
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px;
  font:inherit; background:#fbfbfb; color:var(--ink); transition:border-color .15s, box-shadow .15s;
}
.field input:focus{
  outline:none; border-color:var(--base); background:#fff;
  box-shadow:0 0 0 4px var(--base-soft);
}
.row-between{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:4px 0 18px}
.row-between label{display:flex; align-items:center; gap:7px; font-size:.86rem; color:var(--muted); margin:0}
.login-foot{margin-top:20px; padding-top:16px; border-top:1px solid var(--border); font-size:.85rem; color:var(--muted)}

/* ---------- شاشات قصيرة الارتفاع (لابتوب 720/768/800) ----------
   المقاسات المريحة أعلاه تجعل مجموع الترويسة+البطاقة+التذييل ≈ 813px،
   فيختفي التذييل تحت الطيّة على لابتوب بارتفاع 720 أو 768. القياس هنا
   بالارتفاع لا بالعرض: لابتوب 1366×768 عريض لكنه قصير، فقواعد العرض
   لا تلتقطه. الشاشات الأطول تبقى بالمقاسات المريحة كما هي. */
@media (max-height: 880px){
  .site-head .wrap{padding:8px 0}
  .brand-logo{height:58px; padding:7px 13px; border-radius:14px}

  .hero{padding:16px 0 18px}
  .login-card{padding:22px 26px 20px; border-radius:18px}
  .login-logo{width:min(210px, 100%); margin-bottom:10px}
  .login-card .sub{margin:0 0 16px; font-size:.9rem}

  .field{margin-bottom:10px}
  .field label{margin-bottom:4px; font-size:.83rem}
  .field input[type=text], .field input[type=password]{padding:10px 13px; border-radius:11px}
  .row-between{margin:2px 0 12px}
  .btn{padding:11px 22px}
  .login-foot{margin-top:14px; padding-top:12px; font-size:.8rem; line-height:1.5}

  .site-foot{padding:16px 0; font-size:.83rem}
}

/* أقصر من ذلك (نوافذ مصغّرة أو 1280×720 مع أشرطة المتصفح) */
@media (max-height: 700px){
  .login-logo{width:min(180px, 100%); margin-bottom:8px}
  .login-card{padding:18px 22px 16px}
  .login-card .sub{margin:0 0 12px; font-size:.86rem}
  .field{margin-bottom:8px}
  .hero{padding:12px 0 14px}
  .site-foot{padding:12px 0}
}

.notice{
  border-radius:12px; padding:11px 14px; font-size:.88rem; margin-bottom:16px; text-align:start;
}
.notice-error{background:var(--error-bg); color:#a4172a; border:1px solid #f6c9ce}
.notice-ok{background:#e0eee4; color:#15694c; border:1px solid #bfdfcb}

/* ---------- البوابة ---------- */
.portal-head{background:var(--base); color:#fff; padding:26px 0}
.portal-head h1{margin:0; font-size:1.35rem}
.portal-head p{margin:6px 0 0; opacity:.9; font-size:.92rem}
.portal-body{padding:26px 0 70px}
.panel{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:22px;
}

/* ---------- التذييل ---------- */
/* نفس أخضر الترويسة ونفس النقش الذهبي (الطلب: شريط سفلي مطابق للعلوي). */
.site-foot{padding:26px 0; font-size:.88rem}
.site-foot .wrap{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between}
.site-foot a{color:#fff; text-decoration:underline; text-underline-offset:3px}
.site-foot a:hover{color:#eafff2}

@media(max-width:640px){
  .site-head .wrap{padding:9px 0}
  .brand-logo{height:52px; padding:6px 11px; border-radius:13px}
  .pattern-bar::before{background-size:170px auto}
  .login-logo{width:min(230px, 100%)}
  /* لا تجعلها 100% — تلتصق بحافتَي الشاشة بلا هامش */
  .login-card{width:min(430px, calc(100vw - 32px)); padding:24px 18px 22px; border-radius:18px}

  /* حقول أقل من 16px تجعل iOS يكبّر الصفحة تلقائيًا عند التركيز */
  .field input[type=text], .field input[type=password]{font-size:16px}

  /* حُشوة 90px أسفل الواجهة كانت تدفع التذييل خارج أول شاشة. الزر العائم
     ثابت الموضع ولا يحتاج حجز مساحة — حلقته البيضاء تفصله عن التذييل. */
  .hero{padding:18px 0 22px}
  .portal-head{padding:18px 0}
  .portal-head h1{font-size:1.1rem}
  .portal-body{padding:16px 0 90px}
  .panel{padding:14px; border-radius:14px}
  /* التذييل في سطر واحد مضغوط بدل عمود بارتفاع 108px.
     لا حاجة لحشوة جانبية تُبعد الروابط عن الزر العائم: الزر صار يستقرّ
     فوق التذييل لا عليه، والحشوة كانت تضغط السطر فينكسر إلى سطرين. */
  .site-foot{padding:13px 0; font-size:.8rem}
  .site-foot .wrap{
    flex-direction:row; align-items:center; justify-content:space-between; gap:10px;
  }
}

/* ---------- احتواء محتوى بوابة WMC ----------
   عدة تبويبات (القائمة السوداء، الدروع، لوحة متقدمة…) تعيد استخدام ترميز
   شاشات wp-admin: ‎.wrap‎ و‎h1.wp-heading-inline‎ و‎p.description‎. تلك القواعد
   تفترض عرض لوحة التحكم، فتتجاوز إطار البوابة على الجوال. نحصرها هنا.
   ملاحظة: ‎.wrap‎ اسم يستخدمه الثيم أيضًا، لذا التخصيص مقيّد بداخل البوابة. */
.bg-portal-main .wrap{width:auto; max-width:100%; margin:0; padding:0}
.bg-portal-main h1.wp-heading-inline{font-size:1.15rem; line-height:1.5}
.bg-portal-main table{display:block; width:100%; max-width:100%; overflow-x:auto}
.bg-portal-main img{max-width:100%; height:auto}
.bg-portal-main pre, .bg-portal-main code{white-space:pre-wrap; word-break:break-word}
.bg-portal-main input, .bg-portal-main select, .bg-portal-main textarea{max-width:100%}
/* fieldset يأخذ min-width:min-content افتراضيًا في المتصفحات فيرفض الانكماش،
   وهو سبب تجاوز تبويب Anti-Ban وحده لعرض الشاشة. */
.bg-portal-main fieldset{min-width:0; max-width:100%}
.bg-portal-main legend{max-width:100%; white-space:normal}

.portal-body table{display:block; width:100%; overflow-x:auto}
.panel img{max-width:100%; height:auto}
html, body{max-width:100%; overflow-x:hidden}