/* The site footer. ONE definition, linked by every page that has one.

   It lived inline in index.html and a hand-kept subset lived inline in
   tools/index.html. They drifted twice in one day: first the tools copy was
   missing .fgrid, .social and .fbot entirely, so its four columns had no grid
   to sit in; then, an hour after I copied the landing's rules across, I
   squared the pills in index.html and only there, and the two were different
   again. That is the second-copy problem this project keeps meeting, and the
   answer is the same as it was for _shared.php and account.css: stop making
   the second copy. */

/* ---------- footer logo lockups ---------- */
/* kept for the pages that still use it; the landing's footer no longer does */
.flockrow{display:flex; justify-content:flex-end; padding-block-end:22px;
  border-block-end:1px solid var(--y-rule); margin-block-end:26px}
.flogos{display:flex; flex-wrap:wrap; gap:14px; padding-block-end:26px; margin-block-end:26px;
  border-block-end:1px solid rgba(255,255,255,.16)}
/* At the end of the row it stands as its own block, aligned to the start of
   its column like every heading beside it. */
/* .flock is a COLUMN now: the university lockup, and the eNamad seal beneath
   it (moved 2026-09-04). Two accreditation marks belong together; the seal used
   to sit at the far end of the copyright row, where it read as a stray graphic
   rather than as a credential. */
.flock{display:flex; flex-direction:column; align-items:flex-start; gap:14px}
.flock-lockup{display:flex; align-items:center; gap:12px}
.fgrid .flock{align-items:center; padding-inline-start:30px;
  border-inline-start:1px solid rgba(255,255,255,.14)}
@media (max-width:1000px){.fgrid .flock{padding-inline-start:0; border-inline-start:0;
  padding-block-start:22px; border-block-start:1px solid rgba(255,255,255,.14)}}
.flock span{display:flex; flex-direction:column; line-height:1.5}
.flock b{color:var(--y-text); font-size:14px; font-weight:700}
.flock i{font-style:normal; color:var(--y-muted); font-size:11.5px; direction:ltr; text-align:start}
.flock .chip{background:none; border-radius:0; padding:0; display:flex; align-items:center}
.flock .chip img{block-size:52px; inline-size:auto; display:block;
  /* the university mark is a dark PNG; recoloured to the accent so it belongs
     to this page instead of sitting in a white box cut out of the footer */
  filter:brightness(0) saturate(100%) invert(46%) sepia(64%) saturate(3200%) hue-rotate(348deg) brightness(96%) contrast(92%)}
.flock .tums{block-size:56px; inline-size:auto; display:block}


/* ---------- footer ---------- */
footer{background:var(--y-panel); color:var(--y-text-2); padding-block:34px; margin-block-start:0}
footer a{color:var(--y-accent); text-decoration:none}
footer a:hover{text-decoration:underline}
/* Four text columns and the university lockup, in one row. auto-fit with a
   230px floor collapsed to a single column at any width the wrap actually
   offers, which is what made the whole footer read as one tall stack. These
   are explicit tracks: the four columns share the space and the lockup takes
   what it needs at the end. */
.fgrid{display:grid; gap:26px 30px; align-items:start;
  grid-template-columns:repeat(4,minmax(0,1fr)) auto}
.fgrid > *{min-inline-size:0}
@media (max-width:1000px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid .flock{grid-column:1 / -1}}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}}
footer h3{color:var(--y-text); font-size:16px; margin-block-end:12px}
footer p{margin-block-end:8px; line-height:1.9}
.social{display:flex; gap:10px; flex-wrap:wrap; margin-block-start:12px}
/* 44px, not 41. These are links, and a link is a tap target whatever its label
   measures -- the padding is load-bearing here, not decoration. */
.social a{display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16); border-radius:var(--y-radius);
  padding:9px 16px; min-block-size:44px;
  color:var(--y-text-2); text-decoration:none; font-size:13.5px; transition:.18s}
.social a:hover{background:rgba(255,255,255,.16); color:var(--y-on-accent); text-decoration:none}
.social svg{inline-size:15px; block-size:15px; fill:currentColor; flex:0 0 auto}
.fbot{margin-block-start:28px; padding-block-start:18px; border-block-start:1px solid rgba(255,255,255,.16);
  color:var(--y-muted); font-size:13px}

/* ---- the eNamad trust seal ----
   Sits at the end of the bottom bar, opposite the copyright, which is where a
   trust seal belongs and where it does not strand itself on a line of its own
   under the columns.

   `.ftrust[hidden]` matters: assets/js/enamad.js hides the block when the image
   fails, and .ftrust's own display:flex would otherwise beat the UA rule for
   [hidden]. See that file for why hiding is needed at all — the short version
   is that a broken <img> with alt='' does NOT collapse to nothing in Safari,
   which is what I assumed and was wrong about.

   White plate: the seal is drawn for light paper and this footer is dark, and a
   plate is the only treatment allowed — recolouring or filtering the mark is
   forbidden by their rules and by ours. If it turns out to be light artwork on
   transparent once it activates, drop the background and the padding. */
.fbot{display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap}
.ftrust{display:flex; align-items:center; flex:0 0 auto}
/* It now lines up under the university mark rather than the text beside it, so
   the two credentials share a left edge on an rtl page. */
.flock .ftrust{margin-inline-start:0}
.ftrust[hidden]{display:none}
.ftrust img{display:block; background:#fff; border-radius:var(--y-radius);
  padding:6px; max-inline-size:130px; block-size:auto}

/* ═══ 2026-09-04 — the footer, reworked ═══════════════════════════════════
   Built from the Figma (node 345-7). What that got right is kept: the cool dark
   ground, the credentials stacked in their own column, and — the good idea —
   putting the contact first on a phone. What it got wrong is fixed here, and
   each of these was a real problem rather than a preference:

   1. THE CENTRE'S NAME WAS THE LOUDEST THING ON THE PAGE. It was set large and
      in the accent, in a footer, wrapping so that «یاس» sat alone on a second
      line. A footer's job is to be found when looked for, not to shout after
      the content has finished. It is body-sized and warm-white here, with only
      «یاس» carrying the accent — the same treatment as the masthead.
   2. FOUR THINGS COMPETED IN ORANGE — the name and all three column headings.
      One accent per band: the headings are muted uppercase labels now.
   3. THE BRAND APPEARED TWICE, once as the big name and again as a row inside
      the credentials column. The credentials column carries the university, our
      own mark, and the seal; the name is stated once.
   4. The social row showed an X (Twitter) glyph. We are on Telegram.

   The type scale still applies: no Lalezar under 28px, so every heading here is
   Vazirmatn. */

/* Headings stop competing with the accent. */
.fgrid > div > h3{color:var(--y-muted); font-size:12px; font-weight:700;
  letter-spacing:.08em; margin-block-end:10px}
/* The name is NOT one of those labels, and it has to out-specify them: the rule
   above is 0-1-2 and a plain `.fbrand h3` is 0-1-1, so the name rendered as a
   12px muted label. Matched selector shape, so the intent survives the cascade
   instead of depending on source order. */
.fgrid > div.fbrand > h3{color:var(--y-text); font-size:17px; font-weight:700;
  letter-spacing:0}
.fgrid > div.fbrand > h3 em{font-style:normal; color:var(--y-accent)}

/* the phone number and the form are controls, not sentences */
.fcontact p{margin:0 0 8px}
.fcontact a{display:inline-flex; align-items:center; min-block-size:44px;
  padding-inline:2px; color:var(--y-text); text-decoration:none;
  border-block-end:1px solid transparent}
.fcontact a:hover{color:var(--y-accent); border-block-end-color:currentColor}

/* The one-line footer every page except the landing gets. A page inside a tool
   is somewhere you are working, not somewhere you go looking for an address. */
.fmin{border-block-start:1px solid var(--y-rule); margin-block-start:var(--y-7);
  padding-block:22px; color:var(--y-muted); font-size:13px; text-align:center;
  background:transparent}
.fmin .wrap{max-width:1080px; margin-inline:auto; padding-inline:20px}