/* pixel-nation memorial — supplemental styles layered over the real SMF theme CSS.
   Only things the theme stylesheets don't define (yshout box, theme selector, tiny
   modern-compat fixes). Theme colors win everywhere else. */

/* yshout shoutbox — the .shout classes come from the yshout mod, not the theme */
#shouts { overflow: hidden; }
#shouts .shout {
  padding: 3px 0; border-bottom: 1px dotted #aaa; line-height: 1.45;
  font-size: 12px; margin: 0;
}
#shouts .shout .shout-timestamp { color: #888; margin-right: 6px; font-size: 11px; }
#shouts .shout.guest { color: #777; }
#shouts .shout b { color: #c44; }

/* theme selector in the nav row */
.pn-theme-sel { float: right; padding: 5px 1ex; }
.pn-theme-sel select { font-size: 11px; }

/* keep the maintab nav + selector on one line; clear below */
.pn-navwrap { margin: 1ex 0; }
.pn-navwrap::after { content: ""; display: block; clear: both; }
.pn-navwrap > table { margin: 0; }

/* post body: let the era HTML breathe */
.post { line-height: 1.5; word-wrap: break-word; }
.post img { max-width: 100%; height: auto; }
.post marquee { display: block; padding: 4px 0; }

/* tables: SMF themes use cellspacing=1 + bordercolor for the grid; ensure it shows */
table.bordercolor, table.tborder { border-collapse: separate; border-spacing: 1px; }

/* tiny screens: the 2007 themes assume ~960px; scroll rather than break */
#bodyarea { overflow-x: auto; }
img#pn-logo { max-width: 100%; height: auto; }

/* TinyPortal block titles (.blox) — defined in pN CSS but not egg/blackTed.
   Fallback so all themes render the sidebar widget headers. */
.blox, .blox a {
  font-weight: bold; text-align: left; font-size: 13px;
  display: block; padding: 4px 6px; border-bottom: 1px solid #ccc;
  background: var(--pn-blox-bg, #e9e9e9); color: #1b2021;
}
#leftbarHeader .tborder, #rightbarHeader .tborder,
body .tborder[style] { margin-bottom: 2px; }

/* Sidebar divider consolidation (2026-07-30 round 2).
   Browser-diagnosed root causes (3 stacked stripes per header):
     (a) The <a> inside the inner <span class="blox"> carried the legacy
         `.blox, .blox a { border-bottom: 1px solid #ccc }` fallback earlier in
         this file — one stripe adjacent to the outer-div stripe.
     (b) The OUTER .blox <div> (and ALSO inner .blox <span>) matched `.blox` and got
         the override's `border-bottom: 1px solid #9a9a9a` — a near-identical second
         stripe sitting a few px below (a)'s.
     (c) The TinyPortal padding <tr> at the bottom of each header's inner table is
         actually `<tr>\t\t\n\t\t</table>` (whitespace text node, no element children).
         My earlier `tr:empty` rule did NOT match it because `:empty` excludes text
         children, so the row rendered with default tr height.
   Refinements:
     1. Scope outer-div border rules to `.tborder > .blox` (direct-child-of-tborder)
        so the inner <span class="blox"> no longer inherits them.
     2. Add a universal `.tborder > .blox *` descendant killer that zeros borders,
        backgrounds, padding, and margin on every element inside the header
        (<table>, <tr>, <td>, <span class="blox">, <a>). The outer .blox div in the
        rule above is the only element allowed to keep a divider.
     3. Switch `tr:empty` to `tr:not(:has(*))` so whitespace-only padding <tr>s match.
   Net result: exactly ONE divider under each header in pN / blackTed / egg. */
#leftbarHeader .tborder, #rightbarHeader .tborder {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 2px 0 !important;        /* preserve tiny gap between adjacent sidebar blocks */
  box-shadow: none !important;
}
#leftbarHeader .tborder > .blox,
#rightbarHeader .tborder > .blox {
  border: 0 !important;
  border-bottom: 1px solid #9a9a9a !important;       /* THE one divider */
  padding: 5px 8px !important;
  margin: 0 !important;
  display: block;
  font-weight: bold;
  font-size: 13px;
  color: #1b2021;
  background: #ececec !important;
  box-shadow: none !important;
}
/* Universal descendant cleaner — kills every border, padding, margin, and
   background on every element INSIDE the outer .blox wrapper. Without this, the
   inner <span class="blox"> re-draws a `.blox` border-bottom and the <a> keeps
   its own legacy `.blox a { border-bottom: 1px solid #ccc }` from earlier in
   this file. */
#leftbarHeader .tborder > .blox *,
#rightbarHeader .tborder > .blox * {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Hide every <tr> with no real element descendants, regardless of whitespace.
   The TinyPortal template's padding placeholder `<tr>\t\t\n\t\t</table>` has no
   element children, so `:not(:has(*))` matches it. The previous `tr:empty` did not. */
#leftbarHeader .tborder > .blox table tr:not(:has(*)),
#rightbarHeader .tborder > .blox table tr:not(:has(*)) {
  display: none !important;
  height: 0 !important; line-height: 0 !important; font-size: 0 !important;
}
/* the .windowbg body: theme defines border-top in some themes (egg specifically);
   kill all four windowbg borders so the only visible divider is on .blox above. */
#leftbarHeader .windowbg, #rightbarHeader .windowbg {
  border: 0 !important;
  background: #ececec !important;
  padding: 4px !important;
  margin-top: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* footer cell — windowbg3 isn't in every theme */
.windowbg3 { background: var(--pn-wbg3, #ececec); }

/* board tree rows */
.catbg { padding: 5px 8px; font-weight: bold; }
.board-row-deleted { opacity: 0.6; }

/* pixelPLUS article: 2x2 image grid (the four <img>s inside the art-plus block).
   Uses CSS Grid with equal-width columns and a small gap; each image scales to
   100% of its cell. Works in any modern browser; degrades gracefully (each img
   keeps its native inline width if grid is unsupported, so it just stacks). */
.pixelplus-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 6px 0;
}
.pixelplus-grid img {
  display: block;
  width: 100%;
  height: auto;
}

/* Page background enforced: #ececec across all themes.
   pN already has this; egg (#ededed) and blackTed (white) needed explicit override.
   Declared with !important because every theme sets `body { background-color: ... }`,
   and memorial.css is loaded after the theme stylesheet so the cascade favors this. */
/* pixel-nation header logo banner sizing (2026-07-31; round 5).
   The restoration logo is 1708 x 402 RGBA (4.25:1 aspect, replacing the
   earlier 1723 x 620 / 2.78:1 mark). pN's .menu rule sets
   `background: url(images/logo.png) no-repeat; height: 100px;` without
   `background-size`, so the browser draws the image at natural size
   (1708 x 402) inside the 100-tall box. Only the top 100-px sliver is
   visible, and the logo's content sits in the middle of the 402, so that
   strip is mostly transparent and reads as the page bg -> blank banner.

   Fix: scale the image down proportionally so its rendered height = 56 px
   (width then becomes ~238 px at the natural 4.25 aspect) and left-anchor
   / vertically-center it via `background-position: left center`, leaving
   ~22 px of breathing room above and below in the 100-px banner. The
   56-px height is ~44% shorter than the .menu container's full 100-px
   banner (per user tuning request 2026-07-31 -- third-step reduction;
   this round is another -25% from round 4's 75 px, round 4 was -25%
   from 100 at 75, round 3 was -15% from 100 at 85). The logo stays
   centered (no top/bottom-edge flush) per the latest user directive.

   Selector specificity: `body .menu` (0,0,1,1) beats any theme's plain
   `.menu` (0,0,1,0) regardless of which stylesheet parses last in the
   cascade. This is defense-in-depth: memorial.css is already after the
   theme CSS in <head> so it wins equal-specificity ties by document order,
   but the elevated specificity also protects against any future race or
   re-application (e.g., the theme-switching IIFE in docs/index.html that
   reassigns theme-css href at load could in theory trigger a re-application
   in some browsers). */
body .menu {
  background-size: auto 56px;
  background-position: left center;
  background-repeat: no-repeat;
}

body { background-color: #ececec !important; }