/*
    This style sheet file has been developed
    By: Make
    Email: joe.cata2023@gmail.com
    Discord: https://discord.gg/pGZR8b37f4
*/

/* ==========================================================
   1. PANEL HEAD - title stays inside the 208px banner image
   ========================================================== */
.panel-head {
    /* keep width as designed (208px) but allow the SPAN inside to shrink */
    overflow: hidden;
}

.panel-head span {
    display: inline-block;
    max-width: 170px;          /* leave 19px padding either side of the 208px bg */
    padding: 0 4px;
    font-size: 9px !important; /* was 14px — too big for the available space */
    line-height: 1.1;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

/* When a span really needs the full title (e.g. "RANGLIJST VAN SPELERS"),
   let it auto-shrink instead of getting cut off. */
@media (max-width: 1199.98px) {
    .panel-head span {
        font-size: 11px !important;
        max-width: 160px;
    }
}

/* ==========================================================
   2. NEWS / CAROUSEL TITLES
   ========================================================== */
.news .news-title h5,
.news .news-title h5 a {
    font-size: 14px !important;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.news-title {
    padding: 8px 12px;
}

.news-title .info {
    font-size: 11px;
    flex-wrap: wrap;
}

#newsCarouselCaptions .carousel-caption h5 {
    font-size: 15px !important;
    line-height: 1.25;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
}
#newsCarouselCaptions .carousel-caption span {
    font-size: 11px !important;
}

@media (max-width: 767.98px) {
    #newsCarouselCaptions .carousel-caption {
        padding: 18px 14px 10px;
    }
    #newsCarouselCaptions .carousel-caption h5 {
        font-size: 13px !important;
    }
}

/* ==========================================================
   3. PANEL-NEWS-TITLE (page section heading)
   ========================================================== */
.panel-news-title h4 {
    font-size: 16px !important;
    line-height: 1.25;
    letter-spacing: 1.2px;
    margin: 0 0 10px;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

/* ==========================================================
   4. NEWS CONTENT — keep paragraphs inside the box on every width
   ========================================================== */
.news-content,
.news .news-content {
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.news-content p,
.news .news-content p {
    font-size: 9px;
    line-height: 1.55;
    margin-bottom: 8px;
}

.news-content img,
.news .news-content img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================
   5. RANKING TABLES — keep player names from breaking the row
   ========================================================== */
.panel.ranking .panel-body td,
.panel.ranking .panel-body-big td {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0; /* lets ellipsis kick in inside a flexible col */
}

.panel.ranking .panel-body tr td:nth-child(2),
.panel.ranking .panel-body-big tr td:nth-child(2) {
    /* name column: cap and ellipsis */
    max-width: 110px;
}

@media (max-width: 575.98px) {
    .panel.ranking .panel-body tr td:nth-child(2),
    .panel.ranking .panel-body-big tr td:nth-child(2) {
        max-width: 90px;
    }
}

/* ==========================================================
   6. FOOTER — small screens were wrapping copyright outside the box
   ========================================================== */
.footer {
    height: auto !important;
    min-height: 40px;
    padding: 8px 0;
}

.footer .container .row {
    height: auto !important;
}

.footer span {
    font-size: 9px;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .footer span {
        font-size: 11px;
        text-align: center;
        margin: 2px 0;
    }
}

/* ==========================================================
   7. STATS BOXES — counter text overflowing the icon row
   ========================================================== */
.stats-content {
    overflow: hidden;
}
.stats-content .counter {
    font-size: 15px !important;
    line-height: 1.1;
    white-space: nowrap;
}
.stats-content p {
    font-size: 9px !important;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================
   8. GENERIC OVERFLOW SAFETY NET
   ========================================================== */
.panel,
.panel-body,
.panel-body-big {
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

/* Don't break the page on very small screens */
html, body {
    overflow-x: hidden;
}