/* =========================================================
   ZABANE ABI — BASE.CSS
   Design tokens, reset, body, typography
   ========================================================= */

:root {
    /* surfaces — near-black cinematic palette */
    --bg: #050507;
    --bg-2: #070809;
    --panel: #0C0E13;
    --panel-2: #10131A;
    --hair: rgba(255, 255, 255, 0.08);
    --hair-2: rgba(255, 255, 255, 0.05);

    /* accents */
    --teal: #16D2D4;
    --blue: #1ec4ff;
    --sky: #38BDF8;
    --indigo: #30338E;
    --indigo-2: #312F89;
    --amber: #FFAC20;

    /* text */
    --ink: #F5F7FA;
    --muted: #9BA3AE;
    --muted-2: #7E848D;

    /* gradients */
    --gradient-metal: linear-gradient(180deg, #FFFFFF 0%, #A8ADB6 55%, #71757E 100%);
    --gradient-teal: linear-gradient(180deg, #7FF3F4 0%, #16D2D4 55%, #0FA6A8 100%);
    --gradient-blue: linear-gradient(180deg, #7FDCFF 0%, #1ec4ff 55%, #0F8EBC 100%);

    /* motion */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* typography */
    --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
    --sans-fa: 'Vazirmatn', 'Vazir', 'IRANSans', 'IRANYekan', Tahoma, sans-serif;
    --sans-en: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --sans: var(--sans-fa);

    /* layout */
    --maxw: 1200px;
    --radius: 18px;
    --radius-sm: 12px;
    --radius-xs: 8px;
}

/* ============== RESET ============== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    background-color: var(--bg);
    color: var(--ink);
    font-family: var(--sans-fa);
    line-height: 1.9;
    overflow-x: hidden;
    min-height: 100vh;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

button {
    cursor: pointer;
    background: none;
    border: none;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

::selection {
    background-color: var(--teal);
    color: var(--bg);
}

/* ============== TYPOGRAPHY ============== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--sans-fa);
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
}

p, span, a, li, button, label {
    font-family: var(--sans-fa);
}

.font-mono, code, pre {
    font-family: var(--mono);
}

.font-serif-en {
    font-family: var(--serif);
    font-style: italic;
}

/* v1.3.0: English number font — thin, elegant, Inter-like */
/* Used for: prices, durations, stats, counts, dates, phone numbers */
.za-num-en {
    font-family: 'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-weight: 300;
    font-feature-settings: 'tnum' 1; /* tabular numbers for alignment */
    letter-spacing: -0.01em;
    direction: ltr;
    unicode-bidi: embed;
}

/* v1.3.0: English number font — bold variant for prices/headlines */
.za-num-en--bold {
    font-family: 'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-weight: 600;
    font-feature-settings: 'tnum' 1;
    letter-spacing: -0.02em;
    direction: ltr;
    unicode-bidi: embed;
}

/* v1.3.0: Display number — for big stats/headlines (thin, italic serif) */
.za-num {
    font-family: var(--serif) !important;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(2rem, 4vw, 3.4rem);
    background: var(--gradient-metal);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    direction: ltr;
    display: inline-block;
}

/* ============== SCROLLBAR ============== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-2);
}

::-webkit-scrollbar-thumb {
    background: rgba(22, 210, 212, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(22, 210, 212, 0.4);
}

/* ============== WORDPRESS ALIGNMENTS ============== */
.alignleft { float: left; margin-inline-end: 1.5em; margin-block-end: 1em; }
.alignright { float: right; margin-inline-start: 1.5em; margin-block-end: 1em; }
.aligncenter { display: block; margin-inline: auto; margin-block-end: 1em; }
.alignwide { max-width: 100%; }
.alignfull { max-width: 100vw; margin-inline: calc(50% - 50vw); }

/* ============== WORDPRESS CONTENT ============== */
.entry-content p { margin-bottom: 1.5em; }
.entry-content h2 { margin-block: 2em 1em; }
.entry-content h3 { margin-block: 1.5em 0.75em; }
.entry-content ul, .entry-content ol { margin-block-end: 1.5em; padding-inline-start: 1.5em; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-block-end: 0.5em; }
.entry-content blockquote {
    border-inline-start: 3px solid var(--teal);
    padding-inline-start: 1.5em;
    margin-block: 1.5em;
    color: var(--muted);
    font-style: italic;
}
.entry-content code {
    background: var(--panel-2);
    padding: 0.2em 0.5em;
    border-radius: 4px;
    font-size: 0.9em;
}
.entry-content pre {
    background: var(--panel-2);
    padding: 1em;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    margin-block-end: 1.5em;
}
.entry-content pre code {
    background: transparent;
    padding: 0;
}
.entry-content img {
    border-radius: var(--radius-sm);
    margin-block-end: 1em;
}
.entry-content a {
    color: var(--teal);
    text-decoration: underline;
}
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block-end: 1.5em;
}
.entry-content th, .entry-content td {
    padding: 0.75em;
    border: 1px solid var(--hair);
    text-align: right;
}
.entry-content th {
    background: var(--panel-2);
    font-weight: 700;
}

/* ============== ACCESSIBILITY ============== */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0;
    background: var(--teal);
    color: var(--bg);
    padding: 0.75rem 1.25rem;
    z-index: 1000;
    border-radius: 0 0 0 8px;
}

.skip-link:focus {
    inset-inline-start: 0;
}

:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

/* ============== REDUCED MOTION ============== */
@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;
    }
}