/* الجذر */
:root {
    --primary: #ffa500;
    --secondary: #ffffff;
    --helper: #000000;
    --maxwidth: 1180px;
}

/* إعادة الضبط */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 6em;
}

body {
    font-family: "Cairo", "Segoe UI", Tahoma, sans-serif;
    background-color: var(--helper);
    color: var(--secondary);
    line-height: 1.9;
}

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

ol,
ul {
    list-style: none;
}

img {
    display: block;
    max-width: 100%;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 4px;
}

/* الهيكل العام */
main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5em;
}

/* حركة الظهور */
.omsnreveal {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .6s ease, transform .6s ease;
}

.omsnvisible {
    opacity: 1;
    transform: translateY(0);
}

html:not(.js) .omsnreveal {
    opacity: 1;
    transform: none;
}


/* الهيدر */
.omsnhdrxfrj {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--helper);
    border-bottom: 1px solid rgba(255, 165, 0, .28);
}

    /* الحاوية الداخلية */
    .omsnhdrxfrjinner {
        width: 100%;
        max-width: var(--maxwidth);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.5em;
        padding: 1em 1.25em;
    }

    /* الشعار */
    .omsnhdrxfrjlogo {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    /* صورة الشعار */
    .omsnhdrxfrjlogoimg {
        display: block;
        width: auto;
        height: 2.6em;
    }

    /* زر القائمة */
    .omsnhdrxfrjtoggle {
        display: none;
        flex-direction: column;
        gap: 5px;
        width: 2.6em;
        height: 2.6em;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 165, 0, .4);
        border-radius: .7em;
        background-color: transparent;
        cursor: pointer;
    }

    /* شريط زر القائمة */
    .omsnhdrxfrjtogglebar {
        width: 20px;
        height: 2px;
        background-color: var(--primary);
        transition: background-color .3s ease;
    }

    /* التنقل */
    .omsnhdrxfrjnav {
        display: flex;
        align-items: center;
        gap: 1.75em;
    }

    /* قائمة التنقل */
    .omsnhdrxfrjmenu {
        display: flex;
        align-items: center;
        gap: 1.5em;
    }

    /* رابط التنقل */
    .omsnhdrxfrjlink {
        position: relative;
        font-size: .95rem;
        font-weight: 500;
        color: var(--secondary);
        padding-bottom: .35em;
        transition: color .3s ease;
    }

    .omsnhdrxfrjlink::after {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        bottom: 0;
        width: 0;
        height: 2px;
        background-color: var(--primary);
        transition: width .3s ease;
    }

    .omsnhdrxfrjlink:hover {
        color: var(--primary);
    }

    .omsnhdrxfrjlink:hover::after {
        width: 100%;
    }

    /* زر التواصل */
    .omsnhdrxfrjcta {
        display: inline-flex;
        align-items: center;
        padding: .7em 1.4em;
        border-radius: .8em;
        font-weight: 700;
        font-size: .95rem;
        color: var(--helper);
        background-color: var(--primary);
        border: 1px solid var(--primary);
        transition: color .3s ease, background-color .3s ease;
    }

    .omsnhdrxfrjcta:hover {
        color: var(--primary);
        background-color: var(--helper);
    }


/* الاستجابة */
@media (max-width: 860px) {

    /* زر القائمة */
    .omsnhdrxfrjtoggle {
        display: flex;
    }

    /* التنقل */
    .omsnhdrxfrjnav {
        position: absolute;
        inset-inline: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 1em;
        padding: 1.25em;
        background-color: var(--helper);
        border-bottom: 1px solid rgba(255, 165, 0, .28);
        display: none;
    }

    .omsnhdrxfrjnav.omsnvisible {
        display: flex;
    }

    /* قائمة التنقل */
    .omsnhdrxfrjmenu {
        flex-direction: column;
        align-items: stretch;
        gap: .5em;
    }

    /* زر التواصل */
    .omsnhdrxfrjcta {
        justify-content: center;
    }

}


/* تقليل الحركة */
@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .omsnreveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

}