/* ==========================================================================
   Header — single #desctopHeader at all widths (#mobileHeader removed)
   ========================================================================== */

/* Header */
#header {
    position: relative;
    z-index: 200;
}
#desctopHeader {
    position: relative;
}
.header-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    height: 130px;
    align-items: center;
    gap: 15px;
    padding: 10px 27px;
    border-bottom: 10px solid #f2ddac;
    background: linear-gradient(to bottom, var(--brand-green-dark) 0%, var(--brand-green) 100%);
    box-shadow: 2px 3px 7px rgb(0 0 0 / 30%);
}
.header-wrap:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url(/assets/img/icons/patern.png);
    background-size: cover;
    background-position: center;
}
.header-wrap > * {
    position: relative;
}
.header-wrap__logo {
    max-width: 230px;
}
.header-wrap__logo img {
    width: 100%;
    display: block;
}
.header-wrap__slogan {
    max-width: 342px;
}
.header-wrap__slogan img {
    width: 100%;
    display: block;
}
.header-wrap__social .social-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--brand-gold);
}
.header-wrap__social .social-wrap a {
    color: inherit;
    font-size: 18px;
    transition: opacity 0.2s;
}
.header-wrap__social .social-wrap a:hover {
    opacity: 0.7;
}
.header-bottom {
    position: absolute;
    z-index: 2;
    left: 0;
    top: calc(100% - 8px);
    filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.3));
}
.header-bottom span {
    text-transform: uppercase;
    display: inline-block;
    letter-spacing: 6px;
    font-size: 13px;
    font-weight: 600;
    clip-path: polygon(0 0, 0% 100%, 85% 100%, 100% 0%);
    background-color: #f2ddac;
    color: var(--brand-green-dark);
    padding: 0 100px 5px 30px;
}

/* Hamburger toggle — hidden on desktop, shown on small screens (replaces the
   social icons). Single header (#desctopHeader) is used at every width now;
   #mobileHeader was removed. */
.header-wrap__toggle {
    display: none;
}
.header-wrap__toggle a {
    color: var(--brand-gold);
    font-size: 26px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    transition: opacity 0.2s;
}
.header-wrap__toggle a:hover {
    opacity: 0.7;
}

/* ── Small screens: keep #desctopHeader, collapse to logo + language + burger.
   Fixed 53px bar pinned to the top; body padded so content clears it. ── */
@media screen and (max-width: 900px) {
    #header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 200;
    }
    body { padding-top: 53px; }
    .header-wrap {
        height: 53px;
        padding: 0 18px;
        border-bottom: 0;
        gap: 12px;
        flex-wrap: nowrap;
    }
    .header-wrap__logo { max-width: 118px; }
    .header-wrap__slogan { display: none; }              /* slogan hidden on small */
    .header-wrap__social { gap: 14px; }
    .header-wrap__social .social-wrap { display: none; } /* social icons → hamburger */
    .header-wrap__toggle { display: block; }
    .header-wrap__toggle a { font-size: 22px; }
    .header-bottom { display: none; }                    /* decorative ribbon off on small */
}


/* ==========================================================================
   Header language selector — code dropdown (EN/DE/ES), desktop + mobile.
   Ported from the live site. Markup: <ul class="language-switcher lang-dd-wrap">
   in header.php; wired by the inline script there (codes, current + caret).
   ========================================================================== */
/* lang selector + social icons share one wrap on desktop (no big gap between them) */
#desctopHeader .header-wrap .header-wrap__social { display: flex; align-items: center; gap: 16px; }

/* desktop header toggle: golden text + golden border, no background (matches social icons).
   The open dropdown panel keeps dark text on white so it stays readable. */
#desctopHeader .lang-dd-wrap .current-lang { background: none; border-color: var(--brand-gold); box-shadow: none; }
#desctopHeader .lang-dd-wrap .current-lang:hover { border-color: #fff; }
#desctopHeader .lang-dd-wrap .current-lang a.lang-code { color: var(--brand-gold); }
#desctopHeader .lang-dd-wrap .current-lang .lang-caret { border-top-color: var(--brand-gold); }

.lang-dd-wrap { position: relative; display: inline-flex; list-style: none; margin: 0; padding: 0; }
.lang-dd-wrap .lang-item { margin: 0; }
.lang-dd-wrap a.lang-code { background: none; width: auto; height: auto;
    box-shadow: none; margin: 0; padding: 0;
    font: 700 14px 'Roboto', sans-serif; letter-spacing: .6px; line-height: 1;
    color: #2f3f3a; display: inline-block; text-decoration: none; }
.lang-dd-wrap .current-lang { position: relative; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    background: #fffdf7; border: 1px solid #d8cfb9; border-radius: 8px; padding: 6px 11px;
    box-shadow: 0 1px 2px rgba(20, 30, 50, .08); transition: border-color .15s ease; }
.lang-dd-wrap .current-lang:hover { border-color: var(--brand-green); }
.lang-dd-wrap .lang-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid #6b5a2a; transition: transform .15s ease; }
.lang-dd-wrap.lang-open .lang-caret { transform: rotate(180deg); }
.lang-dd-wrap .lang-dd { position: absolute; top: 100%; left: 0; min-width: 100%;
    margin: 5px 0 0; padding: 4px; list-style: none; display: none;
    flex-direction: column; gap: 2px; background: #fff;
    border: 1px solid #d8cfb9; border-radius: 8px;
    box-shadow: 0 8px 20px rgba(20, 30, 50, .18); z-index: 120; }
.lang-dd-wrap.lang-open .lang-dd { display: flex; }
.lang-dd-wrap .lang-dd a.lang-code { display: block; padding: 7px 13px; border-radius: 5px; color: #2f3f3a; }
.lang-dd-wrap .lang-dd a.lang-code:hover { background: #f3efe3; color: var(--brand-green); }

/* small screens: lang selector sits just left of the hamburger */
@media screen and (max-width: 900px) {
    .header-wrap__social .lang-dd-wrap { margin-right: 4px; }
}