/* =========================================================
   Visit Cameroon – Practical Travel Guide  v1.1.0
   Full clamp() font system · A− / A / A+ controls
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Lato:wght@300;400;700&display=swap');

/* ── CSS custom property scales ─────────────────────────
   All font-size declarations reference these variables.
   data-fontsize on .vc-tg-wrap switches between scales.
────────────────────────────────────────────────────────── */
.vc-tg-wrap {
  /* DEFAULT — generous desktop reading sizes */
  --fs-title:    clamp(24px, 2.8vw, 36px);
  --fs-intro:    clamp(15px, 1.55vw, 19px);
  --fs-tab:      clamp(13px, 1.35vw, 16px);
  --fs-card-h:   clamp(16px, 1.55vw, 20px);
  --fs-body:     clamp(14px, 1.45vw, 17px);
  --fs-sm:       clamp(12px, 1.25vw, 15px);
  --fs-xs:       clamp(11px, 1.08vw, 13px);
  --fs-icon:     clamp(26px, 2.8vw, 34px);
  --fs-ex-val:   clamp(18px, 1.95vw, 24px);
  --fs-conv-num: clamp(28px, 3.2vw, 42px);
  --fs-conv-inp: clamp(14px, 1.45vw, 17px);
  --fs-table:    clamp(13px, 1.35vw, 16px);
  --fs-badge:    clamp(11px, 1.08vw, 13px);

  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  font-family: 'Lato', sans-serif;
}

.vc-tg-wrap[data-fontsize="sm"] {
  --fs-title:    clamp(19px, 2.0vw, 26px);
  --fs-intro:    clamp(12px, 1.22vw, 15px);
  --fs-tab:      clamp(11px, 1.08vw, 13px);
  --fs-card-h:   clamp(13px, 1.25vw, 16px);
  --fs-body:     clamp(12px, 1.18vw, 14px);
  --fs-sm:       clamp(10px, 1.02vw, 12px);
  --fs-xs:       clamp(9px,  0.88vw, 11px);
  --fs-icon:     clamp(20px, 2.2vw,  26px);
  --fs-ex-val:   clamp(14px, 1.52vw, 18px);
  --fs-conv-num: clamp(22px, 2.5vw,  32px);
  --fs-conv-inp: clamp(12px, 1.18vw, 14px);
  --fs-table:    clamp(11px, 1.08vw, 13px);
  --fs-badge:    clamp(9px,  0.9vw,  11px);
}

.vc-tg-wrap[data-fontsize="lg"] {
  --fs-title:    clamp(28px, 3.4vw,  44px);
  --fs-intro:    clamp(17px, 1.82vw, 22px);
  --fs-tab:      clamp(15px, 1.58vw, 19px);
  --fs-card-h:   clamp(19px, 1.95vw, 24px);
  --fs-body:     clamp(16px, 1.68vw, 20px);
  --fs-sm:       clamp(14px, 1.45vw, 17px);
  --fs-xs:       clamp(13px, 1.28vw, 16px);
  --fs-icon:     clamp(30px, 3.3vw,  40px);
  --fs-ex-val:   clamp(22px, 2.35vw, 29px);
  --fs-conv-num: clamp(34px, 3.8vw,  50px);
  --fs-conv-inp: clamp(16px, 1.68vw, 20px);
  --fs-table:    clamp(15px, 1.58vw, 19px);
  --fs-badge:    clamp(13px, 1.28vw, 16px);
}

.vc-tg-wrap[data-fontsize="xl"] {
  --fs-title:    clamp(34px, 4.2vw,  54px);
  --fs-intro:    clamp(20px, 2.12vw, 26px);
  --fs-tab:      clamp(17px, 1.82vw, 22px);
  --fs-card-h:   clamp(22px, 2.22vw, 28px);
  --fs-body:     clamp(19px, 1.92vw, 23px);
  --fs-sm:       clamp(16px, 1.68vw, 20px);
  --fs-xs:       clamp(15px, 1.52vw, 19px);
  --fs-icon:     clamp(36px, 4.0vw,  48px);
  --fs-ex-val:   clamp(26px, 2.82vw, 35px);
  --fs-conv-num: clamp(40px, 4.6vw,  60px);
  --fs-conv-inp: clamp(19px, 1.92vw, 23px);
  --fs-table:    clamp(17px, 1.82vw, 22px);
  --fs-badge:    clamp(15px, 1.52vw, 19px);
}

/* ── Font controls bar ────────────────────────────────── */
.vc-tg-font-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 0 0 clamp(10px,1.2vw,16px);
  flex-wrap: wrap;
}
.vc-tg-fc-label {
  font-size: var(--fs-xs);
  color: #7a8e7a;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-right: 4px;
}
.vc-tg-fc-btn {
  padding: clamp(4px,.5vw,7px) clamp(11px,1.2vw,17px);
  font-size: var(--fs-xs);
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  border: 1.5px solid #c8ddc0;
  border-radius: 7px;
  background: transparent;
  color: #2a5a2a;
  cursor: pointer;
  transition: all .15s;
  line-height: 1.3;
}
.vc-tg-fc-btn:hover        { background: #e8f5e4; border-color: #3d7a3d; }
.vc-tg-fc-btn.vc-fc-active { background: #1e5c1e; color: #fff; border-color: #1e5c1e; }
.vc-tg-fc-current {
  font-size: var(--fs-xs);
  color: #8a9e8a;
  min-width: 58px;
}

/* ── Tabs ─────────────────────────────────────────────── */
.vc-tg-tabs {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: clamp(18px,2.2vw,28px);
  border-bottom: 2px solid #e0ead8;
  padding-bottom: clamp(10px,1.2vw,16px);
}
.vc-tg-tab {
  padding: clamp(7px,.88vw,12px) clamp(14px,1.6vw,22px);
  background: transparent;
  border: 1.5px solid #d0e4c8;
  border-radius: 8px;
  font-size: var(--fs-tab);
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  color: #5a7a5a;
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
  line-height: 1.3;
}
.vc-tg-tab:hover  { background: #f0f7ee; border-color: #3d7a3d; color: #1e5c1e; }
.vc-tg-tab.active { background: #1e5c1e; border-color: #1e5c1e; color: #fff; }

/* ── Sections ─────────────────────────────────────────── */
.vc-tg-section       { display: none; }
.vc-tg-section.active{ display: block; }

.vc-tg-section-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-title);
  font-weight: 700;
  color: #1a2e1a;
  margin: 0 0 clamp(14px,1.8vw,24px);
  letter-spacing: -.02em;
  line-height: 1.15;
}
.vc-tg-intro {
  font-size: var(--fs-intro);
  color: #4a5a4a;
  line-height: 1.7;
  margin: -6px 0 clamp(16px,2vw,26px);
  font-weight: 300;
}

/* ── Alert ────────────────────────────────────────────── */
.vc-alert {
  padding: clamp(10px,1.2vw,16px) clamp(14px,1.5vw,20px);
  border-radius: 8px;
  font-size: var(--fs-body);
  margin-bottom: clamp(14px,1.8vw,22px);
  line-height: 1.6;
}
.vc-alert--warning { background: #fffbea; border: 1px solid #f5d65a; color: #7a5c00; }

/* ── Info card grid ───────────────────────────────────── */
.vc-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(240px,28vw,320px), 1fr));
  gap: clamp(12px,1.5vw,20px);
}
.vc-info-card {
  background: #fafcf9;
  border: 1px solid #d6e4d0;
  border-radius: 12px;
  padding: clamp(16px,1.8vw,24px);
  display: flex;
  flex-direction: column;
  gap: clamp(7px,.85vw,11px);
  transition: border-color .2s, box-shadow .2s;
}
.vc-info-card:hover { border-color: #3d7a3d; box-shadow: 0 4px 16px rgba(30,92,30,.07); }
.vc-info-card--wide { grid-column: 1 / -1; }

.vc-info-icon       { font-size: var(--fs-icon); line-height: 1; }
.vc-info-card h3    { font-family: 'Playfair Display', serif; font-size: var(--fs-card-h); font-weight: 700; color: #1a2e1a; margin: 0; line-height: 1.2; }
.vc-info-card p     { font-size: var(--fs-body); color: #4a5a4a; line-height: 1.68; margin: 0; }
.vc-info-card p a   { color: #1e5c1e; font-weight: 700; }
.vc-info-link       { display: inline-block; margin-top: clamp(4px,.5vw,8px); font-size: var(--fs-sm); font-weight: 700; color: #1e5c1e; text-decoration: none; border-bottom: 1.5px solid #c8ddc0; transition: border-color .15s; }
.vc-info-link:hover { border-color: #1e5c1e; }

/* ── Lists ────────────────────────────────────────────── */
.vc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: clamp(5px,.6vw,8px); font-size: var(--fs-body); color: #4a5a4a; line-height: 1.6; }
.vc-list li::before { content: '▸ '; color: #3d7a3d; font-size: .85em; }

/* ── Exchange display ─────────────────────────────────── */
.vc-exchange-display { display: flex; gap: clamp(8px,1vw,14px); flex-wrap: wrap; background: #f0f7ee; border-radius: 8px; padding: clamp(10px,1.2vw,16px); }
.vc-ex-item  { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 70px; }
.vc-ex-val   { font-size: var(--fs-ex-val); font-weight: 700; color: #1e5c1e; line-height: 1.2; }
.vc-ex-lbl   { font-size: var(--fs-xs); color: #7a8e7a; margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.vc-rate-note{ font-size: var(--fs-xs); color: #8a9e8a; margin-top: 4px; }

/* ── Budget table ─────────────────────────────────────── */
.vc-budget-table { font-size: var(--fs-body); }
.vc-bt-row  { display: grid; grid-template-columns: 1.5fr 1fr 1.5fr; gap: clamp(6px,.7vw,10px); padding: clamp(6px,.7vw,10px) 0; border-bottom: 1px solid #e8f0e5; color: #3a4e3a; line-height: 1.45; }
.vc-bt-head { font-weight: 700; color: #2a3e2a; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; }

/* ── Emergency list ───────────────────────────────────── */
.vc-emergency-list { display: flex; flex-direction: column; gap: clamp(6px,.7vw,10px); }
.vc-em-row  { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-body); padding: clamp(6px,.7vw,10px) clamp(10px,1.1vw,14px); background: #fff; border-radius: 7px; border: 1px solid #e8f0e5; color: #3a4e3a; }
.vc-em-row strong { color: #1e5c1e; font-weight: 700; }

/* ── Climate cards ────────────────────────────────────── */
.vc-climate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(180px,22vw,260px), 1fr));
  gap: clamp(12px,1.5vw,18px);
  margin-bottom: clamp(18px,2.2vw,28px);
}
.vc-climate-card { background: #fafcf9; border: 1px solid #d6e4d0; border-radius: 12px; padding: clamp(14px,1.6vw,22px); display: flex; flex-direction: column; gap: clamp(7px,.85vw,11px); }
.vc-climate-card.vc-climate-best { border-color: #3d7a3d; background: #f0f7ee; }
.vc-climate-season      { font-size: var(--fs-sm); font-weight: 700; color: #5a7a5a; text-transform: uppercase; letter-spacing: .06em; }
.vc-climate-badge-pill  { display: inline-block; background: #e8f5e4; border: 1px solid #c8ddc0; border-radius: 20px; padding: clamp(2px,.3vw,4px) clamp(8px,.95vw,13px); font-size: var(--fs-badge); font-weight: 700; color: #2a5a2a; width: fit-content; }
.vc-climate-best .vc-climate-badge-pill { background: #1e5c1e; color: #fff; border-color: #1e5c1e; }
.vc-climate-card h3     { font-family: 'Playfair Display', serif; font-size: var(--fs-card-h); font-weight: 700; color: #1a2e1a; margin: 0; line-height: 1.2; }
.vc-climate-card p      { font-size: var(--fs-body); color: #4a5a4a; line-height: 1.65; margin: 0; }
.vc-climate-regions     { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.vc-climate-regions span{ font-size: var(--fs-badge); background: #e8f0e5; border-radius: 20px; padding: clamp(2px,.28vw,4px) clamp(7px,.85vw,12px); color: #2a4a2a; font-weight: 700; }
.vc-climate-best .vc-climate-regions span { background: #c8e8c0; }

/* ── Climate table ────────────────────────────────────── */
.vc-climate-table-wrap { overflow-x: auto; }
.vc-climate-table      { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
.vc-climate-table th,
.vc-climate-table td   { padding: clamp(8px,.95vw,13px) clamp(12px,1.4vw,18px); text-align: left; border-bottom: 1px solid #e8f0e5; }
.vc-climate-table th   { background: #1e5c1e; color: #fff; font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; }
.vc-climate-table tr:hover td { background: #f0f7ee; }
.vc-climate-table td   { color: #2a3e2a; }

/* ── Currency converter ───────────────────────────────── */
.vc-converter-wrap { display: flex; flex-direction: column; gap: clamp(16px,2vw,26px); }
.vc-conv-form      { background: #f5f9f3; border: 1.5px solid #d6e4d0; border-radius: 14px; padding: clamp(18px,2.2vw,28px); }
.vc-conv-row       { display: flex; gap: clamp(10px,1.2vw,16px); align-items: flex-end; flex-wrap: wrap; }
.vc-conv-field     { flex: 1; min-width: 130px; display: flex; flex-direction: column; gap: clamp(4px,.5vw,7px); }
.vc-conv-field label  { font-size: var(--fs-xs); font-weight: 700; color: #2a4a2a; text-transform: uppercase; letter-spacing: .05em; }
.vc-conv-field input,
.vc-conv-field select {
  padding: clamp(9px,1.05vw,14px) clamp(11px,1.25vw,16px);
  font-size: var(--fs-conv-inp);
  font-family: 'Lato', sans-serif;
  border: 1.5px solid #c8ddc0;
  border-radius: 8px;
  background: #fff;
  color: #1a2e1a;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .18s;
}
.vc-conv-field input:focus,
.vc-conv-field select:focus { border-color: #1e5c1e; }
.vc-conv-swap        { display: flex; align-items: flex-end; padding-bottom: 2px; }
.vc-conv-swap button { background: #1e5c1e; color: #fff; border: none; border-radius: 50%; width: clamp(34px,3.8vw,44px); height: clamp(34px,3.8vw,44px); font-size: clamp(15px,1.7vw,20px); cursor: pointer; transition: background .18s, transform .2s; display: flex; align-items: center; justify-content: center; }
.vc-conv-swap button:hover { background: #174e17; transform: rotate(180deg); }
.vc-conv-result  { display: flex; align-items: baseline; gap: clamp(10px,1.2vw,18px); margin-top: clamp(14px,1.6vw,22px); padding-top: clamp(14px,1.6vw,22px); border-top: 1px solid #d6e4d0; flex-wrap: wrap; }
.vc-conv-num     { font-family: 'Playfair Display', serif; font-size: var(--fs-conv-num); font-weight: 700; color: #1e5c1e; letter-spacing: -.02em; line-height: 1.1; }
.vc-conv-rate    { font-size: var(--fs-sm); color: #7a8e7a; }

/* ── Quick prices ─────────────────────────────────────── */
.vc-quick-prices { background: #fff; border: 1px solid #d6e4d0; border-radius: 12px; padding: clamp(14px,1.7vw,22px) clamp(16px,1.9vw,26px); }
.vc-qp-title     { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #8a9e8a; margin: 0 0 clamp(10px,1.2vw,16px); }
.vc-qp-grid      { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(160px,18vw,220px), 1fr)); gap: clamp(8px,1vw,13px); }
.vc-qp-item      { display: grid; grid-template-columns: clamp(20px,2.2vw,28px) 1fr; grid-template-rows: auto auto; column-gap: clamp(6px,.7vw,10px); row-gap: 2px; align-items: start; padding: clamp(7px,.85vw,11px) clamp(9px,1.05vw,14px); background: #fafcf9; border-radius: 8px; border: 1px solid #e8f0e5; }
.vc-qp-icon      { font-size: clamp(16px,1.8vw,22px); grid-row: 1 / 3; align-self: center; }
.vc-qp-name      { font-size: var(--fs-sm); font-weight: 700; color: #2a3e2a; }
.vc-qp-xaf       { font-size: var(--fs-xs); color: #5a7a5a; }
.vc-qp-usd       { grid-column: 2; font-size: var(--fs-xs); color: #1e5c1e; font-weight: 700; display: none; }
.vc-rate-disclaimer { font-size: var(--fs-xs); color: #8a9e8a; line-height: 1.55; margin: 0; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 640px) {
  .vc-tg-tabs            { gap: 5px; }
  .vc-tg-tab             { white-space: normal; text-align: center; }
  .vc-info-grid          { grid-template-columns: 1fr; }
  .vc-climate-grid       { grid-template-columns: 1fr 1fr; }
  .vc-conv-row           { flex-direction: column; }
  .vc-conv-swap          { justify-content: center; }
  .vc-tg-font-controls   { justify-content: center; }
}
@media (max-width: 400px) {
  .vc-climate-grid { grid-template-columns: 1fr; }
}