:root {
    --ink-black: #0B2027;
    --cerulean: #40798C;
    --tropical-teal: #70A9A1;
    --ash-grey: #CFD7C7;
    --cornsilk: #F6F1D1;

    --forum-blue: #1e88ff;
    --forum-light-blue: #eef7ff;
    --forum-border: #dfe7f1;
    --forum-text: #0f1f38;
    --forum-muted: #65748b;
    --forum-bg: #f7fbff;
}

body {
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 45%, #f4f9ff 100%);
    color: var(--forum-text);
}

#forum-content {
    width: min(1120px, calc(100% - 48px));
    margin: 55px auto 0 auto;
    background: #ffffff;
    border: 1px solid var(--forum-border);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(15, 31, 56, 0.07);
    overflow: hidden;
}

/* Moj komentar */

.komentar {
    margin-top: 20px;
}

.odgovor {
    display: flex;
    align-items: flex-start;
    gap: 15px;

    background: white;
    border-radius: 12px;

    padding: 15px;
}

.logo img {
    width: 60px;
    height: 60px;

    border-radius: 50%;
    object-fit: cover;

    flex-shrink: 0;
}

.uporabnik-komentar {
    flex: 1;
}

.uporabnik-komentar p {
    margin-bottom: 6px;
}

.text-komentar {
    font-size: 16px;
    line-height: 1.5;
}

.card {
    border: none;
    border-radius: 16px;

    margin-bottom: 20px;

    overflow: hidden;

    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.card:last-child {
    border-bottom: 0;
}

.card:hover {
    background: #fbfdff;
    transform: translateX(2px);
}

.card-body {
    display: grid;
    grid-template-columns: 78px 1.4fr 0.55fr 0.45fr 0.75fr;
    align-items: center;
    gap: 18px;
    padding: 25px;
}

.card-body::before {
    content: "\f075";
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--forum-light-blue);
    color: var(--forum-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.card:nth-child(1) .card-body::before {
    content: "\f043";
}

.card:nth-child(2) .card-body::before {
    content: "\f186";
}

.card:nth-child(3) .card-body::before {
    content: "\f70c";
    font-weight: 900;
}

.card:nth-child(4) .card-body::before {
    content: "\f4d8";
    font-weight: 900;
}

.card:nth-child(5) .card-body::before {
    content: "\f5bb";
    font-weight: 900;
}

.card-title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 15px;

    font-size: 24px;
}

.card-title a {
    font-weight: 700;
    color: var(--ink-black);
}

.card-text {
    margin: 0;
    font-size: 15px;
    color: #2f405a;
    line-height: 1.45;
}

.card-text small,
.text-muted {
    color: var(--forum-muted) !important;
    font-size: 14px;
}

.card a {
    color: inherit;
    text-decoration: none;
}

.card a:hover .card-title,
.card-title:hover {
    color: var(--forum-blue);
}

.card-body > *:nth-child(2) {
    min-width: 0;
}

.card-body > *:nth-child(3) {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--forum-text);
}

.card-body > *:nth-child(4) {
    color: var(--forum-text);
    font-weight: 700;
}

.card-body > *:nth-child(4)::before {
    content: "\f075";
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    color: var(--forum-blue);
    margin-right: 10px;
}

.card-body > *:nth-child(5) {
    color: var(--forum-muted);
    font-size: 14px;
}

.card-body > *:nth-child(5)::before {
    content: "\f017";
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    margin-right: 8px;
}

footer {
    width: min(1120px, calc(100% - 48px));
    margin: 16px auto 0 auto;
}

footer hr {
    display: none;
}

footer p {
    background: #eef7ff;
    color: #65748b !important;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 22px;
}

footer p::before {
    content: "💙 ";
}

@media (max-width: 900px) {
    #forum-content::before {
        display: none;
    }

    .card-body {
        grid-template-columns: 58px 1fr;
        gap: 14px;
        padding: 18px;
    }

    .card-body::before {
        width: 54px;
        height: 54px;
        font-size: 23px;
    }

    .card-body > *:nth-child(n+3) {
        grid-column: 2;
    }

    .card-title {
        font-size: 18px;
    }
}

#forum-content{
    max-width:1200px;
    margin:50px auto;
    background:white;
    border-radius:18px;
    overflow:hidden;
    border:1px solid #e4ebf3;
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

.forum-header-row{
    display:grid;
    grid-template-columns: 1.8fr 0.8fr 0.5fr 0.8fr;
    padding:22px 35px;
    font-weight:700;
    font-size:13px;
    color:#6d7f99;
    border-bottom:1px solid #e4ebf3;
    background:#fafcff;
}

.forum-card{
    display:grid;
    grid-template-columns: 1.8fr 0.8fr 0.5fr 0.8fr;
    align-items:center;
    padding:25px 35px;
    border-bottom:1px solid #edf2f7;
    transition:0.2s;
}

.forum-card:hover{
    background:#f9fcff;
}

.forum-topic{
    display:flex;
    align-items:center;
    gap:20px;
}

.forum-icon{
    width:70px;
    height:70px;
    border-radius:18px;
    background:#eef6ff;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#2287ff;
    font-size:30px;
}

.forum-topic-content{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.forum-title{
    text-decoration:none;
    font-size:34px;
    font-weight:700;
    color:#0b2027;
}

.forum-title:hover{
    color:#2287ff;
}

.forum-preview{
    color:#5f7087;
    font-size:15px;
}

.forum-date{
    color:#8b9ab0;
    font-size:14px;
}

.forum-author{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:17px;
}

.forum-avatar{
    width:48px;
    height:48px;
    border-radius:50%;
    background:#2287ff;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
}

.forum-replies{
    color:#2287ff;
    font-size:20px;
    display:flex;
    gap:10px;
    align-items:center;
}

.forum-last-post{
    color:#7c8da4;
    font-size:15px;
    display:flex;
    gap:10px;
    align-items:center;
}

#forum-content{
    max-width:1200px;
    margin:50px auto;
    background:white;
    border-radius:18px;
    overflow:hidden;
    border:1px solid #e4ebf3;
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

#forum-content::before{
    content:"";
    display:grid;
    grid-template-columns: 1.8fr 0.8fr 0.5fr 0.8fr;
    padding:22px 35px;
    border-bottom:1px solid #e4ebf3;
    background:#fafcff;
}

#forum-content::before{
    content:"TEMA        AVTOR        ODGOVORI        ZADNJA OBJAVA";
    white-space:pre;
    font-weight:700;
    font-size:13px;
    color:#6d7f99;
    letter-spacing:0.5px;
}

.forum-card{
    display:grid;
    grid-template-columns: 1.8fr 0.8fr 0.5fr 0.8fr;
    align-items:center;
    padding:35px;
    border-bottom:1px solid #edf2f7;
    transition:0.2s;
}

.forum-card:hover{
    background:#f9fcff;
}

.forum-topic{
    display:flex;
    align-items:center;
    gap:25px;
}

.forum-avatar-left{
    width:75px;
    height:75px;
    border-radius:18px;
    background:#2287ff;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    font-weight:800;
}

.forum-avatar-left img{

    width: 75px;
  height: 75px;
  min-width: 54px;
  border-radius: 8px;
  object-fit: cover;

}
.forum-title{
    text-decoration:none;
    font-size:34px;
    font-weight:800;
    color:#0b2027;
}

.forum-title:hover{
    color:#2287ff;
}

.forum-preview{
    margin-top:8px;
    color:#53657d;
    font-size:16px;
}

.forum-date{
    margin-top:10px;
    color:#7f91aa;
    font-size:15px;
}

.forum-date i{
    margin-right:6px;
}

.forum-author{
    font-size:18px;
    color:#0b2027;
    font-weight:500;
}

.forum-replies{
    display:flex;
    align-items:center;
    gap:10px;
    color:#2287ff;
    font-size:20px;
}

.forum-last-post{
    display:flex;
    align-items:center;
    gap:10px;
    color:#6d7f99;
    font-size:16px;
}

@media(max-width:900px){
    #forum-content::before{
        display:none;
    }

    .forum-card{
        grid-template-columns:1fr;
        gap:15px;
        padding:25px;
    }

    .forum-topic{
        align-items:flex-start;
    }

    .forum-title{
        font-size:25px;
    }
}