/* ============================================
   TANVEER RIZVI — PROFESSIONAL POLITICAL WEBSITE
   Mobile-first · Parliament-inspired · BNP colors
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:wght@300;400;500;600;700&family=Kalpurush&family=Hind+Siliguri:wght@400;500;600;700&display=swap');

:root{
  --g:#0A4D3C;        /* Deep green - BNP primary */
  --g2:#0D6B4F;       /* Lighter green */
  --g3:#063026;       /* Darkest green */
  --gold:#C8A951;     /* Gold accent */
  --gl:#E8D48B;       /* Light gold */
  --cream:#FAF6ED;    /* Cream background */
  --cream2:#F2ECDC;   /* Slightly darker cream */
  --t:#2D2D2D;        /* Text dark */
  --tl:#6B6B6B;       /* Text light */
  --tll:#9A9A9A;      /* Text lighter */
  --w:#FFFFFF;
  --red:#C0392B;      /* Bangladesh flag red */
  --border:#E8E0D0;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Source Sans 3',-apple-system,sans-serif;color:var(--t);background:var(--cream);overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.5}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}

/* ============================================
   LOGO — Parliament-inspired (Louis Kahn geometric)
   ============================================ */
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--w)}
.logo-mark{width:42px;height:42px;border-radius:6px;position:relative;flex-shrink:0;background:linear-gradient(135deg,rgba(200,169,81,.12),rgba(200,169,81,.04));border:1.5px solid var(--gold);display:grid;place-items:center;overflow:hidden}
.logo-mark svg{width:26px;height:26px}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-name{font-family:'Playfair Display',serif;font-size:1.15rem;font-weight:700;color:var(--w);letter-spacing:.3px}
.logo-name span{color:var(--gold)}
.logo-bn{font-family:'Kalpurush','Hind Siliguri',sans-serif;font-size:.7rem;color:var(--gold);margin-top:2px;letter-spacing:.5px}

/* ============================================
   NAVIGATION
   ============================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:10px 0;background:rgba(10,77,60,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:box-shadow .3s}
.nav.s{box-shadow:0 2px 20px rgba(0,0,0,.2)}
.nav-c{max-width:1200px;margin:0 auto;padding:0 16px;display:flex;justify-content:space-between;align-items:center}
.nav-l{display:none;gap:22px;list-style:none}
.nav-l a{color:rgba(255,255,255,.75);font-size:.78rem;font-weight:500;letter-spacing:.6px;text-transform:uppercase;transition:color .3s;padding:6px 2px}
.nav-l a:hover,.nav-l a.active{color:var(--gold)}
.ham{display:flex;flex-direction:column;gap:4px;padding:8px;width:36px;height:36px;justify-content:center;align-items:center}
.ham span{width:20px;height:2px;background:var(--w);border-radius:1px;transition:all .3s}

.mob{position:fixed;inset:0;background:linear-gradient(160deg,var(--g),var(--g3));z-index:1100;display:none;flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:20px}
.mob.open{display:flex}
.mob a{color:var(--w);font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:500;transition:color .3s}
.mob a:hover,.mob a.active{color:var(--gold)}
.mob-x{position:absolute;top:16px;right:20px;font-size:2rem;color:var(--w)}

@media(min-width:900px){.nav-l{display:flex}.ham{display:none}}

/* ============================================
   BUTTONS
   ============================================ */
.btn{display:inline-block;padding:13px 26px;border-radius:4px;font-size:.8rem;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;transition:all .3s}
.btn-g{background:var(--gold);color:var(--g)}
.btn-g:hover{background:var(--gl);transform:translateY(-1px);box-shadow:0 6px 16px rgba(200,169,81,.3)}
.btn-o{background:transparent;color:var(--w);border:1.5px solid rgba(255,255,255,.3)}
.btn-o:hover{border-color:var(--gold);color:var(--gold)}
.btn-sm{padding:10px 20px;font-size:.75rem}

/* ============================================
   SECTIONS & TYPOGRAPHY
   ============================================ */
section{padding:60px 16px;position:relative}
.sc{max-width:1000px;margin:0 auto}
.sl{font-size:.7rem;font-weight:600;letter-spacing:3.5px;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.st{font-family:'Playfair Display',serif;font-size:1.8rem;font-weight:700;color:var(--g);margin-bottom:12px;line-height:1.25}
.sline{width:42px;height:3px;background:var(--gold);margin-bottom:28px}
.prose{font-family:'Libre Baskerville',serif;font-size:.9rem;line-height:1.9;color:var(--t);margin-bottom:16px}
.prose-w{color:rgba(255,255,255,.72)}

@media(min-width:768px){
  section{padding:90px 30px}
  .st{font-size:2.2rem}
}
@media(min-width:1024px){
  .st{font-size:2.5rem}
}

/* ============================================
   FLAG STRIPE (Bangladesh green + red)
   ============================================ */
.flag{height:4px;background:linear-gradient(to right,var(--g) 38%,var(--red) 38% 43%,var(--w) 43% 45%,var(--g) 45%)}

/* ============================================
   HIGHLIGHT BOX
   ============================================ */
.hbox{background:rgba(200,169,81,.08);border-left:3px solid var(--gold);padding:16px 20px;margin:22px 0;border-radius:0 6px 6px 0}
.hbox p{font-family:'Libre Baskerville',serif;font-size:.88rem;line-height:1.8;margin:0}

/* ============================================
   PHOTO PLACEHOLDER (for future photos)
   ============================================ */
.ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:140px;background:linear-gradient(135deg,#e8e0d0,#d5cdc0);color:var(--tl);font-size:.78rem;text-align:center;padding:10px;border-radius:6px}

/* ============================================
   FOOTER
   ============================================ */
.footer{background:#041912;padding:35px 20px 25px;text-align:center;color:var(--w)}
.f-logo{font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:700;margin-bottom:4px}
.f-logo span{color:var(--gold)}
.f-bn{font-family:'Kalpurush','Hind Siliguri',sans-serif;font-size:.78rem;color:var(--gold);margin-bottom:12px}
.f-links{display:flex;justify-content:center;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.f-links a{color:rgba(255,255,255,.4);font-size:.7rem;transition:color .3s;text-transform:uppercase;letter-spacing:.5px}
.f-links a:hover{color:var(--gold)}
.f-soc{display:flex;justify-content:center;gap:12px;margin-bottom:14px}
.f-soc a{width:30px;height:30px;border:1px solid rgba(200,169,81,.3);border-radius:50%;display:grid;place-items:center;color:var(--gold);transition:all .3s}
.f-soc a:hover{background:rgba(200,169,81,.1);border-color:var(--gold)}
.f-soc svg{width:13px;height:13px;fill:currentColor}
.footer p{font-size:.7rem;color:rgba(255,255,255,.3)}

/* ============================================
   MOBILE-FIRST ANIMATIONS (Safe - no blank)
   ============================================ */
.fi{opacity:1;transform:none}
@media(min-width:768px) and (prefers-reduced-motion:no-preference){
  .fi{opacity:0;transform:translateY(14px);transition:opacity .45s ease-out,transform .45s ease-out}
  .fi.v{opacity:1;transform:none}
}