/* Homepage new design — Footer */
#hnd-footer { position: relative; background: var(--c-ink); color: var(--c-surface); font-family: var(--font-body); direction: rtl; overflow: hidden; }
#hnd-footer a { color: var(--c-surface); }
#hnd-footer a:hover { color: var(--c-gold); }

.hnd-f-ticker-wrap { overflow: hidden; direction: ltr; border-bottom: 1px solid rgba(255,255,255,0.12); }
.hnd-f-ticker-track { display: flex; width: max-content; direction: ltr; animation: hndFTicker 45s linear infinite; animation-direction: reverse; }
@media (max-width: 900px) {
  .hnd-f-ticker-track { animation-duration: 75s; }
}
.hnd-f-ticker-item { display: flex; align-items: center; gap: 8px; padding: 16px 16px; font-size: 14px; font-weight: 700; letter-spacing: 0.4px; white-space: nowrap; color: rgba(255,255,255,0.7); }
.hnd-f-ticker-item svg { width: 16px; height: 16px; stroke: var(--c-gold); fill: none; stroke-width: 1.6; }
@keyframes hndFTicker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.hnd-f-main { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 60px 32px 40px; max-width: 1440px; margin: 0 auto; min-height: 260px; }
.hnd-f-links { display: flex; flex-direction: column; gap: 18px; z-index: 2; }
.hnd-f-links a { font-size: 15px; color: rgba(255,255,255,0.82); }
/* اندازهٔ ظرف کوچک‌تر شد: قبلاً اندازهٔ همان قابِ عکسِ ۲۲۰×۲۶۰ بود که برای یک لوگوی
   PNG شفاف («فقط نیاز به کوچیک‌تر بودن») بیش‌ازحد بزرگ می‌نمود. */
.hnd-f-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 140px; height: 140px; z-index: 1; pointer-events: none; }
.hnd-f-center-img { width: 100%; height: 100%; transition: transform .12s ease-out; will-change: transform; }
/* پس‌زمینه/بوردر/سایه‌ای که برای عکسِ اصلیِ hnd-f-center-img طراحی شده بود، عمداً
   اینجا خنثی می‌شود: لوگو یک PNGِ شفاف است، نه یک عکس، و آن پس‌زمینه/قابِ روشن
   دقیقاً همان چیزی بود که رویِ زمینهٔ تیرهٔ فوتر بد به‌نظر می‌رسید. */
.hnd-f-center-logo {
  object-fit: contain;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  box-sizing: border-box;
}

/* Social / contact / certificates row — same real data footer.php (the theme's normal
   footer) already uses, reused here rather than inventing separate accounts/links. */
/* ⚠ سه‌ستونیِ ثابت نه: ستونِ گواهی‌نامه‌ها از این گرید بیرون رفت (نوارِ تمام‌عرضِ پایین‌تر) و
   ستونِ «تماس با ما» هم شرطی است — با عددِ ثابتِ ۳، بسته به داده، یک یا دو ستونِ خالی می‌ماند. */
.hnd-f-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; padding: 0 32px 32px; max-width: 1440px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 36px; }
.hnd-f-info-title { margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; color: rgba(255,255,255,0.55); }
.hnd-f-social { display: flex; gap: 10px; }
.hnd-f-social-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); color: var(--c-surface); }
.hnd-f-social-btn svg { display: block; width: 19px; height: 19px; fill: currentColor; }
/* اینستاگرام/واتساپ: خطی (fill:none + stroke) نه توپُر — فقط نقطهٔ کوچکِ دوربینِ اینستاگرام
   خودش inline با fill="currentColor" پابرجا می‌ماند (باید توپُر بماند، نه یک حلقهٔ توخالی). */
/* .hnd-f-social-btn svg (کلاس+المان) از .hnd-f-social-outline (فقط کلاس) اختصاصی‌تر است و
   قاعدهٔ fill:currentColor بالا را می‌بَرد — این سلکتور را هم با همان المان تکرار کرده‌ایم تا
   دقیقاً به همان اختصاصیت برسد و واقعاً غالب شود. */
.hnd-f-social-btn svg.hnd-f-social-outline { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hnd-f-social-btn:hover { border-color: var(--c-gold); background: rgba(255,255,255,0.06); color: var(--c-gold); }
/* ستونِ تماس هم مثلِ نوارِ گواهی‌ها چپ‌چین شد (خواستهٔ صریح) — متن فارسی می‌ماند ولی
   لبهٔ چینشش سمتِ چپ است تا با نوارِ زیرش هم‌راستا باشد. */
.hnd-f-contact-col { text-align: left; }
.hnd-f-contact-text { font-size: 14px; line-height: 2; color: rgba(255,255,255,0.75); text-align: left; }
.hnd-f-contact-text a { color: rgba(255,255,255,0.75); }
/* ---- نوارِ نشان‌ها و گواهی‌نامه‌ها ----
   لوگوها نسبت‌ابعادِ کاملاً متفاوتی دارند (کشیده، مربع، متنی). کلیدِ چیدمانِ تمیز این است که
   همه با یک «ارتفاعِ یکسان» نرمال شوند و عرض آزاد بماند — آن‌وقت ردیف خودبه‌خود مثل یک نوارِ
   مرتب درمی‌آید، بدون اینکه لوگوی کشیده له شود یا مربعی غول‌پیکر. */
/* چیدمانِ کاشی‌ای: گریدِ ۱۲ستونی با درزِ ۱px و پس‌زمینهٔ روشنِ ظرف — همان درزها خودشان
   خط‌های عمودی/افقیِ کم‌رنگِ بینِ خانه‌ها می‌شوند (مثلِ نوارِ گواهیِ نمونه)، بدونِ کشیدنِ
   border دورِ تک‌تکِ قلم‌ها. عرضِ هر خانه بر اساسِ شکلش تعیین شده و مجموعِ هر ردیف دقیقاً
   ۱۲ می‌شود، پس هیچ فضای خالی نمی‌ماند.
   direction:ltr چون کلِ محتوا لاتین است؛ همین باعثِ چپ‌چین شدنِ طبیعیِ کلِ نوار هم می‌شود. */
.hnd-f-certs-strip { max-width: 1440px; margin: 0 auto 36px; padding: 0 32px; direction: ltr; }
/* عرضِ نوار = یک ستونِ ۵۰٪ از همین ظرف، نه تمامِ عرضِ فوتر: در حالتِ تمام‌عرض، لوگوها روی
   خانه‌های پهن کشیده و پرت به نظر می‌رسیدند. چپ‌چین می‌ماند چون بلوک است و ظرف ltr است. */
.hnd-f-certs-strip-inner { width: 55%; }
.hnd-f-certs-strip-title { text-align: left; margin-bottom: 14px; }
/* ⚠ گرید نه، فلکسِ محتوا-اندازه: در گرید، خانه همیشه تمامِ ستونِ خودش را می‌گیرد، پس پشتِ
   یک لوگوی کوچک یک مستطیلِ سفیدِ بزرگ می‌افتاد (به‌خصوص در گوشی). اینجا عرضِ هر کاشی دقیقاً
   عرضِ خودِ عکس + پدینگ است؛ فقط ارتفاع نرمال می‌شود تا ردیف مرتب بماند. */
.hnd-f-certs { display: flex; flex-wrap: wrap; gap: 0; }

.hnd-f-cert {
  --hnd-cert-h: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--hnd-cert-h);
  width: auto;
  flex: 0 0 auto;
  padding: 7px 11px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 0;
  /* سیاه‌وسفید در حالت عادی، رنگی با هاور/فوکوس — روی خودِ کاشی است تا هم عکس‌ها و هم
     پلاک‌های متنی یک‌جور رفتار کنند. */
  filter: grayscale(1);
  transition: filter .25s ease, border-color .2s ease;
}
.hnd-f-cert:hover,
.hnd-f-cert:focus-visible { filter: none; border-color: rgba(0,0,0,0.28); }
.hnd-f-certs-iso .hnd-f-cert { --hnd-cert-h: 70px; }
/* ⚠ سقفِ ارتفاعِ صریح، نه max-height:100%: بدونِ آن، لوگوی بزرگ تا عرضِ خانه بزرگ می‌شد و
   خودش ارتفاعِ ردیف را بالا می‌برد (ردیف‌های غول‌پیکرِ اسکرین‌شات). نسبتِ ابعاد دست‌نخورده
   می‌ماند چون فقط یک بُعد قفل شده و بُعدِ دیگر auto است. */
/* ⚠ هر دو بُعد فقط «سقف»اند و هیچ‌کدام تحمیل نمی‌شوند (height:100% نه، max-height:100%):
   با تحمیلِ ارتفاع، لوگویی که به سقفِ عرض می‌خورد کشیده/له می‌شد. این شکل همیشه نسبتِ
   ابعادِ اصلی را نگه می‌دارد و فقط بزرگ‌ترین بُعد را محدود می‌کند. ارتفاعِ خودِ کاشی هم ثابت
   است، پس عکس هرگز ردیف را بلند نمی‌کند. */
.hnd-f-cert img { display: block; max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.hnd-f-cert-wide { max-width: 240px; }
.hnd-f-cert-btn { cursor: zoom-in; font: inherit; }

/* جایزه‌هایی که اصلاً لوگو ندارند: پلاکِ متنیِ ساخته‌شده، با همان ارتفاع و قابِ بقیه.
   انگلیسی و چپ‌به‌راست (داخلِ فوترِ راست‌به‌چپ نشسته)، و غیرقابلِ انتخاب — همان‌طور که
   خواسته شد؛ خودِ متن یک تصویرِ جایگزین است، نه محتوایی برای کپی‌کردن. */
.hnd-f-cert-text {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  direction: ltr;
  text-align: left;
  /* ارتفاعِ ثابتِ کاشی برای این پلاک فقط یک «کف» است: پنج سطرِ متن هرگز نباید بریده شود. */
  height: auto;
  min-height: var(--hnd-cert-h);
  max-width: 250px;
  padding: 8px 12px;
  color: #1c1c1c;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.18;
  user-select: none;
  -webkit-user-select: none;
}
/* هیچ سقفِ عرض/ارتفاعی روی این متن‌ها نیست: خانه در صورت نیاز بلندتر می‌شود (grid-auto-rows
   با minmax باز است) تا هیچ سطری بریده یا سه‌نقطه نشود. */
.hnd-f-cert-rank { font-size: 9.5px; font-weight: 700; letter-spacing: .2px; }
.hnd-f-cert-country { font-size: 12px; font-weight: 400; letter-spacing: .4px; }
.hnd-f-cert-name { font-size: 11.5px; font-weight: 800; letter-spacing: .1px; }
.hnd-f-cert-award { font-size: 10.5px; font-weight: 400; letter-spacing: .3px; }
.hnd-f-cert-caption { margin-top: 2px; font-size: 7.5px; letter-spacing: .1px; color: #4a4a4a; }

/* ---- مدالِ تصویرِ گواهی ---- */
/* ⚠ ویژگیِ hidden امتیازِ ۰-۱-۰ دارد و از هر کلاسی که display بدهد می‌بازد؛ این قاعده تضمین
   می‌کند مدالِ بسته واقعاً بسته بماند (همان تلهٔ شناخته‌شدهٔ hidden). */
[hidden] { display: none !important; }
.hnd-cert-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; }
.hnd-cert-modal-backdrop { position: absolute; inset: 0; background: rgba(10,6,4,0.82); backdrop-filter: blur(2px); }
.hnd-cert-modal-box { position: relative; max-width: min(920px, 100%); max-height: 100%; display: flex; }
.hnd-cert-modal-img { display: block; max-width: 100%; max-height: 88vh; width: auto; height: auto; border-radius: 4px; background: #fff; }
.hnd-cert-modal-close {
  position: absolute;
  top: -14px;
  inset-inline-end: -14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: var(--c-ink);
  color: var(--c-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hnd-cert-modal-close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.hnd-cert-modal-close:hover { border-color: var(--c-gold); color: var(--c-gold); }

.hnd-f-brand-row { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 10px 32px 50px; }
.hnd-f-brand-star { width: 30px; height: 30px; animation: hndFSpin 6s linear infinite; }
.hnd-f-brand-row h2 { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: clamp(48px,9vw,110px); color: var(--c-surface); }
@keyframes hndFSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.hnd-f-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding: 20px 32px; display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 1440px; margin: 0 auto; font-size: 13px; color: rgba(255,255,255,0.6); flex-wrap: wrap; }

@media (max-width: 760px) {
  .hnd-f-main { flex-direction: column; padding: 40px 24px 20px; min-height: 0; gap: 26px; }
  .hnd-f-center { display: none; }
  .hnd-f-links { flex-direction: column; align-items: center; text-align: center; }
  .hnd-f-brand-row h2 { font-size: 44px; }
  .hnd-f-bottom { flex-direction: column; text-align: center; }
  .hnd-f-info { grid-template-columns: 1fr; padding: 32px 24px; gap: 28px; text-align: center; }
  .hnd-f-social { justify-content: center; }
  /* گوشی: نوار تمام‌عرضِ همان ستون می‌شود (نصفِ عرض اینجا بی‌معنی است) و کاشی‌ها کمی
     کوتاه‌تر — چون عرضِ کاشی از خودِ عکس می‌آید، ردیف‌ها خودشان تمیز می‌شکنند. */
  .hnd-f-certs-strip { padding: 0 16px; margin-bottom: 28px; }
  .hnd-f-certs-strip-inner { width: 100%; }
  .hnd-f-certs-strip-title { text-align: left; }
  .hnd-f-certs { gap: 5px; }
  .hnd-f-cert { --hnd-cert-h: 48px; padding: 6px 8px; }
  .hnd-f-certs-iso .hnd-f-cert { --hnd-cert-h: 56px; }
  .hnd-f-cert-wide { max-width: min(210px, calc(100vw - 70px)); }
  .hnd-f-cert-text { max-width: 210px; padding: 7px 10px; }
  .hnd-cert-modal { padding: 16px; }
  .hnd-cert-modal-close { top: -12px; inset-inline-end: -6px; width: 34px; height: 34px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  /* حدِ وسط: نوار پهن‌تر از نصف می‌شود وگرنه کاشی‌ها بیش از حد می‌شکنند. */
  .hnd-f-certs-strip-inner { width: 75%; }
  .hnd-f-cert { --hnd-cert-h: 56px; }
  .hnd-f-certs-iso .hnd-f-cert { --hnd-cert-h: 64px; }
  .hnd-f-cert-wide { max-width: 220px; }
}