/* Responsive fixes for phones, tablets and large screens.
   This file loads LAST on every page, so it only adjusts; it does not replace the page styles.
   Phones: up to 600px | Tablets and small laptops (mobile menu): up to 1140px | Large monitors: from 1600px */

/* --- Menu links never wrap onto two lines on desktop --- */
.nl a{white-space:nowrap}

/* --- Mobile menu button (hidden on laptops and desktops) --- */
.mb{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:12px;background:var(--bg);cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px;flex:none}
.mb span{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s,opacity .2s}
header.menu-open .mb span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.menu-open .mb span:nth-child(2){opacity:0}
header.menu-open .mb span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* --- Tablets and phones: menu becomes a dropdown --- */
@media (max-width:1140px){
  nav{flex-wrap:nowrap;height:68px;padding:0;gap:16px}
  .mb{display:inline-flex}
  .nl{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;width:auto;overflow:visible;white-space:normal;padding:6px 22px 22px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 24px 40px rgba(8,20,26,.18);max-height:calc(100vh - 70px);overflow-y:auto}
  header.menu-open .nl{display:flex}
  .nl a:not(.btn){display:block!important;padding:15px 2px;font-size:17px;border-bottom:1px solid var(--line);box-shadow:none}
  .nl a[aria-current="page"]:not(.btn){box-shadow:none;color:var(--accent);font-weight:600}
  .nl .btn{height:50px;margin-top:12px;font-size:15px;width:100%}
  .fb{padding-left:22px;padding-right:22px}
}

/* --- Tablets: footer in two columns instead of one tall stack --- */
@media (min-width:601px) and (max-width:900px){
  .fg{grid-template-columns:1fr 1fr;gap:36px 40px}
  .fg>div:first-child{grid-column:1/-1}
}

/* --- Phones --- */
@media (max-width:600px){
  .w{padding:0 18px}
  .logo img{height:44px}
  header.sc .logo img{height:40px}
  /* hero numbers stay on one line */
  .sg div{padding:16px 12px}
  .sg b{font-size:20px;white-space:nowrap}
  /* hero buttons share the row evenly */
  .hc .cta .btn,.pt .cta .btn{flex:1 1 auto}
  .ctab .cta .btn{flex:1 1 auto}
  /* decorative dots must not sit on top of text */
  .ph::after,.phero::after,.qh::after{display:none}
  /* contact details: keep long email on one line */
  .ctx strong{font-size:15px}
  /* 16px inputs stop iPhones from zooming in when a field is tapped */
  .form input,.form select,.ask input{font-size:16px}
  .wafab{width:46px;height:46px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .wafab svg{width:22px;height:22px}
  h2{font-size:clamp(24px,7vw,30px)}
  .sh,.m2,.qeh{gap:12px}
}

/* --- Catalogue table becomes stacked cards on phones --- */
@media (max-width:700px){
  .tw{border:0;overflow:visible;border-radius:0}
  .tbl{min-width:0;display:block}
  .tbl thead{display:none}
  .tbl tbody{display:grid;gap:14px}
  .tbl tr{display:block;border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:var(--bg)}
  .tbl tr:last-child td{border-bottom:0}
  .tbl td{display:block;border:0;padding:0;min-width:0!important}
  .tbl td:first-child{font-size:17px;margin-bottom:8px}
  .tbl td:nth-child(3){margin-top:12px;font-size:13.5px;color:var(--teal);font-weight:600}
  .tbl td:nth-child(3)::before{content:"Resins: ";color:var(--muted);font-weight:500}
}

/* --- Large monitors: a little more width so the page does not look small --- */
@media (min-width:1600px){
  .w{max-width:1320px}
}

/* --- Home hero: outlined button readable over the photo; stronger shade on small screens --- */
.hc .btn.line{background:rgba(8,20,26,.5);backdrop-filter:blur(4px)}
@media (max-width:900px){
  .slides::after{background:linear-gradient(180deg,rgba(8,20,24,.82) 0%,rgba(8,20,24,.7) 100%)}
}
@media (max-width:600px){
  .fg{padding-bottom:36px}
}