/* Flat black/white logos matching bwi-suisse.ch, swapped per theme. Forgejo
   theme names carry the mode as a suffix (forgejo-dark, forgejo-auto, ...),
   hence the substring matches. */
:root {
  --bwi-logo: url("/assets/img/bwi_logo_black.svg");
  --bwi-logo-with-text: url("/assets/img/bwi_logo_with_text_black.svg");
}

html[data-theme*="-dark"] {
  --bwi-logo: url("/assets/img/bwi_logo_white.svg");
  --bwi-logo-with-text: url("/assets/img/bwi_logo_with_text_white.svg");
}

html[data-theme*="-light"] {
  --bwi-logo: url("/assets/img/bwi_logo_black.svg");
  --bwi-logo-with-text: url("/assets/img/bwi_logo_with_text_black.svg");
}

/* "-auto" is Forgejo's default theme, so without this a dark-OS visitor gets
   the black logo on a dark background. */
@media (prefers-color-scheme: dark) {
  html[data-theme*="-auto"] {
    --bwi-logo: url("/assets/img/bwi_logo_white.svg");
    --bwi-logo-with-text: url("/assets/img/bwi_logo_with_text_white.svg");
  }
}

#navbar-logo img {
  content: var(--bwi-logo);
  /* The glow variant got its breathing room from the blur radius; the flat one
     needs it explicitly. border-box keeps the navbar slot the same size and
     insets the mark instead of growing the element. */
  box-sizing: border-box;
  padding: 0.2rem;
}

/* Home page */

.page-content.home {
  padding: 0;
}

.bwi-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  padding: 6rem 1.5rem 4rem;
}

.bwi-home-logo {
  display: block;
  /* 25rem on desktop, never more than 75% of the viewport on narrow screens. */
  width: min(23rem, 70vw);
  height: auto;
  content: var(--bwi-logo-with-text);
}

/* Wraps to as many links per row as fit, each row centred. */
.bwi-home-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* The column gap has to stay clearly wider than the 0.5rem between an icon
     and its own label, or the icons stop reading as part of the right link. */
  gap: 0.65rem 1.45rem;
  max-width: min(95vw, 23rem);
}

.bwi-home-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text);
  text-decoration: none;
}

.bwi-home-link .svg {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-text-light-2);
}

.bwi-home-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.bwi-home-link:hover .svg {
  color: var(--color-primary);
}