/*
Theme Name: Mika-Bootstrap
Theme URI: http://blog.mika220175.de/
Author: Mika220175
Description: Custom Bootstrap 5 Theme für Mika
Version: 1.0
*/

/* =========================================
FIXED HEADER ABSTAND (damit Content nicht unter Header rutscht)
=========================================
*/
body { padding-top: 76px; }

/* =========================================
HAUPTMENÜ: AKTIVER BEREICH (Erweitert für Blog & Einzelbeiträge)
=========================================
*/
.navbar-nav .current-menu-item > .nav-link,
.navbar-nav .current-menu-parent > .nav-link,
.navbar-nav .current-menu-ancestor > .nav-link,
.navbar-nav .current_page_parent > .nav-link,
.navbar-nav .current-post-ancestor > .nav-link {
    border-bottom: 2px solid red !important;
    padding-bottom: 5px !important;
}

/* =========================================
SMARTE SUCHE ANPASSUNG
=========================================
*/
.smart-search { transition: width 0.4s ease-in-out; width: 150px; }
.smart-search:focus-within { width: 250px; }
.smart-search .btn { border-color: #dee2e6; background-color: #fff; color: #0d6efd; }
.smart-search .btn:hover { background-color: #0d6efd; color: #fff; }

/* =========================================
GTRANSLATE DROPDOWN ANPASSUNG 
=========================================
*/
#gtranslate-wrapper select {
    width: 130px; height: 31px; border: 1px solid #dee2e6;
    border-radius: 0.25rem; padding: 0 0.5rem; color: #000; 
    background-color: #fff; font-size: 0.875rem; cursor: pointer;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
#gtranslate-wrapper select:hover { border-color: #0d6efd; }
#gtranslate-wrapper select:focus { border-color: #86b7fe; outline: 0; box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); }

/* =========================================
PROFIL-DROPDOWN DESIGN (Im Header)
=========================================
*/
.dropdown:hover .dropdown-menu { display: block; margin-top: 0; }
.dropdown-menu { border-radius: 0.5rem !important; }
.dropdown-item:hover { background-color: #f8f9fa !important; color: #0d6efd !important; }
.dropdown-toggle::after { display: none !important; }

/* =========================================
LOGO ANPASSUNG
=========================================
*/
.custom-logo { height: 50px !important; width: auto !important; max-width: none !important; }

/* =========================================
BLOG KACHEL-DESIGN (Hover-Effekt für Übersicht)
=========================================
*/
.blog-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.blog-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; }

/* =========================================
BLOG KATEGORIE-LINKS (Als smarte Badges)
=========================================
*/
.blog-category-badge a {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    color: #fff !important;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    background-color: #0d6efd; 
    text-decoration: none;
    margin-right: 5px;
    margin-bottom: 5px;
    transition: background-color 0.2s ease-in-out;
}
.blog-category-badge a:hover {
    background-color: #0a58ca;
}

/* =========================================
TAG BADGES (Schlagworte)
=========================================
*/
.hover-tag { transition: all 0.2s ease; }
.hover-tag:hover {
    background-color: #0d6efd !important; 
    color: #fff !important; 
    border-color: #0d6efd !important;
}

/* =========================================
SMARTER WEITERLESEN BUTTON
=========================================
*/
.smart-read-more i {
    transition: transform 0.3s ease;
}
.smart-read-more:hover i {
    transform: translateX(4px); 
}

/* =========================================
LIKE / DISLIKE BUTTONS
=========================================
*/
.mika-vote-btn { transition: all 0.2s ease-in-out; }
.mika-vote-btn:hover { color: #0d6efd !important; transform: scale(1.1); }
.mika-vote-btn.voted { pointer-events: none; }

/* =========================================
SMART KOMMENTAR SYSTEM
=========================================
*/
.comment-list .children {
    list-style: none;
    padding-left: 3rem;
    margin-top: 1.5rem;
    border-left: 3px solid #dee2e6;
}
@media (max-width: 768px) {
    .comment-list .children { 
        padding-left: 1rem; 
        border-left: 2px solid #dee2e6;
    }
}
/* Kommentar Antworten-Link abbrechen */
#cancel-comment-reply-link {
    color: #dc3545 !important;
    font-size: 0.85rem;
    text-decoration: none;
}
#cancel-comment-reply-link:hover {
    text-decoration: underline;
}

/* =========================================
FOOTER STYLING
=========================================
*/
footer .nav-link:hover { color: #0d6efd !important; }
.copyright-link { transition: color 0.3s ease, font-weight 0.3s ease; }
.copyright-link:hover { color: #000 !important; font-weight: bold; }
.footer-menu-link {
    font-size: 10px !important; font-weight: bold !important; color: #000 !important;
    padding: 0 10px !important; text-transform: uppercase;
}
.footer-nav .current-menu-item .footer-menu-link { border-bottom: 2px solid red !important; padding-bottom: 0 !important; }
@media (max-width: 991px) { footer .nav { justify-content: center !important; } }