/* =============================================================================
   Tokens and the services index — LOADED ON EVERY PAGE
   =============================================================================

   Split out of service-page.css because that file is only enqueued where a service is in
   context. Two things here are not:

     - the footer service list, which is on every page of the site
     - the card grid on /خدماتنا/, which is a page with no service of its own

   Both rendered unstyled until this was separated. The tokens travel with them because the
   index rules read them, and service-page.css depends on this handle so it gets them too.
   ========================================================================== */

:root {
  /* The design's palette. Named by role, so a card reads as "surface" not "#fff". */
  --imad-ink: #0e1a2b;          /* the dark navy of the hero and the dark cards */
  --imad-ink-soft: #16263c;     /* a step lighter, for cards on the dark ground */
  --imad-ink-line: #24354e;     /* hairlines on dark */
  --imad-accent: #f47c20;       /* the orange */
  --imad-accent-soft: #fff2e6;  /* the orange at 8%, for pills and icon plates */
  --imad-wa: #25d366;           /* WhatsApp green, fixed by the brand */
  --imad-wa-dark: #1da851;
  --imad-page: #f6f7f9;         /* the page ground behind the light sections */
  --imad-surface: #ffffff;
  --imad-line: #e8eaee;
  --imad-text: #1d2733;
  --imad-muted: #6b7683;

  --imad-radius: 14px;
  --imad-radius-lg: 22px;
  --imad-shadow: 0 2px 10px rgb(14 26 43 / 6%);
  --imad-shadow-lg: 0 16px 40px rgb(14 26 43 / 10%);
}
/* =============================================================================
   The services index — the card grid on /خدماتنا/ and the footer link list

   Both read the taxonomy rather than being typed out, so a trade added later appears in
   them without an edit. See inc/service-index.php.
   ========================================================================== */

.imad-idx {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  width: 100%;
}

.imad-idx-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--imad-radius);
  overflow: hidden;
  background: var(--imad-surface);
  border: 1px solid var(--imad-line);
  box-shadow: var(--imad-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}

.imad-idx-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--imad-shadow-lg);
}

/* A fixed ratio so six cards line up whatever the source photographs are shaped like. */
.imad-idx-card__pic {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.imad-idx-card__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.imad-idx-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 24px;
  flex: 1 1 auto;
  text-align: center;
}

.imad-idx-card__body h3 {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  color: var(--imad-text);
}

.imad-idx-card__body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--imad-muted);
  /* Pushes the button to the bottom so the row of buttons lines up across cards whose
     descriptions differ in length. */
  flex: 1 1 auto;
}

.imad-idx-card__btn {
  align-self: center;
  padding: 11px 30px;
  border-radius: 10px;
  background: var(--imad-accent);
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  transition: background-color .15s ease;
}

.imad-idx-card__btn:hover,
.imad-idx-card__btn:focus-visible {
  background: #e06d12;
  color: #fff;
}

/* The footer list.
 *
 * `color: inherit` was wrong here: the widget it replaced carried its own light colour, and
 * inheriting gave dark text on the footer's dark ground — legible in the editor, nearly
 * invisible on the page. The colour is stated, and the chevron matches the "روابط سريعة"
 * column beside it so the two read as one footer rather than two.
 */
.imad-idx-links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.imad-idx-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #cfd7e2;
  text-decoration: none;
  font-size: 14.5px;
  line-height: 1.6;
  transition: color .15s ease;
}

.imad-idx-links a::before {
  content: "\203A";
  color: var(--imad-accent);
  font-size: 18px;
  line-height: 1;
}

.imad-idx-links a:hover,
.imad-idx-links a:focus-visible {
  color: var(--imad-accent);
}

@media (max-width: 1024px) {
  .imad-idx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .imad-idx { grid-template-columns: 1fr; }
}