/* Footer: app pitch with the download button on the start side, three link columns (services,
   cities, contact), a legal bar, and the H10 wordmark set very large in a shade just above the
   ground, cropped by the page bottom. Dark ground: yellow may be text here (base.css rule).

   Links: muted at rest, white on hover (150ms). */

.site-footer {
  --gutter: clamp(24px, 5vw, 96px);
  overflow: hidden;
  padding: clamp(64px, 9vh, 96px) var(--gutter) 0;
  background: var(--h10-ink);
  color: var(--text-on-dark);
}
.site-footer__inner { max-width: 1760px; margin-inline: auto; }

.site-footer__top { display: flex; justify-content: space-between; gap: 48px 64px; flex-wrap: wrap; }
.site-footer__app { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 400px; }
.site-footer__app h2 { margin: 0; font-size: 28px; line-height: 1.5; font-weight: 700; }
/* the heading's H10 name is the wordmark: .title-with-logo / .title-logo (base.css) */
.site-footer__app p { margin: 0 0 8px; font-size: 15px; line-height: 1.75; color: var(--dim-on-dark); }

/* social profiles (from the current h10.com.sa): round outline buttons; hover fills yellow */
.site-footer__socials { display: flex; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.site-footer a.site-footer__social {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--text-on-dark);
  box-shadow: inset 0 0 0 1px var(--line-on-dark);
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 160ms var(--ease-out);
}
.site-footer__social svg { width: 20px; height: 20px; }
.site-footer a.site-footer__social:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .site-footer a.site-footer__social:hover { background: var(--h10-yellow); color: var(--h10-ink); box-shadow: inset 0 0 0 1px var(--h10-yellow); }
}

.site-footer__cols { display: flex; gap: clamp(40px, 6vw, 96px); flex-wrap: wrap; }
.site-footer__col { display: flex; flex-direction: column; gap: 12px; min-width: 120px; }
.site-footer__col h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.site-footer__col ul { display: contents; list-style: none; }
.site-footer a:not(.arrow-btn, .site-footer__social) { color: var(--dim-on-dark); text-decoration: none; font-size: 15px; transition: color 150ms ease; }

.site-footer__legal {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px;
  margin-top: clamp(48px, 7vh, 72px); padding-top: 24px;
  border-top: 1px solid var(--line-on-dark);
  font-size: 14px; color: var(--dim-on-dark);
}
.site-footer__legal nav { display: flex; gap: 24px; }
.site-footer__legal a:not(.arrow-btn) { font-size: 14px; }

@media (hover: hover) and (pointer: fine) {
  .site-footer a:not(.arrow-btn, .site-footer__social):hover { color: #FFFFFF; }
}

/* the big wordmark: decorative, cropped by the bottom of the page */
.site-footer__mark {
  width: min(100%, 1400px); margin: clamp(32px, 5vh, 56px) auto 0;
  aspect-ratio: 682 / 170;                          /* shows the letters down to mid-dot; the page bottom crops the rest */
  overflow: hidden;
  color: #23272D;
}
.site-footer__mark svg { display: block; width: 100%; height: auto; }
.site-footer__mark .dot { fill: var(--h10-yellow); }

@media (max-width: 900px) {
  .site-footer { --gutter: 16px; padding-top: 56px; }
  .site-footer__cols { gap: 32px 40px; }
  .site-footer__legal { flex-direction: column; }
}