/* ============================================================
   Saraf — global stylesheet (Farsi/RTL)
   Ported from legacy Nuxt (LandingSSR@hamravesh)
   ============================================================ */

/* --- Font --- */
@font-face {
  font-family: "IRANYekanXVF";
  src:
    url("/fonts/IRANYekanXVFaNumVF.woff2") format("woff2-variations"),
    url("/fonts/IRANYekanXVFaNumVF.woff") format("woff-variations");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

/* Design tokens live in tokens.css — loaded before this file. */

/* --- Reset --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*, *::before, *::after {
  font-family: "IRANYekanXVF", "Tahoma", sans-serif;
  text-decoration: none;
  list-style: none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html {
  scroll-behavior: smooth;
  scroll-padding: 90px;
  line-height: 1.6;
}

/* `min-height` only, deliberately.

   `height: 100%` here caps the body box at the viewport, however long the page
   is. The sticky header is a child of body, so that cap is also its containing
   block: it pins correctly at first and then, once the scroll passes the
   viewport height, slides away with the bottom of a body box that ended long
   before the content did. `min-height` keeps the short-page case — a footer
   that does not float up — without clamping the tall-page one. */
html {
  height: 100%;
}

body {
  min-height: 100%;
}

body {
  background-color: var(--gray-100);
  color: var(--on-background-neutral-default);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}

/* --- Layout primitives --- */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Breakpoint ladder ported verbatim from the legacy `assets/scss/main.scss`.
   The 1400/1600 steps matter: without them wide screens keep the 1000px cap and
   every section reads narrower than on the current site. */
@media (min-width: 600px) {
  .container { max-width: 900px; }
}

@media (min-width: 1000px) {
  .container { max-width: 1000px; }
}

@media (min-width: 1400px) {
  .container { max-width: 1200px; }
}

@media (min-width: 1600px) {
  .container { max-width: 1400px; }
}

/* Content for assistive technology only — a label a sighted reader gets from
   the layout, and a screen-reader user would otherwise never hear. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Shared button primitive --- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 8px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  white-space: nowrap;
  text-align: center;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.btn--primary {
  background-color: var(--on-background-neutral-cta);
  color: var(--on-background-neutral-default);
}

.btn--outline {
  background-color: var(--background-neutral-1);
  color: var(--on-background-neutral-subdued);
  border: 1px solid var(--stroke-neutral-1-default);
}

/* --- Shared loading affordance --- */
/* Gradient and timing are the legacy values (MegaMenuCryptoBuy/MegaMenuBlog).
   Lives here rather than in one component because it is a primitive like `.btn`,
   meant for any region that is genuinely waiting on data — size it at the call
   site. Only ever put it on something that will actually resolve: server-rendered
   regions have no pending state and must not shimmer. */
.skeleton {
  border-radius: 12px;
  background: linear-gradient(
    90deg,
    var(--background-neutral-1),
    var(--background-neutral-3),
    var(--background-neutral-1)
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* An indefinite animation is exactly what this media query exists for. */
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
  }
}