/* ========================================================================
   OPENBUREAU — Flarum custom styles
   Spiegelt die Typografie und Farben von openbureau.ch ins Forum.

   ZWEI-SCHRITT-SETUP (Flarum erlaubt kein @import in Custom Styles):

   1) Flarum-Admin → Appearance → "Custom Header" (HTML-Feld):
      <link rel="preconnect" href="https://fonts.bunny.net">
      <link rel="stylesheet" href="https://fonts.bunny.net/css?family=newsreader:400,400i,500,500i,600,600i|ibm-plex-mono:400,500|space-grotesk:400,500,700|inter:400,500,600">

   2) Flarum-Admin → Appearance → "Custom Styles":
      → diesen ganzen Inhalt hier reinkopieren (ab :root unten)

   Live-Quelle dieser Datei: openbureau.ch/flarum.css
   ======================================================================== */

:root {
  --ob-bg:        hsl(35, 14%, 96%);
  --ob-bg-2:      hsl(35, 14%, 93%);
  --ob-text:      hsl(25, 18%, 10%);
  --ob-muted:     hsl(25,  8%, 38%);
  --ob-border:    hsl(35, 14%, 84%);
  --ob-accent:    #b54a2c;
  --ob-accent-2:  #d97a5a;

  --ob-serif:   'Newsreader', Charter, 'Source Serif Pro', Georgia, serif;
  --ob-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --ob-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --ob-mono:    'IBM Plex Mono', 'Courier New', ui-monospace, monospace;

  /* Flarum LESS vars overridden where it accepts CSS custom props */
  --primary-color: var(--ob-accent);
  --secondary-color: var(--ob-text);
}

/* ------------------------------------------------------------------------
   Body — paper background, serif body, editorial
   ------------------------------------------------------------------------ */
html, body, .App {
  background: var(--ob-bg) !important;
  color: var(--ob-text) !important;
  font-family: var(--ob-serif) !important;
  font-size: 16.5px !important;
  line-height: 1.55 !important;
}

/* Headlines — display sans */
h1, h2, h3, h4, h5,
.DiscussionListItem-title,
.DiscussionHero-title,
.DiscussionPage .Hero-title,
.Post-header h3,
.SignUpModal-title,
.LogInModal-title {
  font-family: var(--ob-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--ob-text) !important;
}

/* Meta lines + mono labels */
.DiscussionListItem-count,
.PostMeta,
.Post-meta,
.username,
.item-terminalPost,
.item-startTime,
.notifications-pane-header,
.Search-results {
  font-family: var(--ob-mono) !important;
  font-size: 0.82rem !important;
  color: var(--ob-muted) !important;
}

/* Listings (tags, controls) — Inter */
.IndexPage-toolbar,
.DiscussionList-content .DiscussionListItem-info,
.TagsLabel,
.tag-name,
.NotificationsList,
.Dropdown-menu,
.Sidebar .item-newDiscussion {
  font-family: var(--ob-sans) !important;
}

/* ------------------------------------------------------------------------
   Header / Hero
   ------------------------------------------------------------------------ */
.App-header {
  background: var(--ob-bg) !important;
  border-bottom: 1px solid var(--ob-border) !important;
  box-shadow: none !important;
  color: var(--ob-text) !important;
}
.App-header .Button,
.App-header .item-search input {
  color: var(--ob-text) !important;
  background: transparent !important;
}
.App-header .Header-title,
.App-header .Header-title a {
  font-family: var(--ob-display) !important;
  font-weight: 700 !important;
  font-size: 1.4rem !important;
  letter-spacing: -0.01em !important;
  color: var(--ob-text) !important;
  text-transform: none !important;
}

.Hero {
  background: var(--ob-bg-2) !important;
  color: var(--ob-text) !important;
  border-bottom: 1px solid var(--ob-border) !important;
  text-shadow: none !important;
}
.Hero-title { color: var(--ob-text) !important; }
.Hero-subtitle { color: var(--ob-muted) !important; font-style: italic; font-family: var(--ob-serif) !important; }

/* ------------------------------------------------------------------------
   Discussion list — editorial entries, no cards
   ------------------------------------------------------------------------ */
.IndexPage-results,
.DiscussionList-content,
.DiscussionList {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.DiscussionListItem {
  background: transparent !important;
  border-bottom: 1px solid var(--ob-border) !important;
  padding: 1rem 0.25rem !important;
  margin: 0 !important;
}
.DiscussionListItem:hover { background: var(--ob-bg-2) !important; }

.DiscussionListItem-title {
  font-size: 1.15rem !important;
  line-height: 1.25 !important;
  margin-bottom: 0.3rem !important;
}
.DiscussionListItem-title a { color: var(--ob-text) !important; }
.DiscussionListItem-title a:hover { color: var(--ob-accent) !important; }

.DiscussionListItem-info {
  color: var(--ob-muted) !important;
  font-size: 0.85rem !important;
}

.DiscussionListItem-count {
  background: transparent !important;
  border: 1px solid var(--ob-border) !important;
  border-radius: 0 !important;
  color: var(--ob-muted) !important;
  padding: 0.15rem 0.4rem !important;
}

/* Avatar — soften (greyscale until hover, like the website) */
.Avatar {
  border-radius: 0 !important;
  filter: grayscale(80%);
  transition: filter 0.3s ease;
}
.DiscussionListItem:hover .Avatar,
.Post:hover .Avatar { filter: grayscale(0%); }

/* ------------------------------------------------------------------------
   Tags
   ------------------------------------------------------------------------ */
.TagsLabel {
  font-family: var(--ob-sans) !important;
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
.TagsLabel .tag {
  background: transparent !important;
  color: var(--ob-accent) !important;
  border: 1px solid var(--ob-border) !important;
  border-radius: 0 !important;
  padding: 0.1rem 0.45rem !important;
  font-weight: 500 !important;
}
.TagsLabel .tag:hover {
  background: var(--ob-bg-2) !important;
  border-color: var(--ob-accent) !important;
}

.TagTile {
  background: var(--ob-bg-2) !important;
  border-radius: 0 !important;
  border: 1px solid var(--ob-border) !important;
  color: var(--ob-text) !important;
  box-shadow: none !important;
}
.TagTile-info h4 { color: var(--ob-text) !important; }
.TagTile-description { color: var(--ob-muted) !important; font-style: italic; font-family: var(--ob-serif) !important; }

/* ------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------ */
.Button {
  border-radius: 0 !important;
  font-family: var(--ob-display) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  background: transparent !important;
  color: var(--ob-text) !important;
  border: 1px solid var(--ob-border) !important;
  box-shadow: none !important;
  text-transform: none !important;
}
.Button:hover { background: var(--ob-bg-2) !important; border-color: var(--ob-text) !important; }

.Button--primary {
  background: var(--ob-accent) !important;
  color: #fff !important;
  border-color: var(--ob-accent) !important;
}
.Button--primary:hover {
  background: var(--ob-accent-2) !important;
  border-color: var(--ob-accent-2) !important;
  color: #fff !important;
}

.Button--link {
  border: none !important;
  background: transparent !important;
  color: var(--ob-text) !important;
}

/* ------------------------------------------------------------------------
   Links
   ------------------------------------------------------------------------ */
a {
  color: var(--ob-text);
  border-bottom: 1px solid var(--ob-border);
  text-decoration: none !important;
}
a:hover { color: var(--ob-accent); border-bottom-color: var(--ob-accent); }

/* Strip border-bottom in places where it'd be noisy */
.App-header a,
.Sidebar a,
.Dropdown a,
.Button,
.TagsLabel a,
.Avatar,
.Search-results a,
.DiscussionListItem-title a,
.PostUser a,
.username,
.notifications a { border-bottom: none !important; }

/* ------------------------------------------------------------------------
   Discussion / Post view
   ------------------------------------------------------------------------ */
.DiscussionPage-discussion {
  background: transparent !important;
}
.DiscussionHero {
  background: var(--ob-bg-2) !important;
  border-bottom: 1px solid var(--ob-border) !important;
  box-shadow: none !important;
}
.DiscussionHero-title { color: var(--ob-text) !important; font-size: 1.6rem !important; }

.PostStream { background: transparent !important; }

.Post {
  border-bottom: 1px solid var(--ob-border) !important;
  padding: 1rem 0 !important;
}
.Post-header { font-family: var(--ob-mono) !important; font-size: 0.85rem !important; color: var(--ob-muted) !important; }
.Post-body {
  font-family: var(--ob-serif) !important;
  font-size: 1.02rem !important;
  line-height: 1.55 !important;
  color: var(--ob-text) !important;
}
.Post-body p { margin: 0.6em 0 !important; }
.Post-body blockquote {
  border-left: 2px solid var(--ob-accent) !important;
  padding-left: 1rem !important;
  margin: 0.8rem 0 !important;
  font-style: italic;
  color: var(--ob-muted) !important;
}
.Post-body code, .Post-body pre {
  font-family: var(--ob-mono) !important;
  background: var(--ob-bg-2) !important;
  border: 1px solid var(--ob-border) !important;
  border-radius: 0 !important;
}

/* ------------------------------------------------------------------------
   Sidebar (left rail with categories/tags)
   ------------------------------------------------------------------------ */
.Sidebar {
  background: transparent !important;
}
.Sidebar .item-nav .Dropdown-toggle,
.Sidebar .item-nav a {
  font-family: var(--ob-sans) !important;
  color: var(--ob-text) !important;
  background: transparent !important;
  border-radius: 0 !important;
  border-left: 2px solid transparent !important;
}
.Sidebar .item-nav .active a,
.Sidebar .item-nav a:hover {
  background: var(--ob-bg-2) !important;
  border-left-color: var(--ob-accent) !important;
}

/* ------------------------------------------------------------------------
   Composer (reply / new discussion)
   ------------------------------------------------------------------------ */
.Composer {
  background: var(--ob-bg) !important;
  border-top: 1px solid var(--ob-border) !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.04) !important;
}
.Composer-header, .Composer-body, .Composer textarea {
  background: var(--ob-bg) !important;
  color: var(--ob-text) !important;
  font-family: var(--ob-serif) !important;
}

/* ------------------------------------------------------------------------
   Modals (sign up, log in)
   ------------------------------------------------------------------------ */
.Modal-content {
  background: var(--ob-bg) !important;
  border-radius: 0 !important;
  border: 1px solid var(--ob-border) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.08) !important;
}
.Modal-header { border-bottom: 1px solid var(--ob-border) !important; }
.Modal input.FormControl, .FormControl {
  background: var(--ob-bg-2) !important;
  border: 1px solid var(--ob-border) !important;
  border-radius: 0 !important;
  color: var(--ob-text) !important;
  font-family: var(--ob-sans) !important;
}
.Modal input.FormControl:focus, .FormControl:focus {
  border-color: var(--ob-accent) !important;
  box-shadow: 0 0 0 2px rgba(181, 74, 44, 0.15) !important;
}

/* ------------------------------------------------------------------------
   Dropdown menus
   ------------------------------------------------------------------------ */
.Dropdown-menu {
  background: var(--ob-bg) !important;
  border: 1px solid var(--ob-border) !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
}

/* ------------------------------------------------------------------------
   Misc polish
   ------------------------------------------------------------------------ */
.Alert { border-radius: 0 !important; }
.Badge { border-radius: 0 !important; font-family: var(--ob-mono) !important; }
.Pagination-link { border-radius: 0 !important; font-family: var(--ob-mono) !important; }

/* Remove dark/colored header bar in default Flarum */
.App-header-primary { background: var(--ob-bg) !important; }