/* docs/stylesheets/theme.css: the site takes its colours from the banner.
 *
 * banner.svg is CashPilot's banner family: a night sky from #000010 to
 * #0d0025, the name in the pink gradient #f43f5e -> #fb7185, and the tagline
 * and rules in cyan #06b6d4 -> #22d3ee. This file is CashPilot's
 * docs/stylesheets/theme.css with the class prefix changed to cpa- and the
 * rules this site does not use (FAQ entries, the desktop gallery) left out, so
 * the two sites read as one family. mkdocs.yml sets `primary: custom` and
 * `accent: custom`, so Material paints nothing until these variables exist.
 */
:root {
  --md-primary-fg-color: #000010; /* banner sky, header bar */
  --md-primary-fg-color--light: #0d0025; /* banner mid sky */
  --md-primary-fg-color--dark: #000008;
  --md-primary-bg-color: #e8e6f0; /* text on the header */
  --md-primary-bg-color--light: #a59cb5;

  --md-accent-fg-color: #22d3ee; /* banner cyan */
  --md-accent-fg-color--transparent: #22d3ee1a;
}

/* Dark scheme: the page body is CashPilot's own page colour, so header and
   page read as one surface. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #06060f;
  --md-code-bg-color: #0e0e1a;
  --md-typeset-a-color: #22d3ee;
}

/* Light scheme: #22d3ee on white is 1.7:1, unreadable. #0e7490 is the same hue
   at 5.4:1. */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #0e7490;
  --md-accent-fg-color: #0e7490;
  --md-accent-fg-color--transparent: #0e74901a;
}

/* Fixed header logo size, so it does not crowd the site name. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.6rem;
  width: 1.6rem;
}

/* The wordmark, matching banner.svg: the name in the pink gradient beside the
   sun mark. Only the FIRST topic is styled: Material puts the site name in one
   .md-header__topic and the current page title in a second one, swapping them
   on scroll, and painting both would turn every page heading pink. */
.md-header__topic:first-child .md-ellipsis {
  background: linear-gradient(90deg, #f43f5e 0%, #fb7185 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Keep the mark and the wordmark close, the way the banner sets them. */
.md-header__button.md-logo {
  padding-right: 0.2rem;
}

.md-header__title {
  margin-left: 0.2rem;
}

/* Buttons: Material paints .md-button in the header colour, which disappears
   on the dark page. Outline buttons take the link colour. */
.md-typeset .md-button {
  color: var(--md-typeset-a-color);
  border-color: var(--md-typeset-a-color);
  border-radius: 0.5rem;
}

.md-typeset .md-button:focus,
.md-typeset .md-button:hover {
  background-color: var(--md-typeset-a-color);
  border-color: var(--md-typeset-a-color);
  color: #ffffff;
}

/* Grid cards: the border picks up the cyan on hover, matching links. */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border-radius: 0.5rem;
}

.md-typeset .grid.cards > ul > li:focus-within,
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:focus-within,
.md-typeset .grid > .card:hover {
  border-color: #22d3ee;
}

/* The home page keeps an H1 for search, screen readers and the browser tab.
   The banner under it already shows the name, so the H1 is hidden visually.
   Use it as: # CashPilot Android { .cpa-visually-hidden } */
.md-typeset h1.cpa-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Setting keys and package names in tables stay on one line; a wide table
   scrolls sideways instead of wrapping mid-word. */
.md-typeset table:not([class]) code {
  white-space: nowrap;
}

/* Screenshots are dark on a dark page; a faint rim shows where they end. */
.md-typeset img[src*="screenshots/"] {
  border: 1px solid #ffffff14;
  border-radius: 0.4rem;
}

/* Phone screenshots on the home page, for when they exist: as many in a row
   as fit, each with a short caption. */
.md-typeset .cpa-phone-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.8rem;
  margin: 1em 0;
}

.md-typeset .cpa-phone-gallery figure {
  margin: 0;
}

.md-typeset .cpa-phone-gallery figcaption {
  margin-top: 0.3rem;
  font-size: 0.7rem;
}