/* 
 * Wix-Standard Typography System for DDAI
 * Implements consistent font sizes and spacing following Wix design standards
 * Uses Montserrat font family throughout the application
 */

/* Base Font Family - Safe selectors that don't break icons */
body, html, input, button, select, textarea, 
.btn, .form-control, .form-select, .form-label,
p, h1, h2, h3, h4, h5, h6, 
.navbar-nav, .nav-link, .navbar-brand {
  font-family: 'Montserrat', sans-serif;
}

/* Note: Icon fonts (.fa, .bi, etc.) are not overridden to prevent conflicts */

/* Wix Typography Standards */
:root {
  /* Font Sizes - Wix Standards */
  --font-size-h1: 30px;           /* H1: 24-36px range - using 30px for hero sections */
  --font-size-h1-large: 36px;     /* Large H1 for major hero sections */
  --font-size-h2: 27px;           /* H2: 24-30px range - using 27px for major sections */  
  --font-size-h3: 21px;           /* H3: 18-24px range - using 21px for subsections */
  --font-size-body: 16px;         /* Body: 14-18px range - using 16px for readability */
  --font-size-small: 14px;        /* Small text - minimum of body range */
  
  /* Line Heights for better readability */
  --line-height-heading: 1.3;     /* Tighter line height for headings */
  --line-height-body: 1.6;        /* More spacious for body text */
  
  /* Font Weights */
  --font-weight-bold: 600;        /* Semi-bold for headings */
  --font-weight-normal: 400;      /* Normal for body text */
  
  /* Spacing - Reduced for Wix-style consistency */
  --spacing-section: 3rem;        /* Between major sections - reduced from Bootstrap defaults */
  --spacing-component: 2rem;      /* Between components within sections */
  --spacing-element: 1rem;        /* Between related elements */
  --spacing-tight: 0.5rem;        /* For closely related content */
}

/* Base Typography Reset */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  margin-bottom: var(--spacing-element);
  color: var(--color-dark);
}

p, .lead, .text-body {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-normal);
  margin-bottom: var(--spacing-element);
  color: var(--color-dark);
}

/* Wix Standard Heading Classes */
.wix-h1, h1.wix-h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-element);
}

.wix-h1-large, h1.wix-h1-large {
  font-size: var(--font-size-h1-large);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-element);
}

.wix-h2, h2.wix-h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-element);
}

.wix-h3, h3.wix-h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-element);
}

.wix-body, p.wix-body {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-normal);
  margin-bottom: var(--spacing-element);
}

.wix-small, small.wix-small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-normal);
}

/* Wix Spacing Utilities - Reduced spacing for modern look */
.wix-section-spacing {
  padding: var(--spacing-section) 0;
}

.wix-component-spacing {
  margin-bottom: var(--spacing-component);
}

.wix-element-spacing {
  margin-bottom: var(--spacing-element);
}

.wix-tight-spacing {
  margin-bottom: var(--spacing-tight);
}

/* Remove excessive spacing */
.wix-no-margin { margin: 0 !important; }
.wix-no-margin-bottom { margin-bottom: 0 !important; }
.wix-no-margin-top { margin-top: 0 !important; }

/* Card and Component Spacing */
.card.wix-card {
  margin-bottom: var(--spacing-component);
}

.card.wix-card .card-body {
  padding: var(--spacing-component);
}

.card.wix-card .card-title {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-element);
}

.card.wix-card .card-text {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  margin-bottom: var(--spacing-element);
}

/* Button Typography */
.btn.wix-btn {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  padding: 0.75rem 2rem;
  border-radius: 0.375rem;
}

.btn.wix-btn-large {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  padding: 1rem 2.5rem;
}

/* Navigation Typography */
.navbar .nav-link {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
}

.navbar-brand {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
}

/* Footer Typography */
footer {
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
}

/* List Styling */
ul.wix-list, ol.wix-list {
  margin-bottom: var(--spacing-element);
}

ul.wix-list li, ol.wix-list li {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  margin-bottom: var(--spacing-tight);
}

/* Responsive Typography */
@media (max-width: 768px) {
  :root {
    --font-size-h1: 26px;           /* Slightly smaller on mobile */
    --font-size-h1-large: 30px;     
    --font-size-h2: 24px;           
    --font-size-h3: 20px;           
    --font-size-body: 15px;         
    --spacing-section: 2rem;        /* Tighter spacing on mobile */
    --spacing-component: 1.5rem;    
  }
}

@media (max-width: 576px) {
  :root {
    --font-size-h1: 24px;           /* Minimum range for mobile */
    --font-size-h1-large: 28px;     
    --font-size-h2: 22px;           
    --font-size-h3: 18px;           
    --font-size-body: 14px;         
    --spacing-section: 1.5rem;      
    --spacing-component: 1rem;      
  }
}

/* Hero Section Specific */
.hero-title {
  font-size: var(--font-size-h1-large);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  margin-bottom: var(--spacing-element);
}

.hero-subtitle {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-body);
  margin-bottom: var(--spacing-component);
}

/* Section Title Consistency */
.section-title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  text-align: center;
  margin-bottom: var(--spacing-component);
}

.section-subtitle {
  font-size: var(--font-size-body);
  text-align: center;
  margin-bottom: var(--spacing-component);
  color: var(--color-gray);
}

/* FAQ Specific */
.faq-question {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-tight);
}

.faq-answer {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  margin-bottom: var(--spacing-element);
}

/* Pricing Table Typography */
.pricing-plan .plan-name {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-tight);
}

.pricing-plan .plan-price {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-element);
}

.pricing-plan .plan-feature {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  margin-bottom: var(--spacing-tight);
}

/* Override Bootstrap excessive margins */
.mb-5 { margin-bottom: var(--spacing-section) !important; }
.mb-4 { margin-bottom: var(--spacing-component) !important; }
.mb-3 { margin-bottom: var(--spacing-element) !important; }
.mb-2 { margin-bottom: var(--spacing-tight) !important; }

.mt-5 { margin-top: var(--spacing-section) !important; }
.mt-4 { margin-top: var(--spacing-component) !important; }
.mt-3 { margin-top: var(--spacing-element) !important; }
.mt-2 { margin-top: var(--spacing-tight) !important; }

.py-6 { padding-top: var(--spacing-section) !important; padding-bottom: var(--spacing-section) !important; }
.py-5 { padding-top: var(--spacing-component) !important; padding-bottom: var(--spacing-component) !important; }
.py-4 { padding-top: var(--spacing-element) !important; padding-bottom: var(--spacing-element) !important; }