/*
Theme Name: مهيتاب طه
Theme URI: https://example.com
Author: مهيتاب طه
Author URI: https://example.com
Description: ثيم بورتفوليو إبداعي وشخصي باسم مهيتاب طه، مبني بالكامل عشان يتصمم ويتحرر بمحرر Elementor. مستوحى من هوية بصرية فنية: نجمة هندسية إسلامية دايرة ببطء خلف الاسم، وحائط أعمال معلّق بإطارات مايلة شوية زي الاستوديوهات الحقيقية.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mahitab
Tags: portfolio, elementor, custom-menu, custom-logo, rtl-language-support, translation-ready, one-column, right-sidebar
*/

/* ============================================
   1) التوكنز: الألوان والخطوط والمسافات
   ============================================ */
:root{
  --ink:        #1B1B1E; /* أسود دافئ - خلفية أساسية */
  --ink-soft:   #26241F;
  --parchment:  #EFE6D8; /* ورق دافئ - خلفية فاتحة */
  --parchment-2:#E4D8C4;
  --brass:      #B08D57; /* ذهبي نحاسي - لمسة فنية */
  --brass-soft: #C9A96E;
  --rose:       #A6423A; /* أحمر طيني غامق */
  --teal:       #1F4741; /* أخضر مزرق غامق */
  --ash:        #8A8378; /* رمادي دافئ للنصوص الثانوية */

  --font-display: 'Aref Ruqaa', 'Amiri', serif;
  --font-body:    'Cairo', 'Tahoma', sans-serif;

  --container: 1180px;
  --radius: 2px;
  --ease: cubic-bezier(.16,.84,.44,1);
}

/* ============================================
   2) إعادة ضبط أساسية
   ============================================ */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  direction:rtl;
  text-align:right;
  background:var(--parchment);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.8;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; margin:0 0 .4em; line-height:1.25; }
p{ margin:0 0 1em; }
.container{ max-width:var(--container); margin:0 auto; padding:0 28px; }
:focus-visible{ outline:3px solid var(--brass); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ============================================
   3) الهيدر
   ============================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(239,230,216,.9);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(27,27,30,.08);
}
.header-inner{
  max-width:var(--container); margin:0 auto; padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand-name{ font-family:var(--font-display); font-size:26px; color:var(--ink); }
.main-nav ul{ display:flex; gap:32px; }
.main-nav a{
  font-size:15px; font-weight:600; position:relative; padding:4px 0;
}
.main-nav a::after{
  content:""; position:absolute; right:0; bottom:-2px; width:0; height:2px;
  background:var(--brass); transition:width .3s var(--ease);
}
.main-nav a:hover::after, .main-nav a:focus::after{ width:100%; }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; }

@media (max-width:820px){
  .main-nav{
    position:fixed; inset:70px 0 0 0; background:var(--parchment);
    transform:translateY(-110%); transition:transform .4s var(--ease);
    padding:32px; border-top:1px solid rgba(27,27,30,.08);
  }
  .main-nav.is-open{ transform:translateY(0); }
  .main-nav ul{ flex-direction:column; gap:20px; }
  .nav-toggle{ display:block; }
}

/* ============================================
   4) الهيرو: الاسم + نجمة هندسية دايرة
   ============================================ */
.hero{
  position:relative; min-height:88vh;
  display:flex; align-items:center; overflow:hidden;
  background:var(--ink); color:var(--parchment);
}
.hero .container{ position:relative; z-index:2; width:100%; }
.hero-eyebrow{
  display:inline-block; font-size:13px; letter-spacing:.12em;
  color:var(--brass-soft); border:1px solid var(--brass); border-radius:999px;
  padding:6px 18px; margin-bottom:22px;
}
.hero-name{
  font-size:clamp(52px, 9vw, 118px); color:var(--parchment); margin:0 0 .15em;
}
.hero-name em{ font-style:normal; color:var(--brass-soft); }
.hero-role{
  font-family:var(--font-body); font-weight:400; font-size:clamp(18px,2.4vw,26px);
  color:var(--parchment); opacity:.85; max-width:640px;
}
.hero-cta{ margin-top:36px; display:flex; gap:16px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:14px 30px;
  border-radius:var(--radius); font-weight:700; font-size:15px;
  border:1px solid transparent; transition:transform .3s var(--ease), background .3s;
}
.btn-primary{ background:var(--brass); color:var(--ink); }
.btn-primary:hover{ transform:translateY(-3px); background:var(--brass-soft); }
.btn-ghost{ border-color:rgba(239,230,216,.4); color:var(--parchment); }
.btn-ghost:hover{ transform:translateY(-3px); border-color:var(--brass); }

/* النجمة الهندسية الثمانية (خاتم) - عنصر الهوية المميز */
.khatam-wrap{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  display:flex; align-items:center; justify-content:flex-start;
}
.khatam{
  position:relative; width:min(60vw,620px); height:min(60vw,620px);
  margin-inline-start:-8%;
  animation:spin-slow 140s linear infinite;
}
.khatam::before, .khatam::after{
  content:""; position:absolute; inset:0;
  border:1.5px solid var(--brass); opacity:.35;
}
.khatam::after{ transform:rotate(45deg); }
.khatam .khatam-inner{
  position:absolute; inset:14%;
  border:1px solid var(--brass); opacity:.28;
  animation:spin-slow-rev 90s linear infinite;
}
.khatam .khatam-inner::before, .khatam .khatam-inner::after{
  content:""; position:absolute; inset:0; border:1px solid var(--brass); opacity:.5;
}
.khatam .khatam-inner::after{ transform:rotate(45deg); }
@keyframes spin-slow{ to{ transform:rotate(360deg); } }
@keyframes spin-slow-rev{ to{ transform:rotate(-360deg); } }

/* ============================================
   5) نبذة
   ============================================ */
.about{ padding:120px 0; background:var(--parchment); }
.about-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center; }
.about-tag{ color:var(--rose); font-weight:700; letter-spacing:.06em; margin-bottom:10px; display:block; }
.about h2{ font-size:clamp(30px,4vw,46px); }
.about-figure{
  position:relative; aspect-ratio:4/5; background:var(--parchment-2);
  border:1px solid rgba(27,27,30,.1); transform:rotate(-2deg);
  box-shadow:14px 14px 0 rgba(27,27,30,.06);
}
.about-figure img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:900px){ .about-grid{ grid-template-columns:1fr; } }

/* ============================================
   6) حائط الأعمال - Portfolio Gallery Wall
   ============================================ */
.works{ padding:120px 0; background:var(--ink); color:var(--parchment); }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:64px; flex-wrap:wrap; }
.section-head h2{ font-size:clamp(30px,4vw,46px); color:var(--parchment); margin:0; }
.section-head p{ color:var(--ash); max-width:420px; margin:0; }

.gallery-wall{
  display:grid; grid-template-columns:repeat(4,1fr); gap:34px 26px;
}
.frame{
  position:relative; background:var(--parchment); padding:14px 14px 46px;
  border:1px solid rgba(239,230,216,.15);
  box-shadow:0 24px 40px -20px rgba(0,0,0,.6);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.frame:nth-child(odd){ transform:rotate(-2.5deg); margin-top:0; }
.frame:nth-child(even){ transform:rotate(2deg); margin-top:34px; }
.frame:nth-child(3n){ transform:rotate(-1deg); margin-top:14px; }
.frame:hover{ transform:rotate(0deg) translateY(-6px); box-shadow:0 30px 50px -18px rgba(0,0,0,.7); }
.frame-media{ aspect-ratio:1/1.1; overflow:hidden; background:var(--parchment-2); }
.frame-media img{ width:100%; height:100%; object-fit:cover; }
.frame-cap{
  position:absolute; bottom:12px; right:14px; left:14px;
  color:var(--ink); font-size:13px; font-weight:700; text-align:center;
}
@media (max-width:1100px){ .gallery-wall{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .gallery-wall{ grid-template-columns:1fr; } .frame:nth-child(even), .frame:nth-child(3n){ margin-top:0; } }

/* ============================================
   7) المسيرة - Timeline
   ============================================ */
.journey{ padding:120px 0; background:var(--parchment); }
.timeline{ position:relative; margin-inline-start:14px; padding-inline-start:36px; border-inline-start:1px solid rgba(27,27,30,.15); }
.timeline-item{ position:relative; padding-bottom:52px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:""; position:absolute; right:-42px; top:4px; width:12px; height:12px;
  background:var(--brass); border-radius:50%; box-shadow:0 0 0 5px var(--parchment);
}
.timeline-year{ color:var(--rose); font-weight:700; font-size:14px; letter-spacing:.06em; }
.timeline-item h3{ font-size:22px; margin:.2em 0 .3em; }
.timeline-item p{ color:var(--ash); max-width:560px; }

/* ============================================
   8) تواصل
   ============================================ */
.contact{ padding:120px 0; background:var(--teal); color:var(--parchment); text-align:center; }
.contact h2{ font-size:clamp(32px,5vw,56px); color:var(--parchment); }
.contact p{ color:rgba(239,230,216,.8); max-width:520px; margin:0 auto 36px; }
.social-row{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; }
.social-row a{
  border:1px solid rgba(239,230,216,.35); border-radius:999px; padding:10px 24px;
  font-size:14px; font-weight:700; transition:border-color .3s, transform .3s var(--ease);
}
.social-row a:hover{ border-color:var(--brass-soft); transform:translateY(-3px); }

/* ============================================
   9) الفوتر
   ============================================ */
.site-footer{ background:var(--ink); color:var(--ash); padding:56px 0 28px; font-size:14px; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.footer-widgets{ display:flex; gap:40px; flex-wrap:wrap; margin-bottom:32px; }
.footer-widget-title{ color:var(--parchment); font-size:16px; margin-bottom:12px; }

/* ============================================
   10) محتوى صفحات عامة (المدونة / صفحات فرعية)
   ============================================ */
.page-wrap{ padding:100px 0; max-width:820px; margin:0 auto; }
.page-wrap h1{ font-size:clamp(30px,4vw,46px); margin-bottom:.6em; }
.entry-meta{ color:var(--ash); font-size:14px; margin-bottom:24px; }
.pagination{ display:flex; gap:12px; margin-top:40px; }
.pagination a, .pagination span{ padding:8px 16px; border:1px solid rgba(27,27,30,.15); }

/* ============================================
   11) توافق Elementor
   ============================================ */
/* منع أي هوامش زيادة من الثيم على صفحات Elementor عشان القوالب تاخد العرض الكامل */
.elementor-page .site-content,
.elementor-page main{ padding:0 !important; margin:0 !important; max-width:none !important; }
.elementor-section.elementor-section-full_width,
.elementor-section-stretched{ max-width:none !important; }
/* تأكيد إن خطوط الثيم متاحة جوه محرر Elementor نفسه */
.elementor-editor-active body{ font-family:var(--font-body); }