/* Visit Cameroon – Interactive Map v3.0.0 */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Lato:wght@300;400;700&display=swap');

.vcm-outer {
  --fs-title:   clamp(22px, 3vw, 38px);
  --fs-sub:     clamp(13px, 1.4vw, 17px);
  --fs-h3:      clamp(16px, 1.9vw, 22px);
  --fs-base:    clamp(13px, 1.35vw, 16px);
  --fs-sm:      clamp(11px, 1.15vw, 14px);
  --fs-xs:      clamp(9px,  0.95vw, 12px);
  --fs-panel:   clamp(13px, 1.35vw, 16px);
  font-family: 'Lato', sans-serif;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* Font size overrides */
.vcm-outer[data-fs="sm"] { --fs-title:clamp(18px,2.2vw,28px); --fs-sub:clamp(11px,1.1vw,13px); --fs-h3:clamp(13px,1.5vw,17px); --fs-base:clamp(11px,1.1vw,13px); --fs-sm:clamp(9px,.95vw,12px); --fs-xs:clamp(8px,.8vw,10px); --fs-panel:clamp(11px,1.1vw,13px); }
.vcm-outer[data-fs="lg"] { --fs-title:clamp(26px,3.6vw,48px); --fs-sub:clamp(15px,1.6vw,21px); --fs-h3:clamp(19px,2.3vw,28px); --fs-base:clamp(15px,1.6vw,20px); --fs-sm:clamp(13px,1.4vw,17px); --fs-xs:clamp(11px,1.1vw,14px); --fs-panel:clamp(15px,1.6vw,19px); }
.vcm-outer[data-fs="xl"] { --fs-title:clamp(30px,4.2vw,58px); --fs-sub:clamp(17px,1.9vw,25px); --fs-h3:clamp(22px,2.7vw,34px); --fs-base:clamp(17px,1.9vw,24px); --fs-sm:clamp(15px,1.6vw,20px); --fs-xs:clamp(13px,1.3vw,17px); --fs-panel:clamp(17px,1.9vw,23px); }

/* Header */
.vcm-header { text-align: center; padding: clamp(20px,2.5vw,42px) 12px clamp(10px,1.2vw,20px); }
.vcm-title   { font-family:'Playfair Display',serif; font-size:var(--fs-title); font-weight:700; color:#1a2e1a; margin:0 0 .35em; letter-spacing:-.02em; line-height:1.15; }
.vcm-subtitle{ font-size:var(--fs-sub); color:#4a6a4a; font-weight:300; margin:0; line-height:1.5; }

/* Font controls */
.vcm-controls { display:flex; align-items:center; justify-content:flex-end; gap:5px; padding:0 12px clamp(8px,1vw,14px); flex-wrap:wrap; }
.vcm-ctrl-lbl { font-size:var(--fs-xs); color:#7a8e7a; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-right:4px; }
.vcm-fb { padding:3px 10px; font-size:var(--fs-xs); font-family:'Lato',sans-serif; font-weight:700; border:1.5px solid #c8ddc0; border-radius:6px; background:transparent; color:#2a5a2a; cursor:pointer; transition:all .15s; }
.vcm-fb:hover { background:#e8f5e4; border-color:#3d7a3d; }
.vcm-fb-on  { background:#1e5c1e !important; color:#fff !important; border-color:#1e5c1e !important; }
.vcm-fi     { font-size:var(--fs-xs); color:#8a9e8a; min-width:50px; }

/* Layout */
.vcm-layout { display:grid; grid-template-columns:minmax(0,1.2fr) clamp(280px,30vw,440px); gap:clamp(14px,2vw,28px); align-items:start; padding:0 clamp(10px,1.8vw,28px) clamp(20px,2.5vw,40px); }
@media(max-width:860px){ .vcm-layout{ grid-template-columns:1fr; } }

/* Map column */
.vcm-map-col { background:#ddeedd; border-radius:clamp(10px,1.5vw,18px); border:1px solid #b8d4b8; padding:clamp(8px,1.2vw,16px); }
#vcm-svg     { width:100%; height:auto; display:block; min-height:clamp(380px,55vw,680px); }

/* Region paths */
.vcm-region {
  stroke:#fff; stroke-width:1.5; stroke-linejoin:round; cursor:pointer;
  transition:filter .18s, stroke-width .15s;
}
.vcm-region:hover,.vcm-region:focus {
  filter:brightness(1.14) drop-shadow(0 2px 7px rgba(0,0,0,.3));
  stroke-width:2.8; outline:none;
}
.vcm-region.vcm-active {
  stroke:#111; stroke-width:3; filter:brightness(1.08) drop-shadow(0 3px 10px rgba(0,0,0,.35));
}

/* Map labels */
.vcm-lbl {
  pointer-events:none; font-family:'Lato',sans-serif; font-weight:700;
  paint-order:stroke fill; stroke-linejoin:round;
}

/* Loading */
.vcm-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:clamp(320px,48vw,560px); gap:12px; color:#5a7a5a; font-size:var(--fs-base); }
.vcm-spin    { width:32px; height:32px; border:3px solid #c8ddc0; border-top-color:#1e5c1e; border-radius:50%; animation:vcm-sp .7s linear infinite; }
@keyframes vcm-sp { to { transform:rotate(360deg); } }

/* Panel */
.vcm-panel { background:#fff; border-radius:clamp(10px,1.5vw,18px); border:1px solid #d6e4d0; overflow:hidden; min-height:clamp(280px,40vw,520px); display:flex; flex-direction:column; position:sticky; top:16px; }
@media(max-width:860px){ .vcm-panel{ position:static; } }

.vcm-panel-def { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:clamp(20px,2.2vw,36px) clamp(16px,1.8vw,28px); flex:1; text-align:center; }
.vcm-def-icon  { font-size:clamp(32px,4.5vw,52px); opacity:.6; margin-bottom:clamp(10px,1.2vw,16px); }
.vcm-def-title { font-family:'Playfair Display',serif; font-size:var(--fs-h3); font-weight:700; color:#1a2e1a; margin:0 0 .4em; }
.vcm-def-hint  { font-size:var(--fs-base); color:#5a6b5a; line-height:1.6; margin:0 0 clamp(14px,1.8vw,24px); max-width:300px; }
.vcm-legend-lbl{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.1em; color:#8a9e8a; font-weight:700; margin:0 0 clamp(6px,.8vw,11px); }
.vcm-pills     { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.vcm-pill { padding:clamp(3px,.4vw,6px) clamp(9px,1vw,15px); border-radius:20px; font-size:var(--fs-sm); font-weight:700; border:2px solid; cursor:pointer; background:transparent; white-space:nowrap; transition:all .16s; font-family:'Lato',sans-serif; }
.vcm-pill:hover{ filter:brightness(1.1); transform:translateY(-1px); }

/* Active panel */
.vcm-panel-content { flex:1; display:flex; flex-direction:column; animation:vcm-fd .3s ease; }
@keyframes vcm-fd { from{opacity:0;transform:translateY(9px)} to{opacity:1;transform:translateY(0)} }

.vcm-panel-hero { padding:clamp(15px,1.8vw,26px) clamp(16px,1.8vw,26px) clamp(12px,1.4vw,20px); position:relative; }
.vcm-panel-close{ position:absolute; top:10px; right:12px; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.4); color:#fff; border-radius:50%; width:clamp(24px,2.8vw,32px); height:clamp(24px,2.8vw,32px); font-size:clamp(13px,1.5vw,17px); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; font-family:sans-serif; line-height:1; }
.vcm-panel-close:hover{ background:rgba(255,255,255,.38); }
.vcm-panel-tag  { display:inline-block; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.35); color:#fff; font-size:var(--fs-xs); font-weight:700; padding:clamp(2px,.3vw,4px) clamp(7px,.85vw,12px); border-radius:20px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:clamp(5px,.6vw,9px); }
.vcm-panel-name { font-family:'Playfair Display',serif; font-size:clamp(18px,2.3vw,28px); font-weight:700; color:#fff; margin:0; text-shadow:0 1px 4px rgba(0,0,0,.28); line-height:1.15; }

.vcm-panel-body { padding:clamp(12px,1.5vw,22px) clamp(16px,1.8vw,26px); display:flex; flex-direction:column; gap:clamp(10px,1.3vw,18px); flex:1; overflow-y:auto; }
.vcm-panel-desc { font-size:var(--fs-panel); color:#3a4e3a; line-height:1.68; margin:0; }
.vcm-climate-row{ display:flex; gap:6px; flex-wrap:wrap; }
.vcm-chip { display:flex; align-items:center; gap:4px; background:#f0f7ee; border:1px solid #c8ddc0; border-radius:7px; padding:clamp(3px,.45vw,6px) clamp(7px,.85vw,12px); font-size:var(--fs-sm); color:#2a4a2a; }
.vcm-attr-lbl { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color:#8a9e8a; font-weight:700; margin-bottom:clamp(4px,.5vw,7px); }
.vcm-attr-list { display:flex; flex-direction:column; gap:clamp(3px,.45vw,6px); }
.vcm-attr-item { display:flex; align-items:flex-start; gap:7px; font-size:var(--fs-panel); color:#2a3e2a; line-height:1.42; }
.vcm-attr-item::before{ content:'▸'; color:#3d7a3d; font-size:.82em; margin-top:.14em; flex-shrink:0; }
.vcm-cta-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:4px; }
.vcm-btn-p { display:inline-flex; align-items:center; gap:5px; padding:clamp(7px,.9vw,11px) clamp(13px,1.5vw,20px); background:#1e5c1e; color:#fff; text-decoration:none; font-size:var(--fs-sm); font-weight:700; border-radius:8px; border:none; cursor:pointer; transition:background .16s; font-family:'Lato',sans-serif; }
.vcm-btn-p:hover{ background:#174e17; color:#fff; }
.vcm-btn-s { display:inline-flex; align-items:center; gap:5px; padding:clamp(7px,.9vw,11px) clamp(13px,1.5vw,20px); background:transparent; color:#1e5c1e; text-decoration:none; font-size:var(--fs-sm); font-weight:700; border-radius:8px; border:1.5px solid #3d7a3d; cursor:pointer; transition:all .16s; font-family:'Lato',sans-serif; }
.vcm-btn-s:hover{ background:#f0f7ee; color:#1e5c1e; }

.vcm-attribution { font-size:clamp(9px,.85vw,11px); color:#8a9e8a; text-align:center; padding-bottom:8px; }

@media(max-width:480px){
  .vcm-controls{ justify-content:center; }
  .vcm-pill{ font-size:10px; padding:3px 8px; }
}