/*
 * Pishkhanak — Persian type scale (build-free).
 * Loaded AFTER the Vite/Tailwind bundle on every public layout.
 *
 * Why: the compiled bundle ships text-xs=12px, text-[10px], text-[11px] and the portal CSS
 * used 11-13px for labels. Vazirmatn/IRANSans have a small x-height, so Persian needs
 * ~1-2px more than Latin to read comfortably (persian-guide: labels 13-14, body 15-17).
 *
 * Dynamic sizing = stepped tokens per phone class (NOT vw scaling), all in rem so the OS /
 * browser font-size setting keeps working. Root font-size is deliberately left at 16px.
 *   <360px  small phone  : slightly tighter so 320px screens do not wrap badly
 *   360-429 regular phone: base scale
 *   430-767 large phone  : +1px on every step
 *   >=768   tablet/desktop: base scale
 */
:root {
  --fs-3xs: .78125rem;  /* 12.5px tiny badges only */
  --fs-2xs: .8125rem;   /* 13px  captions, helper text, nav labels */
  --fs-xs: .875rem;     /* 14px  secondary text */
  --fs-sm: .9375rem;    /* 15px  compact body */
  --fs-md: 1rem;        /* 16px  body */
}
@media (max-width: 359.98px) {
  :root {
    --fs-3xs: .75rem;
    --fs-2xs: .78125rem;  /* 12.5 */
    --fs-xs: .84375rem;   /* 13.5 */
    --fs-sm: .90625rem;   /* 14.5 */
    --fs-md: .96875rem;   /* 15.5 */
  }
}
@media (min-width: 430px) and (max-width: 767.98px) {
  :root {
    --fs-3xs: .8125rem;   /* 13 */
    --fs-2xs: .875rem;    /* 14 */
    --fs-xs: .9375rem;    /* 15 */
    --fs-sm: 1rem;        /* 16 */
    --fs-md: 1.0625rem;   /* 17 */
  }
}

/* Phones: 16px minimum on form controls — stops iOS/Android zoom-on-focus and keeps typed Persian digits readable */
@media (max-width: 767.98px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]),
  select, textarea { font-size: max(1rem, 16px); }
}

/* Tailwind utility overrides. Phones (<640px): no responsive variant can be active, so apply plainly. */
@media (max-width: 639.98px) {
  .text-\[9px\],
  .text-\[10px\]{font-size:var(--fs-3xs)}
  .text-\[11px\],
  .text-\[13px\],
  .text-\[0\.7rem\],
  .text-xs{font-size:var(--fs-2xs)}
  .text-sm{font-size:var(--fs-sm)}
  .text-base{font-size:var(--fs-md)}
}
/* >=640px: skip elements that carry their own responsive text-size variant (md:text-lg …) so those keep winning. */
@media (min-width: 640px) {
  .text-\[9px\]:not([class*=":text-xs"]):not([class*=":text-sm"]):not([class*=":text-base"]):not([class*=":text-lg"]):not([class*=":text-xl"]):not([class*=":text-2xl"]):not([class*=":text-3xl"]):not([class*=":text-["]),
  .text-\[10px\]:not([class*=":text-xs"]):not([class*=":text-sm"]):not([class*=":text-base"]):not([class*=":text-lg"]):not([class*=":text-xl"]):not([class*=":text-2xl"]):not([class*=":text-3xl"]):not([class*=":text-["]){font-size:var(--fs-3xs)}
  .text-\[11px\]:not([class*=":text-xs"]):not([class*=":text-sm"]):not([class*=":text-base"]):not([class*=":text-lg"]):not([class*=":text-xl"]):not([class*=":text-2xl"]):not([class*=":text-3xl"]):not([class*=":text-["]),
  .text-\[13px\]:not([class*=":text-xs"]):not([class*=":text-sm"]):not([class*=":text-base"]):not([class*=":text-lg"]):not([class*=":text-xl"]):not([class*=":text-2xl"]):not([class*=":text-3xl"]):not([class*=":text-["]),
  .text-\[0\.7rem\]:not([class*=":text-xs"]):not([class*=":text-sm"]):not([class*=":text-base"]):not([class*=":text-lg"]):not([class*=":text-xl"]):not([class*=":text-2xl"]):not([class*=":text-3xl"]):not([class*=":text-["]),
  .text-xs:not([class*=":text-xs"]):not([class*=":text-sm"]):not([class*=":text-base"]):not([class*=":text-lg"]):not([class*=":text-xl"]):not([class*=":text-2xl"]):not([class*=":text-3xl"]):not([class*=":text-["]){font-size:var(--fs-2xs)}
  .text-sm:not([class*=":text-xs"]):not([class*=":text-sm"]):not([class*=":text-base"]):not([class*=":text-lg"]):not([class*=":text-xl"]):not([class*=":text-2xl"]):not([class*=":text-3xl"]):not([class*=":text-["]){font-size:var(--fs-sm)}
  .text-base:not([class*=":text-xs"]):not([class*=":text-sm"]):not([class*=":text-base"]):not([class*=":text-lg"]):not([class*=":text-xl"]):not([class*=":text-2xl"]):not([class*=":text-3xl"]):not([class*=":text-["]){font-size:var(--fs-md)}
}

/* Persian needs air: Tailwind pairs text-xs/sm with a 16/20px line box, too tight for Vazirmatn. Explicit leading-* still wins. */
.text-xs:not([class*="leading-"]),
.text-sm:not([class*="leading-"]),
.text-base:not([class*="leading-"]),
.text-\[11px\]:not([class*="leading-"]),
.text-\[13px\]:not([class*="leading-"]){line-height:1.8}

/* Mobile bottom nav: up to six Persian labels share one row — equal columns, no clipping on 320px phones */
#footerNav .flex > * { flex: 1 1 0; min-width: 0; padding-inline: 2px; }
#footerNav span { font-size: var(--fs-2xs); white-space: nowrap; }
@media (max-width: 359.98px) {
  #footerNav .flex { padding-inline: 0; }
  #footerNav span { font-size: .75rem; }
}