/* Homepage forum reformat — imageboard-style board bar, thread list and posting modal.
   Scoped to index.html only. Reuses the site's existing palette (styles/stylesheet.css:
   #f5f5f5 background, #666/#888f8d muted text, #45a049 accent, #47649a link blue, #ddd
   borders) rather than inventing new colors, except where the new-thread modal deliberately
   breaks from it to match the dark imageboard posting-form reference it was modeled on.
   Courier New carries every forum-specific piece of type — a font already in the site's own
   vocabulary (the digital clock, styleguide code blocks) and one that reads as "forum/BBS"
   without loading anything new. */

/* ── Board bar — replaces the "SEE: writing / photography / art / archive" sub-nav on the
   homepage only (every other page keeps that bar as-is). Same position/border as
   .title-container normally holds. ── */
.board-bar {
  /* On the homepage .board-bar replaces .title-container outright, so it needs that same 80px
     top margin to clear the fixed .navigation bar (stylesheet.css) — nothing pushes content
     down otherwise. On every other page .title-container still follows right after (now holding
     just the h1/hr), and its own unconditional margin-top:80px would double up on this same
     clearance — the adjacent-sibling rule below cancels that out. */
  margin-top: 80px;
  border-bottom: 2px solid #333;
  padding: 8px 0;
  margin-bottom: 22px;
}

.board-bar + .title-container { margin-top: 24px; }

/* .board-bar-inner also carries .content (for the shared 80%/max-width centering) — index.html's
   own inline <style> sets .content { display:flex; gap:30px } for the two-column layout further
   down the page, same specificity as a plain .board-bar-inner rule and later in source, so it
   would win a tie. ".board-bar .board-bar-inner" outranks it instead of depending on source order. */
/* border/background/padding/box-shadow: none — .board-bar-inner also carries .content, reused
   purely for its shared width/centering, but several pages (e.g. navigation/about.html) give
   .content its own card-like border/background/padding for their actual page content. Without
   resetting those here, that per-page styling leaks into the board bar and makes it look like an
   indented card instead of the plain full-bleed bar every other page shows. Same for
   flex-direction/margin-bottom: display.css (Games, Interactive) makes .content a centered column
   and hub.css/links.css (Resources, Learning, the resources/* pages) give it margin-bottom: 5%,
   which stacked the socials under the board list and pushed the bar's rule far below it. */
.board-bar .board-bar-inner {
  display: flex;
  flex-direction: row;
  margin-bottom: 0;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 20px;
  font-family: 'Courier New', monospace;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: #888f8d;
  border: none;
  background: none;
  padding: 0;
  box-shadow: none;
}

.board-list {
  flex: 1 1 auto;
  min-width: 0;
}

/* stylesheet.css forces every <a> to display:flex !important with a 44px min size at
   <=1000px width (its blanket "better tap targets" rule) — fine for nav items and buttons, but
   it breaks a run of inline text links like this one into a tall stack of oversized boxes.
   Reset back to plain inline text, same fix used for .proj-group-title a on projects.html. */
.board-list a,
.board-socials a,
.board-admin a {
  display: inline !important;
  min-height: 0 !important;
  min-width: 0 !important;
  position: relative;
  color: #47649a;
  text-decoration: none;
}

.board-list a:hover,
.board-socials a:hover,
.board-admin a:hover {
  color: #45a049;
  text-decoration: underline;
}

.board-list .board-sep { color: #bbb; }

/* /fa/ — no destination yet, so it's plain text (not a link): same position/tooltip behavior
   as every other code, just muted and non-interactive instead of blue. */
.board-list .board-empty {
  position: relative;
  color: #999;
  cursor: default;
}

/* Full destination name, shown above a board-topic link (or, for the linkless /fa/, the plain
   .board-empty span) on hover/focus (data-name) instead of the browser's native title tooltip —
   a visitor unfamiliar with imageboard codes can see where "mu" or "vp" actually leads before
   clicking. */
.board-list a[data-name]::after,
.board-list .board-empty[data-name]::after {
  content: attr(data-name);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: #333;
  color: #fff;
  padding: 3px 8px;
  font-size: 11px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-radius: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 5;
}

.board-list a[data-name]:hover::after,
.board-list a[data-name]:focus-visible::after,
.board-list .board-empty[data-name]:hover::after {
  opacity: 1;
  visibility: visible;
}

.board-admin { white-space: nowrap; }

.board-socials {
  white-space: nowrap;
  flex: 0 0 auto;
}

.board-socials a + a { margin-left: 4px; }

@media (max-width: 768px) {
  /* body.m2's own top padding (mobile.css) already clears the fixed tab bar on phones — same
     reason mobile.css zeroes .title-container's margin-top there instead of stacking on top of it. */
  .board-bar { margin-top: 0; }
}

@media (max-width: 700px) {
  .board-bar-inner { font-size: 14px; gap: 6px 14px; }
}

/* ── Minimal footer — replaces the board-bar-in-the-footer version. Two bracketed rows,
   centered like the rest of the site's footer, in the same Courier New/link-blue language as
   the header board bar (reusing .board-socials a's colors) without pulling in the whole
   board-list machinery. */
.mini-footer { padding-top: 14px; padding-bottom: 14px; }

/* .mini-footer-inner also carries .content (for the shared width/centering) — index.html's own
   inline <style> sets .content { display:flex; gap:30px } for the two-column hero layout further
   down the page, same specificity and later in source, so it would otherwise win and force
   these two rows onto one flex line instead of stacking. ".mini-footer .mini-footer-inner"
   outranks it instead of depending on source order (same fix as .board-bar-inner above). */
.mini-footer .mini-footer-inner {
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.mini-footer-row {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #888f8d;
}

.mini-footer-row + .mini-footer-row { margin-top: 6px; }

.mini-footer-row a {
  display: inline !important;
  min-height: 0 !important;
  min-width: 0 !important;
  color: #47649a;
  text-decoration: none;
}

.mini-footer-row a:hover {
  color: #45a049;
  text-decoration: underline;
}

/* ── Forum thread list ("/blog/ - Recent Thoughts") ──
   Keeps the .blog-section class too, purely for the layout it already had (flex sizing, the
   width:100%/order:-1 mobile rules in homepage.css) — but strips that class's card chrome
   (background/border/radius/padding), since individual threads carry their own border now and
   the Figma reference has no outer box wrapping the whole list. */
.forum-board.blog-section {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}

.forum-board { font-family: 'Courier New', monospace; }

/* Title redirects straight to the blogs page now, instead of pairing with [Catalogue] on the
   same row — display/min-*: !important resets against stylesheet.css's blanket <=1000px "every
   a is display:flex, 44px min" rule, see the .board-list a comment above for the full reason. */
.forum-board-title {
  display: block !important;
  min-height: 0 !important;
  min-width: 0 !important;
  margin: 0;
  font-size: 26px;
  font-weight: normal;
  color: #47649a;
  text-decoration: none;
}

.forum-board-title:hover { color: #45a049; text-decoration: underline; }

/* [Message Me] + [Catalogue] together, right under the title. Message Me keeps its own step-
   down-from-title size (26px title -> 22px); Catalogue stays the smaller, secondary-looking
   link it always was — just inline alongside Message Me now instead of on its own row. */
.forum-board-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 4px 0 10px;
}

.forum-message-link {
  display: inline-block !important;
  min-height: 0 !important;
  min-width: 0 !important;
  margin: 0;
  font-size: 22px;
  color: #45a049;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.forum-message-link:hover { text-decoration: underline; }

.forum-catalogue-link {
  display: inline !important;
  min-height: 0 !important;
  min-width: 0 !important;
  font-size: 15px;
  color: #888f8d;
  text-decoration: none;
  white-space: nowrap;
}

.forum-catalogue-link:hover { color: #45a049; text-decoration: underline; }

/* Each thread is its own card — a lainchan-style post box: background a shade off the page
   (#fff against the page's #f5f5f5, same subtle-card idea as .category-card elsewhere on the
   site), a thin border, and align-self:flex-start instead of the flex column's default stretch,
   so a short post reads as a small box rather than being stretched to a uniform width. max-width
   is 100% (not a fixed cap) — the box grows to fit an unfinished line rather than wrapping it
   early, only actually wrapping once it would need more than the full column width. */
/* Outer box — title, [Message Me]/[Catalogue] and the posts themselves all live inside this one
   bordered container now; .forum-posts (below) holds just the post cards so the JS that
   re-renders them (innerHTML on #recent-posts) doesn't wipe out the title/actions above it. */
.forum-thread-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid #ccc;
  padding: 14px;
}

.forum-posts {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.forum-thread {
  align-self: flex-start;
  max-width: 100%;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 12px 14px;
}

.forum-thread-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 2px;
}

/* The collapse toggle sits inline as the first thing on line 1 — left-aligned with the title
   text (no separate gutter) — with the same margin on every side instead of being absolutely
   positioned off in a corner. Fixed width so the file line and image below (indented by that
   same width, see .forum-thread-collapsible) start right after it, not back at the post's edge. */
.forum-thread-toggle {
  width: 28px;
  margin: 4px;
  padding: 0;
  border: none;
  background: none;
  color: #9e9e9e;
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  text-align: left;
  cursor: pointer;
}

.forum-thread-toggle:hover { color: #45a049; }

.forum-thread-title {
  display: inline !important;
  min-height: 0 !important;
  min-width: 0 !important;
  font-size: 18px;
  font-weight: 500;
  color: #45a049;
  text-decoration: none;
}

.forum-thread-title:hover { text-decoration: underline; }

.forum-thread-meta {
  font-size: 13px;
  color: #9e9e9e;
}

/* Indented to start right after the toggle column (its 28px width + 4px margin on each side =
   36px) instead of back at the post's own left edge, so the file line and image line up under
   the title rather than under the toggle. Collapsed: this whole block just disappears, leaving
   only the line-1 head (toggle/title/date/No.) visible. */
.forum-thread-collapsible { padding-left: 36px; }

.forum-thread.collapsed .forum-thread-collapsible { display: none; }

.forum-thread-file {
  margin: 2px 0 8px;
  font-size: 13px;
  color: #9e9e9e;
}

.forum-thread-filename { color: #9e9e9e; }

.forum-tool-link {
  color: #47649a;
  text-decoration: underline;
  margin-left: 2px;
}

.forum-tool-link:hover { color: #45a049; }

/* Image + comment as flex siblings, not a float. A float here would leave the "why is there a
   line break" bug: .forum-thread is an auto-width (shrink-to-fit) box, and browsers don't
   reliably reserve room next to a *floated* child when computing that shrink-to-fit width — the
   box ends up sized to whatever the widest non-floated line is (the File: line) instead of to
   "image width + the comment's own full unwrapped line", so the comment wraps sooner than it
   actually needs to even though the box could just be a bit wider. Flexbox doesn't have that
   quirk — a flex container's auto width correctly accounts for each item's own content width. */
.forum-thread-body {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.forum-thread-image {
  flex: 0 0 auto;
  max-width: 140px;
  max-height: 140px;
  margin: 0 0 8px;
  overflow: hidden;
  background: #eee;
  border: 1px solid #ddd;
}

.forum-thread-image img {
  display: block;
  max-width: 140px;
  max-height: 140px;
  object-fit: contain;
}

.forum-thread-comment { flex: 1 1 auto; }

.forum-thread-comment p {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.5;
  color: #333;
}

.forum-thread-comment p:last-child { margin-bottom: 0; }

.forum-thread-greentext a {
  color: #a5a138;
  text-decoration: none;
}

.forum-thread-greentext a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .forum-thread { padding: 10px; }
  .forum-thread-image { max-width: 100px; max-height: 100px; }
  .forum-thread-image img { max-width: 100px; max-height: 100px; }
}

/* ── New-thread posting modal — deliberately follows the dark imageboard "new reply" form
   this was modeled on (not the site's light palette), trimmed to the fields that actually
   apply to a contact message: Name / Email / Subject+Post / Comment. No file upload, spoiler,
   wrap or password fields — those don't mean anything outside an actual image board. ── */
#contactModal .nt-wrap {
  position: relative;
  pointer-events: auto;
  width: 92%;
  max-width: 560px;
}

#contactModal .nt-box {
  background: #1e1e1e;
  border: 1px solid #444;
  border-radius: 3px;
  overflow: hidden;
  font-family: 'Courier New', monospace;
  font-size: 14px;
}

#contactModal .nt-intro {
  margin: 0;
  padding: 14px 16px;
  background: #262626;
  border-bottom: 1px solid #3a3a3a;
  color: #999;
  font-size: 13px;
  line-height: 1.5;
}

#contactModal .nt-table {
  width: 100%;
  /* Without this, the table sizes to its inputs' intrinsic width (browsers give a bare
     <input> a default ~20-character size) instead of its 92%-wide container, overflowing the
     modal off narrow screens. */
  table-layout: fixed;
  border-collapse: collapse;
}

#contactModal .nt-table tr + tr td { border-top: 1px solid #333; }

#contactModal .nt-label {
  width: 90px;
  padding: 10px 12px;
  background: #2b2b2b;
  color: #ccc;
  font-weight: bold;
  vertical-align: middle;
  white-space: nowrap;
}

#contactModal .nt-field {
  padding: 8px 10px;
  background: #1e1e1e;
}

#contactModal .nt-subject-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

#contactModal input[type="text"],
#contactModal input[type="email"],
#contactModal textarea {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  background: #0f0f0f;
  border: 1px solid #555;
  border-radius: 2px;
  color: #eee;
  font-family: 'Courier New', monospace;
  font-size: 14px;
}

#contactModal textarea { min-height: 130px; resize: vertical; }

#contactModal input:focus,
#contactModal textarea:focus {
  outline: none;
  border-color: #45a049;
}

#contactModal .nt-post-btn {
  flex: 0 0 auto;
  padding: 7px 18px;
  background: #d8d8d8;
  color: #111;
  border: 1px solid #888;
  border-radius: 2px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}

#contactModal .nt-post-btn:hover { background: #45a049; color: #fff; border-color: #45a049; }
#contactModal .nt-post-btn:disabled { opacity: 0.6; cursor: default; }

#contactModal .modal-close {
  top: 10px;
  right: 14px;
  color: #aaa !important;
  z-index: 1;
  pointer-events: auto;
}

#contactModal .modal-close:hover { color: #fff !important; }

#contactModal #mobile-form-message {
  padding: 0 16px 14px;
  background: #1e1e1e;
  font-size: 13px;
  text-align: center;
}

@media (max-width: 560px) {
  #contactModal .nt-label { width: 74px; font-size: 13px; padding: 8px 8px; }
  #contactModal .nt-subject-row { flex-wrap: wrap; }
  #contactModal .nt-post-btn { flex: 1 1 100%; }
}