/* Accessibility
--------------------------------------------- */

html {
  scroll-behavior: auto !important;
}

/* Text meant only for screen readers. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
    outline: 0;
}
:where(figure) {
    margin: 0;
}
/* Alignments
--------------------------------------------- */
.alignleft {

    /*rtl:ignore*/
    float: left;

    /*rtl:ignore*/
    margin-right: 1.5em;
    margin-bottom: 1.5em;
}

.alignright {

    /*rtl:ignore*/
    float: right;

    /*rtl:ignore*/
    margin-left: 1.5em;
    margin-bottom: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5em;
}

/* ==============================================================
   ELEMENTOR MOBILE MENU RTL OVERRIDE (ENGLISH REPLICA)
   ============================================================== */
@media (max-width: 1024px) {
    /* 1. Force the dropdown container to layer correctly as a sidebar */
    .elementor-nav-menu__container.elementor-nav-menu--dropdown,
    .elementor-location-header .elementor-nav-menu__container.elementor-nav-menu--dropdown {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important; /* Slide in from the right */
        left: auto !important;
        width: 300px !important;
        height: 100vh !important;
        z-index: 9999999 !important; /* Forces it over the hero section */
        transform: none !important; 
        direction: ltr !important; /* Stops Elementor from breaking the box layout */
        background-color: #ffffff !important;
        box-shadow: -5px 0 25px rgba(0,0,0,0.15) !important;
        margin: 0 !important;
    }

    /* 2. Un-freeze the body if Elementor's modal locks the DOM */
    .elementor-menu-modal--open,
    .elementor-menu-modal {
        overflow: auto !important;
        pointer-events: auto !important;
    }

    /* 3. Keep the actual menu items in right-aligned Arabic format */
    .elementor-nav-menu--dropdown ul.elementor-nav-menu > li > a,
    .elementor-nav-menu--dropdown .elementor-item {
        text-align: right !important;
        direction: rtl !important;
        display: block !important;
        width: 100% !important;
    }
    
    /* 4. Align sub-menu arrows to the left of the Arabic text */
    .elementor-nav-menu--dropdown .elementor-item.elementor-item-has-children {
        display: flex !important;
        flex-direction: row-reverse !important;
        justify-content: space-between !important;
    }
}