/**
 * Editor styles — overrides on top of main.css to make the Gutenberg
 * editor preview blocks at full width using the frontend look.
 *
 * @package STSC
 */

/* The editor canvas wraps blocks in .editor-styles-wrapper. Make sure body-level
   tokens, fonts, and reset rules apply there too. */
.editor-styles-wrapper {
    font-family: var(--font-body);
    font-weight: var(--font-weight-light);
    color: var(--color-text-primary);
    line-height: 1.7;
    background: var(--color-white);
}

/* Let full-width sections (hero, trust-bar, cta-banner, footer, full-width-image)
   reach the edges of the canvas instead of being constrained to the default 840px
   block width. */
.editor-styles-wrapper .wp-block,
.editor-styles-wrapper [data-type^="acf/"],
.editor-styles-wrapper [data-type^="acf/"] .wp-block,
.editor-styles-wrapper [data-block-name^="acf/"] {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* ACF blocks render their own .container, sections, and padding — the editor
   adds its own outer margin we don't want. */
.editor-styles-wrapper [data-type^="acf/"] {
    margin-top: 0;
    margin-bottom: 0;
}

/* Tighten the wrapping that ACF puts around its preview output. */
.editor-styles-wrapper .acf-block-preview,
.editor-styles-wrapper .acf-block-component {
    padding: 0;
    background: transparent;
    border: 0;
}

/* The classic post editor still uses .editor-post-title — mirror the H1 type. */
.editor-styles-wrapper .editor-post-title__input,
.editor-styles-wrapper .wp-block-post-title {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: var(--font-weight-light);
    letter-spacing: 0.02em;
    text-transform: none;
}

/* Anchor reset: keep generic links visually quiet in the editor canvas
   like they are on the frontend, but DON'T force colour on .btn* — those
   define their own foreground via .btn--primary, .btn--secondary, etc.,
   and the editor-wrapper-prefixed selector here would otherwise out-
   specificity them. */
.editor-styles-wrapper a:not([class*="btn"]) {
    text-decoration: none;
}

/* Placeholder shown by render templates that bail out early when their
   field data is empty — gives the user something visible to click on. */
.acf-block-placeholder {
    display: block;
    padding: var(--space-5) var(--space-6);
    margin: 0;
    background: var(--color-grey-lightest);
    border: 1px dashed var(--color-border);
    border-radius: var(--border-radius);
    color: var(--color-grey-mid);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
}

/* Scroll-triggered animations rely on JS adding .is-visible at view time.
   That JS never runs in the editor, so blocks using `.fade-in-up` (services
   grid, split section, brands bar, steps, testimonials, faq section) end
   up stuck at `opacity:0`. Force them visible inside the editor canvas. */
.editor-styles-wrapper .fade-in-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* When the editor renders a block via REST that returns an empty body,
   surface a tiny hint instead of a totally invisible drop zone. */
.editor-styles-wrapper [data-type^="acf/"]:empty::after,
.editor-styles-wrapper [data-block-name^="acf/"]:empty::after {
    content: 'Block has no preview yet — select it to edit fields.';
    display: block;
    padding: var(--space-5);
    color: var(--color-grey-mid);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    background: var(--color-grey-lightest);
    border: 1px dashed var(--color-border);
}