/* Header "Install to Slack" action (docs/design.md, Buttons and links).
   Loaded on every page with the site header, before the page stylesheet,
   so the button is styled even where main.css loads late. */
.header-cta {
  display: inline-block;
  height: 40px;
  margin-left: auto;
  margin-right: var(--space-4);
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 40px;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.header-cta:hover {
  background: var(--primary-accent);
  color: var(--primary-foreground);
  text-decoration: none;
}

.header-cta-suffix {
  display: inline;
}

/* Show "Install" where space is tight; screen readers keep the full label. */
@media (max-width: 575px), (min-width: 992px) and (max-width: 1199px) {
  .header-cta-suffix {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* The CTA follows the menu in the source (and keyboard order) but sits
   between the logo and the menu toggle on small screens. */
@media (max-width: 991px) {
  .header-cta {
    order: 1;
  }

  .header .navbar .navbar-toggler {
    order: 2;
  }

  .header .navbar .navbar-collapse {
    order: 3;
  }
}

@media (min-width: 992px) {
  .header-cta {
    margin-left: var(--space-7);
    margin-right: 0;
  }
}

/* Keep logo, menu and CTA on one line in the 960px container. */
@media (min-width: 992px) and (max-width: 1199px) {
  .header .navbar .navbar-nav .nav-item {
    margin-left: var(--space-6);
  }

  .header-cta {
    margin-left: var(--space-6);
  }
}