/**
 * Bharat Tech Hub — Mobile-first responsive layer
 * Breakpoints: 320 / 375 / 425 / 480 / 576 / 768 / 992 / 1200 / 1400 / 1600 / 1920
 * Brand colors preserved. Complements Tailwind utilities without fighting them.
 */

:root {
  --bth-container: min(100% - 2rem, 80rem);
  --bth-gutter: 1rem;
  --bth-section-y: 3.5rem;
  --bth-header-h: 4.5rem;
  --bth-touch: 2.75rem; /* 44px */
  --bth-touch-lg: 3rem; /* 48px */
  --bth-radius: 1rem;
  --bth-text: #f8fafc;
  --bth-muted: #94a3b8;
  --bth-gold: #fbbf24;
  --bth-dark: #020617;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* ===== Global overflow & box model ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bth-header-h) + 0.75rem + var(--safe-top));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip; /* prefer clip over hidden when supported */
  max-width: 100vw;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

@supports not (overflow-x: clip) {
  body {
    overflow-x: hidden;
  }
}

img,
video,
iframe,
svg,
canvas {
  max-width: 100%;
  height: auto;
}

iframe {
  display: block;
  width: 100%;
}

/* ===== Fluid typography ===== */
.bth-fluid-h1,
h1.page-title {
  font-size: clamp(1.75rem, 1.2rem + 2.8vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.bth-fluid-h2,
main section h2 {
  font-size: clamp(1.5rem, 1.15rem + 1.8vw, 3rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.bth-fluid-h3,
main section h3 {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.35;
}

.bth-fluid-body,
main p {
  line-height: 1.65;
}

/* Wide letter-spacing labels — tame on small screens */
@media (max-width: 479.98px) {
  .tracking-wide-mobile-safe {
    letter-spacing: 0.12em !important;
  }
}

/* ===== Responsive container helper ===== */
.bth-container,
.site-container {
  width: var(--bth-container);
  margin-inline: auto;
  padding-inline: var(--bth-gutter);
}

/* Normalize common Tailwind section gutters on home */
main > section > .max-w-7xl,
main > section > .max-w-6xl,
main > section > .max-w-5xl,
main > section > .max-w-4xl,
main > section > .max-w-3xl {
  width: 100%;
  padding-left: max(var(--bth-gutter), 1rem);
  padding-right: max(var(--bth-gutter), 1rem);
}

@media (min-width: 480px) {
  :root {
    --bth-gutter: 1.25rem;
    --bth-section-y: 4rem;
  }
}

@media (min-width: 768px) {
  :root {
    --bth-gutter: 1.5rem;
    --bth-section-y: 5rem;
    --bth-header-h: 5rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --bth-gutter: 1.75rem;
    --bth-section-y: 6rem;
  }
}

/* Section vertical rhythm on home */
@media (max-width: 767.98px) {
  .home-section.py-24 {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
  .home-section .mb-16 {
    margin-bottom: 2.25rem !important;
  }
}

/* ===== Equal-height cards in grids ===== */
.service-card-link,
.glass-card,
.feature-card,
.interactive-card {
  min-width: 0; /* prevent grid blowout */
}

.grid > .service-card-link,
.grid > .glass-card,
.grid > article.glass-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.service-card-link .card-arrow {
  margin-top: auto;
}

/* ===== Touch-friendly buttons & links ===== */
.nav-cta,
.btn-premium-primary,
.btn-premium-secondary,
.btn-metal-gold,
.btn-gold-outline,
.request-quote,
.bth-hero__btn,
button[type="submit"],
a.inline-flex[class*="rounded-full"] {
  min-height: var(--bth-touch-lg);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--bth-gold);
  outline-offset: 2px;
}

/* ===== Forms ===== */
input,
select,
textarea,
.ct-input {
  width: 100%;
  max-width: 100%;
  min-height: var(--bth-touch-lg);
  border-radius: 0.75rem;
}

textarea {
  min-height: 8rem;
}

label {
  display: block;
  margin-bottom: 0.35rem;
}

@media (max-width: 640px) {
  input,
  select,
  textarea,
  .ct-input {
    font-size: 16px !important; /* iOS zoom prevention */
  }
}

/* ===== Mobile nav drawer + backdrop ===== */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(2, 6, 23, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.nav-backdrop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#navbar {
  z-index: 50;
  padding-top: var(--safe-top);
}

.mobile-menu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}

.mobile-menu.active {
  max-height: min(78dvh, 36rem);
  opacity: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.mobile-menu a {
  min-height: var(--bth-touch);
  display: flex;
  align-items: center;
  border-radius: 0.75rem;
  padding-inline: 1rem;
}

body.menu-open {
  overflow: hidden;
  touch-action: none;
}

/* Brand wordmark — prevent wrap crush on 320px */
@media (max-width: 359.98px) {
  .brand-wordmark .brand-top {
    font-size: 0.92rem;
  }
  .brand-wordmark .brand-bottom {
    font-size: 0.58rem;
    letter-spacing: 0.14em;
  }
  .brand-mark {
    width: 2.25rem;
    height: 2.25rem;
  }
}

/* ===== Process timeline — single column on phones ===== */
@media (max-width: 479.98px) {
  .process-timeline.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Sticky page CTAs (unified) ===== */
.page-sticky-cta,
.svc-sticky-cta,
.web-sticky-cta,
.cs-sticky-cta,
.app-sticky-cta,
.dm-sticky-cta,
.ai-sticky-cta,
.about-sticky-cta {
  display: none;
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  bottom: calc(0.75rem + var(--safe-bottom));
  z-index: 40;
}

@media (max-width: 767.98px) {
  .page-sticky-cta.show,
  .svc-sticky-cta.show,
  .web-sticky-cta.show,
  .cs-sticky-cta.show,
  .app-sticky-cta.show,
  .dm-sticky-cta.show,
  .ai-sticky-cta.show,
  .about-sticky-cta.show {
    display: block;
  }
}

body.has-sticky-cta a[aria-label="Chat with us on WhatsApp"],
body.has-sticky-cta .wa-fab {
  bottom: calc(5.5rem + var(--safe-bottom)) !important;
}

body.has-sticky-cta #backToTop {
  bottom: calc(9.75rem + var(--safe-bottom));
}

/* Hide FAB overlap with menu */
body.menu-open .wa-fab,
body.menu-open a[aria-label="Chat with us on WhatsApp"],
body.menu-open #backToTop {
  opacity: 0;
  pointer-events: none;
}

/* ===== Quote modal — mobile safe ===== */
#quoteModal {
  padding: max(0.75rem, var(--safe-top)) 0.75rem max(0.75rem, var(--safe-bottom));
  align-items: flex-end;
}

@media (min-width: 640px) {
  #quoteModal {
    align-items: center;
  }
}

#quoteModal .relative.max-w-xl {
  max-height: min(92dvh, 100%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

/* ===== Footer grid ===== */
@media (max-width: 639.98px) {
  footer .grid {
    gap: 2rem;
  }
}

/* ===== Ultra-wide comfort ===== */
@media (min-width: 1600px) {
  .max-w-7xl {
    max-width: 80rem;
  }
}

@media (min-width: 1920px) {
  .max-w-7xl {
    max-width: 85rem;
  }
}

/* ===== Foldable / short landscape ===== */
@media (max-height: 480px) and (orientation: landscape) {
  .bth-hero {
    min-height: auto;
    padding-top: 4.5rem;
    padding-bottom: 2rem;
  }
  .mobile-menu.active {
    max-height: 65vh;
  }
}

/* ===== Reduce motion & low-end ===== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .wa-fab-pulse,
  .bth-hero__arrow {
    animation: none !important;
  }
}

@media (max-width: 767.98px) {
  .glass,
  .glass-card,
  .feature-card {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .wa-fab-pulse {
    animation-duration: 2.8s;
  }
}

/* Disable heavy hover transforms on coarse pointers */
@media (hover: none), (pointer: coarse) {
  .glass-card:hover,
  .feature-card:hover,
  .interactive-card:hover {
    transform: none !important;
  }
}

/* ===== Print ===== */
@media print {
  .nav-backdrop,
  .mobile-menu,
  #mobileMenuBtn,
  #backToTop,
  .wa-fab,
  .page-sticky-cta,
  .svc-sticky-cta,
  .web-sticky-cta,
  .cs-sticky-cta,
  .app-sticky-cta,
  .dm-sticky-cta,
  .ai-sticky-cta,
  .about-sticky-cta {
    display: none !important;
  }
}