/* ==========================================================================
   Swiss credentials in the footer.

   These rules live here rather than in footer.css because footer.css is NOT
   loaded on every page that has a footer — the homepages link it, subpages
   link it, and 25 pages do not. The block is written by
   components/swiss-credentials/build.mjs, which links this file on exactly
   the pages it writes to, so the markup and its styles cannot come apart.
   ========================================================================== */

/* -- Swiss credentials -------------------------------------------------- */

/* Sits directly under the mail and LinkedIn buttons, in their own column —
   company information rather than navigation, which is where it belongs. */
/* The button row is a flex row with no class of its own, so it is reached
   through the block it now contains. Without the wrap it would try to sit the
   credentials beside the two buttons. */
.footer-inner div:has(> .footer-creds) { flex-wrap: wrap; }

.footer-creds {
  flex-basis: 100%;          /* drops below the buttons, not beside them */
  margin-top: 20px;
}

/* The official red variant, used as issued and sitting directly on the dark
   footer — no plate. The black artwork was tried here first, which needs a
   light ground, and a white plate on a near-black footer pulled more attention
   than the smartNsales mark beside it. Red is the variant the issuer supplies
   for dark grounds, so no surface is needed and nothing is recoloured. */
/* The compact footer (articles, glossary) has no social column, so there the
   block sits on its own line at the end of the bottom row instead. */
.footer-creds--row {
  flex-basis: 100%;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-creds-marks {
  display: inline-flex;
  align-items: center;
  gap: 22px;
}
/* A quiet affordance: the mark dims slightly on hover, the way the mail and
   LinkedIn buttons above it do. Nothing is recoloured — opacity only. */
.footer-cred-link { display: inline-flex; }
.footer-cred-link:hover .footer-cred-mark,
.footer-cred-link:focus-visible .footer-cred-mark { opacity: 0.82; }
.footer-cred-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 3px;
  border-radius: 3px;
}
@media (prefers-reduced-motion: no-preference) {
  .footer-cred-mark { transition: opacity 0.15s ease; }
}

.footer-cred-mark {
  display: block;
  width: 108px;
  height: auto;              /* keeps the file's own ratio */
}


@media (max-width: 720px) {
  .footer-cred-mark { width: 90px; }
}