/*
 * ============================================================================
 * Wave Developer Portal — Zendesk Guide theme styles
 * ----------------------------------------------------------------------------
 * Generic, reusable building blocks. Built to mirror Wave Lighthouse component
 * patterns (https://wave-lighthouse.s3.amazonaws.com/index.html) and Buoyant
 * design tokens (https://github.com/waveaccounting/buoyant-utils) so that the
 * Zendesk theme stays visually consistent with the rest of the Wave product.
 *
 * Token names roughly follow Buoyant's exported names but are scoped here as
 * CSS custom properties (--wave-*) so that the theme can ship without any JS
 * dependency on @wave/buoyant-utils.
 *
 * ----------------------------------------------------------------------------
 * Isolation strategy
 * ----------------------------------------------------------------------------
 * Every selector in this file is scoped under the `.dev-portal-theme` wrapper
 * class via native CSS nesting (Chrome 112+, Firefox 117+, Safari 16.5+).
 * Pages that opt-in by wrapping their content in `<div class="dev-portal-theme">`
 * pick up these styles; pages that don't are entirely unaffected. This means
 * we can ship this file alongside the existing Zendesk `style.css` without
 * touching it.
 *
 * Custom properties (`--wave-*`) are also scoped to the wrapper so they cannot
 * collide with any tokens defined globally elsewhere in the theme.
 * ============================================================================
 */

/* ---------------------------------------------------------------------------
 * 1. Design tokens (mirrors @wave/buoyant-utils) — scoped to wrapper
 * ------------------------------------------------------------------------- */
.dev-portal-theme {
  /* Foreground */
  --wave-fg-default: #182127;
  --wave-fg-hint: #515f66;
  --wave-fg-link: #0040ff;

  /* Background */
  --wave-bg-default: #ffffff;
  --wave-bg-hero: #e0f2ff; /* baseColorBlue5 — light blue sidebar / hero tint */
  --wave-bg-article-header: #1e64d0; /* deeper blue used on article header band */
  --wave-bg-footer: #001b66; /* footer navy */

  /* Stroke */
  --wave-stroke-default: #d4dde3;
  --wave-stroke-active: #0040ff;

  /* Foreground (light, used on dark blue band) */
  --wave-fg-light: #ffffff;

  /* Accent (orange step marker used in numbered Get-started lists) */
  --wave-bg-accent-step: #f49342;
  --wave-fg-accent-step: #ffffff;

  /* Brand / button */
  --wave-button-bg-primary: #0040ff;
  --wave-button-bg-primary-hover: #0033cc;
  --wave-button-fg-primary: #ffffff;
  --wave-button-stroke-secondary: #0040ff;
  --wave-button-fg-secondary: #0040ff;
  --wave-button-bg-secondary-hover: #f0f6ff;

  /* Spacing scale */
  --wave-space-xsmall: 4px;
  --wave-space-small: 8px;
  --wave-space-default: 16px;
  --wave-space-medium: 24px;
  --wave-space-large: 32px;
  --wave-space-xlarge: 40px;

  /* Radius */
  --wave-radius-default: 8px;
  --wave-radius-rounded: 500px;

  /* Typography */
  --wave-font-body: 'Dinero Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --wave-font-display: 'STIX Two Text', 'Times New Roman', Georgia, serif;
  --wave-line-height: 1.4;

  /* Layout */
  --wave-content-max-width: 1044px;

  /* -------------------------------------------------------------------------
   * Isolation reset — neutralises common style leaks from the host theme's
   * style.css *inside* the wrapper only. Kept intentionally small.
   * --------------------------------------------------------------------- */
  & a { color: inherit; text-decoration: none; }
  & button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
  & ul, & ol { list-style: none; margin: 0; padding: 0; }
  & h1, & h2, & h3, & h4, & h5, & h6, & p { margin: 0; }
  & img { display: block; max-width: 100%; }
  & *, & *::before, & *::after { box-sizing: border-box; }

  /* -------------------------------------------------------------------------
   * 2. Base typography helpers
   * --------------------------------------------------------------------- */
  & .wave-text {
  font-family: var(--wave-font-body);
  font-size: 16px;
  line-height: var(--wave-line-height);
  color: var(--wave-fg-default);
  margin: 0;
}

.wave-text--lead {
  font-size: 19px;
  font-weight: 400;
}

.wave-text--small {
  font-size: 14px;
  color: var(--wave-fg-hint);
}

.wave-heading {
  font-family: var(--wave-font-body);
  font-size: 19px;
  font-weight: 600;
  line-height: var(--wave-line-height);
  color: var(--wave-fg-default);
  margin: 0;
}

.wave-heading--display {
  font-family: var(--wave-font-display);
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
}

/* ---------------------------------------------------------------------------
 * 3. Button (mirrors WaveButton from Lighthouse)
 * ------------------------------------------------------------------------- */
.wave-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wave-space-small);
  padding: 9px 20px;
  font-family: var(--wave-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: var(--wave-line-height);
  text-decoration: none;
  border-radius: var(--wave-radius-rounded);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wave-btn--primary {
  background: var(--wave-button-bg-primary);
  color: var(--wave-button-fg-primary);
  border-color: var(--wave-button-bg-primary);
}

.wave-btn--primary:hover,
.wave-btn--primary:focus-visible {
  background: var(--wave-button-bg-primary-hover);
  border-color: var(--wave-button-bg-primary-hover);
  color: var(--wave-button-fg-primary);
}

.wave-btn--secondary {
  background: transparent;
  color: var(--wave-button-fg-secondary);
  border-color: var(--wave-button-stroke-secondary);
}

.wave-btn--secondary:hover,
.wave-btn--secondary:focus-visible {
  background: var(--wave-button-bg-secondary-hover);
}

.wave-btn--small {
  padding: 4px 16px;
  font-size: 14px;
}

/* ---------------------------------------------------------------------------
 * 4. Layout container (1044px content rail)
 * ------------------------------------------------------------------------- */
.wave-container {
  width: 100%;
  max-width: var(--wave-content-max-width);
  margin: 0 auto;
  padding: 0 var(--wave-space-medium);
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
 * 5. Developer portal — Hero
 * ------------------------------------------------------------------------- */
.dev-portal-hero {
  background: var(--wave-bg-hero);
  padding: var(--wave-space-xlarge) var(--wave-space-medium);
  width: 100%;
  box-sizing: border-box;
}

.dev-portal-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wave-space-xlarge);
  max-width: var(--wave-content-max-width);
  margin: 0 auto;
}

.dev-portal-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--wave-space-small);
  max-width: 560px;
}

.dev-portal-hero__title {
  font-family: var(--wave-font-display);
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  color: var(--wave-fg-default);
  margin: 0;
}

.dev-portal-hero__description {
  font-family: var(--wave-font-body);
  font-size: 19px;
  line-height: var(--wave-line-height);
  color: var(--wave-fg-default);
  margin: 0;
}

.dev-portal-hero__actions {
  display: flex;
  gap: var(--wave-space-small);
  padding-top: var(--wave-space-medium);
}

.dev-portal-hero__illustration {
  flex-shrink: 0;
  width: 380px;
  height: 320px;
  object-fit: contain;
}

/* ---------------------------------------------------------------------------
 * 6. Developer portal — Navigation cards
 * ------------------------------------------------------------------------- */
.dev-portal-cards {
  padding: var(--wave-space-xlarge) var(--wave-space-medium);
  width: 100%;
  box-sizing: border-box;
}

.dev-portal-cards__inner {
  max-width: var(--wave-content-max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--wave-space-medium);
}

.dev-portal-cards__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wave-space-medium);
}

.dev-portal-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--wave-bg-default);
  border: 1px solid var(--wave-stroke-default);
  border-radius: var(--wave-radius-default);
  padding: var(--wave-space-default);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.dev-portal-card:hover,
.dev-portal-card:focus-visible {
  border-color: var(--wave-button-stroke-secondary);
  box-shadow: 0 4px 12px rgba(0, 64, 255, 0.08);
  transform: translateY(-1px);
  outline: none;
}

.dev-portal-card--with-icon {
  min-height: 224px;
}

.dev-portal-card--compact {
  min-height: 104px;
}

.dev-portal-card__icon {
  width: 28px;
  height: 28px;
  color: var(--wave-fg-default);
  margin-bottom: var(--wave-space-default);
}

.dev-portal-card__icon svg {
  width: 100%;
  height: 100%;
}

.dev-portal-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--wave-space-small);
}

.dev-portal-card__title {
  font-family: var(--wave-font-body);
  font-size: 19px;
  font-weight: 600;
  line-height: var(--wave-line-height);
  color: var(--wave-fg-default);
  margin: 0;
}

.dev-portal-card__description {
  font-family: var(--wave-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: var(--wave-line-height);
  color: var(--wave-fg-default);
  margin: 0;
}

/* ---------------------------------------------------------------------------
 * 7. Page header (breadcrumb + title)
 *
 * Shared across the article, section and category landing templates. Mirrors
 * the "header" frame from Figma (1044px content rail, 24px gap between the
 * breadcrumb and the 38px page title).
 * ------------------------------------------------------------------------- */
.dev-portal-page-header {
  background: var(--wave-bg-default);
  padding: var(--wave-space-xlarge) var(--wave-space-medium) var(--wave-space-large);
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid var(--wave-stroke-default);
}

.dev-portal-page-header__inner {
  max-width: var(--wave-content-max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--wave-space-small);
}

.dev-portal-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wave-space-xsmall);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--wave-font-body);
  font-size: 14px;
  color: var(--wave-fg-hint);
}

.dev-portal-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--wave-space-xsmall);
}

.dev-portal-breadcrumb__link {
  color: var(--wave-fg-link);
  text-decoration: none;
}

.dev-portal-breadcrumb__link:hover,
.dev-portal-breadcrumb__link:focus-visible {
  text-decoration: underline;
}

.dev-portal-breadcrumb__separator {
  color: var(--wave-fg-hint);
  user-select: none;
}

.dev-portal-breadcrumb__current {
  color: var(--wave-fg-default);
}

.dev-portal-page-header__title {
  font-family: var(--wave-font-display);
  font-size: 38px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--wave-fg-default);
  margin: 0;
}

.dev-portal-page-header__description {
  font-family: var(--wave-font-body);
  font-size: 19px;
  line-height: var(--wave-line-height);
  color: var(--wave-fg-default);
  margin: 0;
}

/* ---------------------------------------------------------------------------
 * 8. Article page — 2-column layout + body
 *
 * Layout:
 *   .dev-portal-article-layout  — CSS grid wrapper (sidebar + main column)
 *   .dev-portal-sidebar         — sticky left nav of sibling articles
 *   .dev-portal-article         — main column wrapping the rich-text body
 *
 * Body styles target raw HTML elements *inside* `.dev-portal-article__body`
 * because Zendesk emits plain tags (h2, p, ul, pre, code, blockquote, …).
 * ------------------------------------------------------------------------- */
.dev-portal-article-layout {
  width: 100%;
  max-width: var(--wave-content-max-width);
  margin: 0 auto;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 285px minmax(0, 1fr);
  align-items: stretch;
}

.dev-portal-sidebar {
  background: var(--wave-bg-hero);
  font-family: var(--wave-font-body);
  align-self: stretch;
}

.dev-portal-sidebar__inner {
  display: flex;
  flex-direction: column;
  gap: var(--wave-space-medium);
  padding: var(--wave-space-xlarge) var(--wave-space-default) var(--wave-space-xlarge) 0;
}

.dev-portal-sidebar__heading {
  font-family: var(--wave-font-body);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wave-fg-default);
  margin: 0;
}

.dev-portal-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wave-space-default);
  border-left: none;
}

.dev-portal-sidebar__item {
  margin: 0;
}

.dev-portal-sidebar__link {
  display: block;
  padding: 0;
  margin-left: 0;
  border-left: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--wave-fg-link);
  text-decoration: none;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.dev-portal-sidebar__link:hover,
.dev-portal-sidebar__link:focus-visible {
  color: var(--wave-fg-link);
  text-decoration: underline;
  outline: none;
}

.dev-portal-sidebar__link.is-active {
  color: var(--wave-fg-default);
  font-weight: 700;
  cursor: default;
  text-decoration: none;
}

.dev-portal-article {
  min-width: 0; /* prevents `<pre>` from breaking the grid layout */
  padding: var(--wave-space-xlarge) var(--wave-space-default) var(--wave-space-xlarge) var(--wave-space-medium);
  display: flex;
  flex-direction: column;
}

.dev-portal-article__body {
  min-width: 0;
  font-family: var(--wave-font-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--wave-fg-default);
}

.dev-portal-article__meta {
  margin-top: var(--wave-space-medium);
  padding-top: var(--wave-space-small);
  font-family: var(--wave-font-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--wave-fg-hint);
}

.dev-portal-article__body > * + * {
  margin-top: var(--wave-space-default);
}

.dev-portal-article__body h2 {
  font-family: var(--wave-font-body);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.4;
  margin-top: var(--wave-space-medium);
  margin-bottom: var(--wave-space-small);
}

.dev-portal-article__body h3 {
  font-size: 19px;
  font-weight: 600;
  margin-top: var(--wave-space-large);
  margin-bottom: var(--wave-space-xsmall);
}

.dev-portal-article__body a {
  color: var(--wave-fg-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.dev-portal-article__body ul,
.dev-portal-article__body ol {
  padding-left: var(--wave-space-medium);
}

/* Restore disc bullets for plain `<ul>` (the wrapper reset strips list-style). */
.dev-portal-article__body ul {
  list-style: disc outside;
}

/*
 * Numbered Get-started step lists — orange filled circle with white numeral.
 * Authors get this automatically on any `<ol>` inside an article body.
 * If a plain decimal list is ever needed, add an explicit `.no-step-markers`
 * class on the `<ol>` in the Zendesk editor to opt out.
 */
.dev-portal-article__body ol {
  list-style: none;
  padding-left: 0;
  counter-reset: dev-portal-step;
}

.dev-portal-article__body ol > li {
  position: relative;
  padding-left: calc(var(--wave-space-large) + var(--wave-space-default));
  counter-increment: dev-portal-step;
}

.dev-portal-article__body ol > li::before {
  content: counter(dev-portal-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--wave-bg-accent-step);
  color: var(--wave-fg-accent-step);
  font-family: var(--wave-font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}

.dev-portal-article__body ol.no-step-markers {
  list-style: decimal outside;
  padding-left: var(--wave-space-medium);
  counter-reset: none;
}

.dev-portal-article__body ol.no-step-markers > li {
  padding-left: 0;
  counter-increment: none;
}

.dev-portal-article__body ol.no-step-markers > li::before {
  content: none;
}

.dev-portal-article__body li + li {
  margin-top: var(--wave-space-xsmall);
}

.dev-portal-article__body code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: #f4f6f8;
  border-radius: 4px;
  padding: 2px 6px;
}

.dev-portal-article__body pre {
  background: #0b1320;
  color: #e6edf3;
  border-radius: var(--wave-radius-default);
  padding: var(--wave-space-default);
  overflow-x: auto;
}

.dev-portal-article__body pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

.dev-portal-article__body blockquote {
  border-left: 2px solid var(--wave-stroke-active);
  background: transparent;
  margin: var(--wave-space-default) 0;
  padding: var(--wave-space-small) var(--wave-space-medium);
  border-radius: 0;
  font-size: 19px;
  line-height: 1.4;
  color: var(--wave-fg-default);
}

.dev-portal-article__body blockquote a {
  color: var(--wave-fg-link);
  font-weight: 700;
  text-decoration: none;
}

.dev-portal-article__body blockquote a:hover,
.dev-portal-article__body blockquote a:focus-visible {
  text-decoration: underline;
}

.dev-portal-article__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--wave-radius-default);
  border: 1px solid var(--wave-stroke-default);
}

.dev-portal-article__body table {
  width: 100%;
  border-collapse: collapse;
}

.dev-portal-article__body th,
.dev-portal-article__body td {
  text-align: left;
  padding: var(--wave-space-small) var(--wave-space-default);
  border-bottom: 1px solid var(--wave-stroke-default);
}

/* ---------------------------------------------------------------------------
 * 9. Section landing — article list
 *
 * Used by section_page.hbs. A vertical list of articles inside the current
 * section.
 * ------------------------------------------------------------------------- */
.dev-portal-article-list {
  width: 100%;
  padding: var(--wave-space-xlarge) var(--wave-space-medium);
  box-sizing: border-box;
}

.dev-portal-article-list__inner {
  max-width: var(--wave-content-max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dev-portal-article-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wave-space-default);
  padding: var(--wave-space-default) 0;
  border-bottom: 1px solid var(--wave-stroke-default);
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.15s ease;
}

.dev-portal-article-list__item:hover,
.dev-portal-article-list__item:focus-visible {
  padding-left: var(--wave-space-xsmall);
  outline: none;
}

.dev-portal-article-list__item:hover .dev-portal-article-list__title,
.dev-portal-article-list__item:focus-visible .dev-portal-article-list__title {
  color: var(--wave-fg-link);
}

.dev-portal-article-list__title {
  font-family: var(--wave-font-body);
  font-size: 19px;
  font-weight: 600;
  margin: 0;
  color: var(--wave-fg-default);
  transition: color 0.15s ease;
}

.dev-portal-article-list__chevron {
  flex-shrink: 0;
  color: var(--wave-fg-hint);
  font-size: 20px;
  line-height: 1;
}

/* ---------------------------------------------------------------------------
 * 11. Page-header variants
 *
 *  · `.dev-portal-section-intro`           — light-blue intro band used by
 *                                            section landings.
 *  · `.dev-portal-page-header--article`    — deeper-blue band used by
 *                                            article pages (Figma node
 *                                            2073:1363 et al.).
 * ------------------------------------------------------------------------- */
.dev-portal-section-intro {
  background: var(--wave-bg-hero);
  border-bottom: none;
}

.dev-portal-section-intro .dev-portal-page-header__title {
  font-size: 48px;
}

.dev-portal-page-header--article {
  background: var(--wave-bg-article-header);
  border-bottom: none;
  padding: var(--wave-space-xlarge) var(--wave-space-medium);
}

.dev-portal-page-header--article .dev-portal-page-header__inner {
  gap: var(--wave-space-small);
}

.dev-portal-page-header--article .dev-portal-breadcrumb,
.dev-portal-page-header--article .dev-portal-breadcrumb__separator,
.dev-portal-page-header--article .dev-portal-breadcrumb__current {
  color: var(--wave-fg-light);
}

.dev-portal-page-header--article .dev-portal-breadcrumb__link {
  color: var(--wave-fg-light);
}

.dev-portal-page-header--article .dev-portal-page-header__title {
  font-family: var(--wave-font-body);
  font-size: 33px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--wave-fg-light);
}

/* ---------------------------------------------------------------------------
 * 12. Responsive
 * ------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .dev-portal-hero__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wave-space-medium);
  }

  .dev-portal-hero__illustration {
    width: 100%;
    max-width: 380px;
    height: auto;
  }

  .dev-portal-cards__row {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Article page: stack sidebar above the article body */
  .dev-portal-article-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .dev-portal-sidebar__inner {
    padding: var(--wave-space-medium) var(--wave-space-medium);
  }

  .dev-portal-article {
    padding: var(--wave-space-medium) var(--wave-space-medium) var(--wave-space-xlarge);
  }
}

@media (max-width: 600px) {
  .dev-portal-hero__title {
    font-size: 40px;
  }

  .dev-portal-page-header__title {
    font-size: 30px;
  }

  .dev-portal-section-intro .dev-portal-page-header__title {
    font-size: 36px;
  }

  .dev-portal-page-header--article .dev-portal-page-header__title {
    font-size: 26px;
  }

  .dev-portal-cards__row {
    grid-template-columns: 1fr;
  }
}
} /* end .dev-portal-theme */