/*
 * Block-editor iframe overrides
 * Loaded only inside the Gutenberg editor (via enqueue_block_editor_assets).
 * Goal: approximate the live render so the user can compose with confidence.
 * Not pixel-perfect — Gutenberg has its own toolbars/insertion UI that
 * intrude on the canvas.
 */

/* Editor canvas: dark background to match the live theme */
body.editor-styles-wrapper,
body.block-editor-iframe__body,
.editor-styles-wrapper {
    background-color: #0a0a0a !important;
    color: #ffffff;
    font-family: 'Karla', 'Helvetica Neue', Arial, sans-serif;
}

/* Brand colour helpers — already defined in style.css, but redeclare so the
   editor iframe doesn't lose them when CSS variables don't propagate */
.editor-styles-wrapper .brand-red,
.editor-styles-wrapper .hero-title .brand-red {
    color: #c8102e !important;
}
.editor-styles-wrapper .brand-gold,
.editor-styles-wrapper .hero-title .brand-gold {
    color: #f0c030 !important;
}
.editor-styles-wrapper .brand-name {
    font-family: 'fritz-kola', 'Karla', 'Helvetica Neue', Arial, sans-serif !important;
}

/* Make custom-html blocks visually obvious (they show code by default) so
   the user understands which sections are design-locked vs editable */
.editor-styles-wrapper .wp-block-html .block-editor-plain-text,
.editor-styles-wrapper .wp-block-html textarea {
    background: rgba(240,192,48,0.05) !important;
    border-left: 3px solid rgba(240,192,48,0.4) !important;
    color: rgba(255,255,255,0.7) !important;
    font-family: ui-monospace, 'Menlo', monospace !important;
    font-size: 0.78rem !important;
    padding: 12px 14px !important;
}

/* Tone down extreme hero font size in editor — fits canvas without overflow */
.editor-styles-wrapper .hero-title {
    font-size: clamp(2rem, 5vw, 3.6rem) !important;
}

/* Constrain hero visual logo so it doesn't dominate the editor canvas */
.editor-styles-wrapper .hero-fritz-logo {
    max-width: 200px !important;
}

/* Group-block inner padding: keep our patterns from collapsing against the
   editor iframe edge */
.editor-styles-wrapper .wp-block-group.hero-section,
.editor-styles-wrapper .wp-block-group.about-section,
.editor-styles-wrapper .wp-block-group.preorder-section,
.editor-styles-wrapper .wp-block-group.range-section,
.editor-styles-wrapper .wp-block-group.impressum-section {
    padding: 60px 24px !important;
    margin: 0 !important;
}

/* Section labels + titles: ensure brand colour shows even with editor's
   default text colour overrides */
.editor-styles-wrapper .section-label {
    color: #f0c030 !important;
}
.editor-styles-wrapper .section-title {
    color: #ffffff !important;
}

/* Range section: keep bottle cards visible against the dark editor canvas */
.editor-styles-wrapper .range-section .bottle-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 24px 16px;
    border-radius: 10px;
    min-height: 280px;
}
.editor-styles-wrapper .range-section .bottle-card .wp-block-image img {
    max-height: 220px;
    object-fit: contain;
    margin: 0 auto;
}

/* Coming-band: red background even in editor */
.editor-styles-wrapper #coming-band {
    background: #c8102e;
    padding: 40px 24px;
    text-align: center;
    color: #fff;
}
.editor-styles-wrapper .coming-band-text {
    color: #fff !important;
    font-weight: 800;
    font-size: 1.4rem;
}