/*
Theme Name: Chemnergy
Theme URI: https://www.chemnergy.co.zm
Author: Tender Zambia
Author URI: https://www.tenderzambia.com
Description: Custom lightweight theme for Chemnergy Enterprises Limited — mining chemicals exporter and distributor. Industrial "consignment label" design system.
Version: 1.0
Requires PHP: 7.4
Text Domain: chemnergy
*/
/* ==========================================================================
   CHEMNERGY — design tokens
   Subject: industrial mining-chemicals exporter, Zambia-based, Africa-wide.
   Signature: the "consignment label" — chemical products presented like a
   drum/pallet manifest tag (mono code, purity, CAS, packaging), echoing the
   physical world of the product: drums, bulk bags, bonded warehouses.
   ========================================================================== */

:root{
  /* colour: mineral palette, not cream/terracotta, not neon-on-black */
  --ink:        #10201F;   /* near-black, cast with copper-ore green */
  --ink-soft:   #223836;
  --paper:      #EEEEE6;   /* quartz / limestone off-white, cool not cream */
  --paper-dim:  #E2E2D6;
  --malachite:  #276A56;   /* copper-ore green — primary accent */
  --malachite-d:#1B4C3E;
  --blue:       #1F5FA8;  /* logo blue — secondary accent */
  --blue-d:     #163F7D;
  --sulphur:    #D79B1E;   /* real sulphur yellow — secondary accent */
  --oxide:      #9C4B2E;   /* rust/oxide — sparing, warnings & emphasis */
  --line:       #C9C9BC;
  --line-soft:  #DEDED2;
  --white:      #FBFBF7;

  --font-display: "Space Grotesk", "Archivo", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --container: 1180px;
  --radius: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.12; margin:0 0 .5em; letter-spacing:-0.01em; }
p{ margin:0 0 1em; max-width:66ch; }
ul,ol{ margin:0 0 1em; padding-left:1.2em; }
code, .mono{ font-family:var(--font-mono); }
:focus-visible{ outline:3px solid var(--malachite); outline-offset:2px; }

.wrap{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.eyebrow{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--malachite-d);
  display:flex; align-items:center; gap:8px;
  margin-bottom:10px;
}
.eyebrow::before{ display:none; }

/* ---------- top strip (manifest ticker) ---------- */
.top-strip{
  background:var(--ink);
  color:var(--paper-dim);
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.06em;
  overflow:hidden;
  white-space:nowrap;
  border-bottom:1px solid #000;
}
.top-strip .wrap{ display:flex; justify-content:space-between; align-items:center; padding-top:6px; padding-bottom:6px; gap:16px; }
.top-strip .route{ opacity:.85; }
.top-strip .route b{ color:var(--sulphur); font-weight:600; }
.top-strip .call{ color:var(--white); }
.mark{ border-radius:50%; }
.top-strip .call:hover{ color:var(--sulphur); }

/* ---------- header / nav ---------- */
header.site{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:14px; flex-wrap:nowrap; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:clamp(0.82rem, 4.4vw, 1.35rem); color:var(--ink); flex-shrink:0; }
.brand span.brand-text{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex-shrink:1; }
.brand img{ flex-shrink:0; }
.brand .mark{
  width:34px;height:34px;border-radius:50%;
  background:conic-gradient(from 210deg, var(--malachite), var(--sulphur), var(--malachite));
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--white); font-family:var(--font-mono); font-weight:700; font-size:.8rem;
}
nav.primary{ display:flex; align-items:center; gap:26px; min-width:0; flex-shrink:1; }
nav.primary > ul{ display:flex; gap:15px; margin:0; padding:0; list-style:none; flex-wrap:nowrap; white-space:nowrap; }
nav.primary > ul > li{ position:relative; }
nav.primary a.top-link{
  font-size:.86rem; font-weight:600; padding:8px 0; display:inline-flex; align-items:center; gap:5px;
  text-transform:uppercase; letter-spacing:.03em; color:var(--ink); border:none;
}
nav.primary a.top-link:hover{ color:var(--blue); }
nav.primary a.top-link.active{ color:var(--blue); text-decoration:none; }
nav.primary a.top-link .caret{ width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-3px; transition:transform .15s; }
li:hover > a.top-link .caret, li.open > a.top-link .caret{ transform:rotate(-135deg); margin-top:2px; }
.dropdown{
  display:none; position:absolute; top:100%; left:-16px; background:var(--white);
  border:1px solid var(--line); box-shadow:0 12px 24px rgba(16,32,31,.12);
  min-width:260px; padding:10px; z-index:60; border-radius:14px;
  max-height:70vh; overflow-y:auto;
}
li:hover > .dropdown, li.open > .dropdown{ display:block; }
.dropdown a{ display:block; padding:9px 12px; font-size:.88rem; border-radius:8px; text-transform:none; letter-spacing:normal; font-weight:400; }
.dropdown a:hover{ background:var(--paper); color:var(--malachite-d); }
.dropdown .col-title{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:#8b8b7c; padding:8px 12px 2px; }
.cta-btn{
  background:var(--malachite); color:var(--white); font-weight:600; font-size:.88rem;
  padding:12px 24px; border-radius:999px; border:1px solid var(--malachite-d);
  display:inline-block; transition:transform .15s ease;
}
.cta-btn:hover{ background:var(--malachite-d); color:var(--white); transform:translateY(-1px); }
.cta-btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
.cta-btn.ghost:hover{ background:var(--ink); color:var(--white); }
.mobile-toggle{ display:none; }

/* ---------- mobile dropdown menu ---------- */
.menu-btn{ display:none; }
.mobile-panel{
  display:none; position:fixed; inset:0; z-index:100; background:rgba(16,32,31,.35);
}
.mobile-panel.open{ display:block; }
.mobile-panel .sheet{
  position:absolute; top:78px; left:14px; right:14px; max-width:460px; margin:0 auto;
  background:var(--white); border-radius:18px; border:1.5px solid var(--ink);
  padding:18px; max-height:76vh; overflow-y:auto; box-shadow:0 16px 40px rgba(0,0,0,.22);
  animation:dropIn .18s ease;
}
@keyframes dropIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } }
.mobile-panel ul{ list-style:none; margin:0; padding:0; }
.mobile-panel > .sheet > ul > li{ border-bottom:1px solid var(--line-soft); }
.mobile-panel a.m-top{
  display:flex; justify-content:space-between; align-items:center; padding:14px 4px; font-weight:600;
  text-transform:uppercase; font-size:.86rem; letter-spacing:.03em; color:var(--ink);
}
.mobile-panel a.m-top.active{ color:var(--blue); }
.mobile-panel .m-caret{ width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .15s; }
.mobile-panel li.open > a.m-top .m-caret{ transform:rotate(-135deg); }
.mobile-panel .m-sub{ display:none; list-style:none; margin:0 0 10px; padding:0 0 0 12px; }
.mobile-panel li.open > .m-sub{ display:block; }
.mobile-panel .m-sub a{ display:block; padding:8px 4px; font-size:.85rem; color:#3c4a48; }
.mobile-panel .m-col-title{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:#8b8b7c; padding:8px 4px 2px; }
.mobile-panel .m-cta{ margin-top:16px; }

@media (max-width:980px){
  nav.primary > ul{ display:none; }
  .mobile-toggle{ display:none !important; }
  header.site{
    margin:6px 14px 0; border-radius:18px; border:1.5px solid var(--ink);
    box-shadow:0 6px 18px rgba(16,32,31,.10); top:6px; background:var(--white);
  }
  header.site .nav-row{ padding-left:14px; padding-right:14px; gap:8px; }
  .mobile-panel .sheet{ top:72px; }
  .menu-btn{ display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--ink); padding:10px; border-radius:999px; background:none; width:40px; height:40px; }
  .menu-btn .bars{ width:16px; height:11px; position:relative; }
  .menu-btn .bars span{ position:absolute; left:0; right:0; height:2px; background:var(--ink); }
  .menu-btn .bars span:nth-child(1){ top:0; } .menu-btn .bars span:nth-child(2){ top:4.5px; } .menu-btn .bars span:nth-child(3){ top:9px; }
  .nav-row .cta-btn:not(.m-cta){ display:none; }
  .top-strip .route{ display:none; }

  /* center-align content on mobile only */
  .hero .wrap{ grid-template-columns:1fr !important; text-align:center; }
  .hero h1, .hero .lede{ margin-left:auto; margin-right:auto; }
  .hero-ctas{ justify-content:center; }
  .manifest{ justify-content:center; }
  .eyebrow{ justify-content:center; }
  section .wrap, section.tight .wrap{ text-align:center; }
  .section-head{ margin-left:auto; margin-right:auto; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4{ text-align:center; }
  .card{ text-align:center; }
  .icon-badge{ margin-left:auto; margin-right:auto; }
  .chip-row{ justify-content:center; }
  .kicker-list{ text-align:left; max-width:320px; margin:0 auto; }
  table.spec{ text-align:left; }
  .crumbs{ text-align:center; }
  .badge-row{ justify-content:center; }
  .bg-malachite .wrap{ flex-direction:column; text-align:center; }
  .step{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  form.rfq{ text-align:left; }
}

/* ---------- hero ---------- */
.hero{
  background:var(--ink); color:var(--white);
  padding:64px 0 56px;
  position:relative; overflow:hidden;
  border-bottom:4px solid var(--sulphur);
}
.hero::after{
  content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px;
  background:radial-gradient(circle, rgba(39,106,86,.55), transparent 70%);
}
.hero .wrap{ position:relative; z-index:2; }
.hero h1{ color:var(--white); font-size:clamp(2.1rem, 4.4vw, 3.4rem); max-width:18ch; }
.hero .lede{ color:#D9D9CC; max-width:58ch; font-size:1.08rem; }
.hero-ctas{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; }

/* manifest strip: signature element */
.manifest{
  margin-top:40px; border:1px solid #33473f; background:rgba(255,255,255,.03);
  display:flex; flex-wrap:wrap;
}
.manifest .tag{
  font-family:var(--font-mono); font-size:.76rem; color:#cfd9d4; padding:12px 16px;
  border-right:1px solid #33473f; display:flex; align-items:center; gap:8px;
}
.manifest .tag:last-child{ border-right:none; }
.manifest .tag b{ color:var(--sulphur); }

/* ---------- section scaffolding ---------- */
section{ padding:64px 0; }
section.tight{ padding:44px 0; }
.section-head{ max-width:70ch; margin-bottom:34px; }
.section-head h2{ font-size:clamp(1.5rem,2.6vw,2.1rem); }
.grid{ display:grid; gap:22px; }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .grid.cols-3,.grid.cols-4,.grid.cols-2{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .grid.cols-3,.grid.cols-4,.grid.cols-2{ grid-template-columns:1fr; } }

.card{ background:var(--white); border:1px solid var(--line); padding:22px; border-radius:14px; }
.card h3{ font-size:1.08rem; margin-bottom:8px; }
.card p{ font-size:.93rem; color:#3c4a48; margin-bottom:0; }
.card a.more{ font-family:var(--font-mono); font-size:.76rem; color:var(--malachite-d); display:inline-block; margin-top:12px; }

.bg-ink{ background:var(--ink); color:var(--white); }
.bg-ink h2, .bg-ink h3{ color:var(--white); }
.bg-ink p{ color:#cfd9d4; }
.bg-malachite{ background:var(--malachite); color:var(--white); }
.bg-malachite h2{ color:var(--white); }

/* ---------- consignment label (product spec block) ---------- */
.label-plate{
  border:2px solid var(--ink); background:var(--white);
  display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:16px; overflow:hidden;
}
.label-plate .field{ padding:16px 20px; border-bottom:1px solid var(--line-soft); border-right:1px solid var(--line-soft); }
.label-plate .field:nth-child(2n){ border-right:none; }
.label-plate .field .k{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:#8b8b7c; display:block; margin-bottom:4px; }
.label-plate .field .v{ font-family:var(--font-mono); font-size:.98rem; color:var(--ink); }
@media (max-width:640px){ .label-plate{ grid-template-columns:1fr; } .label-plate .field:nth-child(2n){ border-right:1px solid var(--line-soft); } }

.stamp{
  display:inline-block; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--malachite-d); color:var(--malachite-d); padding:4px 10px; border-radius:20px; margin:2px 6px 2px 0;
}

/* ---------- photo slots (drop-in real photography) ---------- */
.photo{ border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--paper-dim); }
.photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-slot{
  border-radius:14px; border:1.5px dashed #9aa39c; background:
    repeating-linear-gradient(135deg, #E6E6DA, #E6E6DA 10px, #DEDED0 10px, #DEDED0 20px);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:26px;
  min-height:220px; color:#5b6b68;
}
.photo-slot .lbl{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em; max-width:26ch; }
.photo-slot .lbl b{ display:block; color:var(--ink); font-size:.8rem; margin-bottom:6px; }
.icon-badge{ width:52px; height:52px; border-radius:14px; background:var(--malachite); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.icon-badge img, .icon-badge svg{ width:28px; height:28px; }
.icon-badge.ink{ background:var(--ink); }
.icon-badge.sulphur{ background:var(--sulphur); }
img.rounded{ border-radius:14px; }

/* ---------- breadcrumb ---------- */
.crumbs{ font-family:var(--font-mono); font-size:.75rem; color:#5b6b68; padding:16px 0; }
.crumbs a{ color:var(--malachite-d); }
.crumbs span{ margin:0 6px; }

/* ---------- table ---------- */
table.spec{ width:100%; border-collapse:collapse; font-size:.92rem; }
table.spec th, table.spec td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--line-soft); }
table.spec th{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:#5b6b68; }

/* ---------- process list ---------- */
.steps{ display:grid; gap:0; border-top:1px solid var(--line); }
.step{ display:grid; grid-template-columns:70px 1fr; gap:18px; padding:20px 0; border-bottom:1px solid var(--line); }
.step .n{ font-family:var(--font-mono); color:var(--sulphur); background:var(--ink); width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:.85rem; }

/* ---------- country / mineral chip nav ---------- */
.chip-row{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ font-family:var(--font-mono); font-size:.8rem; border:1px solid var(--ink); padding:8px 16px; border-radius:999px; }
.chip:hover{ background:var(--ink); color:var(--white); }

/* ---------- form ---------- */
form.rfq{ display:grid; gap:14px; }
form.rfq label{ font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:#5b6b68; display:block; margin-bottom:6px; }
form.rfq input, form.rfq select, form.rfq textarea{
  width:100%; padding:11px 14px; border:1px solid var(--line); background:var(--white); font-family:var(--font-body); font-size:.95rem; border-radius:10px;
}
form.rfq input:focus, form.rfq select:focus, form.rfq textarea:focus{ border-color:var(--malachite); }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:640px){ .two-col{ grid-template-columns:1fr; } }

/* ---------- footer ---------- */
footer.site{ background:var(--ink); color:#c7d1cd; padding:56px 0 24px; margin-top:40px; }
footer.site h4{ color:var(--white); font-size:.85rem; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; }
footer.site a{ display:block; padding:3px 0; font-size:.9rem; color:#c7d1cd; }
footer.site a:hover{ color:var(--sulphur); }
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:30px; }
@media (max-width:900px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
.foot-bottom{ border-top:1px solid #2a3a37; margin-top:40px; padding-top:20px; font-size:.8rem; color:#8ea19c; line-height:1.7; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.foot-copy{ color:#8ea19c; }
.credit{ color:#8ea19c; display:inline-block; }
.credit a{ display:inline; padding:0; color:var(--sulphur); }
.credit a:hover{ text-decoration:underline; }

@media (max-width:760px){
  .foot-grid{ grid-template-columns:1fr; text-align:center; gap:14px; }
  .foot-grid > div:nth-child(2), .foot-grid > div:nth-child(3), .foot-grid > div:nth-child(4){ display:none; }
  footer.site a{ padding:2px 0; }
  footer.site h4{ margin-bottom:6px; }
  .foot-bottom{ text-align:center; flex-direction:column; }
}

/* ---------- whatsapp floating ---------- */
/* ---------- misc ---------- */
.divider{ height:1px; background:var(--line); margin:48px 0; }
.kicker-list{ list-style:none; padding:0; margin:0; }
.kicker-list li{ padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:.95rem; }
.badge-row{ display:flex; gap:22px; flex-wrap:wrap; align-items:center; margin-top:18px; }
.badge{ font-family:var(--font-mono); font-size:.72rem; color:#5b6b68; }