@import "tailwindcss";

/* Override card colors for "For builders" section */
.sl-heading-wrapper:has(#for-builders) + .card-grid .card:nth-child(1) {
  --sl-card-border: var(--sl-color-green);
  --sl-card-bg: var(--sl-color-green-low);
}
.sl-heading-wrapper:has(#for-builders) + .card-grid .card:nth-child(2) {
  --sl-card-border: var(--sl-color-blue);
  --sl-card-bg: var(--sl-color-blue-low);
}

.bubble {
  display: inline-block;
  background-color: rgb(59 130 246);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 1.25rem;
  border-bottom-right-radius: 0;
  position: relative;
}

.bubble::after {
  content: '';
  position: absolute;
  bottom: calc(-0.35em + 1px);
  right: 0;
  width: 0;
  height: 0;
  border-top: 0.35em solid rgb(59 130 246);
  border-left: 0.35em solid transparent;
}

/* Style hero primary button to match bubble */
.hero .actions a.sl-link-button:not([data-variant]) {
  background-color: rgb(59 130 246) !important;
  color: white !important;
  border-color: rgb(59 130 246) !important;
}

.hero .actions a.sl-link-button:not([data-variant]):hover {
  background-color: rgb(37 99 235) !important;
  border-color: rgb(37 99 235) !important;
}

/* Style hero secondary button */
.hero .actions a.sl-link-button.secondary {
  background-color: transparent !important;
  color: rgb(59 130 246) !important;
  border-color: rgb(59 130 246) !important;
}

.hero .actions a.sl-link-button.secondary:hover {
  background-color: rgb(59 130 246 / 0.1) !important;
}

/* Give hero image more space */
@media (min-width: 50rem) {
  .hero {
    grid-template-columns: 7fr 5fr;
  }
}