/*
 * Foundry Flow CSS
 * Section-level visual flow controls: spacing, backgrounds, dividers,
 * overlap, parallax, and theme-overridable custom properties.
 * Loaded after foundry-base.css. Uses !important on spacing overrides
 * to intentionally override Tailwind block-internal py-* utilities.
 */

/* =============================================================================
   1. CSS Custom Properties
   ============================================================================= */

:root {
  /* Spacing */
  --foundry-flow-spacing-flush: 0;
  --foundry-flow-spacing-tight-y: 1.5rem;
  --foundry-flow-spacing-tight-y-sm: 2.5rem;
  --foundry-flow-spacing-normal-y: 4rem;
  --foundry-flow-spacing-normal-y-sm: 6rem;
  --foundry-flow-spacing-spacious-y: 6rem;
  --foundry-flow-spacing-spacious-y-sm: 9rem;

  /* Backgrounds */
  --foundry-flow-bg-dark: #0f172a;
  --foundry-flow-bg-light: #ffffff;
  --foundry-flow-bg-surface-alt: #f8fafc;
  --foundry-flow-bg-brand: var(--foundry-brand-primary, #0f172a);

  /* Text colors */
  --foundry-flow-text-on-dark: #f8fafc;
  --foundry-flow-text-on-light: var(--foundry-text, #0f172a);

  /* Overlap offsets */
  --foundry-flow-overlap-sm: -2rem;
  --foundry-flow-overlap-md: -4rem;
  --foundry-flow-overlap-lg: -8rem;

  /* Divider fill */
  --foundry-flow-divider-fill: var(--foundry-bg, #ffffff);
  --foundry-flow-parallax-speed: 0.15;
}

/* =============================================================================
   2. Spacing Override Rules
   Uses !important to intentionally override Tailwind block-internal py-* classes.
   No rule for --spacing-normal: that is the default (existing block padding stays).
   ============================================================================= */

.foundry-block--spacing-flush > section,
.foundry-block--spacing-flush > * > section {
  padding-top: var(--foundry-flow-spacing-flush) !important;
  padding-bottom: var(--foundry-flow-spacing-flush) !important;
}

.foundry-block--spacing-tight > section,
.foundry-block--spacing-tight > * > section {
  padding-top: var(--foundry-flow-spacing-tight-y) !important;
  padding-bottom: var(--foundry-flow-spacing-tight-y) !important;
}

@media (min-width: 640px) {
  .foundry-block--spacing-tight > section,
  .foundry-block--spacing-tight > * > section {
    padding-top: var(--foundry-flow-spacing-tight-y-sm) !important;
    padding-bottom: var(--foundry-flow-spacing-tight-y-sm) !important;
  }
}

.foundry-block--spacing-spacious > section,
.foundry-block--spacing-spacious > * > section {
  padding-top: var(--foundry-flow-spacing-spacious-y) !important;
  padding-bottom: var(--foundry-flow-spacing-spacious-y) !important;
}

@media (min-width: 640px) {
  .foundry-block--spacing-spacious > section,
  .foundry-block--spacing-spacious > * > section {
    padding-top: var(--foundry-flow-spacing-spacious-y-sm) !important;
    padding-bottom: var(--foundry-flow-spacing-spacious-y-sm) !important;
  }
}

/* =============================================================================
   3. Background Rules
   ============================================================================= */

.foundry-block--bg-dark {
  color: var(--foundry-flow-text-on-dark);
  /* Override --foundry-text so all child blocks using var(--foundry-text) get light copy */
  --foundry-text: var(--foundry-flow-text-on-dark, #f8fafc);
  --foundry-text-muted: rgba(248, 250, 252, 0.70);
  --foundry-border: rgba(255, 255, 255, 0.12);
  --foundry-surface: rgba(255, 255, 255, 0.06);
}

/* Clear the theme's alternating even-row light gradient — dark bg must show through */
.foundry-block--bg-dark > section,
.foundry-block--bg-dark > * > section {
  background: none !important;
}

.foundry-block--bg-light > section,
.foundry-block--bg-light > * > section {
  background: none !important;
}

.foundry-block--bg-surface-alt > section,
.foundry-block--bg-surface-alt > * > section {
  background: none !important;
}

.foundry-block--bg-light {
  color: var(--foundry-flow-text-on-light);
}

.foundry-block--bg-brand {
  color: var(--foundry-flow-text-on-dark);
  --foundry-text: var(--foundry-flow-text-on-dark, #f8fafc);
  --foundry-text-muted: rgba(248, 250, 252, 0.70);
  --foundry-border: rgba(255, 255, 255, 0.12);
  --foundry-surface: rgba(255, 255, 255, 0.06);
}

.foundry-block--bg-brand > section,
.foundry-block--bg-brand > * > section {
  background: none !important;
}

/* Merge adjacent sections sharing the same background — remove top padding gap */
.foundry-block--bg-continues > section,
.foundry-block--bg-continues > * > section {
  padding-top: 0;
}

/* =============================================================================
   4. Overlap Rules
   ============================================================================= */

.foundry-block--overlap {
  position: relative;
  z-index: 10;
  box-shadow: var(--foundry-shadow-md);
}

.foundry-block--overlap-sm {
  margin-top: var(--foundry-flow-overlap-sm);
}

.foundry-block--overlap-md {
  margin-top: var(--foundry-flow-overlap-md);
}

.foundry-block--overlap-lg {
  margin-top: var(--foundry-flow-overlap-lg);
}

/* Disable overlap on mobile — negative margins cause layout issues at small widths */
@media (max-width: 640px) {
  .foundry-block--overlap {
    margin-top: 0;
    box-shadow: none;
  }
}

/* Respect reduced motion — overlap effects can feel jarring for affected users */
@media (prefers-reduced-motion: reduce) {
  .foundry-block--overlap {
    margin-top: 0;
  }
}

/* =============================================================================
   5. Divider Positioning Rules
   ============================================================================= */

.foundry-section-divider {
  position: relative;
  height: 0;
  overflow: visible;
  z-index: 10;
  pointer-events: none;
}

.foundry-section-divider svg {
  display: block;
  width: 100%;
  height: 60px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.foundry-section-divider--wave svg {
  height: 80px;
}

.foundry-section-divider--angle svg {
  height: 60px;
}

.foundry-section-divider--curve svg {
  height: 80px;
}

.foundry-section-divider--fade svg {
  height: 40px;
}

/* =============================================================================
   6. Parallax
   foundry-motion.js handles the scroll effect — CSS only needs overflow clip
   ============================================================================= */

.foundry-block--parallax {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .foundry-block--parallax {
    overflow: visible;
  }
}