/**
    Stylesheet for the icons in the top right corner of the issues/solutions

    These styles make use of Container queries on the card itself (as opposed to media queries against the screen size)

    The icons should never stack 3 on top of each other.
    There was a trick to make this work, seen in the html.
    The icons are technqually in a "text-no-wrap" style by default.
    But I used the <wbr> within the no-wrap, to force the break only where I want it.

    The Scope Ribbon is included in this stylesheet
*/

/* Issue card stat icons container - Mobile first design */
.card {
    container-type: inline-size;
    container-name: card;
}

.issue-card-stat-icons {
    font-size: 18px;
    max-width: 100%;
    margin-right: calc(var(--ribbon-width));
/*    height: 50px;*/
    direction: rtl;
    /*    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;*/
}

/* Small containers (max-width: 604px) */
@container card (max-width: 604px) {
    .issue-card-stat-icons {
        font-size: 20px;
        max-width: 71px;
        min-width: 67px;
        height: 72px;
        margin-bottom: 0;
    }

        .issue-card-stat-icons span[role=button] {
            padding-bottom: 3px;
        }

    .stat-icon-link.version-history {
        margin-inline: 0 !important;
    }
}

/* Position adjustments for content count on mobile */
.issue-card-stat-icons .position-relative {
    margin: 2px 8px;
    display: inline-block;
}

.issue-card-stat-icons .content-count {
    position: absolute;
    right: -11px;
    top: -9px;
    scale: 0.6;
}

/* Replace the media query with container query */
@container card (min-width: 604px) {
    .issue-card-stat-icons .position-relative {
        /*        margin: 0 12px;*/
    }
}


.scope-ribbon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
/*    margin-top: 40px;*/
    margin-top: 19px;
}

:root {

    --ribbon-width: 40px;
    --ribbon-height: 80px;
}


.ribbon-spacer {
    width: var(--ribbon-width);
    height: calc(var(--ribbon-height) - 40px);
}


.ribbon text {
    transform: translateY(-10px)
}

.ribbon {
    position: absolute;
    width: var(--ribbon-width);
    height: var(--ribbon-height);
    overflow: visible;
    padding: 10px 0;
    color: white;
    font-weight: bold;
    text-align: center;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    top: 0;
    right: 5px;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    cursor: pointer;
}

.ribbon.individual {
    background: #e74c3c; /* red */
}

.ribbon.local {
    background: #769aed; /* orange */
}

.ribbon.national {
    background: #2980b9; /* blue */
}

.ribbon.global {
    background: #27ae60; /* green */
}
.ribbon.community {
    background: #27ae60; /* green */
}
.ribbon.household {
    background: #27ae60; /* green */
}


    /* Add this to your CSS file */
.sidebar-heading {
    display: none;
}

.sidebar-heading.active {
    display: block;
}

.sidebar-content {
    display: none;
}

.sidebar-content.active {
    display: block;
}