/* ===================================================================
   منوی دیجیتال کافه رستوران رومن
   فایل استایل اصلی  ▸  style.css
   تم: سیاه / عاج / طلایی  —  مینیمال و لوکس (الهام از کلاسیک رومی)
   طراحی موبایل‌فرست و کاملاً راست‌چین (RTL)

   ساختار این فایل:
     1) تعریف فونت
     2) متغیرهای رنگ و اندازه (در صورت نیاز فقط اینجا را تغییر دهید)
     3) ریست و پایه
     4) هدر صفحهٔ اصلی
     5) بنرهای صفحهٔ اصلی
     6) نوار بالا و تب‌ها (صفحات دسته‌بندی)
     7) تیتر دسته‌ها
     8) باکس آیتم‌های غذا
     9) فوتر
    10) واکنش‌گرایی (دسکتاپ) و انیمیشن
=================================================================== */


/* ============ 1) فونت فارسی «وزیرمتن» (داخل خود پروژه) ============ */
@font-face{
  font-family:'Vazirmatn';
  src:url('fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src:url('fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src:url('fonts/Vazirmatn-SemiBold.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src:url('fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src:url('fonts/Vazirmatn-ExtraBold.woff2') format('woff2');
  font-weight:800; font-style:normal; font-display:swap;
}


/* ===================================================================
   2) متغیرهای اصلی
   ▸ برای تغییر رنگ یا گردیِ گوشه‌ها فقط همین بخش را ویرایش کنید.
=================================================================== */
:root{
  /* رنگ‌ها */
  --noir:        #0b0b0c;   /* مشکیِ پایه (پس‌زمینه) */
  --noir-soft:   #141416;   /* پس‌زمینهٔ باکس‌ها */
  --noir-raise:  #1c1c20;   /* حالت هاور باکس‌ها */
  --ivory:       #f3efe6;   /* سفیدِ گرم (متن اصلی) */
  --ivory-dim:   #a8a293;   /* متن کم‌رنگ (توضیحات) */
  --gold:        #c9a24b;   /* طلاییِ اصلی */
  --gold-bright: #ecd292;   /* طلاییِ روشن (درخشش) */
  --gold-deep:   #8a6d2c;   /* طلاییِ تیره (سایهٔ گرادیان) */
  --line:        rgba(201,162,75,.22); /* خطوط نازک طلایی */
  --line-soft:   rgba(201,162,75,.12);

  /* گرادیان طلایی (افکت ورق‌طلا) */
  --gold-grad: linear-gradient(135deg,var(--gold-bright) 0%,var(--gold) 45%,var(--gold-deep) 100%);

  /* فاصله و اندازه */
  --max:    640px;   /* بیشینهٔ عرض محتوا */
  --pad:    18px;    /* پدینگ کناریِ صفحه */
  --radius: 16px;    /* گردیِ گوشهٔ باکس‌ها */
  --radius-sm: 12px;

  --shadow: 0 14px 34px rgba(0,0,0,.45);
}


/* ===================================================================
   3) ریست و پایه
=================================================================== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  font-family:'Vazirmatn',Tahoma,sans-serif;
  background:var(--noir);
  color:var(--ivory);
  line-height:1.7;
  direction:rtl;
  text-align:right;
  /* درخشش بسیار ملایم طلایی در بالای صفحه */
  background-image:radial-gradient(120% 60% at 50% -10%,rgba(201,162,75,.08),transparent 60%);
  background-repeat:no-repeat;
  min-height:100vh;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul{ list-style:none; }

/* قاب مرکزیِ محتوا */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }

/* متن با گرادیان طلایی (برای تیترها/قیمت) */
.gold-text{
  background:var(--gold-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* کلاس کمکی برای ارقام/لاتین (فاصلهٔ حروف بیشتر) */
.latin{ font-family:'Cinzel','Times New Roman',serif; letter-spacing:.22em; }

/* دسترس‌پذیری: نمایش واضح فوکوس با کیبورد */
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:6px; }


/* ===================================================================
   4) هدر صفحهٔ اصلی  (index.html)
=================================================================== */
.site-header{
  text-align:center;
  padding:34px var(--pad) 20px;
}
.brand{
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
/* لوگو — نسبت مربع. تصویر را در images/logo.png جایگزین کنید */
.brand__logo{
  width:104px; height:104px;           /* نسبت ۱:۱ */
  object-fit:cover;
  border-radius:50%;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.brand__eyebrow{
  display:block;
  font-size:11px; font-weight:600;
  color:var(--gold);
  margin-bottom:6px;
}
.brand__name{
  font-size:clamp(24px,7vw,32px);
  font-weight:800;
  letter-spacing:.01em;
  line-height:1.3;
}
.site-header__tagline{
  margin-top:14px;
  color:var(--ivory-dim);
  font-size:14px;
}
/* خط جداکنندهٔ ظریف زیر هدر */
.divider{
  display:flex; align-items:center; justify-content:center; gap:12px;
  max-width:var(--max); margin:8px auto 0; padding-inline:var(--pad);
}
.divider::before,.divider::after{
  content:''; height:1px; flex:1; max-width:120px;
}
.divider::before{ background:linear-gradient(to right,transparent,var(--line)); }
.divider::after{  background:linear-gradient(to left,transparent,var(--line)); }
.divider__mark{
  width:8px; height:8px; transform:rotate(45deg);
  background:var(--gold-grad);
}


/* ===================================================================
   5) بنرهای صفحهٔ اصلی (مربعی)
=================================================================== */
.banners{
  display:grid; gap:16px;
  padding:22px var(--pad) 8px;
  grid-template-columns:1fr;     /* موبایل: تک‌ستونه */
}
.banner{
  position:relative;
  aspect-ratio:1/1;              /* مربع */
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--noir-soft);
  box-shadow:var(--shadow);
  display:block;
}
/* تصویر پس‌زمینهٔ بنر — در images جایگزین کنید */
.banner__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.banner__shade{
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(8,8,9,.82),rgba(8,8,9,.18) 55%,rgba(8,8,9,.45));
}
/* قاب دوگانهٔ طلایی (افکت پلاک حکاکی) */
.banner__frame{ position:absolute; inset:12px; border:1px solid var(--line); border-radius:8px; pointer-events:none; }
.banner__frame::after{ content:''; position:absolute; inset:5px; border:1px solid var(--line-soft); border-radius:5px; }

.banner__content{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; text-align:center; padding:20px;
}
.banner__sub{ font-size:11px; font-weight:600; color:var(--gold); }
.banner__title{ font-size:clamp(22px,6vw,28px); font-weight:800; }
.banner__cta{
  margin-top:8px; font-size:12px; color:var(--ivory-dim);
  display:inline-flex; align-items:center; gap:6px;
}
.banner__cta::before{ content:'←'; color:var(--gold); }

/* تعامل هاور/فوکوس */
.banner:hover .banner__img,
.banner:focus-visible .banner__img{ transform:scale(1.06); }
.banner:hover .banner__frame,
.banner:focus-visible .banner__frame{ border-color:rgba(201,162,75,.55); }


/* ===================================================================
   6) نوار بالا و تب‌ها  (restaurant / fastfood / cafe)
=================================================================== */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(11,11,12,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar__head{
  max-width:var(--max); margin-inline:auto;
  padding:10px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.topbar__brand{ display:flex; align-items:center; gap:10px; min-width:0; }
/* لوگوی کوچک — نسبت مربع */
.topbar__logo{
  width:40px; height:40px; object-fit:cover;
  border-radius:50%; border:1px solid var(--line); flex:none;
}
.topbar__name{ font-size:15px; font-weight:700; white-space:nowrap; }
.topbar__page{ font-size:12px; color:var(--gold); font-weight:600; white-space:nowrap; }

/* دکمهٔ خانه */
.home-btn{
  width:40px; height:40px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--line); border-radius:12px;
  color:var(--gold); transition:background .25s,border-color .25s;
}
.home-btn:hover{ background:var(--noir-soft); border-color:rgba(201,162,75,.5); }
.home-btn svg{ width:20px; height:20px; }

/* نوار تب‌ها (اسکرول افقی) */
.tabs{
  display:flex; gap:6px;
  max-width:var(--max); margin-inline:auto;
  padding:4px var(--pad) 10px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  flex:none;
  padding:8px 16px;
  font-size:14px; font-weight:600;
  color:var(--ivory-dim);
  border:1px solid transparent;
  border-radius:999px;
  white-space:nowrap;
  transition:color .25s,border-color .25s,background .25s;
}
.tab:hover{ color:var(--ivory); }
.tab.is-active{
  color:var(--noir);
  background:var(--gold-grad);
  border-color:var(--gold);
  font-weight:700;
}


/* ===================================================================
   7) تیتر دسته‌ها (سبک حکاکی‌شده)
=================================================================== */
.menu-list{ padding:18px var(--pad) 10px; }

.cat-head{
  text-align:center;
  margin:30px 0 18px;
  /* فاصله از بالا هنگام اسکرول، تا زیرِ نوار تب‌ها پنهان نشود.
     مقدار را در صورت تغییر ارتفاع نوار، تنظیم کنید. */
  scroll-margin-top:120px;
}
.cat-head:first-child{ margin-top:10px; }
.cat-rule{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-bottom:6px;
}
.cat-rule::before,.cat-rule::after{
  content:''; height:1px; width:46px;
  background:linear-gradient(to left,transparent,var(--gold));
}
.cat-rule::after{ background:linear-gradient(to right,transparent,var(--gold)); }
.cat-eyebrow{ font-size:11px; font-weight:600; color:var(--gold); }
.cat-title{ font-size:21px; font-weight:800; }


/* ===================================================================
   8) باکس آیتم‌های غذا
   چیدمان (راست‌چین):  عکس (راست) | نام و توضیح (وسط) | قیمت (چپ)
=================================================================== */
.items{ display:flex; flex-direction:column; gap:12px; }

.item{
  display:flex; align-items:center; gap:14px;
  background:var(--noir-soft);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:12px;
  transition:border-color .25s,transform .25s,background .25s;
}
.item:hover{ border-color:var(--line); background:var(--noir-raise); transform:translateY(-2px); }

/* (راست) عکس غذا — مربع. فایل را در images جایگزین کنید */
.item-media{ flex:none; }
.item-media img{
  width:84px; height:84px;
  object-fit:cover;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
}

/* (وسط) نام و توضیح */
.item-body{ flex:1 1 auto; min-width:0; }
.item-name{ font-size:16px; font-weight:700; margin-bottom:3px; }
.item-desc{
  font-size:12.5px; color:var(--ivory-dim); line-height:1.6;
  /* محدودکردن توضیح به ۲ خط تا باکس‌ها مرتب بمانند */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* (چپ) قیمت */
.item-price{
  flex:none;
  display:flex; align-items:baseline; gap:4px;
  white-space:nowrap;
  padding-inline-start:2px;
}
.item-price .num{ font-size:17px; font-weight:800; }
.item-price .cur{ font-size:11px; color:var(--ivory-dim); font-weight:500; }


/* ===================================================================
   9) فوتر
=================================================================== */
.site-footer{
  margin-top:40px;
  padding:26px var(--pad) 36px;
  text-align:center;
  border-top:1px solid var(--line-soft);
  color:var(--ivory-dim);
  font-size:13px;
}
.site-footer .latin{ display:block; color:var(--gold); font-size:15px; margin-bottom:10px; }
.site-footer a{ color:var(--ivory); }
.footer-meta{ display:flex; flex-direction:column; gap:4px; align-items:center; }


/* ===================================================================
   10) واکنش‌گرایی (نمایش روی تبلت/دسکتاپ) و انیمیشن
=================================================================== */
/* در عرض‌های بزرگ‌تر: سه بنر کنار هم */
@media (min-width:600px){
  .banners{ grid-template-columns:repeat(3,1fr); }
  .brand__logo{ width:118px; height:118px; }
}

/* انیمیشن ظاهرشدن نرم هنگام اسکرول (با کلاس in از طریق JS) */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease,transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* احترام به تنظیم «کاهش حرکت» سیستم کاربر */
@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .banner__img{ transition:none; }
}