@import url("../styles.css");

/* POLE AFRICA accent overrides — UN blue family, distinct identity */
:root{
  --navy:#173a64;
  --navy-light:#0e7c91;
  --gold:#2ea8c9;
  --gold-light:#8fdcea;
}

header::after{
  content:"";
  position:absolute;
  right:2%;
  top:50%;
  transform:translateY(-48%);
  width:min(38vw, 260px);
  height:140%;
  background:url("africa-bg.svg") center / contain no-repeat;
  opacity:.16;
  pointer-events:none;
  z-index:0;
}

nav{
  flex-wrap:wrap;
  gap:0;
  padding:0 .15rem;
}
nav ul{
  flex-wrap:wrap;
  justify-content:center;
  min-width:0;
}
nav ul li a{
  padding:.55rem .38rem;
  font-size:.65rem;
  letter-spacing:.01em;
  white-space:nowrap;
}
.africa-tag{
  display:inline-block;
  background:var(--gold);
  color:#fff;
  font-family:Arial, sans-serif;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.25rem .6rem;
  border-radius:3px;
  margin-bottom:.6rem;
}
.site-card{
  background:#fff;
  border:1px solid #d4e3f3;
  border-left:4px solid var(--navy-light);
  padding:1.2rem 1.4rem;
  border-radius:3px;
  margin:1.2rem 0;
}
.address-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.4rem;
  margin-top:1.2rem;
  align-items:stretch;
}
.address-grid .signers,
.address-grid .site-card{
  margin:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.sdg-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:.9rem;
  margin:1.4rem 0;
}
.sdg-item{
  background:#fff;
  border:1px solid #d4e3f3;
  border-left:4px solid var(--gold);
  padding:.8rem 1rem;
  border-radius:3px;
  font-size:.92rem;
  counter-increment:sdg;
}
.sdg-grid{counter-reset:sdg;}
.sdg-item::before{
  content:counter(sdg) ". ";
  font-weight:bold;
  color:var(--navy);
  font-family:Arial, sans-serif;
}
.pillars{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin:1.2rem 0;
}
.pillar{
  flex:1;
  min-width:160px;
  background:var(--navy);
  color:#fff;
  text-align:center;
  padding:1rem;
  border-radius:4px;
  font-family:Arial, sans-serif;
  font-weight:bold;
  letter-spacing:.05em;
}
.year-block{
  background:#fff;
  border:1px solid #d4e3f3;
  border-left:5px solid var(--navy-light);
  padding:1.2rem 1.5rem;
  margin-bottom:1.2rem;
  border-radius:2px;
}
.year-block h4{margin-top:0;color:var(--gold);}
.seminar-cluster{
  margin-top:2rem;
}
.seminar-cluster > h3{
  background:var(--navy);
  color:#fff;
  padding:.6rem 1rem;
  border-radius:3px;
  font-family:Arial, sans-serif;
  font-size:1rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.seminar-card{
  background:#fff;
  border:1px solid #d4e3f3;
  border-top:3px solid var(--gold);
  padding:1.2rem 1.4rem;
  border-radius:3px;
  margin:1rem 0;
}
.seminar-card h4{margin-top:0;}
.seminar-card .keypoints{
  font-size:.88rem;
  color:var(--muted);
  margin-top:.6rem;
  padding-top:.6rem;
  border-top:1px dashed #d4e3f3;
}
.seminar-card .keypoints ul{
  margin:.5rem 0 0 1.2rem;
  list-style:disc;
}
.seminar-card .keypoints li{margin-bottom:.35rem;line-height:1.55;}
.seminar-reminder{
  background:#e8f4fa;
  border-left:4px solid var(--gold);
  padding:1rem 1.2rem;
  margin:1.2rem 0 1.8rem;
  border-radius:0 3px 3px 0;
  font-size:.95rem;
  line-height:1.65;
}
.seminar-reminder strong{
  display:block;
  margin-bottom:.35rem;
  color:var(--navy);
  font-family:Arial, sans-serif;
  font-size:.82rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
table.plan-table{
  width:100%;
  border-collapse:collapse;
  margin:1.2rem 0;
  font-size:.88rem;
  background:#fff;
}
table.plan-table th{
  background:var(--navy);
  color:#fff;
  text-align:left;
  padding:.6rem .8rem;
  font-family:Arial, sans-serif;
  font-size:.8rem;
  letter-spacing:.03em;
}
table.plan-table td{
  padding:.6rem .8rem;
  border-bottom:1px solid #d4e3f3;
  vertical-align:top;
}
table.plan-table tr:nth-child(even) td{background:#f4f8fb;}
.step-list{
  margin:1rem 0 1.2rem 0;
  counter-reset:step;
  list-style:none;
}
.step-list li{
  position:relative;
  padding:.6rem 0 .6rem 2.6rem;
  border-bottom:1px solid #d4e3f3;
  counter-increment:step;
}
.step-list li::before{
  content:counter(step);
  position:absolute;
  left:0;
  top:.5rem;
  width:1.8rem;
  height:1.8rem;
  background:var(--gold);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:Arial, sans-serif;
  font-weight:bold;
  font-size:.85rem;
}

/* Network map: click a pin to open that hub's contacts */
.network-map{
  position:relative;
  width:100%;
}
.network-map svg{width:100%;height:auto;display:block;}
.map-pin{cursor:pointer;}
.map-pin.is-active circle:nth-of-type(3),
.map-pin:hover circle:nth-of-type(3){stroke:#173a64;}
.map-pin-pulse{
  transform-box:fill-box;
  transform-origin:center;
  animation:map-pin-pulse 2.2s ease-out infinite;
}
@keyframes map-pin-pulse{
  0%{opacity:.35;transform:scale(.7);}
  70%{opacity:0;transform:scale(1.8);}
  100%{opacity:0;transform:scale(1.8);}
}
.network-map .map-tooltip{
  pointer-events:none;
}
.network-map .map-tooltip.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.network-map .map-tooltip--below{
  transform:translate(-10%, 14px);
}
.network-map .map-tooltip--right{
  transform:translate(16px, -50%);
}
.network-map .map-pole-person{
  display:block;
  margin:.15rem 0 0;
  font-weight:bold;
  color:var(--text);
}
.map-hint{
  position:absolute;
  left:0;
  right:0;
  bottom:2%;
  margin:0;
  font-family:Arial,sans-serif;
  font-size:.72rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:center;
  pointer-events:none;
}
.network-map:has(.map-tooltip.is-open) .map-hint{opacity:0;}