/* ===========================
   bio.ly – Footer CSS (light)
   =========================== */

.site-footer{
  margin-top: 48px;
  background: var(--elev, #171c29);
  color: var(--text, #e6ebf5);
  border-top: 1px solid var(--border, #253046);
}

.dark-footer{ background: var(--elev); }

/* ===== Top CTA ===== */
.footer-cta-section{
  text-align:center;
  padding: 36px 14px 28px;
  background:
    radial-gradient(1000px 400px at 15% 0%, color-mix(in oklab, var(--primary) 14%, transparent), transparent 60%),
    radial-gradient(900px 450px at 100% 10%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  border-bottom: 1px solid var(--border);
}
.footer-cta-title{
  font-size: clamp(20px, 3.2vw, 28px);
  font-weight: 800;
  margin: 0 0 6px;
}
.footer-cta-desc{
  margin: 0 auto 12px;
  max-width: 720px;
  color: var(--text-dim, #b9c2d3);
  font-size: 15px;
}
.footer-cta-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 10px 16px; border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color:#fff; font-weight: 700; text-decoration:none; border:0;
  box-shadow: var(--shadow-1, 0 6px 18px rgba(0,0,0,.18));
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.footer-cta-btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-2, 0 10px 30px rgba(0,0,0,.25)); }

/* ===== Main ===== */
.footer-main{
  width: min(100%, var(--container, 1120px));
  margin-inline: auto;
  padding: 22px 18px 18px;
}

/* Columns */
.footer-cols{
  display:grid; gap: 16px;
  grid-template-columns: repeat(12, 1fr);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.footer-col{
  grid-column: span 12;
  padding: 8px 4px;
}
@media (min-width: 720px){
  .footer-col{ grid-column: span 6; }
}
@media (min-width: 1024px){
  .footer-col{ grid-column: span 3; }
}

.footer-col h3{
  margin: 0 0 10px;
  font-size: 14px; letter-spacing: .6px; text-transform: uppercase;
  color: color-mix(in oklab, var(--text) 86%, #ffffff 14%);
  opacity: .9;
}
.footer-col a{
  display:block; text-decoration:none;
  padding: 8px 0; font-size: 14px; font-weight: 600;
  color: var(--text, #e6ebf5);
  opacity: .9;
  border-radius: 10px;
  transition: background .12s ease, opacity .12s ease, transform .12s ease;
}
.footer-col a:hover{
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  opacity: 1; transform: translateX(2px);
}

/* ===== Social & Logo ===== */
.footer-social-row{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px; padding: 16px 0;
}
.footer-logo{
  height: 28px; width: auto; display:block; opacity:.95;
}
.footer-social{
  display:flex; align-items:center; gap: 10px;
}
.footer-social a{
  display:grid; place-items:center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--surface, #121722);
  border: 1px solid var(--border);
  transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}
.footer-social a:hover{
  background: color-mix(in oklab, var(--primary) 12%, var(--surface) 88%);
  border-color: color-mix(in oklab, var(--primary) 40%, var(--border) 60%);
  transform: translateY(-1px);
}
.footer-social img{ width: 18px; height: 18px; display:block; }

/* ===== Bottom Bar ===== */
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px; padding: 14px 0 6px;
  color: var(--text-dim, #b9c2d3);
  font-size: 13px; flex-wrap: wrap;
}
.footer-bottom a{
  color: var(--text, #e6ebf5); text-decoration:none; font-weight:700;
}
.footer-bottom a:hover{
  text-decoration: underline;
}

/* ===== RTL tweaks ===== */
html[dir="rtl"] .footer-col a:hover{ transform: translateX(-2px); }
html[dir="rtl"] .footer-bottom{ text-align: right; }
html[dir="rtl"] .footer-social-row{ flex-direction: row-reverse; }
html[dir="rtl"] .footer-social{ flex-direction: row-reverse; }

/* ===== Small screens ===== */
@media (max-width: 700px){
  .footer-social-row{ flex-direction: column; align-items: flex-start; }
  .footer-logo{ height: 26px; }
  .footer-bottom{ flex-direction: column; align-items: flex-start; gap:6px; }
}

/* ===== Light mode polish ===== */
@media (prefers-color-scheme: light){
  .site-footer{ background: var(--surface, #f8fafc); }
  .footer-cta-section{ border-color: var(--border, #e2e8f0); }
  .footer-col a:hover{ background: color-mix(in oklab, var(--primary) 8%, #fff 92%); }
  .footer-social a{ background: #fff; }
}






/* === Social buttons — force black SVG === */
.footer-social {
  display:flex; align-items:center; gap: 10px;
}

/* خلفية بيضاء وحدود فاتحة لضمان تباين أسود واضح في الثيمين */
.footer-social .social-btn{
  display:grid; place-items:center;
  width: 36px; height: 36px; border-radius: 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #000; /* مهم: يجعل svg بلون أسود عبر currentColor */
  transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}
.footer-social .social-btn:hover{
  background: #f6f6f6;
  border-color: #dfe3ea;
  transform: translateY(-1px);
}

/* أيقونة SVG نفسها ترث اللون الأسود */
.footer-social .ico{
  width: 18px; height: 18px; display:block;
  fill: currentColor; /* للـ path المملوء */
  stroke: currentColor; /* للـ path المرسوم */
}

/* لا تغيّر اللون في الثيم الفاتح/الداكن */
@media (prefers-color-scheme: light){
  .footer-social .social-btn{ background:#fff; border-color:#e5e7eb; color:#000; }
}