/* ═══════════════════════════════════════════════════════════════════════════════
   PAGE LAYOUT – uniform side spacing and padding across all website pages
   Single source of truth for horizontal padding (main content, breadcrumb, footer).
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
  --page-padding-x: 1rem;
  --page-padding-x-sm: 1.25rem;
  --page-padding-x-lg: 1.75rem;
  --page-padding-y: 1.5rem;
  --page-padding-y-lg: 2rem;
}

/* Utility for staggered pulse animation (replaces inline animation-delay) */
.animate-delay-1s {
  animation-delay: 1s;
}

/* Progress bar fill width via CSS variable (avoids inline style; set --progress-pct in JS or data-pct) */
.progress-fill {
  width: var(--progress-pct, 0);
}

/* Static progress widths for radar/tool pages (avoids inline style) */
.progress-w-0 { width: 0%; }
.progress-w-78 { width: 78%; }
.progress-w-85 { width: 85%; }
.progress-w-89 { width: 89%; }

/* Account page content area top padding (replaces inline padding-top) */
.account-content-top {
  padding-top: calc(2rem + 32px);
}

/* Preview box for dependency-csv-generator (replaces inline margin/display) */
.preview-box {
  margin-top: 2rem;
}
/* Avoid a global .hidden with !important – it overrides Tailwind's md:flex and hides the desktop nav. Use Tailwind's .hidden and responsive variants. */
.preview-box.hidden {
  display: none;
}
.preview-content {
  background: #f5f5f5;
  padding: 1rem;
  border-radius: 5px;
  overflow-x: auto;
}

/* Legend colors for network-visualizer (replaces inline background) */
.legend-color-green { background: #4CAF50; }
.legend-color-blue { background: #2196F3; }
.legend-color-orange { background: #FF9800; }
.legend-color-purple { background: #9C27B0; }
.legend-color-cyan { background: #00BCD4; }
.legend-color-deep-orange { background: #FF5722; }

.nodes-list-heading { margin-bottom: 0.5rem; }
.connections-list-heading { margin-top: 1rem; margin-bottom: 0.5rem; }

.quiz-intro { margin-bottom: 1.5rem; }
.next-steps-heading { margin-top: 1rem; }
.next-steps-list { margin-left: 1.5rem; margin-top: 0.5rem; }

.validator-stats-wrap { margin-top: 1rem; }
.validator-actions { margin-top: 2rem; }

.mb-4 { margin-bottom: 1rem; }

/* Legal / page breadcrumb bar (replaces long inline class list; use with sticky-below-nav in nav-fixes.css) */
.legal-breadcrumb-bar {
  position: sticky;
  z-index: 40;
  width: 100%;
  height: 2rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: hsl(var(--border));
  transition-property: color, background-color, border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  display: flex;
  align-items: center;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background-color: hsl(var(--background) / 0.95);
}
@media (min-width: 640px) {
  .legal-breadcrumb-bar {
    height: 2.25rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media (min-width: 1024px) {
  .legal-breadcrumb-bar {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

main .container-main-content {
  padding-left: var(--page-padding-x) !important;
  padding-right: var(--page-padding-x) !important;
}

main .container {
  padding-left: var(--page-padding-x) !important;
  padding-right: var(--page-padding-x) !important;
}

main div.max-w-7xl.mx-auto {
  padding-left: var(--page-padding-x) !important;
  padding-right: var(--page-padding-x) !important;
}

[data-mobile-menu="true"] .max-w-7xl.mx-auto {
  padding-left: var(--page-padding-x) !important;
  padding-right: var(--page-padding-x) !important;
}

.footer-inner,
#footer .footer-inner {
  padding-left: var(--page-padding-x) !important;
  padding-right: var(--page-padding-x) !important;
}

@media (min-width: 640px) {
  main .container-main-content,
  main .container,
  main div.max-w-7xl.mx-auto,
  [data-mobile-menu="true"] .max-w-7xl.mx-auto,
  .footer-inner,
  #footer .footer-inner {
    padding-left: var(--page-padding-x-sm) !important;
    padding-right: var(--page-padding-x-sm) !important;
  }
}

@media (min-width: 1024px) {
  main .container-main-content,
  main .container,
  main div.max-w-7xl.mx-auto,
  [data-mobile-menu="true"] .max-w-7xl.mx-auto,
  .footer-inner,
  #footer .footer-inner {
    padding-left: var(--page-padding-x-lg) !important;
    padding-right: var(--page-padding-x-lg) !important;
  }
}