/* ============================================================
   footer-ll.css — the footer on the ll- design footing

   Written at .site-footer.footer-ll so it outranks footer.css,
   which is left untouched. Removing the class and this link
   restores the old footer exactly.

   One hard constraint runs through the ad rules below:
   footer-anchor-ad.js reserves dock.offsetHeight in the footer so
   that pinning and unpinning never shifts the page, and the
   original CSS is careful that the dock is the *same height*
   docked and stuck. Nothing here changes the dock's height —
   only its width, its sides and its corners.
   ============================================================ */

.site-footer.footer-ll {
  /* the nav's tone, so the two ends of the page match */
  background: #121d2b;
  border-top: 1px solid #243242;
  color: #f4f6f8;
}

/* --- the pinned ad ------------------------------------------------
   It was a bar across the whole viewport: a 728px ad with a band of
   navy running out to both edges, which reads as chrome the site has
   grown rather than as an advertisement sitting on top of it. Pinned,
   it is now a card the width of the unit, centred, with the corners
   turned over at the top. Everything that decides the handoff —
   height, padding, the top border — is left exactly as it was.
   ------------------------------------------------------------------ */
.site-footer.footer-ll .footer-ad-dock.is-stuck {
  left: 50%;
  right: auto;
  width: max-content;
  max-width: 100%;
  transform: translateX(-50%);
  background: #16222e;
  border-top-color: #2b3c4e;
  border-right: 1px solid #2b3c4e;
  border-left: 1px solid #2b3c4e;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -10px 30px rgba(6, 13, 22, 0.4);
}

.site-footer.footer-ll .footer-ad-label {
  color: #7d8b9b;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.site-footer.footer-ll .footer-ad-close { color: #aab6c4; }
.site-footer.footer-ll .footer-ad-close:hover { color: #fff; }

/* --- the directory ------------------------------------------------- */
.site-footer.footer-ll .footer-brand-name { color: #fff; }
.site-footer.footer-ll .footer-brand-tagline { color: #7d8b9b; }

/* Was uppercase and letterspaced at 0.68rem. A column heading is a
   heading, so it is set in the body face at a readable size and the
   rule underneath does the separating. */
.site-footer.footer-ll .footer-col-head {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #243242;
  color: #aab6c4;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.site-footer.footer-ll .footer-col-links a {
  color: #aab6c4;
  font-size: 0.87rem;
}

.site-footer.footer-ll .footer-col-links a:hover {
  color: #fff;
  text-decoration: underline;
}

/* the heart was #c60c30 here, the same saturated red the nav carried.
   Ochre, matching the Support control in the nav, so the one ask on
   the page looks the same wherever it appears. */
.site-footer.footer-ll .footer-support-link { color: #d9a05b; }
.site-footer.footer-ll .footer-support-link .fa-heart { color: #d9a05b; }
.site-footer.footer-ll .footer-support-link:hover { color: #f0c893; }
.site-footer.footer-ll .footer-support-link:hover .fa-heart { color: #f0c893; }

/* The page body runs to 1180px while the footer stopped at 960, which
   left it visibly inset from the content above it. Six columns also
   need the room. */
.site-footer.footer-ll .footer-container {
  max-width: min(1180px, 100% - 48px);
  padding: 0;
}

/* --- the sources strip ---------------------------------------------
   A row of its own rather than a seventh column: the names are long,
   and at 1180px across six columns each one would wrap to three lines.
   Set as a colophon — one heading, then the sources on a line. */
.site-footer.footer-ll .footer-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 22px;
  padding: 16px 0 0;
  border-top: 1px solid #243242;
}

/* the strip already separates the columns from the legal line, so the
   legal line drops its own rule rather than drawing a second one a
   few pixels under the first */
.site-footer.footer-ll .footer-sources + .footer-bottom {
  border-top: 0;
  padding-top: 16px;
}

.site-footer.footer-ll .footer-sources-head {
  margin: 0;
  color: #7d8b9b;
  font-size: 0.8rem;
}

.site-footer.footer-ll .footer-sources-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer.footer-ll .footer-sources-list a {
  color: #aab6c4;
  font-size: 0.8rem;
  text-decoration: none;
}

.site-footer.footer-ll .footer-sources-list a:hover {
  color: #fff;
  text-decoration: underline;
}

/* --- the line at the bottom ----------------------------------------- */
.site-footer.footer-ll .footer-bottom {
  border-top: 1px solid #243242;
}

.site-footer.footer-ll .footer-copy,
.site-footer.footer-ll .footer-legal a { color: #7d8b9b; }
.site-footer.footer-ll .footer-legal a:hover { color: #fff; }