/*
 * Copyright (c) 2026, tephpy Contributors.
 *
 * This file is part of tephpy and is distributed under the 3-Clause BSD license.
 * See the LICENSE file in the package root directory for licensing details.
 */

/*
 * Site-wide styling, as against the page-specific `browser-toolbar.css`.
 *
 * `.. rst-class:: center` sets this class on a paragraph and nothing else
 * centres it: neither Sphinx's `basic.css` nor `pydata-sphinx-theme` defines
 * a `.center` rule, so the directive is inert without this.
 */
.center {
  text-align: center;
}

/*
 * The reading-time banner (reading spec §3.5).
 *
 * The three custom properties are pydata-sphinx-theme's own and follow its
 * light/dark toggle. They are named here rather than borrowed from the prior
 * art because a CSS custom property that resolves to nothing fails silently:
 * GeoVista's `readingtime.css` styles this banner with `--article-info-bg` and
 * `--article-info-fg`, which are defined neither there nor in the theme, so its
 * background falls back to transparent and its colour to inherited.
 */
.reading-time {
  background: var(--pst-color-surface);
  border-left: 4px solid var(--pst-color-accent);
  border-radius: 4px;
  color: var(--pst-color-text-muted);
  margin-bottom: 1.2em;
  padding: 0.6em 1em;
}

/*
 * The horizontal padding is repeated on a two-class selector deliberately.
 * pydata-sphinx-theme ships `.docutils.container { padding-left: unset;
 * padding-right: unset }`, and a `container` node carries all three classes,
 * so that rule outranks the single-class one above and flattened the icon
 * against the accent border. Measured in Chromium against the built page:
 * `padding-left` computed to `0px` before this rule existed.
 */
.reading-time.container {
  padding-left: 1em;
  padding-right: 1em;
}

.reading-time p {
  margin: 0;
}

/*
 * Both selectors are needed, and the `svg` one is the one that fires. The
 * theme loads Font Awesome's SVG-with-JS framework, which replaces the `<i>`
 * this directive emits with an `<svg class="svg-inline--fa">` once the page is
 * live -- so an `i`-only rule styles the markup in the file and nothing the
 * reader ever sees. The `i` selector is kept for a viewer with scripting off,
 * where the element stays an `<i>`.
 */
.reading-time i,
.reading-time svg {
  margin-right: 0.65em;
}

/*
 * The landing pages' cards: the root page's four Diátaxis quadrants, and the
 * reference quadrant's seven (narrative spec §3.9).
 *
 * The icon is a pair of images rather than sphinx-design's `:img-top:`, which
 * takes one path and so cannot carry a light and a dark drawing. The pair is
 * switched by pydata-sphinx-theme's own `only-light`/`only-dark`, which it
 * applies with `display: none !important` under the mode that does not want
 * them -- the same mechanism `html_theme_options["logo"]` uses for the navbar
 * lockup, and the reason the artwork can use the brand's two-tone palette
 * (`#1B3A6B` on light, `#8FB8E8` on dark) instead of one colour compromised to
 * survive both grounds. `only-dark` earns a second thing: in dark mode the theme
 * otherwise applies `filter: brightness(0.8) contrast(1.2)` to every `img`, and
 * a white background to every `.bd-content img` on top of that -- two rules of
 * different reach, and the class is the opt-out named in both.
 */
.teph-card-icon {
  display: block;
  margin: 0 0 0.6rem;
  width: 56px;
}

/*
 * Beside the text once there is room for it, above the text when there is not.
 * The root page's `.. grid:: 2` is two columns at *every* breakpoint -- the
 * emitted row carries
 * `sd-row-cols-xs-2` through `sd-row-cols-lg-2` -- so a phone gets two cards of
 * about 150px, and an icon indented out of the flow left "Understanding-
 * oriented background." wrapping one word per line. Measured in Chromium at a
 * 360px viewport against the built page. The rule is written mobile-first so
 * the narrow layout needs no override: an `only-light`/`only-dark` image is
 * hidden with `display: none !important` and any `display` this sets would lose
 * to it anyway, but nothing here has to know that.
 *
 * The reference quadrant's `.. grid:: 1 2 2 2` is one column below 576px, so its
 * cards never meet that width. Above the icon, the root page's longest segment
 * still splits at 360px (:issue:`328`).
 */
@media (min-width: 576px) {
  .teph-card .sd-card-body {
    padding-left: 84px;
    position: relative;
  }

  .teph-card-icon {
    left: 16px;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}

/*
 * The topic index and its filter (topics spec §3.6).
 *
 * `.teph-topic-item` is a `<li>` carrying its tags in `data-topics`, hidden by
 * `topics.js` with the `hidden` property rather than an inline `display`, so that
 * nothing here has to out-specify a style attribute to lay the row out.
 */
.teph-topic-filter {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.4em;
}

.teph-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/*
 * The quadrant colours, one per group, taken from pydata-sphinx-theme's own
 * semantic families rather than invented. Each family is a triple the theme
 * already maintains -- the colour, a tint for backgrounds, and the guarantee
 * that both are legible in either mode -- so dark mode needs no second palette
 * here, exactly as the reading-time banner needs none. `danger` is deliberately
 * not among them: red on a documentation quadrant reads as an error rather than
 * a category. It is taken instead by `clear`, below, which is not a category.
 *
 * Colour is never the only channel. Every button and every badge also carries
 * the quadrant's name as text, so nothing here is load-bearing for a reader who
 * cannot separate the hues.
 */
.teph-q-tutorials {
  --teph-q: var(--pst-color-success);
  --teph-q-bg: var(--pst-color-success-bg);
}

.teph-q-howtos {
  --teph-q: var(--pst-color-info);
  --teph-q-bg: var(--pst-color-info-bg);
}

.teph-q-explanation {
  --teph-q: var(--pst-color-secondary);
  --teph-q-bg: var(--pst-color-secondary-bg);
}

.teph-q-gallery {
  --teph-q: var(--pst-color-warning);
  --teph-q-bg: var(--pst-color-warning-bg);
}

/*
 * A quadrant button is tinted and outlined in its own colour, and fills with it
 * when active -- the same two states the grey topic buttons have, in a different
 * key, because the two rows filter on different axes. The topic row stays grey
 * so that the coloured row reads as the coarser cut through the corpus.
 */
.teph-quadrant-button {
  background: var(--teph-q-bg);
  border: 1px solid var(--teph-q);
  border-radius: 999px;
  color: var(--pst-color-text-base);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.2em 0.85em;
}

.teph-quadrant-button:hover {
  border-color: var(--pst-color-text-base);
}

.teph-quadrant-button.active {
  background: var(--teph-q);
  border-color: var(--teph-q);
  color: var(--pst-color-background);
}

/*
 * `topics.js` unhides the bar. Without this guard the `display` above would
 * out-rank the browser's own `[hidden] { display: none }` rule, and a reader with
 * scripting off would get the row of dead controls the `hidden` attribute
 * exists to spare them.
 */
.teph-topic-filter[hidden] {
  display: none;
}

.teph-topic-button,
.teph-topic-clear {
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.2em 0.85em;
}

.teph-topic-button {
  background: var(--pst-color-surface);
  border: 1px solid var(--pst-color-border);
  color: var(--pst-color-text-base);
}

.teph-topic-button:hover {
  border-color: var(--pst-color-accent);
}

.teph-topic-button.active {
  background: var(--pst-color-accent);
  border-color: var(--pst-color-accent);
  color: var(--pst-color-background);
}

/*
 * `clear` is the one control here that is not a filter, and it read as one: it
 * carried the topic buttons' own grey with a dashed border, so it sat in their
 * row looking like a ninth term nobody had selected yet.
 *
 * It takes `danger`, which is the only semantic family this page leaves free --
 * the four quadrants hold success, info, secondary and warning
 * (topics spec §3.6), and the
 * accent is already the active topic button's fill, so accent here would
 * reproduce the very collision this rule exists to end. Red is also the apt
 * signal: this is the reset, not a category, which is exactly why
 * topics spec §3.6 refuses red for a quadrant and takes it here.
 *
 * Filled rather than outlined, pushed to the end of its row by `margin-left`,
 * and marked with a leading multiplication sign. The glyph is CSS rather than
 * markup so a screen reader announces "clear" and not "times clear" -- and it is
 * what keeps the control identifiable by shape as well as by hue, for a reader
 * who cannot separate red from grey.
 */
.teph-topic-clear {
  background: var(--pst-color-danger);
  border: 1px solid var(--pst-color-danger);
  color: var(--pst-color-background);
  font-weight: 600;
  margin-left: auto;
}

.teph-topic-clear::before {
  content: "\00d7";
  font-size: 1.1em;
  line-height: 1;
  margin-right: 0.35em;
}

.teph-topic-clear:hover {
  filter: brightness(1.1);
}

/*
 * The focus ring the browser draws by default is a thin dotted outline that is
 * near-invisible against a filled control. Every button here states its own.
 */
.teph-topic-button:focus-visible,
.teph-quadrant-button:focus-visible,
.teph-topic-clear:focus-visible {
  outline: 2px solid var(--pst-color-text-base);
  outline-offset: 2px;
}

.teph-topic-list {
  list-style: none;
  padding-left: 0;
}

.teph-topic-item {
  border-bottom: 1px solid var(--pst-color-border);
  padding: 0.5em 0;
}

/*
 * `topics.js` hides a row with the `hidden` property, and a `display` on the
 * element itself would out-rank the browser's own `[hidden] { display: none }`
 * -- the filter would then mark rows hidden and hide none of them. The layout
 * therefore sits on the row inside, and this states the rule the JavaScript
 * depends on rather than leaving it to the absence of a declaration above.
 */
.teph-topic-item[hidden] {
  display: none;
}

.teph-topic-row {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0;
}

.teph-topic-title {
  flex: 1 1 18rem;
}

/*
 * The row's badge, in the same colour as its quadrant's button, so that a reader
 * who filters by Tutorials can see at a glance which rows answered.
 */
.teph-topic-quadrant {
  background: var(--teph-q-bg);
  border: 1px solid var(--teph-q);
  border-radius: 4px;
  color: var(--pst-color-text-base);
  font-size: 0.75rem;
  padding: 0.1em 0.5em;
  white-space: nowrap;
}

.teph-topic-tags {
  color: var(--pst-color-text-muted);
  font-size: 0.8rem;
}

.teph-topic-empty {
  color: var(--pst-color-text-muted);
}