@import "tokens.css";
@import "reset.css";
@import "header.css";
@import "footer.css";

@font-face {
  font-display: swap;
  font-family: "Cabin";
  font-style: normal;
  font-weight: var(--font-weight-regular) var(--font-weight-bold);
  src: url("/static/fonts/Cabin.ttf") format("truetype");
}

/* The design system's page gutter (--space-gutter-page) widens from 64rem;
   a token can't change inside @media, so its consumers switch it here. */
@media (min-width: 64rem) {
  :root {
    --space-gutter-page-min: var(--space-gutter-page-min-wide);
  }
}

body {
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-sans);
  gap: 0;
}

a:not(.link) {
  text-decoration: none;
}

.container {
  margin-inline: auto;
  max-width: var(--size-measure-page);
  padding-inline: var(--space-gutter-container);
  width: 100%;
}

nav > ul {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: var(--space-md);
  list-style: none;
}

ul li p {
  display: inline;
}

em {
  font-style: normal;
  font-weight: var(--font-weight-semibold);
}

main {
  padding-inline: var(--space-gutter-page);

  &:has(h1.alt) {
    h2 {
      padding-block: calc(1rem + 1vw);
      text-align: center;
    }

    small {
      display: block;
      font-size: 1rem;
      font-weight: var(--font-weight-regular);
      padding-block: var(--space-lg);
    }
  }
}

h1.alt {
  background-color: var(--section-banner-background);
  color: var(--section-banner-foreground);
  display: grid;
  padding-block: var(--space-3xl);
  margin-inline: calc(-1 * var(--space-gutter-page));
  padding-inline: var(--space-gutter-page);
  place-items: center;
  text-align: center;
}

article,
.card {
  border: var(--card-border);
  border-radius: var(--card-radius);
  display: grid;
  gap: var(--card-gap);
  padding: var(--card-padding);

  header {
    font: var(--card-title-typography);
  }

  a,
  button {
    text-decoration: none;

    img {
      color: var(--color-text-subtle);
      display: inline;
      height: 1.25rem;
      margin-left: 0.25rem;
      position: relative;
      top: 0.35rem;
      width: 1.25rem;
    }
  }
}

/* Secondary CTA button: white background, navy outline.
   The navy-filled "Join Zuba" buttons keep their own styles in home.css. */
.btn {
  align-items: center;
  background-color: var(--button-secondary-background);
  border-radius: var(--button-radius);
  border: var(--button-secondary-border);
  color: var(--button-secondary-foreground);
  cursor: pointer;
  display: inline-flex;
  gap: var(--button-gap);
  justify-content: center;
  font: var(--button-typography);
  padding-block: var(--button-size-lg-padding-block);
  padding-inline: var(--button-size-lg-padding-inline);
  text-align: center;
  text-decoration: none;
}

/* Introductory paragraph under a section title: the design system's intro,
   centred and balanced. Scoped to a paragraph right after an h2, as in the
   app. */
h2 + p.intro {
  color: var(--intro-color);
  font: var(--intro-typography);
  margin-block-start: var(--intro-margin-block-start);
  margin-inline: auto;
  max-width: var(--intro-max-width);
  text-align: center;
  text-wrap: balance;
}

.honeypot {
  opacity: 0;
  position: absolute;
  height: 0;
  width: 0;
  pointer-events: none;
}