/* ---- 1. hide the upstream-project footer links ---- */
li:has(> a[href="https://joinmastodon.org"]),
li:has(> a[href="https://joinmastodon.org/apps"]) { display: none !important; }
a[href="https://joinmastodon.org"],
a[href="https://joinmastodon.org/apps"] { display: none !important; }

/* ---- 2. Civic Design System Mastodon theme (mastodon-theme/custom.css) ---- */
/* ============================================================================
 * Mastodon - Civic theme (dein-bingen) · Custom CSS
 * For social.bingerinnen.de. Paste into Administration -> Site Settings ->
 * Appearance -> Custom CSS. Works in BOTH colour schemes (Mastodon 4.6+ has a
 * single theme; light/dark is html[data-color-scheme] from the per-user
 * colour-scheme setting, default auto = OS preference):
 *   - dark scheme  -> river-blue-tinted dark chrome
 *   - light scheme -> light water-tinted chrome
 * The turquoise accent replaces the blurple (#6364ff) on both. Semantic colours
 * (boost green, favourite gold, error red) are left untouched.
 *
 * All colours are driven by CSS vars, so the two skins are just two var blocks
 * and every rule below adapts automatically. River Rhine is active; to switch to
 * VINEYARD, comment out the two River blocks and uncomment the Vineyard pair.
 * No em-dashes anywhere (CLAUDE.md).
 * ==========================================================================*/

/* ---- River Rhine · shared accent + DARK chrome (default skin) ---- */
:root{
  --ra:#12aec8;         /* accent (was blurple) - button fills, active, toggles */
  --ra-strong:#0e8da3;  /* accent hover/pressed */
  --ra-text:#7fd3e2;    /* accent as text/links on DARK chrome */
  --chrome-0:#071d25;   /* app background (behind columns) */
  --chrome:#0c2c37;     /* column / scrollable background */
  --chrome-2:#0e3340;   /* headers, detailed status */
  --chrome-3:#123f4d;   /* nav bar, inputs, hovers */
  --ink:#e0eef2;        /* primary text on chrome we set */
  --line:rgba(255,255,255,.06);
}
/* ---- River Rhine · LIGHT colour-scheme overrides ---- */
html[data-color-scheme='light']{
  --ra-text:#0b6f83;    /* AA teal for links/active on light (5.8:1) */
  --chrome-0:#dbe7ec;   /* app background */
  --chrome:#ffffff;     /* columns / timeline */
  --chrome-2:#f4f9fb;   /* headers */
  --chrome-3:#eef4f6;   /* nav, inputs, hovers */
  --ink:#14313a;
  --line:rgba(18,56,68,.10);
}

/* ---- Vineyard · uncomment BOTH blocks and comment out the two River blocks ----
:root{
  --ra:#8fad1a; --ra-strong:#7a9616; --ra-text:#bccf78;
  --chrome-0:#0e1a13; --chrome:#182a20; --chrome-2:#1c2f24; --chrome-3:#28382c;
  --ink:#e2e8d8; --line:rgba(255,255,255,.06);
}
html[data-color-scheme='light']{
  --ra-text:#556b0e;
  --chrome-0:#e2e8d4; --chrome:#ffffff; --chrome-2:#f6f8ef; --chrome-3:#f2f5ec;
  --ink:#213730; --line:rgba(29,59,49,.10);
}
---- */

/* ===== Accent: replace the blurple everywhere it signals action (both skins) ===== */
.button,
.button--block,
.compose-form__publish .button,
.column-header__setting-btn .button{ background-color: var(--ra); }
.button:active, .button:focus, .button:hover,
.compose-form__publish .button:hover{ background-color: var(--ra-strong); }
.button.button-secondary{ color: var(--ra-text); border-color: var(--ra); background: transparent; }
.button.button-secondary:hover{ border-color: var(--ra-text); }

/* links & mentions */
.status__content a,
.reply-indicator__content a,
.account__header__content a,
.link-footer a,
.about a,
a.mention{ color: var(--ra-text); }

/* active navigation / tabs / column headers */
.tabs-bar__link.active{ border-bottom-color: var(--ra); color: var(--ra-text); }
.column-link.active,
.column-link--transparent.active,
.column-header.active,
.column-header.active .column-header__icon,
.column-header__button.active,
.icon-button.active,
.account__action-bar__tab.active{ color: var(--ra-text); }
.column-link:hover, .column-link:focus{ background: var(--chrome-3); }

/* toggles, radios, checkboxes, loading bar, focus ring, selection */
.react-toggle--checked .react-toggle-track{ background-color: var(--ra) !important; }
.radio-button.checked .radio-button__input,
.check-box.checked .check-box__input{ border-color: var(--ra); background: var(--ra); }
.loading-bar{ background-color: var(--ra); }
*:focus-visible{ outline-color: var(--ra) !important; }
::selection{ background: var(--ra); color: #04232b; }

/* keep boost/favourite/error semantics: do NOT recolour those */

/* ===== Chrome: re-tinted via the vars above (adapts to dark/light) ===== */
body, .ui, .columns-area, .columns-area__panels__main{ background: var(--chrome-0); }

.column > .scrollable, .scrollable,
.drawer__inner, .compose-form, .column-inline-form,
.account__header__bar, .empty-column-indicator{ background: var(--chrome); }

.column-header, .column-header__wrapper, .column-back-button,
.column-subheading, .detailed-status, .detailed-status__action-bar,
.focusable:focus, .status.status-direct{ background: var(--chrome-2); }

.drawer__header, .navigation-bar, .search__input,
.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input, .search-popout,
.column-header__collapsible{ background: var(--chrome-3); color: var(--ink); }

.status{ border-bottom-color: var(--line); }
.getting-started__wrapper, .getting-started, .navigation-panel{ background: var(--chrome-0); }

/* scrollbars pick up the brand */
html{ scrollbar-color: var(--ra-strong) var(--chrome-0); }

/* ---- 3. instance extras ---- */
/* brand ramp: Mastodon's blurple --color-indigo-* vars retuned to the River
   Rhine turquoise so anything var-driven matches the theme accent (--ra). */
:root {
  --color-indigo-50:  #e6f7fa;
  --color-indigo-100: #cceff5;
  --color-indigo-200: #99dfeb;
  --color-indigo-300: #66cfe0;
  --color-indigo-400: #33bfd6;
  --color-indigo-500: #12aec8;
  --color-indigo-600: #0e8da3;
  --color-indigo-700: #0b6f83;
  --color-indigo-800: #0a5a6a;
  --color-indigo-900: #083f4c;
  --color-indigo-950: #071d25;
}

/* swap the in-app header wordmark for our mark (hosted on S3 by the seed) */
.logo--wordmark {
  width: 152px !important; height: 40px !important;
  background-image: url("https://media.social.bingerinnen.de/branding/mark.png");
  background-size: contain; background-repeat: no-repeat; background-position: left center;
}
.logo--wordmark > * { visibility: hidden !important; }