/* The site's one call to action: Get involved in the menu is a button, and so is a link to a Google Form
   (the sign-up form) in a page. */

.site-nav a[href="/get-involved/"] {
  align-self: center; min-height: 2.25rem; margin-inline-start: var(--space-1);
  border-radius: var(--radius); background: var(--color-text); color: var(--color-bg); font-weight: 600;
}
.site-nav a[href="/get-involved/"]:hover { background: var(--color-accent-text); color: var(--color-bg); }
.site-nav a[href="/get-involved/"][aria-current] { text-decoration: none; }

.prose a:is([href^="https://forms.gle/"], [href^="https://docs.google.com/forms/"]) {
  display: inline-flex; align-items: center; min-height: 3rem; padding: 0 var(--space-3);
  border-radius: var(--radius); background: var(--color-text); color: var(--color-bg);
  font: 600 var(--text-sm) var(--font-ui); text-decoration: none;
}
.prose a:is([href^="https://forms.gle/"], [href^="https://docs.google.com/forms/"]):hover {
  background: var(--color-accent-text); color: var(--color-bg);
}

/* On a phone: smaller type and a compact menu, so more of the text fits on the screen; and Get involved
   as a button at the bottom of the screen, in reach while reading (on its own page it stays put). */
@media (max-width: 40rem) {
  .site-header { padding-block: var(--space-2) var(--space-1); }
  .site-nav { gap: 0; margin-inline: calc(-1 * var(--space-1)); }
  .site-nav a { min-height: 2.25rem; padding-inline: var(--space-1); }
  .site-nav-rule { display: none; }

  .display { font-size: 2.125rem; }
  .title { font-size: 1.875rem; }
  .lede { font-size: 1.125rem; }
  .body { margin-top: var(--space-3); font-size: 1.0625rem; line-height: 1.6; }
  .prose h2 { font-size: 1.375rem; }
  .prose blockquote { font-size: 1.125rem; }

  .site-nav a[href="/get-involved/"]:not([aria-current]) {
    position: fixed; z-index: 5; inset-inline-end: var(--space-2); inset-block-end: var(--space-2);
    min-height: 3rem; margin: 0; padding-inline: var(--space-3); font-size: 1rem;
    box-shadow: 0 0.25rem 1rem color-mix(in oklab, var(--color-text) 30%, transparent);
  }
  body:has(.site-nav a[href="/get-involved/"]:not([aria-current])) { padding-bottom: 5rem; }
}

/* Doe mee and the form button in the site's accent colour, so they stand out from the dark text. */
.site-nav a[href="/doe-mee/"], .site-nav a[href="/get-involved/"],
.prose a:is([href^="https://forms.gle/"], [href^="https://docs.google.com/forms/"]) { background: var(--color-accent); color: var(--color-bg); }
.site-nav a[href="/doe-mee/"]:hover, .site-nav a[href="/get-involved/"]:hover,
.prose a:is([href^="https://forms.gle/"], [href^="https://docs.google.com/forms/"]):hover { background: var(--color-text); color: var(--color-bg); }