/* ══════════════════════════════════════════════════════════════════
   02-reset.css — Body, fonts, starfield, scrollbar
   ══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

html, body {
    background: var(--xp-bg) !important;
    color: var(--xp-text-2) !important;
    font-family: var(--xp-font-b) !important;
}

body {
    /* Cosmic radial glows — evokes the getxplain.ai starfield */
    background:
        radial-gradient(ellipse 55% 60% at 12% 8%,  rgba(123,77,255,0.22) 0%, transparent 60%),
        radial-gradient(ellipse 45% 55% at 88% 38%, rgba(59,130,246,0.14) 0%, transparent 58%),
        radial-gradient(ellipse 40% 45% at 60% 92%, rgba(245,166,35,0.10) 0%, transparent 55%),
        radial-gradient(ellipse 70% 70% at 50% 50%, rgba(20,13,53,0.55) 0%, transparent 85%),
        var(--xp-bg) !important;
    background-attachment: fixed !important;
}

/* Faint starfield — CSS-only dots */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
    background-image:
        radial-gradient(1px 1px at 20px 30px,       rgba(255,255,255,0.80), transparent),
        radial-gradient(1px 1px at 120px 80px,      rgba(255,255,255,0.50), transparent),
        radial-gradient(1.2px 1.2px at 220px 160px, rgba(167,139,250,0.70), transparent),
        radial-gradient(1px 1px at 360px 220px,     rgba(255,255,255,0.45), transparent),
        radial-gradient(1px 1px at 480px 60px,      rgba(96,165,250,0.60), transparent),
        radial-gradient(1px 1px at 90px 260px,      rgba(255,255,255,0.60), transparent),
        radial-gradient(1.2px 1.2px at 620px 180px, rgba(255,215,0,0.50), transparent);
    background-repeat: repeat;
    background-size: 720px 320px;
}

.guff-fn-wrapper { position: relative; z-index: 1; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    body::before { display: none; }
}

/* Custom scrollbar (Firefox + WebKit) */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--xp-purple) var(--xp-bg-deep);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--xp-bg-deep); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--xp-purple), var(--xp-purple-dk));
    border-radius: var(--r-pill);
    border: 2px solid var(--xp-bg-deep);
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--xp-purple-lt), var(--xp-purple));
}

/* Text selection */
::selection {
    background: var(--xp-purple);
    color: #fff;
}

/* Default typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--xp-font-h) !important;
    color: var(--xp-text-1) !important;
    font-weight: 800;
    letter-spacing: -0.02em;
}

p, li, span, a, div, section, article {
    font-family: var(--xp-font-b);
}

a {
    color: var(--xp-orange);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease-out);
}
a:hover { color: var(--xp-gold); }

img { max-width: 100%; height: auto; }

/* Visible focus ring for accessibility */
:focus-visible {
    outline: 2px solid var(--xp-purple-lt) !important;
    outline-offset: 3px !important;
    border-radius: 6px;
}

/* RTL / Arabic body text */
[lang="ar"], .ar, .arabic,
.post-template[data-lang="ar"] .post_c_in,
.post-template[data-lang="ar"] .fn__maintitle {
    font-family: var(--xp-font-ar), var(--xp-font-h) !important;
    line-height: 1.95;
    font-size: 1.12rem;
}

/* When the post content itself contains Arabic, flip direction */
.post_c_in[dir="rtl"],
.guff_fn_singlepost[dir="rtl"] .post_c_in,
[lang="ar"] .post_c_in {
    direction: rtl;
    text-align: right;
}
.post_c_in[dir="rtl"] blockquote,
[lang="ar"] .post_c_in blockquote {
    border-left: none !important;
    border-right: 4px solid var(--xp-purple) !important;
    border-radius: var(--r-md) 0 0 var(--r-md) !important;
}
.post_c_in[dir="rtl"] ul,
.post_c_in[dir="rtl"] ol,
[lang="ar"] .post_c_in ul,
[lang="ar"] .post_c_in ol {
    padding-left: 0;
    padding-right: 1.4rem;
}