/* === Zimbabwe eVisa Guide — style.css === */
:root {
  --green: #006400;
  --gold: #FFD200;
  --red: #DC143C;
  --dark: #1a1a2e;
  --mid: #2d4a2d;
  --light-bg: #f5f7f5;
  --card-bg: #ffffff;
  --text: #1a1a2e;
  --text-light: #4a5568;
  --border: #e2e8f0;
  --radius: 10px;
}

/* === LAYOUT === */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.main-content { padding: 40px 0; }

/* === NAV === */
.main-nav { background: var(--green); min-height: 50px; position: relative; z-index: 100; }
.nav-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; }
.nav-list { display: flex; list-style: none; gap: 0; width: 100%; }
.nav-list > li > a,
.nav-list > li > button.sub-toggle {
  display: block; padding: 14px 18px; color: #fff; text-decoration: none;
  font-size: 15px; font-weight: 600; background: none; border: none; cursor: pointer;
  white-space: nowrap; transition: background 0.2s, color 0.2s;
}
.nav-list > li > a:hover,
.nav-list > li > button.sub-toggle:hover,
.nav-list > li.has-sub:hover > button { background: var(--mid); color: var(--gold); }
.nav-toggle { display: none; background: none; border: none; color: #fff; font-size: 18px; font-weight: 700; padding: 14px 18px; cursor: pointer; }

/* Submenu */
.has-sub { position: relative; }
.submenu { display: none; position: absolute; top: 100%; left: 0; background: #fff; min-width: 220px; border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.15); z-index: 200; list-style: none; border-top: 3px solid var(--gold); }
.submenu li a { display: block; padding: 12px 20px; color: var(--dark); text-decoration: none; font-size: 14px; border-bottom: 1px solid var(--border); transition: background 0.15s; }
.submenu li:last-child a { border-bottom: none; }
.submenu li a:hover { background: var(--light-bg); color: var(--green); }
.has-sub:hover .submenu,
.has-sub.open .submenu { display: block; }

/* Mobile nav */
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-list { display: none; flex-direction: column; width: 100%; background: var(--green); position: absolute; top: 50px; left: 0; right: 0; }
  .nav-list.open { display: flex; }
  .submenu { position: static; box-shadow: none; border-radius: 0; border-top: none; background: var(--mid); display: none; }
  .has-sub.open .submenu { display: block; }
  .submenu li a { color: #fff; border-color: rgba(255,255,255,.1); }
  .sub-toggle { width: 100%; text-align: left; }
}

/* === BREADCRUMBS === */
.breadcrumbs { padding: 0; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0; font-size: 13px; margin-bottom: 14px; }
.breadcrumbs li { display: flex; align-items: center; }
.breadcrumbs li + li::before { content: '›'; margin: 0 8px; color: rgba(255,255,255,.5); font-size: 14px; }
.breadcrumbs a { color: var(--gold); text-decoration: none; font-weight: 500; opacity: .9; transition: opacity .15s; }
.breadcrumbs a:hover { opacity: 1; text-decoration: underline; }
.breadcrumbs li:last-child span { color: rgba(255,255,255,.8); }

/* === HERO === */
.hero { width: 100%; min-height: 450px; max-height: 500px; background: url('../images/hero.jpg') center/cover no-repeat; display: flex; align-items: center; justify-content: center; position: relative; }
@media(max-width:768px){.hero{min-height:500px;max-height:none}}
.hero::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.55)}
.hero-content{position:relative;z-index:1;min-width:min(1000px,95%);text-align:center;padding:50px 20px;color:#fff}
.hero-content h1{font-size:clamp(1.8rem,4vw,3rem);font-weight:700;line-height:1.2;margin-bottom:16px;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.hero-content p{font-size:clamp(1rem,2vw,1.2rem);color:var(--gold);font-weight:600;margin-bottom:24px}
.btn{display:inline-block;padding:14px 32px;border-radius:50px;font-weight:700;text-decoration:none;font-size:16px;transition:transform 0.2s,box-shadow 0.2s;cursor:pointer;border:none}
.btn-primary{background:var(--gold);color:var(--dark)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,210,0,.4)}
.btn-outline{background:transparent;color:#fff;border:2px solid #fff}
.btn-outline:hover{background:#fff;color:var(--dark)}

/* === SECTIONS === */
.section{padding:60px 0}
.section-alt{background:var(--light-bg)}
.section-dark{background:var(--green);color:#fff}
.section-dark h2,.section-dark h3{color:var(--gold)}
.section-title{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700;color:var(--green);margin-bottom:12px;line-height:1.3}
.section-dark .section-title{color:var(--gold)}
.section-sub{font-size:1rem;color:var(--text-light);margin-bottom:40px}
.text-center{text-align:center}

/* === GRID COLUMNS === */
.col-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px}
.col-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px}
.col-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}

/* === CARDS === */
.card{background:var(--card-bg);border-radius:var(--radius);padding:28px 24px;box-shadow:0 2px 12px rgba(0,0,0,.07);border:1px solid var(--border);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.card-icon{font-size:2.5rem;margin-bottom:16px}
.card h3{font-size:1.15rem;font-weight:600;color:var(--green);margin-bottom:10px}
.card p{font-size:15px;color:var(--text-light);line-height:1.6}
.card a{color:var(--green);text-decoration:none;font-weight:600}
.card a:hover{text-decoration:underline}

/* === TABLE === */
.table-wrap{overflow-x:auto;margin:20px 0}
table{width:100%;border-collapse:collapse;font-size:15px}
thead{background:var(--green);color:#fff}
th{padding:12px 16px;text-align:left;font-weight:600}
td{padding:12px 16px;border-bottom:1px solid var(--border)}
tr:nth-child(even) td{background:var(--light-bg)}
tr:hover td{background:#e8f5e9}

/* === ACCORDION / FAQ — Premium === */
.accordion{margin:24px 0}
.accordion details{
  border:none;
  border-radius:12px;
  margin-bottom:12px;
  background:#fff;
  box-shadow:0 2px 12px rgba(0,100,0,.08);
  transition:box-shadow .25s;
}
.accordion details:hover{box-shadow:0 6px 20px rgba(0,100,0,.15)}
.accordion details[open]{box-shadow:0 6px 24px rgba(0,100,0,.18)}
.accordion summary{
  padding:20px 24px;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#0f172a;
  background:linear-gradient(to right,#f0faf0,#fff);
  border-left:5px solid var(--green);
  border-radius:12px;
  transition:background .2s,border-color .2s;
}
.accordion details[open] summary{border-radius:12px 12px 0 0}
.accordion summary::-webkit-details-marker{display:none}
.accordion details[open] summary{
  color:var(--green);
  background:linear-gradient(to right,#dcf5dc,#f0faf0);
  border-left-color:var(--gold);
}
.accordion summary::after{
  content:'+';
  color:var(--green);
  font-size:1.6rem;
  font-weight:300;
  line-height:1;
  flex-shrink:0;
  margin-left:16px;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#e8f5e9;
  border-radius:50%;
  transition:transform .3s,background .2s,color .2s;
}
.accordion details[open] summary::after{
  transform:rotate(45deg);
  background:var(--gold);
  color:#0f172a;
}
.accordion .acc-body{
  padding:20px 24px 24px;
  color:var(--text);
  line-height:1.8;
  border-top:1px dashed #d1fae5;
  background:#fff;
  font-size:0.97rem;
}
.accordion .acc-body p{color:var(--text);margin-bottom:10px}
.accordion .acc-body a{color:var(--green);font-weight:600}

/* === ALERT / CALLOUT === */
.callout{border-left:4px solid var(--green);background:#e8f5e9;padding:16px 20px;border-radius:0 var(--radius) var(--radius) 0;margin:20px 0;color:#1a1a1a}
.callout p,.callout a{color:#1a1a1a}
.callout-warn{border-color:#b8960c;background:#fef9c3;color:#1a1a1a}
.callout-warn p,.callout-warn a{color:#1a1a1a}
.callout-red{border-color:var(--red);background:#fff5f5;color:#1a1a1a}
.callout-red p,.callout-red a{color:#1a1a1a}
.callout strong{display:block;margin-bottom:6px;color:#0a0a0a;font-weight:700}

/* === CONTENT STYLES === */
h1{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;color:var(--dark);line-height:1.2;margin-bottom:20px}
h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:600;color:var(--green);margin:40px 0 16px;line-height:1.3}
h3{font-size:1.2rem;font-weight:500;color:var(--dark);margin:28px 0 12px}
h4{font-size:1.05rem;font-weight:400;color:var(--dark);margin:20px 0 10px}
p{margin-bottom:16px;line-height:1.75;color:var(--text)}
ul.list-styled{list-style:none}
ul:not(.list-styled):not(.nav-list):not(.submenu):not(.footer-col ul){margin:0 0 16px 24px}
ul:not(.list-styled) li,ol li{margin-bottom:8px;line-height:1.6}
strong{font-weight:700}

/* === STEP LIST === */
.steps{counter-reset:step;list-style:none;margin:0}
.steps li{counter-increment:step;display:flex;gap:20px;margin-bottom:28px;align-items:flex-start}
.steps li::before{content:counter(step);background:var(--green);color:#fff;min-width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex-shrink:0}

/* === TWO COLUMN CONTENT === */
.content-with-sidebar{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}
.content-with-sidebar > *{min-width:0}
.content-with-sidebar > *:nth-child(2){grid-column:2;grid-row:1;align-self:start;position:static}
@media(max-width:900px){.content-with-sidebar{grid-template-columns:1fr}.content-with-sidebar > *:nth-child(2){grid-column:1;grid-row:auto}}
@media(max-width:900px){.content-with-sidebar{grid-template-columns:1fr}}
.sidebar-box{background:var(--light-bg);border-radius:var(--radius);padding:24px;border:1px solid var(--border);position:static}
.sidebar-box h3{color:var(--green);font-size:1.1rem;margin-bottom:16px}
.sidebar-box ul{list-style:none}
.sidebar-box ul li{padding:8px 0;border-bottom:1px solid var(--border)}
.sidebar-box ul li:last-child{border:none}
.sidebar-box a{color:var(--green);text-decoration:none;font-size:14px}

/* === FOOTER === */
.site-footer{margin-top:0}
.legal-disclaimer{background:#4d7b15;padding:20px;padding-bottom:50px;text-align:center}
.legal-disclaimer p{color:#fff;font-size:13px;line-height:1.6;max-width:1200px;margin:0 auto}
.footer-disclaimer{background:#1a1a2e;padding:24px 0;padding-bottom:50px}
.footer-disclaimer p{color:#fff;font-size:13px;line-height:1.6;max-width:1200px;margin:0 auto;padding:0 20px}
.footer-main{background:#006400;color:#fff;padding:48px 0}
.footer-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:32px}
@media(max-width:900px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}
.footer-col h4{color:var(--gold);font-size:1rem;font-weight:700;margin-bottom:16px}
.footer-col p,.footer-col a{color:rgba(255,255,255,.85);font-size:14px;text-decoration:none;line-height:1.8}
.footer-col a:hover{color:var(--gold)}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:6px}
.cookie-notice{margin-top:16px;font-size:13px;color:rgba(255,255,255,.7)}
.footer-bottom{background:#004d00;color:rgba(255,255,255,.7);padding:16px 0;text-align:center;font-size:13px}
.footer-bottom a{color:var(--gold);text-decoration:none}

/* === PARALAX BANNER === */
.parallax-banner{background-attachment:fixed;background:var(--mid);color:#fff;padding:60px 20px;text-align:center}
.parallax-banner h2{color:var(--gold);font-size:2rem;margin-bottom:12px}
.parallax-banner p{font-size:1.1rem;color:#fff;opacity:1}
.parallax-banner strong{color:#fff}

/* === FLAG BADGE === */
.flag-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);font-size:15px}
.flag-item:last-child{border:none}

/* === UTILITY === */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mb-20{margin-bottom:20px}.mb-40{margin-bottom:40px}
.text-green{color:var(--green)}.text-gold{color:#b8960c}.text-red{color:var(--red)}
.badge{display:inline-block;padding:3px 12px;border-radius:20px;font-size:13px;font-weight:700}
.badge-green{background:#dcfce7;color:#166534}.badge-yellow{background:#fef9c3;color:#854d0e}.badge-red{background:#fee2e2;color:#991b1b}

/* Responsive */
@media(max-width:768px){
  .col-2,.col-3,.col-4{grid-template-columns:1fr}
  .section{padding:40px 0}
  h2{margin:28px 0 12px}
}