/* ==========================================================================
   Win-Lex Enterprise Ltd. — responsive & accessibility layer
   --------------------------------------------------------------------------
   Loaded after winlex.css. The original site is a fixed-width table layout
   (898px). This file keeps the desktop layout pixel-identical and makes the
   layout fluid below 940px so the site works on tablets and phones.

   The small class hooks (nav-menu, nav-btns, cols-3, card, feature-row,
   testimonial, gallery-grid, contact-table, footer-grid) are injected into
   the HTML at build time so the legacy tables can be targeted safely.
   ========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: #FBFAF7;
  background-image: url(/images/bg.jpg);
  background-repeat: repeat-x;
}

/* Never let an image overflow its column.
   Scoped to <=940px on purpose: applied globally it makes the browser
   shrink the fixed-width table cells of the legacy layout by a pixel or
   two, which shifts the whole desktop design. */
@media (max-width: 940px) {
  img {
    max-width: 100%;
    height: auto;
  }
}

/* Visible keyboard focus — the original CSS removed outlines. */
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #B07800;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Form controls (the original stylesheet never styled .submit)
   -------------------------------------------------------------------------- */
.submit {
  background: #FCDE38;
  color: #4a3a10;
  border: 1px solid #d3b421;
  border-radius: 3px;
  padding: 9px 24px;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.2;
  cursor: pointer;
  min-height: 44px;
}

.submit:hover {
  background: #f3d134;
}

.submit:focus-visible {
  outline: 3px solid #B07800;
  outline-offset: 2px;
}

.submit[disabled] {
  opacity: 0.6;
  cursor: default;
}

input[type="reset"].submit {
  background: #FFFFFF;
  color: #603913;
  border-color: #E1C774;
}

input[type="reset"].submit:hover {
  background: #FFF9D9;
}

/* Honeypot field — hidden from humans, visible to naive bots. */
.hp-field {
  position: absolute !important;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* Inline form feedback */
.form-status {
  margin: 14px 0 0;
  padding: 0;
  font-size: 14px;
  line-height: 20px;
  min-height: 20px;
}

.form-status.is-ok {
  color: #1d7a3c;
  font-weight: bold;
}

.form-status.is-error {
  color: #C0392B;
  font-weight: bold;
}

.form-status.is-info {
  color: #603913;
}

/* Clickable fallback shown with the mailto: hand-off */
.form-status a.form-mailto-link {
  display: inline-block;
  margin-top: 6px;
  color: #603913;
  font-weight: bold;
  text-decoration: underline;
}

.form-status a.form-mailto-link:hover {
  color: #999;
}

/* --------------------------------------------------------------------------
   English home page header
   --------------------------------------------------------------------------
   "Original ink cartridge, Toner, Laser Printer, Inkjet" needs ~385px on one
   line, because #header applies 2px of letter-spacing per character. Its
   cell is given 80% of the header table (435px) so the tagline fits, and
   the rule below keeps it on one line even if a fallback font is a little
   wider than the one it was measured with.
   -------------------------------------------------------------------------- */
.tagline {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Contact form
   --------------------------------------------------------------------------
   The legacy layout gives the label column a width="140" attribute, but the
   browser ignores it: the <textarea cols="50"> demands 521px of the 585px
   table, so the label column was squeezed to 50px and every label wrapped
   onto two to four lines ("訂購產品名稱：" took four).

   Fixing it properly needs both halves — a label column wide enough for the
   longest label, and a textarea that fits inside what is left over.
   -------------------------------------------------------------------------- */
.contact-table td.contact {
  width: 140px;
  white-space: nowrap;
}

.contact-table textarea {
  width: 100%;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   <= 940px : the fixed-width containers become fluid
   -------------------------------------------------------------------------- */
@media (max-width: 940px) {
  #top {
    width: auto;
    max-width: 100%;
    height: auto;
    padding: 10px 14px 0;
  }

  #round {
    width: auto;
    max-width: 100%;
    padding: 22px 24px 0;
  }

  #title {
    width: auto;
  }

  #title2 {
    width: auto;
    max-width: 100%;
  }

  #contact {
    width: auto;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    height: auto;
  }

  .footer-grid {
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   <= 700px : single column layout
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  body {
    overflow-x: clip;
  }

  /* --- header --- */
  #top {
    padding: 12px 14px 6px;
  }

  #top > table {
    width: 100%;
  }

  #top > table > tbody > tr > td {
    display: block;
    width: auto !important;
    text-align: center !important;
  }

  #top > table > tbody > tr > td[width="1%"] {
    display: none;
  }

  #top > table > tbody > tr > td[rowspan] {
    text-align: center !important;
  }

  #header {
    height: auto;
    padding-top: 6px;
    letter-spacing: 1px;
  }

  #header table {
    width: 100%;
  }

  #header table td {
    display: block;
    width: auto !important;
    text-align: center !important;
  }

  #header em {
    font-style: normal;
  }

  #round {
    padding: 16px 12px 0;
  }

  /* --- navigation: 3-up grid instead of 5 squeezed buttons --- */
  .nav-menu > tbody > tr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 4px;
  }

  .nav-menu > tbody > tr > td {
    display: block;
    width: auto !important;
    text-align: center;
    vertical-align: bottom;
  }

  .nav-menu img {
    width: 100%;
    max-width: 162px;
    height: auto;
  }

  .nav-btns > tbody > tr {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .nav-btns > tbody > tr > td {
    display: block;
    width: auto !important;
  }

  .nav-btns img {
    width: 100%;
    height: auto;
  }

  /* --- three column content blocks stack --- */
  .cols-3 > tbody > tr {
    display: block;
  }

  .cols-3 > tbody > tr > td {
    display: block;
    width: 100% !important;
    text-align: center !important;
  }

  .cols-3 .card {
    width: 100% !important;
    max-width: 320px;
    margin: 0 auto 18px;
  }

  .cols-3 .list2 {
    text-align: left;
  }

  /* --- about us: icon + copy rows stack --- */
  .feature-row > tbody > tr {
    display: block;
  }

  .feature-row > tbody > tr > td {
    display: block;
    width: 100% !important;
    text-align: center !important;
  }

  .feature-row .txt {
    text-align: left;
  }

  /* --- testimonials --- */
  .testimonial > tbody > tr {
    display: block;
  }

  .testimonial > tbody > tr > td {
    display: block;
    width: 100% !important;
  }

  /* --- gallery --- */
  .gallery-grid > tbody > tr {
    display: block;
  }

  .gallery-grid > tbody > tr > td {
    display: block;
    width: 100% !important;
    text-align: center !important;
  }

  .gallery-grid #photo2 {
    margin: 0 auto 14px;
  }

  /* --- footer --- */
  .footer-grid > tbody > tr {
    display: block;
  }

  .footer-grid > tbody > tr > td {
    display: block;
    width: auto !important;
    text-align: center !important;
    border-right: none !important;
    padding-top: 6px;
  }

  .footer-grid img {
    margin: 0 auto;
  }

  /* --- contact form ---
     Each label stays on the same line as its field, at every width.
     The table keeps its table layout so that every row shares the same
     two columns, and "table-layout: fixed" lets the label column take a
     fixed width with the fields lined up in a single column. */
  .contact-table {
    width: 100% !important;
    height: auto !important;
    table-layout: fixed;
  }

  .contact-table > tbody > tr > td.contact {
    width: 130px !important;
    white-space: nowrap;
    text-align: right !important;
  }

  .contact-table > tbody > tr > td.underline_txt {
    width: auto !important;
  }

  .contact-table input[type="text"],
  .contact-table select,
  .contact-table textarea {
    width: 100% !important;
    box-sizing: border-box;
  }

  .contact-table textarea {
    min-height: 120px;
  }

  /* the reset / send row keeps the empty label cell, so the buttons stay
     in the same column as the fields above them */
  .contact-table > tbody > tr > td:last-child {
    text-align: center !important;
  }
}

/* --------------------------------------------------------------------------
   <= 400px : the smallest phones
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
  .nav-menu > tbody > tr {
    grid-template-columns: repeat(2, 1fr);
  }

  .nav-btns > tbody > tr {
    grid-template-columns: 1fr;
  }

  #round {
    padding: 12px 8px 0;
  }

  #title {
    font-size: 19px;
    text-indent: 12px;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  #top,
  #footer {
    display: none;
  }

  #round {
    width: 100%;
    padding: 0;
    border: 0;
  }

  body {
    background: none;
  }
}