/*
Theme Name: Basel Personal Theme
Theme URI: https://baselseif.me/
Author: Basel Seif
Author URI: https://baselseif.me/
Description: قالب شخصي تعريفي ديناميكي باللغة العربية مبني على صفحة الهبوط الخاصة بباسل سيف.
Version: 1.0
Text Domain: basel-personal
*/

:root {
  --primary:#1e90ff;
  --accent:#0f4c81;
  --text:#1a1a1a;
  --bg:#ffffff;
  --section:#f7f9fc;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:'Cairo',sans-serif;scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);}
header{
  background:linear-gradient(135deg,#eaf6ff,var(--primary),#eaf6ff,var(--accent));
  background-size:400% 400%;
  animation:bgMove 10s infinite alternate ease-in-out;
  text-align:center;
  padding:130px 20px 100px;
  color:#000;
  position:relative;
  overflow:hidden;
}
@keyframes bgMove{
  0%{background-position:0% 50%;}
  100%{background-position:100% 50%;}
}
header img{
  width:160px;height:160px;border-radius:50%;
  border:5px solid #fff;box-shadow:0 0 25px rgba(0,0,0,0.15);
  animation:float 4s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}
header h1{
  font-size:2.8em;
  margin-top:20px;
  background:linear-gradient(90deg,var(--accent),var(--primary));
  -webkit-background-clip:text;
  color:transparent;
}
header p{
  margin-top:10px;
  font-size:1.3em;
  color:#333;
}
nav{
  background:#fff;
  box-shadow:0 3px 10px rgba(0,0,0,0.05);
  display:flex;justify-content:center;flex-wrap:wrap;
  padding:15px 10px;
  position:sticky;top:0;z-index:100;
}
nav a{
  color:var(--accent);
  text-decoration:none;
  margin:0 15px;
  font-weight:bold;
  transition:.3s;
  position:relative;
}
nav a::after{
  content:"";
  position:absolute;
  bottom:-5px;left:0;
  width:0;height:3px;
  background:var(--primary);
  transition:.3s;
  border-radius:3px;
}
nav a:hover{color:var(--primary);}
nav a:hover::after{width:100%;}
section{
  max-width:1000px;
  margin:80px auto;
  background:var(--section);
  border-radius:15px;
  box-shadow:0 5px 25px rgba(0,0,0,0.05);
  padding:50px 40px;
  position:relative;

}
section::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  border-radius:6px 6px 0 0;
}
section h2{
  color:var(--accent);
  border-right:5px solid var(--primary);
  padding-right:10px;
  margin-bottom:20px;
  font-size:1.8em;
}
section p{line-height:1.8;font-size:1.05em;margin-bottom:15px;}
.achievements ul{list-style:none;}
.achievements li{
  background:linear-gradient(90deg,rgba(30,144,255,0.08),rgba(15,76,129,0.05));
  padding:12px 15px;margin:10px 0;border-radius:10px;
  transition:.3s;
  border:1px solid rgba(0,0,0,0.05);
}
.achievements li:hover{
  transform:translateY(-5px);
  box-shadow:0 4px 15px rgba(0,0,0,0.08);
}
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:15px;
}
.gallery img{
  width:100%;border-radius:12px;
  transition:.4s;
}
.gallery img:hover{
  transform:scale(1.06);
  box-shadow:0 0 20px rgba(30,144,255,0.3);
}
.tabs{display:flex;gap:15px;margin-bottom:20px;}
.tab{
  padding:10px 20px;
  border:2px solid var(--accent);
  border-radius:10px;
  color:var(--accent);
  font-weight:bold;
  cursor:pointer;
  transition:.3s;
}
.tab.active{
  background:var(--accent);
  color:#fff;
}
.tab-content{display:none;}
.tab-content.active{display:block;}
.testimonials{
  position:relative;
  overflow:hidden;
}
.testimonials .slides{
  display:flex;
  transition:.7s;
}
.slide{
  min-width:100%;
  padding:30px;
  text-align:center;
  font-size:1.2em;
  color:#444;
  font-style:italic;
}
.slide::before{
  content:"“";
  font-size:3em;
  color:var(--primary);
  position:relative;top:10px;right:5px;
}
footer{
  text-align:center;
  padding:30px;
  background:linear-gradient(90deg,var(--accent),var(--primary));
  color:#fff;
  margin-top:80px;
}
footer img{
  width:100px;margin-top:10px;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,0.3));
}
.fade{opacity:0;transform:translateY(40px);transition:all 1s ease;}
.fade.visible{opacity:1;transform:translateY(0);}

/* دارك مود – تغيير المتغيرات */
body.dark-mode {
  --bg:#020617;
  --section:#020617;
  --text:#e5e7eb;
  --primary:#38bdf8;
  --accent:#0ea5e9;
}

/* كروت مقالات احترافية */
.post-card {
  background:#ffffff;
  border-radius:16px;
  padding:18px;
  box-shadow:0 8px 24px rgba(15,23,42,0.08);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  display:flex;
  flex-direction:column;
  gap:12px;
}
body.dark-mode .post-card {
  background:#020617;
  box-shadow:0 0 0 1px rgba(148,163,184,0.35);
}

.post-card-thumb img {
  width:100%;
  border-radius:12px;
  display:block;
}

.post-card-meta {
  font-size:0.85rem;
  color:#6b7280;
}
body.dark-mode .post-card-meta {
  color:#9ca3af;
}

.post-card-title {
  font-size:1.1rem;
  font-weight:700;
}
.post-card-title a {
  color:var(--accent);
  text-decoration:none;
}
.post-card-title a:hover {
  text-decoration:underline;
}

.post-card-excerpt {
  color:#4b5563;
  line-height:1.7;
  font-size:0.98rem;
}
body.dark-mode .post-card-excerpt {
  color:#e5e7eb;
}

.post-card:hover {
  transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(15,23,42,0.18);
}

/* زرار عام */
.btn-primary {
  background:var(--accent);
  color:#fff;
  padding:10px 22px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:0;
  cursor:pointer;
}
.btn-primary:hover {
  background:var(--primary);
}

/* زر دارك مود ثابت */
.dark-toggle {
  position:fixed;
  bottom:20px;
  left:20px;
  width:42px;
  height:42px;
  border-radius:999px;
  border:none;
  box-shadow:0 8px 20px rgba(15,23,42,0.4);
  background:#0f172a;
  color:#facc15;
  font-size:1.1rem;
  cursor:pointer;
  z-index:120;
}
body.dark-mode .dark-toggle {
  background:#e5e7eb;
  color:#020617;
}

/* فورم البحث في الناف */
.site-search {
  display:flex;
  align-items:center;
  margin-right:15px;
}
.site-search input[type="search"] {
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.7);
  padding:6px 14px;
  font-size:0.9rem;
  outline:none;
}
body.dark-mode .site-search input[type="search"] {
  background:#020617;
  color:#e5e7eb;
  border-color:rgba(148,163,184,0.9);
}

/* لياوت للمحتوى + الشريط الجانبي */
.layout {
  display:grid;
  grid-template-columns:2.5fr 1fr;
  gap:30px;
}
@media(max-width:900px){
  .layout {
    grid-template-columns:1fr;
  }
}

/* ودجات */
.widget {
  background:rgba(255,255,255,0.9);
  border-radius:14px;
  padding:18px;
  margin-bottom:18px;
  box-shadow:0 6px 18px rgba(15,23,42,0.08);
}
body.dark-mode .widget {
  background:#020617;
  box-shadow:0 0 0 1px rgba(148,163,184,0.35);
}
.widget-title {
  margin-bottom:10px;
  color:var(--accent);
}
/* ======== Dark Mode Fix for Header & Navbar ======== */

/* Dark Header */
body.dark-mode header {
  background: linear-gradient(135deg, #0f172a, #1e293b, #0f172a, #1e293b) !important;
  color: #e5e7eb !important;
}

body.dark-mode header h1 {
  color: #fff !important;
}

body.dark-mode header p {
  color: #cbd5e1 !important;
}

/* Dark Navbar */
body.dark-mode nav {
  background: #0f172a !important;
  box-shadow: 0 3px 20px rgba(0,0,0,0.5) !important;
}

body.dark-mode nav a {
  color: #e2e8f0 !important;
}

body.dark-mode nav a:hover {
  color: var(--primary) !important;
}

body.dark-mode .site-search input[type="search"] {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: rgba(255,255,255,0.3) !important;
}

.footer-pro {
  background: linear-gradient(90deg, var(--accent), var(--primary));
}

body.dark-mode .footer-pro {
  background: linear-gradient(90deg, #0f172a, #1e293b) !important;
  color: #e5e7eb !important;
}

body.dark-mode .footer-pro a {
  color: #cbd5e1 !important;
}

body.dark-mode .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.2) !important;
}

/* ===== Footer PRO Default ===== */
.footer-pro {
  background: linear-gradient(90deg, var(--accent), var(--primary));
  color: #fff;
  padding: 40px 0;
  text-align: center;
}

.footer-pro p {
  margin: 0;
}

/* ===== Footer - Dark Mode ===== */
body.dark-mode .footer-pro {
  background: linear-gradient(90deg, #0f172a, #1e293b) !important;
  color: #e5e7eb !important;
}

body.dark-mode .footer-pro p {
  color: #cbd5e1 !important;
}
/* ======== Mobile Menu Button ======== */
.mobile-menu-btn {
  display: none;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 200;
  user-select: none;
}

/* Show button on mobile only */
@media(max-width: 768px) {
  .mobile-menu-btn {
    display: block;
  }
  nav {
    display: none;
  }
}

/* ======== Mobile Menu Drawer ======== */
.mobile-menu {
  position: fixed;
  top: 0;
  left: -300px; /* hidden by default */
  width: 250px;
  height: 100%;
  background: var(--accent);
  color: #fff;
  padding: 20px;
  transition: 0.3s ease;
  z-index: 999;
  display: flex;
  flex-direction: column;
}

.mobile-menu.open {
  left: 0;
}

.mobile-menu a {
  color: #fff;
  text-decoration: none;
  padding: 12px 0;
  display: block;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  font-size: 1.1rem;
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 1.3rem;
  font-weight: bold;
}

.close-mobile-menu {
  background: none;
  color: #fff;
  border: none;
  font-size: 2rem;
  cursor: pointer;
}

/* ======== Dark Mode Mobile Menu ======== */
body.dark-mode .mobile-menu {
  background: #0f172a !important;
}

body.dark-mode .mobile-menu a {
  color: #e2e8f0 !important;
}

body.dark-mode .close-mobile-menu {
  color: #e2e8f0 !important;
}

.share-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  background:var(--accent);
  color:#fff;
  border-radius:10px;
  text-decoration:none;
  transition:0.2s;
}

.share-btn:hover {
  background:var(--primary);
  transform:translateY(-2px);
}

body.dark-mode .share-btn {
  background:#1e293b;
}

body.dark-mode .share-btn:hover {
  background:var(--primary);
}