/* ============================================
   Layout

   Page structure: body, main wrapper, aurora
   background, content well, site header,
   step page containers, composite steps.
   ============================================ */

body {
  height: 100%;
  width: 100%;
  font-family: var(--font-family);
  background-color: var(--theme-bg, var(--color-background));
  color: var(--color-text);
}

.main-content-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
}

/* Aurora background — frosted glass effect behind content */
.main-content-wrapper::before {
  content: '';
  position: fixed;
  inset: -100px;
  z-index: -1;
  background:
    radial-gradient(circle 450px at 5% 30%, var(--theme-aurora-1, rgba(87, 71, 248, 0.08)), transparent 70%),
    radial-gradient(circle 400px at 90% 10%, var(--theme-aurora-2, rgba(0, 186, 241, 0.07)), transparent 70%),
    radial-gradient(circle 500px at 50% 85%, var(--theme-aurora-3, rgba(58, 110, 245, 0.06)), transparent 70%),
    radial-gradient(circle 350px at 75% 60%, var(--theme-aurora-4, rgba(0, 186, 241, 0.05)), transparent 70%),
    radial-gradient(circle 300px at 20% 75%, var(--theme-aurora-5, rgba(87, 71, 248, 0.05)), transparent 70%);
  filter: blur(80px);
  pointer-events: none;
}

.content-container {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  padding: var(--spacing-xl);
  width: 100%;
  max-width: min(92vw, 900px);
  margin: 0 auto;
}

/* ============================================
   Site Header — White bar with centered logo + back button
   3-column grid keeps logo centered regardless of back button width.
   z-index: 10 (content=1, aurora=-1)
   ============================================ */

.site-header {
  width: 100%;
  padding: 1rem 1.5rem;
  background: var(--color-surface, #FFFFFF);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  position: relative;
  z-index: 10;
}

.site-header-back-slot {
  justify-self: start;
}

.site-header-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--theme-primary, var(--color-primary));
  border-radius: 50%;
  transition: background-color var(--transition-fast, 0.15s ease);
}

.site-header-back:hover {
  background-color: var(--theme-primary-focus, var(--color-focus));
}

.site-header-logo {
  justify-self: center;
  height: 32px;
  width: auto;
}

.site-header-spacer {
  /* empty right column to balance the grid */
}

/* Progress bar — bottom border of header */
.site-header-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: var(--color-border-light, #EDF2F7);
}

/* Tablet+ */
@media (min-width: 768px) {
  .site-header {
    padding: 1.25rem 2rem;
  }

  .site-header-logo {
    height: 36px;
  }
}

/* Desktop landscape */
@media (min-width: 1024px) {
  .site-header {
    padding: 2rem 3rem;
  }

  .site-header-logo {
    height: 48px;
  }
}

/* ============================================
   Step Page Containers — Top-aligned, fluid spacing
   ============================================
   Flex chain: .main-content-wrapper → .content-container → .step-page → .input-container
   Each level uses flex:1 to fill available height.

   Content starts from the top with viewport-relative spacing via clamp().
   This compresses on short viewports (iPad landscape) and breathes on tall ones.
   ============================================ */

/* Groups step counter + step component — tight internal spacing */
.step-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.step-page {
  /* animation: fadeInSlideUp — defined in animations.css */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1;
  justify-content: flex-start;
  padding-top: clamp(12px, 5dvh - 16px, 64px);
  gap: clamp(16px, 4dvh, 48px);
}

.input-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

/* Wrapper for all interactive content inside .input-container.
   Provides consistent spacing below prompt/subtext regardless
   of whether subtext is present. */
.input-form-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(16px, 3dvh, 32px);
}

.input-form-column {
  display: flex;
  flex-direction: column;
  align-self: center;
  align-items: center;
  width: 100%;
  max-width: 560px;
  gap: var(--spacing-md);
}

/* ============================================
   Composite Step Container
   When multiple questions are rendered on one page (CompositeInputComponent),
   each inner .input-container shrinks to fit its content so the group
   centers naturally. The page scrolls if content exceeds viewport.
   ============================================ */
.composite-step-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: var(--spacing-2xl);
  width: 100%;
}

.composite-step-container .input-container {
  flex: 0 1 auto;
}