/* SharifStudy full-screen mobile navigation.
 *
 * This layer deliberately reuses Sahifa's existing #slide-out and #mobile-menu
 * nodes. The parent theme can keep cloning the configured desktop menu, while
 * these rules replace only the visual off-canvas behaviour on small screens.
 */

:root {
    --ss-menu-ink: #202625;
    --ss-menu-muted: #66706d;
    --ss-menu-line: #e7e9e5;
    --ss-menu-soft: #f7f8f5;
    --ss-menu-accent: #f36b21;
    --ss-menu-primary: #0b4a43;
    --ss-menu-surface: #ffffff;
}

.ss-mobile-menu-toggle,
.ss-mobile-search-toggle {
    display: none !important;
}

.ss-mobile-menu__sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media only screen and (min-width: 901px) {
    #slide-out.ss-mobile-menu,
    #ss-mobile-search.ss-mobile-search {
        display: none !important;
    }
}

@media only screen and (max-width: 900px) {
    html.ss-mobile-overlay-open,
    body.ss-mobile-overlay-open {
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    body.ss-mobile-overlay-open {
        position: fixed;
        inset-inline: 0;
        width: 100%;
    }

    /* Sahifa's desktop boxed margins must not become a floating card on mobile. */
    #wrapper.boxed,
    #wrapper.boxed-all,
    #wrapper.wide-layout {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #wrapper.boxed #theme-header,
    #wrapper.boxed-all #theme-header,
    #wrapper.wide-layout #theme-header,
    #theme-header {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        background: var(--ss-menu-surface) !important;
        box-shadow: none !important;
    }

    /* Keep the same compact header sticky on posts, pages and archives without
     * removing it from document flow. This is mobile-only; desktop keeps
     * Sahifa's own behaviour.
     */
    html body #wrapper #theme-header,
    html body #wrapper #theme-header.sticky,
    #theme-header,
    #theme-header.sticky {
        position: -webkit-sticky !important;
        position: sticky !important;
        inset-block-start: 0 !important;
        z-index: 9999 !important;
    }

    /* STICKY-HEADER FIX (mobile, posts):
     * On single posts, style.css sets `.single-post .wrapper-outer{overflow-x:hidden}`.
     * `.wrapper-outer` is an ancestor of #theme-header, and `overflow-x:hidden`
     * turns it into a scroll container (overflow-y computes to auto), which
     * confines the sticky header to a box that never scrolls internally -> the
     * header stops sticking, but ONLY on posts (only they get .single-post).
     * `overflow:clip` clips the same horizontal overflow WITHOUT creating a
     * scroll container, so sticky works again. `overflow-x:hidden` is kept first
     * as a graceful fallback for browsers without `clip` support (no regression).
     * Scoped to mobile + higher specificity so desktop keeps Sahifa's behaviour.
     */
    html body.single-post .wrapper-outer {
        overflow-x: hidden !important;
        overflow-x: clip !important;
    }

    html body.admin-bar #wrapper #theme-header,
    html body.admin-bar #wrapper #theme-header.sticky,
    .admin-bar #theme-header,
    .admin-bar #theme-header.sticky {
        inset-block-start: 46px !important;
    }

    #theme-header .header-content,
    #wrapper.wide-layout .header-content {
        display: grid !important;
        grid-template-columns: 48px minmax(0, 1fr) 48px;
        align-items: center;
        width: 100% !important;
        max-width: none !important;
        min-height: 64px;
        margin: 0 !important;
        padding: 0 8px !important;
        background: var(--ss-menu-surface) !important;
    }

    #theme-header .header-content > .logo,
    #theme-header.sticky .header-content > .logo {
        grid-column: 2;
        grid-row: 1;
        display: block !important;
        float: none !important;
        clear: none !important;
        width: 100%;
        min-width: 0;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    #theme-header .header-content > .logo > h1,
    #theme-header .header-content > .logo > h2,
    #theme-header .header-content > .logo > div,
    #theme-header .header-content > .logo a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        margin: 0;
    }

    #theme-header .header-content > .logo img,
    #theme-header.sticky .header-content > .logo img {
        display: block !important;
        float: none !important;
        width: min(200px, 100%) !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }

    /* The former orange sticky slogan is deliberately retired. Do not reveal
     * .e3lan-top when the sticky class is applied.
     */
    #theme-header .header-content > .e3lan-top,
    #theme-header.sticky .header-content > .e3lan-top,
    #theme-header .header-content > .widget,
    #theme-header .header-content > .custom-html-widget,
    #theme-header .header-content > .clear {
        display: none !important;
    }

    #slide-out-open.ss-mobile-menu-toggle,
    #ss-mobile-search-open.ss-mobile-search-toggle {
        grid-row: 1;
        position: static !important;
        inset: auto !important;
        z-index: auto;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 48px !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--ss-menu-ink);
        background: transparent !important;
        border: 0 !important;
        border-radius: 12px;
        opacity: 1 !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    #slide-out-open.ss-mobile-menu-toggle {
        grid-column: 1;
        justify-self: start;
    }

    #ss-mobile-search-open.ss-mobile-search-toggle {
        grid-column: 3;
        justify-self: end;
    }

    #slide-out-open .ss-mobile-menu-toggle__icon {
        width: 28px;
        height: 28px;
    }

    #slide-out-open.ss-mobile-menu-toggle:hover,
    #slide-out-open.ss-mobile-menu-toggle:focus-visible,
    #ss-mobile-search-open.ss-mobile-search-toggle:hover,
    #ss-mobile-search-open.ss-mobile-search-toggle:focus-visible,
    .ss-mobile-menu__close:hover,
    .ss-mobile-menu__close:focus-visible,
    .ss-mobile-submenu-toggle:hover,
    .ss-mobile-submenu-toggle:focus-visible {
        color: var(--ss-menu-primary);
        background: var(--ss-menu-soft) !important;
        outline: 2px solid transparent;
    }

    .ss-mobile-menu-toggle svg,
    .ss-mobile-search-toggle svg,
    .ss-mobile-menu__close svg,
    .ss-mobile-menu__search svg,
    .ss-mobile-submenu-toggle svg {
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* Neutralise Sahifa's translate-the-page drawer before defining the overlay. */
    .csstransforms3d.csstransitions .js-nav .inner-wrapper,
    .csstransforms3d.csstransitions .ss-mobile-menu-open .inner-wrapper,
    .js-nav .inner-wrapper {
        left: auto !important;
        transform: none !important;
        opacity: 1 !important;
    }

    #slide-out.ss-mobile-menu,
    .rtl #slide-out.ss-mobile-menu,
    #ss-mobile-search.ss-mobile-search,
    .rtl #ss-mobile-search.ss-mobile-search {
        position: fixed !important;
        inset: 0 !important;
        z-index: 10050 !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: 100vh !important;
        height: 100dvh !important;
        padding: 0 !important;
        color: var(--ss-menu-ink) !important;
        background: var(--ss-menu-surface) !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-6px) !important;
        overflow: hidden !important;
        backface-visibility: visible;
        transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
    }

    body.ss-mobile-menu-open #slide-out.ss-mobile-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) !important;
    }

    body.ss-mobile-search-open #ss-mobile-search.ss-mobile-search {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) !important;
    }

    /* Do not let old transformed layers bleed through the modal compositor. */
    body.ss-mobile-overlay-open #theme-header,
    body.ss-mobile-overlay-open .inner-wrapper {
        visibility: hidden !important;
    }

    body.ss-mobile-menu-open #slide-out.ss-mobile-menu,
    body.ss-mobile-menu-open #slide-out.ss-mobile-menu *,
    body.ss-mobile-search-open #ss-mobile-search.ss-mobile-search,
    body.ss-mobile-search-open #ss-mobile-search.ss-mobile-search * {
        visibility: visible;
    }

    .admin-bar #slide-out.ss-mobile-menu,
    .admin-bar #ss-mobile-search.ss-mobile-search {
        top: 46px !important;
        height: calc(100vh - 46px) !important;
        height: calc(100dvh - 46px) !important;
    }

    .ss-mobile-menu__dialog {
        position: relative;
        z-index: 1;
        isolation: isolate;
        display: grid;
        grid-template-rows: 64px auto minmax(0, 1fr) auto;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: var(--ss-menu-surface);
    }

    .ss-mobile-search__dialog {
        grid-template-rows: 64px auto minmax(0, 1fr);
    }

    .ss-mobile-menu__header {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) 48px;
        align-items: center;
        min-width: 0;
        padding: 0 8px;
        border-bottom: 1px solid var(--ss-menu-line);
    }

    .ss-mobile-menu__balance {
        grid-column: 1;
        grid-row: 1;
    }

    .ss-mobile-menu__brand {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        height: 100%;
    }

    .ss-mobile-menu__brand img {
        display: block;
        width: min(190px, 100%);
        max-height: 44px;
        object-fit: contain;
    }

    .ss-mobile-menu__close {
        grid-column: 3;
        grid-row: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        margin: 0;
        padding: 0;
        color: var(--ss-menu-ink);
        background: transparent !important;
        border: 0;
        border-radius: 12px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    #slide-out .ss-mobile-menu__search,
    #slide-out .search-mobile.ss-mobile-menu__search,
    #ss-mobile-search .ss-mobile-menu__search,
    #ss-mobile-search .search-mobile.ss-mobile-menu__search {
        position: relative;
        display: flex;
        align-items: center;
        width: auto;
        height: auto;
        margin: 12px 16px 8px;
        overflow: visible;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    #slide-out .ss-mobile-menu__search input,
    #slide-out .search-mobile #s-mobile,
    #ss-mobile-search .ss-mobile-menu__search input {
        float: none;
        width: 100%;
        height: 48px;
        margin: 0;
        padding: 0 16px 0 50px;
        color: var(--ss-menu-ink);
        font: inherit;
        font-size: 15px;
        background: var(--ss-menu-soft) !important;
        border: 1px solid var(--ss-menu-line);
        border-radius: 12px;
        appearance: none;
    }

    [dir="ltr"] #slide-out .ss-mobile-menu__search input,
    [dir="ltr"] #ss-mobile-search .ss-mobile-menu__search input {
        padding: 0 50px 0 16px;
    }

    #slide-out .ss-mobile-menu__search input:focus,
    #ss-mobile-search .ss-mobile-menu__search input:focus {
        background: var(--ss-menu-surface) !important;
        border-color: var(--ss-menu-primary);
        box-shadow: 0 0 0 3px rgba(11, 74, 67, 0.12);
        outline: none;
    }

    #slide-out .ss-mobile-menu__search button.search-button,
    #ss-mobile-search .ss-mobile-menu__search button.search-button {
        position: absolute;
        inset-inline-end: 4px;
        top: 4px;
        right: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
        color: var(--ss-menu-muted);
        background: transparent !important;
        border: 0;
        border-radius: 10px;
        cursor: pointer;
    }

    #ss-mobile-search .ss-mobile-search__form {
        margin-top: 20px;
    }

    .ss-mobile-search__space {
        min-height: 0;
        background: var(--ss-menu-surface);
    }

    .ss-mobile-menu__nav {
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #c7ccc6 transparent;
    }

    #slide-out #mobile-menu,
    #slide-out #mobile-menu .main-menu,
    #slide-out #mobile-menu .top-menu,
    #slide-out #mobile-menu ul {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        list-style: none !important;
    }

    #slide-out #mobile-menu li {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 52px;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0;
        border-bottom: 1px solid var(--ss-menu-line);
        list-style: none !important;
    }

    #slide-out #mobile-menu li > a {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        min-width: 0;
        min-height: 56px;
        padding: 10px 18px !important;
        color: var(--ss-menu-ink) !important;
        font-size: 16px !important;
        font-weight: 500;
        line-height: 1.55;
        text-align: start;
        text-decoration: none;
        background: transparent !important;
        border: 0 !important;
    }

    #slide-out #mobile-menu li.ss-has-submenu > a {
        grid-column: 1;
    }

    #slide-out #mobile-menu li > a:hover,
    #slide-out #mobile-menu li > a:focus-visible {
        color: var(--ss-menu-primary) !important;
        background: var(--ss-menu-soft) !important;
        outline: none;
    }

    #slide-out #mobile-menu .current-menu-item > a,
    #slide-out #mobile-menu .current-menu-ancestor > a,
    #slide-out #mobile-menu .current-menu-parent > a {
        color: var(--ss-menu-accent) !important;
        border-inline-start: 3px solid var(--ss-menu-accent) !important;
    }

    #slide-out #mobile-menu .britishflag,
    #slide-out #mobile-menu .britishflag > a {
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        font-size: 16px !important;
        background-image: none !important;
    }

    #slide-out .mobile-arrows {
        display: none !important;
    }

    .ss-mobile-submenu-toggle {
        grid-column: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        min-height: 56px;
        margin: 0;
        padding: 0;
        color: var(--ss-menu-muted);
        background: transparent !important;
        border: 0;
        border-inline-start: 1px solid var(--ss-menu-line);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .ss-mobile-submenu-toggle svg {
        transition: transform 160ms ease;
    }

    .ss-mobile-submenu-toggle[aria-expanded="true"] svg {
        transform: rotate(180deg);
    }

    #slide-out #mobile-menu li > .sub-menu {
        grid-column: 1 / -1;
        background: var(--ss-menu-soft) !important;
        border-top: 1px solid var(--ss-menu-line) !important;
    }

    #slide-out #mobile-menu li > .sub-menu[hidden] {
        display: none !important;
    }

    #slide-out #mobile-menu li > .sub-menu:not([hidden]) {
        display: block !important;
    }

    #slide-out #mobile-menu .sub-menu li {
        border-bottom-color: #eceeea;
    }

    #slide-out #mobile-menu .sub-menu li:last-child {
        border-bottom: 0;
    }

    #slide-out #mobile-menu .sub-menu a {
        min-height: 50px;
        padding-inline-start: 34px !important;
        color: #3d4744 !important;
        font-size: 15px !important;
        font-weight: 400;
    }

    #slide-out #mobile-menu .sub-menu .sub-menu a {
        padding-inline-start: 50px !important;
        font-size: 14px !important;
    }

    .ss-mobile-menu__footer {
        padding: 12px 16px max(12px, env(safe-area-inset-bottom));
        background: var(--ss-menu-surface);
        border-top: 1px solid var(--ss-menu-line);
    }

    .ss-mobile-menu__cta {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 48px;
        padding: 10px 18px;
        color: #fff !important;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.4;
        text-align: center;
        text-decoration: none;
        background: var(--ss-menu-primary);
        border: 1px solid var(--ss-menu-primary);
        border-radius: 12px;
    }

    .ss-mobile-menu__cta:hover,
    .ss-mobile-menu__cta:focus-visible {
        color: #fff !important;
        background: #083d37;
        outline: 3px solid rgba(11, 74, 67, 0.18);
        outline-offset: 2px;
    }

    body.ss-mobile-overlay-open .ss-cta {
        display: none !important;
    }
}

@media only screen and (max-width: 350px) {
    #theme-header .header-content,
    #wrapper.wide-layout .header-content,
    .ss-mobile-menu__header {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        padding-inline: 6px !important;
    }

    #slide-out-open.ss-mobile-menu-toggle,
    #ss-mobile-search-open.ss-mobile-search-toggle,
    .ss-mobile-menu__close {
        width: 44px !important;
        height: 44px !important;
    }

    #theme-header .header-content > .logo img {
        width: min(174px, 100%) !important;
    }

    .ss-mobile-menu__brand img {
        width: min(170px, 100%);
    }

    #slide-out .ss-mobile-menu__search,
    #slide-out .search-mobile.ss-mobile-menu__search,
    #ss-mobile-search .ss-mobile-menu__search,
    #ss-mobile-search .search-mobile.ss-mobile-menu__search {
        margin-inline: 12px;
    }

    #slide-out #mobile-menu li > a {
        padding-inline: 14px !important;
    }

    .ss-mobile-menu__footer {
        padding-inline: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #slide-out.ss-mobile-menu,
    #ss-mobile-search.ss-mobile-search,
    .ss-mobile-submenu-toggle svg {
        transition-duration: 0.01ms !important;
    }
}


/* ============================================================
   Sticky CTA bar + contact modal  (replaces old .sticky-container)
   Loaded at all widths; shown up to 1024px, hidden on desktop.
   ============================================================ */

/* --- Full-width single-background sticky bar --- */
.ss-cta{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 10px 14px;
  background: #004044;                 /* single background */
  box-shadow: 0 -2px 12px rgba(0,0,0,.18);
  direction: rtl;
}
.ss-cta__text{ margin: 0; display: flex; flex-direction: column; line-height: 1.4; color: #fff; text-align: right; }
.ss-cta__text strong{ font-size: 14px; }
.ss-cta__text span{ font-size: 11px; opacity: .85; }

/* button ends up on the visual LEFT (RTL + space-between) */
.ss-cta__btn{
  flex: 0 0 auto; border: 0; cursor: pointer;
  padding: 10px 20px; border-radius: 12px;   /* the radius you liked */
  font-weight: 700; font-size: 14px; font-family: inherit; color: #fff;
  background: #ff5e15;                        /* brand orange */
  transition: transform .15s ease, background-color .2s ease;
}
.ss-cta__btn:hover, .ss-cta__btn:focus-visible{ background: #e85310; }
.ss-cta__btn:active{ transform: scale(.97); }

/* --- Modal (bottom sheet, blurred backdrop) --- */
.ss-modal[hidden]{ display: none; }
.ss-modal{ position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-end; justify-content: center; }
.ss-modal__backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.ss-modal__panel{
  position: relative; width: 100%; max-width: 520px;
  max-height: 70vh; overflow-y: auto;              /* content ~40-50vh; scrolls if longer */
  background: #fff; border-radius: 16px 16px 0 0; padding: 22px 18px 26px;
  direction: rtl; text-align: center; animation: ss-modal-up .25s ease;
}
@keyframes ss-modal-up{ from{ transform: translateY(20px); opacity: 0 } to{ transform: none; opacity: 1 } }

/* obvious close X, top-left corner */
.ss-modal__close{
  position: absolute; top: 10px; left: 12px; width: 38px; height: 38px;
  border: 0; border-radius: 50%; background: #f0f0f0; color: #333;
  font-size: 24px; line-height: 1; cursor: pointer;
}
.ss-modal__close:hover{ background: #e2e2e2; }
.ss-modal__title{ margin: 4px 30px 16px; font-size: 15px; }
.ss-modal__note{ color: #ff5e15; font-size: 12px; margin: 10px 0 4px; }
.ss-modal__more{ display: inline-block; margin-top: 6px; font-size: 13px; color: #0073e6; text-decoration: underline; }

/* contact rows (bundled so they render on the front end) */
.ss-modal .short-cta{ display: flex; justify-content: space-between; max-width: 340px; margin: 0 auto 10px; background: #fff; border: 1px solid #00a500; border-radius: .7rem; overflow: hidden; }
.ss-modal .short-cta-text{ flex: 1; padding: 10px 12px; color: #000; text-decoration: none; align-self: center; }
.ss-modal .short-cta-phone{ letter-spacing: 1px; padding: 10px 12px; margin: 4px; background: #008000; color: #fff; text-decoration: none; border-radius: .55rem; direction: ltr; font-weight: 600; }

/* blinking dot for the note */
.blink-dot{ animation: ss-blink 1s steps(2, start) infinite; }
@keyframes ss-blink{ to{ visibility: hidden; } }

/* Show on phones + tablets, hide on large desktop */
@media (min-width: 1025px){ .ss-cta{ display: none; } }