/* ============================================================
   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-size:   var(--bkbg-al-title-size, 15px);
    font-weight: var(--bkbg-al-title-w, 700);
    color:       var(--bkbg-al-title, #1e3a5f);
    line-height: 1.3;
}

/* ── Body ───────────────────────────────────────────────── */
.bkbg-al-body,
.bkbg-al-wrap .bkbg-al-body {
    margin: 0;
    padding: 0;
    font-size:   var(--bkbg-al-body-size, 14px);
    font-weight: var(--bkbg-al-body-w, 400);
    line-height: var(--bkbg-al-body-lh, 1.6);
    color:       var(--bkbg-al-text, #1d4ed8);
}

/* ── 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%;
}