/**
 * jensik — 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;
}

/**
 * IRANSansX — commercially licensed (Fontiran). Licensed files supplied by the
 * owner and installed in assets/fonts/iransans/. Only the four weights the
 * design system actually uses are shipped; the vendor set also contains
 * 100/200/300/800/900, deliberately left out to keep the payload small.
 * Weight 600 is the vendor's "DemiBold" file, renamed to SemiBold so the
 * naming matches the Vazirmatn set. Never load these from a third-party CDN.
 * See jensik-ui skill: typography 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;
}
@font-face {
  font-family: "IRANSansX";
  src: url("../fonts/iransans/IRANSansX-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IRANSansX";
  src: url("../fonts/iransans/IRANSansX-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IRANSansX";
  src: url("../fonts/iransans/IRANSansX-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* =======================================================================
 * 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));
}

/*
 * …except while a field inside the sticky header or the drawer has focus.
 * The browser re-runs "scroll the caret into view" on every keystroke; that
 * field sits inside scroll-padding-top's band, and because its layer is
 * sticky/fixed it can never leave the band — so each key scrolled the page
 * up by another notch, without end. Dropping the padding for the duration of
 * the focus costs nothing: an in-page anchor cannot fire while typing.
 */
html:has(:is(.nk-header, .nk-drawer) :is(input, textarea):focus) {
  scroll-padding-top: 0;
}

@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);
}
@media (hover: hover) {
  a:hover { color: var(--nk-action-primary-active); }
}
/* A bare link's press state. It exists because section 4b takes the browser's
   own tap highlight away, and on touch `:hover` is guarded off — without this
   a link in body copy or the footer would answer a finger with nothing. */
a:active { color: var(--nk-action-primary-active); }

/**
 * Numerals.
 * Prices, counts, phone numbers and dates are converted to Persian digits in
 * PHP by nk_number() — the `ss01` below only maps a stray *Latin* digit onto a
 * Persian one, and it does that in Vazirmatn but not in IRANSansX, which now
 * leads --nk-font-numeric. Keep every number going through nk_number(); do not
 * rely on the feature. 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);
}

/* =======================================================================
 * 4b. TOUCH
 *
 * The browser paints its own highlight over anything it considers tappable —
 * in Chrome a translucent blue rectangle, rgba(51, 181, 229, 0.4), measured on
 * the live product page. It is the single most link-like thing about our
 * buttons: it ignores border-radius, so a pill button answers a finger with a
 * blue *box*, and it is the same box a paragraph link gets. Reported by the
 * shop owner as "the buttons don't behave like buttons in the phone".
 *
 * Taking it away is only safe because every interactive surface here defines
 * its own `:active` — see the design system's fifth state rule — and because
 * the hover states that used to stand in for a press are now guarded behind
 * `@media (hover: hover)`, so they no longer stick to the last thing tapped.
 * If you add a control, give it a real `:active` before you rely on this.
 *
 * Set on the elements rather than on `html`: the property inherits, and a
 * blanket rule would also silence it inside third-party markup — WooCommerce's
 * cart and checkout still render with Woo's own CSS and have no `:active` of
 * their own to fall back on.
 * ===================================================================== */

a,
button,
label,
summary,
select,
[role="button"],
[tabindex]:not([tabindex="-1"]),
input[type="submit"],
input[type="button"],
input[type="checkbox"],
input[type="radio"] {
  -webkit-tap-highlight-color: transparent;
}

/* =======================================================================
 * 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);
}

/* A dialog container is focused, never focusable.
   Opening a drawer or a sheet moves focus onto the panel itself
   (`openLayer()` in ui.js) so the screen reader lands inside it. That focus is
   always programmatic — `tabindex="-1"` is unreachable by Tab — and browsers
   still match it as `:focus-visible`, which on a real phone drew the ring
   around a whole panel that nothing had asked to act on. The ring's job is to
   say "this is where your key press will go"; on a container it says nothing
   true. Every control inside keeps its own. */
:is([role="dialog"], [role="alertdialog"])[tabindex="-1"]:focus-visible {
  outline: none;
}

/* 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%); }