/* ==========================================================
   COMMUNITY FORUM
========================================================== */

html,
body{
    margin:0;
    padding:0;
    background:#0b0f15 url("../image/forum/forum.webp") center top fixed no-repeat;
    background-size:cover;
    color:#e8edf5;
}

.forum-page{
    min-height:100vh;
    background:rgba(8,12,18,.82);
}
/* ==========================================================
   HERO
========================================================== */
.forum-hero{
    background:url("../image/forum/forum-bg.webp") center center/cover no-repeat;
    position:relative;
    min-height:300px;
    display:flex;
    align-items:center;
}

.forum-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(8,12,18,.72);
}
.forum-hero-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:30px;
}

.forum-hero-right{
    display:flex;
    justify-content:flex-end;
    align-items:flex-start;
}
.forum-hero-overlay{
    position:relative;
    z-index:2;
    width:100%;
}

.forum-hero-content{
    max-width:1200px;
    margin:auto;
    padding:40px 30px;
}

.forum-label{
    display:inline-block;
    padding:6px 16px;
    border:1px solid #3ea6ff;
    border-radius:30px;
    color:#3ea6ff;
    font-size:13px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.forum-hero h1{
    margin:0;
    color:#fff;
    font-size:54px;
}

.forum-subtitle{
    margin:20px 0;
    color:#78c5ff;
    font-size:22px;
}

.forum-description{
    max-width:700px;
    color:#d5dde7;
    line-height:1.7;
    font-size:18px;
}

.forum-status{
    padding:12px 20px;
    border-radius:8px;
    border:1px solid #3ea6ff;
    background:rgba(23,52,81,.85);
    color:#fff;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}

/* ==========================================================
   BANNER
========================================================== */

.forum-banner{
    max-width:1300px;
    margin:50px auto;
    padding:0 30px;
}

.forum-banner img{
    width:100%;
    display:block;
    border-radius:14px;
    border:1px solid rgba(62,166,255,.18);
    box-shadow:0 20px 45px rgba(0,0,0,.35);
}

/* ==========================================================
   CONTENT
========================================================== */

.forum-section{
    max-width:1250px;
    margin:50px auto;
    padding:40px;
    background:rgba(18,22,30,.82);
    border:1px solid rgba(62,166,255,.12);
    border-radius:14px;
}

.forum-section h2{
    margin-top:0;
    margin-bottom:25px;
    color:#fff;
    font-size:34px;
}

.forum-section p{
    color:#c9d2dc;
    font-size:17px;
    line-height:1.8;
}

/* ==========================================================
   GRID
========================================================== */

.forum-intro{
    margin-bottom:35px;
}

.forum-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
    gap:25px;
}

/* ==========================================================
   CARDS
========================================================== */

.forum-card{
    background:#171c24;
    border:1px solid rgba(62,166,255,.15);
    border-radius:12px;
    padding:30px;
    transition:.25s;
}

.forum-card:hover{
    transform:translateY(-4px);
    border-color:#3ea6ff;
    box-shadow:0 0 25px rgba(62,166,255,.15);
}

.forum-card h3{
    margin:0 0 18px;
    color:#fff;
    font-size:28px;
}

.forum-card p{
    margin:0;
    color:#c7d0db;
    font-size:16px;
    line-height:1.8;
}
.forum-card h3 i{
    margin-right:10px;
    color:#4aa8ff;
    width:26px;
    text-align:center;
}

/* ==========================================================
   DISCORD
========================================================== */

.forum-status-box{
    margin-top:40px;
    padding:40px;
    background:rgba(18,22,30,.75);
    border:1px solid rgba(62,166,255,.15);
    border-radius:14px;
    text-align:center;
}

.forum-status-box h3{
    margin:0 0 15px;
    color:#ffffff;
    font-size:30px;
    font-weight:700;
}

.forum-status-box p{
    max-width:900px;
    margin:0 auto 30px;
    color:#c7d0db;
    font-size:17px;
    line-height:1.8;
}

.btn-primary{
    display:inline-block;
    padding:14px 36px;
    background:#1b5fae;
    border:1px solid #58a6ff;
    border-radius:8px;
    color:#ffffff;
    text-decoration:none;
    font-size:15px;
    font-weight:700;
    letter-spacing:.5px;
    transition:all .25s ease;
}

.btn-primary:hover{
    background:#2675d1;
    border-color:#8bc4ff;
    color:#ffffff;
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(62,166,255,.25);
}

.forum-discord-info{
    max-width:760px;
    margin:25px auto 0;
    padding:22px 28px;
    background:rgba(255,193,7,.08);
    border:1px solid rgba(255,193,7,.20);
    border-left:4px solid #ffc107;
    border-radius:10px;
    color:#f3d37a;
    font-size:16px;
    line-height:1.8;
}

.forum-discord-info strong{
    display:block;
    margin-bottom:10px;
    color:#ffd75e;
    font-size:18px;
}
/* ==========================================================
   TOPICS
========================================================== */

.forum-topic-card{
    margin-bottom:20px;
}

.forum-topic-header h3{
    margin:0;
}

.forum-topic-header a{
    color:#ffffff;
    text-decoration:none;
    transition:.25s;
}

.forum-topic-header a:hover{
    color:#58a6ff;
}

.forum-topic-meta{
    display:flex;
    gap:25px;
    margin-top:18px;
    color:#97a8ba;
    font-size:14px;
    flex-wrap:wrap;
}
/* ==========================================================
   POSTS
========================================================== */

.forum-post{
    margin-bottom:25px;
}

.forum-post-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    padding-bottom:15px;
    border-bottom:1px solid rgba(255,255,255,.08);
    color:#9cb0c3;
    font-size:14px;
}

.forum-post-content{
    color:#d6dee8;
    line-height:1.9;
    font-size:16px;
}

.forum-post textarea{
    width:100%;
    min-height:180px;
    padding:15px;
    background:#0f1622;
    border:1px solid rgba(88,166,255,.20);
    border-radius:8px;
    color:#ffffff;
    resize:vertical;
    font-size:15px;
}

.forum-post textarea:focus{
    outline:none;
    border-color:#58a6ff;
}
/* ---------- New Topic ---------- */
.forum-form{
    max-width:900px;
    margin:40px auto 0;
}
.forum-form label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
    color:#d9e2ef;
    font-size:15px;
}
.forum-form input[type="text"]{
    width:100%;
    padding:14px 16px;
    margin-bottom:25px;
    background:#111722;
    border:1px solid #2c3e55;
    border-radius:8px;
    color:#fff;
    font-size:16px;
    transition:.2s;
}
.forum-form textarea{
    width:100%;
    min-height:260px;
    padding:16px;
    background:#111722;
    border:1px solid #2c3e55;
    border-radius:8px;
    color:#fff;
    font-size:16px;
    resize:vertical;
    transition:.2s;
}
.forum-form input:focus,
.forum-form textarea:focus{
    outline:none;
    border-color:#4ea1ff;
    box-shadow:0 0 12px rgba(78,161,255,.25);
}
.forum-form .btn-primary{
    margin-top:25px;
    min-width:220px;
}
/* ---------- Breadcrumb ---------- */
.forum-breadcrumb{
    margin-bottom:30px;
    font-size:15px;
    color:#8ea3bd;
}
.forum-breadcrumb a{
    color:#6fb3ff;
    text-decoration:none;
}
.forum-breadcrumb a:hover{
    color:#ffffff;
    text-decoration:underline;
}
.forum-breadcrumb span{
    margin:0 10px;
    color:#60738c;
}
.forum-breadcrumb strong{
    color:#ffffff;
    font-weight:600;
}
/* ==========================================================
   RESPONSIVE
========================================================== */
@media(max-width:900px){

    .forum-hero{
        min-height:300px;
    }
    .forum-hero-content{
        padding:60px 25px;
    }
    .forum-hero h1{
        font-size:40px;
    }
    .forum-banner{
        padding:0 20px;
    }
    .forum-section{
        margin:30px 20px;
        padding:30px;
    }
}

@media(max-width:600px){
    .forum-hero h1{
        font-size:32px;
    }
    .forum-subtitle{
        font-size:18px;
    }
    .forum-description{
        font-size:16px;
    }
    .forum-status{
        width:100%;
        text-align:center;
    }
    .forum-grid{
        grid-template-columns:1fr;
    }
}