/* ==========================================================================
   Footer — one card, one definition, twenty-six pages.

   Before this file the site had three unrelated footers:

     index.html      a socials row plus three text items, wrapped in .wrap
                     (1080px) while the content column is 1180px — so the
                     footer sat 164px narrower than everything above it and
                     its edges never lined up with the page.
     blog.html       the same three items with no socials and no wrapper at
                     all, at 12px instead of 12.5px, and a 50px-tall footer
                     against index's 110px.
     24 post pages   a single centred line of text from a different
                     stylesheet, with no privacy link and no socials.

   All twenty-six are now this component. The only per-page difference is
   --foot-inset, so the card is exactly as wide as the bar above it: 20px in
   under the home page, 12px under the blog list, 0 under an article, each
   because that page's own header uses those numbers. A shared file rather than
   a block copied into main.css/blog.css/blog-post.css, because three copies of
   the same card is exactly the drift that produced the mess above.
   ========================================================================== */

:root {
  /* --foot-width and --foot-inset are gone. The card's width is --band-w now,
     shared with the header pill, so there is nothing left to set per page. */
}

/* Fixed to the bottom of the viewport, mirroring the header's position:sticky
   at the top, so the two bands stay in place in every condition rather than only
   at the end of the document. --foot-fixed-h is read by tokens.css to pad the
   body's bottom edge, otherwise the last line of every page sits underneath. */
footer {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  /* The 20px below the card is the mirror of the header's 20px top offset. The
     sides follow the header's own padding — 12px by default, 20px from 768px up
     — because the card is centred in --band-w and any side padding here narrows
     it away from the bar above.

     That inset was `var(--head-inset, 12px)`: a named token with a 12px literal
     behind it, while the default content gutter is 16px. So the fallback was
     already 4px narrower than the text it is supposed to frame, on any page that
     did not publish --head-inset — and privacy.css was the one page that did not.
     The fallback now reads the page's own gutter, so a page that forgets to
     publish the token still lines up instead of quietly being 4px or 8px out, and
     the literal is gone. --head-inset stays, because the reading pages narrow
     their gutter to 20px and the header's own bar is inset by that value. */
  padding: 0 var(--head-inset, var(--gutter)) 20px;
  pointer-events: none;
  /* No border-top: a hairline above the footer read as a stray rule cutting
     the page in half. The card below is a self-contained component instead. */
}

/* Only the card takes clicks. Without this the footer element covers a strip of
   the viewport 20px taller than the card and swallows text selection and
   pointer events on whatever scrolls under it. */
.foot-inner {
  pointer-events: auto;
}

/* A row at every width, not just above 700px. The card is a fixed band pinned
   to the bottom of the viewport, and its height has to equal the header's
   --band-h in every condition. Stacked vertically it was 125px on a 390px phone
   and 166px at 320px — a fixed band eating 15-26% of the screen — and no amount of
   footer.css could reconcile that with a 60px header. One row everywhere makes
   the equality structural instead of a per-breakpoint coincidence.

   At narrow widths the two halves share the line and the legal text wraps
   beneath the social row if it has to; the row is space-between so the socials
   stay at the start edge and the text at the end. */
/* The card and the header pill are the same width, from --band-w in tokens.css.
   The footer was capped to the content column (1180px) while the header ran the
   full width, and then both were stretched to the full width — which made the
   card a 1560px bar on a wide screen. Both are now the same compact width
   instead, so they read as a matched pair. */
.foot-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0 28px;
  box-sizing: border-box;
  width: var(--band-w);
  max-width: 100%;
  margin-inline: auto;
  /* An explicit height, like the article bar, and the same variable the header
     pill reads, so the two cannot drift apart again. 60px is the header's size
     on the live site (mobinkabir.ir: div.topbar-inner measures 1168x60). The
     card used to be 53.6px rather than 54 because the height came out of the
     padding and the icon's own size, so a sub-pixel difference in the icon's
     rendered height moved the card and left it 0.4px off the header. */
  height: var(--band-h);
  /* 9px, not 10: 9 + 34 (the icon) + 9 = 52, plus the 1px border on each side
     the component already had = 54, which was the header pill's height then.
     The card is 60px now, so the padding is 12 and the content sits centred
     instead — the flex centring already handled it, the padding just needs to
     stop being tight against the taller box. */
  padding: 12px 17px;
  /* Glass, and the same three declarations the header pill makes: the surface is
     --header-bg, the border --header-border, the blur --glass-blur. The card
     used to be an opaque --panel with a --line border and no blur at all, so it
     was the one solid surface in a set of three otherwise translucent ones — the
     footer read as a different product from the header sitting 60px above it.

     --header-bg rather than a colour of its own, on purpose: that token is
     already the right alpha in both themes, and naming it here means the two
     bands cannot drift apart again the moment one of them is retinted. */
  border: 1px solid var(--header-border);
  /* 999px, not 14px, and for the same reason the header pill uses it: the card
     is exactly --band-h tall, so 999px makes every corner a true half-circle and
     the two bands read as one shape. At 14px the footer was a rounded rectangle
     60px below a full pill of identical width and height — the one property on
     this card that still said "different object" after the surface, the border,
     the blur, the width and the height had all been made to match the header. */
  border-radius: 999px;
  background-color: var(--header-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  /* The lift the card had before, kept in scale with the other two surfaces.
     --shadow-1 was the token for a card sitting on the page; this one is for a
     panel floating 20px above the viewport's bottom edge, so it needs a
     direction and a little more reach to read as detached from the edge. */
  box-shadow: var(--glass-shadow);
}

/* ---------- social row ---------- */

.foot-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

/* 34px down to 26px below 700px. Seven of them plus six 5px gaps need 212px,
   and a 320px viewport leaves 284px inside the card, so 34px made the row wrap
   to two lines and tripled the band's height. 26px is still above the 24px
   WCAG 2.5.8 minimum for a target. */
.foot-grid a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  text-decoration: none;
  transition: border-color .15s, color .15s, background-color .15s, transform .15s;
}

/* 30px on the sidebar for the same rhythm; 34px here because this row is
   centred in a much wider card, where 30px reads as a row of specks. Both are
   above the 24px WCAG 2.5.8 minimum for a target size. */
.foot-grid a svg {
  width: 16px;
  height: 16px;
}

.foot-grid a:hover,
.foot-grid a:focus-visible,
.foot-grid a:active {
  border-color: var(--tag-ink);
  color: var(--tag-ink);
  background-color: var(--signal-dim);
  transform: translateY(-2px);
}

/* Brand fill per network, matching the sidebar and the port grid. The rule has
   to name all three states: leave :active out and a pressed link falls back to
   the resting style, showing no feedback at all. */
.foot-grid a[data-platform] {
  color: var(--brand-ink);
}

.foot-grid a[data-platform]:hover,
.foot-grid a[data-platform]:focus-visible,
.foot-grid a[data-platform]:active {
  border-color: transparent;
  background-color: var(--brand);
  color: var(--brand-on);
}

/* ---------- legal row ---------- */

/* LTR direction, and the row itself. This is a band that has to match the
   header's height, and on a phone viewport a fixed band is expensive: the
   social row and three stacked text lines came to 154px of card, which is 18%
   of an 844px screen permanently unavailable. Laying the legal items out
   horizontally lets them wrap into two short lines instead of three tall ones,
   and dir=ltr keeps the separator dots and the bidi order of a mixed
   Persian/English line predictable. */
/* The line-height is fixed, not inherited. This row is the card's tallest child
   on narrow screens, and the card's height has to equal the header's --band-h, so
   its height cannot be allowed to drift with the font's own metrics — inherited
   line-height produced 54, 55, 56 and 73px across the twenty-six pages and four
   languages, which meant the footer and header were not the same size in the
   condition the owner asked for. 16px is the same for all of them. */
.foot-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 12px;
  text-align: center;
  color: var(--muted-2);
  font-size: 12.5px;
  line-height: 16px;
}

.foot-row p {
  margin: 0;
}

.foot-row a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color .15s;
}

/* The legal row is pinned to line-height:16px because the card's height has to
   equal the header's --band-h, so padding the link directly would stretch the
   band past 60px and break the one thing the two bands have to share. The link
   measured 63x16, which is under the 24px WCAG 2.5.8 minimum in the height
   that matters most on a phone.

   So the hit area is grown with a pseudo-element instead: it is positioned
   absolutely and pulled 14px past each edge, which enlarges the clickable and
   hover region without contributing a single pixel to the box the card is
   sized from. The row is the positioning context, and the links are
   inline — which is what lets the ::after participate in the same inline box —
   so nothing else on the page moves. */
.foot-row {
  position: relative;
}

.foot-row a {
  position: relative;
}

.foot-row a::after {
  content: "";
  position: absolute;
  inset: -14px -10px;
}

.foot-row a:hover,
.foot-row a:focus-visible {
  color: var(--signal);
}

.foot-row .credit {
  font-family: var(--mono);
  direction: ltr;
  font-size: 11.5px;
}

/* ---------- one band, every width ---------- */

/* Narrow screens: the social row shrinks to 26px targets and a 5px gap so all
   seven fit on one line, and the legal text drops to 11px so its three items fit
   on one line too. Without both, either half wraps and the band grows to 177px
   — a quarter of a 640px phone screen taken away permanently. */
@media (max-width: 859px) {
  /* The card's height comes from its tallest child, which is now the 26px
     social row rather than the 34px one. Padding has to come down to keep the
     total at --band-h: 16 + 26 + 16 = 58, plus the 2px border. */
  .foot-inner {
    /* Only the padding changes here. height stays var(--band-h) from the base
       rule — it is set once, above, and is the number that has to match the
       header at every width. The padding decides where the content sits inside
       it. The 26px row in a 60px box leaves 34px of slack, so 16px of padding
       on each side centres it. */
    padding: 16px 14px;
    /* The two halves side by side left the social row only 105px of the card's
       362px — the legal text is intrinsically wide in every language, so
       space-between starved the row and it wrapped to three lines. Above 860px
       there is room for both on one line; below it there is not, so the social
       row takes the full width and the legal text goes under it. */
    flex-direction: column;
    gap: 0;
  }

  .foot-grid {
    gap: 5px;
    justify-content: center;
  }

  .foot-grid a {
    width: 26px;
    height: 26px;
    /* 10px, the same radius the desktop row uses: only the size changes below
       860px, not the shape. At 8px the social buttons visibly squared off on
       every phone while the identical buttons stayed 10px on desktop. */
    border-radius: var(--radius-sm);
  }

  .foot-grid a svg {
    width: 13px;
    height: 13px;
  }

  /* The rights line and the privacy link on one line. The credit is dropped
     entirely below 490px by the rule after this one, so only two items have to
     fit here, and they do at 11px in a 390px viewport. */
  .foot-row {
    gap: 0 8px;
    font-size: 11px;
  }
}

/* Below 490px the credit's Latin mono glyphs push the legal row to two lines
   (32px instead of 16px) and the card to 70px, so the two bands stop matching.
   It steps aside rather than stretching the footer. The rights line and the
   privacy link stay, since those are the two the site's own contrast work was
   measured against. Scoped to a class, so a longer string in a future
   translation can be revisited here without touching the layout. */
@media (max-width: 490px) {
  .foot-row .credit {
    display: none;
  }
}

/* Socials at the start edge, legal text at the end edge. As two stacked
   centred rows the footer read as two unrelated things, and the stacked form
   also cost three times the height a fixed band can afford. The card's row
   layout and its 9px padding are on the base .foot-inner above, not here, so
   the --band-h height holds below 700px too. What is left for wide screens is the
   typographic direction: enough room to set the legal text end-aligned and to
   space it out, where a narrow viewport has to centre it. */
/* 860px, not 700px. The card is column below the narrow breakpoint, and at
   700-860px the row rules here were setting the legal text end-aligned inside a
   stacked card, wrapping it to two lines and stretching the band to 66px. The
   side-by-side form needs enough width for the 212px social row and the widest
   legal line together with air between them, which lands just under 860. */
@media (min-width: 860px) {
  .foot-grid {
    flex: none;
  }

  .foot-row {
    justify-content: flex-end;
    gap: 4px 14px;
    text-align: end;
  }
}

/* The .foot-narrow rule is gone. It used to cap the card to the article pages'
   820px column and had been an empty block for a while, because the card takes
   --band-w on every page like the header pill does. The class it matched has
   also been dropped from the 24 article pages, and the comment there that
   described it as "matching the 820px article column" was removed with it —
   that description stopped being true when the band was unified, and leaving a
   class in the markup that no rule matches is how the next person ends up
   styling a page type that does not exist. */