/*
 * Unified Layout System for AIWatermark
 * Ensures consistent spacing, sizing, and alignment across all pages
 */

/* Navy Blue Theme Colors */
:root {
  --navy-50: #f0f4ff;
  --navy-100: #e0e7ff;
  --navy-200: #c7d2fe;
  --navy-300: #a5b4fc;
  --navy-500: #6366f1;
  --navy-600: #4f46e5;
  --navy-700: #4338ca;
  --navy-800: #3730a3;
  --navy-900: #1e3a8a;
  --navy-950: #1e293b;

  /* Standardized Spacing (8px base) */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-6: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-12: 6rem;    /* 96px */
}

/* ==========================================
   STANDARDIZED CONTAINERS
   ========================================== */

/* Navigation Container - All pages use same width */
.top-nav-container {
  max-width: 1400px !important;
  margin: 0 auto;
  padding: 0 1rem !important;
  height: 4rem !important;
}

/* Main Content - Standard (for text-heavy pages like about, faq) */
.content-standard {
  max-width: 896px;    /* Tailwind max-w-4xl */
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* Main Content - Wide (for pricing, forms) */
.content-wide {
  max-width: 1024px;   /* Tailwind max-w-5xl */
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* Main Content - Full (for tool pages like watermark) */
.content-full {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* Footer Container - All pages use same width */
.footer-container {
  max-width: 1280px;   /* Tailwind max-w-7xl */
  padding: 3rem 1rem;
}

/* ==========================================
   STANDARDIZED CARD PADDING
   ========================================== */

.page-card {
  padding: 1rem;
  border-radius: 0.75rem;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Responsive card padding */
@media (min-width: 640px) {
  .page-card {
    padding: 2rem;
  }
}

/* ==========================================
   STANDARDIZED HEADINGS
   Prevents text jumping across pages
   ========================================== */

h1 {
  font-size: 1.875rem;      /* 30px */
  line-height: 2.25rem;     /* 36px */
  margin-bottom: 1rem;
  font-weight: 700;
}

@media (min-width: 640px) {
  h1 {
    font-size: 2.25rem;     /* 36px */
    line-height: 2.5rem;    /* 40px */
  }
}

h2 {
  font-size: 1.5rem;        /* 24px */
  line-height: 2rem;        /* 32px */
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

h3 {
  font-size: 1.125rem;      /* 18px */
  line-height: 1.75rem;     /* 28px */
  margin-bottom: 0.75rem;
  font-weight: 600;
}

/* ==========================================
   STANDARDIZED SPACING
   Use consistent gaps between sections
   ========================================== */

.section-spacing {
  margin-bottom: var(--space-6);  /* Always 48px between sections */
}

.card-spacing {
  gap: var(--space-3);            /* Always 24px between cards */
}

/* ==========================================
   RESPONSIVE ADJUSTMENTS
   ========================================== */

@media (max-width: 768px) {
  .content-standard,
  .content-wide,
  .content-full {
    padding: 1rem;
  }

  .footer-container {
    padding: 2rem 1rem;
  }
}

/* ==========================================
   FIX: Watermark.html specific overrides
   ========================================== */

/* Override watermark.html's inline CSS for consistency */
.watermark-page .top-nav-inner {
  max-width: 1400px !important;
  padding: 0 1rem !important;
}

.watermark-page .container {
  max-width: 1200px !important;
  padding: 2rem 1rem !important;
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */

/* Prevent layout shift on load */
.prevent-shift {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Consistent button sizing */
.btn-consistent {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .btn-consistent {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
}