/**
 * Block Spacing System
 * 
 * This CSS file implements a comprehensive block spacing system using
 * a block-type targeting approach. It sets consistent spacing between
 * different types of blocks throughout the site.
 */

/* ===== Spacing Variables ===== */
:root {
  /* Base spacing unit */
  --spacing-unit: 1rem;
  
  /* Spacing scale */
  --spacing-xs: calc(var(--spacing-unit) * 1);    /* 1rem */
  --spacing-sm: calc(var(--spacing-unit) * 2);    /* 2rem */
  --spacing-md: calc(var(--spacing-unit) * 3);    /* 3rem */
  --spacing-lg: calc(var(--spacing-unit) * 5);    /* 5rem */
  --spacing-xl: calc(var(--spacing-unit) * 8);    /* 8rem */
  
  /* Default block spacing */
  --block-spacing-default: var(--spacing-md);
  
  /* Default block padding */
  --block-padding-top: var(--spacing-md);
  --block-padding-bottom: var(--spacing-md);
}

/* ===== Global Block Padding ===== */

/* Apply default padding to all blocks */
.wp-block {
  /* padding-top: var(--block-padding-top); */
  /* padding-bottom: var(--block-padding-bottom); */
}

/* ===== Core WordPress Blocks ===== */

/* Paragraphs */
.wp-block-paragraph {
  margin-bottom: 1.5rem;
  padding-top: var(--block-padding-top);
  padding-bottom: var(--block-padding-bottom);
}

/* Headings */
.wp-block-heading {
  padding-top: var(--block-padding-top);
}

/* First heading in a section - no special rule needed since margins are removed */

/* Columns */
.wp-block-columns {
  padding-top: var(--block-padding-top);
  padding-bottom: var(--block-padding-bottom);
}

/* Groups */
.wp-block-group {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  padding-top: var(--block-padding-top);
  padding-bottom: var(--block-padding-bottom);
}

/* Cover blocks */
.wp-block-cover {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  padding-top: var(--block-padding-top);
  padding-bottom: var(--block-padding-bottom);
}

/* Images */
.wp-block-image {
  margin-top: var(--spacing-md);
  /* margin-bottom: var(--spacing-md); */
  padding-top: var(--block-padding-top);
  padding-bottom: var(--block-padding-bottom);
}

/* Buttons */
.wp-block-buttons {
  /* Margins and padding removed */
}

/* Lists */
.wp-block-list {
  /* margin-top: var(--spacing-sm); */
  /* margin-bottom: var(--spacing-md); */
  padding-top: var(--block-padding-top);
  padding-bottom: var(--block-padding-bottom);
}

/* Quotes */
.wp-block-quote {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  padding-top: var(--block-padding-top);
  padding-bottom: var(--block-padding-bottom);
}

/* Separators */
.wp-block-separator {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  padding-top: var(--block-padding-top);
  padding-bottom: var(--block-padding-bottom);
}

/* ===== Custom Blocks ===== */

/* Flexible Cards Block */
.flexible-cards-wrapper-full,
.flexible-cards-wrapper {
  padding-top: var(--block-padding-top);
  padding-bottom: var(--block-padding-bottom);
}

/* Testimonial Block */

/* Icon List Block */
.wp-block-wildapricot-icon-list {
  /* Margins and padding removed */
}

/* Simple Card Block */
.wp-block-wildapricot-simple-card {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  padding-top: var(--block-padding-top);
  padding-bottom: var(--block-padding-bottom);
}

/* WordPress Columns with specific classes */

/* WordPress Media & Text with specific classes */
.wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile {
  padding-top: var(--block-padding-top);
  padding-bottom: var(--block-padding-bottom);
}

/* ===== Special Cases ===== */

/* No special spacing rules needed for consecutive headings or heading+paragraph since margins are removed */

/* ===== Responsive Adjustments ===== */

/* Adjust spacing for mobile devices */
@media (max-width: 768px) {
  :root {
    /* Reduce spacing on mobile */
    --spacing-unit: 0.75rem;
  }
  
  /* Further reduce specific spacings */
  .wp-block-columns,
  .wp-block-group,
  .wp-block-cover {
    margin-top: 0px;
    margin-bottom: var(--spacing-md);
  }
  
  /* Adjust specific classes for mobile */
  
  .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile {
    /* No margins */
  }
}

/* ===== Editor Compatibility ===== */

/* Ensure spacing looks the same in the editor */
.editor-styles-wrapper .wp-block-paragraph,
.editor-styles-wrapper .wp-block-columns,
.editor-styles-wrapper .wp-block-group,
.editor-styles-wrapper .wp-block-cover,
.editor-styles-wrapper .wp-block-image,
.editor-styles-wrapper .wp-block-list,
.editor-styles-wrapper .wp-block-quote,
.editor-styles-wrapper .wp-block-separator,
.editor-styles-wrapper .wp-block-wildapricot-simple-card {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  padding-top: var(--block-padding-top);
  padding-bottom: var(--block-padding-bottom);
}

/* Editor styles for headings - no bottom padding */
.editor-styles-wrapper .wp-block-heading {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  padding-top: var(--block-padding-top);
}

/* Apply default padding to all blocks in editor */
.editor-styles-wrapper .wp-block {
  padding-top: var(--block-padding-top);
  padding-bottom: var(--block-padding-bottom);
}

/* Editor styles for specific block classes */

.editor-styles-wrapper .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile {
  /* No margins */
}

/* Editor style for testimonial block with increased bottom spacing */