/* =========================================================
   MyDroneZimbabwe — shared additions (loaded AFTER each page's
   inline <style>, so the original look is preserved and this file
   only adds: working mobile nav, responsive fixes, form result
   panel, blog + article components.
   ========================================================= */

html{-webkit-text-size-adjust:100%; scroll-padding-top:84px;}
[id]{scroll-margin-top:84px;}
@keyframes mdz-pulse{0%,100%{opacity:1;} 50%{opacity:0.3;}}

a:focus-visible, button:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px; border-radius:3px;}

/* ---------- HEADER / NAV ---------- */
.nav{gap:16px;}
nav.links{gap:24px; font-size:0.88rem; align-items:center;}
nav.links a{padding:8px 0; white-space:nowrap;}
nav.links a.active, nav.links a[aria-current="page"]{color:var(--accent);}
nav.links a.nav-blog{color:var(--text); display:inline-flex; align-items:center; gap:7px;}
nav.links a.nav-blog::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--accent-2); animation:mdz-pulse 1.6s infinite;
}
.nav-cta{flex-shrink:0;}

.btn{display:inline-flex; align-items:center; justify-content:center; min-height:44px; text-align:center;}
button.btn{border:none; cursor:pointer;}
.btn-ghost{border:1px solid var(--line);}

.burger{
  display:none; width:44px; height:44px; padding:0;
  background:transparent; border:1px solid var(--line); border-radius:4px;
  cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{display:block; width:20px; height:2px; background:var(--text); transition:transform .2s, opacity .2s;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-menu{
  display:none; border-top:1px solid var(--line); background:var(--bg);
  max-height:calc(100vh - 72px); max-height:calc(100dvh - 72px); overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.mobile-menu.open{display:block;}
.mobile-menu-inner{max-width:1160px; margin:0 auto; padding:8px 24px 28px;}
.mobile-menu a.m-link{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:17px 2px; border-bottom:1px solid var(--line);
  font-family:'Space Grotesk', sans-serif; font-size:1.1rem; font-weight:500;
}
.mobile-menu a.m-link small{font-family:'JetBrains Mono', monospace; font-size:0.72rem; color:var(--muted); font-weight:400;}
.mobile-menu a.m-link.is-new small{color:var(--accent-2);}
.mobile-menu a[aria-current="page"]{color:var(--accent);}
.mobile-menu .m-cta{display:grid; gap:12px; margin-top:24px;}
body.menu-open{overflow:hidden;}

@media(max-width:1100px){
  nav.links{display:none;}
  .burger{display:flex;}
}
@media(min-width:1101px){ .mobile-menu{display:none !important;} }
@media(max-width:560px){
  .nav{padding:12px 20px;}
  .nav-cta .btn{display:none;}
  .logo img{height:34px;}
}

/* ---------- ANNOUNCEMENT BAR (homepage) ---------- */
.announce{
  display:block; text-align:center; padding:11px 16px; line-height:1.45;
  background:linear-gradient(90deg, rgba(255,106,26,0.18), rgba(76,255,159,0.08));
  border-bottom:1px solid var(--line);
  font-family:'JetBrains Mono', monospace; font-size:0.78rem; color:var(--text);
}
.announce i{
  display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:8px;
  background:var(--accent-2); animation:mdz-pulse 1.6s infinite; vertical-align:middle;
}
.announce b{color:var(--accent-2); font-weight:700;}
.announce .go{color:var(--accent); border-bottom:1px solid var(--accent); margin-left:6px; white-space:nowrap;}
.announce:hover .go{color:#ff8140;}

/* ---------- GENERAL RESPONSIVE FIXES ---------- */
.field input, .field select{min-height:46px;}
.card a.link{display:inline-block; padding:6px 0 4px;}
.foot-links a{padding:3px 0; display:inline-block;}

@media(max-width:900px){
  .req-photo{aspect-ratio:16/10;}
  .parks-photo img, .about-grid img{width:100%; height:auto;}
}
@media(max-width:768px){
  .field input, .field select, .field textarea{font-size:16px;}   /* stops iOS zoom-on-focus */
}
@media(max-width:600px){
  section{padding:56px 0;}
  .hero{padding:48px 0 36px;}
  .hero-grid{gap:36px;}
  .hero-ctas .btn{flex:1 1 100%;}
  .page-hero{padding:44px 0 32px;}
  .page-hero .btn{width:100%;}
  .ticket{padding:20px;}
  .ticket-head{flex-wrap:wrap; gap:6px;}
  .ticket-row{gap:14px;}
  .ticket-row b{text-align:right;}
  .card{padding:26px 22px;}
  .price-card{padding:30px 22px;}
  .price-amount{font-size:2.1rem;}
  .manifest-row{padding:15px 16px;}
  .timing-band{padding:28px 22px;}
  .timing-band .num{font-size:2rem;}
  .cta-band{padding:40px 22px;}
  .log{padding:22px 20px;}
  .log-head{flex-wrap:wrap; gap:6px;}
  .foot-bottom{flex-direction:column;}
}
@media(max-width:480px){
  .wrap{padding:0 20px;}
}
@media(hover:none){
  .card:hover, .price-card:hover, .post-card:hover, .post-feature:hover{transform:none;}
}
@media(prefers-reduced-motion:reduce){
  *, *::before, *::after{animation:none !important; transition:none !important;}
  html{scroll-behavior:auto;}
}

/* ---------- FORM RESULT PANEL ---------- */
.form-result{text-align:center;}
.form-result h3{font-size:1.35rem; margin-bottom:10px;}
.form-result p{color:var(--muted); font-size:0.94rem; margin:0 auto 24px; max-width:460px;}
.form-result .eyebrow{justify-content:center;}
.form-result-actions{display:grid; gap:12px; max-width:380px; margin:0 auto;}
.form-result .linkish{
  margin-top:22px; background:none; border:none; cursor:pointer; padding:8px;
  font-family:'JetBrains Mono', monospace; font-size:0.8rem; color:var(--muted);
  border-bottom:1px solid var(--line);
}
.form-result .linkish:hover{color:var(--accent);}
.form-panel[hidden]{display:none;}

/* ---------- BLOG ---------- */
.blog-hero{padding:72px 0 44px; position:relative;}
.blog-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 700px 400px at 80% -10%, rgba(255,106,26,0.14), transparent 60%),
    radial-gradient(ellipse 500px 300px at 0% 20%, rgba(76,255,159,0.06), transparent 60%);
}
.blog-hero .wrap{position:relative;}
.blog-hero h1{font-size:clamp(2.2rem, 5vw, 3.5rem); line-height:1.08; margin-bottom:18px; max-width:780px;}
.blog-hero h1 span{color:var(--accent);}
.blog-hero .lead{color:var(--muted); font-size:1.06rem; max-width:560px;}
.live-pill{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:24px;
  font-family:'JetBrains Mono', monospace; font-size:0.76rem; color:var(--accent-2);
  border:1px solid rgba(76,255,159,0.35); background:rgba(76,255,159,0.07);
  padding:8px 14px; border-radius:20px;
}
.live-pill i{width:7px; height:7px; border-radius:50%; background:var(--accent-2); animation:mdz-pulse 1.6s infinite;}
.live-pill:hover{border-color:var(--accent-2);}

.pill-tag{
  font-family:'JetBrains Mono', monospace; font-size:0.72rem; color:var(--accent);
  background:rgba(255,106,26,0.1); padding:4px 9px; border-radius:3px; display:inline-block;
}
.pill-tag.green{color:var(--accent-2); background:rgba(76,255,159,0.09);}

.post-feature{
  position:relative; display:grid; grid-template-columns:1.05fr 0.95fr;
  background:var(--panel); border:1px solid var(--accent); border-radius:10px; overflow:hidden;
  box-shadow:0 24px 70px -30px rgba(255,106,26,0.5);
  transition:transform .2s, box-shadow .2s;
}
.post-feature:hover{transform:translateY(-3px); box-shadow:0 30px 80px -26px rgba(255,106,26,0.65);}
.post-feature-img{position:relative; display:block; min-height:360px; background:var(--panel-2);}
.post-feature-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.new-pill{
  position:absolute; top:16px; left:16px; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  background:var(--accent); color:#0B0F10; font-family:'JetBrains Mono', monospace;
  font-size:0.72rem; font-weight:700; padding:6px 11px; border-radius:3px;
}
.new-pill i{width:6px; height:6px; border-radius:50%; background:#0B0F10; animation:mdz-pulse 1.4s infinite;}
.post-feature-body{padding:40px 38px; display:flex; flex-direction:column; justify-content:center;}
.post-feature-body h2{font-size:clamp(1.55rem, 2.6vw, 2.15rem); line-height:1.15; margin-bottom:14px;}
.post-feature-body p{color:var(--muted); margin-bottom:20px;}
.stretch::after{content:""; position:absolute; inset:0; z-index:1;}
.post-meta{
  display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-bottom:16px;
  font-family:'JetBrains Mono', monospace; font-size:0.74rem; color:var(--muted);
}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px;}
.chip{
  font-family:'JetBrains Mono', monospace; font-size:0.74rem; color:var(--text);
  border:1px solid var(--line); border-radius:20px; padding:5px 12px;
}
.chip.big{border-color:rgba(255,106,26,0.5); color:var(--accent);}
.chip.more{color:var(--accent-2); border-color:rgba(76,255,159,0.35);}
a.chip:hover{border-color:var(--accent); color:var(--accent);}
.read-more{
  align-self:flex-start; font-family:'JetBrains Mono', monospace; font-size:0.84rem;
  border-bottom:1px solid var(--accent); padding-bottom:2px; display:inline-block;
}
.post-feature:hover .read-more, .post-card:hover .read-more{color:var(--accent);}

.post-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:24px;}
.post-card{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  transition:border-color .2s, transform .2s;
}
.post-card:hover{border-color:var(--accent); transform:translateY(-3px);}
.post-card img{width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--panel-2);}
.post-card-body{padding:24px 24px 28px; display:flex; flex-direction:column; flex-grow:1;}
.post-card h3{font-size:1.2rem; line-height:1.25; margin-bottom:10px;}
.post-card p{color:var(--muted); font-size:0.94rem; margin-bottom:20px;}
.post-card .read-more{margin-top:auto;}
.post-card.ask{border-style:dashed; background:transparent; justify-content:center;}
.post-card.ask .post-card-body{justify-content:center;}

@media(max-width:860px){
  .post-feature{grid-template-columns:1fr;}
  .post-feature-img{min-height:0; aspect-ratio:16/10;}
  .post-feature-body{padding:26px 22px 30px;}
  .blog-hero{padding:48px 0 32px;}
}

/* ---------- ARTICLE ---------- */
.article{padding:48px 0 24px;}
.article-wrap{max-width:760px; margin:0 auto; padding:0 24px;}
.crumb{
  display:inline-flex; gap:8px; margin-bottom:26px;
  font-family:'JetBrains Mono', monospace; font-size:0.78rem; color:var(--muted);
}
.crumb a{padding:6px 0;}
.crumb a:hover{color:var(--accent);}
.article h1{font-size:clamp(2rem, 4.6vw, 3rem); line-height:1.1; margin:6px 0 20px;}
.article .lede{font-size:1.12rem; color:var(--muted); margin-bottom:10px;}
.article h2{font-size:clamp(1.4rem, 2.6vw, 1.8rem); line-height:1.2; margin:2.3em 0 0.6em;}
.article h3{font-size:1.15rem; margin:1.6em 0 0.4em;}
.article p{color:#B4BDB8; margin-bottom:1.1em; line-height:1.72;}
.article p a, .article li a, .callout a{color:var(--text); border-bottom:1px solid var(--accent);}
.article p a:hover, .article li a:hover, .callout a:hover{color:var(--accent);}
.article strong{color:var(--text); font-weight:600;}
.article ul{list-style:none; margin:0 0 1.2em;}
.article ul li{position:relative; padding:7px 0 7px 22px; color:#B4BDB8; line-height:1.65;}
.article ul li::before{content:"▲"; position:absolute; left:0; top:11px; font-size:0.55rem; color:var(--accent);}
.callout{
  background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--accent-2);
  border-radius:6px; padding:22px 24px; margin:2em 0;
}
.callout.warn{border-left-color:var(--accent);}
.callout p{margin-bottom:0.7em;}
.callout p:last-child{margin-bottom:0;}
.callout .callout-title{font-family:'JetBrains Mono', monospace; font-size:0.78rem; color:var(--accent-2); margin-bottom:10px;}
.callout.warn .callout-title{color:var(--accent);}
.article-end{padding:8px 0 72px;}
.related{margin-top:56px;}

/* animal entries */
.animal{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:8px; padding:28px 26px 26px; margin:22px 0;
}
.animal.big5{border-left:3px solid var(--accent);}
.animal-head{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-bottom:14px;}
.animal-num{font-family:'JetBrains Mono', monospace; color:var(--accent-2); font-size:0.9rem;}
.article .animal h3{font-size:1.5rem; margin:0;}
.animal .specs{margin:18px 0 16px; border-top:1px dashed var(--line);}
.spec{
  display:flex; justify-content:space-between; gap:20px; padding:10px 0;
  border-bottom:1px dashed var(--line);
  font-family:'JetBrains Mono', monospace; font-size:0.8rem; color:var(--muted);
}
.spec b{color:var(--text); font-weight:500; text-align:right;}
.animal p{margin-bottom:0.9em;}
.drone-note{
  margin-top:16px; padding-left:14px; border-left:2px solid var(--accent);
  font-size:0.92rem; color:var(--muted); line-height:1.6;
}
.drone-note b{font-family:'JetBrains Mono', monospace; font-size:0.74rem; color:var(--accent); font-weight:500; margin-right:6px;}
@media(max-width:520px){
  .animal{padding:24px 20px 22px;}
  .spec{flex-direction:column; gap:3px;}
  .spec b{text-align:left;}
  .article-wrap{padding:0 20px;}
}