/* ============================================================
   Alert / Notice — style.css
   Blockenberg plugin
   ============================================================ */

/* ── Wrapper ─────────────────────────────────────────────── */
.bkbg-al-wrap {
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* default = top; overridden by data-icon-pos */
    gap: var(--bkbg-al-gap-ic, 14px);
    padding: var(--bkbg-al-pad-t, 16px)
             var(--bkbg-al-pad-r, 20px)
             var(--bkbg-al-pad-b, 16px)
             var(--bkbg-al-pad-l, 20px);
    border-radius: var(--bkbg-al-radius, 8px);
    background-color: var(--bkbg-al-bg, #eff6ff);
    box-sizing: border-box;
}

/* ── Icon vertical alignment ────────────────────────────── */
.bkbg-al-wrap[data-icon-pos="top"]    { align-items: flex-start; }
.bkbg-al-wrap[data-icon-pos="center"] { align-items: center;     }

/* ── Border styles ──────────────────────────────────────── */
.bkbg-al-wrap[data-border="left"] {
    border-left: var(--bkbg-al-brd-w, 4px) solid var(--bkbg-al-border, #3b82f6);
}
.bkbg-al-wrap[data-border="top"] {
    border-top: var(--bkbg-al-brd-w, 4px) solid var(--bkbg-al-border, #3b82f6);
}
.bkbg-al-wrap[data-border="full"] {
    border: var(--bkbg-al-brd-w, 4px) solid var(--bkbg-al-border, #3b82f6);
}
/* data-border="none" — no rules needed; no border is the default reset */

/* ── Icon ───────────────────────────────────────────────── */
.bkbg-al-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--bkbg-al-icon-color, #3b82f6);
    line-height: 1;
}

.bkbg-al-icon svg {
    display: block;
}

/* ── Content column ─────────────────────────────────────── */
.bkbg-al-content {
    display: flex;
    flex-direction: column;
    gap: var(--bkbg-al-gap-tb, 4px);
    flex: 1;
    min-width: 0;
}

/* ── Title ──────────────────────────────────────────────── */
.bkbg-al-title,
.bkbg-al-wrap .bkbg-al-title {
    margin: 0;
    padding: 0;
    font-family: var(--bkbg-al-title-font-family, inherit);
    font-size:   var(--bkbg-al-title-font-size-d, var(--bkbg-al-title-font-size, var(--bkbg-al-title-size, 15px)));
    font-weight: var(--bkbg-al-title-font-weight, var(--bkbg-al-title-w, 700));
    font-style:  var(--bkbg-al-title-font-style, normal);
    text-transform: var(--bkbg-al-title-text-transform, none);
    text-decoration: var(--bkbg-al-title-text-decoration, none);
    line-height: var(--bkbg-al-title-line-height-d, var(--bkbg-al-title-line-height, 1.3));
    letter-spacing: var(--bkbg-al-title-letter-spacing-d, var(--bkbg-al-title-letter-spacing, normal));
    word-spacing: var(--bkbg-al-title-word-spacing-d, var(--bkbg-al-title-word-spacing, normal));
    color:       var(--bkbg-al-title, #1e3a5f);
}

/* ── Body ───────────────────────────────────────────────── */
.bkbg-al-body,
.bkbg-al-wrap .bkbg-al-body {
    margin: 0;
    padding: 0;
    font-family: var(--bkbg-al-body-font-family, inherit);
    font-size:   var(--bkbg-al-body-font-size-d, var(--bkbg-al-body-font-size, var(--bkbg-al-body-size, 14px)));
    font-weight: var(--bkbg-al-body-font-weight, var(--bkbg-al-body-w, 400));
    font-style:  var(--bkbg-al-body-font-style, normal);
    text-transform: var(--bkbg-al-body-text-transform, none);
    text-decoration: var(--bkbg-al-body-text-decoration, none);
    line-height: var(--bkbg-al-body-line-height-d, var(--bkbg-al-body-line-height, var(--bkbg-al-body-lh, 1.6)));
    letter-spacing: var(--bkbg-al-body-letter-spacing-d, var(--bkbg-al-body-letter-spacing, normal));
    word-spacing: var(--bkbg-al-body-word-spacing-d, var(--bkbg-al-body-word-spacing, normal));
    color:       var(--bkbg-al-text, #1d4ed8);
}

/* ── Responsive typography ─────────────────────────────── */
@media (max-width: 1024px) {
    .bkbg-al-title,
    .bkbg-al-wrap .bkbg-al-title {
        font-size: var(--bkbg-al-title-font-size-t, var(--bkbg-al-title-font-size-d, var(--bkbg-al-title-font-size, var(--bkbg-al-title-size, 15px))));
        line-height: var(--bkbg-al-title-line-height-t, var(--bkbg-al-title-line-height-d, var(--bkbg-al-title-line-height, 1.3)));
        letter-spacing: var(--bkbg-al-title-letter-spacing-t, var(--bkbg-al-title-letter-spacing-d, var(--bkbg-al-title-letter-spacing, normal)));
        word-spacing: var(--bkbg-al-title-word-spacing-t, var(--bkbg-al-title-word-spacing-d, var(--bkbg-al-title-word-spacing, normal)));
    }
    .bkbg-al-body,
    .bkbg-al-wrap .bkbg-al-body {
        font-size: var(--bkbg-al-body-font-size-t, var(--bkbg-al-body-font-size-d, var(--bkbg-al-body-font-size, var(--bkbg-al-body-size, 14px))));
        line-height: var(--bkbg-al-body-line-height-t, var(--bkbg-al-body-line-height-d, var(--bkbg-al-body-line-height, var(--bkbg-al-body-lh, 1.6))));
        letter-spacing: var(--bkbg-al-body-letter-spacing-t, var(--bkbg-al-body-letter-spacing-d, var(--bkbg-al-body-letter-spacing, normal)));
        word-spacing: var(--bkbg-al-body-word-spacing-t, var(--bkbg-al-body-word-spacing-d, var(--bkbg-al-body-word-spacing, normal)));
    }
}
@media (max-width: 767px) {
    .bkbg-al-title,
    .bkbg-al-wrap .bkbg-al-title {
        font-size: var(--bkbg-al-title-font-size-m, var(--bkbg-al-title-font-size-t, var(--bkbg-al-title-font-size-d, var(--bkbg-al-title-font-size, var(--bkbg-al-title-size, 15px)))));
        line-height: var(--bkbg-al-title-line-height-m, var(--bkbg-al-title-line-height-t, var(--bkbg-al-title-line-height-d, var(--bkbg-al-title-line-height, 1.3))));
        letter-spacing: var(--bkbg-al-title-letter-spacing-m, var(--bkbg-al-title-letter-spacing-t, var(--bkbg-al-title-letter-spacing-d, var(--bkbg-al-title-letter-spacing, normal))));
        word-spacing: var(--bkbg-al-title-word-spacing-m, var(--bkbg-al-title-word-spacing-t, var(--bkbg-al-title-word-spacing-d, var(--bkbg-al-title-word-spacing, normal))));
    }
    .bkbg-al-body,
    .bkbg-al-wrap .bkbg-al-body {
        font-size: var(--bkbg-al-body-font-size-m, var(--bkbg-al-body-font-size-t, var(--bkbg-al-body-font-size-d, var(--bkbg-al-body-font-size, var(--bkbg-al-body-size, 14px)))));
        line-height: var(--bkbg-al-body-line-height-m, var(--bkbg-al-body-line-height-t, var(--bkbg-al-body-line-height-d, var(--bkbg-al-body-line-height, var(--bkbg-al-body-lh, 1.6)))));
        letter-spacing: var(--bkbg-al-body-letter-spacing-m, var(--bkbg-al-body-letter-spacing-t, var(--bkbg-al-body-letter-spacing-d, var(--bkbg-al-body-letter-spacing, normal))));
        word-spacing: var(--bkbg-al-body-word-spacing-m, var(--bkbg-al-body-word-spacing-t, var(--bkbg-al-body-word-spacing-d, var(--bkbg-al-body-word-spacing, normal))));
    }
}

/* ── Editor: keep layout visible in block context ───────── */
.bkbg-al-wrap .bkbg-al-content {
    width: 100%;
}

/* ── When no icon: content takes full width ─────────────── */
.bkbg-al-wrap:not(:has(.bkbg-al-icon)) .bkbg-al-content {
    width: 100%;
}