/* ============================================================
   AFRICAPICKUP — DOCS/POLICY PAGE (PC)
   File: pc-less-docs-cache.css
   2-column grid: sticky TOC + article body
   Zero CLS — no overlay, no shift
   ============================================================ */

/* ---------- 0. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
}
body{
  margin:0;padding:0 0 24px;background:#f5f5f5;color:#3d2a2a;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:15px;line-height:1.7;overflow-x:hidden;min-width:0;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4{margin:0;padding:0;font:inherit;font-weight:700;line-height:1.3}
p{margin:0;padding:0}

/* ---------- 1. SHELL: 2-COLUMN GRID ---------- */
.wrap{
  max-width:1100px;margin:0 auto;padding:0 16px;
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:28px;
  align-items:start;
  position:relative;z-index:1;
}

/* ---------- 2. BREADCRUMB ---------- */
.bc{
  grid-column:1/-1;
  margin:20px 0 0;padding:12px 18px;border-radius:12px;
  background:#eef4ef;border-left:5px solid #006400;
  font-size:13px;font-weight:700;color:#2a5a2a;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
}
.bc a{
  color:#006400;display:inline-flex;align-items:center;gap:5px;
  padding:3px 6px;border-radius:5px;
  transition:all .15s ease;
}
.bc a:hover{background:rgba(0,163,42,.1);color:#00a32a}
.bc-sep{color:#00a32a;font-weight:900;font-size:14px}
.bc-current{
  color:#1a2e1a;font-weight:800;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------- 3. TOC (sticky) ---------- */
.toc{
  position:sticky;top:20px;
  background:#fff;border-radius:14px;
  padding:20px;border:1px solid rgba(0,100,0,.06);
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.toc h3{
  font-size:11.5px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:#2a5a2a;margin-bottom:12px;
  padding-bottom:10px;border-bottom:1px solid rgba(0,100,0,.08);
  display:flex;align-items:center;gap:8px;
}
.toc h3::before{
  content:"";width:6px;height:6px;background:#00a32a;
  border-radius:50%;box-shadow:0 0 0 3px rgba(0,163,42,.14);
  flex-shrink:0;
}
.toc ul{
  display:flex;flex-direction:column;gap:2px;
}
.toc li a{
  display:block;padding:8px 12px;border-radius:8px;
  font-size:13px;font-weight:600;color:#5a6a5a;
  border-left:3px solid transparent;
  transition:all .15s ease;
  overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;
}
.toc li a:hover{
  background:#f6fbf7;color:#006400;
  border-left-color:#00a32a;
}
.toc li a.active{
  background:rgba(0,163,42,.08);color:#006400;
  border-left-color:#00a32a;font-weight:800;
}
.toc li a.toc-loading{
  color:#a0b0a0;font-style:italic;
  pointer-events:none;
}
.toc-meta{
  margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(0,100,0,.08);
  font-size:11.5px;color:#7a6a5a;font-weight:600;
}
.toc-meta div{
  display:flex;justify-content:space-between;padding:4px 0;
}
.toc-meta b{color:#006400;font-weight:800}

/* ---------- 4. ARTICLE ---------- */
.article{
  background:#fff;border-radius:16px;
  border:1px solid rgba(0,100,0,.06);
  box-shadow:0 4px 16px rgba(0,0,0,.05);
  overflow:hidden;
  contain:layout style;
}

.article-hero{
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 2px,transparent 2px 10px),
    linear-gradient(135deg,#004d00,#006400 50%,#00a32a);
  padding:32px 36px;color:#fff;position:relative;overflow:hidden;
}
.article-hero::before{
  content:"";position:absolute;top:-50%;right:-20%;
  width:320px;height:320px;
  background:radial-gradient(circle,rgba(255,255,255,.25),transparent 70%);
  pointer-events:none;
}
.article-kicker{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 13px;border-radius:8px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
  font-size:11px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;margin-bottom:14px;
  position:relative;z-index:1;
  line-height:1;
}
.article-hero h1{
  font-size:32px;font-weight:900;line-height:1.15;
  letter-spacing:-.5px;margin-bottom:10px;position:relative;z-index:1;
  word-break:break-word;
}
.article-hero p{
  font-size:14px;color:rgba(255,255,255,.9);
  position:relative;z-index:1;
}

.article-body{
  padding:36px 42px;
  font-size:15.5px;line-height:1.8;color:#3d2a2a;
  word-break:break-word;
}

.article-body h2{
  font-size:22px;font-weight:900;color:#1a2e1a;
  margin:36px 0 16px;padding-bottom:12px;
  border-bottom:2px solid rgba(0,163,42,.15);
  display:flex;align-items:center;gap:12px;
  scroll-margin-top:20px;
  letter-spacing:-.3px;
  word-break:break-word;
}
.article-body h2:first-child{margin-top:0}
.article-body h2::before{
  content:"";width:10px;height:10px;background:#00a32a;
  border-radius:50%;box-shadow:0 0 0 4px rgba(0,163,42,.14);
  flex-shrink:0;
}

.article-body h3{
  font-size:18px;font-weight:800;color:#006400;
  margin:28px 0 12px;
}

.article-body h4{
  font-size:16px;font-weight:800;color:#006400;
  margin:22px 0 10px;
}

.article-body p{margin-bottom:16px}

.article-body ul,
.article-body ol{
  padding-left:28px;margin-bottom:16px;
}
.article-body ul{list-style:disc}
.article-body ol{list-style:decimal}
.article-body li{margin-bottom:8px}

.article-body a{
  color:#006400;font-weight:700;
  text-decoration:underline;
  text-decoration-color:rgba(0,163,42,.4);
  text-underline-offset:3px;
  transition:color .2s ease;
}
.article-body a:hover{
  color:#00a32a;
  text-decoration-color:#00a32a;
}

.article-body strong{
  color:#1a2e1a;font-weight:800;
}

.article-body em{font-style:italic}

.article-body blockquote{
  border-left:4px solid #00a32a;
  background:#f6fbf7;
  padding:16px 22px;
  border-radius:0 10px 10px 0;
  margin:22px 0;
  color:#2a5a2a;font-style:italic;
  font-size:16px;
}

.article-body code{
  background:rgba(0,100,0,.08);
  padding:2px 7px;border-radius:5px;
  font-size:.9em;font-family:ui-monospace,monospace;
}

.article-body pre{
  background:#1a1a1a;color:#e4ede6;
  padding:18px 20px;border-radius:10px;
  overflow-x:auto;margin:20px 0;font-size:13.5px;
  font-family:ui-monospace,monospace;
  line-height:1.6;
}

.article-body img{
  border-radius:12px;margin:20px auto;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}

.article-body hr{
  border:none;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,163,42,.25),transparent);
  margin:32px 0;
}

.article-body table{
  width:100%;border-collapse:collapse;
  margin:20px 0;font-size:14.5px;
  border-radius:12px;overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.article-body th{
  background:#e4ede6;color:#2a5a2a;
  padding:12px 16px;text-align:left;
  font-weight:800;font-size:13.5px;
}
.article-body td{
  padding:12px 16px;
  border-bottom:1px solid rgba(0,100,0,.06);
}
.article-body tr:last-child td{border-bottom:none}
.article-body tr:hover{background:#f6fbf7}

/* ---------- 5. AD SLOT ---------- */
.ad-slot{
  min-height:250px;display:flex;align-items:center;justify-content:center;
  margin:16px 0;background:#eef4ef;border-radius:10px;overflow:hidden;
}
.ad-slot:empty{min-height:0;margin:0}

/* ---------- 6. TABLET (600–940px) ---------- */
@media (min-width:600px) and (max-width:940px){
  .wrap{
    max-width:900px;
    grid-template-columns:1fr;
    gap:16px;
  }
  .toc{
    position:static;
    order:2;
  }
  .article{order:1}
  .article-hero{padding:26px 30px}
  .article-hero h1{font-size:26px}
  .article-body{padding:28px 30px}
  .article-body h2{font-size:20px}
}

/* ---------- 7. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- 8. SCROLLBAR ---------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#f0f0f0;border-radius:5px}
::-webkit-scrollbar-thumb{background:#006400;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#00a32a}
::-webkit-scrollbar-thumb:window-inactive{background:#999}

/* ---------- 9. SELECTION ---------- */
::selection{background:#75ff75}
::-moz-selection{background:#75ff75}