/* Header und Navigation Styles */

/* Blog-Header */
.blog-header {
    background: var(--navbar_bg_color, #212529);
    padding: 2.25rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border, #dee2e6) 35%, transparent);
    box-shadow: none;
}

.blog-brand {
    align-items: center;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: 1rem;
    width: 100%;
    min-width: 0;
}

.blog-brand-cell--start {
    justify-self: start;
    display: flex;
    align-items: center;
    min-width: 0;
}

/* Leere Spalte: gleiche flexibles Gewicht wie links → optisch zentrierter Titel */
.blog-brand-cell--end {
    pointer-events: none;
    min-width: 0;
}

.blog-logo {
    height: auto;
    width: auto;
    max-width: min(340px, 42vw);
    max-height: var(--blog-logo-max-height, 120px);
    object-fit: contain;
    flex-shrink: 0;
}

.blog-logo-placeholder {
    height: 88px;
    width: 88px;
    background: linear-gradient(135deg, var(--color-primary, #007bff), var(--color-primary-dark, #0056b3));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    flex-shrink: 0; /* Logo behält seine Größe */
}

.blog-title-section {
    position: static;
    transform: none;
    text-align: center;
    grid-column: 2;
    justify-self: center;
    max-width: 100%;
    min-width: 0;
}

.blog-title {
    font-size: clamp(var(--font-size-blog-title-min, 1.85rem), var(--font-size-blog-title-preferred, 3.5vw), var(--font-size-blog-title-max, 2.75rem));
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--navbar_text_color, #ffffff);
    margin: 0 0 0.65rem 0;
    line-height: 1.18;
}

/* Lange Blognamen: eine Zeile sobald genug horizontaler Platz (Tablet/Desktop) */
@media (min-width: 768px) {
    .blog-title {
        white-space: nowrap;
    }
}

.blog-welcome-text {
    font-size: var(--font-size-welcome-text, 1.1rem);
    color: var(--navbar_text_color, #ffffff);
    opacity: 0.9;
    margin: 0;
    line-height: 1.4;
    font-weight: 400;
}

/* Header-Buttons (Sprache, Warenkorb, Login, Kundenportal) einheitlich breit */
.blog-header .header-actions .btn {
    min-width: 8rem;
    justify-content: center;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Hauptnavigation — bleibt beim Scrollen oben sichtbar (Logo-/Titelzeile scrollt mit) */
.main-navigation {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
    overflow: visible;
    background: var(--nav-bg-color, #f8f9fa);
    border-bottom: 1px solid color-mix(in srgb, var(--color-border, #dee2e6) 40%, transparent);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    margin: 0;
}

.main-navigation .nav-link,
.main-navigation .nav-menu {
    font-family: var(--font-navigation, var(--font-text));
}

.nav-container {
    display: flex;
    align-items: center;
    min-height: 58px;
    gap: 0.75rem;
}

/* Mobil: immer Hamburger + ausklappbares Menü (unabhängig von Textbreite) */
.nav-container--responsive {
    flex-wrap: wrap;
}

.main-nav-toggler {
    flex-shrink: 0;
    color: var(--nav-text-color, #495057);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--nav-text-color, #495057) 35%, transparent);
    border-radius: 8px;
    padding: 0.25rem 0.55rem;
    line-height: 1;
}

.main-nav-toggler:hover {
    background: color-mix(in srgb, var(--nav-text-color, #495057) 10%, transparent);
    color: var(--nav-text-color, #495057);
}

.main-nav-toggler:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-primary, #0d6efd) 35%, transparent);
}

.main-nav-collapse {
    min-width: 0;
}

@media (max-width: 767.98px) {
    .nav-container--responsive .nav-actions {
        margin-left: auto;
    }

    .main-nav-collapse {
        flex: 1 0 100%;
        width: 100%;
    }

    .main-nav-collapse.collapsing {
        overflow: hidden;
    }

    .main-nav-collapse .nav-menu {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch;
        width: 100%;
        gap: 0.2rem;
        padding-top: 0.5rem;
        margin-top: 0.25rem;
        border-top: 1px solid color-mix(in srgb, var(--nav-text-color, #495057) 14%, transparent);
    }

    .main-nav-collapse .nav-link {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Tablet/Desktop: kein Collapse — Menüzeile wie bisher */
@media (min-width: 768px) {
    #mainNavMenuCollapse.collapse:not(.show),
    #mainNavMenuCollapse.collapse.show {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        flex-grow: 1;
        min-width: 0;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
    }

    #mainNavMenuCollapse.collapsing {
        display: flex !important;
        height: auto !important;
        transition: none;
        overflow: visible !important;
    }

    .nav-container--responsive {
        flex-wrap: nowrap;
    }
}

.nav-menu {
    display: flex !important;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
    gap: 0.35rem 1.25rem;
    flex-wrap: wrap;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.nav-actions .nav-action-btn,
.nav-actions .btn-sm {
    padding: 0.2rem 0.45rem;
    font-size: 0.8rem;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 0.85rem 1.15rem;
    color: var(--nav-text-color, #495057);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--font-size-nav-link, 1rem);
    border-radius: 8px;
    transition: background-color 0.25s ease, color 0.25s ease;
    position: relative;
    overflow: hidden;
}

.nav-link:hover {
    background: color-mix(in srgb, var(--nav-text-color, #495057) 8%, transparent);
    color: var(--nav-text-color, #495057);
    transform: none;
}

.nav-link.active {
    background: var(--color-primary, #007bff);
    color: white;
}

.nav-link.active:hover {
    background: var(--color-primary-dark, #0056b3);
    transform: none;
}

/* Kein Glanz-Sweep — ruhigeres Editorial */
.nav-link::before {
    display: none;
}

/* Responsive Design */
@media (max-width: 991.98px) {
    .blog-header {
        padding: 1.5rem 0;
    }
    
    .blog-brand {
        column-gap: 0.75rem;
    }
    
    .blog-title {
        font-size: var(--font-size-blog-title-tablet, 2rem); /* Tablet: fest oder aus Multi_Blog */
    }
    
    .blog-welcome-text {
        font-size: var(--font-size-welcome-text-tablet, 1rem);
    }
    
    .blog-logo {
        max-height: min(72px, var(--blog-logo-max-height, 120px));
        height: auto;
    }

    .blog-logo-placeholder {
        height: 56px;
        max-height: 72px;
        width: 56px;
    }
    
    .nav-menu {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    
    .nav-link {
        padding: 0.65rem 0.9rem;
        font-size: var(--font-size-nav-link-mobile, 0.92rem);
        min-height: 44px;
    }
}

@media (max-width: 767.98px) {
    .blog-header .header-actions .btn {
        min-width: 6.5rem;
    }

    .blog-header .row {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .blog-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .blog-brand-cell--end {
        display: none;
    }
    
    .blog-title-section {
        grid-column: auto;
        width: 100%;
        max-width: 100%;
        margin-top: 0;
        text-align: center;
    }
    
    .blog-logo,
    .blog-logo-placeholder {
        margin: 0 auto;
    }
    
    .blog-title {
        font-size: var(--font-size-blog-title-mobile, 1.75rem); /* Smartphone */
        white-space: normal;
    }
    
    .blog-welcome-text {
        font-size: var(--font-size-welcome-text-mobile, 0.95rem);
    }
}

/* Animation für Header */
.blog-header {
    animation: slideDown 0.5s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation für Navigation */
.main-navigation {
    animation: slideDown 0.6s ease-out;
}

/* Aktive Seite hervorheben */
.nav-link[href*="page=home"]:not([href*="page="]),
.nav-link[href="index.php"]:not([href*="page="]) {
    /* Startseite */
}

.nav-link[href*="page=contact"] {
    /* Kontakt-Seite */
}

.nav-link[href*="page=category"] {
    /* Kategorie-Seiten */
}

/* Spezielle Stile für verschiedene Kategorien */
.nav-link[href*="slug="] {
    position: relative;
}

.nav-link[href*="slug="]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--color-primary, #007bff);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link[href*="slug="]:hover::after {
    width: 80%;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .blog-header {
        background: var(--color-background, #1a1a1a);
        border-bottom-color: var(--color-border, #333);
    }
    
    .blog-title {
        color: var(--navbar_text_color, #e2e8f0);
    }
    
    .blog-welcome-text {
        color: var(--navbar_text_color, #e2e8f0);
        opacity: 0.8;
    }
    
    .main-navigation {
        background: var(--nav-bg-color, #2d3748);
        border-bottom-color: var(--color-border, #4a5568);
    }
    
    .nav-link {
        color: var(--nav-text-color, #e2e8f0);
    }
    
    .nav-link:hover {
        background: rgba(255,255,255,0.1);
    }

    .main-nav-toggler {
        color: var(--nav-text-color, #e2e8f0);
        border-color: color-mix(in srgb, var(--nav-text-color, #e2e8f0) 40%, transparent);
    }

    .main-nav-toggler:hover {
        background: rgba(255,255,255,0.08);
        color: var(--nav-text-color, #e2e8f0);
    }
}

/* Print Styles */
@media print {
    .blog-header,
    .main-navigation {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }
    
    .nav-link {
        color: #000 !important;
        background: transparent !important;
    }

    .main-nav-toggler {
        display: none !important;
    }

    #mainNavMenuCollapse,
    #mainNavMenuCollapse.collapse:not(.show) {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        visibility: visible !important;
    }

    #mainNavMenuCollapse .nav-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    
    .header-actions {
        display: none;
    }
}