/* Top bar shared by EVERY page of the site.
   The bar's HTML is partials/site-header.html and its behaviour is assets/js/site-header.js:
   edit here and the change reaches all the pages. See docs/ARCHITETTURA.md ("La barra in alto").
   The variables (--blue-eu, --white, --gray-*, --font) are the ones every page already declares in :root. */

/* The page the bar sits in must not change how it looks: same reset, same text settings on every page */
header, header *, header *::before, header *::after { box-sizing: border-box; margin: 0; padding: 0; }
header { font-family: var(--font); line-height: 1.6; text-align: start; }

/* ── HEADER ── */
header {
    background: var(--blue-eu);
    color: var(--white);
    padding: 0 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
    transition: box-shadow 0.25s, transform 0.3s ease;
}

header.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.32); }

header.header-hidden { transform: translateY(-100%); }

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    padding: 0.65rem 0;
}

.brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.brand-logo {
    height: 42px;
    width: auto;
    display: block;
}

/* ── NAV ── */
nav ul {
    list-style: none;
    display: flex;
    gap: 0.1rem;
    flex-wrap: wrap;
}

nav a {
    display: block;
    padding: 0.4rem 0.85rem;
    color: rgba(255,255,255,0.88);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    border-radius: 6px;
    transition: background 0.18s, color 0.18s;
    letter-spacing: 0.02em;
}

nav a:hover, nav a.active {
    background: rgba(255,255,255,0.14);
    color: var(--white);
}

/* ── INSTAGRAM BUTTON (header) ── */
.ig-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.38rem 0.35rem;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.35);
    color: rgba(255,255,255,0.88);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    flex-shrink: 0;
    transition: background 0.18s, border-color 0.18s;
    white-space: nowrap;
}

.ig-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.7);
    color: var(--white);
}

.ig-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ── HEADER ACTION BUTTONS — each sized to its own content, not a
   shared fixed width: at 1200px wide (desktop) a fixed 100px was
   already too narrow for "WhatsApp"/"Instagram" (bled past the box,
   hidden only by the old 24px gap) and too wide for "LinkedIn" or
   the language switcher, wasting the space this fix needs back. ── */
.header-action-btn {
    width: auto;
    box-sizing: border-box;
    justify-content: center;
}

.lang-switcher.header-action-btn { display: flex; align-items: stretch; }

.lang-switcher.header-action-btn .lang-trigger { width: 100%; justify-content: center; }

/* ── HEADER ACTIONS: WhatsApp, Instagram, LinkedIn, language and login are ONE group
   pinned to the right, with the same fixed gap between boxes in every language.
   All the space left over sits between the menu and this group. Before, the bar
   used space-between and spread the surplus over every gap: a short menu (EN, IT,
   ES) gave each box a lot of air, the long German menu almost none. The logo and
   the menu stay together on the left. On phones the wrapper is transparent (see
   the last media block), so the phone layout is exactly what it was. ── */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    flex-shrink: 0;
}

/* Header: brand + controls on row 1, nav on row 2. Threshold is 1024px,
   not 768px, because below 1024px the single-row desktop layout has no
   room left to shrink and overflows horizontally (measured in German,
   the longest-word language of the 5 — see docs/VERIFICHE.md). */
@media (max-width: 1024px) {
    .header-inner {
        flex-direction: row;
        gap: 0.5rem;
        padding: 0.55rem 0;
        flex-wrap: wrap;
    }

    .header-inner nav {
        order: 10;
        width: 100%;
        border-top: 1px solid rgba(255,255,255,0.15);
        padding-top: 0.4rem;
        padding-bottom: 0.2rem;
    }

    nav ul {
        gap: 0.1rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Brand logo scales down below desktop width */
    .brand-logo { height: 32px; }

    /* Hide Instagram/LinkedIn label, keep only icon */
    .ig-btn span { display: none; }

    .ig-btn { padding: 0.3rem; }

    /* Compact auth button */
    .auth-btn { padding: 0.3rem 0.6rem; font-size: 0.78rem; }
}

/* ── LANGUAGE SWITCHER ── */
.lang-switcher {
    position: relative;
    flex-shrink: 0;
}

.lang-trigger {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.35);
    color: rgba(255,255,255,0.88);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.38rem 0.35rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.lang-trigger:hover,
.lang-switcher.open .lang-trigger {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.7);
    color: var(--white);
}

.lang-trigger svg {
    width: 9px;
    height: 9px;
    transition: transform 0.15s;
    flex-shrink: 0;
}

.lang-switcher.open .lang-trigger svg {
    transform: rotate(180deg);
}

.lang-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--blue-eu-dark);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    padding: 0.3rem;
    z-index: 2000;
    min-width: 64px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    flex-direction: column;
    gap: 0.1rem;
}

.lang-switcher.open .lang-dropdown {
    display: flex;
}

.lang-dropdown button {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.65);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 0.4rem 0.7rem;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    width: 100%;
    transition: all 0.15s;
}

.lang-dropdown button:hover,
.lang-dropdown button.lang-active {
    background: rgba(255,255,255,0.15);
    color: var(--white);
}

/* ── AUTH BUTTON + DROPDOWN ──────────────────────────── */
.auth-wrap {
    position: relative;
    flex-shrink: 0;
}

.auth-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.35);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.38rem 0.35rem;
    border-radius: 6px;
    color: rgba(255,255,255,0.88);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--font);
    flex-shrink: 0;
    transition: background 0.18s, border-color 0.18s;
    white-space: nowrap;
}

.auth-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.7);
    color: var(--white);
}

.auth-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

.auth-user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 190px;
    z-index: 500;
    overflow: hidden;
}

.auth-user-dropdown.open { display: block; }

.auth-dropdown-email {
    padding: 0.6rem 1rem 0.45rem;
    font-size: 0.76rem;
    color: var(--gray-500);
    border-bottom: 1px solid var(--gray-200);
    word-break: break-all;
}

.auth-dropdown-item {
    display: block;
    width: 100%;
    padding: 0.6rem 1rem;
    font-size: 0.87rem;
    color: var(--gray-700);
    text-decoration: none;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: var(--font);
    transition: background 0.14s;
}

.auth-dropdown-item:hover { background: var(--gray-100); }

/* Language switcher + login are grouped so that on phones they wrap together.
   Above 767px the wrapper is transparent: the layout is exactly what it was. */
.header-tools { display: contents; }

/* ── PHONE (max-width: 767px): compact header ─────────────────
   Row 1: logo + WhatsApp / Instagram / LinkedIn / language / login,
   left-aligned. If they do not all fit, language + login move to row 2
   TOGETHER (never login alone). Then the menu. 768px and above is untouched.
   Kept last in the stylesheet on purpose: some base rules
   (.auth-btn, .lang-trigger) come after the older responsive blocks
   and would win over anything placed earlier. ── */
@media (max-width: 767px) {
    header { padding: 0 0.75rem; }

    /* Transparent wrapper: brand, icons, language and login are again direct children of the bar */
    .header-actions { display: contents; }

    .header-inner {
        position: relative;
        justify-content: flex-start;
        column-gap: 0.4rem;
        row-gap: 0.3rem;
        padding: 0.4rem 0;
    }

    .header-inner nav {
        min-width: 0;
        padding-top: 0.2rem;
        padding-bottom: 0.1rem;
    }

    /* Menu: ONE row that scrolls sideways with the finger. The scrollbar is hidden;
       a fade on the edge (classes set by the script below) shows there is more. */
    nav ul {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    nav ul::-webkit-scrollbar { display: none; }

    nav li { flex: 0 0 auto; }

    nav a { padding: 0.3rem 0.7rem; white-space: nowrap; }

    nav.nav-more-right ul {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    }

    nav.nav-more-left ul {
        -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
    }

    nav.nav-more-left.nav-more-right ul {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
    }

    .header-tools {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        flex-shrink: 0;
    }

    /* The login dropdown is anchored to the right edge of the bar (not of the
       button): the button can be on row 1 or row 2, this always stays on screen. */
    .auth-wrap { position: static; }

    /* Bigger tap area for the three icon boxes without making them wider */
    .ig-btn { position: relative; }

    .ig-btn::before { content: ""; position: absolute; top: -3px; right: -3px; bottom: -3px; left: -3px; }
}