/* Boards - residual styles on top of Bootstrap/Bootswatch.
   Only rules Bootstrap itself can't provide live here; everything else
   is Bootstrap utility/component classes directly in the templates. */

/* Native form controls (e.g. the theme <select>) don't get themed by
   Bootswatch bundles unless color-scheme is set explicitly - without
   this, dark-family themes render dropdown popups white-on-white. */
[data-theme-family='dark'] {
    color-scheme: dark;
}

[data-theme-family='light'] {
    color-scheme: light;
}

.site-logo {
    border-radius: 8px;
}

/* Thread indentation is set inline per-message (level * fixed unit) in
   templates/Messages/view.php - this just gives each row a readable
   rhythm without pulling in a whole tree-view component for what's a
   flat, pre-ordered list. */
.thread-message {
    border-top: 1px solid var(--bs-border-color);
    padding: 0.75rem 0;
}

/* Boards index/view banner - background-image is set inline per-page
   (the URL comes from a Board's `banner` column or the `boards_index_banner`
   setting), this just gives it a consistent frame.

   .board-banner and .board-card-banner deliberately share the same
   aspect-ratio (rather than each having its own fixed height) - `cover`
   crops based on the box's *shape*, not its absolute size, so two boxes
   with different aspect ratios show different slices of the same image.
   Matching ratios makes the card thumbnail read as a scaled-down copy of
   the full banner instead of an independently-cropped snippet. */
.board-banner {
    aspect-ratio: 5 / 1;
    background-size: cover;
    background-position: center;
    background-color: var(--bs-tertiary-bg);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

/* Shrunken banner thumbnail atop each board's card on the boards index. */
.board-card-banner {
    aspect-ratio: 5 / 1;
    object-fit: cover;
}

/* Classic BBS "seen vs. unseen" cue for thread/message subject links -
   crucial on a big branching tree, where it's otherwise impossible to
   tell at a glance which threads have new activity since you last
   looked. Browsers already track visited state via history and expose
   it purely through CSS (color-only, by design, for privacy) - nothing
   server-side to build. Scoped to .tree-link rather than every <a> on
   the site, since Bootstrap-styled buttons/nav links shouldn't get this
   treatment. */
[data-theme-family='light'] .tree-link:visited {
    color: #6f42c1;
}

[data-theme-family='dark'] .tree-link:visited {
    color: #b491e0;
}

/* Bootstrap's default `code` color (--bs-code-color) is a bright
   fuschia/pink that clashes with every Bootswatch theme here - fixed
   dark box + light gray text instead, regardless of the active site
   theme. `pre code` zeroes its own box out so a fenced block doesn't
   get two backgrounds/paddings stacked inside each other. */
code, pre {
    color: #d4d4d4;
    background-color: #1e1e1e;
    border-radius: 0.25rem;
}

code {
    padding: 0.15em 0.35em;
}

pre {
    padding: 0.5em 0.75em;
}

pre code {
    padding: 0;
    background-color: transparent;
    color: inherit;
    border-radius: 0;
}

/* Bootstrap has no default blockquote treatment at all (just the UA
   stylesheet's bare margin) - a left accent bar plus a muted, slightly
   inset look makes a quoted excerpt (e.g. from quote-on-reply, see
   webroot/js/site.js) read as visually distinct from the surrounding
   message body at a glance. Uses theme variables, not fixed colors like
   the code/pre rules above, since a quote should still look like part
   of the page's own theme rather than a fixed foreign block. */
blockquote {
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    border-left: 0.25rem solid var(--bs-border-color);
    color: var(--bs-secondary-color);
}

blockquote > :last-child {
    margin-bottom: 0;
}