/* =============================================================
   some.kansalliskirjasto.fi – custom CSS
   Based on: National Library Style Guide 2.0 (Adobe XD)
   Paste into: Administration → Server Settings → Appearance → Custom CSS
   Written for Mastodon 4.7 (uses its --color-* design tokens)
   ============================================================= */

/* ---------- 1. NatLib palette (style guide 1.1 Colours) ---------- */
:root {
  --nl-blue-100: #002855;   /* main brand colour */
  --nl-blue-80:  #5d7999;
  --nl-blue-60:  #b8c9db;
  --nl-blue-40:  #dfe5ed;
  --nl-blue-20:  #f2f5f7;
  --nl-link-blue: #1d2fc4;  /* guide's link colour (too bright here) */
  --nl-red-100:   #a0270a;
  --nl-green-100: #3a785e;
  --nl-yellow-60: #fae196;
  --nl-white:     #ffffff;

  /* Accent for buttons, links, active items.
     Toned down from Link Blue to Blue 80. */
  --nl-accent: var(--nl-blue-80);

  --nl-font-sans:  "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --nl-font-serif: "DM Serif Text", Georgia, "Times New Roman", serif;
  --nl-radius: 6px;
}

/* ---------- 2. Map NatLib colours onto Mastodon's brand tokens ----------
   This recolours every "brand" element at once: buttons, links,
   hashtags, active menu items, toggles, tab underlines, focus rings. */

/* Dark scheme (default) */
[data-color-scheme="dark"],
html:not([data-color-scheme]) {
  --color-text-brand: var(--nl-blue-60);          /* links, outlined buttons */
  --color-text-status-links: var(--nl-blue-60);   /* links inside posts */
  --color-text-on-brand-base: var(--nl-white);
  --color-text-brand-on-inverted: var(--nl-blue-80);
  --color-bg-brand-base: var(--nl-accent);        /* filled buttons */
  --color-bg-brand-base-hover: var(--nl-blue-100);
  --color-bg-brand-soft: #1c3350;
  --color-bg-brand-softest: #13243a;
  --color-border-brand: var(--nl-blue-60);
  --color-border-brand-soft: #2a4466;
}

/* Light scheme */
[data-color-scheme="light"] {
  --color-text-brand: var(--nl-accent);
  --color-text-status-links: var(--nl-accent);    /* links inside posts */
  --color-text-on-brand-base: var(--nl-white);
  --color-text-brand-on-inverted: var(--nl-blue-60);
  --color-bg-brand-base: var(--nl-accent);
  --color-bg-brand-base-hover: var(--nl-blue-100);
  --color-bg-brand-soft: var(--nl-blue-40);
  --color-bg-brand-softest: var(--nl-blue-20);
  --color-border-brand: var(--nl-accent);
  --color-border-brand-soft: var(--nl-blue-40);
}

/* ---------- 3. Typography (style guide 2.1) ---------- */
body,
.button,
input,
textarea,
select {
  font-family: var(--nl-font-sans);
}

.about__header h1 {
  font-family: var(--nl-font-serif);
  font-weight: 400;
}

/* ---------- 4. Button shape (style guide 5.1) ---------- */
.button {
  border-radius: var(--nl-radius);
  font-weight: 600;
}

.button.button--destructive {
  background-color: var(--nl-red-100);
  color: var(--nl-white);
}

/* ---------- 5. Server logo (left sidebar) ----------
   The uploaded thumbnail has empty white space on its right.
   This crops it off and centres the logo on a white card.
   Delete this section once a cropped ~2:1 image is uploaded. */
.server-banner__hero {
  display: flex;
  justify-content: center;
  background-color: var(--nl-white);
  border-radius: 8px;
  overflow: hidden;
}

.server-banner__hero img,
.server-banner__hero canvas {
  width: 73%;
  aspect-ratio: 1.39;
  object-fit: cover;
  object-position: left center;
}