/* Vault footer refinements (footer.php, vault branch).
 *
 * Loaded by a <link> inside footer.php, not a <style> tag: on pages whose footer is
 * rendered inside the Vue app, Vue drops <style> tags from the template.
 *
 * What this fixes:
 *  - The link columns were a 5-column grid (about + 4) but the Community column only
 *    renders where Vue has loaded data, so on most pages the right-hand fifth of the
 *    footer was empty and the layout looked lopsided. Flex with growing columns fills
 *    the row whether there are 3 or 4 link columns.
 *  - Store links are real badges (logo + "Get it on / Download on the") instead of
 *    two plain text links.
 *  - The NCC licence is shown once, as a quiet pill in the bottom bar. The extra
 *    centred dark-theme badge (white text) was nearly invisible on the light footer.
 */
.v-foot { padding: clamp(44px, 5vw, 64px) 0 26px; }
.v-foot .v-foot__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 36px clamp(24px, 3vw, 40px);
}
.v-foot .v-foot__about { flex: 1.5 1 240px; min-width: 220px; }
.v-foot .v-foot__col { flex: 1 1 120px; min-width: 120px; }
.v-foot .v-foot__col--app { flex: 1.1 1 170px; min-width: 170px; }
.v-foot .v-foot__about p { margin: 14px 0 18px; max-width: 38ch; }

.v-foot .v-foot__col h3 { margin: 0 0 16px; }
.v-foot .v-foot__col a { margin-bottom: 10px; line-height: 1.35; transition: color .15s ease; }

.v-foot .v-appbadges { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; }
.v-foot .v-appbadge,
.v-foot .v-appbadge:hover {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  max-width: 190px;
  margin: 0;
  padding: 8px 14px;
  background: #000;
  color: #fff;
  border: 1px solid #2b2f3a;
  border-radius: 11px;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
}
.v-foot .v-appbadge:hover { border-color: var(--v-brand, #1466E0); }
.v-foot .v-appbadge svg { flex: none; }
.v-foot .v-appbadge i { font-size: 24px; line-height: 1; color: #fff; }
.v-foot .v-appbadge span { display: block; font-size: 15px; color: #fff; }
.v-foot .v-appbadge small {
  display: block;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .85;
}

.v-foot .v-foot__bottom { margin-top: 36px; padding-top: 22px; }
.v-foot .v-foot__license {
  font-family: var(--vf-b, system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: #0b7a50;
  background: rgba(18, 165, 108, .09);
  border: 1px solid rgba(18, 165, 108, .3);
  border-radius: 999px;
  padding: 6px 12px;
}

@media (max-width: 540px) {
  .v-foot .v-foot__about { flex: 1 1 100%; }
  .v-foot .v-foot__col { flex: 1 1 calc(50% - 20px); min-width: 0; }
  .v-foot .v-foot__col--app { flex: 1 1 100%; }
  .v-foot .v-appbadges { flex-direction: row; flex-wrap: wrap; }
  .v-foot .v-appbadge { flex: 1 1 150px; max-width: none; }
  .v-foot .v-foot__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}