@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* Global Responsive Safeguards & Horizontal Overflow Fixes */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
  font-family: 'Outfit', sans-serif;
  background-color: #f8fafc;
  color: #0f172a;
}

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

/* Ensure flex & grid children shrink properly when text or content is wide */
.min-w-0 {
  min-width: 0px;
}

/* Prevent any section from exceeding viewport width */
.max-w-full {
  max-width: 100%;
}

/* Table layout fixes for responsive spec tables */
table.table-fixed {
  table-layout: fixed;
}

table.table-fixed td,
table.table-fixed th {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* Custom Scrollbar for premium feel */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Micro-animations */
.hover-scale {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.hover-scale:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Sticky Bottom Drawer styling for Mobile CTA */
.sticky-mobile-cta {
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
}

/* Glassmorphism utility */
.glass-panel {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Active navigation dot helper */
.nav-link-active {
  position: relative;
  color: #0d9488 !important; /* Teal 600 */
}

.nav-link-active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #0d9488;
}

/* Thumbnail strip custom scrollbar and mobile overflow protection */
#thumbnail-strip {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding: 0.5rem;
  min-width: 0;
  max-width: 100%;
}

#thumbnail-strip::-webkit-scrollbar {
  height: 5px;
}

#thumbnail-strip::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

#thumbnail-strip::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

#thumbnail-strip::-webkit-scrollbar-thumb:hover {
  background: #0d9488;
}

/* Ensure flex/grid items never expand layout beyond screen width */
.min-w-0 {
  min-width: 0px !important;
}

.max-w-full {
   max-width: 100% !important;
 }

 /* AI Assist modal — mobile-responsive, no horizontal overflow */
 #ai-assist-modal .max-w-lg { max-width: 32rem; width: 100%; }
 #ai-assist-modal textarea,
 #ai-assist-modal input,
 #ai-assist-modal pre { max-width: 100%; min-width: 0; overflow-wrap: break-word; word-break: break-word; }
 #ai-draft-preview { min-width: 0; overflow-wrap: break-word; }