/**
 * Filename:  adam_detail.css
 * Location:  /adam-collection/adam_detail.css
 * Revision:  3
 * Date:      2026-08-06
 * Changes:   Follows adam.css rev 3 onto the light page. .hw-wrap becomes the
 *            dark shell floating on it, at the same width as the banner above
 *            and the browse pages beside it, and the masthead-repair block
 *            gains the frame and the rounded corners that turn the banner into
 *            a box. The .hw-* paint from rev 2 is unchanged.
 * Prior Rev: 2 (adamarchive treatment on a black page)
 *            1 (Almond beige)
 *
 * WHY A SECOND FILE RATHER THAN MORE RULES IN adam.css
 *   adam.css is the theme for the pages in this folder. This file exists only
 *   to override the .hw-* block that hardware_detail.php emits INLINE in its
 *   <head>. An inline <style> beats any linked stylesheet that came before it,
 *   so these overrides have to be linked after it - which means a separate
 *   file, linked from a separate spot in that page. Keeping them apart also
 *   keeps the coupling visible: this file knows about another page and will
 *   need a look whenever that page changes its styling.
 *
 * WHY ONE DETAIL PAGE INSTEAD OF TWO
 *   All 315 items.info_url values point at /collection/hardware_detail.php and
 *   that URL is already indexed. Copying the page here would mean maintaining
 *   31KB of detail logic twice; moving it would mean 315 row updates plus a
 *   redirect map. So it stays where it is and changes coat instead.
 *
 * WHAT CHANGED NOW THAT BOTH INTERFACES ARE DARK
 *   Under the beige palette this file had to fight every rule in the inline
 *   block, because that block is dark-on-black and the target was light. It no
 *   longer does: the page is already dark, so what is left is moving it from
 *   the ColecoVision manager's flat black and #FFE500 to adamarchive.org's
 *   blue-grey panels, brass headings and blue links. Fewer rules, and the ones
 *   that remain are about identity rather than about undoing.
 *
 * SELECTOR WEIGHT
 *   The inline rules are all single-class, so a single class here ties and
 *   wins on order. The few rules below that carry an extra qualifier do so
 *   because the inline rule they replace is also qualified, not to force a
 *   fight. Nothing here uses !important.
 */

/* Page and text ---------------------------------------------------------- */
body {
    background-color: var(--adam-page);
    color: var(--adam-text);
}

/* Masthead repair --------------------------------------------------------
   Unlike the pages in /adam-collection/, this one still links style.css - it
   has to, because the whole .hw-* layout is built on it. So style.css keeps
   styling .site-header and .nav-menu underneath the ADAM masthead, and the
   result was a masthead that did not match the one on the pages either side of
   it: a second red rule under the first (style.css puts a 3px border-bottom on
   .site-header, on top of the .cvhdr-rule div), a taller band (15px of vertical
   padding this masthead does not want), and a nav laid out as a flex row rather
   than the inline row adam.css draws.

   These rules put it back. They are scoped to .cvhdr so nothing here can reach
   a page still on the older .site-header markup. */
.site-header.cvhdr {
    background: #000000;
    padding: 0;
    border: 2px solid var(--adam-frame);
    border-bottom: none;
    border-radius: 9px 9px 0 0;
    overflow: hidden;
}
.cvhdr-nav {
    background: var(--adam-panel);
    border: 2px solid var(--adam-frame);
    border-top: none;
    border-radius: 0 0 9px 9px;
    box-shadow: 0 5px 16px var(--adam-shadow);
}
.cvhdr-nav .nav-menu {
    display: block;
    gap: 0;
    padding: 6px 18px;
    text-align: left;
}
.cvhdr-nav .nav-menu a {
    color: var(--adam-link);
    font-weight: bold; text-transform: uppercase; letter-spacing: .5px;
}
.cvhdr-nav .nav-menu a:hover { background: var(--adam-rule); color: #ffffff; text-shadow: none; }

/* Page shell -------------------------------------------------------------
   The dark box floating on the light page. This page did not get it for free
   like the browse pages did, because it wraps its content in .hw-wrap rather
   than the .cat-wrap adam.css styles. Same shell, same border, so a visitor
   clicking from a card into an item stays inside the same box.

   The max-width overrides the 1200px the inline block sets, so this shell is
   the same width as the banner above it and as the browse pages' shell - three
   boxes on one edge rather than a narrower one floating inside a wider one.
   The two-column layout underneath is flex with a 420px basis, so it spreads
   into the extra width instead of stranding it. The width is also held off the
   viewport edge so the light page shows down both sides. */
.hw-wrap {
    width: calc(100% - 28px);
    max-width: 1430px;
    margin: 0 auto 26px auto;
    padding: 24px;
    background: var(--adam-shell);
    border: 2px solid var(--adam-frame);
    border-radius: 12px;
    box-shadow: 0 6px 22px var(--adam-shadow);
}

@media (max-width: 600px) {
    .hw-wrap { width: calc(100% - 16px); padding: 16px 14px; }
}

/* Headings and links ----------------------------------------------------- */
.hw-h1 {
    color: var(--adam-heading);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .8), 0 0 20px rgba(255, 255, 0, .3);
}
.hw-sub  { color: var(--adam-muted); }
.hw-back {
    color: var(--adam-link); font-weight: bold;
    text-transform: uppercase; letter-spacing: .5px; font-size: 13px;
}
.hw-back:hover { color: var(--adam-heading); }

/* Photographs.
   The frames go to the panel blue rather than the flat #111 of the black
   interface, so a photograph sits in the same material as everything else on
   the page instead of on a hole. */
.hw-lead-frame,
.hw-thumbs img {
    background: #0a1018;
    border-color: var(--adam-border-soft);
}
.hw-thumbs img:hover,
.hw-thumbs img:focus { border-color: var(--adam-rule-lt); }
.hw-thumbs img.on {
    border-color: var(--adam-rule-lt);
    box-shadow: 0 0 0 2px rgba(255, 102, 51, .35);
}

.hw-none {
    background: var(--adam-panel);
    border: 1px dashed var(--adam-border-soft);
    color: var(--adam-muted);
}

/* Specification table ----------------------------------------------------
   adamarchive.org banded its file listings - blue-grey rows, a lighter
   alternate and a blue wash on hover. The same treatment here turns a long
   two-column spec list into something you can track a line across. */
table.hw-table th {
    color: var(--adam-label);
    font-weight: bold; text-transform: uppercase;
    font-size: 12px; letter-spacing: .5px;
}
table.hw-table th,
table.hw-table td {
    border-bottom: 1px solid rgba(85, 105, 130, .35);
    background: var(--adam-sunken);
}
table.hw-table tr:nth-child(even) th,
table.hw-table tr:nth-child(even) td { background: var(--adam-sunken-alt); }
table.hw-table tr:hover th,
table.hw-table tr:hover td { background: var(--adam-hover-row); }

/* Panels and badges ------------------------------------------------------ */
.hw-panel {
    background: var(--adam-panel);
    border: 2px solid var(--adam-rule);
    border-radius: 8px;
    padding: 0 0 16px 0;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .07);
}
/* The panel heading becomes the brass plate, bled to the panel edges - the
   same shape as a section heading on the browse page and as WELCOME and
   ARCHIVE CONTENTS on adamarchive.org. The panel loses its own horizontal
   padding above so the plate can reach the edge; the padding moves onto the
   content that follows it. */
.hw-panel h2 {
    background: var(--adam-gold); color: #000000;
    font-size: 16px; font-weight: bold;
    text-transform: uppercase; letter-spacing: 1.5px; text-align: center;
    padding: 11px 16px; margin: 0 0 14px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.hw-panel > *:not(h2) { padding-left: 18px; padding-right: 18px; }

.hw-badge {
    background: rgba(74, 127, 199, .28);
    color: var(--adam-heading);
    border: 1px solid rgba(74, 127, 199, .55);
    font-weight: bold; text-transform: uppercase;
    font-size: 11px; letter-spacing: .5px;
}

/* The admin unpublished banner. Kept yellow-on-dark rather than folded into
   the palette: it is a warning, and a warning that blends in is not one. */
.hw-review {
    background: rgba(255, 255, 0, .10);
    border: 1px solid rgba(255, 255, 0, .45);
    color: #ffe9a3;
}

.region-flag { border: 1px solid var(--adam-border-soft); }

/* The iframe escape hatch keeps its own colours - it renders over whatever
   page has embedded this one, not over this palette. */
