/* Anfa Materials — responsive layer.
   The site is built from inline styles, so these rules use attribute selectors
   and !important to reach them. Nothing here changes content or desktop layout;
   it only collapses fixed multi-column grids below the widths where they stop
   fitting, and lets the wide specification tables scroll instead of forcing the
   whole page sideways. */

/* ---------- tablet and below ---------- */
@media (max-width: 1024px) {
  [style*="max-width: 1200px"] { padding-left: 24px !important; padding-right: 24px !important; }
  /* the hero image is pulled 40px past the container on desktop; that bleed has
     nowhere to go once the grid stacks */
  div[style*="margin-right: -40px"] { margin-right: 0 !important; height: 300px !important; }
  div[style*="padding: 72px 56px 72px 0"] { padding: 52px 0 44px 0 !important; }
  section[style*="min-height: 420px"] { min-height: 0 !important; }
  h1[style*="font-size: 44px"] { font-size: 36px !important; }
  [style*="grid-template-columns: 1fr 400px"],
  [style*="grid-template-columns: 1fr 320px"],
  [style*="grid-template-columns: 1fr 340px"],
  [style*="grid-template-columns: 236px 1fr"],
  [style*="grid-template-columns: 1.05fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* ---------- phones ---------- */
@media (max-width: 720px) {

  /* every fixed grid becomes a single column */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* container padding */
  [style*="max-width: 1200px"],
  [style*="max-width: 1280px"] { padding-left: 20px !important; padding-right: 20px !important; }
  main[style] { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; }
  main > div[style*="padding: 72px 40px 0"] { padding: 40px 20px 0 !important; }
  main[style*="padding: 64px 40px 96px"] { padding: 36px 20px 64px !important; }

  /* hero: stack, image becomes a band under the text */
  section[style*="min-height: 420px"] { min-height: 0 !important; }
  section[style*="min-height: 420px"] > div { padding-left: 20px !important; padding-right: 20px !important; }
  div[style*="padding: 72px 56px 72px 0"] { padding: 44px 0 36px 0 !important; }
  div[style*="margin-right: -40px"] { margin-right: 0 !important; height: 260px !important; }
  h1[style*="font-size: 44px"] { font-size: 31px !important; max-width: none !important; }
  h1[style*="font-size: 40px"] { font-size: 29px !important; }
  h2[style*="font-size: 25px"] { font-size: 21px !important; }
  p[style*="font-size: 16.5px"] { font-size: 15px !important; max-width: none !important; }

  /* buttons go full width and stack cleanly */
  a[style*="padding: 14px 26px"] { display: block !important; text-align: center !important; }
  div[style*="display: flex; gap: 14px; flex-wrap: wrap"] { flex-direction: column !important; }

  /* header: nav wraps into a tidy row instead of one item per line */
  header nav[style] { margin-left: 0 !important; width: 100% !important; gap: 8px 14px !important; }
  header a[style*="font-size: 20px"] { font-size: 17px !important; }

  /* specification tables scroll horizontally rather than stretching the page */
  /* Scroll the specification table inside its own container rather than letting it
     widen the page. display:block on a table lets the thead escape the scroll box,
     so the container is the thing that scrolls. */
  div:has(> table) { overflow-x: auto !important; max-width: 100% !important;
                     -webkit-overflow-scrolling: touch; }
  table { min-width: 560px !important; }
  table td, table th { white-space: normal !important; }

  /* photographs and drawings never exceed the viewport */
  img { max-width: 100% !important; height: auto !important; }
  div[style*="grid-template-columns: repeat(3, 1fr); gap: 12px"] img { height: 200px !important; object-fit: cover !important; }

  /* two-part rows built with flex (glossary terms, contact rows, parameter labels)
     had a fixed-width term beside the definition; they wrap on a phone */
  div[style*="display: flex; gap: 24px"] { flex-wrap: wrap !important; gap: 4px 24px !important; }

  /* pending bands and the RFQ strip pair a chip with a sentence on one flex line,
     and carry a 280px floor that a small phone cannot give them */
  div[style*="display: flex; align-items: baseline; gap: 12px"] { flex-wrap: wrap !important; gap: 6px 12px !important; }
  /* the RFQ strip is a flex row of text + button with a 280px floor on the text.
     Dropping the floor to 0 collapsed it to one character per line, so wrap the
     row instead and let the text take a full line of its own. */
  div[style*="min-width: 280px"] { min-width: 0 !important; flex: 1 1 100% !important; }
  div[style*="min-width: 280px"] + a,
  div[style*="min-width: 280px"] ~ a { width: 100% !important; text-align: center !important; }
  div[style*="display: flex"] { max-width: 100% !important; }
  div[style*="display: flex; gap: 24px"] > * { flex: 1 1 100% !important; min-width: 0 !important; }

  /* the grade-family sidebar is sticky on desktop; once the grid collapses it
     scrolls over the page content instead of sitting above it */
  [style*="position: sticky"] { position: static !important; top: auto !important; }

  /* form fields */
  input, textarea, select { max-width: 100% !important; box-sizing: border-box !important; }

  /* the two-column label/body rows on About, Quality, Safety read better stacked */
  [style*="grid-template-columns"] > div { min-width: 0 !important; }

  /* long unbroken strings — ASTM designations, grade codes, the glossary terms on
     Technical Resources — were pushing the page wider than the phone at 360 */
  * { overflow-wrap: break-word; }
  [style*="max-width: 62ch"], [style*="max-width: 66ch"], [style*="max-width: 70ch"],
  [style*="max-width: 90ch"], [style*="max-width: 46ch"], [style*="max-width: 48ch"],
  [style*="max-width: 44ch"], [style*="max-width: 17ch"] { max-width: 100% !important; }
}

/* ---------- very small phones (SE-class, 320px) ---------- */
@media (max-width: 400px) {
  table { min-width: 520px !important; }
  table td, table th { padding-left: 8px !important; padding-right: 8px !important; }
  span[style*="width: 96px"] { width: auto !important; flex: 1 1 100% !important; }
  [style*="max-width: 1200px"], [style*="max-width: 1280px"] { padding-left: 16px !important; padding-right: 16px !important; }
  main > div[style*="padding: 72px 40px 0"] { padding-left: 16px !important; padding-right: 16px !important; }
  main[style*="padding: 64px 40px 96px"] { padding-left: 16px !important; padding-right: 16px !important; }
  section[style*="min-height: 420px"] > div { padding-left: 16px !important; padding-right: 16px !important; }
}

@media (max-width: 400px) {
  /* the specification table's own container, not just the table */
  div:has(> table) { max-width: 100% !important; overflow-x: auto !important; }
}