/* mm2000.css — the v7 responsive shell for machinemagic2000.com.
   Design tokens carried over from v5/v6: Georgia serif, #8B0000 link red,
   peach nav buttons, white paper background. Desktop = centered 980px column
   that closely echoes the legacy look; below 700px the same DOM stacks. */

:root {
  --ink: #000000;
  --accent: #8B0000;
  --stock: #710F4B;
  --price: #000000;
  --peach: #F6CD9C;
  --peach-edge: #C89B62;
  --paper: #FFFFFF;
  --serif: Georgia, 'Palatino Linotype', 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
}
img { max-width: 100%; height: auto; }
a { color: var(--accent); }

.mm-wrap { max-width: 980px; margin: 0 auto; padding: 0 16px 40px; }

/* ---- header (mirrors the legacy masthead) ------------------------------- */
.mm-header { text-align: center; padding: 14px 0 6px; position: relative; }
.mm-header .mm-logo {
  width: 150px; height: auto; display: block; margin: 0 auto 6px;
}
.mm-header h1, .mm-header .mm-h1 {
  font-size: 27px; margin: 2px 0; font-weight: bold;
}
.mm-header .mm-sub { font-size: 20px; font-weight: bold; margin: 2px 0; }
.mm-header .mm-addr { font-size: 18px; font-weight: bold; margin: 2px 0; }
.mm-header .mm-contact { font-size: 19px; font-weight: bold; margin: 6px 0 2px; }
.mm-header .mm-contact a { color: var(--ink); text-decoration: none; }
.mm-header .mm-tag { font-size: 17px; font-weight: bold; margin: 6px 0 0; }
@media (min-width: 700px) {
  .mm-header .mm-logo { position: absolute; left: 8px; top: 10px; margin: 0; }
}

/* ---- nav (peach buttons, real links) ------------------------------------ */
.mm-nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 26px; padding: 18px 0 8px; margin: 8px 0 12px;
}
.mm-nav a {
  display: inline-block; min-width: 114px; padding: 6px 10px;
  text-align: center; text-decoration: none;
  color: var(--ink); font-weight: bold; font-size: 13px;
  font-family: 'Arial Narrow', Arial, sans-serif;
  background: linear-gradient(#FBE3C2, var(--peach) 55%, #EDB97F);
  border: 1px solid var(--peach-edge); border-radius: 4px;
  box-shadow: 0 1px 2px rgba(120, 80, 30, .35);
  transition: filter .12s ease;
}
.mm-nav a:hover { filter: brightness(1.07) saturate(1.1); text-decoration: underline; }
.mm-nav a[aria-current="page"] { filter: brightness(.94); box-shadow: inset 0 1px 3px rgba(120,80,30,.4); }

/* ---- content ------------------------------------------------------------- */
.mm-main { max-width: 820px; margin: 0 auto; }
.mm-main h2.mm-page-title {
  text-align: center; font-size: 24px; text-decoration: underline; margin: 26px 0 14px;
}
.mm-section { margin: 30px 0; }
.mm-section h3 {
  text-align: center; font-size: 22px; text-decoration: underline; margin: 24px 0 12px;
}
.mm-section p { text-align: justify; font-weight: bold; font-size: 17px; }
.mm-section ul { font-weight: bold; }
.mm-section li { margin: 8px 0; }

/* product row: photo + stock/price side by side, stacking on phones */
.mm-product {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 34px; margin: 18px 0;
}
.mm-product img { border-radius: 2px; }
.mm-stock { font-size: 19px; font-weight: bold; text-decoration: underline; }
.mm-stock .sku { color: var(--stock); }
.mm-price { font-size: 21px; font-weight: bold; text-decoration: underline; }
.mm-note { font-weight: bold; font-style: italic; }

/* ---- footer -------------------------------------------------------------- */
.mm-footer {
  text-align: center; font-family: Helvetica, Arial, sans-serif; font-size: 11px;
  color: var(--ink); border-top: 1px solid #e5d8c8; margin-top: 44px; padding: 14px 0 20px;
}

@media print {
  .mm-nav, .mm-footer { display: none !important; }
}

/* ---- utilities added for the remaining v7 pages -------------------------- */
/* index hero: the family shot at full column width (756px native, responsive) */
.mm-hero { display: block; margin: 18px auto 6px; }
/* centred signature / contact blocks (index, About Us) */
.mm-main .mm-sign { text-align: center; font-weight: bold; }

/* real tables: Rebuild Service price list + the Order form */
.mm-tablewrap { overflow-x: auto; margin: 20px 0; }
.mm-table { border-collapse: collapse; width: 100%; font-size: 16px; }
.mm-table th, .mm-table td {
  border: 1px solid var(--peach-edge); padding: 5px 9px; text-align: left; font-weight: bold;
}
.mm-table thead th { background: var(--peach); font-size: 15px; }
.mm-table .mm-num { text-align: right; white-space: nowrap; }
.mm-price-table { width: auto; max-width: 100%; }
.mm-order-table { min-width: 580px; }
.mm-order-table .mm-sku-cell { color: var(--stock); white-space: nowrap; }

/* the order form is a form: it gets the full 980px column, not the prose column */
.mm-main.mm-main-wide { max-width: 100%; }

/* order-form fill-in lines: long underscore runs must wrap, never overflow */
.mm-form-lead { text-align: center; font-weight: bold; }
.mm-main .mm-form-line {
  text-align: left; font-weight: bold; font-size: 15px; line-height: 1.9;
  overflow-wrap: anywhere;
}

@media print {
  .mm-tablewrap { overflow: visible; }
  .mm-order-table { min-width: 0; font-size: 11px; }
  .mm-order-table th, .mm-order-table td { padding: 2px 5px; }
  .mm-table tr { break-inside: avoid; }
  /* the fill-in rules are ~890px wide: shrink them so a portrait page holds them */
  .mm-main .mm-form-line { font-size: 11.5px; line-height: 2.2; }
}

/* ---- v8 order form ------------------------------------------------------- */
.mm-web-field input[type="text"], .mm-web-field input[type="tel"], .mm-web-field input[type="email"] {
  font: inherit; border: none; border-bottom: 1.5px solid var(--ink);
  min-width: 220px; padding: 2px 4px; background: transparent;
}
.mm-web-field textarea {
  font: inherit; border: none; border-bottom: 1.5px solid var(--ink);
  width: 90%; padding: 2px 4px; background: transparent; vertical-align: top; resize: vertical;
}
.mm-inline-input { font: inherit; border: none; border-bottom: 1.5px solid var(--ink); width: 150px; background: transparent; }
.mm-web-field select { font: inherit; padding: 2px 6px; }
input.mm-qty {
  font: inherit; width: 64px; text-align: center;
  border: 1px solid var(--peach-edge); border-radius: 3px; padding: 3px 2px; background: #FFFDF8;
}
.mm-submit-row { text-align: center; margin: 26px 0 8px; }
.mm-submit {
  font: bold 17px var(--serif); color: var(--ink); cursor: pointer;
  padding: 10px 26px; border: 1px solid var(--peach-edge); border-radius: 5px;
  background: linear-gradient(#FBE3C2, var(--peach) 55%, #EDB97F);
  box-shadow: 0 1px 2px rgba(120, 80, 30, .35); transition: filter .12s ease;
}
.mm-submit:hover { filter: brightness(1.07) saturate(1.1); }
.mm-print-link { margin-left: 18px; font-weight: bold; }
#mm-order-status { text-align: center; font-weight: bold; min-height: 1.4em; }
.mm-status-ok { color: #1a7a1a; }
.mm-status-err { color: var(--accent); }

@media print {
  .mm-submit-row, #mm-order-status { display: none !important; }
  .mm-web-field input, .mm-web-field textarea, .mm-inline-input, input.mm-qty {
    border: none; border-bottom: 1px solid #000; background: none;
  }
}