/**
 * GreenChem Oy – Custom CSS for JA Purity IV
 * Place in: /templates/ja_purity_iv/css/custom.css
 * Or add via Joomla Template Manager > Custom CSS field
 *
 * Colors:
 *   --gc-dark:   #1e3d20  (deep forest green – logo dark)
 *   --gc-mid:    #2d5a30
 *   --gc-bright: #4a9e4a  (bright leaf green – logo light)
 *   --gc-pale:   #eaf3ea
 *   --lake:      #1a5f96
 *   --lake-mid:  #2178bf
 *   --lake-pale: #e5f0f9
 */

/* ── TOPBAR ───────────────────────────────────────────── */
.gc-topbar {
  background: #1e3d20;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  padding: 0 1.5rem;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── SECTION TAGS ─────────────────────────────────────── */
.gc-section-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.9rem;
}
.gc-tag-line {
  display: inline-block;
  width: 18px;
  height: 2px;
  background: #4a9e4a;
}
.gc-tag-text {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2d5a30;
}

/* ── EYEBROW (hero) ───────────────────────────────────── */
.gc-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1.4rem;
}
.gc-eyebrow-line {
  display: inline-block;
  width: 24px;
  height: 2px;
  background: #4a9e4a;
}
.gc-eyebrow-text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2d5a30;
}

/* ── HERO ─────────────────────────────────────────────── */
.gc-hero-title {
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: #111f12;
  margin-bottom: 1.1rem;
}
.gc-hero-lead {
  font-weight: 300;
  color: #5e7060;
  max-width: 540px;
  margin-bottom: 1.8rem;
}
.gc-btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.gc-btn-primary {
  background: #1e3d20 !important;
  border-color: #1e3d20 !important;
  border-radius: 0 !important;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff !important;
}
.gc-btn-primary:hover {
  background: #2d5a30 !important;
  border-color: #2d5a30 !important;
}
.btn-outline-primary.gc-btn-secondary {
  border-radius: 0 !important;
  color: #1a5f96 !important;
  border-color: #1a5f96 !important;
  font-weight: 500;
}
.btn-outline-primary.gc-btn-secondary:hover {
  background: #e5f0f9 !important;
}

/* ── DIVIDER ──────────────────────────────────────────── */
.gc-divider {
  border-color: #dde5de;
  margin: 2.5rem 0;
}

/* ── STATS ROW ────────────────────────────────────────── */
.gc-stats-row {
  margin: 2rem 0;
}
.gc-stat-block {
  padding: 1.5rem 1rem;
  border-left: 3px solid #4a9e4a;
  margin-bottom: 1rem;
}
.gc-stat-number {
  font-size: 2.4rem;
  font-weight: 300;
  color: #111f12;
  letter-spacing: -0.04em;
  line-height: 1;
}
.gc-stat-unit {
  font-size: 1rem;
  color: #4a9e4a;
  font-weight: 600;
  margin-left: 2px;
}
.gc-stat-number--sm {
  font-size: 1.5rem;
  padding-top: 0.5rem;
}
.gc-stat-label {
  font-size: 11.5px;
  color: #8a9e8c;
  margin-top: 5px;
  letter-spacing: 0.03em;
}

/* ── ECOSYSTEM CHAIN PANEL ────────────────────────────── */
.gc-chain-panel {
  border: 1px solid #dde5de;
  background: #fff;
}
.gc-chain-header {
  background: #1e3d20;
  color: rgba(255,255,255,0.45);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
}
.gc-chain-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #eaeeed;
  font-size: 0.875rem;
}
.gc-chain-item:last-child { border-bottom: none; }
.gc-chain-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  display: inline-block;
}
.gc-chain-connector {
  padding: 0.2rem 1rem;
  font-size: 10px;
  color: #8a9e8c;
  letter-spacing: 0.05em;
  background: #f6f8f6;
  border-bottom: 1px solid #eaeeed;
  text-align: center;
}

/* ── PROCESS GRID ─────────────────────────────────────── */
.gc-proc-row,
.gc-proc-detail-row {
  margin-top: 1.5rem;
}
.gc-proc-cell {
  border-left: 1px solid #dde5de;
  padding: 1.4rem 1.2rem 1.4rem 1.4rem;
  background: #fff;
  margin-bottom: 1rem;
}
.gc-proc-cell:first-child { border-left: none; }
.gc-proc-accent {
  height: 3px;
  margin: -1.4rem -1.2rem 1.2rem -1.4rem;
}
.gc-proc-accent--green { background: #4a9e4a; }
.gc-proc-accent--blue  { background: #2178bf; }
.gc-proc-step {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: #8a9e8c;
  letter-spacing: 0.1em;
  margin-bottom: 0.4rem;
}
.gc-badge-green {
  background: #eaf3ea;
  color: #1e3d20;
  border-left: 2px solid #4a9e4a;
  border-radius: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  margin-bottom: 0.6rem;
  display: inline-block;
}
.gc-badge-blue {
  background: #e5f0f9;
  color: #1a5f96;
  border-left: 2px solid #2178bf;
  border-radius: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  margin-bottom: 0.6rem;
  display: inline-block;
}

/* ── CUSTOMER CARDS ───────────────────────────────────── */
.gc-cust-row { margin-top: 1rem; }
.gc-cust-card {
  border: 1px solid #dde5de;
  background: #fff;
  padding: 1.5rem 1.3rem;
  height: 100%;
}
.gc-cust-card:hover { background: #f6f8f6; }
.gc-cust-icon {
  width: 36px;
  height: 36px;
  background: #eaf3ea;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
}
.gc-cust-benefit {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid #eaeeed;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── IMPACT CARDS ─────────────────────────────────────── */
.gc-impact-row { margin-top: 1rem; }
.gc-impact-card {
  padding: 1.7rem 1.4rem;
  height: 100%;
  border: 1px solid #dde5de;
}
.gc-impact-card--green { background: #eaf3ea; border-color: #c2dfc2; }
.gc-impact-card--blue  { background: #e5f0f9; border-color: #b8d4ef; }
.gc-impact-card--dark  { background: #1e3d20; border-color: #1e3d20; color: rgba(255,255,255,0.75); }
.gc-impact-card--dark h3 { color: rgba(255,255,255,0.92); }
.gc-impact-card--dark ul { color: rgba(255,255,255,0.6); }
.gc-impact-bar {
  width: 24px;
  height: 2px;
  margin-bottom: 1rem;
}
.gc-impact-bar--green { background: #4a9e4a; }
.gc-impact-bar--blue  { background: #2178bf; }
.gc-impact-bar--light { background: rgba(255,255,255,0.25); }

/* ── INFO PANEL ───────────────────────────────────────── */
.gc-info-panel {
  border: 1px solid #dde5de;
  background: #fff;
}
.gc-info-panel-header {
  background: #1e3d20;
  color: rgba(255,255,255,0.45);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
}
.gc-facts-table td,
.gc-facts-table th {
  font-size: 0.8125rem;
  padding: 0.45rem 0.75rem !important;
  border-color: #eaeeed !important;
  vertical-align: middle;
}

/* ── TEAM CARDS ───────────────────────────────────────── */
.gc-team-row { margin-top: 1rem; }
.gc-team-card {
  border: 1px solid #dde5de;
  padding: 1.2rem;
  text-align: center;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}
.gc-team-avatar {
  width: 64px;
  height: 64px;
  background: #eaf3ea;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
  font-size: 11px;
  color: #8a9e8c;
  border: 1px solid #dde5de;
}

/* ── ALERTS ───────────────────────────────────────────── */
.gc-alert-green {
  background: #eaf3ea;
  border: 1px solid #c2dfc2;
  border-left: 3px solid #4a9e4a;
  border-radius: 0;
  color: #1e3d20;
  font-size: 0.8125rem;
}
.gc-alert-blue {
  background: #e5f0f9;
  border: 1px solid #b8d4ef;
  border-left: 3px solid #2178bf;
  border-radius: 0;
  color: #1a5f96;
  font-size: 0.8125rem;
}

/* ── COMPARISON TABLE ─────────────────────────────────── */
.gc-compare-table { font-size: 0.8125rem; }
.gc-compare-table thead th {
  background: #f6f8f6;
  border-color: #dde5de;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5e7060;
}

/* ── CONTACT FORM ─────────────────────────────────────── */
.gc-form-block .form-control,
.gc-form-block .form-select {
  border-radius: 0;
  border-color: #dde5de;
  font-size: 0.875rem;
}
.gc-form-block .form-control:focus,
.gc-form-block .form-select:focus {
  border-color: #4a9e4a;
  box-shadow: 0 0 0 2px rgba(74,158,74,0.15);
}
.gc-form-block .form-label {
  font-size: 12px;
  font-weight: 600;
  color: #374038;
  letter-spacing: 0.03em;
}

/* ── ECO SECTION ROW ──────────────────────────────────── */
.gc-eco-row { margin-top: 1.5rem; }

/* ── BUTTONS ──────────────────────────────────────────── */
.btn { border-radius: 0 !important; }
.btn-success {
  background-color: #1e3d20 !important;
  border-color: #1e3d20 !important;
}
.btn-success:hover {
  background-color: #2d5a30 !important;
  border-color: #2d5a30 !important;
}
.btn-outline-success {
  color: #1e3d20 !important;
  border-color: #1e3d20 !important;
}
.btn-outline-success:hover {
  background: #eaf3ea !important;
  color: #1e3d20 !important;
}