/* Responsive overlay for the 2014 zsu.it static site.
   Keeps the original visual design intact on desktop, makes it usable on phones/tablets.
   No identity changes (colors, fonts, layout proportions preserved). */

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }

table { max-width: 100%; }
img { border: 0; }
/* Keep spacer GIFs at their declared intrinsic size so the table layout
   doesn't collapse (root cause of the CLS=0.39 shift). Real content images
   get fluid sizing. */
img:not([src$="pixel.gif"]):not([src$="pxnero.gif"]) { max-width: 100%; height: auto; }

/* The site is built around a fixed 650px center table. Let it fluidly shrink. */
table[width="650"] { width: 100% !important; max-width: 650px; box-sizing: border-box; }

/* Backgrounds on <td background="..."> still work in legacy browsers; ensure they cover on modern. */
td[background] { background-size: cover; background-position: center; background-repeat: no-repeat; }

/* Slightly nicer typography rendering without changing the chosen face. */
body, font { font-family: Verdana, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif; }
body { line-height: 1.5; }
p { line-height: 1.55; }

/* Smoother link interaction (decoration kept off as in the inline style). */
a { transition: opacity .15s ease; }
a:hover { opacity: .75; }

/* Mobile adjustments. */
@media (max-width: 640px) {
  /* Collapse 1px transparent spacer GIFs that force horizontal scroll. */
  img[src$="pixel.gif"], img[src$="pxnero.gif"] { max-width: 100% !important; width: auto; height: auto; }
  img[src$="pixel.gif"][width], img[src$="pxnero.gif"][width] { width: auto !important; max-width: 100% !important; }

  /* Make nav-strip cells (the dark bar with TRADUZIONI / INTERPRETARIATO / CV) wrap and have tap-sized targets. */
  td[background$="bg1a.gif"] { display: block; width: 100% !important; height: auto !important; padding: 8px 0; text-align: center; }
  td[background$="bg1a.gif"] a { display: inline-block; padding: 10px 12px; min-height: 44px; line-height: 1.2; }

  /* The header strip cells: let height auto so content can flow. */
  td[height="60"], td[height="100"], td[height="450"], td[height="50"] { height: auto !important; }

  /* Larger touch targets for all links inside the main table. */
  table a { padding: 2px 0; }

  /* Avoid forcing big absolute pixel widths on cells. */
  td[width] { width: auto !important; }
}

/* Tablet middle ground. */
@media (min-width: 641px) and (max-width: 820px) {
  body { padding: 0 12px; }
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  a { transition: none; }
}

/* Print: simple, readable. */
@media print {
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  td[background], img[src$="pixel.gif"], img[src$="pxnero.gif"] { background: none !important; display: none !important; }
}