/*
Theme Name:   Ramy Astra Child
Theme URI:    https://www.drramy.com
Description:  ثيم فرعي مبني على Astra خاص بموقع د. رامي عبدالفتاح
Author:       Arapenz
Template:     astra
Version:      1.0.0
Text Domain:  ramy-astra-child
*/

/* ==========================================================================
   المتغيرات العامة (نفس هوية الصفحة الرئيسية السابقة)
   ========================================================================== */
:root{
  --ink:        #0c1f33;
  --ink-2:      #14304f;
  --ink-3:      #1c3d61;
  --paper:      #f7f4ee;
  --paper-2:    #efe8d8;
  --brass:      #b6893f;
  --brass-light:#d9b876;
  --text-dark:  #23303f;
  --text-muted: #5c6b7a;
  --line:       rgba(182,137,63,.35);
  --line-soft:  rgba(12,31,51,.1);
  --radius-s:   4px;
  --radius-m:   10px;
}

body, .site{
  font-family:'Cairo', sans-serif;
  color:var(--text-dark);
}
h1,h2,h3,h4{ font-family:'Amiri', serif; }

a{ transition:color .25s ease, background-color .25s ease, transform .25s ease; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.8rem; letter-spacing:.12em; font-weight:600;
  color:var(--brass); margin-bottom:14px;
}
.eyebrow::before{ content:''; width:28px; height:1px; background:var(--brass); }

.section-head{ text-align:center; max-width:640px; margin:0 auto 44px; }
.section-head h2{ font-size:2.1rem; font-weight:700; color:var(--ink); margin-bottom:12px; }
.section-head.on-dark h2{ color:#fff; }
.section-head p{ color:var(--text-muted); font-size:1.02rem; }
.section-head.on-dark p{ color:#c9d6e4; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 26px; font-weight:600; font-size:.92rem;
  border-radius:var(--radius-s); border:1.5px solid transparent; cursor:pointer;
}
.btn-brass{ background:linear-gradient(120deg,var(--brass-light),var(--brass)); color:#181109; box-shadow:0 10px 24px rgba(182,137,63,.28); }
.btn-brass:hover{ background:linear-gradient(120deg,var(--brass),var(--brass-light)); transform:translateY(-2px); color:#181109; }
.btn-outline-brass{ border-color:var(--brass); color:var(--brass); background:transparent; }
.btn-outline-brass:hover{ background:var(--brass); color:#181109; }

/* ==========================================================================
   الحاوية العامة - نضمن بادنج مناسب على الشاشات الصغيرة
   ========================================================================== */
.ramy-container{ max-width:1180px; margin:0 auto; padding:0 24px; }
@media (max-width:600px){
  .ramy-container, .ah-content-wrap-fluid .ast-container, .ast-container{ padding-left:18px !important; padding-right:18px !important; }
  .entry-content{ padding-left:4px; padding-right:4px; }
}

/* ==========================================================================
   الهيرو المصغّر (يُستخدم أعلى الصفحة الرئيسية)
   ========================================================================== */
.ramy-hero{
  padding:90px 0 80px; text-align:center; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(120deg, #071b33, #114a7a, #0f8f6e, #0a2e52);
  background-size:300% 300%;
  animation:ramyHeroGradient 18s ease infinite;
}
@keyframes ramyHeroGradient{
  0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; }
}
.ramy-hero::after{
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:44px 44px; pointer-events:none;
}
.ramy-hero .wrap{ position:relative; z-index:2; }
.ramy-hero-frame{ width:150px; height:150px; margin:0 auto 26px; position:relative; padding:8px; }
.ramy-hero-frame::before, .ramy-hero-frame::after{ content:''; position:absolute; width:22px; height:22px; border:2px solid var(--brass-light); }
.ramy-hero-frame::before{ top:0; right:0; border-left:none; border-bottom:none; }
.ramy-hero-frame::after{ bottom:0; left:0; border-right:none; border-top:none; }
.ramy-hero-frame img{ width:100%; height:100%; object-fit:cover; border-radius:50%; border:3px solid rgba(255,255,255,.25); }
.ramy-hero h1{ font-size:2.5rem; color:#fff; margin-bottom:10px; text-shadow:0 4px 18px rgba(0,0,0,.35); }
.ramy-hero .role{ color:var(--brass-light); font-weight:700; margin-bottom:18px; }
.ramy-hero p.lede{ max-width:600px; margin:0 auto 30px; color:#e4edf3; }
.ramy-hero-ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ==========================================================================
   قسم أحدث المقالات - صفّين متناسقين
   ========================================================================== */
.ramy-latest-posts{ padding:90px 0; background:var(--paper); }
.ramy-posts-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
}
.ramy-post-card{
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius-m);
  overflow:hidden; display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease;
}
.ramy-post-card:hover{ transform:translateY(-6px); box-shadow:0 18px 34px rgba(12,31,51,.12); }
.ramy-post-thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--paper-2); }
.ramy-post-thumb img{ width:100%; height:100%; object-fit:cover; }
.ramy-post-body{ padding:22px 20px; display:flex; flex-direction:column; flex-grow:1; }
.ramy-post-cat{ color:var(--brass); font-size:.78rem; font-weight:700; margin-bottom:10px; }
.ramy-post-body h3{ font-size:1.15rem; color:var(--ink); margin-bottom:12px; line-height:1.5; }
.ramy-post-body h3 a{ color:inherit; }
.ramy-post-excerpt{ color:var(--text-muted); font-size:.92rem; margin-bottom:16px; flex-grow:1; }
.ramy-post-meta{ display:flex; align-items:center; gap:8px; color:var(--text-muted); font-size:.82rem; border-top:1px solid var(--line-soft); padding-top:14px; }

/* ==========================================================================
   صفحة المقال المفرد
   ========================================================================== */
.ramy-single-header{ padding:70px 0 20px; text-align:center; }
.ramy-single-header .eyebrow-cat{ color:var(--brass); font-weight:700; font-size:.85rem; margin-bottom:14px; display:block; }
.ramy-single-title{
  font-family:'Amiri', serif; font-size:2.6rem; font-weight:700; color:var(--ink);
  line-height:1.4; max-width:820px; margin:0 auto 20px;
}
.ramy-single-meta{ display:flex; justify-content:center; gap:22px; flex-wrap:wrap; color:var(--text-muted); font-size:.92rem; margin-bottom:10px; }
.ramy-single-meta span{ display:inline-flex; align-items:center; gap:6px; }

.ramy-featured-wrap{ max-width:900px; margin:0 auto 50px; padding:0 24px; }
.ramy-featured-wrap img{ width:100%; border-radius:var(--radius-m); box-shadow:0 22px 40px rgba(12,31,51,.18); }

.ramy-single-content{ max-width:760px; margin:0 auto; padding:0 24px 20px; }
.ramy-single-content .entry-content{
  font-size:1.12rem; line-height:2.05; color:var(--text-dark);
}
.ramy-single-content .entry-content p{ margin-bottom:1.6em; }
.ramy-single-content .entry-content h2{
  font-family:'Amiri', serif; font-size:1.7rem; color:var(--ink); font-weight:700;
  margin:2.2em 0 .9em; padding-inline-start:16px; border-inline-start:4px solid var(--brass);
}
.ramy-single-content .entry-content h3{
  font-family:'Cairo', sans-serif; font-size:1.28rem; color:var(--ink-2); font-weight:700;
  margin:1.8em 0 .8em;
}
.ramy-single-content .entry-content h4{ font-size:1.1rem; color:var(--ink-2); margin:1.5em 0 .6em; }
.ramy-single-content .entry-content blockquote{
  border-inline-start:4px solid var(--brass); background:var(--paper-2);
  padding:20px 24px; border-radius:0 var(--radius-s) var(--radius-s) 0; font-style:normal;
  color:var(--ink); margin:1.8em 0;
}
.ramy-single-content .entry-content img{ border-radius:var(--radius-m); }
.ramy-single-content .entry-content ul, .ramy-single-content .entry-content ol{ margin:0 0 1.6em; padding-inline-start:24px; }
.ramy-single-content .entry-content li{ margin-bottom:.5em; }
.ramy-single-content .entry-content a{ color:var(--brass); text-decoration:underline; }

/* صندوق الكاتب */
.ramy-author-box{
  max-width:760px; margin:50px auto; padding:30px; display:flex; gap:22px; align-items:flex-start;
  background:var(--paper-2); border-radius:var(--radius-m); border-inline-start:4px solid var(--brass);
}
.ramy-author-avatar img{ border-radius:50%; width:72px; height:72px; }
.ramy-author-eyebrow{ color:var(--brass); font-weight:700; font-size:.78rem; }
.ramy-author-info h3{ font-size:1.25rem; color:var(--ink); margin:4px 0 10px; }
.ramy-author-info p{ color:var(--text-muted); font-size:.95rem; margin-bottom:14px; }
.ramy-author-social{ display:flex; gap:10px; }
.ramy-author-social a{
  width:36px; height:36px; border-radius:50%; background:var(--ink); color:var(--brass-light);
  display:flex; align-items:center; justify-content:center; font-size:.9rem;
}
.ramy-author-social a:hover{ background:var(--brass); color:#181109; }

/* أيقونات المشاركة */
.ramy-share{ max-width:760px; margin:0 auto 50px; padding:0 24px; text-align:center; }
.ramy-share-label{ display:block; color:var(--text-muted); font-weight:700; font-size:.85rem; margin-bottom:14px; }
.ramy-share-icons{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.share-btn{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.95rem; border:none; cursor:pointer;
}
.share-btn.fb{ background:#1877f2; } .share-btn.wa{ background:#25d366; }
.share-btn.tg{ background:#0088cc; } .share-btn.x{ background:#111827; }
.share-btn.li{ background:#0a66c2; } .share-btn.ig{ background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4); }
.share-btn.copy{ background:var(--ink); }
.share-btn:hover{ transform:translateY(-3px); box-shadow:0 8px 18px rgba(0,0,0,.2); }

/* المقالات ذات الصلة */
.ramy-related{ background:var(--paper-2); padding:70px 24px; }
.ramy-related-grid{ max-width:1000px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.related-card{ background:#fff; border-radius:var(--radius-m); overflow:hidden; display:block; border:1px solid var(--line-soft); }
.related-thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--paper); }
.related-thumb img{ width:100%; height:100%; object-fit:cover; }
.related-thumb-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--brass); font-size:1.6rem; }
.related-card h3{ font-size:1.02rem; color:var(--ink); padding:16px 16px 6px; line-height:1.5; }
.related-date{ display:block; padding:0 16px 16px; color:var(--text-muted); font-size:.82rem; }

/* قسم الكتب (يُستخدم في المقال وصفحة عني) */
.ramy-books-section{ background:linear-gradient(160deg, var(--ink), var(--ink-2)); padding:80px 24px; }
.ramy-books-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:24px; }
.ramy-book-card{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-m); padding:22px; text-align:center; display:flex; flex-direction:column; }
.ramy-book-cover img{ width:100%; max-width:170px; aspect-ratio:3/4.6; object-fit:cover; margin:0 auto 18px; border-radius:3px; box-shadow:0 16px 30px rgba(0,0,0,.4); }
.ramy-book-card h3{ color:#fff; font-size:1.05rem; margin-bottom:8px; }
.ramy-book-card p{ color:#c9d6e4; font-size:.85rem; margin-bottom:16px; flex-grow:1; }
.book-buy{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1.5px solid var(--brass); color:var(--brass-light); padding:9px 18px; border-radius:30px; font-weight:600; font-size:.85rem; align-self:center; }
.book-buy:hover{ background:var(--brass); color:#181109; }

/* ==========================================================================
   الشريط الجانبي
   ========================================================================== */
#secondary .widget, .ramy-sidebar .widget{
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius-m);
  padding:26px; margin-bottom:26px;
}
.widget-title{ font-family:'Amiri',serif; font-size:1.2rem; color:var(--ink); margin-bottom:18px; border-bottom:2px solid var(--brass); padding-bottom:10px; }

.ramy-recent-widget ul{ list-style:none; margin:0; padding:0; }
.ramy-recent-widget li{ margin-bottom:16px; }
.ramy-recent-widget li a{ display:flex; gap:12px; align-items:center; color:var(--text-dark); }
.recent-thumb{ width:56px; height:56px; border-radius:var(--radius-s); overflow:hidden; flex-shrink:0; background:var(--paper-2); display:flex; align-items:center; justify-content:center; color:var(--brass); }
.recent-thumb img{ width:100%; height:100%; object-fit:cover; }
.recent-title{ display:block; font-size:.92rem; font-weight:600; line-height:1.4; }
.recent-date{ display:block; font-size:.76rem; color:var(--text-muted); margin-top:4px; }

.ramy-services-widget .ramy-services-group{ margin-bottom:18px; }
.ramy-services-widget h4{ font-size:.95rem; color:var(--brass); font-weight:700; margin-bottom:10px; }
.ramy-services-widget ul{ list-style:none; margin:0; padding:0; }
.ramy-services-widget li{ font-size:.86rem; color:var(--text-dark); padding:6px 0; border-bottom:1px dashed var(--line-soft); display:flex; align-items:center; gap:8px; }
.ramy-services-widget i{ color:var(--brass); width:16px; }

.ramy-contact-banner{ background:linear-gradient(145deg,var(--ink),var(--ink-2)) !important; color:#fff; text-align:center; border:none !important; }
.ramy-contact-banner i{ font-size:1.8rem; color:var(--brass-light); margin-bottom:12px; }
.ramy-contact-banner h3{ color:#fff; font-size:1.15rem; margin-bottom:8px; }
.ramy-contact-banner p{ color:#c9d6e4; font-size:.88rem; margin-bottom:18px; }

/* ==========================================================================
   صفحة اتصل بي
   ========================================================================== */
.ramy-contact-page{ padding:80px 24px; max-width:1000px; margin:0 auto; }
.ramy-contact-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:50px; align-items:start; }
.ramy-contact-info-item{ display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.ramy-contact-info-item .ic{ width:48px; height:48px; border-radius:50%; background:var(--ink); color:var(--brass-light); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ramy-contact-form{ background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius-m); padding:34px; }
.ramy-contact-form .form-group{ margin-bottom:18px; }
.ramy-contact-form label{ display:block; font-size:.88rem; font-weight:600; margin-bottom:8px; color:var(--ink); }
.ramy-contact-form input, .ramy-contact-form select, .ramy-contact-form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line-soft); border-radius:var(--radius-s); font-family:'Cairo',sans-serif;
}
.ramy-contact-form input:focus, .ramy-contact-form select:focus, .ramy-contact-form textarea:focus{ outline:none; border-color:var(--brass); }
.ramy-form-notice{ padding:14px 18px; border-radius:var(--radius-s); margin-bottom:20px; font-weight:600; }
.ramy-form-notice.success{ background:#dcfce7; color:#166534; }
.ramy-form-notice.error{ background:#fee2e2; color:#991b1b; }
.ramy-honeypot{ position:absolute !important; left:-9999px !important; }

/* ==========================================================================
   صفحة عني (والصفحات العامة الأخرى)
   ========================================================================== */
.ramy-page-hero{ background:linear-gradient(160deg,var(--ink),var(--ink-2)); color:#fff; padding:70px 24px; text-align:center; }
.ramy-page-hero h1{ font-size:2.3rem; }
.ramy-page-body{ max-width:820px; margin:0 auto; padding:60px 24px; font-size:1.08rem; line-height:2; }
.ramy-page-body h2{ color:var(--ink); font-size:1.6rem; margin:1.4em 0 .6em; }

/* ==========================================================================
   الفوتر المخصص
   ========================================================================== */
.ramy-footer{ background:#081522; color:#fff; padding:70px 0 26px; }
.ramy-footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.ramy-footer h3{ color:var(--brass-light); font-size:1.35rem; margin-bottom:14px; }
.ramy-footer h4{ font-family:'Cairo',sans-serif; color:var(--brass-light); font-size:1rem; font-weight:700; margin-bottom:18px; }
.ramy-footer p{ color:#a9b7c4; font-size:.92rem; margin-bottom:10px; }
.ramy-footer p a{ color:#fff; }
.ramy-footer-social{ display:flex; gap:10px; margin-top:16px; }
.ramy-footer-social a{ width:38px; height:38px; border-radius:50%; border:1.5px solid rgba(255,255,255,.25); color:#fff; display:flex; align-items:center; justify-content:center; }
.ramy-footer-social a:hover{ background:var(--brass); border-color:var(--brass); color:#181109; }
.ramy-footer ul{ list-style:none; margin:0; padding:0; }
.ramy-footer ul li{ margin-bottom:12px; }
.ramy-footer ul li a{ color:#a9b7c4; display:flex; align-items:center; gap:8px; font-size:.92rem; }
.ramy-footer ul li a:hover{ color:var(--brass-light); }
.ramy-footer-bottom{ max-width:1180px; margin:0 auto; padding:22px 24px 0; border-top:1px solid rgba(255,255,255,.1); text-align:center; color:#8195a5; font-size:.85rem; }
@media (max-width:900px){ .ramy-footer-grid{ grid-template-columns:1fr; } }

/* تخطيط عمودين: المحتوى + الشريط الجانبي */
.ramy-article-grid{
  display:grid; grid-template-columns:1fr 320px; gap:50px; align-items:start;
  padding-top:10px; padding-bottom:10px;
}
.ramy-article-main .ramy-share,
.ramy-article-main .ramy-author-box{ max-width:none; padding:0; margin-top:40px; margin-bottom:0; }
.ramy-article-main .ramy-author-box{ margin-top:40px; }
.ramy-sidebar{ position:sticky; top:100px; }

@media (max-width:900px){
  .ramy-article-grid{ grid-template-columns:1fr; }
  .ramy-sidebar{ position:static; }
}

/* ==========================================================================
   كسر حاوية Astra الافتراضية للأقسام الممتدة على كامل عرض الشاشة
   ========================================================================== */
.ramy-hero,
.ramy-latest-posts,
.ramy-books-section,
.ramy-related,
.ramy-page-hero,
.ramy-footer,
.ramy-single-header{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  max-width:100vw;
}

/* ==========================================================================
   الاستجابة للشاشات الصغيرة
   ========================================================================== */
@media (max-width:900px){
  .ramy-posts-grid, .ramy-related-grid{ grid-template-columns:1fr 1fr; }
  .ramy-contact-grid{ grid-template-columns:1fr; }
  .ramy-author-box{ flex-direction:column; text-align:center; }
  .ramy-author-social{ justify-content:center; }
}
@media (max-width:600px){
  .ramy-posts-grid, .ramy-related-grid{ grid-template-columns:1fr; }
  .ramy-single-title{ font-size:1.9rem; }
  .ramy-single-content .entry-content{ font-size:1.02rem; line-height:1.9; }
  .ramy-hero h1{ font-size:2rem; }
  .ramy-featured-wrap, .ramy-single-content, .ramy-single-header{ padding-left:18px; padding-right:18px; }
}