/* Pretty grayscale tag cloud (no black) */
/* Pretty grayscale tag cloud (no black) */
/* Pretty grayscale tag cloud (no black) */
/* Pretty grayscale tag cloud (no black) */
/* Pretty grayscale tag cloud (no black) */
/* Pretty grayscale tag cloud (no black) */
/* Pretty grayscale tag cloud (no black) */
.mikhael-media-tags.tag-cloud-small{
    --tag-bg: #1f1f1f;         /* very dark gray */
    --tag-bg-hover: #2a2a2a;   /* slightly lighter on hover */
    --tag-border: #3a3a3a;     /* soft border */
    --tag-text: #e8e8e8;       /* near-white */
    --tag-text-hover: #ffffff; /* pure white is fine */
    --tag-ring: rgba(255,255,255,.18);

    display: flex;
    flex-wrap: wrap;
    gap: .5rem .45rem;
    align-items: center;

    /* kill the commas/spaces from the raw HTML */
    font-size: 0;
    line-height: 0;
}

/* Center the tag cloud contents inside its wrapper */
.mikhael-media-tags.tag-cloud-small{
    justify-content: center;  /* centers items on each line */
    text-align: center;       /* harmless fallback for non-flex cases */
}

.mikhael-media-tags.tag-cloud-small > a{
    display: inline-flex;
    align-items: center;

    font-size: 13px;          /* restores text after font-size:0 */
    line-height: 1.1;
    letter-spacing: .2px;
    font-weight: 600;

    padding: .42rem .62rem;
    border-radius: 999px;

    background: var(--tag-bg);
    border: 1px solid var(--tag-border);
    color: var(--tag-text);
    text-decoration: none;

    transition: background-color .18s ease, border-color .18s ease,
    transform .18s ease, box-shadow .18s ease, color .18s ease;
    -webkit-font-smoothing: antialiased;
}

.mikhael-media-tags.tag-cloud-small > a:hover{
    background: var(--tag-bg-hover);
    border-color: #4a4a4a;
    color: var(--tag-text-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0,0,0,.35);
}

.mikhael-media-tags.tag-cloud-small > a:focus-visible{
    outline: 0;
    box-shadow: 0 0 0 3px var(--tag-ring), 0 8px 18px rgba(0,0,0,.35);
}

.mikhael-media-tags.tag-cloud-small > a:active{
    transform: translateY(0);
    box-shadow: none;
}

/* Optional: subtle “comma” look replacement without commas */
.mikhael-media-tags.tag-cloud-small > a + a{
    position: relative;
}

.mikhael-media-tags.tag-cloud-small .tag-below-min {
    display: inline-flex;
    align-items: center;

    font-size: 13px;
    line-height: 1.1;
    letter-spacing: .2px;
    font-weight: 600;

    padding: .42rem .62rem;
    border-radius: 999px;

    background: #c8c8c8;
    border: 1px solid #a1a1a1;
    color: #818181;
    text-decoration: none;
    cursor: default;
    opacity: 0.6;
}