/**
 * @package     Creske.Plugin
 * @subpackage  Content.Inset
 *
 * Inset Plugin Styles
 * 
 * Professional information box/inset styles with multiple visual themes,
 * column layouts, and responsive design.
 */

/* ============================================================================
   CSS Custom Properties (Variables)
   ============================================================================ */
:root {
    --inset-border-color: #dee2e6;
    --inset-accent-color: #0d6efd;
    --inset-bg-color: #f8f9fa;
    --inset-text-color: inherit;
    --inset-title-color: #212529;
    --inset-shadow-color: rgba(0, 0, 0, 0.1);
    --inset-padding: 1.25rem;
    --inset-gap: 1.5rem;
}

/* ============================================================================
   Base Inset Box Styles
   ============================================================================ */
.inset-box {
    position: relative;
    margin: 1.5rem 0;
    padding: var(--inset-padding);
    background-color: var(--inset-bg-color);
    border: 1px solid var(--inset-border-color);
    border-radius: 0.375rem;
    font-size: 0.95rem;
    line-height: 1.6;
    box-sizing: border-box;
}

.inset-box *,
.inset-box *::before,
.inset-box *::after {
    box-sizing: border-box;
}

/* ============================================================================
   Position Variants
   ============================================================================ */
.inset-position-left {
    margin-left: 0;
    margin-right: auto;
}

.inset-position-center {
    margin-left: auto;
    margin-right: auto;
}

.inset-position-right {
    margin-left: auto;
    margin-right: 0;
}

/* ============================================================================
   Float / Text Wrap
   ============================================================================ */
.inset-float-left {
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
    margin-left: 0;
    clear: left;
}

.inset-float-right {
    float: right;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
    margin-right: 0;
    clear: right;
}

/* Clear float after inset in specific contexts */
.inset-float-left + .inset-float-right,
.inset-float-right + .inset-float-left {
    clear: none;
}

/* Clearfix utility - add to parent if needed */
.inset-clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* ============================================================================
   Title Styles
   ============================================================================ */
.inset-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--inset-border-color);
}

.inset-title-text {
    margin: 0;
    padding: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--inset-title-color, #212529);
    line-height: 1.3;
}

/* ============================================================================
   Icon Styles
   ============================================================================ */
.inset-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Icon variants using CSS-only symbols */
.inset-icon-info::before {
    content: "ℹ";
    color: #0d6efd;
}

.inset-icon-warning::before {
    content: "⚠";
    color: #ffc107;
}

.inset-icon-tip::before {
    content: "💡";
}

.inset-icon-note::before {
    content: "📝";
}

.inset-icon-alert::before {
    content: "🔔";
}

.inset-icon-success::before {
    content: "✓";
    color: #198754;
    font-weight: bold;
}

.inset-icon-error::before {
    content: "✕";
    color: #dc3545;
    font-weight: bold;
}

.inset-icon-quote::before {
    content: "❝";
    color: #6c757d;
}

/* ============================================================================
   Content Styles
   ============================================================================ */
.inset-content {
    color: var(--inset-text-color, inherit);
}

.inset-content p,
.inset-content li,
.inset-content span,
.inset-content div {
    color: inherit;
}

.inset-content p:first-child {
    margin-top: 0;
}

.inset-content p:last-child {
    margin-bottom: 0;
}

.inset-content ul,
.inset-content ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.inset-content li {
    margin-bottom: 0.25rem;
}

.inset-content a {
    color: var(--inset-accent-color);
    text-decoration: underline;
}

.inset-content a:hover {
    text-decoration: none;
}

/* ============================================================================
   Column Layouts
   ============================================================================ */
.inset-columns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inset-gap);
}

/* Single column */
.inset-columns-1 .inset-columns {
    flex-direction: column;
}

.inset-columns-1 .inset-column {
    width: 100%;
}

/* Two columns */
.inset-columns-2 .inset-column {
    flex: 1 1 calc(50% - var(--inset-gap) / 2);
    min-width: 200px;
}

/* Three columns */
.inset-columns-3 .inset-column {
    flex: 1 1 calc(33.333% - var(--inset-gap) * 2 / 3);
    min-width: 180px;
}

/* Column styling */
.inset-column {
    display: flex;
    flex-direction: column;
}

.inset-column-title {
    margin: 0 0 0.5rem 0;
    padding: 0 0 0.5rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--inset-title-color, #212529);
    border-bottom: 1px solid var(--inset-border-color);
}

.inset-column-content {
    flex: 1;
    color: var(--inset-text-color, inherit);
}

/* ============================================================================
   Style Variants
   ============================================================================ */

/* Simple - Clean, subtle appearance (default) */
.inset-style-simple {
    border: 1px solid var(--inset-border-color);
    background-color: var(--inset-bg-color);
}

/* Bordered - Prominent border */
.inset-style-bordered {
    border: 2px solid var(--inset-border-color);
    background-color: var(--inset-bg-color);
}

/* Shadowed - Soft shadow for depth */
.inset-style-shadowed {
    border: 1px solid var(--inset-border-color);
    background-color: var(--inset-bg-color);
    box-shadow: 0 4px 12px var(--inset-shadow-color),
                0 2px 4px rgba(0, 0, 0, 0.06);
}

/* Elegant - Refined with accent top border */
.inset-style-elegant {
    border: 1px solid var(--inset-border-color);
    border-top: 4px solid var(--inset-accent-color);
    background-color: var(--inset-bg-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.inset-style-elegant .inset-title {
    border-bottom-color: transparent;
}

.inset-style-elegant .inset-title-text {
    color: var(--inset-accent-color);
}

/* Accent - Left border highlight */
.inset-style-accent {
    border: 1px solid var(--inset-border-color);
    border-left: 4px solid var(--inset-accent-color);
    background-color: var(--inset-bg-color);
}

.inset-style-accent .inset-title {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

/* Minimal - Very subtle styling */
.inset-style-minimal {
    border: 1px solid rgba(0, 0, 0, 0.08);
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.01));
}

.inset-style-minimal .inset-title {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

/* ============================================================================
   Border Radius Variants
   ============================================================================ */
.inset-radius-none {
    border-radius: 0;
}

.inset-radius-small {
    border-radius: 0.25rem;
}

.inset-radius-medium {
    border-radius: 0.375rem;
}

.inset-radius-large {
    border-radius: 0.75rem;
}

/* ============================================================================
   Responsive Styles
   ============================================================================ */
@media (max-width: 768px) {
    .inset-box {
        padding: 1rem;
        margin: 1rem 0;
    }

    /* Disable float on mobile - stack insets */
    .inset-float-left,
    .inset-float-right {
        float: none;
        margin-left: 0;
        margin-right: 0;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Stack columns on mobile */
    .inset-columns-2 .inset-column,
    .inset-columns-3 .inset-column {
        flex: 1 1 100%;
    }

    .inset-columns {
        gap: 1rem;
    }

    /* Add visual separator between stacked columns */
    .inset-columns-2 .inset-column + .inset-column,
    .inset-columns-3 .inset-column + .inset-column {
        padding-top: 1rem;
        border-top: 1px dashed var(--inset-border-color);
    }

    .inset-title-text {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .inset-box {
        padding: 0.875rem;
        font-size: 0.9rem;
    }

    .inset-title-text {
        font-size: 0.95rem;
    }

    .inset-column-title {
        font-size: 0.9rem;
    }
}

/* ============================================================================
   Dark Mode Support
   ============================================================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --inset-border-color: #495057;
        --inset-bg-color: #343a40;
        --inset-text-color: #e9ecef;
        --inset-title-color: #f8f9fa;
        --inset-shadow-color: rgba(0, 0, 0, 0.3);
    }

    .inset-style-minimal {
        border-color: rgba(255, 255, 255, 0.1);
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    }

    .inset-style-minimal .inset-title {
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    .inset-content a {
        color: #6ea8fe;
    }
}

/* ============================================================================
   Print Styles
   ============================================================================ */
@media print {
    .inset-box {
        border: 1px solid #000;
        background-color: #f5f5f5 !important;
        box-shadow: none !important;
        page-break-inside: avoid;
        margin: 1rem 0;
    }

    .inset-style-elegant,
    .inset-style-accent {
        border-top-width: 3px;
        border-left-width: 3px;
    }

    .inset-columns {
        display: block;
    }

    .inset-column {
        width: 100% !important;
        flex: none !important;
    }

    .inset-column + .inset-column {
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px dashed #999;
    }
}

/* ============================================================================
   Animation (Subtle entrance effect)
   ============================================================================ */
@keyframes inset-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.inset-box {
    animation: inset-fade-in 0.3s ease-out;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .inset-box {
        animation: none;
    }
}

/* ============================================================================
   High Contrast Mode Support
   ============================================================================ */
@media (forced-colors: active) {
    .inset-box {
        border: 2px solid CanvasText;
        background-color: Canvas;
    }

    .inset-title {
        border-bottom: 1px solid CanvasText;
    }

    .inset-icon::before {
        color: CanvasText;
    }
}