/* The footer under every page, the design system's (.al-footer), as
   arabesquelabs.com's: the studio's lockup and the links on one line, the
   legal lines under them. hunt gives it the page's gutter. */
.site-foot { padding-inline: 2rem; }
.foot-brand { color: var(--al-color-text); text-decoration: none; }
.al-footer__legal p { margin: 0; line-height: 1.6; }
/* English, in an Arabic page: still left to right, set to the page's side. */
[dir="rtl"] .al-footer__legal [dir="ltr"] { text-align: right; }
@media (max-width: 52rem) {
  /* One column, not wrapping: the legal line's flex-basis (100%, for a row)
     would otherwise wrap it into a second column, off a phone's screen. */
  .site-foot { padding-inline: 1rem; flex-direction: column; flex-wrap: nowrap; }
}

/* Who made hunt and what it is, beside three columns of links; the legal
   lines under them. */
.foot-about { max-width: 22rem; }
.foot-blurb { margin: 1rem 0 0; font-size: var(--al-text-sm); line-height: 1.6; color: var(--al-color-text-muted); }
/* The attribution badge, as an image: the one for the theme in use. */
.foot-attribution { display: inline-block; margin-top: 1.25rem; line-height: 0; border-radius: var(--al-radius-full); }
.foot-attribution img { block-size: auto; max-inline-size: 100%; }
.foot-attribution__on-dark { display: none; }
:root[data-theme="dark"] .foot-attribution__on-light { display: none; }
:root[data-theme="dark"] .foot-attribution__on-dark { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .foot-attribution__on-light { display: none; }
  :root:not([data-theme="light"]) .foot-attribution__on-dark { display: inline; }
}
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(9rem, auto)); gap: 2rem 4rem; }
.foot-cols h2 { margin: 0 0 0.9rem; font-size: var(--al-text-sm); font-weight: 500; color: var(--al-color-text); }
.foot-cols .al-footer__links { flex-direction: column; gap: 0.6rem; }
.site-foot .al-footer__legal { margin-top: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--al-color-line); }
@media (max-width: 52rem) {
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}