/* Minimal overrides for policies modal, mobile menu, and responsive fixes */

/* Global anti-overflow and media sizing */
html, body, header, section, footer { overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }
* { box-sizing: border-box; }

/* Site-wide promo banner (all viewports) */
.mobile-hero-banner {
  display: block;
  position: fixed; /* fixed at top */
  top: 0; left: 0; right: 0; width: 100%;
  z-index: 1100; /* higher than navbar (1000) */
  background: var(--gradient-primary, linear-gradient(135deg,#ff6b9d,#c44569));
  color: #fff;
  box-shadow: var(--shadow-lg, 0 6px 20px rgba(0,0,0,.12));
}
.mobile-hero-banner .banner-inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px;
}
.mobile-hero-banner .banner-left{ display: flex; align-items: center; gap: 10px; }
.mobile-hero-banner .banner-icon{ width: 22px; height: 22px; flex: 0 0 22px; }
.mobile-hero-banner .banner-text{ line-height: 1.1; }
.mobile-hero-banner .banner-text strong{ font-family: var(--font-heading, inherit); font-weight: 800; font-size: 18px; display: block; }
.mobile-hero-banner .banner-text span{ font-size: 14px; opacity: .95; display: block; margin-top: 2px; }
.mobile-hero-banner .banner-cta{
  white-space: nowrap; background: #fff; color: #111; font-weight: 700;
  padding: 10px 14px; border-radius: 999px; text-decoration: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}

/* Slightly larger spacing on desktop */
@media (min-width: 901px) {
  .mobile-hero-banner .banner-inner{ padding: 12px 24px; }
  .mobile-hero-banner .banner-icon{ width: 24px; height: 24px; }
}

/* Floating Telegram button (global - shows on desktop too) */
.tg-float {
  position: fixed; bottom: 24px; right: 24px; z-index: 3200;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #229ED9; color: #fff; text-decoration: none; box-shadow: 0 10px 20px rgba(34,158,217,.35);
}
.tg-float svg { width: 28px; height: 28px; }

/* Mobile menu */
.nav-toggle { display: none; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--text-primary, #1e293b); margin: 5px 0; transition: transform .3s ease, opacity .3s ease; }
.nav-toggle.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity: 0; }
.nav-toggle.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  /* Ensure the toggle is visible on mobile */
  #nav-toggle, .nav-toggle { display: flex !important; }
  
  /* Navbar below the promo banner (fixed) */
  .navbar { position: fixed; top: var(--banner-height, 0px); left: 0; right: 0; z-index: 1000; }

  /* Stronger specificity for menu visibility and layout */
  #navbar .nav-menu { 
    position: fixed; 
    top: calc(var(--banner-height, 0px) + var(--navbar-height, 64px)); 
    right: 0; 
    left: 0; 
    width: 100%; 
    background: var(--primary-bg, #fff); 
    border-top: 1px solid var(--border-color, #e2e8f0); 
    display: none !important; 
    flex-direction: column; 
    gap: 0; 
    padding: 12px 16px; 
    z-index: 3000; 
    max-height: 70vh; 
    overflow: auto; 
    transform: none !important; 
    opacity: 1 !important; 
    visibility: visible !important; 
    box-shadow: var(--shadow-lg); 
  }
  #navbar .nav-menu.active { display: flex !important; }
  #navbar .nav-menu li { margin: 8px 0; }
  body.menu-open { overflow: hidden; }

  /* Ensure hero content clears both banner and navbar */
  .hero { padding-top: calc(var(--banner-height, 0px) + var(--navbar-height, 64px)); }

  /* Floating Telegram button (mobile only) */
  .tg-float {
    position: fixed; bottom: 85px; right: 30px; z-index: 3200;
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #229ED9; /* Telegram brand color */
    color: #fff; text-decoration: none; box-shadow: 0 10px 20px rgba(34,158,217,.35);
  }
  .tg-float svg { width: 28px; height: 28px; }
}

/* Desktop offsets (banner + fixed navbar) */
@media (min-width: 901px) {
  .navbar { top: var(--banner-height, 0px); }
  .hero { padding-top: calc(var(--banner-height, 0px) + var(--navbar-height, 100px)); }
}

/* Generic modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 16px; }
.modal-overlay.open { display: flex; }
.modal { max-width: 720px; width: 100%; background: var(--surface-bg, #fff); color: var(--text-primary, #1e293b); border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-xl, 0 20px 25px rgba(0,0,0,.1)); overflow: hidden; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-color, #e2e8f0); }
.modal-title { font-family: var(--font-heading, inherit); font-weight: 600; font-size: 1.125rem; }
.modal-close { background: transparent; border: 0; cursor: pointer; font-size: 20px; color: var(--text-secondary, #64748b); }
.modal-body { padding: 16px 20px; max-height: 70vh; overflow: auto; }
.modal-body h3 { margin-top: 1rem; }

/* FAQ overrides: ensure full content is readable */
.faq-answer { will-change: max-height; }
.faq-item.active .faq-answer { max-height: 9999px !important; }

/* Mobile menu CTA button styles */
@media (max-width: 900px) {
  .nav-cta { display: none; } /* hide desktop CTA in header bar on mobile */
  .nav-menu .mobile-cta { 
    margin-top: 8px; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    padding: 12px 16px; 
    border-radius: var(--radius-lg, 12px); 
    background: var(--gradient-primary, linear-gradient(135deg,#ff6b9d,#c44569)); 
    color: #fff; 
    text-decoration: none; 
    font-weight: 600;
  }
}

/* Responsive tweaks for mobile layout */
@media (max-width: 900px) {
  .hero, .hero-bg, .hero-visual, .hero-card-stack { overflow: hidden; max-width: 100%; }
  .hero-container { padding: 0 16px; }
  .hero-title { font-size: clamp(28px, 6vw, 36px); }
  .hero-subtitle { font-size: 15px; }
  .section-header p { max-width: 100%; }
  .services .services-grid, 
  .pricing .pricing-grid,
  .testimonials .testimonials-grid,
  .portfolio .portfolio-grid,
  .features .features-grid { grid-template-columns: 1fr !important; }
  .container { padding-left: 16px; padding-right: 16px; }
}