/* OPENBUREAU — Flarum custom styles, matches the new Republik-style site:
   dark masthead with serif wordmark, paper body, serif content. */

: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-dark:         #191919;       /* masthead bg, matches main site */
  --ob-dark-text:    #f0f0f0;       /* warm white — matches main site */
  --ob-dark-muted:   #a9a9a9;

  --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
   Aggressive: force serif everywhere, then re-override mono/display zones
   ------------------------------------------------------------------------ */
html, body, .App, .App-content, .container, .IndexPage, .DiscussionPage,
.SettingsPage, .UserPage, .NotificationsPage, .Search-results,
p, li, div, span, td, blockquote, .fa, em, strong {
  font-family: var(--ob-serif) !important;
}

html, body, .App {
  background: var(--ob-bg) !important;
  color: var(--ob-text) !important;
  font-size: 19px !important;        /* matches new OPENBUREAU body */
  line-height: 1.55 !important;
}

/* Form fields — serif for prose, sans for short controls */
textarea, .Composer textarea, .Composer-body, .Composer-body *,
.TextEditor, .TextEditor textarea, .ComposerBody-textarea,
.RichEditor, .Post-body, .Post-body * {
  font-family: var(--ob-serif) !important;
  font-size: 1.05rem !important;
  line-height: 1.55 !important;
}

input, select, .FormControl, .Search-input {
  font-family: var(--ob-sans) !important;
}

/* Headlines — serif (matches new OPENBUREAU article style) */
h1, h2, h3, h4, h5,
.DiscussionListItem-title,
.DiscussionHero-title,
.DiscussionPage .Hero-title,
.Post-header h3,
.SignUpModal-title,
.LogInModal-title {
  font-family: var(--ob-serif) !important;
  font-weight: 700 !important;
  letter-spacing: -0.018em !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;
}

/* ------------------------------------------------------------------------
   Masthead — black bar mirroring openbureau.ch, white serif wordmark,
   sans-serif nav items (Sign up / Log in / custom-added header links).
   ------------------------------------------------------------------------ */
.App-header {
  background: var(--ob-dark) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  color: var(--ob-dark-text) !important;
}
.App-header-primary { background: var(--ob-dark) !important; }
.App-header-secondary { background: var(--ob-dark) !important; }

/* Wordmark image (SVG logo from openbureau.ch) */
.ob-wordmark-image {
  display: block;
  height: 1.8rem;
  width: auto;
  filter: none;
  margin: 0;
}

/* Flarum's own wordmark is hidden via display:none — see masthead section */
.App-header .Header-title,
.App-header .Header-title a {
  font-family: var(--ob-serif) !important;
  font-weight: 700 !important;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem) !important;
  letter-spacing: 0.02em !important;
  color: var(--ob-dark-text) !important;
  text-transform: uppercase !important;
  border-bottom: none !important;
}
.App-header .Header-title a:hover { color: var(--ob-dark-text) !important; opacity: 0.85; }

/* Header buttons / search field — white text on dark, no borders */
.App-header .Button,
.App-header .item-search input,
.App-header-secondary .Button,
.App-header-secondary a {
  color: var(--ob-dark-muted) !important;
  background: transparent !important;
  border: none !important;
  font-family: var(--ob-display) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  font-size: 0.85rem !important;
}
.App-header .Button:hover,
.App-header-secondary .Button:hover,
.App-header-secondary a:hover {
  color: var(--ob-dark-text) !important;
  background: transparent !important;
}
.App-header .Button--primary {
  color: var(--ob-dark-text) !important;
  background: var(--ob-accent) !important;
  border: none !important;
}
.App-header .Button--primary:hover { background: var(--ob-accent-2) !important; }

/* Search input on the dark masthead */
.App-header .Search-input {
  background: rgba(255,255,255,0.08) !important;
  color: var(--ob-dark-text) !important;
  border: none !important;
}
.App-header .Search-input::placeholder { color: var(--ob-dark-muted) !important; }

/* Hero (forum index) — clean editorial header, no heavy borders */
.Hero, .IndexPage .Hero {
  background: var(--ob-bg) !important;
  color: var(--ob-text) !important;
  border-bottom: none !important;
  text-shadow: none !important;
  padding: 2.5rem 1rem 1.5rem !important;
}
.Hero-title {
  color: var(--ob-text) !important;
  font-family: var(--ob-serif) !important;
  font-size: clamp(2rem, 4vw, 2.8rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.026em !important;
  line-height: 1.05 !important;
}
.Hero-subtitle {
  color: var(--ob-muted) !important;
  font-family: var(--ob-serif) !important;
  font-style: normal !important;
  font-size: 1.25rem !important;
  margin-top: 0.6rem !important;
}

/* Discussion page hero (single thread) — Republik-style clean header */
.DiscussionHero {
  background: var(--ob-bg) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 2rem 1rem 1.5rem !important;
}
.DiscussionHero-title {
  color: var(--ob-text) !important;
  font-family: var(--ob-serif) !important;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.024em !important;
  line-height: 1.05 !important;
}

/* Tag pill above title — terracotta-tinted, no #, rounded */
.DiscussionHero .TagsLabel,
.DiscussionHero .TagLabel {
  display: inline-block;
  background: color-mix(in oklab, var(--ob-accent) 14%, transparent) !important;
  border: none !important;
  color: var(--ob-text) !important;
  text-transform: lowercase !important;
  font-family: var(--ob-display) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  padding: 0.3rem 0.85rem !important;
  border-radius: 999px !important;
  margin-bottom: 0.8rem !important;
}

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

/* Discussion list items — like OPENBUREAU journal cards: clean separators */
.DiscussionListItem {
  background: transparent !important;
  border-top: 1px solid var(--ob-border) !important;
  border-bottom: none !important;
  padding: 1.4rem 0.25rem !important;
  margin: 0 !important;
}
.DiscussionListItem:last-child { border-bottom: 1px solid var(--ob-border) !important; }
.DiscussionListItem:hover { background: var(--ob-bg-2) !important; }

.DiscussionListItem-title {
  font-family: var(--ob-serif) !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.018em !important;
  line-height: 1.2 !important;
  margin-bottom: 0.45rem !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-family: var(--ob-sans) !important;
  font-size: 0.9rem !important;
}

.DiscussionListItem-count {
  background: color-mix(in oklab, var(--ob-accent) 14%, transparent) !important;
  border: none !important;
  border-radius: 999px !important;
  color: var(--ob-text) !important;
  font-family: var(--ob-display) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  padding: 0.25rem 0.7rem !important;
}

/* ------------------------------------------------------------------------
   Below-header: subtle divider + paper bg continues for the content area
   ------------------------------------------------------------------------ */
.App-content { background: var(--ob-bg) !important; }

/* Headlines size scale — matches OPENBUREAU sizes */
h1 { font-size: clamp(2rem, 4vw, 2.8rem) !important; line-height: 1.05 !important; font-weight: 800 !important; }
h2 { font-size: 1.6rem !important; line-height: 1.15 !important; }
h3 { font-size: 1.3rem !important; line-height: 1.2 !important; }

/* Avatar — squared, lightly desaturated, full color on hover */
.Avatar {
  border-radius: 0 !important;
  filter: grayscale(30%) contrast(0.95);
  transition: filter 0.3s ease;
}
.Avatar:hover,
.DiscussionListItem:hover .Avatar,
.Post:hover .Avatar { filter: grayscale(0%) contrast(1); }

/* ------------------------------------------------------------------------
   Tags — pills (matches OPENBUREAU's tag pills)
   ------------------------------------------------------------------------ */
.TagsLabel {
  font-family: var(--ob-display) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}
.TagsLabel .tag {
  display: inline-block;
  background: color-mix(in oklab, var(--ob-accent) 14%, transparent) !important;
  color: var(--ob-text) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 0.3rem 0.85rem !important;
  margin: 0 0.3rem 0.3rem 0 !important;
  font-weight: 500 !important;
  text-transform: lowercase !important;
}
.TagsLabel .tag:hover {
  background: color-mix(in oklab, var(--ob-accent) 30%, transparent) !important;
  border: none !important;
}

.TagTile {
  background: color-mix(in oklab, var(--ob-accent) 8%, transparent) !important;
  border-radius: 4px !important;
  border: none !important;
  color: var(--ob-text) !important;
  box-shadow: none !important;
}
.TagTile-info h4 { color: var(--ob-text) !important; font-family: var(--ob-serif) !important; font-weight: 700 !important; }
.TagTile-description { color: var(--ob-muted) !important; font-family: var(--ob-serif) !important; }

/* ------------------------------------------------------------------------
   Buttons — softer, rounded, no heavy borders
   ------------------------------------------------------------------------ */
.Button {
  border-radius: 999px !important;
  font-family: var(--ob-display) !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  background: color-mix(in oklab, var(--ob-text) 6%, transparent) !important;
  color: var(--ob-text) !important;
  border: none !important;
  box-shadow: none !important;
  text-transform: none !important;
  padding: 0.45rem 1rem !important;
}
.Button:hover {
  background: color-mix(in oklab, var(--ob-text) 12%, transparent) !important;
  color: var(--ob-text) !important;
}

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

.Button--link {
  border: none !important;
  background: transparent !important;
  color: var(--ob-text) !important;
  padding: 0.45rem 0.6rem !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 — Republik-style article header + clean post stream
   ------------------------------------------------------------------------ */
.DiscussionPage-discussion {
  background: transparent !important;
}
.PostStream { background: transparent !important; }

.Post {
  border-top: 1px solid var(--ob-border) !important;
  border-bottom: none !important;
  padding: 1.8rem 0 !important;
}
.Post:last-child { border-bottom: 1px solid var(--ob-border) !important; }

/* Author + meta on each post: Inter sans (like OPENBUREAU byline) */
.Post-header,
.Post .PostUser,
.Post .username,
.Post .PostMeta time,
.Post .Post-header time {
  font-family: var(--ob-sans) !important;
  font-size: 0.95rem !important;
  color: var(--ob-muted) !important;
  font-weight: 400;
}
.Post .username { color: var(--ob-text) !important; font-weight: 500 !important; }

.Post-body {
  font-family: var(--ob-serif) !important;
  font-size: 1.1rem !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: none !important;
  border-radius: 4px !important;
  padding: 0.1em 0.4em;
}
.Post-body pre { padding: 0.8rem 1rem; }

/* ------------------------------------------------------------------------
   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; }

