custom.css

@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  --font-family-body-custom: "Montserrat";
  --font-family-headings-custom: "Montserrat";
  --font-jetbrains-mono: "Fira Code";
}

.relative.mt-8.prose.prose-gray a {
  color: #ff4c00;
}

/* Danger admonition coloring */

.danger-admonition {
  border: 1px solid rgba(239, 68, 68, 0.2);
  background-color: rgba(254, 242, 242, 0.5);
}

.dark\:danger-admonition:is(.dark *) {
  border-color: rgba(239, 68, 68, 0.3);
  background-color: rgba(239, 68, 68, 0.1);
}

.tabs {
  border: 1px solid rgb(var(--gray-200));
}

.tabs ul.not-prose.mb-6 li button {
  padding: 12px 12px 10px;
}

.tabs div.prose.overflow-x-auto {
  padding: 0 12px 12px;
}

.homepage_wrapper {
  width: 75%;
  max-width: 1440px;
  margin: 50px auto;
  padding: 0 26px;
}

.gcore_hero {
  margin-bottom: 64px;
}

/* Homepage product cards: dense layout (similar to Wallarm docs card grid) */
.homepage_wrapper .gcore_hero {
  margin-bottom: 2rem;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Hero: Mintlify `.prose` defaults left-align headings; force centered title + tagline */
.homepage_wrapper .gcore_hero .gcore_hero_inner {
  align-items: center !important;
  text-align: center !important;
}

.homepage_wrapper .gcore_hero .gcore_hero_title,
.homepage_wrapper .gcore_hero .gcore_hero_subtitle {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/*
 * Hero title: fluid between ~30px and ~35px (1.875rem–2.1875rem at a 16px root).
 * clamp() ties size to viewport width so narrow screens stay closer to 30px (one line),
 * while wide screens reach ~35px. rem + vw keeps zoom and user font settings meaningful.
 */
section.gcore_hero.not-prose h1.gcore_hero_title,
.homepage_wrapper .gcore_hero h1.gcore_hero_title {
  font-size: clamp(1.875rem, 1.4rem + 1.5vw, 2.1875rem) !important;
  line-height: 1.2 !important;
}

/* Tagline: match homepage card descriptions (0.75rem, line-height 1.4). */
section.gcore_hero.not-prose .gcore_hero_subtitle,
.homepage_wrapper .gcore_hero .gcore_hero_subtitle {
  display: block !important;
  width: 100% !important;
  max-width: 42rem !important;
  font-size: 0.75rem !important;
  line-height: 1.4 !important;
}

/* Help row below cards: same body size as card descriptions (0.75rem); lead in brand orange */
.homepage_wrapper .homepage_help {
  margin-top: 2rem !important;
}

.homepage_wrapper .homepage_help_separator {
  border-top: 1px solid rgb(229 231 235) !important;
  margin: 0 0 1.25rem !important;
}

.dark .homepage_wrapper .homepage_help_separator {
  border-color: rgb(55 65 81) !important;
}

.homepage_wrapper .homepage_help_inner {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem 1.5rem !important;
}

.homepage_wrapper .homepage_help_text {
  margin: 0 !important;
  flex: 1 1 12rem !important;
  max-width: 36rem !important;
  font-size: 0.75rem !important;
  line-height: 1.4 !important;
  color: rgb(41 37 36) !important;
}

.dark .homepage_wrapper .homepage_help_text {
  color: rgb(231 229 228) !important;
}

.homepage_wrapper .homepage_help_lead {
  font-weight: 700 !important;
  color: #ff4c00 !important;
}

.homepage_wrapper .homepage_help_actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.5rem !important;
  flex: 1 1 auto !important;
}

.homepage_wrapper .homepage_help_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.4rem 0.75rem !important;
  font-size: 0.75rem !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  border: 1px solid rgb(228 228 231) !important;
  border-radius: 0.375rem !important;
  color: rgb(41 37 36) !important;
  text-decoration: none !important;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background-color 0.15s ease !important;
}

.dark .homepage_wrapper .homepage_help_button {
  border-color: rgb(63 63 70) !important;
  color: rgb(231 229 228) !important;
}

@media (hover: hover) and (pointer: fine) {
  .homepage_wrapper .homepage_help_button:hover {
    border-color: #ff4c00 !important;
    color: #ff4c00 !important;
  }
}

.homepage_wrapper .homepage_help_button:focus-visible {
  outline: 2px solid #ff4c00 !important;
  outline-offset: 2px !important;
}

@media (max-width: 639px) {
  /*
   * Stack text + buttons without extra vertical spread: avoid space-between and flex-grow
   * on column axis (they created a large empty band between the paragraph and buttons).
   */
  .homepage_wrapper .homepage_help_inner {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0.75rem !important;
  }

  .homepage_wrapper .homepage_help_text {
    flex: 0 1 auto !important;
    max-width: none !important;
  }

  .homepage_wrapper .homepage_help_actions {
    flex: 0 1 auto !important;
    justify-content: flex-start !important;
  }

  .homepage_wrapper .homepage_help_button {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

.homepage_wrapper .card-group {
  gap: 0.75rem !important;
  /* Rows share the same height; cards stretch — inner link must stretch too or short descriptions break hover visuals */
  align-items: stretch !important;
}

/* Space below hero horizontal rule before the first card row */
.homepage_wrapper .homepage_account_bar {
  margin-top: 1.75rem !important;
}

.homepage_wrapper .homepage_product_cards {
  margin-top: 1.5rem !important;
}

/* Section label above product grid: same size as hero tagline (0.75rem / 1.4) */
.homepage_wrapper .homepage_explore_products_heading {
  margin: 0 0 0.75rem !important;
  padding: 0 !important;
  width: 100% !important;
  text-align: left !important;
  font-size: 0.75rem !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: rgb(41 37 36) !important;
}

.dark .homepage_wrapper .homepage_explore_products_heading {
  color: rgb(231 229 228) !important;
}

.homepage_wrapper .card-group .card {
  border-radius: 0.5rem;
  /* Match custom.css icon size + grid column-gap (pull description flush with icon) */
  --homepage-card-icon-size: 1.25rem;
  --homepage-card-icon-gap: 0.5rem;
  /* Fill grid row height so the clickable surface matches the visual card for every product */
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
}

.homepage_wrapper .card-group .card > a,
.homepage_wrapper .card-group .card > div:not(.card-arrow) {
  flex: 1 1 auto !important;
  align-self: stretch !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 2rem 1.5rem !important;
  gap: 0.375rem !important;
  box-sizing: border-box !important;
  border: 1px solid transparent !important;
  border-radius: 0.5rem !important;
  transition: border-color 0.2s ease, background-color 0.2s ease !important;
  /* Larger tap targets on touch devices; avoids double-tap zoom delay on legacy mobile browsers */
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(255, 76, 0, 0.12) !important;
}

/* Orange highlight on hover (pointer devices only — avoids sticky :hover on touch). */
@media (hover: hover) and (pointer: fine) {
  .homepage_wrapper .card-group .card:hover > a,
  .homepage_wrapper .card-group .card:hover > div:not(.card-arrow) {
    border-color: #ff4c00 !important;
    background-color: rgba(255, 76, 0, 0.06) !important;
  }

  .dark .homepage_wrapper .card-group .card:hover > a,
  .dark .homepage_wrapper .card-group .card:hover > div:not(.card-arrow) {
    background-color: rgba(255, 76, 0, 0.12) !important;
  }
}

/* Keyboard / focus-within: same accent without requiring hover. */
.homepage_wrapper .card-group .card:focus-within > a,
.homepage_wrapper .card-group .card:focus-within > div:not(.card-arrow) {
  border-color: #ff4c00 !important;
  background-color: rgba(255, 76, 0, 0.06) !important;
}

.dark .homepage_wrapper .card-group .card:focus-within > a,
.dark .homepage_wrapper .card-group .card:focus-within > div:not(.card-arrow) {
  background-color: rgba(255, 76, 0, 0.12) !important;
}

@media (prefers-reduced-motion: reduce) {
  .homepage_wrapper .card-group .card > a,
  .homepage_wrapper .card-group .card > div:not(.card-arrow) {
    transition: none !important;
  }
}

/*
 * Horizontal cards: row 1 = [ icon | title ]. Mintlify often nests the description in the
 * title column only, so body text aligns with the title. Pull it left by (icon + gap) so the
 * description starts on the same horizontal line as the icon; vars track icon size on mobile.
 */
.homepage_wrapper .card-group .card [data-component-part="card-content-container"] {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: var(--homepage-card-icon-gap) !important;
  row-gap: 0.35rem !important;
  align-items: start !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.homepage_wrapper .card-group .card [data-component-part="card-content-container"] > :first-child {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: start !important;
}

/* Mintlify often wraps title + body in one div; display:contents lets title sit row1 and body row2 */
.homepage_wrapper .card-group .card [data-component-part="card-content-container"] > :nth-child(2) {
  display: contents !important;
}

.homepage_wrapper .card-group .card [data-component-part="card-content-container"] [data-component-part="card-title"] {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

.homepage_wrapper .card-group .card [data-component-part="card-content-container"] [data-component-part="card-content"] {
  grid-row: 2 !important;
  min-width: 0 !important;
  padding-inline: 0 !important;
  /* Mintlify often nests body in the title column only — pull left by icon + gap */
  margin-inline-start: calc(-1 * (var(--homepage-card-icon-size) + var(--homepage-card-icon-gap))) !important;
  width: calc(100% + var(--homepage-card-icon-size) + var(--homepage-card-icon-gap)) !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* When title + body are direct grid children (e.g. display:contents), body already spans — no pull */
.homepage_wrapper .card-group .card [data-component-part="card-content-container"] > [data-component-part="card-title"]
  ~ [data-component-part="card-content"] {
  grid-column: 1 / -1 !important;
  margin-inline-start: 0 !important;
  width: 100% !important;
}

/* Flat DOM (no wrapper): icon, h2, then body */
.homepage_wrapper .card-group .card [data-component-part="card-content-container"] > h2 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

.homepage_wrapper .card-group .card [data-component-part="card-content-container"] > p {
  grid-row: 2 !important;
  padding-inline: 0 !important;
  margin-inline-start: calc(-1 * (var(--homepage-card-icon-size) + var(--homepage-card-icon-gap))) !important;
  width: calc(100% + var(--homepage-card-icon-size) + var(--homepage-card-icon-gap)) !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Flat DOM: description is already a full-width grid row under icon + title */
.homepage_wrapper .card-group .card [data-component-part="card-content-container"] > h2 ~ p {
  grid-column: 1 / -1 !important;
  margin-inline-start: 0 !important;
  width: 100% !important;
}

/*
 * Product names: reserve exactly two lines of height on every card so row 2 (description)
 * starts at the same vertical position across the grid, whether the title uses 1 or 2 lines.
 */
.homepage_wrapper .card-group .card h2,
.homepage_wrapper .card-group .card [data-component-part="card-title"] h2 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  min-height: calc(2 * 1.25em) !important;
  max-height: calc(2 * 1.25em) !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  box-sizing: border-box !important;
}

.homepage_wrapper .card-group .card img {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

/*
 * Descriptions: Mintlify .prose often sets body text to ~1rem; override here.
 * 0.75rem ≈ 12px at a 16px root; scales with zoom and user font settings.
 */
.homepage_wrapper .card-group .card [data-component-part="card-content"],
.homepage_wrapper .card-group .card [data-component-part="card-content"] .prose {
  font-size: 0.75rem !important;
  line-height: 1.4 !important;
  /* Short one-line blurbs (e.g. Gclaw, Streaming) still reserve two lines so row layout matches peers */
  min-height: calc(2 * 0.75rem * 1.4) !important;
  /* Mintlify .prose can add horizontal padding and shift body text past the icon column */
  padding-inline: 0 !important;
  max-width: none !important;
}

.homepage_wrapper .card-group .card [data-component-part="card-content"] p,
.homepage_wrapper .card-group .card [data-component-part="card-content"] .prose p,
.homepage_wrapper .card-group .card p,
.homepage_wrapper .card-group .card .prose p {
  font-size: 0.75rem !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  margin: 0 0 0.375rem !important;
  padding-inline-start: 0 !important;
  text-indent: 0 !important;
}

.homepage_wrapper .card-group .card p:last-of-type {
  margin-bottom: 0.25rem !important;
}

.homepage_wrapper .card-group .card ul,
.homepage_wrapper .card-group .card .prose ul {
  margin: 0.25rem 0 0 !important;
  padding-left: 1rem !important;
  font-size: 0.75rem !important;
  line-height: 1.35 !important;
}

.homepage_wrapper .card-group .card li,
.homepage_wrapper .card-group .card .prose li {
  margin-top: 0.125rem !important;
  margin-bottom: 0 !important;
}

/* Homepage card body links (if any): default body color, orange on hover */
.homepage_wrapper .card-group .card [data-component-part="card-content"] a {
  color: rgb(41 37 36) !important;
  text-decoration: none !important;
}

.dark .homepage_wrapper .card-group .card [data-component-part="card-content"] a {
  color: rgb(231 229 228) !important;
}

.homepage_wrapper .card-group .card [data-component-part="card-content"] a:hover {
  color: #ff4c00 !important;
}

.homepage_wrapper .card-group .card [data-component-part="card-content"] a:focus-visible {
  outline: 2px solid #ff4c00;
  outline-offset: 2px;
  border-radius: 2px;
}

.gcore-title {
  font-size: 4.5rem;
  font-weight: 600;
  margin: 0;
  line-height: 105%;
  letter-spacing: -1px;
}

/* Tablet: adjust title size for medium screens (640px - 1024px) */
@media (min-width: 640px) and (max-width: 1024px) {
  .gcore-title {
    font-size: 3rem !important;
  }

  .homepage_wrapper {
    width: 90% !important;
    padding: 0 1rem !important;
  }

  .gcore_hero {
    margin-bottom: 2rem !important;
  }
}

/* Mobile: 2 columns for product cards on homepage */
@media (max-width: 639px) {
  .homepage_wrapper .card-group {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }

  /* Slightly less padding than desktop while keeping roomier cards */
  .homepage_wrapper .card-group .card > a,
  .homepage_wrapper .card-group .card > div:not(.card-arrow) {
    padding: 1.25rem 1rem !important;
    gap: 0.375rem !important;
  }

  /* Match two-line title block to mobile line-height so description rows still align */
  .homepage_wrapper .card-group .card h2,
  .homepage_wrapper .card-group .card [data-component-part="card-title"] h2 {
    font-size: 1rem !important;
    line-height: 1.2 !important;
    min-height: calc(2 * 1.2em) !important;
    max-height: calc(2 * 1.2em) !important;
  }

  /* Smaller icons on mobile — keep pull math in sync with .card img rules above */
  .homepage_wrapper .card-group .card svg,
  .homepage_wrapper .card-group .card img {
    width: 1.125rem !important;
    height: 1.125rem !important;
  }

  .homepage_wrapper .card-group .card {
    --homepage-card-icon-size: 1.125rem;
  }

  /* Adjust homepage wrapper for mobile */
  .homepage_wrapper {
    width: 100% !important;
    padding: 0 1rem !important;
    margin: 1.5rem auto !important;
  }

  /* Smaller hero title on mobile */
  .gcore-title {
    font-size: 2rem !important;
  }

  /* Reduce hero margin on mobile */
  .gcore_hero {
    margin-bottom: 1.5rem !important;
  }
}