/* ════════════════════════════════════════════════════════════════
   Sastho Bondhu — Clean White + Orange Accent Theme
   v3.21 — Per OGSB design reference
   This file loads AFTER all inline styles and overrides them.
   ════════════════════════════════════════════════════════════════ */

/* ────── Font: Noto Sans Bengali (matches OGSB reference image) ────── */
/* Font is loaded via <link> in HTML head — see index.html and sub-pages */

body,
button,
input,
textarea,
select,
.topnav,
.welcome-modal,
.hero,
.stat-card,
.service-card,
.how-row,
.info-card,
.method-card,
.chat-window,
.chat-message,
.emergency-box,
footer {
  font-family: 'Noto Sans Bengali', 'Hind Siliguri', sans-serif !important;
}

/* All Bengali headings use Noto Sans Bengali, NOT serif/Playfair/Kalpurush */
h1, h2, h3, h4, h5, h6,
.section-title,
.hero h1,
.hero h2,
.hero-title,
.page-hero h1,
.page-hero h2,
.welcome-modal-header h2,
.service-card h3,
.info-card h2,
.info-card h3,
.method-card h3,
.topnav-brand,
.stat-num {
  font-family: 'Noto Sans Bengali', 'Hind Siliguri', sans-serif !important;
}

/* Very bold display weight for hero / main headings (matches reference image) */
.hero h1,
.hero-title,
.page-hero h1,
.section-title {
  font-weight: 900 !important;
  letter-spacing: -0.5px;
  line-height: 1.15;
}

/* Sub-headings (h2/h3 in cards) — Bold */
.service-card h3,
.info-card h2,
.welcome-modal-header h2,
.method-card h3 {
  font-weight: 700 !important;
}

/* Body / paragraphs — Regular */
p, li, span, label, td, th {
  font-family: 'Noto Sans Bengali', 'Hind Siliguri', sans-serif !important;
  font-weight: 400;
}

/* Stat numbers — Heavy for emphasis */
.stat-num {
  font-weight: 900 !important;
}

/* Eyebrow / small uppercase labels above hero — Medium */
.hero-eyebrow,
.eyebrow,
.section-eyebrow {
  font-weight: 500 !important;
}

:root {
  /* Primary orange (matches reference image) */
  --orange: #F26B1D;
  --orange-dark: #D45616;
  --orange-light: #FF8A47;
  --orange-soft: #FFD8C2;
  --orange-pale: #FFF0E5;

  /* Override existing variables to map to new palette */
  --plum: #F26B1D;
  --plum-light: #FF8A47;
  --plum-dark: #D45616;
  --rose: #F26B1D;
  --rose-light: #FFD8C2;
  --teal: #1A1A1A;
  --teal-light: #555555;
  --cream: #FFFFFF;
  --warm: #F7F7F7;
  --sand: #EAEAEA;
  --text: #1A1A1A;
  --muted: #6B6B6B;
  --white: #FFFFFF;
  --gold: #F26B1D;
}

/* Body background — clean white */
body {
  background: #FFFFFF !important;
}

/* ────── Top Navigation ────── */
.topnav,
.top-nav,
header.topnav {
  background: #FFFFFF !important;
  border-bottom: 1px solid #EEEEEE !important;
  box-shadow: none !important;
}

.topnav-links a {
  color: #1A1A1A !important;
}

.topnav-links a:hover {
  color: var(--orange) !important;
}

/* Phone/CTA button in nav */
.topnav-links a.topnav-cta {
  background: var(--orange) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

.topnav-links a.topnav-cta:hover {
  background: var(--orange-dark) !important;
}

/* ────── Welcome Modal ────── */
.welcome-modal-header h2 {
  color: #1A1A1A !important;
}

.welcome-option {
  background: #F7F7F7 !important;
}

.welcome-option strong {
  color: #1A1A1A !important;
}

.welcome-modal-btn {
  background: var(--orange) !important;
  background-image: none !important;
  color: #FFFFFF !important;
}

.welcome-modal-btn:hover {
  background: var(--orange-dark) !important;
}

/* ────── Hero ────── */
.hero {
  background: #FFFFFF !important;
  background-image: none !important;
  color: #1A1A1A !important;
  border-bottom: 1px solid #EEEEEE !important;
}

.hero::before,
.hero::after {
  display: none !important;
}

.hero h1,
.hero h2,
.hero .hero-title {
  color: #1A1A1A !important;
}

.hero .hero-accent,
.hero .accent {
  color: var(--orange) !important;
}

.hero p,
.hero .hero-sub {
  color: #555555 !important;
}

.hero-btn,
.hero-cta {
  background: var(--orange) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  border: none !important;
}

.hero-btn:hover,
.hero-cta:hover {
  background: var(--orange-dark) !important;
}

.hero-btn.chat {
  background: #FFFFFF !important;
  color: var(--orange) !important;
  border: 2px solid var(--orange) !important;
}

.hero-btn.chat:hover {
  background: var(--orange-pale) !important;
}

/* ────── Stats / Counters ────── */
.stat-card {
  background: #FFFFFF !important;
  border: 1px solid #EEEEEE !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}

.stat-num {
  color: var(--orange) !important;
}

.stat-label {
  color: #6B6B6B !important;
}

/* ────── Section titles ────── */
.section-title {
  color: #1A1A1A !important;
}

.section-sub {
  color: #6B6B6B !important;
}

/* ────── Service Cards ────── */
.service-card {
  background: #FFFFFF !important;
  border: 1px solid #EEEEEE !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.03) !important;
}

.service-card::before,
.service-card.mr::before,
.service-card.pac::before,
.service-card.fp::before,
.service-card.gbv::before {
  background: var(--orange) !important;
  background-image: none !important;
}

.service-card h3 {
  color: #1A1A1A !important;
}

.service-card p {
  color: #555555 !important;
}

.service-card .card-icon,
.service-card .icon {
  color: var(--orange) !important;
  background: var(--orange-pale) !important;
}

/* ────── "How to Use" Accordion ────── */
.how-row {
  background: #FFFFFF !important;
  border: 1px solid #EEEEEE !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.03) !important;
}

.how-row summary:hover,
.how-row[open] summary {
  background: #FAFAFA !important;
}

.how-row[open] {
  border-left: 3px solid var(--orange) !important;
}

.how-row[data-color] summary,
.how-row summary {
  border-left: none !important;
}

.how-row-title {
  color: #1A1A1A !important;
}

.how-row-desc {
  color: #6B6B6B !important;
}

.how-row-arrow {
  color: #6B6B6B !important;
}

.how-row[open] .how-row-arrow {
  color: var(--orange) !important;
}

.how-row-body {
  color: #1A1A1A !important;
}

.how-row-body code {
  background: #F7F7F7 !important;
  color: #1A1A1A !important;
}

/* ────── Steps / Numbered Items ────── */
.step-num {
  background: var(--orange) !important;
  background-image: none !important;
  color: #FFFFFF !important;
}

/* ────── Quick Action buttons ────── */
.qa-btn {
  background: #FFFFFF !important;
  border: 1px solid #DDDDDD !important;
  color: #1A1A1A !important;
}

.qa-btn:hover {
  background: var(--orange-pale) !important;
  border-color: var(--orange) !important;
  color: var(--orange-dark) !important;
}

/* ────── Chat FAB button ────── */
.chat-fab {
  background: var(--orange) !important;
  background-image: none !important;
}

.chat-fab:hover {
  background: var(--orange-dark) !important;
}

/* ────── Chat Window header ────── */
.chat-header {
  background: var(--orange) !important;
  background-image: none !important;
  color: #FFFFFF !important;
}

.chat-message.user {
  background: var(--orange) !important;
  background-image: none !important;
  color: #FFFFFF !important;
}

.chat-message.assistant,
.chat-message.bot {
  background: #F7F7F7 !important;
  color: #1A1A1A !important;
}

.chat-input-row button,
.chat-send-btn,
button.chat-send {
  background: var(--orange) !important;
  color: #FFFFFF !important;
}

.chat-input-row button:hover,
.chat-send-btn:hover {
  background: var(--orange-dark) !important;
}

/* ────── Emergency / Footer / Misc ────── */
.emergency-box {
  background: var(--orange-pale) !important;
  background-image: none !important;
  border: 1px solid var(--orange-soft) !important;
}

.emergency-box h2,
.emergency-box h3 {
  color: var(--orange-dark) !important;
}

footer {
  background: #FAFAFA !important;
  border-top: 1px solid #EEEEEE !important;
  color: #6B6B6B !important;
}

footer a {
  color: var(--orange) !important;
}

/* ────── Map / Location Finder ────── */
.location-finder,
#lpLocSection {
  background: #FFFFFF !important;
}

.location-card {
  background: #FFFFFF !important;
  border: 1px solid #EEEEEE !important;
}

/* ────── Generic Links ────── */
a {
  color: var(--orange);
}

a:hover {
  color: var(--orange-dark);
}

/* ────── Buttons (generic) ────── */
button.primary,
.btn-primary,
.cta-btn {
  background: var(--orange) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

button.primary:hover,
.btn-primary:hover,
.cta-btn:hover {
  background: var(--orange-dark) !important;
}

/* ────── Top nav brand/logo ────── */
.topnav-brand {
  color: #1A1A1A !important;
}

.topnav-brand-logo {
  border: 1.5px solid rgba(0,0,0,.1) !important;
}

/* Top nav logo block */
.topnav-logo,
.nav-logo,
.logo-block {
  background: transparent !important;
}

.logo-square,
.logo-icon {
  background: var(--orange) !important;
  color: #FFFFFF !important;
}

/* Reset all gradients globally for purple/teal/rose */
*[style*="linear-gradient"][style*="5c3d7a"],
*[style*="linear-gradient"][style*="3e2657"],
*[style*="linear-gradient"][style*="7e57a8"],
*[style*="linear-gradient"][style*="e8518d"],
*[style*="linear-gradient"][style*="2a9d8f"] {
  background: var(--orange) !important;
}

/* ────── Sub-page Heroes (MR/PAC/FP/GBV) ────── */
.page-hero,
.hero-mr,
.hero-pac,
.hero-fp,
.hero-gbv {
  background: #FFFFFF !important;
  background-image: none !important;
  color: #1A1A1A !important;
  border-bottom: 1px solid #EEEEEE !important;
}

.page-hero h1,
.page-hero .hero-title,
.hero-mr h1,
.hero-pac h1,
.hero-fp h1,
.hero-gbv h1 {
  color: #1A1A1A !important;
}

.page-hero p,
.page-hero .hero-sub {
  color: #555555 !important;
}

.page-hero .breadcrumb,
.page-hero .breadcrumb a {
  color: #6B6B6B !important;
}

.page-hero .breadcrumb a:hover {
  color: var(--orange) !important;
}

.page-hero .breadcrumb strong {
  color: var(--orange) !important;
}

/* Info cards on sub-pages */
.info-card {
  background: #FFFFFF !important;
  border: 1px solid #EEEEEE !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.03) !important;
}

.info-card h2 {
  color: #1A1A1A !important;
}

.info-card h3 {
  color: var(--orange-dark) !important;
}

.info-card p,
.info-card li {
  color: #1A1A1A !important;
}

.info-card.emphasis-card {
  border-left: 4px solid var(--orange) !important;
  background: var(--orange-pale) !important;
}

.muted-note {
  background: #F7F7F7 !important;
  border-left: 3px solid var(--orange) !important;
  color: #1A1A1A !important;
}

/* ────── Method cards (FP page) ────── */
.method-card {
  background: #FFFFFF !important;
  border: 1px solid #EEEEEE !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.03) !important;
}

.method-card h3 {
  color: #1A1A1A !important;
}

.method-card strong {
  color: var(--orange-dark) !important;
}

/* ────── Hide OGSB call center banner (per OGSB feedback) ────── */
/* Stats section will now appear directly after hero */
.ogsb-banner,
.ogsb-banner-photo,
.ogsb-banner-text {
  display: none !important;
}

/* ════════ AI VOICE CALL MODAL — Clean white + orange theme ════════ */
/* Overlay backdrop — softer, less heavy */
.ai-call-overlay {
  background: rgba(0, 0, 0, .55) !important;
}

/* Main box — white background, orange accents, no purple gradient */
.ai-call-box {
  background: #FFFFFF !important;
  background-image: none !important;
  color: #1A1A1A !important;
  border: 1px solid #EEEEEE !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.25) !important;
}

/* Title + subtitle */
.ai-call-title {
  color: #1A1A1A !important;
  font-weight: 700 !important;
}

.ai-call-subtitle {
  color: #6B6B6B !important;
  opacity: 1 !important;
}

/* Status badges */
.ai-call-status {
  background: var(--orange-pale) !important;
  color: var(--orange-dark) !important;
}

.ai-call-status.listening {
  background: #D4F4DD !important;
  color: #1B7A3A !important;
}

.ai-call-status.thinking {
  background: #FFF0C2 !important;
  color: #8A6500 !important;
}

.ai-call-status.speaking {
  background: var(--orange-pale) !important;
  color: var(--orange-dark) !important;
}

/* Avatar (speaker icon area) */
.ai-avatar-ring {
  border: 3px solid var(--orange-soft) !important;
}

.ai-avatar-ring.pulse {
  border-color: var(--orange) !important;
}

.ai-avatar-inner {
  background: var(--orange-pale) !important;
  border: 2px solid var(--orange-soft) !important;
  color: var(--orange-dark) !important;
}

.ai-avatar-inner.active {
  background: var(--orange-soft) !important;
}

/* Transcript box */
.ai-transcript {
  background: #F7F7F7 !important;
  color: #1A1A1A !important;
}

.ai-transcript::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.2) !important;
}

.ai-transcript .ai-turn.user {
  background: var(--orange-pale) !important;
  color: #1A1A1A !important;
}

.ai-transcript .ai-turn.bot {
  background: #FFFFFF !important;
  color: #1A1A1A !important;
  border: 1px solid #EEEEEE !important;
}

.ai-transcript .ai-turn .ai-who {
  color: #6B6B6B !important;
  opacity: 1 !important;
}

/* Mic button (legacy, mostly hidden) */
.ai-mic-btn {
  background: var(--orange) !important;
  color: #FFFFFF !important;
}

.ai-mic-btn:hover {
  background: var(--orange-dark) !important;
}

.ai-mic-btn.listening {
  background: #2BB673 !important;
  color: #FFFFFF !important;
}

/* End call button — solid orange (was red) */
.ai-end-btn {
  background: var(--orange) !important;
  color: #FFFFFF !important;
}

.ai-end-btn:hover {
  background: var(--orange-dark) !important;
}

/* Interrupt ("থামান") button — outline style */
.ai-interrupt-btn {
  background: #FFFFFF !important;
  border: 2px solid #DDDDDD !important;
  color: #1A1A1A !important;
  backdrop-filter: none !important;
}

.ai-interrupt-btn:hover {
  background: var(--orange-pale) !important;
  border-color: var(--orange) !important;
  color: var(--orange-dark) !important;
}

.ai-interrupt-btn:active {
  background: var(--orange-soft) !important;
}

/* Note at bottom */
.ai-call-note {
  color: #6B6B6B !important;
  opacity: 1 !important;
}

.ai-call-note strong {
  color: var(--orange-dark) !important;
}

/* Waveform bars — orange */
.ai-waveform span {
  background: var(--orange) !important;
}

.ai-waveform.listening span {
  background: #2BB673 !important;
}

/* ────── Mobile responsive tweaks ────── */
@media (max-width: 768px) {
  .hero {
    padding: 40px 20px 50px !important;
  }
  .topnav-links a.topnav-cta {
    padding: 6px 14px !important;
    font-size: 13px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   v3.23 — "Why" section + FAQ + Hero accent + Engagement polish
   ════════════════════════════════════════════════════════════════ */

/* Hero accent (orange highlight word) */
.hero h1 {
  font-size: clamp(38px, 6vw, 64px) !important;
  line-height: 1.05 !important;
  letter-spacing: -1px;
}
.hero-accent {
  color: var(--orange) !important;
}
.hero-eyebrow {
  display: inline-block;
  color: var(--orange) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}
.hero .hero-sub {
  font-size: 17px !important;
  line-height: 1.7 !important;
  max-width: 580px !important;
  color: #4a4a4a !important;
}
.hero-tags {
  margin-top: 24px !important;
}
.hero-tag {
  background: #FFF0E5 !important;
  color: #D45616 !important;
  border: 1px solid #FFD8C2 !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
}
.hero-btns {
  margin-top: 28px !important;
  gap: 12px !important;
}
.hero-btn {
  transition: transform .15s ease, box-shadow .15s ease !important;
  font-weight: 600 !important;
}
.hero-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(242,107,29,.25) !important;
}
.hero-btn.chat {
  background: var(--orange) !important;
  color: #FFFFFF !important;
  border: none !important;
}
.hero-btn.voice {
  background: #FFFFFF !important;
  color: var(--orange) !important;
  border: 2px solid var(--orange) !important;
}
.hero-btn.wa {
  background: #1B7A3A !important;
  color: #FFFFFF !important;
  border: none !important;
}

/* "Why Sastho Janala" section */
.why-section {
  max-width: 1200px !important;
  margin: 60px auto 30px !important;
  padding: 0 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.why-section .section-title {
  color: #1A1A1A !important;
  font-weight: 800 !important;
  font-size: 32px !important;
  text-align: center !important;
  margin-bottom: 8px !important;
}
.why-section .section-sub {
  text-align: center !important;
  color: #6B6B6B !important;
  font-size: 16px !important;
  margin-bottom: 36px !important;
}
.why-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.why-card {
  background: #FFFFFF !important;
  border: 1px solid #EEEEEE !important;
  border-radius: 18px !important;
  padding: 28px 24px !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: left !important;
  box-sizing: border-box !important;
}
.why-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 4px;
  background: var(--orange, #F26B1D);
  transition: width .3s ease;
}
.why-card:hover {
  transform: translateY(-4px);
  border-color: var(--orange-soft, #FFD8C2);
  box-shadow: 0 12px 32px rgba(242,107,29,.12);
}
.why-card:hover::before {
  width: 100%;
}
.why-card .why-icon {
  font-size: 36px !important;
  margin-bottom: 14px !important;
  display: block !important;
}
.why-card h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  margin-bottom: 8px !important;
  margin-top: 0 !important;
}
.why-card p {
  font-size: 14px !important;
  color: #555555 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* FAQ section */
.faq {
  max-width: 800px !important;
  margin: 60px auto 40px !important;
  padding: 0 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.faq .section-title {
  color: #1A1A1A !important;
  font-weight: 800 !important;
  text-align: center !important;
  font-size: 28px !important;
  margin-bottom: 8px !important;
}
.faq .section-sub {
  text-align: center !important;
  color: #6B6B6B !important;
  margin-bottom: 28px !important;
}
.faq-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.faq-item {
  background: #FFFFFF !important;
  border: 1px solid #EEEEEE !important;
  border-radius: 14px !important;
  padding: 0 !important;
  overflow: hidden !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.faq-item:hover {
  border-color: var(--orange-soft, #FFD8C2) !important;
}
.faq-item summary {
  padding: 18px 22px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1A1A1A !important;
  cursor: pointer !important;
  list-style: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  user-select: none !important;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 22px;
  color: var(--orange, #F26B1D);
  font-weight: 400;
  transition: transform .2s ease;
  margin-left: 12px;
}
.faq-item[open] summary {
  background: #FFF8F2 !important;
  border-bottom: 1px solid #FFE4D0 !important;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-item p {
  padding: 16px 22px 20px !important;
  color: #555555 !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  margin: 0 !important;
}

/* Smooth scroll for whole page */
html {
  scroll-behavior: smooth;
}

/* Subtle entrance animation for sections */
.why-section,
.faq,
.services,
.stats {
  animation: fadeUp .7s ease both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mobile: stack why grid */
@media (max-width: 768px) {
  .why-grid {
    grid-template-columns: 1fr !important;
  }
  .why-card {
    padding: 24px 20px !important;
  }
  .why-section, .faq {
    padding: 0 16px !important;
  }
  .hero h1 {
    font-size: 38px !important;
  }
  .hero-btns {
    flex-direction: column;
    align-items: stretch !important;
  }
  .hero-btn {
    width: 100% !important;
    text-align: center;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}