/* ==========================================================================
   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 Sellva 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: flex-end;   /* the two lockups share a bottom line */
  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:not(.footer-cred-link--ms):hover .footer-cred-mark,
.footer-cred-link:not(.footer-cred-link--ms):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: 90px;
  height: auto;              /* keeps the file's own ratio */
}
/* swiss digital services is a wide lockup (icon above one long line), so it
   takes more width than the square badge to keep its lettering legible. */
.footer-cred-mark--wide { width: 175px; }


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


/* In the rich footer the credentials share the narrow right-hand column with
   the mail and LinkedIn buttons (about 208px). Side by side the two lockups
   need ~340px, which pushed the whole block onto a new row and changed the
   footer's layout, so there they stack, and the wide lockup is sized to fit
   the column. The compact footer (articles, glossary) has a full-width row,
   so the pair stays side by side there. */
.footer-creds:not(.footer-creds--row) .footer-creds-marks {
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.footer-creds:not(.footer-creds--row) .footer-cred-mark--wide { width: 150px; }

/* Available on Microsoft Marketplace: Microsoft's badge, sized by height
   with the width following the file's own ratio, and never dimmed on hover;
   the focus ring is the only state it shows. The artwork carries its own
   clear space (squares at 11.9 / 11.48 units of 184.17 x 54.33), so at 50px
   its visible mark is as wide as "swiss digital services" above it (150px).
   The negative margins hand that clear space back, so the squares line up
   with the left edge of the Swiss labels and the column keeps its spacing.
   Nothing in the file is cropped. */
.footer-cred-mark--ms,
.footer-creds:not(.footer-creds--row) .footer-cred-mark--ms {
  width: auto;
  height: 50px;
  margin: -10.6px -8.8px -10.6px -10.9px;
}