/**
 * Summary Shortcode Styles
 *
 * BEM naming convention: .bf-summary (block), __element, --modifier
 * Three style variants: box, border-left, minimal
 *
 * @since 1.1.0
 */

/* Base container */
.bf-summary {
    margin: 1.5em 0;
    font-family: inherit;
}

/* ==========================================================================
   Style: Box (default)
   ========================================================================== */

.bf-summary--box {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
    border-radius: 12px;
    padding: 20px;
}

/* ==========================================================================
   Style: Border Left
   ========================================================================== */

.bf-summary--border-left {
    border-left: 4px solid #10b981;
    padding-left: 20px;
    background: transparent;
}

/* ==========================================================================
   Style: Minimal
   ========================================================================== */

.bf-summary--minimal {
    background: #f9fafb;
    padding: 16px;
    border-radius: 8px;
}

/* ==========================================================================
   Header
   ========================================================================== */

.bf-summary__header {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 0.75em;
}

.bf-summary__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #059669;
}

.bf-summary__title {
    margin: 0;
    font-size: 1.125em;
    font-weight: 600;
    line-height: 1.3;
    color: #065f46;
}

/* ==========================================================================
   List
   ========================================================================== */

.bf-summary__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bf-summary__item {
    display: flex;
    align-items: flex-start;
    gap: 0.625em;
    padding: 0.375em 0;
    line-height: 1.5;
    color: #1f2937;
}

.bf-summary__item:first-child {
    padding-top: 0;
}

.bf-summary__item:last-child {
    padding-bottom: 0;
}

/* Highlight modifier */
.bf-summary__item--highlight {
    font-weight: 600;
    color: #065f46;
}

/* Item icons */
.bf-summary__item-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 0.125em;
    color: #10b981;
}

/* Bullet style */
.bf-summary__item-bullet {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    margin-top: 0.5em;
    background: #10b981;
    border-radius: 50%;
}

/* Number style */
.bf-summary__item-number {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 0.0625em;
    background: #10b981;
    color: #fff;
    font-size: 0.75em;
    font-weight: 600;
    border-radius: 50%;
}

/* Item content - support links */
.bf-summary__item a {
    color: #059669;
    text-decoration: underline;
}

.bf-summary__item a:hover {
    text-decoration: none;
}

/* ==========================================================================
   Single-line mode
   ========================================================================== */

.bf-summary--single {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25em;
}

.bf-summary__label {
    display: inline-flex;
    align-items: center;
    gap: 0.375em;
    color: #065f46;
    font-weight: 600;
}

.bf-summary__label .bf-summary__icon {
    width: 18px;
    height: 18px;
}

.bf-summary__text {
    color: #1f2937;
    line-height: 1.5;
}

/* ==========================================================================
   Style-specific adjustments
   ========================================================================== */

/* Border-left style */
.bf-summary--border-left .bf-summary__title {
    color: #1f2937;
}

.bf-summary--border-left .bf-summary__icon {
    color: #10b981;
}

/* Minimal style */
.bf-summary--minimal .bf-summary__title {
    color: #374151;
}

.bf-summary--minimal .bf-summary__icon {
    color: #6b7280;
}

.bf-summary--minimal .bf-summary__item-icon {
    color: #6b7280;
}

.bf-summary--minimal .bf-summary__item-bullet {
    background: #6b7280;
}

.bf-summary--minimal .bf-summary__item-number {
    background: #6b7280;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 600px) {
    .bf-summary--box,
    .bf-summary--minimal {
        padding: 16px;
        border-radius: 8px;
    }

    .bf-summary--border-left {
        padding-left: 16px;
    }

    .bf-summary__title {
        font-size: 1em;
    }

    .bf-summary__icon {
        width: 20px;
        height: 20px;
    }
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    /* Box style */
    .bf-summary--box {
        background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
        border-color: #059669;
    }

    .bf-summary--box .bf-summary__title {
        color: #f9fafb;
    }

    .bf-summary--box .bf-summary__icon {
        color: #34d399;
    }

    .bf-summary--box .bf-summary__item {
        color: #e5e7eb;
    }

    .bf-summary--box .bf-summary__item--highlight {
        color: #a7f3d0;
    }

    .bf-summary--box .bf-summary__item-icon {
        color: #34d399;
    }

    .bf-summary--box .bf-summary__item-bullet {
        background: #34d399;
    }

    .bf-summary--box .bf-summary__item-number {
        background: #34d399;
        color: #064e3b;
    }

    .bf-summary--box .bf-summary__label {
        color: #a7f3d0;
    }

    .bf-summary--box .bf-summary__text {
        color: #e5e7eb;
    }

    /* Border-left style */
    .bf-summary--border-left {
        border-color: #059669;
    }

    .bf-summary--border-left .bf-summary__title {
        color: #f9fafb;
    }

    .bf-summary--border-left .bf-summary__item {
        color: #e5e7eb;
    }

    /* Minimal style */
    .bf-summary--minimal {
        background: #1f2937;
    }

    .bf-summary--minimal .bf-summary__title {
        color: #f9fafb;
    }

    .bf-summary--minimal .bf-summary__icon {
        color: #9ca3af;
    }

    .bf-summary--minimal .bf-summary__item {
        color: #e5e7eb;
    }

    .bf-summary--minimal .bf-summary__item-icon {
        color: #9ca3af;
    }

    .bf-summary--minimal .bf-summary__item-bullet {
        background: #9ca3af;
    }

    .bf-summary--minimal .bf-summary__item-number {
        background: #9ca3af;
        color: #1f2937;
    }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
    .bf-summary {
        background: none !important;
        border: 1px solid #ccc;
        page-break-inside: avoid;
    }

    .bf-summary--border-left {
        border: none;
        border-left: 3px solid #333;
    }

    .bf-summary__icon,
    .bf-summary__item-icon {
        display: none;
    }

    .bf-summary__item-bullet {
        background: #333;
    }

    .bf-summary__item-number {
        background: #333;
        color: #fff;
    }
}