@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,600&display=swap');

:root {
  --color-earth: #2d1b0e;
  --color-forest: #1a3a2a;
  --color-savanna: #c8a45a;
  --color-sand: #e8d5a3;
  --color-cream: #faf6ed;
  --color-accent: #d46b2a;
  --color-map: #4a7c59;
  --color-water: #2c5f8a;
  --color-text: #1e1409;
  --color-muted: #6b5a3e;
  --color-border: #d4c4a0;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Source Serif 4', Georgia, serif;
  --shadow-soft: 0 4px 24px rgba(45,27,14,0.12);
  --shadow-card: 0 2px 12px rgba(45,27,14,0.10);
  --radius: 4px;
  --max-width: 1280px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-body);background:var(--color-cream);color:var(--color-text);line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-map);text-decoration:none;transition:color .2s}
a:hover{color:var(--color-accent)}
a:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:2px}

.site-header{background:var(--color-earth);color:var(--color-sand);position:sticky;top:0;z-index:1000;border-bottom:3px solid var(--color-savanna);box-shadow:0 2px 20px rgba(0,0,0,.3)}
.header-inner{max-width:var(--max-width);margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:64px}
.site-logo{font-family:var(--font-display);font-size:1.45rem;font-weight:900;color:var(--color-savanna);letter-spacing:-.01em;display:flex;align-items:center;gap:.5rem}
.site-logo span{color:var(--color-cream);font-weight:400}
.site-nav{display:flex;gap:.25rem}
.site-nav a{color:var(--color-sand);font-size:.875rem;padding:.4rem .8rem;border-radius:var(--radius);font-weight:600;letter-spacing:.02em;transition:background .2s,color .2s}
.site-nav a:hover{background:rgba(200,164,90,.2);color:var(--color-savanna)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:.5rem;color:var(--color-sand)}

.breadcrumb{background:var(--color-forest);padding:.6rem 0;border-bottom:1px solid rgba(200,164,90,.2)}
.breadcrumb-inner{max-width:var(--max-width);margin:0 auto;padding:0 1.5rem}
.breadcrumb ol{display:flex;align-items:center;gap:.5rem;list-style:none;font-size:.8rem;color:var(--color-sand);flex-wrap:wrap}
.breadcrumb li+li::before{content:"›";color:var(--color-savanna);font-size:1rem}
.breadcrumb a{color:var(--color-sand);opacity:.8}
.breadcrumb a:hover{opacity:1;color:var(--color-savanna)}
.breadcrumb [aria-current]{color:var(--color-savanna);font-weight:600}

.hero{background:linear-gradient(135deg,var(--color-earth) 0%,var(--color-forest) 60%,#0d2218 100%);color:var(--color-cream);padding:5rem 1.5rem 4rem;text-align:center;position:relative;overflow:hidden}
.hero-inner{max-width:800px;margin:0 auto;position:relative}
.hero-eyebrow{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--color-savanna);margin-bottom:1rem;font-weight:600}
.hero h1{font-family:var(--font-display);font-size:clamp(2.5rem,6vw,4.5rem);font-weight:900;line-height:1.05;margin-bottom:1.25rem;color:var(--color-cream)}
.hero h1 em{color:var(--color-savanna);font-style:normal}
.hero-lead{font-size:1.125rem;color:rgba(232,213,163,.85);max-width:560px;margin:0 auto 2.5rem;line-height:1.7}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 2rem;border-radius:var(--radius);font-weight:600;font-size:.9rem;letter-spacing:.04em;text-transform:uppercase;transition:all .2s;cursor:pointer;border:none;font-family:var(--font-body)}
.btn-primary{background:var(--color-savanna);color:var(--color-earth)}
.btn-primary:hover{background:#d4b06a;color:var(--color-earth);transform:translateY(-1px);box-shadow:0 6px 20px rgba(200,164,90,.4)}
.btn-secondary{background:transparent;color:var(--color-sand);border:1.5px solid rgba(200,164,90,.5)}
.btn-secondary:hover{border-color:var(--color-savanna);color:var(--color-savanna)}
.hero-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

.country-hero{background:linear-gradient(135deg,var(--color-earth) 0%,var(--color-forest) 100%);color:var(--color-cream);padding:2.5rem 1.5rem 2rem;border-bottom:3px solid var(--color-savanna)}
.country-hero-inner{max-width:var(--max-width);margin:0 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.country-hero-text h1{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.5rem);font-weight:900;color:var(--color-cream);line-height:1.1;margin-bottom:.5rem}
.country-hero-text .tagline{color:var(--color-savanna);font-size:1rem;letter-spacing:.04em}
.country-meta{display:flex;gap:1.5rem;flex-wrap:wrap}
.meta-item{text-align:center;padding:.75rem 1rem;background:rgba(255,255,255,.07);border-radius:var(--radius);border:1px solid rgba(200,164,90,.2);min-width:100px}
.meta-value{font-size:1.25rem;font-weight:700;color:var(--color-savanna);font-family:var(--font-display);display:block}
.meta-label{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(232,213,163,.6);display:block;margin-top:.15rem}

.map-section{background:var(--color-earth);position:relative}
#map{width:100%;height:500px;z-index:1}
@media(min-width:768px){#map{height:600px}}
@media(min-width:1200px){#map{height:680px}}

.page-body{max-width:var(--max-width);margin:0 auto;padding:3rem 1.5rem;display:grid;grid-template-columns:1fr 320px;gap:3rem;align-items:start}
@media(max-width:1024px){.page-body{grid-template-columns:1fr}}

.article-content h2{font-family:var(--font-display);font-size:1.65rem;font-weight:700;color:var(--color-earth);margin:2.5rem 0 1rem;padding-bottom:.5rem;border-bottom:2px solid var(--color-border);position:relative}
.article-content h2::before{content:'';position:absolute;bottom:-2px;left:0;width:48px;height:2px;background:var(--color-savanna)}
.article-content h3{font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--color-forest);margin:1.75rem 0 .6rem}
.article-content p{margin-bottom:1.25rem;color:#2a1f10;font-size:1.025rem}
.article-content ul,.article-content ol{margin:0 0 1.25rem 1.5rem}
.article-content li{margin-bottom:.4rem}
.article-content .intro-paragraph{font-size:1.15rem;color:var(--color-forest);line-height:1.8;border-left:4px solid var(--color-savanna);padding-left:1.25rem;margin-bottom:2rem}

.info-table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.95rem}
.info-table td{padding:.6rem .9rem;border-bottom:1px solid var(--color-border);vertical-align:top}
.info-table td:first-child{font-weight:600;color:var(--color-muted);white-space:nowrap;width:40%;font-size:.85rem;letter-spacing:.03em;text-transform:uppercase}
.info-table tr:last-child td{border-bottom:none}
.info-table tr:nth-child(even) td{background:rgba(200,164,90,.06)}

.sidebar{position:sticky;top:80px}
.sidebar-card{background:#fff;border-radius:var(--radius);border:1px solid var(--color-border);overflow:hidden;margin-bottom:1.5rem;box-shadow:var(--shadow-card)}
.sidebar-card-header{background:var(--color-forest);color:var(--color-sand);padding:.75rem 1.1rem;font-family:var(--font-display);font-weight:700;font-size:.95rem;letter-spacing:.03em;display:flex;align-items:center;gap:.5rem}
.sidebar-card-body{padding:1rem 1.1rem}
.neighbor-list{list-style:none}
.neighbor-list li{border-bottom:1px solid var(--color-border)}
.neighbor-list li:last-child{border-bottom:none}
.neighbor-list a{display:flex;align-items:center;gap:.5rem;padding:.5rem 0;font-size:.9rem;color:var(--color-text);font-weight:500;transition:color .15s}
.neighbor-list a:hover{color:var(--color-map)}
.neighbor-list a::before{content:"→";color:var(--color-savanna);font-size:.8rem}
.quick-facts p{font-size:.875rem;margin-bottom:.6rem;color:var(--color-muted)}
.quick-facts p strong{color:var(--color-text)}

.faq-section{margin-top:3rem}
.faq-section>h2{font-family:var(--font-display);font-size:1.65rem;font-weight:700;color:var(--color-earth);margin-bottom:1.5rem;padding-bottom:.5rem;border-bottom:2px solid var(--color-border);position:relative}
.faq-section>h2::before{content:'';position:absolute;bottom:-2px;left:0;width:48px;height:2px;background:var(--color-savanna)}
.faq-item{border:1px solid var(--color-border);border-radius:var(--radius);margin-bottom:.75rem;overflow:hidden;background:#fff}
.faq-question{width:100%;background:none;border:none;padding:1rem 1.25rem;text-align:left;font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--color-forest);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;transition:background .15s}
.faq-question:hover{background:rgba(74,124,89,.05)}
.faq-question[aria-expanded="true"]{background:rgba(74,124,89,.07);color:var(--color-map)}
.faq-icon{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--color-savanna);color:var(--color-earth);display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;transition:transform .25s;line-height:1}
.faq-question[aria-expanded="true"] .faq-icon{transform:rotate(45deg)}
.faq-answer{padding:0 1.25rem;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s}
.faq-answer.open{padding:0 1.25rem 1rem;max-height:600px}
.faq-answer p{font-size:.95rem;color:#2a1f10;margin:0}

.section-header{text-align:center;margin-bottom:2.5rem}
.section-header h2{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;color:var(--color-earth);margin-bottom:.5rem}
.section-header p{color:var(--color-muted);font-size:1.05rem;max-width:560px;margin:0 auto}
.regions-section{padding:4rem 1.5rem;max-width:var(--max-width);margin:0 auto}
.region-block{margin-bottom:3rem}
.region-title{font-family:var(--font-display);font-size:1.35rem;font-weight:700;color:var(--color-forest);margin-bottom:1rem;display:flex;align-items:center;gap:.75rem}
.region-title::after{content:'';flex:1;height:1px;background:var(--color-border)}
.countries-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem}
.country-card{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);font-size:.875rem;font-weight:600;color:var(--color-text);transition:all .2s;box-shadow:var(--shadow-card)}
.country-card:hover{border-color:var(--color-map);background:rgba(74,124,89,.05);color:var(--color-map);transform:translateY(-2px);box-shadow:0 6px 20px rgba(26,58,42,.12)}
.country-card .flag{font-size:1.2rem}

.related-section{background:var(--color-forest);padding:3rem 1.5rem}
.related-inner{max-width:var(--max-width);margin:0 auto}
.related-title{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--color-sand);margin-bottom:1.25rem;display:flex;align-items:center;gap:.75rem}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}
.related-card{display:flex;align-items:center;gap:.5rem;padding:.65rem .9rem;background:rgba(255,255,255,.08);border:1px solid rgba(200,164,90,.2);border-radius:var(--radius);font-size:.85rem;font-weight:600;color:var(--color-sand);transition:all .2s}
.related-card:hover{background:rgba(200,164,90,.15);border-color:var(--color-savanna);color:var(--color-savanna)}

.page-hero{background:linear-gradient(135deg,var(--color-earth) 0%,var(--color-forest) 100%);color:var(--color-cream);padding:3.5rem 1.5rem;text-align:center}
.page-hero h1{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.5rem);font-weight:900;margin-bottom:.75rem;color:var(--color-cream)}
.page-hero p{color:rgba(232,213,163,.85);font-size:1.1rem;max-width:600px;margin:0 auto}

.site-footer{background:var(--color-earth);color:var(--color-sand);padding:3rem 1.5rem 1.5rem;border-top:3px solid var(--color-savanna)}
.footer-inner{max-width:var(--max-width);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2.5rem;margin-bottom:2.5rem}
.footer-brand .site-logo{font-size:1.3rem;margin-bottom:.75rem}
.footer-brand p{font-size:.875rem;color:rgba(232,213,163,.6);line-height:1.7}
.footer-col h3{font-family:var(--font-display);font-size:.95rem;font-weight:700;color:var(--color-savanna);margin-bottom:.75rem;letter-spacing:.04em;text-transform:uppercase}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:.4rem}
.footer-col a{color:rgba(232,213,163,.7);font-size:.875rem;transition:color .2s}
.footer-col a:hover{color:var(--color-savanna)}
.footer-bottom{border-top:1px solid rgba(200,164,90,.2);padding-top:1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;font-size:.8rem;color:rgba(232,213,163,.4)}
.footer-bottom a{color:rgba(232,213,163,.5)}
.footer-bottom a:hover{color:var(--color-savanna)}

.leaflet-container{font-family:var(--font-body)}
.leaflet-popup-content-wrapper{border-radius:var(--radius)!important;box-shadow:var(--shadow-soft)!important}

#africa-map{width:100%;height:70vh;min-height:500px}

.content-section{padding:4rem 1.5rem}
.content-section.alt{background:rgba(200,164,90,.07)}
.content-inner{max-width:var(--max-width);margin:0 auto}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

@media(max-width:768px){
  .site-nav{display:none;flex-direction:column;position:absolute;top:64px;left:0;right:0;background:var(--color-earth);padding:1rem;border-bottom:2px solid var(--color-savanna);gap:.25rem}
  .site-nav.open{display:flex}
  .site-nav a{padding:.6rem 1rem}
  .nav-toggle{display:block}
  .page-body{padding:2rem 1rem;gap:2rem;grid-template-columns:1fr}
  .country-hero{padding:1.75rem 1rem 1.5rem}
  .country-hero-inner{flex-direction:column;align-items:flex-start}
  #map{height:380px}
  .hero{padding:3rem 1rem 2.5rem}
  .regions-section{padding:2rem 1rem}
  .countries-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .related-section{padding:2rem 1rem}
}
@media(max-width:480px){
  .country-meta{gap:.75rem}
  .meta-item{min-width:80px;padding:.6rem .75rem}
  .countries-grid{grid-template-columns:repeat(2,1fr)}
}