/* islandr brand polish für die Architektur-Site.
   custom.css wird als letztes Stylesheet geladen (nach bulma + generatr), gewinnt
   also. Theme-neutral gehalten: nur Typo/Abstände/Karten, keine harten Farben, damit
   light/dark (generatr.site.theme) beide tragen. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap');

/* Fließtext: Inter — ruhig und dicht lesbar für Doku. */
body,
.content,
.menu-list,
.navbar {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Überschriften, Brand-Leiste, Menü-Labels: Space Grotesk — wie islandr-gateway.net. */
.title, .subtitle,
.content h1, .content h2, .content h3, .content h4,
.navbar-item, .menu-label {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  letter-spacing: -0.015em;
}

/* Monospace: IBM Plex Mono — die Mono des Designsystems (Keys, IPs, Hashes). */
code, pre, kbd, .is-family-monospace {
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Lesbarkeit im Fließtext. */
.content { line-height: 1.7; }
.content h2 { margin-top: 2.2rem; }

/* Verlinkte Diagramm-Elemente sichtbar machen — beide Linkarten, die der Exporter
   erzeugt: der Drilldown ins nächste View UND der Sprung in die Doku (letzterer aus
   der url am Element im Modell). Ein SVG-<a> zeigt von sich aus keinen Zeiger, die
   Klickbarkeit muss man also sehen. Hover ist nur Verstärkung — der Klick trägt die
   Funktion, damit es auf Touch erreichbar bleibt. */
svg g.entity a {
  cursor: pointer;
}
svg g.entity a:hover rect,
svg g.entity a:focus rect {
  filter: brightness(1.15);
}
svg g.entity a:focus {
  outline: 2px solid #3BBBD2;
  outline-offset: 2px;
}

/* C4-Diagramme schweben als Karte — in beiden Themes. Die SVGs tragen einen hellen
   Eigen-Hintergrund; die Karte grenzt sie sauber gegen die Seite ab. */
svg[data-diagram-type] {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(10, 19, 32, .12);
}
:root[data-theme="dark"] svg[data-diagram-type] {
  /* Die Diagramme tragen eine feste Hell-Palette (dunkler Text, weiße Flächen).
     In Dark Mode ohne hellen Untergrund würde der Beziehungs-Text verschwinden —
     darum bekommt jede Ansicht eine helle Karte. Dunkle Chrome, helle Diagramme. */
  background: #F7F8FA;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}