/* ===========================================================================
   FOOTER. The markup is _partials/footer.html.

   Self-contained on purpose. This file is loaded by pages that use site.css
   and by pages that use survey.css, and those two define different token
   names (--sv-navy versus --navy) and different spacing scales. So the footer
   declares its own values here rather than inheriting from whichever
   stylesheet happens to be present. Colours are the same hex values both
   stylesheets already use.
   ======================================================================== */

.site-footer{
  --f-navy:#172651; --f-bronze:#9F7251; --f-gold:#BC862B;
  --f-text:#13181B; --f-text-2:#5F636C; --f-border:#E4E6EC; --f-subtle:#F9FAFD;
  background:#fff;
  color:var(--f-text);
  border-top:3px solid var(--f-gold);
  margin-top:64px;
  padding:64px 0 32px;
  font-family:inherit;
  font-size:16px;
  line-height:1.6;
}
.site-footer .footer-inner{max-width:1200px;margin:0 auto;padding:0 20px}
@media (min-width:1024px){.site-footer .footer-inner{padding:0 32px}}

/* ---- navigation columns (full rendering only) -------------------------- */
.site-footer .footer-cols{display:grid;gap:48px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.site-footer h4{font-size:.75rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--f-bronze);margin:0 0 12px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.site-footer li{margin:0}
.site-footer a{color:var(--f-text-2);text-decoration:none}
.site-footer a:hover{color:var(--f-navy);text-decoration:underline}
.site-footer a:focus-visible{outline:2px solid var(--f-navy);outline-offset:2px}
.site-footer .footer-brand img{width:190px;height:auto;display:block;margin-bottom:16px}
.site-footer .footer-brand p{color:var(--f-bronze);font-size:.875rem;max-width:34ch;
  font-weight:600;letter-spacing:.01em;margin:0}

/* ---- respondent row ----------------------------------------------------
   Given a tinted panel rather than another link row. Someone hunting for this
   is scanning, not reading, and it has to survive being the thing they find
   after giving up on the rest of the page. It is the only tinted block in the
   footer, so there is nothing for it to compete with. */
.site-footer .footer-respondent{
  margin-top:48px;padding:20px 24px;
  background:var(--f-subtle);border:1px solid var(--f-border);border-radius:4px}
.site-footer .footer-cols + .footer-respondent{margin-top:48px}
.site-footer .footer-respondent p{margin:0;max-width:78ch;color:var(--f-text-2);
  font-size:.9375rem}
.site-footer .footer-respondent b{color:var(--f-text)}
.site-footer .footer-respondent a{color:var(--f-navy);text-decoration:underline;
  text-underline-offset:2px}

/* ---- contact line ------------------------------------------------------ */
.site-footer .footer-contact{margin-top:24px}
.site-footer .footer-contact p{margin:0;color:var(--f-text-2);font-size:.9375rem}

/* ---- legal line -------------------------------------------------------- */
.site-footer .footer-legal{margin-top:32px;padding-top:24px;
  border-top:1px solid var(--f-border);
  display:flex;flex-wrap:wrap;gap:12px 32px;align-items:baseline;
  color:var(--f-text-2);font-size:.8125rem}
.site-footer .footer-legal a{font-size:.8125rem}
.site-footer .footer-totop{margin-left:auto}

/* A lean footer has no columns, so it does not need the full top margin. */
.site-footer .footer-inner > .footer-respondent:first-child{margin-top:0}

@media print{.site-footer{display:none}}

/* A footer link pointing at the page you are already on is rendered as plain
   text by build.py rather than a link that goes nowhere. */
.site-footer .footer-here{color:var(--f-text);font-weight:600}

/* ---- floating back to top ---------------------------------------------
   A circle by default, opening to show its label on hover or keyboard focus.

   The pointer is a compass needle, not the Strategic Vision mark. The mark was
   tried first and does not survive being shrunk: at this size the gear teeth
   and globe gridlines merge into a dark smudge, and a compass rose points four
   ways at once, so it cannot say "up". The needle is drawn from the same
   vocabulary, in the same two colours, and is unambiguous at 18px.

   The label is collapsed with max-width rather than hidden, so it stays in the
   accessibility tree and gives the button its name. Hover-to-open is scoped to
   devices that actually have a pointer: on a touch screen there is no hover,
   and making the first tap open the label would turn a one-tap button into a
   two-tap one. Touch gets a single brief peek instead, handled in totop.js.

   Hidden until you are 600px down, and hidden again once the footer is on
   screen, so it never covers the footer's own "Back to top" link. That text
   link is the version that works with no JavaScript; this is the enhancement
   on top of it. */
.totop{
  position:fixed;
  right:20px;
  bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  z-index:60;
  display:inline-flex;align-items:center;justify-content:center;
  /* A true circle: 2 + 8 + 34 + 8 + 2 = 54px wide, matching the fixed 54px
     height. The height is set explicitly so the border sits inside it, but the
     width is not, so the border has to be counted on both sides or the circle
     comes out an oval. Keep all four numbers whole: a 1.5px border lands on a
     subpixel and rounds the width down to 53.
     padding-inline = (height - needle - 2 x border) / 2.
     The needle path is drawn to fill its own viewBox, so 34px really is 34px
     of ink rather than a small glyph floating in a large empty box. */
  height:54px;
  padding-inline:8px;
  border-radius:999px;
  /* White, not navy, and no drop shadow. The page behind it is also white, so
     the ring is the only thing separating the two. That is deliberate: a
     shadow on a fixed element near the viewport edge gets clipped and looks
     broken. */
  background:#fff;
  border:2px solid #C3C7D2;
  color:#172651;
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  line-height:1;
  text-decoration:none;

  /* Out of the way until earned: not rendered to assistive tech, not
     focusable, not clickable. */
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.totop.on{opacity:1;visibility:visible;transform:none}
/* Nothing recolours on hover. The ring is the same #C3C7D2 whether the button
   is a circle or open, so the two states cannot drift apart visually. The
   label appearing is the feedback, and it is plenty.
   The label stays navy because the ring colour cannot carry text: #C3C7D2 on
   white measures 1.69:1, and WCAG AA wants 4.5:1 at this size. If you ever
   want the hover to signal harder, darken BOTH to #565F73, which is the same
   hue family (221 degrees against 224) and measures 6.40:1. Do not put
   #C3C7D2 on the text. */
.totop:hover{background:#fff;color:#172651;text-decoration:none}
/* Navy ring, not gold: gold on white is too low contrast to serve as a focus
   indicator. */
.totop:focus-visible{outline:3px solid #172651;outline-offset:3px}
.totop svg{flex:none;display:block}

.totop-label{
  display:block;
  max-width:0;
  margin-left:0;
  opacity:0;
  overflow:hidden;
  white-space:nowrap;
  transition:max-width .24s var(--f-ease, cubic-bezier(.2,0,0,1)),
             margin-left .24s var(--f-ease, cubic-bezier(.2,0,0,1)),
             opacity .16s ease;
}
.totop.open .totop-label,
.totop:focus-visible .totop-label{max-width:8rem;margin-left:9px;opacity:1}

/* Only devices with a real pointer get hover-to-open. */
@media (hover:hover) and (pointer:fine){
  .totop:hover .totop-label{max-width:8rem;margin-left:9px;opacity:1}
}

/* Deliberately not shrunk on small screens. A phone is where a long rules
   page is most painful to scroll, so the button stays the same size and only
   moves closer to the corner. */
@media (max-width:520px){
  .totop{right:14px;bottom:calc(14px + env(safe-area-inset-bottom, 0px))}
}
@media (prefers-reduced-motion:reduce){
  .totop,.totop-label{transition:none}
}
@media print{.totop{display:none}}

/* Site-wide, not footer-only: this file is the one stylesheet every page
   loads. A phone number broken across two lines is easy to misdial. */
a[href^="tel:"]{white-space:nowrap}