/* ==========================================================
   responsive.css — mobile retrofit for charlesdelint.com
   Only affects screens narrower than 800px.
   The desktop layout is untouched.
   ========================================================== */

@media screen and (max-width: 800px) {

  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { margin: 6px !important; word-wrap: break-word; overflow-wrap: break-word; overflow-x: hidden; }

  /* --- Images and embeds scale down to fit, keeping proportions --- */
  img, iframe, video, embed, object { max-width: 100% !important; }
  img { height: auto !important; }

  /* Small inline icons/bullets keep their natural size */
  img[width="1"], img[height="1"] { height: 1px !important; }

  /* --- Layout tables: stack the columns vertically --- */
  table, tbody, thead, tfoot, tr, td, th {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box;
    float: none !important;
  }
  td, th { height: auto !important; }
  /* Cells flow like words: small cells (a number, a button, a thumbnail)
     sit side by side when they fit; big cells take a full line. */
  tr { display: flex !important; flex-flow: row wrap; }
  td, th { flex: 1 1 auto; min-width: 0; }
  td[align="right"], td[ALIGN="right"], td[align="RIGHT"] { flex-grow: 0; }
  /* Cells that hold whole sections, and title bars, always span the full width */
  td:has(table), td[colspan], td.displaytitle, td.rightlinxbox, td.graphixbox { flex-basis: 100%; }

  /* Page content comes first; the side menu moves below it */
  td.rightlinxbox { order: 2; margin-top: 12px; }
  td.graphixbox   { text-align: center; }

  /* Hide the decorative crow banner beside the logo to save space */
  table[align="right"], table[align="RIGHT"] { display: none !important; }

  /* --- Top navigation bar: bigger, wrapping tap targets --- */
  .toplinxbox { line-height: 2.1; padding: 4px 6px !important; }
  .toplinx, .toplinx:hover { display: inline-block; font-size: 15px; line-height: 1.6; }

  /* --- Side menu links: larger and easier to tap --- */
  .leftlinx, .leftlinx:hover { display: inline-block; font-size: 15px; line-height: 1.5; padding: 4px 0; }

  /* --- Readable body text ---
     The site's CSS sets line-height equal to font size (e.g. 11px/11px),
     which makes lines collide once text is enlarged. Give it room. */
  body * { line-height: 1.4 !important; }
  body, td, p, li { font-size: 15px; }
  .smalltext, .smalltextitalics, .smalltextbold { font-size: 12px; }
  .displaytitle { font-size: 18px; line-height: 1.3; padding: 6px !important; text-align: left !important; }

  /* --- Music player (jPlayer) on the song pages: fit the screen --- */
  .jp-audio { width: auto !important; max-width: 100%; }
  .jp-audio .jp-controls { width: auto !important; padding: 20px 10px 0 !important; }
  .jp-controls-holder { width: auto !important; }
  .jp-volume-controls, .jp-audio .jp-toggles { display: none !important; }
  .jp-audio .jp-type-playlist .jp-progress,
  .jp-audio .jp-type-playlist .jp-time-holder,
  .jp-audio .jp-type-single .jp-progress,
  .jp-audio .jp-type-single .jp-time-holder { right: 14px; width: auto !important; }

  /* Pre-formatted text wraps instead of running off-screen */
  pre { white-space: pre-wrap; }
}