/* ============================================================
   JAXCO mobile overlay — 2026-05-03
   Loads AFTER style.css. Keeps Jax's 1997-2004 brand intact
   (cornflower blue + slategray + Trebuchet MS); makes the
   table-based layouts breathe on phones, tablets, and desktops.
   ============================================================ */

/* Prevent the original 680px-wide table from forcing horizontal
   scroll on phones. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #ffffff;
  color: #1f2937;
  font-family: "Trebuchet MS", Trebuchet, Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  padding: 0 16px 32px;
}

/* All hard-coded-width tables and cells: be flexible. */
table {
  max-width: 100% !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-collapse: collapse;
}
table[width],
td[width],
th[width] {
  width: auto !important;
  max-width: 100% !important;
}

/* All rasterized images shrink with the viewport. Original
   GIF nav buttons, project thumbnails, and hero images all
   scale gracefully. */
img {
  max-width: 100%;
  height: auto;
  border: 0;
}

/* The original site sized type to 10pt/16pt with `font` shorthand
   inside <td>. That's tiny on mobile. Bump it. */
td,
td > font {
  font-size: 1rem !important;
  line-height: 1.55 !important;
  font-family: "Trebuchet MS", Trebuchet, Tahoma, Verdana, Arial, Helvetica, sans-serif !important;
}

/* The footer credit (originally font.1 = xx-small Arial) was
   illegible on phones. Bring it up to 13px and centre it. */
font.1,
.1,
font[class="1"] {
  font-size: 13px !important;
  line-height: 1.5 !important;
  letter-spacing: 0.02em;
  display: inline-block;
  padding-top: 8px;
}

/* Preserve Jax's link palette (cornflower blue → slategray
   visited → red on hover) but with a modern underline on hover
   instead of the 2002 javascript window.status hack. */
a:link    { color: #6495ed; text-decoration: none; }
a:visited { color: slategray; text-decoration: none; }
a:hover,
a:focus   { color: #dc0000; text-decoration: underline; text-underline-offset: 3px; }

/* Original used `text-indent: 0.42in; text-align: justify;` —
   beautiful for desktop, awful for narrow columns. Keep on
   desktop, drop on mobile. */
p {
  text-align: justify;
  text-indent: 0.42in;
  hyphens: auto;
  margin: 0 0 1em;
}

/* The wordmark / nav images sat in three 38px cells. On
   phones they wrap so each gets a comfortable tap target
   (44×44 minimum). Apply only to the masthead row. */
table tr td a img {
  vertical-align: middle;
  margin: 4px 0;
}

/* Tap-target padding on all in-table links (no extra HTML changes). */
td a {
  display: inline-block;
  padding: 4px 2px;
  min-height: 32px;
}

/* ============================================================
   MOBILE PORTRAIT  (≤ 600px)
   - Original 680px tables would have forced 113% horizontal
     overflow on a 390px iPhone. Force them to 100%.
   - Stack table cells one-per-line so images aren't squashed.
   ============================================================ */
@media (max-width: 600px) {
  body { padding: 0 12px 24px; font-size: 16px; }

  /* Force every cell to its own line on phones. */
  table, tbody, tr { display: block; width: 100%; }
  td, th {
    display: block;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
    text-align: left !important;
    padding: 6px 0;
  }

  /* Centre the JAXCO logo and nav row. */
  td[align="center"],
  td[align=center] {
    text-align: center !important;
  }

  /* Body copy on phones: no first-line indent (looks broken
     in narrow columns) and ragged right (justify hyphenates
     awkwardly at this width). */
  p {
    text-align: left;
    text-indent: 0;
    margin: 0 0 1em;
  }

  /* Drop the rollover effect on touch (no hover state, the
     OFF-state image sticks). */
  a img[name^="img"] { opacity: 1 !important; }
}

/* ============================================================
   TABLET / SMALL DESKTOP  (601-960px)
   - Show the original layout but capped to viewport width.
   - Mobile landscape (844x390) lands here; cells stay inline.
   ============================================================ */
@media (min-width: 601px) and (max-width: 960px) {
  body { padding: 0 16px 32px; }
  table { width: auto !important; }
  td { padding: 4px; }
  /* Mobile landscape: the table is wider than tall, but still
     less than 680px, so let cells flow naturally. */
}

/* ============================================================
   DESKTOP  (≥ 961px)
   - Restore Jax's intended composition: 680px-wide centred
     stage, with white space around it.
   ============================================================ */
@media (min-width: 961px) {
  body {
    padding: 32px 24px 48px;
    background: #fafaf7;
  }
  /* Subtle paper-like card behind the original table. */
  table {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 8px 32px rgba(0,0,0,0.04);
    border-radius: 4px;
    padding: 24px;
  }
}

/* ============================================================
   ARCHIVAL BANNER (added to <body> via mobile.css ::before)
   - Tells visitors this is a 1997-2004 archive. Subtle, not
     intrusive. No JavaScript required.
   ============================================================ */
body::before {
  content: "Archive · 1997–2004";
  display: block;
  text-align: center;
  font-family: "Trebuchet MS", Trebuchet, Tahoma, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #94a3b8;
  background: #f8fafc;
  padding: 6px 8px;
  border-bottom: 1px solid #e5e7eb;
  margin: 0 -16px 16px;
}

@media (min-width: 961px) {
  body::before {
    margin: -32px -24px 24px;
  }
}

/* ============================================================
   ACCESSIBILITY: respect reduced motion, focus rings,
   high-contrast prefs.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

a:focus-visible {
  outline: 2px solid #6495ed;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Hide tracking pixels and the dot.gif spacer artifacts that
   look weird on modern displays — but only the 1px-wide ones. */
img[width="1"], img[height="1"] { display: none; }

/* The 1997 home page composed three large mascot slices
   (l.gif/m.gif/r.gif, each 362px tall) side by side. They
   only make sense at desktop width. Hide on phones; show
   on tablet+ where the table can keep them inline. */
@media (max-width: 720px) {
  img[height="362"] { display: none; }
}

/* The dot.gif 20x38 spacer artifacts between nav buttons
   look like blank gaps on mobile when stacked. Reduce them. */
@media (max-width: 600px) {
  img[src*="dot.gif"], img[src$="dot.gif"] {
    width: 12px !important;
    height: 12px !important;
    opacity: 0.3;
  }
}

/* Project-page background images (interior.bg.jpg etc) on the
   subdirectory pages were full-bleed bg styling. On phones,
   make sure they don't force horizontal scroll. */
body[background] {
  background-size: cover !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
}

/* Forms (contact.html) — keep them functional on mobile. */
input, textarea, select {
  font-family: inherit;
  font-size: 16px; /* prevents iOS zoom-on-focus */
  max-width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
}
input[type="submit"], input[type="button"] {
  background: #6495ed;
  color: white;
  border: 0;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 3px;
}
input[type="submit"]:hover {
  background: #4a7dd6;
}