/*
 * Miarto Studio – Header & Navigation
 */

/* ---- Topbar ---- */

.topbar {
    background-color: var(--ms-color-anthracite);
    color:            rgba(255, 255, 255, 0.8);
    font-family:      var(--ms-font-body);
    font-size:        0.8125rem;
    padding:          var(--ms-space-2) 0;
    text-align:       center;
}

.topbar__inner {
    display:     flex;
    align-items: center;
    justify-content: center;
}

.topbar__text {
    color:           inherit;
    text-decoration: none;
}

a.topbar__text:hover {
    color: var(--ms-color-gold);
}

/* ---- Site-Header ---- */

.site-header {
    position:         sticky;
    top:              0;
    z-index:          var(--ms-z-header);
    background-color: var(--ms-header-bg);
    border-bottom:    1px solid var(--ms-header-border);
    box-shadow:       var(--ms-shadow-sm);
    transition:       background-color var(--ms-transition-slow),
                      border-color var(--ms-transition-slow),
                      box-shadow var(--ms-transition-slow);
}

.site-header__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--ms-space-8);
    min-height:      var(--ms-header-height);
    position:        relative;
}

/* ---- Höhen-Varianten ---- */

.site-header--height-compact { --ms-header-height: 56px; }
.site-header--height-large   { --ms-header-height: 96px; }

/* ---- Layout-Variante: Zentriert ---- */

@media (min-width: 769px) {
    .site-header--layout-centered .site-header__inner {
        flex-wrap:    wrap;
        align-content: center;
        min-height:   auto;
        padding:      var(--ms-space-4) 0;
    }

    .site-header--layout-centered .site-branding {
        width:           100%;
        display:         flex;
        justify-content: center;
        margin-bottom:   var(--ms-space-2);
    }

    .site-header--layout-centered .main-navigation {
        width: 100%;
    }

    .site-header--layout-centered .main-navigation > ul {
        justify-content: center;
    }

    .site-header--layout-centered .header-actions {
        position:    absolute;
        top:         0;
        right:       0;
        height:      var(--ms-header-height);
        align-items: center;
    }
}

/* ---- Layout-Variante: Split (Nav links | Logo Mitte | Aktionen rechts) ---- */

@media (min-width: 769px) {
    .site-header--layout-split .site-header__inner {
        display:               grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas:   "nav brand actions";
        align-items:           center;
        gap:                   var(--ms-space-6);
    }

    .site-header--layout-split .site-branding {
        grid-area:   brand;
        text-align:  center;
        flex-shrink: 0;
    }

    .site-header--layout-split .main-navigation {
        grid-area: nav;
    }

    .site-header--layout-split .header-actions {
        grid-area:       actions;
        justify-content: flex-end;
    }
}

/* ---- Transparenter Header ---- */

.site-header--transparent {
    background-color:   transparent;
    border-bottom-color: transparent;
    box-shadow:          none;
}

.site-header--transparent .site-branding .site-title,
.site-header--transparent .main-navigation a,
.site-header--transparent .icon-btn,
.site-header--transparent .nav-toggle {
    color: var(--ms-color-white);
}

.site-header--transparent .main-navigation a:hover,
.site-header--transparent .main-navigation .current-menu-item > a,
.site-header--transparent .main-navigation .current-menu-ancestor > a {
    color: var(--ms-color-gold);
}

.site-header--transparent .header-cta {
    background-color: transparent;
    border:           1px solid rgba(255, 255, 255, 0.5);
    color:            var(--ms-color-white);
}

.site-header--transparent .header-cta:hover {
    background-color: var(--ms-color-gold);
    border-color:     var(--ms-color-gold);
}

/* Scrolled-Zustand: Transparent → Opak (via JS .is-scrolled) */

.site-header--transparent.is-scrolled {
    background-color:    var(--ms-header-bg);
    border-bottom-color: var(--ms-header-border);
    box-shadow:          var(--ms-shadow-sm);
}

.site-header--transparent.is-scrolled .site-branding .site-title,
.site-header--transparent.is-scrolled .main-navigation a,
.site-header--transparent.is-scrolled .icon-btn,
.site-header--transparent.is-scrolled .nav-toggle {
    color: var(--ms-color-anthracite);
}

.site-header--transparent.is-scrolled .header-cta {
    background-color: var(--ms-color-anthracite);
    border-color:     var(--ms-color-anthracite);
    color:            var(--ms-color-white);
}

/* ---- Branding ---- */

.site-branding {
    flex-shrink: 0;
}

.site-branding .custom-logo {
    display:    block;
    max-height: 48px;
    width:      auto;
}

.site-branding .site-title {
    font-family:     var(--ms-font-heading);
    font-size:       1.25rem;
    font-weight:     700;
    color:           var(--ms-color-anthracite);
    text-decoration: none;
    letter-spacing:  0.02em;
}

.site-branding .site-title:hover {
    color: var(--ms-color-gold);
}

/* ---- Primär-Navigation (Desktop) ---- */

.main-navigation ul {
    display:     flex;
    list-style:  none;
    margin:      0;
    padding:     0;
    gap:         var(--ms-space-8);
    align-items: center;
}

.main-navigation a {
    display:         block;
    font-family:     var(--ms-font-body);
    font-size:       0.8125rem;
    font-weight:     600;
    letter-spacing:  0.08em;
    text-transform:  uppercase;
    color:           var(--ms-color-anthracite);
    text-decoration: none;
    padding:         var(--ms-space-2) 0;
    position:        relative;
    transition:      color var(--ms-transition);
}

.main-navigation a::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       0;
    width:      0;
    height:     2px;
    background: var(--ms-color-gold);
    transition: width var(--ms-transition);
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a {
    color: var(--ms-color-gold);
}

.main-navigation a:hover::after,
.main-navigation .current-menu-item > a::after,
.main-navigation .current-menu-ancestor > a::after {
    width: 100%;
}

/* ---- Header-Aktionen ---- */

.header-actions {
    display:     flex;
    align-items: center;
    gap:         var(--ms-space-4);
    flex-shrink: 0;
}

/* ---- Icon-Button (Basis) ---- */

.icon-btn {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            40px;
    height:           40px;
    background:       none;
    border:           none;
    border-radius:    4px;
    color:            var(--ms-color-anthracite);
    cursor:           pointer;
    transition:       color var(--ms-transition), background var(--ms-transition);
    padding:          0;
}

.icon-btn:hover,
.icon-btn[aria-expanded="true"] {
    color:      var(--ms-color-gold);
    background: var(--ms-color-cream);
}

/* ---- CTA-Button ---- */

.header-cta {
    display:          inline-flex;
    align-items:      center;
    padding:          var(--ms-space-2) var(--ms-space-5);
    background-color: var(--ms-color-anthracite);
    color:            var(--ms-color-white);
    font-family:      var(--ms-font-body);
    font-size:        0.8125rem;
    font-weight:      600;
    letter-spacing:   0.06em;
    text-transform:   uppercase;
    text-decoration:  none;
    border-radius:    3px;
    transition:       background var(--ms-transition), color var(--ms-transition), border-color var(--ms-transition);
    white-space:      nowrap;
    border:           1px solid transparent;
}

.header-cta:hover {
    background-color: var(--ms-color-gold);
    border-color:     var(--ms-color-gold);
    color:            var(--ms-color-white);
}

/* ---- Hamburger-Button ---- */

.nav-toggle {
    display:    none;
    background: none;
    border:     none;
    padding:    var(--ms-space-2);
    cursor:     pointer;
    color:      var(--ms-color-anthracite);
    transition: color var(--ms-transition);
}

.nav-toggle:hover {
    color: var(--ms-color-gold);
}

.hamburger {
    display:  block;
    width:    24px;
    position: relative;
}

.hamburger span {
    display:    block;
    height:     2px;
    background: currentColor;
    transition: transform var(--ms-transition), opacity var(--ms-transition);
    transform-origin: center;
}

.hamburger span:nth-child(2) {
    margin: 5px 0;
}

/* Hamburger → X wenn offen */
.nav-toggle[aria-expanded="true"] .hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .hamburger span:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---- Such-Leiste ---- */

.header-search {
    border-top: 1px solid var(--ms-color-border);
    padding:    var(--ms-space-4) 0;
    background: var(--ms-color-cream);
}

.header-search form {
    display:     flex;
    align-items: center;
    gap:         var(--ms-space-3);
    max-width:   600px;
    margin:      0 auto;
}

.header-search .search-field {
    flex:          1;
    border:        1px solid var(--ms-color-border);
    border-radius: 3px;
    padding:       var(--ms-space-3) var(--ms-space-4);
    font-family:   var(--ms-font-body);
    font-size:     0.9375rem;
    color:         var(--ms-color-anthracite);
    background:    var(--ms-color-white);
    outline:       none;
    transition:    border-color var(--ms-transition);
}

.header-search .search-field:focus {
    border-color: var(--ms-color-gold);
}

.header-search .search-submit {
    display:     flex;
    align-items: center;
    background:  none;
    border:      none;
    color:       var(--ms-color-anthracite);
    cursor:      pointer;
    padding:     var(--ms-space-2);
    transition:  color var(--ms-transition);
}

.header-search .search-submit:hover {
    color: var(--ms-color-gold);
}

/* ---- Breadcrumb ---- */

.site-breadcrumb {
    background:    var(--ms-color-cream);
    border-bottom: 1px solid var(--ms-color-border);
    padding:       var(--ms-space-2) 0;
    font-size:     0.8125rem;
}

.breadcrumb {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         var(--ms-space-1);
    list-style:  none;
    margin:      0;
    padding:     0;
    color:       var(--ms-color-text-subtle);
}

.breadcrumb__item + .breadcrumb__item::before {
    content: '/';
    margin-right: var(--ms-space-1);
    color:   var(--ms-color-border);
}

.breadcrumb__item a {
    color:           var(--ms-color-text-subtle);
    text-decoration: none;
    transition:      color var(--ms-transition);
}

.breadcrumb__item a:hover {
    color: var(--ms-color-gold);
}

.breadcrumb__item--active {
    color:       var(--ms-color-anthracite);
    font-weight: 500;
}

/* ---- Offcanvas Mobile Navigation ---- */

.mobile-nav {
    position:   fixed;
    top:        0;
    right:      0;
    bottom:     0;
    width:      min(320px, 85vw);
    background: var(--ms-color-anthracite);
    z-index:    var(--ms-z-mobilnav);
    overflow-y: auto;
    padding:    var(--ms-space-6);
    transform:  translateX(100%);
    transition: transform var(--ms-transition-slow);
}

.mobile-nav.is-open {
    transform: translateX(0);
}

.mobile-nav__close {
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    margin-bottom:   var(--ms-space-8);
}

.mobile-nav__close-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      none;
    border:          none;
    color:           var(--ms-color-white);
    cursor:          pointer;
    padding:         var(--ms-space-2);
    opacity:         0.7;
    transition:      opacity var(--ms-transition);
}

.mobile-nav__close-btn:hover {
    opacity: 1;
}

.mobile-nav ul {
    list-style: none;
    margin:     0;
    padding:    0;
}

.mobile-nav ul li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav a {
    display:         block;
    padding:         var(--ms-space-4) 0;
    color:           rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-family:     var(--ms-font-body);
    font-size:       0.9375rem;
    font-weight:     500;
    letter-spacing:  0.04em;
    transition:      color var(--ms-transition);
}

.mobile-nav a:hover,
.mobile-nav .current-menu-item > a {
    color: var(--ms-color-gold);
}

/* ---- Responsive: Desktop ---- */

@media (min-width: 769px) {
    .nav-toggle    { display: none; }
    .mobile-nav    { display: none !important; }
    .nav-overlay   { display: none !important; }
}

/* ---- Responsive: Mobil ---- */

@media (max-width: 768px) {
    .main-navigation { display: none; }
    .nav-toggle      { display: block; }
    .header-cta      { display: none; }

    .site-header__inner {
        gap: var(--ms-space-4);
    }
}