/* Hoppa brand overrides on top of mkdocs-shadcn.
   Colours use the theme's CSS variables so light and dark modes both work. */

:root {
  --hoppa-purple: #4a4bcd;
  --hoppa-green: #00bf85;
  --hoppa-green-soft: #ccffef;
}

/* HEADER LOGO
   The theme's button rule (which carries an ID inside :is(), so it cannot be
   out-specified) squeezes inlined SVG icons into a 16px square. */

header a.button > span > svg {
  width: auto !important;
  height: 1.25rem !important;
  margin: 0.25rem;
  fill: currentColor;
}

/* HEADINGS: Inter (bundled with the theme) instead of the default Geist */

h1, h2, h3, h4, h5, h6 {
  font-family: "Inter", sans-serif;
  letter-spacing: normal;
}

/* BETA PILL – injected by javascript/extra.js on mkdocstrings headings */

.hoppa-beta {
  display: inline-block;
  background: var(--hoppa-green-soft);
  color: var(--hoppa-green);
  padding: 1px 6px;
  margin-right: 0.35em;
  border-radius: 3px;
  font-size: small;
  font-weight: 600;
  vertical-align: middle;
}

/* FEATURE FLAG BANNER – replaces the signature of beta API objects */

.contact-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 1em 0;
  padding: 16px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  background: var(--muted);
  color: var(--foreground);
}

.contact-container-text {
  margin: 0;
}

.contact-container a {
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--hoppa-purple);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

/* SCREENSHOTS – plain light-mode captures framed so they sit on any background */

article img[src*="screenshots/"] {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
}

/* TABLES – the theme forces cells onto one line, which makes wide tables
   scroll sideways. Let cells wrap so tables fit their container. */

article table thead tr th,
article table tbody tr td {
  white-space: normal;
  overflow-wrap: break-word;
}

/* SIDEBAR – the theme lays a blurred gradient over the top of the sidebar.
   Push the first group down so its first item sits clear of it. */

[data-slot="sidebar-content"] > [data-slot="sidebar-group"]:first-child {
  padding-top: 2rem;
}

/* PAGE TITLES – the theme sets word-break: break-all on the page heading,
   which splits words mid-way. Wrap at word boundaries instead. */

article #page-header h1 {
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: manual;
}

/* SIDEBAR LINKS – the theme fixes each link at 30px tall, so titles that wrap
   onto two lines overflow their highlighted background. Let the height grow
   with the text and give it breathing room. */

a[data-slot="sidebar-menu-button"] {
  height: auto;
  min-height: 30px;
  padding-block: 0.375rem;
  line-height: 1.35;
}

/* FIGURES AND CAPTIONS – screenshots are followed by a /// caption block,
   which pymdownx.blocks.caption turns into <figure><figcaption>. */

article figure {
  margin: 1.25rem 0;
}

article figure img[src*="screenshots/"] {
  margin: 0;
  cursor: zoom-in;
}

article figcaption {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--muted-foreground);
  text-align: center;
}

article figcaption p {
  margin: 0;
}

/* 404 PAGE – overrides/404.html */

.hoppa-404-code {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--hoppa-purple);
}

.hoppa-404-lead {
  margin: 0.25rem 0 0;
  color: var(--muted-foreground);
}

.hoppa-404-links {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.hoppa-404-links li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
}

.hoppa-404-links a {
  font-weight: 600;
}

.hoppa-404-links span {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.hoppa-404-links a,
.hoppa-404-links a:visited {
  color: var(--foreground);
  text-decoration: none;
}

.hoppa-404-links a:hover {
  text-decoration: underline;
}