/**
 * Summary Shortcode Styles
 *
 * Key takeaways / TL;DR box with various styles.
 * Styles: box, border-left, minimal
 *
 * @since 1.0.0
 */

/* ==========================================================================
   Container
   ========================================================================== */

.oe-summary {
    margin: 1.5em 0;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    border-radius: 10px;
}

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

.oe-summary__header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1rem;
}

.oe-summary__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--oe-color-primary);
}

.oe-summary__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--oe-color-primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

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

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

.oe-summary__item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
    font-size: 0.9375rem;
    color: #1e3a5f;
    line-height: 1.5;
}

.oe-summary__item:last-child {
    margin-bottom: 0;
}

/* Item icon */
.oe-summary__item-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--oe-color-primary);
}

.oe-summary__item-icon .oe-summary__icon {
    width: 20px;
    height: 20px;
}

/* Item number (for numbered lists) */
.oe-summary__item-number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: var(--oe-color-primary);
    border-radius: 50%;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

/* Item content */
.oe-summary__item-content {
    flex: 1;
}

/* Numbered list styling */
.oe-summary--numbered .oe-summary__list {
    counter-reset: none;
}

/* Legacy fallback for items without icon/number spans */
.oe-summary__item:not(:has(.oe-summary__item-icon)):not(:has(.oe-summary__item-number)) {
    position: relative;
    padding-left: 1.5rem;
    display: block;
}

.oe-summary__item:not(:has(.oe-summary__item-icon)):not(:has(.oe-summary__item-number))::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    background: var(--oe-color-primary);
    border-radius: 50%;
}

/* Highlight item */
.oe-summary__item--highlight {
    padding: 0.5rem 0.75rem;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
}

.oe-summary__item--highlight .oe-summary__item-content {
    font-weight: 600;
    color: var(--oe-color-primary-dark);
}

.oe-summary__item--highlight .oe-summary__item-number {
    background: var(--oe-color-primary-dark);
}

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

.oe-summary--border-left {
    background: transparent;
    border: none;
    border-left: 4px solid var(--oe-color-primary);
    border-radius: 0;
    padding: 0 0 0 1.25rem;
}

.oe-summary--border-left .oe-summary__title {
    color: var(--oe-color-text-dark);
}

.oe-summary--border-left .oe-summary__item {
    color: var(--oe-color-text);
}

.oe-summary--border-left .oe-summary__item--highlight {
    background: #eff6ff;
}

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

.oe-summary--minimal {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

.oe-summary--minimal .oe-summary__header {
    margin-bottom: 0.75rem;
}

.oe-summary--minimal .oe-summary__title {
    color: var(--oe-color-text-light);
    font-size: 0.875rem;
    font-weight: 600;
}

.oe-summary--minimal .oe-summary__icon {
    width: 18px;
    height: 18px;
    color: var(--oe-color-text-muted);
}

.oe-summary--minimal .oe-summary__item {
    color: var(--oe-color-text);
    padding-left: 1.25rem;
}

.oe-summary--minimal .oe-summary__item::before {
    width: 6px;
    height: 6px;
    background: var(--oe-color-text-muted);
}

/* ==========================================================================
   Color Variants
   ========================================================================== */

/* Green variant */
.oe-summary--green {
    background: linear-gradient(135deg, var(--oe-color-primary-tint) 0%, #d1fae5 100%);
    border-color: #a7f3d0;
}

.oe-summary--green .oe-summary__icon {
    color: var(--oe-color-primary-lighter);
}

.oe-summary--green .oe-summary__title {
    color: var(--oe-color-primary-dark);
}

.oe-summary--green .oe-summary__item::before {
    background: var(--oe-color-primary-lighter);
}

.oe-summary--green .oe-summary__item--highlight {
    color: var(--oe-color-primary-dark);
}

.oe-summary--green.oe-summary--border-left {
    border-left-color: var(--oe-color-primary-lighter);
}

/* Yellow variant */
.oe-summary--yellow {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fcd34d;
}

.oe-summary--yellow .oe-summary__icon {
    color: #d97706;
}

.oe-summary--yellow .oe-summary__title {
    color: #92400e;
}

.oe-summary--yellow .oe-summary__item {
    color: #78350f;
}

.oe-summary--yellow .oe-summary__item::before {
    background: #f59e0b;
}

.oe-summary--yellow .oe-summary__item--highlight {
    color: #92400e;
}

.oe-summary--yellow.oe-summary--border-left {
    border-left-color: #f59e0b;
}

/* Red variant */
.oe-summary--red {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: #fecaca;
}

.oe-summary--red .oe-summary__icon {
    color: var(--oe-color-error);
}

.oe-summary--red .oe-summary__title {
    color: #991b1b;
}

.oe-summary--red .oe-summary__item {
    color: #7f1d1d;
}

.oe-summary--red .oe-summary__item::before {
    background: var(--oe-color-error);
}

.oe-summary--red .oe-summary__item--highlight {
    color: #991b1b;
}

.oe-summary--red.oe-summary--border-left {
    border-left-color: var(--oe-color-error);
}

/* Purple variant */
.oe-summary--purple {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border-color: #e9d5ff;
}

.oe-summary--purple .oe-summary__icon {
    color: var(--oe-color-casino);
}

.oe-summary--purple .oe-summary__title {
    color: #6b21a8;
}

.oe-summary--purple .oe-summary__item {
    color: #581c87;
}

.oe-summary--purple .oe-summary__item::before {
    background: #8b5cf6;
}

.oe-summary--purple .oe-summary__item--highlight {
    color: #6b21a8;
}

.oe-summary--purple.oe-summary--border-left {
    border-left-color: #8b5cf6;
}

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

@media print {
    .oe-summary {
        break-inside: avoid;
        border: 2px solid var(--oe-color-primary);
        background: #fff !important;
    }

    .oe-summary__icon {
        display: none;
    }
}