/* پایه: متغیرها، تایپوگرافی، هدر، فوتر */
/* Yekan Bakh Font Family */

@font-face {
    font-family: "Yekan Bakh";
    src: url("../fonts/YekanBakh-Thin.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Yekan Bakh";
    src: url("../fonts/YekanBakh-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Yekan Bakh";
    src: url("../fonts/YekanBakh-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Yekan Bakh";
    src: url("../fonts/YekanBakh-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Yekan Bakh";
    src: url("../fonts/YekanBakh-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Yekan Bakh";
    src: url("../fonts/YekanBakh-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Yekan Bakh";
    src: url("../fonts/YekanBakh-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Yekan Bakh";
    src: url("../fonts/YekanBakh-ExtraBlack.woff2") format("woff2");
    font-weight: 950;
    font-style: normal;
    font-display: swap;
}

:root {
  --navy: #082B59;
  --navy-hover: #0d3b78;
  --bg: #F8FAFC;
  --text: #172033;
  --muted: #64748B;
  --surface: #FFFFFF;
  --border: #E2E8F0;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(8, 43, 89, .05), 0 6px 18px rgba(8, 43, 89, .06);
  --shadow-hover: 0 2px 4px rgba(8, 43, 89, .08), 0 12px 28px rgba(8, 43, 89, .12);
  --header-h: 128px;
  --logo-h: 86px;
  --container: 1160px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}
@media (max-width: 700px) {
  :root { --header-h: 88px; --logo-h: 58px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Yekan Bakh", sans-serif;
  line-height: 1.85;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.5; margin: 0 0 .5em; color: var(--navy); }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid #5b8bd0; outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
.muted { color: var(--muted); }
.skip-link {
  position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100;
  background: var(--surface); color: var(--navy); padding: 8px 14px; border-radius: 8px; box-shadow: var(--shadow);
}
.skip-link:focus { top: 8px; }

.page { padding-block: 32px 64px; min-height: 50vh; }
.page--center { text-align: center; padding-block: 80px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 22px;
  background: var(--navy); color: #fff; border: 1px solid var(--navy); border-radius: 10px;
  font: inherit; font-weight: 600; cursor: pointer; transition: background .2s var(--ease), transform .12s var(--ease);
}
.btn:hover { background: var(--navy-hover); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn--outline { background: transparent; color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; }





/* ---------- هدر ثابت و اصلاح‌شده ---------- */

.site-header__inner {
    position: relative;
    width: 100%;
    max-width: var(--container);
    height: 100%;
    margin-inline: auto;
    padding-inline: 20px;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
}

/* محتوای داخلی هدر */
.site-header__inner {
    position: relative;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 0 40px;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
}

/* منو در سمت راست */
.header-nav {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 28px;

    direction: rtl;
}

.header-nav a {
    color: var(--navy);
    font-weight: 600;
    padding: 8px 2px;
    border-bottom: 2px solid transparent;
   transform: translateY(29px);
}

.header-nav a:hover {
    text-decoration: none;
    border-color: var(--navy);
}

/* لوگو در سمت چپ هدر */
.brand {
    position: static;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;
    width: calc(var(--logo-h) * 2.2);
    flex-shrink: 0;
    margin: 0;
    transform: translateY(30px);
}


.brand:hover {
    text-decoration: none;
}

.brand__logo {
    display: block;
    width: auto;
    height: var(--logo-h);
    max-width: 100%;
    object-fit: contain;
}

/* نمایشگرهای کوچک */
@media (max-width: 700px) {
    .site-header__inner {
        padding-inline: 12px;
    }

    .brand {
  
        width: calc(var(--logo-h) * 2.2);
    }

    .header-nav {
        gap: 12px;
    }

    .header-nav a {
        font-size: 0.8rem;
    }
}

/* موبایل‌های کوچک */
@media (max-width: 380px) {
    .brand {
        width: calc(var(--logo-h) * 1.8);
    }
}




/* ---------- فوتر موج‌دار ---------- */
.site-footer {
    --footer-wave-height: clamp(64px, 8vw, 112px);
    --footer-main: var(--navy);
    position: relative;
    isolation: isolate;
    width: 100%;
    margin-top: auto;
    flex-shrink: 0;
    color: #fff;
    background: transparent;
    overflow: hidden;
}

/* لایه‌ی سرمه‌ای از انتهای موج تا پایین فوتر */
.site-footer::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: calc(var(--footer-wave-height) - 1px);
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--footer-main, var(--navy));
}

/* زمین توپوگرافی: از انتهای موج تا پایین فوتر، زیر محتوا؛ لبهٔ بالایی در رنگ سرمه‌ای محو می‌شود */
.site-footer__terrain {
    position: absolute;
    z-index: 0;
    top: calc(var(--footer-wave-height) - 1px);
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 64px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 64px);
}

/* پس‌زمینهٔ سفید میزبان کامپوننت نباید پیش از آماده شدن بوم دیده شود */
.site-footer__terrain .topographic-terrain { background: transparent !important; }

/* رنگ اصلی فوتر؛ footer-waves.js آن را بین رنگ‌های data-wave-colors با گرادینت عوض می‌کند */
@property --footer-main {
    syntax: "<color>";
    inherits: true;
    initial-value: #082B59;
}

/* قاب موج‌ها: سه لایه (پشتی، میانی، اصلی) با حرکت افقی + نوسان عمودی مستقل */
.site-footer__waves {
    position: relative;
    z-index: 1;
    width: 100%;
    height: var(--footer-wave-height);
    overflow: hidden;
}

/* هر لایه ۲۰۰٪ عرض دارد (دو پریود کامل)؛ جابه‌جایی نیم‌عرض = یک پریود → حلقهٔ بی‌درز.
   ارتفاع ۸px بیشتر است تا هنگام نوسان عمودی لبهٔ پایینی دیده نشود. */
.footer-wave {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 200%;
    height: calc(100% + 8px);
    overflow: hidden;
    will-change: transform, translate;
    animation: footer-wave-right linear infinite, footer-wave-bob ease-in-out infinite;
}

.footer-wave--back  { z-index: 0; fill: #072844; animation-duration: 60s, 11s; animation-delay: 0s, -4s; --bob: 3px; }
.footer-wave--mid   { z-index: 1; fill: #0d3b78; animation-duration: 42s, 9s;  animation-delay: 0s, -2s; --bob: 4px; }
.footer-wave--front { z-index: 2; animation-duration: var(--footer-cycle, 28s), 7s; animation-delay: 0s, 0s; --bob: 5px; }

.footer-wave__fill { fill: var(--footer-main, var(--navy)); }

/* خط روشن و کم‌رنگ روی تیغهٔ موج برای حس عمق و براقی آب */
.footer-wave__crest { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 1.5; }
.footer-wave__crest--front { stroke: rgba(255, 255, 255, .22); }
/* درخشش نرم دنبال تیغهٔ موج اصلی */
.footer-wave__glow { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 7; stroke-linecap: round; }

@keyframes footer-wave-right {
    from { transform: translate3d(-50%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

@keyframes footer-wave-bob {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 calc(var(--bob, 4px) * -1); }
}

@media (prefers-reduced-motion: reduce) {
    .footer-wave { animation: none; transform: none; translate: none; }
}

/* سه ستون هم‌اندازه با متن وسط‌چین */
.site-footer__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    justify-items: center;
    gap: clamp(24px, 4vw, 56px);
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding: 28px 20px 42px;
    text-align: center;
    background: transparent;
}

.site-footer__grid > section,
.site-footer__grid > nav {
    width: 100%;
    text-align: center;
}

.site-footer h2 {
    color: #fff;
    font-size: 1.12rem;
    font-weight: 700;
    margin: 0 0 18px;
    text-align: center;
}

.site-footer a {
    color: rgba(255, 255, 255, .9);
    text-decoration: none;
    text-underline-offset: 4px;
    transition: color .2s ease, opacity .2s ease;
}

.site-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.site-footer__about p,
.site-footer__muted {
    color: rgba(255, 255, 255, .78);
    margin: 0;
    line-height: 2;
    text-align: center;
}

.site-footer__links ul {
    list-style: none;
    display: grid;
    justify-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    text-align: center;
}

.site-footer__links li {
    margin: 0;
    text-align: center;
}

.contact-list {
    margin: 0;
    display: grid;
    justify-items: center;
    gap: 12px;
    text-align: center;
}

.contact-list > div {
    text-align: center;
}

.contact-list dt {
    font-size: .82rem;
    color: rgba(255, 255, 255, .64);
    text-align: center;
}

.contact-list dd {
    margin: 0;
    overflow-wrap: anywhere;
    text-align: center;
}

.site-footer__bottom {
    position: relative;
    z-index: 1;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, .16);
    padding-block: 15px;
    font-size: .88rem;
    color: rgba(255, 255, 255, .72);
    text-align: center;
    background: var(--footer-main, var(--navy));
}

@media (max-width: 700px) {
    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 22px;
        padding-block: 18px 30px;
    }

    .site-footer__about {
        grid-column: 1 / -1;
    }
}

@media (max-width: 420px) {
    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .site-footer__about {
        grid-column: auto;
    }
}

/* ورود تدریجی عناصر */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.reveal { animation: rise .45s var(--ease) both; animation-delay: calc(min(var(--i, 0), 8) * 45ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; }
  .js .header-nav { opacity: 1; visibility: visible; }
}
html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
}

main {
   padding-top: var(--header-h);
    flex: 1 0 auto;
}

.site-footer {
    margin-top: auto;
    flex-shrink: 0;
}