/* ============================================================
   08-GUTENBERG.CSS
   Gutenberg Adapter
   ============================================================ */

.wp-block-group.alignwide {
    max-width: var(--cd-container-max);
    margin-inline: auto;
}

.wp-block-group.alignfull {
    width: 100%;
    max-width: none;
}

.wp-block-heading {
    font-family: var(--cd-font-heading);
    font-weight: var(--cd-fw-bold);
    color: var(--cd-color-dark);
}

.wp-block-paragraph.has-large-font-size {
    font-size: var(--cd-fs-h4);
}

.wp-block-paragraph.has-small-font-size {
    font-size: var(--cd-fs-small);
}


/* ============================================================
   BUTTONS
   Verwendet zentrale Tokens
   ============================================================ */

.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cd-space-sm);
}

.wp-block-button {
    margin: 0;
}

.wp-block-button__link,
.wp-element-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 0.85em 1.75em;

    border: var(--cd-button-border);
    border-radius: var(--cd-button-radius);

    font-family: var(--cd-font-body);
    font-weight: var(--cd-fw-semibold);
    font-size: var(--cd-fs-body);

    color: var(--cd-button-text);
    background: var(--cd-button-bg);

    text-decoration: none;

    transition:
        background-color var(--cd-transition-base),
        border-color var(--cd-transition-base),
        color var(--cd-transition-base),
        transform var(--cd-transition-fast);
}

.wp-block-button__link:hover,
.wp-element-button:hover {
    color: var(--cd-button-text-hover);
    background: var(--cd-button-bg-hover);
    border-color: var(--cd-button-bg-hover);
}

.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
    outline: none;
    box-shadow: var(--cd-focus-ring);
}

.wp-block-button__link:active,
.wp-element-button:active {
    transform: translateY(1px);
}


/* Outline */

.wp-block-button.is-style-outline
> .wp-block-button__link {
    color: var(--cd-color-primary);
    background: transparent;
    border-color: var(--cd-color-primary);
}

.wp-block-button.is-style-outline
> .wp-block-button__link:hover {
    color: var(--cd-color-white);
    background: var(--cd-color-primary);
}


/* ============================================================
   IMAGE
   ============================================================ */

.wp-block-image.is-style-rounded img {
    border-radius: var(--cd-radius-md);
}

.wp-block-image figcaption {
    margin-top: var(--cd-space-xs);

    font-size: var(--cd-fs-small);
    color: var(--cd-color-text-muted);

    text-align: center;
}


/* ============================================================
   COVER
   ============================================================ */

.wp-block-cover {
    border-radius: var(--cd-radius-md);
    overflow: hidden;
}

.wp-block-cover :where(h1,h2,h3,h4,h5,h6,p,li) {
    color: inherit;
}


/* ============================================================
   QUOTE
   ============================================================ */

.wp-block-quote {
    margin: var(--cd-space-lg) 0;
    padding-left: var(--cd-space-md);

    border-left: 4px solid var(--cd-color-primary);

    font-family: var(--cd-font-body);
}


/* ============================================================
   LIST
   ============================================================ */

.wp-block-list {
    line-height: var(--cd-lh-relaxed);
}

.wp-block-list li::marker {
    color: var(--cd-color-primary);
}


/* ============================================================
   TABLE
   ============================================================ */

.wp-block-table {
    overflow-x: auto;
}

.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
    padding: var(--cd-space-sm) var(--cd-space-md);
    border: 1px solid var(--cd-color-border);
    text-align: left;
}

.wp-block-table th {
    font-weight: var(--cd-fw-semibold);
    background: var(--cd-color-surface-muted);
}


/* ============================================================
   COLUMNS
   ============================================================ */

.wp-block-columns {
    gap: var(--cd-space-md);
}


/* ============================================================
   SEPARATOR
   ============================================================ */

.wp-block-separator {
    margin: var(--cd-space-xl) 0;
    border: 0;
    border-top: 1.5px solid var(--cd-color-accent);
}


/* ============================================================
   EDITOR
   ============================================================ */

.editor-styles-wrapper {
    font-family: var(--cd-font-body);
    color: var(--cd-color-text);
    background: var(--cd-color-white);
}


/* ============================================================
   GUTENBERG COLORS
   ============================================================ */

.has-primary-color {
    color: var(--cd-color-primary) !important;
}

.has-accent-color {
    color: var(--cd-color-accent) !important;
}

.has-text-color {
    color: var(--cd-color-text) !important;
}

.has-white-color {
    color: var(--cd-color-white) !important;
}

.has-primary-background-color {
    background-color: var(--cd-color-primary) !important;
}

.has-accent-background-color {
    background-color: var(--cd-color-accent) !important;
}

.has-tint-background-color {
    background-color: var(--cd-color-primary-tint) !important;
}

.has-dark-background-color {
    background-color: var(--cd-color-dark) !important;
}

.has-primary-background-color,
.has-dark-background-color {
    color: var(--cd-color-white);
}