/* ==========================================================================
   benzo.org.uk Mobile Archive — Responsive Stylesheet
   Injected into every page by convert.sh
   ========================================================================== */

/* --- Archive Banner --- */
.archive-banner {
  background: #f0ece4;
  border-bottom: 1px solid #d5cfc5;
  color: #5a5347;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  line-height: 1.4;
  padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* --- Base / Mobile-first --- */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left));
  line-height: 1.6;
  color: #1a1a1a;
  background: #fffff5; /* preserve original background */
  font-family: verdana, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Override legacy font-tag families but keep a readable size hierarchy.
   Legacy <font size=N> maps onto rem so size=1 small-print stays smaller
   than body text instead of flattening everything to one size. */
font {
  font-family: inherit !important;
}

font[size="1"] { font-size: 0.85rem !important; }
font[size="2"] { font-size: 1rem !important; }
font[size="3"] { font-size: 1.15rem !important; }
font[size="4"] { font-size: 1.35rem !important; }
font[size="5"] { font-size: 1.6rem !important; }
font[size="6"] { font-size: 1.9rem !important; }
font[size="7"] { font-size: 2.2rem !important; }
font[size="-1"] { font-size: 0.85rem !important; }
font[size="-2"] { font-size: 0.75rem !important; }
font[size="+1"] { font-size: 1.15rem !important; }
font[size="+2"] { font-size: 1.35rem !important; }

/* Headings — keep proportional but don't blow up on mobile */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
  margin-top: 1.2em;
  margin-bottom: 0.5em;
  text-wrap: balance;
}

/* Paragraphs */
p {
  margin: 0.8em 0;
  text-wrap: pretty;
}

/* --- Links — preserve the original color scheme --- */
a:link    { color: #0000ee; }
a:visited { color: #800080; }
a:hover   { color: #c41200; text-decoration: underline; }
a:active  { color: #008000; }

/* Taller tap targets without any visual change: block padding on inline
   links doesn't affect line layout but does grow the hit area */
a {
  padding-block: 6px;
}

/* Links inside prose need more than color to be distinguishable
   (WCAG 1.4.1). Era-authentic: 1999 browsers underlined links by default;
   the site's own stylesheet removed it. Nav strips stay clean via the
   page-level styles where links sit outside <p>. */
p a:link,
p a:visited,
li a:link,
li a:visited,
form a:link,
form a:visited {
  text-decoration: underline;
}

/* Legacy pure-red emphasis text fails WCAG AA on the ivory background
   (3.97:1). Darkened red keeps the look and reaches 5.5:1. */
font[color="#FF0000"],
font[color="#ff0000"],
font[color="red"] {
  color: #c41200 !important;
}

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

/* --- Tables — legacy attribute widths must not force overflow --- */
table {
  border-collapse: collapse;
  max-width: 100% !important;
}

td, th {
  padding: 4px 8px;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1em 0;
}

/* --- Pre / Code --- */
pre, code {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

pre {
  padding: 12px;
  background: #f5f5f0;
  border: 1px solid #ddd;
  border-radius: 3px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* --- Blockquote — used as the main page wrapper on this site --- */
blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 0 12px;
}

/* --- Horizontal rules — preserve the subtle originals --- */
hr {
  border: none;
  border-top: 1px solid #d3d3d3;
  margin: 12px 0;
}

/* --- Legacy layout helpers --- */
center {
  text-align: center;
}

/* ==========================================================================
   Touch devices — denser legacy nav needs breathing room to tap
   ========================================================================== */
@media (pointer: coarse) {
  body {
    line-height: 1.7;
  }

  center font[size="1"],
  p font[size="1"] {
    line-height: 2.1;
  }
}

/* ==========================================================================
   Tablet breakpoint (768px)
   ========================================================================== */
@media (min-width: 768px) {
  body {
    padding-left: 24px;
    padding-right: 24px;
  }

  blockquote {
    padding: 0 20px;
  }
}

/* ==========================================================================
   Small mobile breakpoint (480px)
   ========================================================================== */
@media (max-width: 480px) {
  body {
    padding-left: 10px;
    padding-right: 10px;
  }

  .archive-banner {
    font-size: 0.72rem;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  td, th {
    padding: 3px 5px;
  }

  h1 { font-size: 1.5em; }
  h2 { font-size: 1.3em; }
  h3 { font-size: 1.15em; }

  blockquote {
    padding: 0 6px;
  }
}

/* ==========================================================================
   Phone layout breakpoint (600px)
   ========================================================================== */
@media (max-width: 600px) {
  /* Single-row tables are layout scaffolding (side-by-side columns):
     stack them into one column. border-box keeps cell padding from
     pushing 100%-width cells past the container. */
  table:not(:has(tr ~ tr)),
  table:not(:has(tr ~ tr)) tbody,
  table:not(:has(tr ~ tr)) tr,
  table:not(:has(tr ~ tr)) td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Multi-row tables are data (withdrawal schedules): column alignment IS
     the content, so they scroll in place and never stack. */
  table:has(tr ~ tr) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: fit-content;
    max-width: 100% !important;
  }

  /* Justified text in narrow columns produces rivers of whitespace */
  [align="justify"] {
    text-align: left !important;
  }
}

/* ==========================================================================
   Print styles
   ========================================================================== */
@media print {
  .archive-banner {
    position: static;
    border-bottom: 1px solid #999;
    background: none;
    color: #333;
    font-size: 9pt;
  }

  body {
    max-width: 100%;
    padding: 0;
    font-size: 11pt;
    color: #000;
    background: #fff;
  }

  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }

  a[href^="#"]:after,
  a[href^="javascript"]:after {
    content: "";
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  table {
    page-break-inside: avoid;
  }

  pre, blockquote {
    page-break-inside: avoid;
  }
}