/* ============================================================
   FreeSpawn-Theme fuer Mastodon (passend zu freespawn.de, Flarum-Theme v9)

   Einspielen: scripts/deploy-theme.sh (setzt Setting custom_css).
   Schriften liegen unter data/fonts/ und werden als /freespawn-fonts/
   ausgeliefert (die CSP erlaubt Fonts nur von der eigenen Domain).

   Aufbau: Palette ueber die Farb-Token von Mastodon 4.7 (--color-*),
   nicht ueber Overrides pro Klasse. Dunkles Schema = Forum-Look,
   helles Schema bekommt nur die Akzentfarbe. Nach Mastodon-Updates
   pruefen, ob die Token-Namen noch stimmen.
   ============================================================ */

/* ---------- Schriften (selbst gehostet) ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/freespawn-fonts/inter-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/freespawn-fonts/chakra-petch-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/freespawn-fonts/chakra-petch-700.woff2') format('woff2');
}

html:root {
  --fs-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fs-font-display: 'Chakra Petch', 'Inter', system-ui, sans-serif;
}

/* ---------- Dunkel: Palette wie im Forum ---------- */
html:root:not([data-color-scheme='light']) {
  /* Neutrale Flaechen (Forum: bg / Karten / Controls / Popups / Linien) */
  --color-grey-50: #f6f6f9;
  --color-grey-100: #f4f4f8;
  --color-grey-200: #dcdce6;
  --color-grey-300: #b9b9c9;
  --color-grey-400: #9a9ab0;
  --color-grey-500: #7b7b93;
  --color-grey-600: #5b5b72;
  --color-grey-700: #3b3b4d;
  --color-grey-800: #2c2c3a;
  --color-grey-900: #15151d;
  --color-grey-950: #0c0c11;

  /* Akzent: Orange statt Indigo. Text auf Orange ist dunkel (wie im Forum) */
  --color-text-brand: #ff8a33;
  --color-text-on-brand-base: #14100c;
  --color-text-brand-on-inverted: #b84400;
  --color-bg-brand-base: #ff6d00;
  --color-bg-brand-base-hover: #ff8a33;
  --color-bg-brand-soft: #5c2700;
  --color-bg-brand-softest: #2a1608;
  --color-border-brand-soft: #7a3400;
}

/* ---------- Hell: nur Akzentfarbe ---------- */
html:root[data-color-scheme='light'] {
  --color-text-brand: #b84400;
  --color-text-on-brand-base: #ffffff;
  --color-text-brand-on-inverted: #ff8a33;
  --color-bg-brand-base: #c24a00;
  --color-bg-brand-base-hover: #a33d00;
  --color-bg-brand-soft: #ffe6d1;
  --color-bg-brand-softest: #fff3e8;
  --color-border-brand-soft: #ffbf94;
}

/* ---------- Basis ---------- */
html:root body,
html:root button,
html:root input,
html:root select,
html:root textarea {
  font-family: var(--fs-font-body);
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Hintergrund wie im Forum: Glow oben + feine diagonale Streifen */
html:root:not([data-color-scheme='light']) body {
  background:
    radial-gradient(1100px 420px at 50% -8%, rgba(255, 109, 0, 0.10), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255, 109, 0, 0.018) 0, rgba(255, 109, 0, 0.018) 2px, transparent 2px, transparent 48px),
    var(--color-bg-primary);
  background-attachment: fixed;
}

/* Ueberschriften und Titel in der Display-Schrift */
h1, h2, h3,
.column-header__title,
.column-header__text,
.account__display-name strong,
.dashboard__quick-access strong,
.about__header h1,
.server-banner__introduction {
  font-family: var(--fs-font-display);
}
h1, h2, h3, .column-header__title { letter-spacing: 0.02em; }

/* Fokus wie im Forum */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--color-bg-brand-base);
  outline-offset: 2px;
}

/* ---------- Marke: Wortmarke statt Mastodon-Logo ---------- */
svg.logo--wordmark { display: none; }
a:has(> svg.logo--wordmark) {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--color-text-primary);
  font-family: var(--fs-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  text-decoration: none;
}
a:has(> svg.logo--wordmark)::before {
  content: '';
  flex: none;
  width: 34px;
  height: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 4 88 88'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ff9a3d'/%3E%3Cstop offset='1' stop-color='%23ff6d00'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M81.98 46.78A34 34 0 1 1 49.22 14.02' fill='none' stroke='%23f4f4f8' stroke-width='11' stroke-linecap='round'/%3E%3Ccircle cx='48' cy='48' r='15' fill='url(%23g)'/%3E%3Cpolygon points='75.45,20.55 70.82,37.82 58.18,25.18' fill='url(%23g)' stroke='url(%23g)' stroke-width='7.0' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
a:has(> svg.logo--wordmark)::after { content: 'FreeSpawn'; }

/* Kompaktes Logo (Handy-Kopfleiste): Marke statt Mastodon-Symbol.
   Ohne Unterstuetzung fuer content:url() auf <img> bleibt das Original sichtbar. */
img.logo--icon {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 4 88 88'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ff9a3d'/%3E%3Cstop offset='1' stop-color='%23ff6d00'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M81.98 46.78A34 34 0 1 1 49.22 14.02' fill='none' stroke='%23f4f4f8' stroke-width='11' stroke-linecap='round'/%3E%3Ccircle cx='48' cy='48' r='15' fill='url(%23g)'/%3E%3Cpolygon points='75.45,20.55 70.82,37.82 58.18,25.18' fill='url(%23g)' stroke='url(%23g)' stroke-width='7.0' stroke-linejoin='round'/%3E%3C/svg%3E");
  object-fit: contain;
}

/* Heller Modus: Ring dunkel statt weiss (explizit hell, oder automatisch bei hellem System). */
html:root[data-color-scheme='light'] a:has(> svg.logo--wordmark)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 4 88 88'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ff9a3d'/%3E%3Cstop offset='1' stop-color='%23ff6d00'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M81.98 46.78A34 34 0 1 1 49.22 14.02' fill='none' stroke='%2315151d' stroke-width='11' stroke-linecap='round'/%3E%3Ccircle cx='48' cy='48' r='15' fill='url(%23g)'/%3E%3Cpolygon points='75.45,20.55 70.82,37.82 58.18,25.18' fill='url(%23g)' stroke='url(%23g)' stroke-width='7.0' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html:root[data-color-scheme='light'] img.logo--icon { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 4 88 88'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ff9a3d'/%3E%3Cstop offset='1' stop-color='%23ff6d00'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M81.98 46.78A34 34 0 1 1 49.22 14.02' fill='none' stroke='%2315151d' stroke-width='11' stroke-linecap='round'/%3E%3Ccircle cx='48' cy='48' r='15' fill='url(%23g)'/%3E%3Cpolygon points='75.45,20.55 70.82,37.82 58.18,25.18' fill='url(%23g)' stroke='url(%23g)' stroke-width='7.0' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: light) {
  html:root[data-color-scheme='auto'] a:has(> svg.logo--wordmark)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 4 88 88'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ff9a3d'/%3E%3Cstop offset='1' stop-color='%23ff6d00'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M81.98 46.78A34 34 0 1 1 49.22 14.02' fill='none' stroke='%2315151d' stroke-width='11' stroke-linecap='round'/%3E%3Ccircle cx='48' cy='48' r='15' fill='url(%23g)'/%3E%3Cpolygon points='75.45,20.55 70.82,37.82 58.18,25.18' fill='url(%23g)' stroke='url(%23g)' stroke-width='7.0' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  html:root[data-color-scheme='auto'] img.logo--icon { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 4 88 88'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ff9a3d'/%3E%3Cstop offset='1' stop-color='%23ff6d00'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M81.98 46.78A34 34 0 1 1 49.22 14.02' fill='none' stroke='%2315151d' stroke-width='11' stroke-linecap='round'/%3E%3Ccircle cx='48' cy='48' r='15' fill='url(%23g)'/%3E%3Cpolygon points='75.45,20.55 70.82,37.82 58.18,25.18' fill='url(%23g)' stroke='url(%23g)' stroke-width='7.0' stroke-linejoin='round'/%3E%3C/svg%3E"); }
}

/* ---------- FreeSpawn-Overlay (Links zu Forum, IRC, Mumble, Planer) ----------
   Das Markup fuegt der nginx-Zusatzcontainer (extras/nginx.conf) vor </body> ein. */
.fs-hub {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  font-family: var(--fs-font-body);
  font-size: 0.875rem;
}
.fs-hub > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  float: right;
  padding: 0.45rem 0.9rem 0.45rem 0.75rem;
  color: #fff;
  font-family: var(--fs-font-display);
  font-weight: 700;
  letter-spacing: 0.03em;
  background: linear-gradient(120deg, #c24a00 0%, #a33d00 55%, #6b2800 100%);
  border: 1px solid #ff6d00;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.fs-hub > summary::-webkit-details-marker { display: none; }
.fs-hub > summary::before {
  content: '';
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 4 88 88'%3E%3Cdefs%3E%3C/defs%3E%3Cpath d='M81.98 46.78A34 34 0 1 1 49.22 14.02' fill='none' stroke='%23ffffff' stroke-width='11' stroke-linecap='round'/%3E%3Ccircle cx='48' cy='48' r='15' fill='%23ffe2c6'/%3E%3Cpolygon points='75.45,20.55 70.82,37.82 58.18,25.18' fill='%23ffe2c6' stroke='%23ffe2c6' stroke-width='7.0' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fs-hub > nav {
  clear: both;
  display: flex;
  flex-direction: column;
  min-width: 11rem;
  margin-bottom: 0.5rem;
  padding: 0.35rem;
  background: var(--color-bg-secondary, #15151d);
  border: 1px solid var(--color-border-primary, #2c2c3a);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.fs-hub[open] { display: flex; flex-direction: column-reverse; }
.fs-hub > nav a {
  padding: 0.55rem 0.75rem;
  color: var(--color-text-primary);
  border-radius: 6px;
  text-decoration: none;
}
.fs-hub > nav a:hover,
.fs-hub > nav a:focus-visible {
  background: var(--color-bg-brand-soft);
  color: var(--color-text-primary);
}
/* Handy: ueber der unteren Tab-Leiste */
@media (max-width: 890px) {
  .fs-hub { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); right: 12px; }
}
@media print { .fs-hub { display: none; } }