/* ══════════════════════════════════════════════════════════
   IPP — css/footer.css
   THE footer. One file, one shape, every page. Finding 126.

   WHY THIS FILE EXISTS
   Before 19 August 2026 the footer rules lived in three places: css/style.css,
   an inline copy in index.html and another in employers.html, because those two
   pages link fonts.css and tokens.css but not style.css. The three copies had
   drifted. On the 18th a fix to style.css changed nothing on those two pages, and
   on the 19th JD spotted two visibly different footers on ipp.pro: six pages
   carried a dead `.footer-brand{display:flex}` rule left over from an older
   `.footer-inner` footer that no page has used for months, which laid the logo
   and the tagline out on one centred line instead of stacking them.

   Below 1024px it was worse: the private copies broke at 900 and 480 while the
   shared stylesheet broke at 1024 and 768, so the same viewport showed three
   different footers.

   So: this file is the ONLY place footer rules may live. style.css imports it;
   index.html and employers.html link it directly. If a page needs a different
   footer, that is a decision to make here, in the open, not an inline override.

   EVERY var() CARRIES A LITERAL FALLBACK, on purpose. index.html and
   employers.html resolve tokens through css/tokens.css and nothing guarantees a
   future page will. A footer that silently loses its border because a token did
   not resolve is exactly the class of failure this file was written to end.

   TWO CONTAINERS, DELIBERATELY, and they are not a third copy.
     .site-footer  the public pages. Pads itself; the grid inside is capped at
                   1200 and centred.
     .footer       the members area, which puts a .container inside the footer
                   and lets that do the width. Its columns differ because its
                   links differ, which is content, not layout drift.
   Everything below the container is shared by both.
══════════════════════════════════════════════════════════ */

/* line-height is stated rather than inherited. index.html and employers.html do
   not load style.css, so they inherit a different base line box, and that alone
   put their footer columns 5px out of step with every other page. A shared file
   that still depends on what the page around it happens to set is not shared. */
.site-footer{background:var(--navy-deep,#080f22);border-top:1px solid var(--border,rgba(255,255,255,0.08));padding:3rem;line-height:1.5}
.footer{background:var(--navy-deep,#080f22);border-top:1px solid var(--border,rgba(255,255,255,0.08));padding:3.5rem 0 2rem;line-height:1.5}

/* 17rem is the measured width of "The Institute of Project Professionals." at
   .8rem, so the brand line holds on one line instead of breaking after
   "Project". max-width 1200 with auto margins is the canonical measure: without
   it the grid ran the full viewport on every page loading style.css while the
   two private copies centred, which is the split JD spotted. */
.footer-grid{display:grid;grid-template-columns:minmax(17rem,2fr) 1fr 1fr 1fr 1fr;gap:2.5rem;max-width:1200px;margin:0 auto 2.5rem}

.footer-brand-row{display:flex;align-items:center;gap:.6rem}
.footer-brand-row img{width:30px;height:30px;display:block}
.footer-brand-row span{font-family:var(--font-display,Georgia),serif;color:var(--white,#fff);font-size:1.15rem;font-weight:700;letter-spacing:.06em}
.footer-brand p{font-size:.8rem;color:var(--on-dark,#D3DAE6);margin:.75rem 0 0;line-height:1.6}

.footer-col h5{font-family:var(--font-body,system-ui),sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark,#D3DAE6);margin:0 0 1rem;line-height:1.3}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.footer-col ul li{line-height:1.45}
.footer-col ul li a{font-size:.82rem;line-height:1.45;color:var(--on-dark,#D3DAE6);text-decoration:none;transition:color .2s}
.footer-col ul li a:hover{color:var(--white,#fff)}

/* Stacked and centred. It was display:flex with justify-content:space-between,
   which spread three unrelated blocks across a row while the registered-office
   block carried inline text-align:center;max-width:680px;margin:0 auto that
   assumed it was NOT in a flex row. Two layout models fighting. The statutory
   particulars sit first because they are the part the Companies Act requires;
   the copyright is a notice, not a requirement. */
.footer-bottom{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:2rem;border-top:1px solid var(--border,rgba(255,255,255,0.08));gap:.6rem;max-width:1200px;margin:0 auto}
.footer-reg{font-size:.72rem;line-height:1.55;opacity:.7}
.footer-bottom p{font-size:.72rem;color:var(--on-dark,#D3DAE6);margin:0;line-height:1.5}
.footer-bottom a{color:var(--on-dark,#D3DAE6);text-decoration:none}
.footer-bottom a:hover{color:var(--white,#fff)}

/* ONE set of breakpoints. The old copies broke at 1024/768, 900/480 and 900/480
   respectively, so between 900 and 1024 three footers were on screen at once. */
@media(max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .footer-grid .footer-brand{grid-column:1 / -1}
}
@media(max-width:768px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:1.75rem 1.5rem}
  .footer-bottom{align-items:center}
}
@media(max-width:480px){
  .site-footer{padding:2.5rem 1.25rem}
  .footer-grid{grid-template-columns:1fr;gap:1.5rem}
}