/* South Bend Metal Recyclers — shared styles */
:root{
  --green:#2E9E3E;      /* bright kelly green */
  --green-dark:#0F5132; /* forest green */
  --navy:#1B3A5B;       /* headings / contact */
  --ink:#1c2321;
  --bg:#ffffff;
  --gray:#eef1f0;
  --gray-line:#d9dfdc;
  --radius:16px;
  --maxw:1000px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;display:block}
a{color:var(--green-dark)}

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:#fff;border-bottom:3px solid var(--green);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 18px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand svg{width:44px;height:44px;flex:none}
.brand img{width:48px;height:48px;flex:none;object-fit:contain}
.brand-name{font-weight:800;color:var(--navy);line-height:1.05;font-size:1.02rem}
.brand-name span{display:block;color:var(--green);font-weight:800}

.nav-toggle{
  display:none;border:none;background:var(--green);color:#fff;
  font-size:1.5rem;line-height:1;padding:8px 14px;border-radius:10px;cursor:pointer;
}
.nav-links{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.nav-links a{
  display:block;text-decoration:none;color:var(--navy);font-weight:700;
  padding:10px 14px;border-radius:10px;
}
.nav-links a:hover,.nav-links a.active{background:var(--gray);color:var(--green-dark)}

@media(max-width:760px){
  .nav-toggle{display:block}
  .nav-links{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;background:#fff;border-bottom:3px solid var(--green);
    padding:8px 14px 16px;gap:2px;box-shadow:0 8px 18px rgba(0,0,0,.08);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:14px;font-size:1.1rem;border-bottom:1px solid var(--gray-line)}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;text-decoration:none;font-weight:800;
  padding:16px 26px;border-radius:12px;font-size:1.15rem;
  text-align:center;transition:transform .05s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--green);color:#fff !important;box-shadow:0 6px 0 var(--green-dark)}
.btn-primary:hover{background:#2aa63c}
.btn-navy{background:var(--navy);color:#fff !important}
.btn-outline{background:#fff;color:var(--navy) !important;border:3px solid var(--navy)}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(135deg,var(--green) 0%,var(--green-dark) 100%);
  color:#fff;text-align:center;padding:44px 18px 40px;
}
.hero .kicker{font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.95;margin:0 0 4px}
.hero h1{font-size:2.6rem;line-height:1.05;margin:0 0 10px;font-weight:900}
.hero .now-open{
  display:inline-block;background:#fff;color:var(--green-dark);
  font-weight:900;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 18px;border-radius:999px;margin-bottom:16px;
}
.hero p{font-size:1.2rem;max-width:640px;margin:0 auto 22px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.hero-photo{max-width:560px;width:100%;margin:24px auto 0;border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.28);border:4px solid rgba(255,255,255,.35)}
@media(max-width:520px){
  .hero h1{font-size:2rem}
  .hero-cta .btn{width:100%}
}

/* Phone number emphasis */
.phone-line{font-size:1.15rem;font-weight:800}
.phone-line a{color:#fff;text-decoration:none}

/* Hours box */
.hours{margin:0;padding:0;list-style:none}
.hours li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px dashed var(--gray-line)}
.hours li:last-child{border-bottom:none}
.hours .day{font-weight:800;color:var(--navy)}
.hours-note{margin:12px 0 0;font-size:.95rem;font-style:italic;color:#4a5551}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:36px 18px}
.section-title{color:var(--navy);font-size:1.8rem;font-weight:900;margin:0 0 6px}
.section-title::after{content:"";display:block;width:64px;height:4px;background:var(--green);border-radius:2px;margin-top:8px}
.lead{font-size:1.12rem;max-width:760px}

.info-bar{background:var(--green-dark);color:#fff;text-align:center;padding:14px 18px;font-weight:700}
.info-bar a{color:#fff;text-decoration:underline}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:22px}
.card{background:var(--gray);border-radius:var(--radius);padding:22px;border:1px solid var(--gray-line)}
.card h3{color:var(--navy);margin:0 0 8px;font-size:1.25rem}
.card ul{margin:8px 0 0;padding-left:20px}
.card li{margin:4px 0}
.card .icon{font-size:2rem;margin-bottom:6px}

/* CTA band */
.cta-band{background:var(--navy);color:#fff;text-align:center;padding:40px 18px}
.cta-band h2{font-size:1.7rem;margin:0 0 8px}
.cta-band p{font-size:1.15rem;margin:0 0 20px}

/* Contact blocks */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.contact-box{background:var(--gray);border-radius:var(--radius);padding:24px;border:1px solid var(--gray-line)}
.contact-box h3{color:var(--navy);margin:0 0 8px}
.big-addr{font-size:1.35rem;font-weight:800;color:var(--navy);line-height:1.3}

/* Steps */
.steps{counter-reset:step;list-style:none;padding:0;margin:22px 0 0;display:grid;gap:14px}
.steps li{position:relative;background:var(--gray);border:1px solid var(--gray-line);border-radius:var(--radius);padding:18px 18px 18px 66px}
.steps li::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;background:var(--green);color:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.1rem;
}

/* Footer */
.site-footer{background:var(--green-dark);color:#fff;padding:30px 18px;text-align:center}
.site-footer a{color:#fff}
.site-footer .foot-links{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin:0 0 14px;padding:0;list-style:none}
.site-footer .foot-links a{text-decoration:none;font-weight:700}
.site-footer small{display:block;opacity:.85;margin-top:10px}