/* ==========================================================================
   Asia Food News — responsive + cleanup layer
   Loaded last so it can correct the original fixed-width (744px) table
   layout. Desktop rendering is deliberately left alone; the media queries
   below progressively relax the fixed widths for tablets and phones.
   ========================================================================== */

/* ---------- base safety ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
  max-width: 100%;
}

body.afn-page {
  margin: 0;
  overflow-x: hidden;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.afn-page img {
  max-width: 100%;
  height: auto;
  border: 0;
}

.afn-page table { max-width: 100%; }

/* images the archive never captured, swapped for a neutral placeholder.
   The inline aspect-ratio carries the original width/height so the
   placeholder occupies the same box the real image would have. */
.afn-page img.afn-missing {
  object-fit: contain;
  background: #f2ece1;
  height: auto;
}

/* placeholder links whose targets were never archived render as plain text */
.afn-dead { color: inherit; }

/* visible keyboard focus — the original stylesheet stripped all link styling */
.afn-page a:focus-visible,
.afn-page input:focus-visible,
.afn-page select:focus-visible,
.afn-page textarea:focus-visible,
.afn-page button:focus-visible {
  outline: 2px solid #cc3a00;
  outline-offset: 2px;
}

/* ---------- footer added for site-wide link-up ---------- */
.afn-footer {
  clear: both;
  max-width: 744px;
  margin: 24px auto 0;
  padding: 14px 16px 20px;
  border-top: 3px solid #cc3a00;
  background: #fffdf9;
  font-family: Arial, Verdana, "Microsoft JhengHei", sans-serif;
  font-size: 13px;
  line-height: 1.8;
  text-align: center;
  color: #6b6b6b;
}
.afn-footer nav { margin-bottom: 4px; }
.afn-footer a {
  color: #cc3a00;
  text-decoration: none;
  padding: 4px 6px;
  display: inline-block;
}
.afn-footer a:hover,
.afn-footer a:focus { text-decoration: underline; }
.afn-footer span { color: #c9bda8; }
.afn-footer p { margin: 4px 0 0; font-size: 12px; }

/* ---------- HTML site map page ---------- */
.afn-sitemap {
  background: #f7f2ea;
  font-family: Arial, Verdana, "Microsoft JhengHei", sans-serif;
  color: #333;
}
.afn-sitemap header,
.afn-sitemap main {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
}
.afn-sitemap header { padding-top: 24px; }
.afn-sitemap h1 {
  font-size: 24px;
  margin: 8px 0 4px;
  color: #cc3a00;
}
.afn-sitemap .afn-count { margin: 0 0 8px; color: #8a8a8a; font-size: 13px; }
.afn-sitemap header p a { color: #cc3a00; text-decoration: none; }
.afn-sitemap section {
  background: #fff;
  border: 1px solid #e6ddcd;
  border-radius: 4px;
  margin: 0 0 18px;
  padding: 12px 16px 16px;
}
.afn-sitemap h2 {
  font-size: 16px;
  margin: 4px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #efe7d8;
  color: #7a3d10;
}
.afn-sitemap h2 span { color: #b3a68f; font-weight: normal; font-size: 13px; }
.afn-sitemap ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3;
  column-gap: 24px;
}
.afn-sitemap li { break-inside: avoid; margin: 0 0 5px; }
.afn-sitemap li a {
  color: #29527a;
  text-decoration: none;
  font-size: 13px;
  line-height: 1.5;
}
.afn-sitemap li a:hover { text-decoration: underline; color: #cc3a00; }

@media (max-width: 900px) { .afn-sitemap ul { columns: 2; } }
@media (max-width: 600px) {
  .afn-sitemap ul { columns: 1; }
  .afn-sitemap li a { font-size: 15px; line-height: 1.7; }
}

/* ---------- tablet and below ---------- */
@media (max-width: 820px) {
  /* The outermost fixed-width layout table becomes a block so it can never
     impose a min-content floor on the viewport. */
  .afn-wrap,
  .afn-wrap > tbody,
  .afn-wrap > tbody > tr,
  .afn-wrap > tbody > tr > td {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Wide layout tables go fluid and stop sizing to their widest cell.
     Small utility tables (language strip, button pairs) keep their natural
     width — forcing those to 100% squeezed their labels to one character
     per line. */
  .afn-page table.afn-fluid:not(.afn-nav) {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;
  }
  .afn-page table:not(.afn-fluid):not(.afn-nav) {
    max-width: 100% !important;
    table-layout: auto;
  }

  /* Authored pixel heights pin cells shorter than their reflowed content,
     which made text overlap the block below once columns narrowed. */
  .afn-page table[height],
  .afn-page tr[height],
  .afn-page td[height],
  .afn-page th[height] {
    height: auto !important;
    min-height: 0 !important;
  }

  .afn-page td,
  .afn-page th {
    min-width: 0 !important;
    max-width: 100% !important;
    word-break: break-word;
  }

  .afn-page td[width],
  .afn-page th[width] { width: auto !important; }

  /* spacer / rule images must not be stretched by the now-fluid cells */
  .afn-page img[height="1"],
  .afn-page img[width="1"] { width: auto !important; }

  /* The image navigation strip stays legible and scrolls sideways instead of
     shrinking its buttons into illegibility. */
  table.afn-nav {
    display: block;
    width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  table.afn-nav tbody,
  table.afn-nav tr { display: table; width: auto; }
  table.afn-nav td { white-space: nowrap; }
  table.afn-nav img {
    max-width: none;
    width: auto;
    height: 24px;
  }

  /* the legacy type scale bottoms out at 10px — unreadable on a phone */
  .afn-page, .afn-page td, .afn-page p, .afn-page div, .afn-page li,
  .index1, .index2, .topf01, .topf02, .sfont,
  .arialgrey11px, .arialgrey12px, .bottom {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
  .afn-page font[size="1"],
  .afn-page font[size="2"],
  .afn-page .sfont { font-size: 14px !important; }

  /* comfortable tap targets */
  .afn-page td a { display: inline-block; min-height: 24px; }

  /* Dreamweaver absolute-positioned "Layers" (adv.html) cannot survive a
     narrow viewport at their authored pixel offsets — let them flow. */
  .afn-page div[style*="position:absolute"],
  .afn-page div[style*="position: absolute"] {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 12px !important;
  }

  /* final guard: nothing may push the viewport wider than the screen */
  .afn-page td, .afn-page th { overflow-wrap: anywhere; }
}

/* ---------- phones ---------- */
@media (max-width: 600px) {
  /* stack the main layout columns instead of squeezing them side by side */
  .afn-page td[valign="top"] {
    display: block;
    width: 100% !important;
    float: none !important;
  }

  /* two-column directory listings stack as well */
  .afn-page td[width="50%"] {
    display: block;
    width: 100% !important;
    border-bottom: 1px solid #e5ded2;
  }

  /* forms: full width, 16px so iOS does not zoom on focus */
  .afn-page input[type="text"],
  .afn-page input[type="email"],
  .afn-page input[type="tel"],
  .afn-page input[type="password"],
  .afn-page input[type="search"],
  .afn-page select,
  .afn-page textarea {
    max-width: 100%;
    font-size: 16px !important;
  }
  .afn-page input[type="submit"],
  .afn-page input[type="button"],
  .afn-page input[type="reset"],
  .afn-page button {
    min-height: 40px;
    font-size: 16px !important;
  }

  table.afn-nav img { height: 22px; }
}

/* ---------- print ---------- */
@media print {
  table.afn-nav, .afn-footer { display: none; }
  body.afn-page { background: #fff; }
  .afn-page a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 10px;
  }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}