/*
 * freeshell.de – Etherpad-Theme
 * Wird von Apache in jede HTML-Seite von pad.freeshell.de eingehängt (nach dem Skin-CSS),
 * Etherpad selbst bleibt unverändert. Getestet mit Etherpad 3.3.8 (Skin "colibris").
 */

:root {
  --fs-teal: #14a6c6;
  --fs-teal-dark: #0e87a3;
  --fs-teal-tint: #e3f4f8;
  --fs-ink: #1c1c1b;
  --fs-muted: #5c6166;
  --fs-bg: #f9f9f9;
  --fs-line: #e6e8ea;
  --fs-serif: "Cormorant Garamond", "EB Garamond", Garamond, Georgia, serif;
  --fs-sans: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Pad und Timeslider: Akzentfarbe des colibris-Skins */
  --primary-color: var(--fs-teal);
}

/* ------------------------------------------------------------------
 * Startseite (nur dort gibt es nav, .mission-statement, #go2Name …)
 * ------------------------------------------------------------------ */

body > nav {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid var(--fs-line);
  padding: 0.9rem 1.5rem;
  font-family: var(--fs-sans);
}

/* grünes Etherpad-Icon → freeshell-Logo */
body > nav .logo-box {
  width: 190px;
  height: 44px;
  margin-right: 1.1rem;
  background: url("/_freeshell/logo.svg") left center / contain no-repeat;
  border-radius: 0;
}
body > nav .logo-box svg { display: none; }

/* "Etherpad" als Dienstname neben dem Logo */
body > nav h1 {
  margin: 0;
  padding-left: 1.1rem;
  border-left: 1px solid var(--fs-line);
  font: 500 1.05rem/1.2 var(--fs-sans);
  color: var(--fs-muted);
  letter-spacing: 0.01em;
}

body > nav .settings-button { color: var(--fs-muted); }
body > nav .settings-button:hover { color: var(--fs-teal); }

body:has(> nav) { background: var(--fs-bg); color: var(--fs-ink); }

body > .body {
  background: var(--fs-bg);
  font-family: var(--fs-sans);
}

.mission-statement h2 {
  font-family: var(--fs-serif);
  font-weight: 500;
  font-size: 2.9rem;
  letter-spacing: -0.01em;
  color: var(--fs-ink);
  padding-top: 3.5rem;
}

.mission-statement p {
  color: var(--fs-muted);
  font-size: 1.1rem;
  line-height: 1.55;
  margin-top: 0.6rem;
  max-width: 34rem;
}

/* Karten wie auf freeshell.de: weiß, Türkis-Kante oben */
#wrapper, .pad-datalist {
  border: 1px solid var(--fs-line);
  border-top: 3px solid var(--fs-teal);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

#label { color: var(--fs-ink); }

#padname {
  color: var(--fs-ink);
  border-color: #cfd4d8;
}
#padname:focus {
  border-color: var(--fs-teal);
  box-shadow: 0 0 0 3px var(--fs-teal-tint);
}

#go2Name [type="submit"],
#transferSessionButton {
  background-color: var(--fs-teal);
  border-color: var(--fs-teal);
  border-radius: 6px;
}
#go2Name [type="submit"]:hover,
#transferSessionButton:hover {
  background-color: var(--fs-teal-dark);
}

#button, #button:hover { border-radius: 6px; }
#button:hover {
  background-color: var(--fs-teal-tint);
  border-color: var(--fs-teal);
  color: var(--fs-teal-dark);
}

.pad-datalist h2 {
  font-family: var(--fs-serif);
  font-weight: 500;
  font-size: 1.6rem;
  color: var(--fs-ink);
  border-bottom-color: var(--fs-line);
  margin: 0;
}

.recent-pad:hover a,
.recent-pad:hover .recent-pad-arrow { color: var(--fs-teal); }

@media (max-width: 640px) {
  body > nav .logo-box { width: 140px; height: 34px; }
  .mission-statement { padding: 0 1rem; }
  .mission-statement h2 { font-size: 2rem; }
  #wrapper, .pad-datalist { width: auto; max-width: none; margin-left: 1rem; margin-right: 1rem; }
}

/* ------------------------------------------------------------------
 * Pad und Timeslider: dezenter Markenstreifen über der Werkzeugleiste
 * ------------------------------------------------------------------ */

html.pad #editbar { box-shadow: inset 0 3px 0 var(--fs-teal); }
html.pad .embedded-history-frame #editbar { box-shadow: none; }