/* ============================================================
   CA Header Desktop Nav — CSS (Figma-aligned, bereinigt)
   Array-basierte Navigation, passend zu nav-desktop.php
   Nur Desktop — Mobile bleibt separat.
   ============================================================ */


/* === Wrapper ========================================================= */
#main_header_wrapper {
    background-color: #fff;
}

#main_header_wrapper #masthead.site-header {
    width: 100% !important;
    max-width: 1420px !important;
    margin: 0 auto;
    padding-bottom: 0;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
}

/* Overrides gegen minifizierte Legacy-CSS (ca-akademie-mini.css / header.css),
   die per WP-Cache inline injected werden. Die alte Regel
   .non-sticky-header .non-sticky { display:block !important } greift auf
   .nav-top-row (hat Klasse "non-sticky") — daher brauchen wir sowohl
   !important als auch höhere Spezifität zum Überschreiben. */
#main_header_wrapper #masthead.site-header > * {
    float: none !important;
}

#main_header_wrapper #masthead.site-header .nav-top-row.non-sticky,
#main_header_wrapper #masthead.site-header .nav-top-row {
    display: flex !important;
    float: none !important;
}

#main_header_wrapper #masthead.site-header .ca-nav-main.nav-row {
    display: flex !important;
    width: 100% !important;
    float: none !important;
}

/* Elemente aus alter Menü-Ära ausblenden */
#nav-box-container,
.divider.outer,
.sticky-space {
    display: none;
}


/* === TOP ROW: zwei Logos + a-Icon ==================================== */
.nav-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 36px 10px;
    gap: 24px;
}

.nav-top-row .logo-wrapper {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.nav-top-row .logo-wrapper.primary {
    margin-right: auto;
}

.nav-top-row .logo-wrapper.consulting {
    margin-left: auto;
    margin-right: 20px;
}

.nav-top-row .logo-wrapper.secondary {
    flex: 0 0 auto;
}

.nav-top-row .logo {
    display: block;
    width: auto;
    height: 40px;
}

.nav-top-row .logo.secondary {
    height: 50px;
}

/* Legacy-CSS hat .de-logo { display:none !important } — hier reaktivieren */
#main_header_wrapper #masthead.site-header .nav-top-row .logo.de-logo {
    display: block !important;
}

.logo-ca-consulting-text {
    color: #E11E00;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 25px;
    letter-spacing: -0.2px;
    white-space: nowrap;
}


/* === MAIN NAV ROW ==================================================== */
.ca-nav-main.nav-row {
    position: relative;
    display: flex;
    width: 100%;
    align-items: stretch;
    padding: 4px 36px 0;
}

.nav-group {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 30px;
}

.nav-group-main {
    flex: 1;
    align-self: center;
}

.nav-group-consulting {
    flex: 0 0 auto;
    padding-left: 24px;
    margin-left: 20px;
    align-self: center;
    position: relative;
}

.nav-group-consulting::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 63px;
    width: 1px;
    background: #838484;
}


/* === NAV ITEMS (oberste Ebene) ======================================= */
.nav-item {
    list-style: none;
    padding-bottom: 14px;
}

.nav-item-link {
    display: inline-block;
    padding: 4px 0;
    color: #838484;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.15;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

/* Hover 1 — Items MIT Dropdown: unterstrichen + Dropdown öffnet */
.nav-item.has-panel:hover > .nav-item-link {
    border-bottom-color: #838484;
}

/* Hover 2 — Items OHNE Dropdown (style-none): Farbe dunkler */
.nav-item:not(.has-panel):hover > .nav-item-link {
    color: #2b2b2b;
}


/* === PANEL (Dropdown-Container) ====================================== */
.nav-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    background: #fff;
    border: 1px solid #EFEFEF;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
    z-index: 20;
}

.nav-item.has-panel:hover > .nav-panel,
.nav-panel:hover {
    display: block;
}

.nav-panel-inner {
    padding: 33px 40px 30px;
    display: grid;
    grid-template-columns: 1fr 247px;
    gap: 0;
    align-items: start;
}

.nav-panel-headline {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #838484;
    margin: 0 0 24px;
}


/* === Style A: Cluster-Boxen ========================================== */
.nav-panel-a .nav-panel-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;
}

.nav-cluster-box {
    display: block;
    text-decoration: none;
    overflow: hidden;
    background: #fff;
    transition: filter 0.15s;
}

/* Hover 3a — Cluster-Box: Farbe dunkler */
.nav-cluster-box:hover {
    filter: brightness(0.88);
}

.nav-cluster-img {
    display: block;
    width: 100%;
    height: 137px;
    object-fit: cover;
    background: #f5f5f5;
}

.nav-cluster-label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 8px 10px;
    color: #fff;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    line-height: 1.15;
}


/* === Style B: Bild-Karten ============================================ */
.nav-panel-b .nav-panel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.nav-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #838484;
}

.nav-card-img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    background: #f5f5f5;
    margin-bottom: 8px;
}

.nav-card-label {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    color: #838484;
}

/* Hover 3b — Karte: wird bold */
.nav-card:hover .nav-card-label {
    font-weight: 700;
}


/* === Service-Team Aside (247×293 Hintergrund-Card) =================== */
.nav-panel-team {
    position: relative;
    width: 247px;
    height: 293px;
    border: 1px solid #EFEFEF;
    background: #fff;
    overflow: hidden;
    margin-left: 8px;
}

.nav-panel-team::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--team-img, none);
    background-size: 100% 100%;
    background-position: center;
    z-index: 0;
}

.nav-panel-team::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 47%;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 68%);
    z-index: 1;
    pointer-events: none;
}

.nav-panel-team .nav-panel-headline {
    position: relative;
    z-index: 2;
    padding: 30px 28px 0;
    margin: 0;
}

.nav-team-tel,
.nav-team-mail {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 193px;
    padding: 8px 10px;
    margin: 0 auto 8px;
    background: #E11E00;
    color: #fff;
    text-decoration: none;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
}

.nav-team-tel {
    margin-top: 128px;
}

.nav-team-tel:hover,
.nav-team-mail:hover {
    background: #b31700;
    color: #fff;
}


/* === Right-Side Icons (Suche, EN, Cart, Merkzettel, Login) =========== */
.nav-icons {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: 24px;
    align-self: center;
    color: #838484;
}

.nav-icons a {
    color: inherit;
    text-decoration: none;
}

.nav-icons .nav-right-icons {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #838484;
    transition: color 0.15s;
}

.nav-icons .nav-right-icons:hover {
    color: #2b2b2b;
}

.nav-icons .fas,
.nav-icons .far,
.nav-icons .fa {
    font-size: 18px;
    line-height: 1;
}

/* WPML Flag */
.nav-icons .en-icon img,
.nav-icons .wpml-ls img {
    width: 20px;
    height: auto;
    display: block;
}

.nav-icons .wpml-ls {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-icons .wpml-ls ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.nav-icons .wpml-ls li {
    display: flex;
}

/* Suche-Icon (war früher per FA als Klassen-Icon, jetzt leer — fallback) */
.nav-icons .suche-icon::before {
    content: "\f002"; /* fa-search */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", FontAwesome;
    font-weight: 900;
    font-size: 18px;
}

/* Warenkorb-Counter-Bubble (falls >0) */
.nav-icons .warenkorb-user-count {
    position: absolute;
    top: -8px;
    right: -10px;
    background: #E11E00;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    line-height: 1.2;
}

.nav-icons .merkzettel-counter .simplefavorites-user-count {
    position: absolute;
    top: -8px;
    right: -10px;
    background: #E11E00;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    line-height: 1.2;
}

/* Info-Boxen aus alter Ära verstecken */
.nav-icons .info-box-content {
    display: none;
}


/* === Sticky-Header Anpassungen ======================================= */
#main_header_wrapper.sticky-header .nav-top-row {
    display: none;
}

#main_header_wrapper.sticky-header .ca-nav-main.nav-row {
    padding: 8px 36px;
}