@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Open+Sans:wght@400;500;600;700;800&display=swap');

/*
 * Golf Genius API v2 — site theme.
 *
 * Derived from the Platform API (v3) theme in ../theme.css, without the rules for
 * v3's product sidebar and product cards. Keep the brand tokens in step by hand.
 *
 * Paste-able as-is into Scalar's custom theme editor, or loaded from disk
 * via siteConfig.head.styles. Self-contained either way — the font comes from
 * the @import above, not from head.links.
 *
 * Palette taken from golfgenius.com, not invented:
 *   #ff6633  brand orange   — the SIGN IN CTA, the logo mark
 *   #333f48  charcoal       — body copy, dark sections, the footer
 *   #5b6670  slate          — secondary copy
 *   #c1c5c8  mist           — the tint behind alternating sections
 *
 * Brand orange at full strength is reserved for the logo. On a documentation
 * page it is loud over any area larger than a mark, so the chrome uses two
 * derived tones of the same hue: a deep one for filled controls (4.8:1 under
 * white text) and a soft tint for the thin decorative lines.
 * Open Sans matches the current website; IBM Plex Mono distinguishes code.
 * The supplied 2018 guide informs spacing and logo handling, not this palette.
 *
 * Tokens supply the site palette. The scoped table and sidebar rules below
 * handle layout details verified against the pinned Scalar CLI version.
 */

:root {
  /* Brand constants. Referenced by both modes below. */
  --gg-orange: #ff6633;
  --gg-orange-deep: #cc4418;
  --gg-orange-deep-hover: #b53b13;
  --gg-orange-soft: color-mix(in srgb, var(--gg-orange) 45%, var(--scalar-background-1));
  --gg-charcoal: #333f48;
  --gg-slate: #5b6670;

  /* Golf Genius underlines its links; so do we, rather than colouring them. */
  --scalar-text-decoration: underline;
  --scalar-text-decoration-hover: underline;

  --scalar-font: 'Open Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --scalar-font-code: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  --scalar-header-height: 64px;
  --scalar-card-padding: 24px;
  --scalar-card-inter-element-gap: 12px;
  --scalar-heading-1: 34px;
  --scalar-heading-2: 24px;

  --scalar-radius: 8px;
  --scalar-radius-md: 8px;
  --scalar-radius-lg: 12px;
  --scalar-radius-xl: 16px;
}

.light-mode {
  --scalar-background-1: #ffffff;
  --scalar-background-2: #f6f8fa;
  --scalar-background-3: #edf1f4;
  --scalar-background-accent: #eef0f1;

  --scalar-color-1: var(--gg-charcoal);
  --scalar-color-2: var(--gg-slate);
  --scalar-color-3: #7c858d;

  --scalar-color-accent: var(--gg-charcoal);
  --scalar-border-color: #e1e6eb;
  --gg-sidebar-surface: #f8fafb;
}

.dark-mode {
  /* Dark greys built on the charcoal's own hue (206°), not neutral black. */
  --scalar-background-1: #171d22;
  --scalar-background-2: #1e262c;
  --scalar-background-3: #283139;
  --scalar-background-accent: #283139;

  --scalar-color-1: #e7eaec;
  --scalar-color-2: #a3acb4;
  --scalar-color-3: #79838b;

  /* A lighter, less saturated orange: full brand orange glows on dark grey. */
  --scalar-color-accent: #f0865a;
  --scalar-border-color: var(--gg-charcoal);
  --gg-sidebar-surface: #141b21;
}

/* A quiet navigation surface shared by guides and the reference. */
.light-mode,
.dark-mode {
  --scalar-sidebar-background-1: var(--gg-sidebar-surface);
  --scalar-sidebar-color-1: var(--scalar-color-1);
  --scalar-sidebar-color-2: var(--scalar-color-2);
  --scalar-sidebar-border-color: var(--scalar-border-color);

  --scalar-sidebar-item-hover-background: var(--scalar-background-2);
  --scalar-sidebar-item-hover-color: var(--scalar-sidebar-color-1);

  --scalar-sidebar-item-active-background: var(--scalar-background-accent);
  --scalar-sidebar-color-active: var(--scalar-color-accent);

  --scalar-sidebar-indent-border: var(--scalar-sidebar-border-color);
  --scalar-sidebar-indent-border-hover: var(--scalar-color-3);
  --scalar-sidebar-indent-border-active: var(--scalar-color-accent);

  --scalar-sidebar-search-background: var(--scalar-background-2);
  --scalar-sidebar-search-color: var(--scalar-color-3);
  --scalar-sidebar-search-border-color: var(--scalar-border-color);
}

/*
 * Semantic colours — the HTTP method badges, callouts and status codes.
 *
 * Two deliberate moves here. The orange is pulled off brand orange, because
 * Scalar paints PUT with it and at #ff6633 a PUT badge is indistinguishable
 * from brand chrome. The yellow is pushed to olive, because PUT and PATCH
 * otherwise land 22 RGB units apart and read as the same colour.
 * Every value clears 4.5:1 on its own background.
 */
.light-mode {
  --scalar-color-green: #04794a;
  --scalar-color-red: #c8102e;   /* Golf Genius alert red */
  --scalar-color-yellow: #8c7400;  /* PATCH — olive, to part it from PUT */
  --scalar-color-blue: #0f62a8;
  --scalar-color-orange: #b85000;  /* PUT */
  --scalar-color-purple: #5b3bbd;
  --scalar-color-query: #00707a;

  --scalar-link-color: var(--scalar-color-1);
  --scalar-link-color-hover: var(--scalar-color-accent);

  /* Deep brand orange under a white label: the same hue, without the glare. */
  --scalar-button-1: var(--gg-orange-deep);
  --scalar-button-1-hover: var(--gg-orange-deep-hover);
  --scalar-button-1-color: #ffffff;

  --scalar-tooltip-background: var(--gg-charcoal);
  --scalar-tooltip-color: #ffffff;

  --scalar-color-alert: color-mix(in srgb, var(--scalar-color-orange), var(--scalar-color-1) 20%);
  --scalar-color-danger: color-mix(in srgb, var(--scalar-color-red), var(--scalar-color-1) 20%);

  --scalar-background-alert: color-mix(in srgb, var(--scalar-color-orange), var(--scalar-background-1) 94%);
  --scalar-background-danger: color-mix(in srgb, var(--scalar-color-red), var(--scalar-background-1) 94%);
}

.dark-mode {
  --scalar-color-green: #3fcb87;
  --scalar-color-red: #ff6b6b;
  --scalar-color-yellow: #d8c352;  /* PATCH */
  --scalar-color-blue: #63b3ed;
  --scalar-color-orange: #e08b3c;  /* PUT */
  --scalar-color-purple: #b39bf5;
  --scalar-color-query: #58ccc6;

  --scalar-link-color: var(--scalar-color-1);
  --scalar-link-color-hover: var(--scalar-color-accent);

  --scalar-button-1: var(--gg-orange-deep);
  --scalar-button-1-hover: var(--gg-orange-deep-hover);
  --scalar-button-1-color: #ffffff;

  --scalar-tooltip-background: var(--scalar-background-3);
  --scalar-tooltip-color: var(--scalar-color-1);

  --scalar-color-alert: color-mix(in srgb, var(--scalar-color-orange), var(--scalar-color-1) 20%);
  --scalar-color-danger: color-mix(in srgb, var(--scalar-color-red), var(--scalar-color-1) 20%);

  --scalar-background-alert: color-mix(in srgb, var(--scalar-color-orange), var(--scalar-background-1) 90%);
  --scalar-background-danger: color-mix(in srgb, var(--scalar-color-red), var(--scalar-background-1) 90%);
}

/*
 * Markdown tables inside the API reference.
 *
 * Scalar lays out reference tables with `table-layout: fixed` and
 * `word-break: break-word`, so in the ~660px description column every
 * column gets an equal share and headers break mid-word ("Pre fix",
 * "Oper ation s"). Let the browser size columns to their content, keep
 * words whole, and keep header labels on one line. Long values still wrap
 * at spaces, and a long token inside inline code may break rather than
 * push the table past the column.
 */
html .scalar-app .markdown table {
  table-layout: auto;
  width: 100%;
}
html .scalar-app .markdown th,
html .scalar-app .markdown td {
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: manual;
}
html .scalar-app .markdown th {
  white-space: nowrap;
}
html .scalar-app .markdown td code {
  overflow-wrap: anywhere;
}

/* Shared documentation shell. Keep Scalar's navigation and focus behavior. */
.t-header {
  border-top: 3px solid var(--gg-orange-deep);
}
.t-header .t-header__row {
  padding-inline: 20px;
  gap: 24px;
}
.t-header .t-header__brand {
  font-weight: 650;
  letter-spacing: -0.025em;
}
.t-header img.logo {
  width: 176px;
  height: auto;
  max-height: 40px;
  object-fit: contain;
}
.t-header .t-header__item--button:hover {
  box-shadow: inset 0 0 0 2px var(--scalar-button-1-color);
}
.t-header .t-header__item--selected {
  color: var(--scalar-color-accent);
  border-bottom-color: var(--gg-orange-deep);
}
.t-header .t-header__item--button {
  padding: 10px 16px;
  border-radius: 8px;
}
.t-doc__sidebar .search-row {
  padding-top: 18px;
  padding-bottom: 10px;
}
.t-doc__sidebar .search {
  min-height: 36px;
  border-radius: 8px;
  background: var(--scalar-background-1);
}
.t-doc__sidebar [class~="group/button"] {
  line-height: 1.45;
}

/* Readable page typography for both guides and generated API pages. */
.page-content h1 {
  font-size: clamp(28px, 2.5vw, 36px);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.035em;
}
.page-content h2 {
  font-weight: 600;
  letter-spacing: -0.025em;
}
.page-content h3 {
  font-weight: 600;
  letter-spacing: -0.015em;
}
.page-content .t-editor__paragraph,
.page-content .markdown p {
  line-height: 1.7;
}
.page-content .t-editor__table th {
  font-weight: 600;
  color: var(--scalar-color-1);
}
.page-content .t-editor__table td {
  vertical-align: top;
}
.page-content .t-editor__table td code {
  overflow-wrap: anywhere;
}
.page-content .t-editor__code-block,
.page-content .t-editor__table {
  border-radius: 10px;
}

/* Landing page: a wider overview with a short introduction and real links. */
.page:has(.gg-guide-intro) > .content {
  max-width: 1080px;
  margin-inline: auto;
}
.page:has(.gg-guide-intro) h1 {
  font-size: clamp(34px, 3.5vw, 46px);
  max-width: 780px;
}
.gg-guide-intro {
  margin-top: 20px;
  margin-bottom: 44px;
}
.gg-guide-intro .gg-lead {
  max-width: 720px;
  color: var(--scalar-color-2);
  font-size: 18px;
  line-height: 1.7;
}
/* Paragraphs inside the intro's HTML block get no spacing from Scalar. */
.gg-guide-intro .gg-lead + p {
  max-width: 720px;
  margin-top: 12px;
}
.gg-guide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.page-content a.gg-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 18px;
  border: 1px solid var(--scalar-border-color);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}
.page-content a.gg-button--primary {
  background: var(--scalar-button-1);
  color: var(--scalar-button-1-color);
  border-color: var(--scalar-button-1);
}
.page-content a.gg-button--primary:hover {
  background: var(--scalar-button-1-hover);
  box-shadow: inset 0 0 0 1px var(--scalar-button-1-color);
}
.page-content a.gg-button--secondary {
  background: var(--scalar-background-1);
  color: var(--scalar-color-1);
}
.page-content a.gg-button--secondary:hover {
  background: var(--scalar-background-2);
}
.page-content a.gg-button:focus-visible,
.gg-guide-cards .card-stretched-link:focus-visible {
  outline: 2px solid var(--scalar-color-accent);
  outline-offset: 4px;
  border-radius: 8px;
}

/* Native Scalar cards stay searchable and export as documentation text. */
.page-content .t-editor__row.gg-guide-cards > .row.t-editor__grid {
  gap: 16px;
  align-items: stretch;
}
.page-content .gg-guide-cards .t-editor__card {
  height: 100%;
  box-shadow: 0 2px 4px rgb(0 0 0 / 2%);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.page-content .gg-guide-cards .t-editor__card:has(a:hover),
.page-content .gg-guide-cards .t-editor__card:focus-within {
  border-color: var(--scalar-color-2);
  box-shadow: 0 4px 14px rgb(0 0 0 / 5%);
}
.page-content .gg-guide-cards .card-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.page-content .gg-guide-cards .t-editor__icon {
  color: var(--scalar-color-accent);
}
.page-content .gg-guide-cards .card-content__text {
  font-size: 14px;
}

/* Native steps and callouts make the integration sequence easier to scan. */
.page-content .t-editor__step {
  --marker-diameter: 28px;
  --gap: 14px;
}
.page-content .t-editor__step .t-editor__step-marker {
  background: var(--scalar-background-2);
  border-color: var(--scalar-border-color);
  color: var(--scalar-color-1);
}
.page-content .t-editor__step .t-editor__step-content {
  margin-left: 42px;
}
.page-content .t-editor__callout {
  border-radius: 10px;
  padding: 16px 18px;
}

@media (max-width: 640px) {
  :root { --scalar-header-height: 60px; }
  .t-header .t-header__row { padding-inline: 16px; gap: 8px; }
  .page-content .t-editor__row.gg-guide-cards > .row.t-editor__grid { grid-template-columns: 1fr; }
  .gg-guide-intro { margin-bottom: 32px; }
  .gg-guide-intro .gg-lead { font-size: 16px; }
  .page-content a.gg-button { width: 100%; }
  .page-content .t-editor__step .t-editor__step-content { margin-left: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-content .gg-guide-cards .t-editor__card { transition: none; }
}