/* PoulPal - base.css
   Reset, self hosted font, RTL, Persian digits.
   The Farsi-Digits build of Vazirmatn draws Latin digits with Persian shapes too;
   every string already comes from copy.php in Persian digits, this is only a net. */

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

@font-face {
  font-family: "Vazirmatn FD";
  src: url("../fonts/Vazirmatn-FD-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

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

/* Latin identifiers (request code, receipt code) must keep Latin digits so they
   can be read off the page and typed into an address bar correctly. */
@font-face {
  font-family: "Vazirmatn Code";
  src: url("../fonts/Vazirmatn-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
p,
ol,
ul,
dl,
dd,
figure,
fieldset,
blockquote {
  margin: var(--space-0);
}

ol,
ul,
fieldset,
legend {
  padding: var(--space-0);
}

fieldset {
  border: var(--space-0);
  min-width: var(--space-0);
}

ol,
ul {
  list-style: none;
}

html,
body {
  direction: rtl;
}

body {
  min-height: 100vh;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-family);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  text-align: start;
  overflow-wrap: break-word;
  font-variant-numeric: normal;
}

h1,
h2,
h3,
h4 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

img,
svg {
  display: block;
  max-width: 100%;
}

svg {
  flex-shrink: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
}

a {
  color: var(--link);
  text-underline-offset: var(--space-1);
}

a:hover {
  color: var(--action-hover);
}

strong,
b {
  font-weight: var(--fw-bold);
}

:focus {
  outline: none;
}

:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Latin runs inside Persian text: slug, code, card number. */
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

.code {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-code);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}

/* Tabular figures for amounts, clock times and card numbers. */
.num {
  font-variant-numeric: tabular-nums;
}

.visually-hidden {
  position: absolute;
  width: var(--border-1);
  height: var(--border-1);
  margin: calc(var(--border-1) * -1);
  padding: var(--space-0);
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: var(--space-0);
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  top: calc(var(--tap-min) * -2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--action);
  color: var(--on-action);
  border-radius: var(--radius-md);
}

.skip-link:focus-visible {
  top: var(--space-2);
  color: var(--on-action);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none;
    animation: none;
    scroll-behavior: auto;
  }
}