/* =============================================================================
   etmaam-enhance.css
   طبقة تحسينات فوق قالب "إتمام العدلية" — إضافات فقط
   -----------------------------------------------------------------------------
   Additive polish layer for the Etmaam theme.

   Rules of this file:
     - It never restyles the brand. No new colours, no new type scale, no new
       spacing system - it reuses --second (#A29632) and --main (#222F57).
     - It only fills gaps the theme left open: keyboard focus, tap targets,
       motion preferences, and a few states that were never defined.
     - It is the last stylesheet loaded, so anything here wins on equal
       specificity. Removing the single <link> in header.tpl.php reverts
       every change below and nothing else.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   1. Keyboard focus
   The theme sets `outline: none` on every link and only leaves a browser
   default `dotted thin` outline behind, which is invisible against the gold
   and navy. Keyboard users currently cannot see where they are.
   :focus-visible means mouse users see nothing change.
   -------------------------------------------------------------------------- */

:root {
  --etmaam-focus: #A29632;
  --etmaam-focus-contrast: #ffffff;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid var(--etmaam-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* On the navy header and inside the footer, gold on dark is hard to see -
   a white ring with a gold halo reads on both. */
header#header:not(.fixed) a:focus-visible,
header#header:not(.fixed) [role="button"]:focus-visible,
header#header:not(.fixed) button:focus-visible,
footer a:focus-visible,
footer button:focus-visible,
footer input:focus-visible {
  outline-color: var(--etmaam-focus-contrast);
  box-shadow: 0 0 0 6px rgba(162, 150, 50, .45);
}

/* Form fields deserve a filled state, not just a ring. */
.wojo.form input:focus-visible,
.wojo.form textarea:focus-visible,
.wojo.form select:focus-visible,
#free_btn_form input:focus-visible,
#free_btn_form textarea:focus-visible,
#free_btn_form select:focus-visible {
  outline-offset: 0;
  border-color: var(--etmaam-focus);
}


/* -----------------------------------------------------------------------------
   2. Skip link
   First tab stop on the page. Off-screen until focused.
   -------------------------------------------------------------------------- */

.skip-link {
  position: fixed;
  top: 0;
  right: 50%;
  transform: translate(50%, -120%);
  z-index: 100000;
  padding: .75rem 1.5rem;
  font-family: 'Somar', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  background-color: var(--main, #222F57);
  border: 2px solid var(--second, #A29632);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: transform .2s ease;
}

.skip-link:focus {
  transform: translate(50%, 0);
  color: #fff;
}

/* The anchor the skip link lands on must not add a stray line box. */
#main-content {
  display: block;
  height: 0;
  overflow: hidden;
}


/* -----------------------------------------------------------------------------
   3. Anchor scrolling under the fixed header
   #header is `position: fixed; height: 80px`, so any in-page anchor used to
   land underneath it. scroll-margin-top pushes the target clear.
   -------------------------------------------------------------------------- */

:target,
[id]:target {
  scroll-margin-top: 100px;
}


/* -----------------------------------------------------------------------------
   4. Layout stability
   Paired with the width/height attributes the image optimizer adds. Scoped to
   [data-eo] so images that already size themselves are left completely alone.
   -------------------------------------------------------------------------- */

img[data-eo] {
  height: auto;
}


/* -----------------------------------------------------------------------------
   5. Tap targets
   WCAG asks for ~44px. On phones the social icons were 35px and several
   inline links under 30px. Padding grows the hit area without moving the
   icon, so nothing shifts visually.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  footer .wojo.small.simple.icon.button {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .wojo.dropdown a.item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  nav.wojo.menu > ul > li > a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Footer link rows sit at 23px tall; give the touch area room without
     changing the visible rhythm. */
  footer .custom-list li {
    padding: 10px 0;
  }
}


/* -----------------------------------------------------------------------------
   6. Footer legibility
   12px Arabic on a dark background is below comfortable reading size.
   13px with a slightly looser line keeps the same block proportions.
   -------------------------------------------------------------------------- */

footer .footer_logo_10 p.text-size-medium {
  font-size: 13px !important;
  line-height: 24px !important;
}

footer .custom-list,
footer .copyright .columns {
  font-size: 14px;
}

/* Links in the footer had no hover affordance other than an inline JS colour
   swap; underline on hover makes them read as links. */
footer .custom-list a:hover,
footer .custom-list a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}


/* -----------------------------------------------------------------------------
   7. Floating action buttons
   Both sat at fixed offsets that pushed them into the middle of small
   screens, and the WhatsApp button had no hover state at all.
   -------------------------------------------------------------------------- */

#whatsapp i {
  transition: transform .25s ease, box-shadow .25s ease;
}

#whatsapp:hover i,
#whatsapp:focus-visible i {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(42, 197, 112, .45);
}

/* The <a> itself collapses to 0x0 because its icon is absolutely positioned,
   so the focus ring had nothing to draw around. */
#whatsapp:focus-visible {
  outline: none;
}

#whatsapp:focus-visible i {
  outline: 3px solid var(--etmaam-focus-contrast);
  outline-offset: 3px;
}

#back-to-top {
  opacity: .55;
  transition: opacity .25s ease, transform .25s ease, background-color .25s ease;
}

#back-to-top:hover,
#back-to-top:focus-visible {
  opacity: 1;
  transform: translateY(-3px);
}

@media (max-width: 768px) {

  /* right: 85px put the button a quarter of the way across a 375px screen */
  #whatsapp {
    right: 16px;
    bottom: 16px;
  }

  #back-to-top {
    left: 16px;
    bottom: 16px;
  }
}


/* -----------------------------------------------------------------------------
   8. Reduced motion
   The site runs WOW.js entrance animations, two auto-playing Swipers, a
   1s smooth-scroll and an infinite WhatsApp pulse. Users who ask their OS
   for less motion should get a still page.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  /* WOW.js hides elements and reveals them on scroll; if the animation is
     suppressed they must still be visible. */
  .wow,
  [data-wanimate] {
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }

  #whatsapp::before,
  #whatsapp::after {
    display: none;
  }
}


/* -----------------------------------------------------------------------------
   9. Interactive affordances
   Small, brand-coloured states the theme never defined.
   -------------------------------------------------------------------------- */

.free_btn {
  -webkit-tap-highlight-color: transparent;
}

/* The consultation trigger is a <span>; without this it shows a text caret. */
.free_btn,
[role="button"] {
  user-select: none;
}

/* The "ماذا نقدّم لكم" rows are pinned to width: 426px, which is wider than a
   375px phone - the tail of each line was being clipped by the
   `overflow-x: hidden` on <main>. Cap it to the column instead. */
@media (max-width: 768px) {

  .service-item {
    width: 100%;
    max-width: 426px;
  }

  .service-description {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Selection in brand gold instead of the browser blue. */
::selection {
  background-color: rgba(162, 150, 50, .28);
  color: var(--main, #222F57);
}

/* Scrollbar in brand colours on the browsers that allow it. */
@supports (scrollbar-color: auto) {
  html {
    scrollbar-color: var(--second, #A29632) rgba(34, 47, 87, .08);
  }
}


/* -----------------------------------------------------------------------------
   10. Print
   People print legal pages. Drop the furniture and keep the content.
   -------------------------------------------------------------------------- */

@media print {

  #preloader,
  #whatsapp,
  #back-to-top,
  #header,
  .skip-link,
  #gdpr-cookie-message,
  .swiper-button-next,
  .swiper-button-prev {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  main {
    padding-top: 0 !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 11px;
    word-break: break-all;
  }
}


/* -----------------------------------------------------------------------------
   11. Utility
   -------------------------------------------------------------------------- */

/* Visually hidden but announced by screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* -----------------------------------------------------------------------------
   إخفاء مؤقّت: قسم الفريق في صفحة خدماتنا
   صور الأعضاء كانت مأخوذةً من الشّبكة ولا تخصّ المكتب، فحُذفت من المستودع
   وأُخفي القسم إلى أن تُرفع صور المكتب وتُكتب الأسماء الحقيقيّة.
   القسم موجود في محتوى الصّفحة داخل قاعدة البيانات، لا في القالب، فلا يمكن
   حذف الأسماء من هنا - راجع ملفّ team-placeholder-names.sql.

   Temporary. Delete this block to bring the section back.
   -------------------------------------------------------------------------- */

section.team_page_10 {
  display: none !important;
}