/* sidebar.css */

:root {
    --sb-font:            inherit;
    --sb-radius:          6px;
    --sb-gap:             1.25rem;

    --sb-bg:              #f8f7f4;
    --sb-border:          #ddd8cf;
    --sb-text:            #1a1714;
    --sb-text-muted:      #5a5650;
    --sb-heading-color:   #1a1714;
    --sb-accent:          #c0392b;

    --sb-link-color:      #1a1714;
    --sb-link-hover:      #c0392b;
    --sb-link-icon-color: #c0392b;

    --sb-callout-info-bg:      #eef4fb;
    --sb-callout-info-border:  #2980b9;
    --sb-callout-info-icon:    #2980b9;
    --sb-callout-info-text:    #1a2a3a;

    --sb-callout-warn-bg:      #fef9ec;
    --sb-callout-warn-border:  #e67e22;
    --sb-callout-warn-icon:    #e67e22;
    --sb-callout-warn-text:    #3a2a10;

    --sb-callout-danger-bg:    #fdf0ef;
    --sb-callout-danger-border:#c0392b;
    --sb-callout-danger-icon:  #c0392b;
    --sb-callout-danger-text:  #3a1010;
}

.sidebar {
    font-family:    var(--sb-font);
    display:        flex;
    flex-direction: column;
    gap:            var(--sb-gap);
    align-self: flex-start;
}

.sidebar-section {
    background:    var(--sb-bg);
    border:        1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    padding:       1.25rem 1.1rem;
    display:       flex;
    flex-direction:column;
    gap:           0.9rem;
}

.sidebar-section__heading {
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color:          var(--sb-heading-color);
    margin:         0 0 0.1rem;
    padding-bottom: 0.6rem;
    border-bottom:  2px solid var(--sb-accent);
    display:        flex;
    align-items:    center;
    gap:            0.4rem;
}

.sidebar-section__heading-inner {
    flex: 1;
}

.sidebar-section__image-wrap {
    border-radius: calc(var(--sb-radius) - 2px);
    overflow:      hidden;
    line-height:   0;
}

.sidebar-section__image {
    width:      100%;
    height:     auto;
    display:    block;
    transition: transform 0.4s ease;
}

.sidebar-section:hover .sidebar-section__image {
    transform: scale(1.02);
}

.sidebar-section__body {
    font-size:   0.9rem;
    line-height: 1.65;
    color:       var(--sb-text-muted);
}

.sidebar-section__body p:last-child { margin-bottom: 0; }

.sidebar-section__body a {
    color:           var(--sb-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sidebar-section__body a:hover {
    text-decoration: none;
}

.sidebar-section__links {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        0.1rem;
}

.sidebar-link-item {
    margin: 0;
}

.sidebar-link {
    display:         flex;
    align-items:     center;
    gap:             0.55rem;
    padding:         0.5rem 0.6rem;
    border-radius:   calc(var(--sb-radius) - 2px);
    color:           var(--sb-link-color);
    text-decoration: none;
    font-size:       0.88rem;
    font-weight:     500;
    transition:      background 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
    position:        relative;
}

.sidebar-link:hover,
.sidebar-link:focus-visible {
    background:   rgba(192, 57, 43, 0.07);
    color:        var(--sb-link-hover);
    padding-left: 0.9rem;
    outline:      none;
}

.sidebar-link:focus-visible {
    outline:        2px solid var(--sb-accent);
    outline-offset: 2px;
}

.sidebar-link__icon {
    color:       var(--sb-link-icon-color);
    flex-shrink: 0;
    width:       1.1em;
    display:     flex;
    align-items: center;
    justify-content: center;
    transition:  transform 0.18s ease;
}

.sidebar-link:hover .sidebar-link__icon {
    transform: translateX(2px);
}

.sidebar-link__label {
    flex:           1;
    line-height:    1.35;
}

.sidebar-link__ext {
    flex-shrink: 0;
    opacity:     0.45;
    display:     flex;
    align-items: center;
}

.sidebar-callout {
    border-left:   3px solid;
    border-radius: 0 var(--sb-radius) var(--sb-radius) 0;
    padding:       0.75rem 0.9rem;
    display:       flex;
    flex-direction:column;
    gap:           0.4rem;
}

.sidebar-callout--info {
    background:   var(--sb-callout-info-bg);
    border-color: var(--sb-callout-info-border);
    color:        var(--sb-callout-info-text);
    --_icon-c:    var(--sb-callout-info-icon);
}

.sidebar-callout--warning {
    background:   var(--sb-callout-warn-bg);
    border-color: var(--sb-callout-warn-border);
    color:        var(--sb-callout-warn-text);
    --_icon-c:    var(--sb-callout-warn-icon);
}

.sidebar-callout--danger {
    background:   var(--sb-callout-danger-bg);
    border-color: var(--sb-callout-danger-border);
    color:        var(--sb-callout-danger-text);
    --_icon-c:    var(--sb-callout-danger-icon);
}

.sidebar-callout__header {
    display:     flex;
    align-items: center;
    gap:         0.45rem;
}

.sidebar-callout__icon {
    color:       var(--_icon-c);
    flex-shrink: 0;
    display:     flex;
    align-items: center;
}

.sidebar-callout__title {
    font-size:   0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

.sidebar-callout__body {
    font-size:   0.83rem;
    line-height: 1.6;
    padding-left: 1.6rem;
}

.sidebar-callout__body p:last-child { margin-bottom: 0; }

.sidebar-callout__body a {
    color:           inherit;
    font-weight:     600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ─── Responsive ─── */
@media (max-width: 991.98px) {
    .sidebar {
        flex-direction: row;
        flex-wrap:      wrap;
    }

    .sidebar-section {
        flex: 1 1 280px;
    }
}

@media (max-width: 575.98px) {
    .sidebar-section {
        flex: 1 1 100%;
    }
}


.sidebar .richtext img {
    max-width:     100%;
    height:        auto;
    border-radius: calc(var(--sb-radius) - 2px);
    display:       block;
    margin:        0.5rem 0;
}

.sr-only {
    position:  absolute;
    width:     1px;
    height:    1px;
    padding:   0;
    margin:    -1px;
    overflow:  hidden;
    clip:      rect(0,0,0,0);
    white-space: nowrap;
    border:    0;
}