/* ------------- */
/* UNGETEILT.CSS */
/* ------------- */

.site-branding .site-description {
    color: var(--blue-font);
}

.site-header {
    border-bottom: 1px solid var(--blue-font);
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    color: var(--blue-font) !important;
}

/* ------------- */
/* INTRO SECTION */
/* ------------- */

#ungeteilt-intro {
    border: var(--border-blue);
}

#ungeteilt-headline span.ungeteilt-prefix {
    color: var(--blue-font);
    font-weight: 800;
}

.ungeteilt-headline::after {
    background: linear-gradient(90deg, var(--blue-font), transparent);
}

.tooltip-trigger-text {
    color: var(--blue-font);
}

#ungteilt-intro .custom-tooltip-bubble {
    border: var(--border-blue);   
    box-shadow: 0 0 var(--s-gap) var(--blue-font);
}

.tooltip-headline {
    color: var(--blue-font);
}

/* ------------ */
/* HERO SECTION */
/* ------------ */

.hero-section {
    border: var(--border-blue);
}

.forum-wrapper {
    min-height: 1000px;
}

.forum-hub-container {
    container-type: inline-size;
    container-name: forumContainer;
}

.forum-nav-bar {
    width: 100%;
    align-items: center;
    background: transparent;
    padding: var(--m-gap);
    box-sizing: border-box;
}

.filter-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--m-gap);
    padding-bottom: var(--m-gap);
    border-bottom: var(--border-glass-light);
}

.forum-search-box {
    display: none;
    opacity: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    margin: var(--m-gap);
    width: 100%;
    text-align: center;
}

.forum-search-box.is-open {
    display: block;
    opacity: 1;
}

#forum-search-input {
    font-family: var(--secondary-font);
    font-size: var(--xs-font);
    width: 70cqw;
    max-width: 450px;
    background: transparent;
    border: none !important;
    border-bottom: 2px solid var(--blue-font) !important;
    padding: 0;
    margin: 0;
    color: var(--light-font);
    vertical-align: middle;
    outline: none;
}

#forum-search-input::placeholder {
    color: var(--shaded-font);
}

.search-placeholder-msg {
    text-align: center;
    padding: var(--m-gap) var(--s-gap);
    color: var(--shaded-font);
}

.forum-nav-bar .filter-pill {
    font-size: var(--xxs-font);
    font-weight: var(--medium-font);
    background: var(--glass-light-background);
    color: var(--light-font);
    padding: var(--xs-gap) var(--s-gap);
    border-radius: var(--m-radius);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--secondary-font) !important;
    transition: all 0.2s ease;
    width: clamp(120px, 30cqw, 200px);
}

.forum-nav-bar .filter-pill.active {
    background: var(--blue-font);
    color: var(--dark-font);
}

.series-group-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: var(--border-glass-light);
    border-radius: var(--m-radius);
    transition: background 0.3s;
}

.group-name {
    font-size: var(--xs-font);
    padding: var(--m-gap);
    margin: 0;
}

.series-arrow {
    transition: transform 0.3s ease;
    font-size: var(--xs-font);
    background: none;
    color: var(--light-font);
    transform: rotate(-90deg);
    opacity: 0.5;
    padding: var(--m-gap);
}

.series-content-wrapper {
    display: none;
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.3s;
    opacity: 0;
}

.series-group.is-open > .series-content-wrapper {
    opacity: 1;
    padding-top: var(--m-gap);
    display: flex;
    flex-direction: column;
    gap: var(--m-gap);
}

.series-group.is-open > .series-group-header .series-arrow {
    transform: rotate(0deg);
    opacity: 1;
    color: var(--blue-font);
}

.series-group > .series-content-wrapper {
    margin-left: var(--s-gap);
}

.series-group .series-content-wrapper {
    display: none;
}

.series-group.is-open > .series-group-header {
    background: var(--glass-light-background);
}

#forum-topic-list {
    transition: opacity 0.2s ease-in-out;
    opacity: 1;
    display: flex;
    flex-direction: column;
    gap: var(--m-gap);
}

#forum-topic-list.is-loading {
    opacity: 0.4;
    pointer-events: none;
}

.topic-card {
    background: var(--shaded-dark-background);
    border: var(--border-glass-light);
    padding: var(--s-gap);
    border-radius: var(--m-radius);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.topic-card.is-locked .topic-title-text::before {
    content: "🔒 ";
}

.topic-card.is-archived {
    opacity: 0.6;
    border: 1px dashed var(--shaded-font);
}

.topic-card.is-unapproved {
    border-left: 4px solid #ffcc00;
}

.topic-card-main {
    width: 100%;
}

.topic-header, .topic-meta-row {
    display: flex;
    gap: var(--s-gap);
    align-items: center;
    font-family: var(--secondary-font);
}

.topic-badge {
    padding: 0 var(--xs-gap);
}

.topic-title-text {
    font-size: var(--s-font);
    font-family: var(--primary-font);
    font-weight: var(--medium-font);
    text-transform: uppercase;
}

.nav-breadcrumb-row .nav-level-item {
    color: var(--shaded-font);
    text-transform: none;
}

.mod-controls-placeholder {
    margin-left: auto;
    display: none;
}

.mod-controls-placeholder.is-active {
    display: block;
}

.time-row, .stat-row {
    font-size: var(--xxs-font);
    font-family: var(--secondary-font);
}

@media (max-width: 430px) {

    .topic-header {
        flex-direction: column;
    }

    .topic-meta-row, .nav-breadcrumb-row {
        display: flex;
        justify-content: center;
    }

}

/* ----------- */
/* HOVER STUFF */
/* ----------- */

@media (hover: hover) and (pointer: fine) {

    .pill:hover, #load-more-btn:hover {
        color: var(--accent-green);
        transform: scale(1.05);
        background: rgba(255, 255, 255, 0.2);
    }

    .forum-nav-bar .filter-pill:hover {
        border: 1px solid var(--blue-font);
    }

    .series-group-header:hover {
        border-color: var(--blue-font);
        background: var(--glass-light-background);
    }

    .topic-card:hover {
        border-color: var(--blue-font);
        background: var(--glass-light-background);
    }

}