/* Recyclaro responsive layer — 2026-10-08
   Scoped to tablet/mobile breakpoints only; desktop (>=992px) is unchanged.
   Rollback: remove <link href="css/responsive.css"> from page heads. */

/* ---------- global safety ---------- */
img, video, iframe, svg { max-width: 100%; }
img { height: auto; }
.row.g-5 { --bs-gutter-x: 1.5rem; }
@media (min-width: 992px) { .row.g-5 { --bs-gutter-x: 3rem; } }

/* ---------- tablet (768–991) ---------- */
@media (max-width: 991.98px) {
  .container { padding-left: 20px; padding-right: 20px; }
  section, .sl-section { scroll-margin-top: 80px; }
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hero-v2-visual-col, .market-mockup-stage { margin-top: 28px; }
}

/* ---------- mobile (<768) ---------- */
@media (max-width: 767.98px) {
  html, body { overflow-x: hidden; }
  .container { padding-left: 16px; padding-right: 16px; }

  /* top contact bar: one tidy line, hours hidden */
  .header-top { padding: 6px 0 !important; font-size: 12px !important; }
  .header-top .col-sm-12 { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: nowrap; text-align: center !important; }
  .header-top span { white-space: nowrap; margin: 0 !important; display: inline-flex; align-items: center; gap: 4px; }
  .header-top span:first-child { display: none !important; }

  /* nav */
  .nav-header .navbar-brand img { max-height: 40px; width: auto; }
  .nav-header .navbar-collapse { max-height: calc(100vh - 120px); overflow-y: auto; }
  .nav-header .navbar-collapse .nav-link { padding: 12px 4px; }
  .nav-auth-actions { margin-top: 10px; padding-bottom: 8px; }
  .solutions-hub-menu { width: 100% !important; min-width: 0 !important; }

  /* type scale */
  h1, .hero-v2-h1 { font-size: clamp(1.9rem, 8.4vw, 2.5rem) !important; line-height: 1.14 !important; word-wrap: break-word; }
  h2, .sl-h2 { font-size: clamp(1.5rem, 6.6vw, 2rem) !important; line-height: 1.2 !important; }
  p { overflow-wrap: break-word; }
  .text-justify, [style*="justify"] { text-align: left !important; }

  /* section rhythm */
  .sl-section, .market-section, .seo-section { padding-top: 3.2rem !important; padding-bottom: 3.2rem !important; }

  /* hero CTAs side by side, full width */
  .hero-v2-cta-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero-v2-cta-row > a { width: 100%; justify-content: center; text-align: center; padding-left: 10px !important; padding-right: 10px !important; white-space: nowrap; }
  .hero-v2-trust-badges { gap: 6px !important; }
  .hero-v2-stats { gap: 10px !important; }
  .seo-actions, .market-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; }
  .seo-actions .btn, .market-actions .btn { width: 100%; text-align: center; }

  /* hero circular diagram: smaller */
  .hero-v2-visual-col .banner-diagram-container { transform: scale(.86); transform-origin: top center; margin-bottom: -40px; }

  /* "How it works" steps: stack instead of cramped columns */
  .sl-process-grid { display: flex !important; flex-direction: column; gap: 22px !important; }
  .sl-process-step { display: block !important; text-align: left !important; width: 100% !important; }
  .sl-process-step .sl-process-num { margin: 0 0 10px 0 !important; }
  .sl-process-connector { display: none !important; }

  /* material pages: roomier text column */
  .material_whitebox { padding: 22px 16px !important; }

  /* cards & forms */
  .value-card, .seo-card, .ecosystem-card { padding: 1.25rem !important; }
  form .row > [class*="col-"] { margin-bottom: 4px; }
  input, select, textarea { font-size: 16px !important; }   /* stops iOS zoom-on-focus */
  .footerInput { width: 100% !important; }

  /* AOS: no sideways slide-ins on small screens (avoids clipped content) */
  [data-aos="fade-left"], [data-aos="fade-right"] { transform: none !important; }

  /* footer */
  .footer .ps-4 { padding-left: 0 !important; }
  .footer-link span a { display: inline-block; padding: 6px 0; }
  .footer h4 { margin-top: 18px; }

  /* tap targets */
  .btn, .btn-action, .btn-action-white, .btn-role { min-height: 44px; }

  /* modals */
  .demo-modal-box, .modal-dialog { width: calc(100% - 24px) !important; margin: 12px auto !important; }
}

/* ---------- small phones (<390) ---------- */
@media (max-width: 389.98px) {
  .header-top span:nth-child(2) { display: none !important; }
  .hero-v2-cta-row, .seo-actions, .market-actions { grid-template-columns: 1fr; }
}

/* material pages' header (metals/plastic/paper/textile) — injected mobile sign-up */
.rc-msu { display: none; }
@media (max-width: 767.98px) {
  .rc-msu { display: inline-flex; align-items: center; order: 99; margin-left: 8px; margin-right: 0; padding: 8px 14px; border-radius: 9px; background: #10b981; color: #fff !important; font-weight: 800; font-size: .85rem; text-decoration: none; white-space: nowrap; }
}

/* ---------- site-wide header / nav / footer polish (2026-10-08c) ---------- */
.header-top a { color: inherit; text-decoration: none; }
.header-top a:hover { color: #34d399; }
.header-top svg { vertical-align: -2px; margin-right: 2px; }
.nav-auth-actions { display: flex; align-items: center; gap: 4px; }
.nav-auth-actions .nav-login { white-space: nowrap; margin-right: 8px; }
.nav-auth-onboard, .nav-mobile-start { white-space: nowrap; }
.solutions-hub-menu .dropdown-item.active { background: #ecfdf5; color: #047857; }
.grecaptcha-badge { visibility: hidden !important; }
.footer .ft-row { align-items: flex-start; }
.footer .footer-link span { display: block; }
.ft-about { color: #cbd5e1; font-size: .92rem; line-height: 1.65; margin: 16px 0 18px; }
.ft-small { font-size: .85rem; }
.ft-social { display: flex; gap: 10px; margin-top: 18px; }
.ft-social a { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.08); color: #cbd5e1; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.ft-social a:hover { background: #059669; color: #fff; }
.ft-recaptcha { text-align: center; color: #64748b; font-size: .72rem; margin: 0 0 8px; }
.ft-recaptcha a { color: #94a3b8; text-decoration: underline; }
@media (min-width: 768px) and (max-width: 991.98px) {
  .header-top span:first-child { display: none !important; }
  .nav-header .navbar-nav .nav-link { padding-left: .5rem !important; padding-right: .5rem !important; font-size: .8rem !important; }
  .nav-auth-actions .nav-login { margin-right: 2px; font-size: .8rem !important; }
  .nav-auth-onboard { padding-left: 14px !important; padding-right: 14px !important; font-size: .85rem !important; }
  .nav-header .navbar-brand img { max-height: 42px; width: auto; }
}
@media (max-width: 767.98px) {
  .nav-auth-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .nav-auth-actions .nav-login { margin-right: 0; }
  .nav-auth-actions .nav-auth-onboard { text-align: center; }
  .footer .ft-row > [class*="col-"] { margin-bottom: 4px; }
}
.aboutus-banner h1.page-banner-h1 { font-size: 48px; font-weight: 700; color: #334155; line-height: 1.2; margin: 0 0 8px; text-align: center; }
@media (max-width: 767.98px) {
  .nav-header .nav-auth-actions { padding-left: 0 !important; margin-left: 0 !important; }
  .nav-header .nav-auth-actions .nav-login { padding: 12px 4px !important; }
}