/* ===========================================================================
   THE site footer — one stylesheet, one look, every page.

   WHY THIS FILE EXISTS
     lib/sitefoot.py has emitted the same `.lx-foot` markup on every page since
     the four hand-copied footers were merged into it. Its CSS never made the
     same trip: the rules lived — and only lived — inside templates/home.html's
     inline <style>. So the landing looked right and EVERY other page (category,
     document, study, author, /search, بحث شامل) rendered the markup naked: the
     column links ran together on one line with no columns, no rule, no padding.

     Same remedy as the header. One file, linked after the page's own CSS on
     every page that renders sitefoot.render_lx() — which, since /login and
     /account gave up their separate black `.st-foot`, is every page there is.

   IT ASSERTS ITS OWN TYPE. IT INHERITS NOTHING.
     Linking this file everywhere was not enough to make the footer LOOK the
     same everywhere, because most of what you see in a footer is inherited, and
     each host page inherits something different. Measured, one footer, five
     pages:

         landing      line-height 33.2px   blurb 17.95px
         shell pages  line-height 26.4px   blurb 16px
         /search      line-height 25.6px   blurb 16px
         بحث شامل      line-height NORMAL   blurb 16px   <- ~1.2, text overlapped
         /login       line-height 33.2px   blurb 15px

     بحث شامل sets no body line-height at all, so the blurb's three lines ran
     into each other. That is the "different footer" this file was meant to
     prevent. So every property that decides the footer's SIZE — font-family,
     font-size, line-height, weight, margins — is stated here explicitly rather
     than left to the page. Nothing below reads a var(): the tokens resolve to
     different values (or to nothing) depending on which stylesheets the host
     page happens to load, and a footer that is "the same everywhere" cannot be
     built on values that move.

   THE FONT STACKS ARE BILINGUAL BY FALL-THROUGH
     Latin glyphs come from the first family, Arabic from the second — the
     browser falls through per GLYPH, so one stack serves both languages and
     there is no html[lang] switch to keep in step. Fraunces has no Arabic, so
     Arabic headings land on Almarai, which is what the landing already did via
     --font-display -> --font-serif-ar and what every other page did NOT.
   ========================================================================= */

.lx-foot{
  background:#FFFFFF;
  color:rgba(22,20,15,.60);
  border-block-start:1px solid rgba(20,18,12,.13);
  padding-block: clamp(2.25rem,3.2vw,3rem) 1.75rem;
  padding-inline: clamp(1rem,3vw,2.75rem);

  /* --- asserted, never inherited (see the note above) --- */
  font-family:"Inter","Almarai","Tajawal","Segoe UI",Tahoma,sans-serif;
  font-size:1rem;
  font-weight:400;
  line-height:1.6;
  letter-spacing:normal;
  text-align:start;
}

/* Assert, don't inherit. بحث شامل sets `text-decoration:underline` on every <a>
   in the page, which the footer picked up the moment it started being styled at
   all — the same footer must look the same on every host page. */
.lx-foot a{ text-decoration:none; color:inherit; }

.lx-foot__top{
  max-inline-size:1240px; margin-inline:auto;
  display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:1.75rem 2rem;
}

/* --- brand column -------------------------------------------------------- */
.lx-foot__brand .lx-brand{ display:inline-flex; align-items:center; gap:.55rem; }
.lx-foot__brand .lx-brand__mark{ color:#16140F; }
/* Smaller than the header's 44px: this is a sign-off, not a masthead. */
.lx-foot__brand .lx-brand__logo{ block-size:34px; inline-size:auto; display:block; }
/* The landing swaps the whole body to `theme-dark` on scroll, and
   site-header.css keys the logo variant off that body class — which would hand
   the still-WHITE footer the white-on-dark logo. The footer is white on every
   page and in every theme, so it always takes the light variant. Three classes
   deep so it outranks `body.theme-dark .lx-brand__logo--dark`. */
.lx-foot .lx-foot__brand .lx-brand__logo--light{ display:block; }
.lx-foot .lx-foot__brand .lx-brand__logo--dark{ display:none; }

.lx-foot__blurb{
  margin:.5rem 0 0; max-inline-size:34ch;
  font-size:.875rem; line-height:1.6; font-weight:400;
}

/* --- link columns -------------------------------------------------------- */
.lx-foot__cols{ display:flex; flex-wrap:wrap; gap:1.5rem clamp(1.5rem,3.4vw,3.25rem); }

.lx-foot__col h3{
  margin:0 0 .55rem;
  color:#16140F;
  font-family:"Fraunces","Almarai","Tajawal",Georgia,serif;
  font-size:.9rem; font-weight:700; line-height:1.3; letter-spacing:normal;
}
/* `display:block` is what stacks the links into a column. Without this file they
   were inline <a>s with no separator, which is the run-together text. */
.lx-foot__col a{
  display:block; color:rgba(22,20,15,.60);
  padding-block:.18rem; font-size:.85rem; line-height:1.5;
  transition:color .25s cubic-bezier(.16,1,.3,1);
}
.lx-foot__col a:hover{ color:var(--lx-accent); }

/* --- baseline ------------------------------------------------------------ */
.lx-foot__base{
  max-inline-size:1240px; margin-inline:auto;
  margin-block-start:1.75rem;
  padding-block-start:.9rem;
  border-block-start:1px solid rgba(20,18,12,.13);
  display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:.6rem; font-size:.78rem; line-height:1.5;
}

/* The subscription agreement, sitting in the base bar beside the copyright.
   Underlined rather than coloured: it is a legal link, not a call to action,
   and the base bar is deliberately the quietest row on the page. */
.lx-foot__terms{
  color:inherit; text-decoration:underline; text-underline-offset:.22em;
  text-decoration-color:rgba(20,18,12,.35);
  transition:color .18s ease, text-decoration-color .18s ease;
}
.lx-foot__terms:hover{ color:var(--lx-accent,#981B31); text-decoration-color:currentColor; }
body.theme-dark .lx-foot__terms{ text-decoration-color:rgba(238,234,224,.4); }

/* Narrow screens: the brand column stops competing with the links for the row
   and the two halves stack, rather than the links wrapping one word per line. */
@media (max-width:720px){
  .lx-foot{ padding-block:2rem 1.5rem; }
  .lx-foot__top{ gap:1.5rem; }
  .lx-foot__brand{ flex:1 1 100%; }
  .lx-foot__cols{ gap:1.25rem 2rem; }
}