/* Marketing Embed Styles */

/* 
 * NOTE: Basic layout styling is now managed by the journey-form-page.js component
 * These styles should only handle marketing-embed specific features, not layout
 */
/* body.marketing-embed class removed to ensure consistent layout with index.html */

/* We've removed the old form styles since we're now using Tailwind classes directly
   that match the index.html form styles */

/* Engagement topics styling */
.engagement-topics {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.topic-card {
  background-color: var(--colors-brand-light-gray);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-left: 3px solid var(--colors-brand-blue);
}

.topic-card h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--colors-brand-navy);
}

.topic-card p {
  margin: 0;
  color: #4b5563;
  line-height: 1.5;
}

/* 
 * MARKETING EMBED VIEW LAYOUT - Overrides shared tab styles
 */
.marketing-embed .tab-content-wrapper {
  padding: 0;
}

/* Override absolute positioning for marketing tabs */
.marketing-embed .tab-content {
  position: static;
  overflow-y: auto;
  height: 100%;
  padding: 0; /* Remove padding from results view */
  display: block !important; /* Ensure it's visible when shown */
}

/* Legacy styles for backward compatibility */
.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

/* Note: Loading overlay styles have been moved to shared-loaders.css */

/* Marketing results section */
.results-container {
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Tab container with fixed layout for marketing */
.results-container .tab-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Tab content should be scrollable */
.results-container .tab-content-wrapper {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: calc(100% - 43px); /* Subtract tab bar height */
}

/* Ensure content can be scrolled */
.results-container .tab-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Pin disclaimer to bottom */
.results-container .disclaimer-container {
  margin-top: auto;
}

/* Journey tab content */
#journeyContent {
  height: 100%;
  overflow: hidden;
}

/* Marketing embed specific diagram overrides */

/* Note: Content loader styles have been moved to shared components/engagement-tips.css */

/* Marketing embed specific disclaimer overrides */

/* Fallback Container Styles */
.fallback-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}

.fallback-container.hidden {
  display: none;
}

.fallback-content {
  width: 100%;
  padding: 2rem;
}

/* Ensure fallback content is centered even on small screens */
.fallback-content .max-w-2xl {
  max-width: 42rem;
  margin: 0 auto;
}

/* Responsive styles */
@media (max-width: 768px) {
  /* 
   * NOTE: Basic form layout and padding is now managed by the journey-form-page.js component
   * These responsive styles should only handle marketing-embed specific features
   */
  
  /* Existing styles for diagram and tabs */
  .diagram-container {
    min-height: 300px;
  }
  
  .diagram-content {
    min-height: 300px;
  }
  
  .tab-button {
    padding: 8px 12px;
    font-size: 14px;
  }
  
  .tab-content-wrapper {
    padding: 0.75rem;
  }
  
  /* Fallback container responsive adjustments */
  .fallback-content {
    padding: 1rem;
  }
  
  .fallback-content h2 {
    font-size: 1.5rem;
  }
  
  .fallback-content p {
    font-size: 1rem;
  }
}