/**
 * Shared assets for ACF Blocks v3 editor iframe (and block editorStyle chain).
 * Tokens + layout + typography + buttons — same variables/utilities as main.css.
 * Block-specific rules stay in acf-blocks/<slug>/style.css.
 */

@import "base/tokens.css";
@import "base/layout.css";
@import "base/utilities.css";
@import "base/typography.css";
@import "base/buttons.css";
@import "base/local-waves.css";
@import "base/local-grass-divider.css";

/* ACF v3 preview wrapper (iframe body uses editor-styles-wrapper). */
.acf-block-preview .acf-hero,
.block-editor-iframe__body .acf-hero {
  color: var(--color-light);
}

/* Full-width block shells in the iframe — avoid theme content max-width squeezing grids.
   Blog posts use editor-post.css (768px column) instead. */
.block-editor-iframe__body:not(.post-type-post) .is-root-container,
.block-editor-iframe__body:not(.post-type-post) .wp-block-post-content,
.acf-block-preview .is-root-container {
  max-width: none !important;
}

.block-editor-iframe__body .wp-block[class*="wp-block-acf-"],
.acf-block-preview .wp-block[class*="wp-block-acf-"] {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Blog category pill — mirror site.css for ACF iframe preview. */
.bpa-blog-category-pill,
.acf-blog-section__category-pill,
.acf-featured-blog-section__category-pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  box-sizing: border-box;
  gap: var(--blog-category-pill-gap, 10px);
  inline-size: fit-content;
  max-inline-size: 100%;
  block-size: var(--blog-category-pill-height, 44px);
  min-block-size: var(--blog-category-pill-height, 44px);
  padding-block: var(--blog-category-pill-pad-block, 8px);
  padding-inline: var(--blog-category-pill-pad-inline, 16px);
  border: 1px solid var(--color-franchise-green-bright, #30b454);
  border-radius: var(--radius-category-pill, 80px);
  background-color: var(--color-light);
  font-family: var(--font-family-base);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  line-height: 1.75rem;
  color: var(--color-brand-forest);
  white-space: nowrap;
}

.acf-blog-section.text-light .acf-blog-section__card .bpa-blog-category-pill,
.acf-blog-section.text-light .acf-blog-section__card .acf-blog-section__category-pill {
  background-color: var(--color-light);
  color: var(--color-brand-forest);
}