/**
 * Public base: page defaults, heading scale, links, keyboard focus and Urdu (RTL) text.
 * Uses tokens.css only. Element selectors here are the defaults; page/component classes override them.
 */

/* Urdu font: Mehr Nastaliq Web v2.0 — © 2022 Mehr Type with CSaLT, ITU Lahore; CC BY-SA 4.0 (https://mehrtype.com/).
   Self-hosted; unicode-range = it downloads only on pages that actually show Urdu / Arabic letters. */
@font-face {
    font-family: 'Mehr Nastaliq';
    src: url('../../../../shared/assets/fonts/mehr-nastaliq/MehrNastaliqWeb-v2.woff') format('woff'),
         url('../../../../shared/assets/fonts/mehr-nastaliq/MehrNastaliqWeb-v2.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}
body {
    margin: 0;
    background-color: var(--color-bg);
    background-image: radial-gradient(circle at 50% 0%, rgba(25, 25, 25, 0.4) 0%, rgba(0, 0, 0, 1) 60%);
    background-attachment: fixed;
    color: var(--color-text-secondary);
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Heading scale (same sizes browsers use by default, now named). :where() = zero specificity,
   so any page/component rule (and Bootstrap on the auth pages) still wins. */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-text);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.02em;
    line-height: var(--lh-tight);
}
:where(h1) { font-size: var(--fs-4xl); }
:where(h2) { font-size: var(--fs-3xl); }
:where(h3) { font-size: var(--fs-xl); }
:where(h4) { font-size: var(--fs-lg); }
:where(h5) { font-size: var(--fs-sm); }
:where(h6) { font-size: var(--fs-xs); }

/* form controls use the site font (browsers default textareas to monospace) */
:where(button, input, select, textarea) { font-family: inherit; }

a {
    text-decoration: none;
    transition: var(--transition);
}

:where(img) {
    max-width: 100%;
}

::selection {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

/* Keyboard focus is always visible (mouse clicks do not show it) */
:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.text-primary {
    color: var(--color-text) !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Urdu: Mehr Nastaliq, right-to-left, tall lines. shared/assets/js/urdu-dir.js marks every block that is mostly
   Urdu with dir="rtl" lang="ur"; in mixed text Work Sans has no Urdu glyphs, so Urdu letters fall through to Mehr Nastaliq. */
:lang(ur),
[dir="rtl"],
.u-urdu {
    font-family: var(--font-urdu);
    line-height: var(--lh-urdu);
}
.u-urdu {
    direction: rtl;
    text-align: right;
}
[dir="auto"] {
    unicode-bidi: plaintext;
    text-align: start;
}
:dir(rtl) {
    line-height: var(--lh-urdu);
}
/* Nastaliq reads smaller than Latin at the same size: blocks the script switched to Urdu are a little larger.
   :where() = zero specificity, so a size a page sets itself always wins. */
:where([data-urdu-auto]) { font-size: 1.15em; }

/* "Skip to content": hidden until it gets keyboard focus */
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100000; padding: 0.6rem 1rem; border-radius: 8px; background: var(--color-primary, #37BD8A); color: #000; font-weight: 600; text-decoration: none; transform: translateY(-160%); transition: transform 0.15s; }
.skip-link:focus { transform: none; outline: 2px solid #fff; outline-offset: 2px; }
main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* browser autofill on the dark public forms (checkout, contact...): keep the dark field and light text instead of the browser's white / light-blue fill */
:where(input, textarea, select):-webkit-autofill,
:where(input, textarea, select):-webkit-autofill:hover,
:where(input, textarea, select):-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-text, #fff) !important;
    -webkit-box-shadow: 0 0 0 1000px #111 inset !important;
    box-shadow: 0 0 0 1000px #111 inset !important;
    caret-color: var(--color-text, #fff);
    transition: background-color 600000s 0s, color 600000s 0s;
}