@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+Arabic:wght@400;500;700&display=swap');

:root{

    --yellow:#E7C65A;
    --yellow-hover:#D6B348;

    --border:#ECECEC;

}

/* Typography */

body{

    font-family:
    Inter,
    "Noto Sans Arabic",
    sans-serif;

}

.md-typeset{

    font-size:17px;

    line-height:1.8;

}

/* Header */

.md-header{

    background:var(--md-default-bg-color);
    color:var(--md-default-fg-color);

    border-bottom:1px solid var(--border);

    box-shadow:none;

}

/* Sidebar */

.md-sidebar{

    background:var(--md-default-bg-color);

}

/* Navigation */

.md-nav__link{

    border-radius:999px;

    color:var(--md-default-fg-color--light);

    padding:.4rem .8rem;

    transition:.15s;

}

.md-nav__link:hover{

    background:transparent;

    color:#A77A00;

}

.md-nav__link--active{

    background:#FFF3D0;
    color:#A77A00;
    font-weight:600;

}

[data-md-color-scheme="slate"] .md-nav__link--active{

    background:rgba(231,198,90,.15);

}

/* Headings */

.md-typeset h1{

    font-weight:700;

}

.md-typeset h2{

    font-weight:600;

    margin-top:2.2em;
    padding-bottom:0;
    border-bottom:none;

}

.md-typeset h3{

    font-weight:600;

    margin-top:1.6em;

}

/* Links */

.md-typeset a{

    color:#A77A00;

}

.md-typeset a:hover{

    color:#C48D00;

}

/* Tables */

.md-typeset table{

    border-radius:12px;

    overflow:hidden;

}

/* Admonitions */

.md-typeset .admonition{

    border-radius:12px;

}

/* Code */

.md-typeset code{

    font-family:"JetBrains Mono", monospace;
    font-size:.85em;

    border-radius:6px;

}

.md-typeset pre code{

    font-family:"JetBrains Mono", monospace;

}

/* Search */

.md-search__form{

    border-radius:999px;

}

.md-search__input{

    font-size:.85rem;

}

/* Selection */

::selection{

    background:#FFF0B8;

}

/* Grid cards — softer border + hover lift, VitePress-style */
/* Shadow lives on a pseudo-element and animates opacity (compositor-only,
   no repaint) instead of animating box-shadow directly, which is what
   was causing the laggy hover. */

.grid.cards > ul > li,
.grid.cards > .card{

    position:relative;

    border:1px solid var(--border);
    border-radius:12px;

    box-shadow:none;

    transition:transform .2s cubic-bezier(.4,0,.2,1), border-color .2s ease;
    will-change:transform;

}

.grid.cards > ul > li::after,
.grid.cards > .card::after{

    content:"";
    position:absolute;
    inset:0;

    border-radius:12px;

    box-shadow:0 8px 24px rgba(0,0,0,.08);

    opacity:0;
    transition:opacity .2s ease;

    pointer-events:none;

}

[data-md-color-scheme="slate"] .grid.cards > ul > li::after,
[data-md-color-scheme="slate"] .grid.cards > .card::after{

    box-shadow:0 8px 24px rgba(0,0,0,.35);

}

.grid.cards > ul > li:hover,
.grid.cards > .card:hover{

    transform:translateY(-3px);

    border-color:transparent;

}

.grid.cards > ul > li:hover::after,
.grid.cards > .card:hover::after{

    opacity:1;

}

/* Mixed Arabic / English text */
/* Let the browser pick base direction per paragraph instead of forcing
   one direction across the whole page — fixes English words inside
   Arabic sentences (and vice versa) jumping to the wrong side. */

.md-typeset p,
.md-typeset li,
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset td,
.md-typeset th{

    unicode-bidi:plaintext;

}

/* For any specific run of Arabic text you wrap manually (e.g. inside an
   English sentence), tag it explicitly so it isolates instead of
   dragging neighboring punctuation/numbers along with it:
   <span lang="ar" dir="rtl">النص هنا</span> */

[lang="ar"]{

    direction:rtl;
    unicode-bidi:isolate;
    font-family:"Noto Sans Arabic", sans-serif;

}

[lang="en"]{

    direction:ltr;
    unicode-bidi:isolate;

}

/* Dark mode overrides */
[data-md-color-scheme="slate"] .md-header{

    border-bottom:1px solid rgba(255,255,255,.08);

}