/* Explain: Base reset, typography, and responsive adjustments for the website. */
* {
    box-sizing: border-box;
}

html {
    background: var(--background-color);
    text-rendering: optimizeLegibility;
    overscroll-behavior-x: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    overflow-x: clip;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--taupe-color) 34%, transparent), transparent 34rem),
        radial-gradient(circle at 85% 12%, color-mix(in srgb, var(--sage-color) 20%, transparent), transparent 28rem),
        linear-gradient(180deg, var(--ivory-color), color-mix(in srgb, var(--taupe-color) 10%, var(--ivory-color)) 42rem, var(--ivory-color));
}

::selection {
    background: var(--clay-color);
    color: var(--ivory-color);
}

button,
a {
    cursor: pointer;
}

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

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--clay-color) 62%, transparent);
    outline-offset: 3px;
}

/* استقرار التمرير على الجوال: إلغاء التأخير والتكبير المزدوج على العناصر القابلة للنقر */
a,
button,
summary,
[role="button"] {
    touch-action: manipulation;
}

img {
    max-width: 100%;
}

/* إيقاف الحركات المستمرة لمن يفضّل تقليل الحركة أو على الأجهزة الضعيفة */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ضبط مقاس الخط النصي على جميع أنواع الجوالات: يمنع التكبير أو التصغير التلقائي
   عند تدوير الجهاز أو تغيير إعدادات النظام، فيبقى التصميم ثابتًا ومقروءًا */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* تمرير أفقي سلس وموحّد لقوائم الأقسام على الجوال دون شريط تمرير ظاهر */
@media (max-width: 767px) {
    .blog-filter-bar {
        contain: content;
    }

    .blog-filter-bar img,
    .blog-filter-bar i {
        pointer-events: none;
    }
}