/**
 * Nick Kids — Base Layer
 * ======================
 * Fonts, reset, element defaults, typography, focus, RTL foundations.
 * Depends on tokens.css. Never put component styles here.
 */

/* =======================================================================
 * 1. FONT FACES
 * Self-hosted. No external font CDN — the store must render fully offline
 * of third parties and Google Fonts is unreliable from Iran.
 * ===================================================================== */

/* Vazirmatn — variable, covers 400–700 in one file. */
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/Vazirmatn-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  /* Persian + Arabic + Latin + Persian/Arabic digits */
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB8A,
                 U+FBFC-FBFD, U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
                 U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212;
}

/* Static fallbacks for browsers without variable-font support. */
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/Vazirmatn-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/Vazirmatn-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/**
 * IRANSans — NOT SHIPPED. It is a commercially licensed font and cannot be
 * redistributed with this repo. Drop licensed .woff2 files into
 * assets/fonts/iransans/ and uncomment. The stacks in tokens.css already
 * prefer IRANSansX, so the UI switches over automatically. See
 * DESIGN_SYSTEM.md §5 and assets/fonts/iransans/README.md.
 *
 * @font-face {
 *   font-family: "IRANSansX";
 *   src: url("../fonts/iransans/IRANSansX-Regular.woff2") format("woff2");
 *   font-weight: 400; font-style: normal; font-display: swap;
 * }
 * … repeat for 500 / 600 / 700 …
 */

/* =======================================================================
 * 2. RESET
 * ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Offset in-page anchors so the sticky header never covers the target. */
  scroll-padding-top: calc(var(--nk-header-height) + var(--nk-space-4));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background-color: var(--nk-surface-page);
  color: var(--nk-text-default);
  font-family: var(--nk-font-ui);
  font-size: var(--nk-text-md);
  font-weight: var(--nk-weight-regular);
  line-height: var(--nk-leading-normal);
  /* Persian renders better with default kerning/ligatures left on. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Guard rail: nothing in this project may scroll the page sideways. */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

/* Long Persian words and URLs must never force a horizontal scrollbar. */
p, li, h1, h2, h3, h4, h5, h6, td, th, dd, dt, figcaption {
  overflow-wrap: break-word;
}

/* =======================================================================
 * 3. TYPOGRAPHY DEFAULTS
 * ===================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--nk-font-display);
  color: var(--nk-text-strong);
  font-weight: var(--nk-weight-bold);
  line-height: var(--nk-leading-tight);
  letter-spacing: var(--nk-tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--nk-text-5xl); }
h2 { font-size: var(--nk-text-4xl); }
h3 { font-size: var(--nk-text-3xl); }
h4 { font-size: var(--nk-text-2xl); font-weight: var(--nk-weight-semibold); }
h5 { font-size: var(--nk-text-xl);  font-weight: var(--nk-weight-semibold); line-height: var(--nk-leading-snug); }
h6 { font-size: var(--nk-text-lg);  font-weight: var(--nk-weight-semibold); line-height: var(--nk-leading-snug); }

p { text-wrap: pretty; }
p + p { margin-block-start: var(--nk-space-4); }

strong, b { font-weight: var(--nk-weight-semibold); }
small { font-size: var(--nk-text-sm); }

a {
  color: var(--nk-text-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color var(--nk-transition-base);
}
a:hover { color: var(--nk-action-primary-active); }

/**
 * Numerals.
 * Prices, counts, phone numbers and dates use Persian digits via the
 * font-feature setting. Apply .nk-num to any numeric run so the treatment
 * is consistent and switchable in one place.
 */
.nk-num {
  font-family: var(--nk-font-numeric);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "ss01";
  /* Numbers are LTR runs even inside RTL text. */
  direction: ltr;
  unicode-bidi: isolate;
}

/* Latin text embedded in Persian copy (brand names, sizes like XL). */
.nk-latin {
  direction: ltr;
  unicode-bidi: isolate;
  letter-spacing: var(--nk-tracking-latin-wide);
}

/* =======================================================================
 * 4. FOCUS
 * One visible focus treatment for the entire project.
 * ===================================================================== */

:focus { outline: none; }

:focus-visible {
  outline: var(--nk-focus-ring-width) solid var(--nk-focus-ring-color);
  outline-offset: var(--nk-focus-ring-offset);
  border-radius: var(--nk-radius-xs);
}

/* Windows High Contrast / forced-colors: keep a real outline. */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid CanvasText; }
}

.nk-skip-link {
  position: absolute;
  inset-inline-start: var(--nk-space-4);
  inset-block-start: -100px;
  z-index: var(--nk-z-tooltip);
  padding: var(--nk-space-3) var(--nk-space-5);
  background: var(--nk-action-secondary);
  color: var(--nk-text-inverse);
  border-radius: var(--nk-radius-md);
  font-weight: var(--nk-weight-semibold);
  transition: inset-block-start var(--nk-transition-base);
}
.nk-skip-link:focus-visible { inset-block-start: var(--nk-space-4); }

/* =======================================================================
 * 5. RTL FOUNDATIONS
 * Components use logical properties, so almost nothing needs a [dir]
 * override. The exceptions live here and are deliberately short.
 * ===================================================================== */

[dir="rtl"] body { text-align: start; }

/**
 * Directional icons must mirror in RTL — an arrow pointing "next" points
 * left in Persian. Only icons listed in assets/icons/icons.json#directional
 * carry this class. Non-directional icons (heart, star, bag) must NOT.
 */
[dir="rtl"] .nk-icon--directional { transform: scaleX(-1); }

/* Latin/numeric isolation is direction-independent — no override needed. */

/* =======================================================================
 * 6. ACCESSIBILITY HELPERS
 * ===================================================================== */

.nk-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Visible on focus — for skip links and "jump to" affordances. */
.nk-visually-hidden--focusable:focus-visible {
  position: static;
  width: auto; height: auto;
  clip-path: none;
  margin: 0;
  white-space: normal;
}

[hidden] { display: none !important; }

/* =======================================================================
 * 7. LAYOUT PRIMITIVES
 * ===================================================================== */

.nk-container {
  width: 100%;
  max-width: var(--nk-container-max);
  margin-inline: auto;
  padding-inline: max(var(--nk-gutter), var(--nk-safe-inline-start));
}
.nk-container--narrow { max-width: var(--nk-container-narrow); }
.nk-container--wide { max-width: var(--nk-container-wide); }

.nk-section { padding-block: var(--nk-section-gap); }
.nk-stack > * + * { margin-block-start: var(--nk-space-4); }

/* Full-bleed row that still respects the container on the inside. */
.nk-bleed {
  width: 100vw;
  margin-inline-start: 50%;
  transform: translateX(50%);
}
[dir="ltr"] .nk-bleed { transform: translateX(-50%); }