/*
 * Puddlecraft theme layer, on top of docfx-material (templates/material, MIT).
 *
 * The modern docfx template loads one stylesheet, public/main.css. This layer replaces it, so it first imports
 * the vendored material stylesheet, which docfx.json copies to public/material/main.css as a resource.
 * Below: the PT Sans Caption font (SIL OFL 1.1, see fonts/OFL.txt) and rainy-night colours.
 */
@import url("material/main.css");

@font-face {
  font-family: "PT Sans Caption";
  src: url("fonts/PTSansCaption-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PT Sans Caption";
  src: url("fonts/PTSansCaption-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Font: the whole site, except code, which stays monospace ---------------------------------------- */

:root {
  --bs-font-sans-serif: "PT Sans Caption", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-size: 0.95rem;
}

body,
h1, h2, h3, h4, h5, h6,
.navbar, .navbar-brand, .nav-link,
.toc, .affix, #breadcrumb,
input, button, select, textarea {
  font-family: var(--bs-font-sans-serif);
}

/* The font has regular and bold only; material asks for 600, which would be synthesised. */
h1, h2, h3, h4 {
  font-weight: 700;
}

/* ---- Colours: deep blue and teal --------------------------------------------------------------------- */

:root,
[data-bs-theme='light'] {
  --pc-accent: #0b7285;
  --pc-accent-rgb: 11, 114, 133;
  --pc-accent-hover: #075263;
  --pc-accent-hover-rgb: 7, 82, 99;

  --bs-primary: var(--pc-accent);
  --bs-primary-rgb: var(--pc-accent-rgb);
  --bs-primary-text-emphasis: #073b47;
  --bs-primary-bg-subtle: #e1f0f3;
  --bs-primary-border-subtle: #b7dce4;
  --bs-link-color: var(--pc-accent);
  --bs-link-color-rgb: var(--pc-accent-rgb);
  --bs-link-hover-color: var(--pc-accent-hover);
  --bs-link-hover-color-rgb: var(--pc-accent-hover-rgb);
  --bs-focus-ring-color: rgba(11, 114, 133, 0.25);
  --bs-code-color: #9a4a0c; /* inline code: the warm street-light colour against the blues */

  --material-info-background: #e1f0f3;
  --material-blue-dark: #0e3a4a;
}

[data-bs-theme='dark'] {
  --pc-accent: #5ec8d8;
  --pc-accent-rgb: 94, 200, 216;
  --pc-accent-hover: #9ae0ea;
  --pc-accent-hover-rgb: 154, 224, 234;

  --bs-body-bg: #0d1520;
  --bs-body-bg-rgb: 13, 21, 32;
  --bs-secondary-bg: #15212f;
  --bs-tertiary-bg: #111c29;
  --bs-tertiary-bg-rgb: 17, 28, 41;
  --bs-border-color: #22344a;

  --bs-primary: var(--pc-accent);
  --bs-primary-rgb: var(--pc-accent-rgb);
  --bs-primary-text-emphasis: #b4e9f0;
  --bs-primary-bg-subtle: #0f2a36;
  --bs-primary-border-subtle: #1b4a5c;
  --bs-link-color: var(--pc-accent);
  --bs-link-color-rgb: var(--pc-accent-rgb);
  --bs-link-hover-color: var(--pc-accent-hover);
  --bs-link-hover-color-rgb: var(--pc-accent-hover-rgb);
  --bs-focus-ring-color: rgba(94, 200, 216, 0.25);
  --bs-code-color: #f0b46e;

  --material-info-background-dark: #12313d;
  --material-blue-light: #c6ecf2;
}

/* A thin teal line under the navbar, like light on wet tarmac. */
header.border-bottom {
  border-bottom: 2px solid var(--pc-accent) !important;
}

/* ---- Content ----------------------------------------------------------------------------------------- */

article img {
  max-width: 100%;
  height: auto;
}

/*
 * Inspector screenshots are tall and narrow, so they sit on the left and the text after them runs down their right,
 * then carries on full width underneath. Matched by file name (docs/images/inspector-*), so nothing shifts while
 * images load. docfx's script wraps each image in a link at runtime, hence the two forms (p > img, p > a > img).
 * The next heading, table, code block or image starts below the screenshot instead: a table can't wrap around it
 * and would otherwise stay a narrow column beside it.
 */
@media (min-width: 768px) {
  article p:has(> img[src*="inspector-"]:only-child),
  article p:has(> a:only-child > img[src*="inspector-"]:only-child) {
    float: left;
    max-width: 45%;
    margin: 0.25rem 3rem 1rem 0;
  }

  article h1, article h2, article h3, article h4, article h5, article h6,
  article table, article .table-responsive, article pre,
  article p:has(> img:only-child),
  article p:has(> a:only-child > img:only-child) {
    clear: both;
  }

  /* Bullets would otherwise hide behind the screenshot. Each item moves beside it on its own, so a long list still
     goes back to full width below the image. */
  article li {
    display: list-item flow-root;
  }
}

/* Small print, such as the screenshot credit. */
.pc-credit {
  font-size: 0.85em;
  color: var(--bs-secondary-color);
}