/* ============================================================
   CrossFit Eisenstadt — Mastodon theme
   Sourced from https://www.crossfiteisenstadt.at/
     --bg #080808  --surface #111  --card #161616  --border #222
     --accent #00e5e5  --accent-dim #00b4b4
     --text #f5f5f5  --muted #777  --muted2 #aaa
   Applied via Admin -> Appearance -> Custom CSS (Setting.custom_css).
   Mastodon defines its colour ramps on `html`, so :root here wins.
   ============================================================ */

:root {
  /* Brand ramp. Mastodon routes every brand-coloured surface through
     --color-indigo-*, so replacing the ramp rebrands the whole UI. */
  --color-indigo-50:  #ecffff;
  --color-indigo-100: #cffdfd;
  --color-indigo-200: #a5fafa;
  --color-indigo-300: #6df4f4;
  --color-indigo-400: #22e8e8;
  --color-indigo-500: #00e5e5;  /* club accent */
  --color-indigo-600: #00c4c4;
  --color-indigo-700: #009d9d;
  --color-indigo-800: #007b7b;
  --color-indigo-900: #005f5e;
  --color-indigo-950: #003736;

  /* Neutral ramp. Mastodon ships a purple-tinted grey (#21212c, #181820);
     the club is flat neutral black, so this swaps the chrome to match. */
  --color-grey-50:  #f7f7f7;
  --color-grey-100: #f5f5f5;  /* dark-mode primary text  (--text)   */
  --color-grey-200: #dcdcdc;
  --color-grey-300: #aaaaaa;  /* dark-mode secondary text (--muted2) */
  --color-grey-400: #777777;  /* dark-mode tertiary text  (--muted)  */
  --color-grey-500: #5a5a5a;
  --color-grey-600: #444444;
  --color-grey-700: #2a2a2a;
  --color-grey-800: #161616;  /* dark bg-tertiary  (--card)    */
  --color-grey-900: #111111;  /* dark bg-secondary (--surface) */
  --color-grey-950: #080808;  /* dark bg-primary   (--bg)      */
}

/* ---- Brand buttons -------------------------------------------------
   Mastodon puts white text on the brand colour. White on #00e5e5 is
   about 1.7:1 and unreadable, and the club site itself uses dark text
   on cyan, so invert the pairing instead of muddying the accent. */
[data-color-scheme='dark'],
html:not([data-color-scheme]) {
  --color-bg-brand-base: #00e5e5;
  --color-bg-brand-base-hover: #00b4b4;
  --color-text-on-brand-base: #080808;
  --color-text-brand: #00e5e5;
  --color-border-brand: #00e5e5;
}

/* Light mode: #00e5e5 as link text on white is ~1.6:1, so links step
   down the ramp to a teal that clears AA. Buttons keep the true accent. */
[data-color-scheme='light'] {
  --color-bg-brand-base: #00e5e5;
  --color-bg-brand-base-hover: #00b4b4;
  --color-text-on-brand-base: #080808;
  --color-text-brand: #007b7b;
  --color-border-brand: #007b7b;
}

/* ---- Logo ----------------------------------------------------------
   Mastodon renders its logo two different ways (app/javascript/mastodon/
   components/logo.tsx), so both need handling:
     - <svg class="logo"><use href="#logo-symbol-*"/></svg>
     - <img class="logo" src="logo.svg">
   An <img> paints its own src over any background, so that one needs
   `content:` to swap the rendered image instead. */
svg.logo use { display: none; }

svg.logo {
  background: url('/system/branding/cfe-shield.png') center / contain no-repeat;
}

img.logo {
  content: url('/system/branding/cfe-shield.png');
  object-fit: contain;
}

/* Sidebar header: shield + club name, using the page fonts. */
.column-link--logo .logo--wordmark { display: none; }

.column-link--logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.column-link--logo::before {
  content: '';
  flex: none;
  width: 32px;
  height: 32px;
  background: url('/system/branding/cfe-shield.png') center / contain no-repeat;
}

.column-link--logo::after {
  content: 'CROSSFIT EISENSTADT';
  font-family: 'Bebas Neue', 'Barlow', system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--color-text-primary);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Typography ----------------------------------------------------
   The club site pairs Bebas Neue (display) with Barlow (body). Both are
   self-hosted from public/system rather than Google's CDN, because the
   Mastodon CSP only allows font-src 'self'. */

@font-face {
  font-family: 'Bebas Neue';
  src: url('/system/branding/fonts/bebasneue-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow';
  src: url('/system/branding/fonts/barlow-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow';
  src: url('/system/branding/fonts/barlow-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow';
  src: url('/system/branding/fonts/barlow-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow';
  src: url('/system/branding/fonts/barlow-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body,
.app-holder,
button,
input,
textarea,
select {
  font-family: 'Barlow', system-ui, -apple-system, sans-serif;
}

/* Bebas Neue is an all-caps display face — good for chrome, wrong for post
   bodies, so it is scoped to the wordmark and column headings only. */
.column-header__title,
.column-header > button {
  font-family: 'Bebas Neue', 'Barlow', sans-serif;
  letter-spacing: 0.04em;
  font-size: 1.15em;
}

/* ---- Closed instance -----------------------------------------------------
   Registrations are off (registrations_mode: none) and the server never
   talks to the fediverse. The stock UI still links to joinmastodon.org
   ("Sign up" on the login page, "Get the app" in the footer) — dead ends
   for club members, so hide them. */
a[href^='https://joinmastodon.org'] {
  display: none !important;
}