/* =========================================================
   Recycle4Charity — component styles (Bootstrap 5 overrides)
   Брендовые токены заданы в style.css (:root).
   ========================================================= */

/* ---------- Brand button ---------- */
.btn-r4c {
  background: var(--r4c-green);
  border-color: var(--r4c-green);
  color: #fff;
  font-weight: 600;
}
.btn-r4c:hover,
.btn-r4c:focus {
  background: var(--r4c-green-dark);
  border-color: var(--r4c-green-dark);
  color: #fff;
}

/* ---------- Header ---------- */
.r4c-header .navbar-brand { font-family: "Manrope", sans-serif; font-size: 1.35rem; }
.r4c-header .nav-link { color: var(--r4c-blue); font-weight: 600; }
.r4c-header .nav-link:hover,
.r4c-header .current-menu-item > .nav-link { color: var(--r4c-green); }

/* ---------- Hero ---------- */
.r4c-hero {
  background: linear-gradient(135deg, var(--r4c-blue) 0%, #0c2438 100%);
  padding: 5rem 0;
}
.r4c-badge {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-weight: 600;
  letter-spacing: .03em;
}
.r4c-hero-card {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 1.25rem;
  padding: 3rem 2rem;
}
.r4c-hero-card i { font-size: 4.5rem; color: var(--r4c-accent); }

/* ---------- Trust bar ---------- */
.r4c-trustbar { padding: 1rem 0; }
.r4c-trustbar .col-6,
.r4c-trustbar .col-md-3 { color: var(--r4c-blue); letter-spacing: .02em; }

/* ---------- Problem blocks ---------- */
.r4c-problem {
  background: #fff;
  border: 1px solid var(--r4c-border);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
}
.r4c-problem i { font-size: 2.5rem; color: var(--r4c-accent); }

/* ---------- Cards ---------- */
.r4c-card {
  border: 1px solid var(--r4c-border);
  border-radius: 1rem;
  transition: transform .15s ease, box-shadow .15s ease;
}
.r4c-card:hover { transform: translateY(-4px); box-shadow: 0 1rem 2rem rgba(17, 50, 77, .08); }
.r4c-card-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: rgba(31, 138, 83, .1);
  color: var(--r4c-green);
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

/* ---------- Steps ---------- */
.r4c-step { padding: 1rem .5rem; }
.r4c-step-num {
  width: 36px; height: 36px; margin: 0 auto .5rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--r4c-green); color: #fff; font-weight: 700;
}
.r4c-step-icon { font-size: 1.8rem; color: var(--r4c-blue); }

/* ---------- Impact counter ---------- */
.r4c-impact { background: linear-gradient(135deg, var(--r4c-green) 0%, var(--r4c-green-dark) 100%); }
.r4c-stat { font-family: "Manrope", sans-serif; font-size: 2.75rem; font-weight: 800; color: #fff; line-height: 1; }
.r4c-stat-label { color: rgba(255, 255, 255, .85); font-weight: 600; margin-top: .5rem; }

/* ---------- CTA strip ---------- */
.r4c-cta-strip {
  background: var(--r4c-bg);
  border: 1px solid var(--r4c-border);
  border-left: 6px solid var(--r4c-accent);
  border-radius: 1rem;
  padding: 2.5rem;
}

/* ---------- Footer ---------- */
.r4c-footer { background: var(--r4c-blue); }
.r4c-footer .footer-title { font-size: 1rem; margin-bottom: 1rem; }
.r4c-footer .footer-links li { margin-bottom: .4rem; }
.r4c-footer .footer-links a:hover { color: var(--r4c-accent) !important; }

/* ---------- Generic page ---------- */
.r4c-page-hero {
  background: var(--r4c-bg);
  border-bottom: 1px solid var(--r4c-border);
  padding: 3rem 0;
}
.entry-content h2 { margin-top: 2rem; }
.entry-content img { max-width: 100%; height: auto; border-radius: .75rem; }

/* ---------- For Business: comparison table ---------- */
.r4c-compare th { background: var(--r4c-blue); color: #fff; }
.r4c-compare td, .r4c-compare th { vertical-align: middle; }

/* ---------- Forms ---------- */
.r4c-form { background: #fff; border: 1px solid var(--r4c-border); border-radius: 1rem; padding: 2rem; }

/* ---------- Header dropdowns ---------- */
.r4c-header .dropdown-menu {
  border: 1px solid var(--r4c-border);
  border-radius: .75rem;
  box-shadow: 0 1rem 2rem rgba(17, 50, 77, .10);
  padding: .5rem;
}
.r4c-header .dropdown-item { border-radius: .5rem; font-weight: 500; color: var(--r4c-blue); white-space: normal; }
.r4c-header .dropdown-item:hover,
.r4c-header .dropdown-item:focus { background: rgba(31, 138, 83, .10); color: var(--r4c-green); }
/* Open dropdowns on hover on desktop */
@media (min-width: 992px) {
  .r4c-header .nav-item.dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }
}

/* ---------- Breadcrumbs ---------- */
.r4c-breadcrumb {
  background: var(--r4c-bg);
  border-bottom: 1px solid var(--r4c-border);
  padding: .65rem 0;
}
.r4c-breadcrumb .breadcrumb { margin: 0; }
.r4c-breadcrumb a { color: var(--r4c-muted); text-decoration: none; }
.r4c-breadcrumb a:hover { color: var(--r4c-green); }
.r4c-breadcrumb .breadcrumb-item.active { color: var(--r4c-blue); }

/* ---------- Pagination ---------- */
.r4c-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.r4c-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 2.5rem; padding: 0 .65rem;
  border: 1px solid var(--r4c-border); border-radius: .5rem;
  background: #fff; color: var(--r4c-blue); text-decoration: none; font-weight: 600;
}
.r4c-pagination a.page-numbers:hover { border-color: var(--r4c-green); color: var(--r4c-green); }
.r4c-pagination .page-numbers.current { background: var(--r4c-green); border-color: var(--r4c-green); color: #fff; }

/* ---------- Blog post ---------- */
.r4c-post .entry-content h2 { margin-top: 2rem; }
.r4c-post .entry-content h3 { margin-top: 1.5rem; }

/* ---------- Misc ---------- */
.section-pad { padding: 4rem 0; }
@media (max-width: 991.98px) {
  .r4c-hero { padding: 3rem 0; }
}