/* ============================================
   Luminarium.org - Modern CSS Overlay
   Level 1 Facelift: Responsive + Typography
   Preserves existing layout and color scheme
   ============================================ */

/* --- Base Reset & Typography --- */
html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  overflow-x: hidden;
}

/* Improve default font rendering for all font tags */
font, td, th, p, div, span, li, a, blockquote {
  line-height: 1.6;
}

/* Override font tags to use better font stacks while preserving intent */
font[face*="Georgia"],
font[face*="georgia"] {
  font-family: 'Georgia', 'Palatino Linotype', 'Book Antiqua', Palatino, serif !important;
}

font[face*="arial"],
font[face*="Arial"],
font[face*="tahoma"],
font[face*="Tahoma"],
font[face*="verdana"],
font[face*="Verdana"] {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

font[face*="Times"],
font[face*="times"] {
  font-family: 'Georgia', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Times New Roman', serif !important;
}

/* --- Improve Readability --- */
/* Poetry and prose content */
td {
  word-wrap: break-word;
}

/* Better paragraph spacing */
p {
  margin-bottom: 0.8em;
}

/* Smoother horizontal rules */
hr {
  border: none;
  border-top: 1px solid rgba(128, 128, 128, 0.4);
  margin: 1.5em 0;
}

/* --- Link Styling --- */
a {
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.8;
}

/* --- Image Handling --- */
img {
  max-width: 100%;
  height: auto;
}

/* Preserve image maps and specific layout images */
img[usemap] {
  max-width: none;
}

img[src*="button"],
img[src*="side.gif"],
img[src*="goldbar"],
img[src*="resources.gif"] {
  max-width: none;
}

/* --- Responsive Tables --- */
table {
  max-width: 100%;
}

/* Content tables should not overflow */
body > table,
body > center > table {
  max-width: 100%;
  overflow-x: auto;
}

/* --- Scrollbar Styling (for overflow content) --- */
::-webkit-scrollbar {
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.1);
}

::-webkit-scrollbar-thumb {
  background: rgba(128,128,128,0.4);
  border-radius: 3px;
}

/* --- Mobile Responsive --- */
@media screen and (max-width: 768px) {
  /* Make all tables block-level and full-width */
  table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
  }

  tr {
    display: block !important;
  }

  td, th {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Hide fixed-width spacer columns */
  td[width="10"],
  td[width="16"],
  td[width="20"] {
    display: none !important;
  }

  /* Stack the sidebar below content on mobile */
  td[width="85"],
  td[width="180"],
  td[width="190"],
  td[width="205"] {
    width: 100% !important;
  }

  /* Make content column full width */
  td[width="525"],
  td[width="549"] {
    width: 100% !important;
    padding: 10px !important;
  }

  /* Readable font size on mobile */
  font[size="2"],
  font[size="-1"],
  font[size="-2"] {
    font-size: 14px !important;
  }

  font[size="1"] {
    font-size: 12px !important;
  }

  font[size="3"] {
    font-size: 16px !important;
  }

  font[size="4"] {
    font-size: 18px !important;
  }

  font[size="5"] {
    font-size: 22px !important;
  }

  /* Prevent horizontal overflow */
  body {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Add padding to body content */
  body > table > tbody > tr > td,
  body > center {
    padding: 5px !important;
  }

  /* Navigation bar wrapping */
  table[bgcolor="#993333"] td,
  table[bgcolor="#3F3A26"] td {
    display: inline-block !important;
    width: auto !important;
  }

  /* Homepage section navigation */
  table[cellpadding="10"] td {
    display: inline-block !important;
    width: auto !important;
    text-align: center;
  }

  /* Image maps don't work well on mobile - show text nav instead */
  img[usemap] {
    max-width: 100%;
    height: auto;
  }

  /* Homepage author columns - stack vertically */
  table[cellpadding="5"] > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    padding: 10px 5px !important;
  }
}

/* --- Small phones --- */
@media screen and (max-width: 480px) {
  font[size="2"],
  font[size="-1"] {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  /* Poetry needs breathing room */
  td font[face*="Georgia"],
  td font[face*="georgia"] {
    font-size: 16px !important;
    line-height: 1.8 !important;
  }

  /* Larger tap targets for links */
  a {
    padding: 2px 0;
  }
}

/* --- Print Styles --- */
@media print {
  body {
    background: white !important;
    color: black !important;
  }

  a {
    color: black !important;
    text-decoration: underline;
  }

  img[src*="button"],
  img[src*="award"],
  img[src*="goldbar"],
  img[src*="resources.gif"] {
    display: none !important;
  }

  table[bgcolor="#993333"],
  table[bgcolor="#081721"] {
    display: none !important;
  }

  font {
    color: black !important;
  }

  td {
    background: white !important;
  }
}