/* ============================================================
   AL-AHOUD FINAL GLOBAL DESIGN SYSTEM
   ONE FONT
   ONE TYPOGRAPHY
   ONE NAVIGATION
   ONE ACTIVE PAGE
   ============================================================ */

:root {
    --al-ahoud-navy: #10264b;
    --al-ahoud-red: #d71920;
    --al-ahoud-font: "Cairo", Tahoma, Arial, sans-serif;
}

/* ------------------------------------------------------------
   GLOBAL FONT
   ------------------------------------------------------------ */

html,
body,
body *,
button,
input,
select,
textarea {
    font-family: var(--al-ahoud-font) !important;
}

html,
body {
    direction: rtl !important;
}

body {
    margin: 0;
    direction: rtl !important;
}

/* ------------------------------------------------------------
   TYPOGRAPHY
   ------------------------------------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--al-ahoud-font) !important;
    font-weight: 800 !important;
}

p,
li,
span,
label,
a,
button,
input,
select,
textarea {
    font-family: var(--al-ahoud-font) !important;
}

/* ------------------------------------------------------------
   NAVIGATION - COMPLETE RESET
   ------------------------------------------------------------ */

/*
   IMPORTANT:
   Remove every old underline mechanism first.
*/

header nav a,
header nav a::before,
header nav a::after,
nav a,
nav a::before,
nav a::after,
.nav-links a,
.nav-links a::before,
.nav-links a::after,
.navbar a,
.navbar a::before,
.navbar a::after {
    text-decoration: none !important;
    border: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/*
   Remove old active colors/classes.
*/

header nav a.active,
header nav a.active-page,
header nav a.active-link,
nav a.active,
nav a.active-page,
nav a.active-link,
.nav-links a.active,
.nav-links a.active-page,
.nav-links a.active-link,
.navbar a.active,
.navbar a.active-page,
.navbar a.active-link {
    color: var(--al-ahoud-navy) !important;
    text-decoration: none !important;
    border: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/*
   ALL navigation links are normal navy.
*/

header nav a,
nav a,
.nav-links a,
.navbar a {
    color: var(--al-ahoud-navy) !important;
    text-decoration: none !important;
    border: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    position: relative !important;
}

/*
   Disable old pseudo-elements on every link.
*/

header nav a::before,
header nav a::after,
nav a::before,
nav a::after,
.nav-links a::before,
.nav-links a::after,
.navbar a::before,
.navbar a::after {
    content: none !important;
    display: none !important;
}

/*
   ONLY our active class gets the red underline.
*/

header nav a.al-ahoud-active-nav,
nav a.al-ahoud-active-nav,
.nav-links a.al-ahoud-active-nav,
.navbar a.al-ahoud-active-nav {
    color: var(--al-ahoud-red) !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
}

/*
   ONLY ONE red underline.
*/

header nav a.al-ahoud-active-nav::after,
nav a.al-ahoud-active-nav::after,
.nav-links a.al-ahoud-active-nav::after,
.navbar a.al-ahoud-active-nav::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    bottom: -14px !important;

    height: 3px !important;

    background: var(--al-ahoud-red) !important;

    border: 0 !important;
    border-radius: 3px !important;

    box-shadow: none !important;
}

/*
   Hover must NEVER create a second line.
*/

header nav a:hover,
nav a:hover,
.nav-links a:hover,
.navbar a:hover {
    text-decoration: none !important;
    border: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

header nav a:hover::before,
header nav a:hover::after,
nav a:hover::before,
nav a:hover::after,
.nav-links a:hover::before,
.nav-links a:hover::after,
.navbar a:hover::before,
.navbar a:hover::after {
    content: none !important;
    display: none !important;
}

/*
   Re-enable ONLY our active underline after hover.
*/

header nav a.al-ahoud-active-nav:hover::after,
nav a.al-ahoud-active-nav:hover::after,
.nav-links a.al-ahoud-active-nav:hover::after,
.navbar a.al-ahoud-active-nav:hover::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -14px !important;

    height: 3px !important;

    background: var(--al-ahoud-red) !important;
    border-radius: 3px !important;
}

/* ------------------------------------------------------------
   RTL
   ------------------------------------------------------------ */

header,
nav,
main,
section,
footer {
    direction: rtl !important;
}

/* ------------------------------------------------------------
   FORMS
   ------------------------------------------------------------ */

input,
textarea,
select {
    direction: rtl !important;
    text-align: right !important;
}

/* ------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------ */

button,
.btn,
.button {
    font-family: var(--al-ahoud-font) !important;
}

/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 768px) {

    header nav a.al-ahoud-active-nav::after,
    nav a.al-ahoud-active-nav::after,
    .nav-links a.al-ahoud-active-nav::after,
    .navbar a.al-ahoud-active-nav::after {
        bottom: -7px !important;
        height: 2px !important;
    }

}