/*
 Theme Name:   Hello Elementor Child (Self-contained v3)
 Template:     hello-elementor
 Text Domain:  hello-elementor-child
 Description:  No Tailwind; scoped ev-* classes; local Vazirmatn font; modern tables; strong overrides.
 Author:       Your Name
 Version:      2.0.0
*/

/* 1) Local font */
@font-face{
  font-family:'Vazirmatn';
  src:url('fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-display:swap;
  font-style:normal;
  font-weight:400;
}
html, body, button, input, select, textarea{
  font-family:'Vazirmatn', Tahoma, Arial, sans-serif !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis:weight;
}
body.ev-lock{overflow:hidden;}

/* 2) Base colors */
:root{
  --blue-50:#eff6ff;
  --blue-500:#3b82f6;
  --blue-600:#2563eb;
  --blue-800:#1e40af;
  --text-900:#111827;
  --text-800:#1f2937;
  --text-700:#374151;
  --muted:#f3f4f6;
  --muted-2:#f9fafb;
  --border:#e5e7eb;
}

/* 3) Container */
.ev-container{max-width:1200px;margin-inline:auto;padding-inline:16px;}

/* 4) Header */
.ev-header{
  position:sticky; top:0; z-index:1000;
  background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.ev-header.is-sticky{ box-shadow:0 10px 30px rgba(0,0,0,.08); }
.ev-header-row{ display:flex; align-items:center; justify-content:space-between; padding-block:12px; gap:12px; }
.ev-brand-link{ display:flex; align-items:center; text-decoration:none; }
.ev-icon{ width:32px; height:32px; color:#2563eb; }
.ev-icon-sm{ width:24px; height:24px; color:#4b5563; }
.ev-icon-xs{ width:20px; height:20px; color:#9ca3af; }
.ev-brand-title{ margin-right:8px; font-size:20px; font-weight:700; color:#1f2937; }

/* Desktop nav */
.ev-nav-desktop{ display:none; }
.ev-menu{ list-style:none; display:flex; gap:6px; margin:0; padding:0; }
.ev-link{ display:inline-block; padding:.5rem .75rem; border-radius:8px; text-decoration:none; color:#374151; transition:.2s ease; }
.ev-link:hover{ background:var(--blue-50); }
.ev-link--primary{ color:#2563eb; background:rgba(59,130,246,.08); }

/* Mobile burger */
.ev-burger{ display:inline-flex; align-items:center; justify-content:center; background:transparent; border:0; cursor:pointer; padding:6px; }
#mobile-menu{ display:none; }
#mobile-menu.is-open{ display:block; }
.ev-nav-mobile{ border-top:1px solid #eee; background:#fff; }
.ev-mobile-menu{ list-style:none; margin:0; padding:12px 0; display:flex; flex-direction:column; gap:8px; }
.ev-mobile-link{ display:block; padding:.5rem .75rem; border-radius:8px; text-decoration:none; color:#374151; }
.ev-mobile-link:hover{ background:var(--blue-50); }
.ev-mobile-link--primary{ background:rgba(59,130,246,.12); color:#2563eb; }

@media (min-width: 992px){
  .ev-nav-desktop{ display:block; }
  .ev-burger{ display:none; }
  .ev-nav-mobile{ display:none !important; }
}

/* 5) Hero + search */
.ev-hero{
  background:linear-gradient(90deg, var(--blue-500), var(--blue-600));
  padding-block:32px;
}
.ev-hero-inner{ max-width:720px; margin-inline:auto; text-align:center; }
.ev-hero-title{ display:block; font-size:26px; font-weight:700; color:#fff; margin-bottom:18px; }
.ev-search{ position:relative; max-width:720px; margin-inline:auto; }
.ev-search-input{
  width:100%; height:52px; padding:0 56px 0 16px;
  border:1px solid rgba(255,255,255,.2); border-radius:10px;
  background:#fff; outline:none; box-shadow:0 10px 25px rgba(0,0,0,.12);
}
.ev-search-input:focus{ box-shadow:0 0 0 2px #93c5fd, 0 10px 25px rgba(0,0,0,.12); }
.ev-search-btn{
  position:absolute; left:8px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; padding:8px; color:#2563eb; cursor:pointer;
}
.ev-popular{ margin-top:12px; color:#fff; font-size:14px; }
.ev-chip{
  display:inline-block; margin:0 6px 6px 0; padding:4px 8px;
  background:rgba(255,255,255,.2); border-radius:999px; color:#fff; text-decoration:none;
}
.ev-chip:hover{ background:rgba(255,255,255,.3); }

/* 6) Footer */
.ev-footer{ background:#1f2937; color:#e5e7eb; padding-block:32px; }
.ev-footer-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
.ev-foot-col{ min-width:0; }
.ev-foot-title{ display:block; font-size:18px; font-weight:700; margin-bottom:12px; color:#fff; }
.ev-foot-text{ color:#d1d5db; font-size:14px; line-height:1.7; }
.ev-foot-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.ev-foot-link{ color:#cbd5e1; text-decoration:none; transition:.2s ease; }
.ev-foot-link:hover{ color:#93c5fd; }
.ev-foot-item{ display:flex; align-items:center; gap:8px; color:#cbd5e1; }
.ev-foot-bar{ border-top:1px solid #374151; margin-top:24px; padding-top:16px; text-align:center; color:#9ca3af; font-size:13px; }

@media (min-width: 992px){
  .ev-footer-grid{ grid-template-columns:repeat(4,1fr); }
}


/* 9) Modern tables */
.entry-content table{
  width:100%; border-collapse:separate; border-spacing:0; margin:24px 0;
  background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.entry-content table thead th{
  position:sticky; top:0; background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);
  color:#0f172a; font-weight:700; padding:14px 16px; border-bottom:1px solid #e5e7eb; z-index:1;
}
.entry-content table th, .entry-content table td{
  padding:14px 16px; text-align:right; vertical-align:middle; border-bottom:1px solid #f1f5f9;
}
.entry-content table tbody tr:nth-child(even){ background:#f9fafb; }
.entry-content table tbody tr:hover{ background:#f3f4f6; }
.entry-content table tfoot td{ background:#fafafa; font-weight:600; border-top:1px solid #e5e7eb; }
/* Responsive scroll */
.entry-content table{ display:block; overflow-x:auto; }
.entry-content table thead, .entry-content table tbody, .entry-content table tfoot{ display:table; width:100%; table-layout:fixed; }
.entry-content table tr{ display:table-row; }
.entry-content table th, .entry-content table td{ display:table-cell; }

/* 10) Main content padding fix */
.site-main{ padding-top:0; }


/* ── Blog Grid (scoped to .ev-blog) ───────────────────────── */
.ev-blog .ev-blog-wrap{ padding-block:28px; }
.ev-grid{ display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:768px){ .ev-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } }
@media (min-width:1100px){ .ev-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; } }

.ev-card{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.ev-card:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.08); border-color:#e2e8f0; }
.ev-card-thumb{ display:block; aspect-ratio:3/2; background:#f3f4f6; overflow:hidden; }
.ev-card-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ev-card-body{ padding:12px; }
.ev-card-title{ font-size:1rem; line-height:1.4; margin:0 0 6px 0; }
.ev-card-title a{ color:#111827; text-decoration:none; }
.ev-card-title a:hover{ color:#2563eb; }
.ev-card-excerpt{ margin:0; color:#4b5563; font-size:.9rem; line-height:1.7; }

.ev-loader{ display:flex; align-items:center; justify-content:center; gap:10px; padding:18px; color:#6b7280; }
.ev-spinner{ width:18px; height:18px; border-radius:50%; border:2px solid #e5e7eb; border-top-color:#2563eb; display:inline-block; animation:evspin 1s linear infinite; }
@keyframes evspin{ to{ transform:rotate(360deg); } }
.ev-noscript{ margin-top:16px; }






/* ——— Single hero (featured image) ——— */
.ev-single-hero{
  max-width: min(780px, 92vw);        /* در دسکتاپ عریض نشود */
  margin: 18px auto 20px;             /* وسط‌چین و فشرده */
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

.ev-single-hero-img{
  display: block;
  width: 100%;
  height: auto;                        /* احترام به نسبت تصویر */
  aspect-ratio: 16 / 9;                /* ظاهر یکدست حتی اگر تصویر عمودی باشد */
  object-fit: cover;                   /* کراپ تمیز لبه‌ها */
  background: #f3f4f6;
}

.ev-single-hero-cap{
  font-size: 13px;
  line-height: 1.6;
  color: #6b7280;
  padding: 10px 12px;
  background: linear-gradient(180deg,#fff 0%, #f9fafb 100%);
  border-top: 1px solid var(--border);
}

/* کمی فاصله تیتر صفحه از تصویر شاخص، اگر لازم شد */
.single-post .entry-title{
  margin-top: 10px;
}





/* =================================================================
   9. CUSTOM STYLES FOR COMMENTS AREA (REFINED v2 - MINIMAL & USER-FRIENDLY)
   ================================================================= */

/* --- 9.1. Main Section Container --- */
/* این کد کل بخش نظرات را متمایز می‌کند */
#comments.comments-area {
    font-family: var(--font-main);
    max-width: var(--content-max-width);
    margin: 80px auto 40px; /* فاصله بیشتر از بالا */
    
    /* طراحی کادر و پس‌زمینه */
    background-color: var(--background-color, #f8f9fa); /* پس‌زمینه خاکستری روشن */
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 16px; /* گوشه‌های گردتر و مدرن‌تر */
    padding: 30px 25px; /* فاصله داخلی */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); /* سایه بسیار ملایم */
}

/* --- 9.2. Form Title --- */
#comments.comments-area #reply-title {
    display: block;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color, #dee2e6);
    text-align: center; /* عنوان در مرکز برای تاکید بیشتر */
}

/* --- 9.3. Form Container & Field Reordering --- */
/* اینجا جادوی تغییر ترتیب اتفاق می‌افتد */
#comments.comments-area .comment-form {
    display: flex;
    flex-direction: column; /* چیدمان ستونی به عنوان پایه */
}

/* اختصاص ترتیب جدید به فیلدها */
#comments.comments-area .comment-notes           { order: 1; }
#comments.comments-area .comment-form-author    { order: 2; }
#comments.comments-area .comment-form-email     { order: 3; }
#comments.comments-area .comment-form-url       { order: 4; }
#comments.comments-area .comment-form-comment   { order: 5; }
#comments.comments-area .form-submit            { order: 6; }

/* --- 9.4. Helper Text ("نشانی ایمیل...") --- */
#comments.comments-area .comment-notes {
    font-size: 0.85em;
    color: var(--light-text-color);
    background-color: #fff;
    border: 1px solid #e9ecef;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 25px;
    line-height: 1.7;
}

/* --- 9.5. Form Fields & Labels --- */
#comments.comments-area .comment-form p {
    margin: 0 0 20px 0; /* فقط مارجین پایین */
}

#comments.comments-area .comment-form label {
    display: block;
    font-weight: 500;
    font-size: 0.9em;
    color: #495057;
    margin-bottom: 8px;
}

#comments.comments-area .comment-form input[type="text"],
#comments.comments-area .comment-form input[type="email"],
#comments.comments-area .comment-form input[type="url"],
#comments.comments-area .comment-form textarea {
    width: 100%;
    padding: 12px 15px;
    font-family: var(--font-main);
    font-size: 1rem;
    color: var(--text-color);
    background-color: #ffffff; /* پس‌زمینه سفید برای تضاد با بک‌گراند سکشن */
    border: 1px solid #ced4da;
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

/* --- 9.6. Focus State --- */
#comments.comments-area .comment-form input:focus,
#comments.comments-area .comment-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 80, 255, 0.15);
}

/* --- 9.7. Submit Button --- */
#comments.comments-area .form-submit {
    margin-top: 10px;
}

#comments.comments-area .form-submit .submit {
    display: block; /* برای اعمال عرض کامل */
    width: 100%;
    background-color: var(--primary-color, #0050ff); /* رنگ اصلی سایت */
    color: #ffffff; /* رنگ متن سفید و خوانا */
    border: none;
    border-radius: 8px;
    padding: 14px 30px; /* دکمه بزرگتر برای کلیک راحت‌تر */
    font-family: var(--font-main);
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

#comments.comments-area .form-submit .submit:hover {
    background-color: #003cc5;
    transform: translateY(-2px);
}

/* --- 9.8. Responsive Grid for Desktop (Tablet and up) --- */
@media (min-width: 768px) {
    #comments.comments-area {
        padding: 40px; /* پدینگ بیشتر در دسکتاپ */
    }

    /* استفاده از گرید برای چیدمان زیبا در دسکتاپ */
    #comments.comments-area .comment-form {
        display: grid;
        grid-template-columns: 1fr 1fr; /* دو ستون مساوی */
        gap: 0 25px; /* فاصله 25 پیکسلی بین ستون‌ها */
        align-items: start;
    }
    
    /* این موارد تمام عرض گرید را اشغال می‌کنند */
    #comments.comments-area .comment-notes,
    #comments.comments-area .comment-form-url,
    #comments.comments-area .comment-form-comment,
    #comments.comments-area .form-submit {
        grid-column: 1 / -1;
    }

    /* فیلد نام در ستون اول */
    #comments.comments-area .comment-form-author {
        grid-column: 1 / 2;
    }
    /* فیلد ایمیل در ستون دوم */
    #comments.comments-area .comment-form-email {
        grid-column: 2 / 3;
    }
}