/* ============================================================
   porges-mobile-fix.css
   Mobile responsiveness patch for the legacy table-based layout.

   Loaded AFTER porges-shared.css so its rules win the cascade.
   The typewriter title is handled inside porges-shared.css itself;
   this file deals with the surrounding layout tables, hardcoded
   widths, faire-part / source blocks, and the sidebar nav.
   ============================================================ */

/* --- Always-on (any viewport) safety nets --- */
img, table, td {
  max-width: 100%;
  box-sizing: border-box;
}

img {
  height: auto;
}

/* Prevent long German words / URLs from blowing out cells. */
body, td, p, blockquote {
  word-wrap: break-word;
  overflow-wrap: break-word;
}


/* ============================================================
   MOBILE / TABLET (<= 1024px)
   Covers iPad portrait (768px) and iPad landscape (1024px).
   The legacy site is built around a 1000px-wide outer <table>;
   anything narrower causes the layout to overflow or collapse
   awkwardly, so we apply our responsive fixes from 1024px down.
   ============================================================ */
@media (max-width: 1024px) {

  /* Kill all hardcoded pixel widths on layout tables and cells.
     Typical offenders: width="889" (top red bar), width="900"
     (faire-part block), width="600" (section headers),
     width="1000" (outer skeleton). */
  table[width],
  td[width] {
    width: auto !important;
    max-width: 100% !important;
  }

  /* Faire-part / source blocks: stack image and text columns
     vertically instead of squeezing them side-by-side. */
  .source-block table tr,
  table[bgcolor="#f0f8e8"] tr,
  table[bgcolor="#f0f8e8"] td,
  td[valign="top"][width] {
    display: block;
    width: 100% !important;
  }

  .source-block img,
  td[valign="top"][width] img {
    display: block;
    margin: 0 auto;
  }

  /* The page's outer skeleton is a single layout <table> with the
     sidebar in column 1 and content in column 2. Force it to behave
     like a block so the sidebar stacks above the content instead of
     being squeezed into a sliver, and so the content cell gets the
     full viewport width. */
  body > table,
  body > table > tbody,
  body > table > tbody > tr,
  body > table > tbody > tr > td {
    display: block;
    width: 100% !important;
    height: auto !important;
  }

  /* Hide purely decorative spacer cells (the thin coloured bars
     on the left/right edges of the outer frame). */
  td[bgcolor="#990033"][width="6"],
  td[bgcolor="#990033"][width="8"],
  td[bgcolor="#000000"] {
    display: none !important;
  }

  /* The fixed-height red top bar becomes a slim divider. */
  td[height="50"][background] {
    height: 8px !important;
  }

  /* Kill tiled background images on layout cells. These images
     (e.g. coin.gif, 95×10 px) were meant to sit inside narrow
     fixed-width columns. When the cell expands to 100% on mobile,
     the image tiles horizontally producing ugly repeated stripes
     across the sidebar background. */
  td[background] {
    background-image: none !important;
  }

  /* The sidebar cell typically has bgcolor="#FF3333" with a fixed
     width="95". Once the cell is full-width on mobile, the menu
     links cluster on the left and the rest is empty red. Switch to
     a flex layout so links spread evenly across the row.

     We target via the descendant .side-nav class rather than the
     cell attribute, because some pages have whitespace inside their
     width="…" attribute value (e.g. width="95\n\t\t  ") which
     breaks exact-match attribute selectors. */
  .side-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px 12px !important;
    padding: 8px 6px !important;
    text-align: center !important;
  }
  .side-nav > div {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .side-nav a {
    display: inline-block !important;
    margin: 0 !important;
    padding: 4px 6px !important;
    font-size: 14px !important;
  }

  body { margin: 0; padding: 0; }
}


/* ============================================================
   PHONE (<= 768px)
   ============================================================ */
@media (max-width: 768px) {
  .side-nav a {
    font-size: 13px !important;
    padding: 3px 5px !important;
  }
}


/* ============================================================
   VERY NARROW (<= 480px) — iPhone SE, older Androids
   ============================================================ */
@media (max-width: 480px) {
  .side-nav {
    gap: 3px 8px !important;
  }
  .side-nav a {
    font-size: 12px !important;
    padding: 2px 4px !important;
  }
}