/*
Theme Name: AiBuildy Theme
Theme URI: https://aibuildy.com
Author: AiBuildy
Author URI: https://aibuildy.com
Description: قالب ووردبريس مخصص لموقع AiBuildy، خفيف، صاروخي، متجاوب 100% وصديق للسيو.
Version: 1.3
Text Domain: aibuildy
*/

:root {
  --body-bg: #f8fafc;
  --primary: #dc2626;
  --text: #334155;
  --red-grad: linear-gradient(135deg, #ef4444, #b91c1c);
}

body { 
  margin: 0; padding: 0; 
  font-family: 'Tajawal', sans-serif; 
  background-color: var(--body-bg); 
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23dc2626' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  color: var(--text); 
  direction: rtl; 
  display: flex; 
  flex-direction: column; 
  min-height: 100vh;
  line-height: 1.6;
  overflow-wrap: break-word; 
  word-wrap: break-word; 
  word-break: break-word;
}

a { text-decoration: none; color: var(--primary); transition: all 0.3s ease; }
* { box-sizing: border-box; }
p, h1, h2, h3, h4, h5, h6 { margin-top: 0; vertical-align: baseline; }
img { vertical-align: middle; max-width: 100%; height: auto; }

/* Header */
.site-header { background: var(--red-grad); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.15); position: relative; z-index: 100; flex-shrink: 0; }
.header-main { display: flex; justify-content: center; align-items: center; padding: 15px 20px; position: relative; }
.header-logo { text-align: center; }
.header-logo h1 { margin: 0; font-size: 1.8rem; line-height: 1.4; }
.header-logo h1 a { color: #fff; }
.header-logo p { margin: 5px 0 0; color: #fecaca; font-size: 0.95rem; }

/* Menu */
.nav-toggle { display: none; }
.nav-toggle-label { display: none; cursor: pointer; padding: 10px; }
.nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after { display: block; background: #fff; height: 3px; width: 26px; border-radius: 2px; position: relative; transition: 0.3s; }
.nav-toggle-label span::before { content: ''; position: absolute; top: -8px; }
.nav-toggle-label span::after { content: ''; position: absolute; bottom: -8px; }

.nav-wrapper { background: rgba(0,0,0,0.15); border-top: 1px solid rgba(255,255,255,0.1); width: 100%; }
.nav-content { display: flex; justify-content: center; flex-wrap: wrap; max-width: 1150px; margin: 0 auto; }
.nav-content ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.nav-content li a { display: block; padding: 12px 20px; color: #fff; font-weight: bold; font-size: 1.05rem; }
.nav-content li a:hover { background: rgba(255,255,255,0.2); }

/* Main Container */
.container { max-width: 1150px; margin: 0 auto; padding: 0 15px; }
.main-wrapper { margin: 35px auto; flex: 1 0 auto; width: 100%; }

/* Slider */
.home-slider { margin-bottom: 40px; width: 100%; }
.slider-wrapper { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 15px; padding-bottom: 10px; scroll-behavior: smooth; }
.slider-wrapper::-webkit-scrollbar { height: 6px; }
.slider-wrapper::-webkit-scrollbar-thumb { background-color: var(--primary); border-radius: 4px; }
.slider-wrapper::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 4px; }
.slider-item { flex: 0 0 100%; scroll-snap-align: center; position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 15px rgba(0,0,0,0.1); }
.slider-item img { width: 100%; height: 350px; object-fit: cover; display: block; }
.slider-caption { position: absolute; bottom: 0; right: 0; left: 0; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); padding: 40px 20px 20px; color: #fff; display: flex; flex-direction: column; align-items: flex-start; }
.slider-caption h2 { margin: 0 0 15px; font-size: 1.5rem; line-height: 1.3; color: #fff; width: 100%; }
.btn-slider { background: var(--primary); color: #fff; padding: 8px 20px; border-radius: 6px; font-weight: bold; font-size: 1rem; display: inline-block; }

@media (min-width: 768px) { .slider-item img { height: 450px; } .slider-caption h2 { font-size: 2.2rem; } }

/* Grid Cards */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.post-card { background: #fff; border-radius: 12px; overflow: hidden; border: 2px solid #e2e8f0; box-shadow: 0 4px 6px rgba(0,0,0,0.02); transition: transform 0.3s, box-shadow 0.3s; display: flex; flex-direction: column; }
.post-card:hover { transform: translateY(-6px); box-shadow: 0 12px 20px rgba(220, 38, 38, 0.1); border-color: var(--primary); }

/* --- الحل الجذري للصورة: تملأ البطاقة بالكامل وتتخذ شكلها دون فراغات أو قص --- */
.post-card > a { display: block; line-height: 0; overflow: hidden; background: #f8fafc; border-bottom: 2px solid #f1f5f9; }
.post-card-image { 
    width: 100% !important; 
    height: auto !important; 
    display: block; 
    margin: 0; 
    padding: 0; 
    border-radius: 12px 12px 0 0;
}

.post-card-content { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; min-width: 0; justify-content: flex-start; }
.post-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; line-height: 1; }
.post-category { background: #fee2e2; color: #dc2626; padding: 4px 8px; border-radius: 6px; font-size: 0.8rem; font-weight: bold; }
.post-date { color: #64748b; font-size: 0.8rem; }

.wpac-rating { margin-bottom: 12px; direction: ltr; text-align: right; }

/* --- ضغط عنوان المقال ليكون أنيقاً ومتلاصقاً --- */
.post-card-title { font-size: 1.25rem; margin: 0 0 10px; line-height: 1.3; font-weight: 700; width: 100%; word-break: break-word; }
.post-card-title a { color: var(--text); }
.post-card-title a:hover { color: var(--primary); }

.post-card-snippet { color: #64748b; font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px; flex-grow: 1; width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-top: 0; }
.btn { display: block; background: var(--red-grad); color: #fff !important; padding: 12px 15px; border-radius: 8px; text-align: center; font-weight: bold; font-size: 1.05rem; transition: 0.3s; margin-top: auto; line-height: 1.4; }
.btn:hover { opacity: 0.9; box-shadow: 0 4px 10px rgba(220, 38, 38, 0.3); }

@media (min-width: 900px) {
  .post-grid .post-card:nth-child(5n) { grid-column: span 2; flex-direction: row; }
  .post-grid .post-card:nth-child(5n) > a { width: 50%; border-bottom: none; border-left: 2px solid #f1f5f9; display: flex; align-items: center; }
  .post-grid .post-card:nth-child(5n) .post-card-image { border-radius: 12px 0 0 12px; }
  .post-grid .post-card:nth-child(5n) .post-card-content { width: 50%; justify-content: center; }
}

/* Single Post & Page */
.single-article { background: #fff; padding: 35px; border-radius: 12px; border: 2px solid #e2e8f0; box-shadow: 0 4px 10px rgba(0,0,0,0.02); margin-bottom: 30px; }
.single-title { font-size: 2rem; margin-top: 0; margin-bottom: 20px; color: var(--primary); border-bottom: 2px solid #f1f5f9; padding-bottom: 15px; line-height: 1.3; font-weight: 700; }
.entry-content { font-size: 1.1rem; line-height: 1.8; color: #475569; }

/* --- تقليل حجم العناوين الفرعية لتتناسب مع جميع الشاشات --- */
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 { 
    background: #fff1f2; color: #b91c1c; padding: 10px 15px; 
    border-right: 4px solid var(--primary); border-radius: 4px 0 0 4px; 
    margin-top: 1.5em; margin-bottom: 1em; font-weight: 700; 
    line-height: 1.3; font-size: 1.35rem; 
}

.download-box { background: #fff1f2; border: 2px dashed #fda4af; border-radius: 10px; padding: 25px; text-align: center; margin-top: 35px; }
.download-box h3 { color: #be123c; margin-top: 0; font-size: 1.3rem; }
.btn-download { display: inline-block; background: var(--red-grad); color: #fff !important; padding: 12px 35px; border-radius: 8px; font-weight: bold; font-size: 1.15rem; margin-top: 15px; box-shadow: 0 4px 10px rgba(220, 38, 38, 0.2); line-height: 1.4; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 10px; margin: 35px 0; }
.pagination a, .pagination span { background: var(--red-grad); color: #fff; padding: 10px 20px; border-radius: 8px; font-weight: bold; font-size: 1.05rem; }
.pagination span.current { background: #334155; }

/* Footer */
.site-footer { background: var(--red-grad); color: #fff; padding: 20px 0; font-size: 1rem; flex-shrink: 0; margin-top: auto; border-top: 1px solid rgba(255,255,255,0.2); line-height: 1.6; }
.footer-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.footer-copyright p { margin: 0; font-weight: 500;}
.footer-links ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links li a { color: #fff; font-weight: bold; transition: opacity 0.3s; }

/* --- التجاوب وإعدادات شاشة الهاتف (الموبايل) --- */
@media (max-width: 768px) {
  .header-main { flex-direction: row; justify-content: space-between; padding: 15px; }
  .nav-toggle-label { display: block; order: 1; }
  .header-logo { order: 2; text-align: left; width: auto; }
  .header-logo h1 { font-size: 1.4rem; }
  .nav-wrapper { position: absolute; top: 100%; right: 0; left: 0; background: #b91c1c; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; border: none; z-index: 100; }
  .nav-content { flex-direction: column; width: 100%; }
  
  /* --- ترتيب القائمة (الأقسام) للموبايل بشكل عكسي ليطابق ترتيب شاشة الكمبيوتر --- */
  .nav-content ul { display: flex; flex-direction: column-reverse; width: 100%; }
  
  .nav-content li a { text-align: left; border-bottom: 1px solid rgba(255,255,255,0.08); padding: 15px; }
  .nav-toggle:checked ~ .nav-wrapper { max-height: 800px; }
  .nav-toggle:checked ~ .header-main .nav-toggle-label span { background: transparent; }
  .nav-toggle:checked ~ .header-main .nav-toggle-label span::before { transform: rotate(45deg); top: 0; }
  .nav-toggle:checked ~ .header-main .nav-toggle-label span::after { transform: rotate(-45deg); bottom: 0; }
  .footer-container { flex-direction: column; gap: 15px; text-align: center; justify-content: center; }
  
  /* --- ضغط وتصغير العناوين والمسافات في شاشة الموبايل فقط --- */
  .single-article { padding: 20px; }
  .single-title { font-size: 1.4rem; line-height: 1.3; }
  .post-card-title { font-size: 1.1rem; line-height: 1.3; margin-bottom: 8px; }
  
  .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 {
    font-size: 1.15rem;
    padding: 8px 12px;
    line-height: 1.3;
    margin-top: 1.2em;
    margin-bottom: 0.8em;
  }
}