/* assets/css/public-site.css
   بخش «چهارچوب» سیستم طراحی «باغچهٔ دیجیتال» — بهار یادگیری: رنگ پایه،
   تایپوگرافی، دکمه، و مهم‌تر از همه هدر/فوتر/نویگیشن مشترک تمام صفحات
   عمومی سایت (index.php, courses.php, catalog/*, course.php).

   قبلاً هر کدام از index.php و courses.php یک کپی کاملاً جدا و یکسان از
   همین قوانین رنگ/هدر را در <style> خودشان داشتند (یعنی هر تغییر باید
   دستی و دوبار اعمال می‌شد و همین باعث واگرایی هم شده بود)، و صفحات
   catalog/* و course.php اصلاً هدر/برند متفاوتی (سیستم ls-* با لوگوی
   ایموجی و نام «LearnSpring») نشان می‌دادند — یعنی کاربر با یک کلیک از
   یک «سایت» به یک «سایت دیگر» می‌رفت. این فایل تنها منبع حقیقت چهارچوب
   بصری عمومی سایت است؛ استایل‌های اختصاصی هر صفحه (هیرو، دوره‌ها، بخش
   بنیان‌گذار و ...) همچنان محلی و در خود همان صفحه می‌مانند. */

:root{
  --paper:#ffffff;
  --paper-alt:#f6f7fb;
  --ink:#1e1b2e;
  --ink-soft:#6b7280;
  --muted:#9ca3af;
  --line:#eef0f4;
  --line-soft:#f3f4f6;
  --moss:#4f46e5;
  --moss-dark:#4338ca;
  --moss-light:#eef2ff;
  --moss-softer:#f5f5ff;
  --sun:#d97706;
  --sun-light:#fef3e2;
  --plum:#7c3aed;
  --plum-dark:#6d28d9;
  --plum-light:#f3ecfe;
  --green:#16a34a;
  --green-light:#dcfce7;
  --red:#dc2626;
  --red-light:#fee2e2;
  --radius:14px;
  --radius-lg:20px;
  --radius-sm:8px;
  --shadow-sm:0 2px 12px rgba(21,32,24,.08);
  --shadow:0 20px 40px -22px rgba(21,32,24,.35);
  --mono:'JetBrains Mono', monospace;
  --display:'Vazirmatn', sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:'Vazirmatn',sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;font-size:15.5px;}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
h1,h2,h3{margin:0;color:var(--ink);line-height:1.3;font-weight:800;font-family:var(--display);}
:focus-visible{outline:3px solid var(--moss);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ *{transition:none !important;animation:none !important;} }

.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--moss-dark);font-weight:700;font-size:12.5px;font-family:var(--mono);background:var(--moss-light);padding:6px 16px 6px 6px;border-radius:999px;margin-bottom:16px;letter-spacing:.2px;}
.eyebrow .dot{width:22px;height:22px;border-radius:50%;background:var(--moss);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-family:var(--mono);}

.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:999px;font-weight:700;font-size:14.5px;transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;}
.btn-primary{background:var(--moss);color:#fff;box-shadow:0 12px 24px -10px rgba(47,107,69,.45);}
.btn-primary:hover{background:var(--moss-dark);transform:translateY(-2px);}
.btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--line);}
.btn-outline:hover{border-color:var(--moss);color:var(--moss-dark);transform:translateY(-2px);}
.btn-white{background:#fff;color:var(--plum-dark);}
.btn-white:hover{background:var(--ink);color:#fff;}
.btn-sm{padding:9px 18px;font-size:13px;}

/* ---------- Header (مشترک همه‌ی صفحات عمومی) ---------- */
header{position:-webkit-sticky;position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:20px;}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:20px;color:var(--ink);flex-shrink:0;}
.logo img{width:40px;height:40px;object-fit:contain;flex-shrink:0;border-radius:11px;}
.logo-text{display:flex;flex-direction:column;line-height:1.5;}
.logo-text small{font-size:11px;font-weight:600;color:var(--muted);margin-top:2px;font-family:var(--mono);}

nav.mainnav ul{display:flex;gap:32px;font-weight:600;font-size:14.5px;color:var(--ink-soft);flex-wrap:nowrap;white-space:nowrap;}
@media (max-width:1200px) and (min-width:981px){ nav.mainnav ul{gap:18px;font-size:14px;} }
nav.mainnav a:hover, nav.mainnav a.active{color:var(--moss-dark);}
.nav-actions{display:flex;align-items:center;gap:10px;}
/* دکمه‌های واضحِ ورود/ثبت‌نام به‌جای آیکونِ تنهای پروفایل */
.nav-actions .btn-sm{padding:9px 16px;font-size:13px;white-space:nowrap;}
/* دکمه‌ی ترکیبیِ «ورود / ثبت‌نام» — فقط روی موبایل دیده می‌شود (تعریف در ریسپانسیو پایین). */
.nav-auth-both{display:none;}
.nav-logout{font-size:12.5px;font-weight:700;color:var(--ink-soft);padding:6px 4px;}
.nav-logout:hover{color:var(--red);}
.mobile-nav-auth{display:flex;flex-direction:column;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);}
.mobile-nav-auth .btn{width:100%;justify-content:center;}
.icon-btn{width:40px;height:40px;border-radius:50%;background:var(--paper-alt);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink);position:relative;transition:.2s;}
.icon-btn:hover{border-color:var(--moss);color:var(--moss-dark);}
.icon-btn .badge{position:absolute;top:-4px;left:-4px;background:var(--moss);color:#fff;font-size:10px;font-weight:800;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.burger{display:none;}

.profile-menu{position:relative;}
.profile-toggle{padding:0;}
.profile-popover{position:absolute;top:calc(100% + 12px);left:0;width:210px;display:none;padding:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);z-index:80;text-align:center;}
.profile-popover.is-open{display:block;}
.profile-popover strong{display:block;margin-bottom:12px;font-size:14px;color:var(--ink);}
.profile-popover a{display:block;padding:11px 12px;background:var(--moss);color:#fff;border-radius:999px;text-align:center;font-size:13px;font-weight:700;}
.profile-popover a:hover{background:var(--moss-dark);}

.mobile-nav{position:fixed;inset:0;z-index:150;display:none;background:rgba(21,32,24,.45);}
.mobile-nav.is-open{display:block;}
.mobile-nav-panel{width:min(300px, 80vw);height:100%;margin-right:auto;background:var(--paper);box-shadow:-24px 0 70px rgba(21,32,24,.25);padding:22px;}
.mobile-nav-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:20px;}
.mobile-nav-head button{width:34px;height:34px;border:0;background:var(--paper-alt);color:var(--ink);border-radius:50%;font-size:20px;}
.mobile-nav ul{display:flex;flex-direction:column;gap:6px;}
.mobile-nav ul li a{display:block;padding:12px 10px;border-radius:10px;font-weight:700;color:var(--ink);}
.mobile-nav ul li a:hover{background:var(--moss-light);color:var(--moss-dark);}

/* ---------- Breadcrumb ---------- */
.crumb-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:14px 0;font-size:12.5px;color:var(--ink-soft);}
.crumb-row a{color:var(--ink-soft);}
.crumb-row a:hover{color:var(--moss-dark);}
.crumb-row .sep{color:var(--muted);}
.crumb-row .current{color:var(--ink);font-weight:700;}

/* ---------- Footer (مشترک) ---------- */
footer{background:var(--ink);color:rgba(238,233,220,.7);padding-top:64px;margin-top:70px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(238,233,220,.14);}
.footer-grid .logo{color:#fff;margin-bottom:14px;}
.footer-grid p{line-height:1.9;font-size:13.5px;}
.footer-grid h5{color:#fff;font-size:14.5px;margin-bottom:18px;}
.footer-grid li{margin-bottom:11px;font-size:13.5px;}
.footer-grid li a:hover{color:var(--sun);}
.footer-logo-img{width:56px;height:56px;object-fit:contain;flex-shrink:0;border-radius:13px;}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding:22px 0;font-size:12.5px;flex-wrap:wrap;gap:10px;font-family:var(--mono);color:rgba(238,233,220,.45);}
.trust-badges{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
/* پروانه‌ی کسب کشوری — مجوز رسمی و باارزش، پس جایگاهی روشن و بزرگ در فوتر دارد؛
   قبلاً کنار نماد اعتماد و خیلی کوچک (64px) بود و تقریباً دیده نمی‌شد. */
.license-banner{display:flex;align-items:center;gap:18px;background:rgba(238,233,220,.06);border:1px solid rgba(238,233,220,.16);border-radius:16px;padding:18px 22px;margin-bottom:26px;}
.license-banner-img{height:132px;width:auto;max-width:100%;border-radius:10px;background:#fff;padding:6px;object-fit:contain;flex:none;box-shadow:0 12px 28px -14px rgba(0,0,0,.5);}
.license-banner-text{display:flex;flex-direction:column;gap:5px;}
.license-banner-text strong{font-size:17px;font-weight:800;color:#fff;}
.license-banner-text span{font-size:13px;color:rgba(238,233,220,.65);}
@media (max-width:640px){
  .license-banner{flex-direction:column;text-align:center;padding:20px 16px;}
  .license-banner-img{height:150px;}
}
.social{display:flex;gap:10px;}
.social a{width:34px;height:34px;border-radius:50%;background:rgba(238,233,220,.08);border:1px solid rgba(238,233,220,.16);display:flex;align-items:center;justify-content:center;color:rgba(238,233,220,.75);}
.social a:hover{border-color:var(--sun);color:var(--sun);}

/* ---------- Responsive (چهارچوب) ---------- */
@media (max-width:980px){
  nav.mainnav{display:none;}
  .burger{display:flex;width:40px;height:40px;border-radius:12px;background:var(--paper-alt);border:1px solid var(--line);align-items:center;justify-content:center;flex-shrink:0;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  /* روی تبلت/موبایل «دوره‌ها»یِ تکراری و «خروج» کاربرِ واردشده در نوار بالا
     جمع می‌شوند (در منوی همبرگر هست)؛ ولی «داشبورد من» عمداً همیشه در بالا
     پیداست — نباید پشتِ منوی کشویی قایم شود. برای کاربرِ مهمان هم «ورود»
     و «ثبت‌نام» عمداً همیشه پیدا می‌مانند. */
  .nav-auth-courses,.nav-logout{display:none;}
  .nav-auth-dash{display:inline-flex;}
}
@media (max-width:640px){
  .footer-grid{grid-template-columns:1fr;}
  /* روی گوشی، به‌جای دو دکمه‌ی جدا، یک دکمه‌ی «ورود / ثبت‌نام» کنار همبرگر
     می‌ماند که کاربر را به صفحه‌ی ورود می‌برد (آنجا لینک ثبت‌نام هم هست). */
  .nav-auth-login,.nav-auth-register{display:none;}
  .nav-auth-both{display:inline-flex;}
}
/* روی موبایل نام برند («بهار یادگیری» + «learnspring.ir») با فونت اصلی
   (20px) و لوگوی 40px به سقف هدر sticky می‌چسبید و کنار دو آیکون (پروفایل/
   ورود + همبرگر) که خودشان هم فاصله‌ی کافی از هم نداشتند فشرده می‌شد. */
@media (max-width:480px){
  .topbar{padding:12px 0;gap:10px;}
  .logo{gap:8px;font-size:14.5px;}
  .logo img{width:32px;height:32px;border-radius:9px;}
  .logo-text small{font-size:9.5px;}
  .nav-actions{gap:8px;}
  .nav-actions .btn-sm{padding:8px 11px;font-size:12px;}
  .icon-btn{width:36px;height:36px;}
  .burger{width:36px;height:36px;}
  .footer-grid .logo{font-size:14.5px;gap:8px;}
  .footer-logo-img{width:42px;height:42px;}
  .social{gap:8px;}
  .social a{width:30px;height:30px;}
}