/* ==========================================================================
   Al-Jebrini — mobile fixes (loaded last in template/master.blade.php)
   Phones only (Elementor mobile breakpoint ≤ 767px), plus a global guard
   against sideways scrolling. Remove this file to undo.
   ========================================================================== */

html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }

/* Album & video pages force body{direction:rtl} even in English, which moves punctuation
   (".a modern design", "**Ministry of Health"). Let each line take its direction from its own text. */
.container > header :is(h1, h2, h3, p),
.grid-container :is(h1, h2, h3, h4, h5, p, .card-title) { unicode-bidi: plaintext; }

@media (max-width: 767px) {

  /* ---------- Header: one compact row (logo · menu · language) ---------- */
  .elementor-element-bd5fbfd { display: none !important; }                 /* hours + social bar (also in footer) */
  .elementor-element-2e18b12,
  .elementor-element-f05fe47,
  .elementor-element-d062241 { display: none !important; }                 /* email / phone / address boxes (also in footer) */

  :has(> .elementor-element-f0b989b):has(> .elementor-element-8299256) {
    display: flex !important; align-items: center; flex-wrap: nowrap;
    background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.06);
  }
  .elementor-element-f0b989b { flex: 0 0 auto; width: auto !important; padding: 8px 0 8px 12px !important; margin: 0 !important; }
  [dir="rtl"] .elementor-element-f0b989b, .elementor-element-f0b989b:dir(rtl) { padding: 8px 12px 8px 0 !important; }
  .elementor-element-f0b989b > .elementor-container,
  .elementor-element-66e04e7, .elementor-element-66e04e7 > .elementor-widget-wrap { width: auto !important; padding: 0 !important; margin: 0 !important; }
  .elementor-element-46b31e2 { margin: 0 !important; }
  .elementor-element-46b31e2 img { height: 52px !important; width: auto !important; max-width: none !important; }
  .elementor-element-f0b989b .elementor-shape { display: none !important; }

  .elementor-element-8299256 { flex: 1 1 auto; min-width: 0; padding: 0 !important; margin: 0 !important; background: none !important; }
  .elementor-element-8299256 .elementor-shape { display: none !important; }
  .elementor-element-7a9e31c > .elementor-container { flex-wrap: nowrap !important; align-items: center; justify-content: flex-end; }
  .elementor-element-a39dd6d { width: auto !important; flex: 0 0 auto; }
  .elementor-element-4aadb9c { width: 52px !important; max-width: 52px; flex: 0 0 52px; }
  .elementor-element-c5f5a1c { width: 52px !important; }
  .elementor-element-7a9e31c { padding: 0 8px !important; }
  /* dropdown: full-screen overlay menu with a large ✕ (the toggle floats above it) */
  .elementor-element-c5f5a1c nav.hfe-dropdown {
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
    width: 100vw !important; border-radius: 0 !important; z-index: 99990 !important;
    background: #103371 !important;
  }
  .elementor-element-c5f5a1c nav.hfe-dropdown.menu-is-active {
    bottom: 0 !important; height: 100vh !important; height: 100dvh !important; max-height: none !important;
    overflow-y: auto; padding: 84px 0 40px !important;
  }
  .elementor-element-c5f5a1c nav.hfe-dropdown .hfe-nav-menu { background: transparent !important; }
  .elementor-element-c5f5a1c nav.hfe-dropdown * { border-radius: 0 !important; }
  .elementor-element-c5f5a1c nav.hfe-dropdown .menu-item a.hfe-menu-item {
    font-size: 21px !important; padding: 17px 28px !important; border-bottom: 1px solid rgba(255,255,255,.08);
    background: transparent !important; color: #fff !important; border-radius: 0 !important;
  }
  .elementor-element-c5f5a1c nav.hfe-dropdown .menu-item.current-menu-item a.hfe-menu-item,
  .elementor-element-c5f5a1c nav.hfe-dropdown .menu-item a.hfe-menu-item:hover { background: #3d8bd0 !important; }
  /* the ✕ : fixed at the top corner, above the overlay */
  .elementor-element-c5f5a1c .hfe-nav-menu__toggle.hfe-active-menu {
    position: fixed !important; top: 14px !important; inset-inline-end: 16px; z-index: 99999 !important;
    width: 48px; height: 48px; border-radius: 50%; background: #fff !important;
    display: grid !important; place-items: center; box-shadow: 0 8px 20px -8px rgba(0,0,0,.5);
  }
  .elementor-element-c5f5a1c .hfe-nav-menu__toggle.hfe-active-menu .hfe-nav-menu-icon,
  .elementor-element-c5f5a1c .hfe-nav-menu__toggle.hfe-active-menu i,
  .elementor-element-c5f5a1c .hfe-nav-menu__toggle.hfe-active-menu svg { color: #103371 !important; fill: #103371 !important; font-size: 22px !important; }
  html:has(.elementor-element-c5f5a1c .hfe-nav-menu__toggle.hfe-active-menu),
  html:has(.elementor-element-c5f5a1c .hfe-nav-menu__toggle.hfe-active-menu) body { overflow: hidden !important; }
  .elementor-element-a39dd6d { order: -1; }
  .elementor-element-0466e8b .elementor-button { padding: 9px 14px !important; font-size: 13px !important; min-height: 0 !important; border-radius: 20px !important; }
  .elementor-element-0466e8b { margin: 0 !important; }

  /* ---------- Headings sized for phones ---------- */
  .elementor-element-3b6c9f6 .ekit-heading--title { font-size: 32px !important; line-height: 1.25 !important; }
  .elementor-element-ede38b9 .elementor-heading-title { font-size: 24px !important; line-height: 1.3 !important; }
  .elementor-element-ede38b9 .elementor-heading-title * { font-size: 26px !important; line-height: 1.3 !important; }
  .elementor-element-c719431 .elementor-heading-title,
  .elementor-element-8f278e5 .elementor-heading-title,
  .elementor-element-06e65a9 .elementor-heading-title,
  .elementor-element-6c47292 .elementor-heading-title,
  .elementor-element-4ffbdc5 .elementor-heading-title { font-size: 28px !important; line-height: 1.3 !important; }
  .elementor-element-e88661d .elementor-heading-title { font-size: 30px !important; line-height: 1.25 !important; }
  .elementor-widget-heading h2.elementor-heading-title { overflow-wrap: anywhere; }

  /* ---------- Inner-page banners: show the whole artwork (text sits on the right) ---------- */
  .elementor-element-ac3e944,
  .elementor-element-a030c06,
  .elementor-element-f7ad14b,
  .elementor-element-648719d {
    min-height: 0 !important; height: auto !important; padding: 0 !important;
    aspect-ratio: 10 / 3; background-size: cover !important; background-position: center !important;
  }

  /* ---------- Footer: don't slide over the section above; readable statement ---------- */
  .elementor-element-12c62b9 { margin-top: 0 !important; }
  .elementor-element-08fc17e .elementor-heading-title { font-size: 19px !important; line-height: 1.5 !important; text-align: center !important; }

  .elementor-element-73e6c7a { width: 100% !important; }
  .elementor-element-73e6c7a > .elementor-widget-wrap { padding: 36px 22px 0 !important; }
  .elementor-element-08fc17e { width: 100% !important; max-width: 100% !important; margin: 0 !important; }

  /* ---------- Photo album (scoped: only the album page has #photoModal; videos reuse .grid-container/.card) ---------- */
  body:has(#photoModal) .container > .elementor-button-wrapper { flex-wrap: wrap; justify-content: center; gap: 8px; padding: 4px 0 8px; }
  body:has(#photoModal) .container > .elementor-button-wrapper > a.elementor-button { margin: 0 !important; }
  body:has(#photoModal) .grid-container { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  body:has(#photoModal) .grid-container > .card { height: 190px !important; }
  body:has(#photoModal) .grid-container > .card .card-title {
    font-size: 13px !important; line-height: 1.45; padding: 6px 8px !important;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    max-height: calc(1.45em * 3 + 12px); unicode-bidi: plaintext;
  }
  body:has(#photoModal) .modal .modal-content { width: 94% !important; }

  /* ---------- Tighter vertical rhythm (only where no overlapping section depends on the padding) ---------- */
  .elementor-element-a5dc988 { padding-top: 70px !important; }
  .elementor-element-896df92 { padding-bottom: 60px !important; }
  .elementor-element-fdf8872 { padding-top: 50px !important; padding-bottom: 60px !important; }
  .elementor-element-1e7a81d { padding-top: 50px !important; }
  .elementor-element-12c62b9 { padding-bottom: 60px !important; }
  .elementor-element-0f2fdde { padding-top: 60px !important; }
  .elementor-element-25cbdcb { padding-bottom: 60px !important; }
  .elementor-element-4a2467a { padding-top: 40px !important; }
  .elementor-element-c76d570 { padding-bottom: 50px !important; }
  .elementor-button { min-height: 44px; }

  /* ---------- Blog article page ---------- */
  .elementor-element-c76d570 { padding-top: 24px !important; }
  .elementor-element-28c3f55 img { border-radius: 18px; width: 100%; height: auto; }
  .elementor-element-b8720fa .elementor-heading-title { font-size: 25px !important; line-height: 1.4 !important; padding: 18px 16px !important; }
  .elementor-element-805a7e2 .elementor-widget-container,
  .elementor-element-805a7e2 p { font-size: 16.5px !important; line-height: 1.85 !important; color: #2f3644 !important; text-align: start !important; }
  .elementor-element-805a7e2 p { margin-bottom: 1.1em; }
  .elementor-element-02dbaa7 .elementor-heading-title { font-size: 22px !important; }
  .elementor-element-65e4aa8 .elementor-heading-title { font-size: 26px !important; line-height: 1.3 !important; }

  /* ---------- Blogs: search box + row gutters ---------- */
  .elementor-element-a26ad05 input { font-size: 16px !important; height: auto !important; min-height: 48px; }
  .post-items.row { margin-left: 0 !important; margin-right: 0 !important; }
}