/* ================================================================
   LISBOA CAR V4 — HEADER.CSS  (escrito do zero, classes lc-)
   Mobile-first. Consome os tokens de variables.css. Único lugar do
   estilo do cabeçalho — sem duplicação, sem CSS crítico inline.
   Layout: topo preto, borda laranja; logo + menu + 2 WhatsApp;
   no celular vira logo+hambúrguer, telefones em linha e menu em overlay.
   ================================================================ */

/* ---------- Bloco header ---------- */
.lc-header {
    position: relative;
    z-index: var(--z-index-sticky);
    background-color: var(--cor-preta);
    color: var(--cor-branca);
    border-bottom: 2px solid var(--cor-primaria);
}

/* MOBILE (igual ao V2): logo centralizado em cima, telefones empilhados no
   meio (com linhas divisórias) e hambúrguer centralizado embaixo. */
.lc-header__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacamento-sm);
    padding-block: var(--espacamento-sm);
    text-align: center;
}

/* ---------- Marca / logo ---------- */
.lc-header__brand { display: flex; align-items: center; justify-content: center; }
.lc-header__logo-link { display: inline-flex; align-items: center; }
.lc-header__brand img {
    max-height: 34px;   /* mobile menor (desktop 40 no @media) */
    width: auto;
    height: auto;
}

/* ---------- Contato (2 WhatsApp) — empilhados e centralizados no mobile ---------- */
.lc-header__contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacamento-xs);
    width: 100%;
    padding-block: var(--espacamento-xs);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.lc-phone {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--espacamento-2xs);
    padding: var(--espacamento-3xs) var(--espacamento-2xs);
    font-size: 17px;   /* mobile um pouco maior (desktop 16 no @media) */
    font-weight: 600;
    white-space: nowrap;
    border-radius: var(--borda-radius-sm);
    border: 1px solid transparent;
    transition: var(--transicao-rapida);
}
.lc-phone__icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--cor-whatsapp); transition: var(--transicao-rapida); }
.lc-phone__number { color: var(--cor-branca); }
.lc-phone:hover,
.lc-phone:focus-visible {
    background-color: rgba(var(--cor-whatsapp-rgb), 0.12);
    border-color: rgba(var(--cor-whatsapp-rgb), 0.35);
}
.lc-phone:hover .lc-phone__icon { transform: scale(1.1); }
.lc-phone:focus-visible { outline: 2px solid var(--cor-whatsapp); outline-offset: 2px; }

/* ---------- Hambúrguer (só mobile) ---------- */
.lc-burger {
    grid-area: burger;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 20px;
    padding: 0;
}
.lc-burger__line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--cor-branca);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease, background-color 0.2s ease;
}
.lc-burger:hover .lc-burger__line { background-color: var(--cor-primaria); }
.lc-burger:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 4px; }
.lc-burger.is-active .lc-burger__line:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.lc-burger.is-active .lc-burger__line:nth-child(2) { opacity: 0; }
.lc-burger.is-active .lc-burger__line:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ---------- Navegação (mobile: overlay em tela cheia) ---------- */
.lc-header__nav {
    grid-area: nav;
    position: fixed;
    inset: 0;
    z-index: var(--z-index-modal);
    display: none;
    padding: calc(var(--altura-header) + var(--espacamento-xl)) var(--margem-secao-lateral) var(--espacamento-xl);
    background-color: rgba(0, 0, 0, 0.98);
    overflow-y: auto;
}
.lc-header.is-menu-open .lc-header__nav { display: block; }
.lc-nav__list { display: flex; flex-direction: column; gap: 0; margin: 0; }
.lc-nav__item { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.lc-nav__link {
    display: block;
    padding: var(--espacamento-sm);
    color: var(--cor-branca);
    font-family: var(--fonte-textos);
    font-weight: 700;
    font-size: var(--p-size);
    text-align: center;
    text-transform: uppercase;
    transition: var(--transicao-rapida);
}
.lc-nav__link:hover,
.lc-nav__item.is-current > .lc-nav__link { color: var(--cor-primaria); }
.lc-nav__caret {
    display: inline-block;
    width: 0; height: 0; margin-left: var(--espacamento-3xs);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    vertical-align: middle;
}
/* Submenu no mobile: escondido; abre no toque (classe .is-open via JS) */
.lc-nav__sublist { display: none; background-color: rgba(var(--cor-primaria-rgb), 0.08); }
.lc-nav__item--has-children.is-open > .lc-nav__sublist { display: block; }
.lc-nav__link--sub { text-transform: none; font-weight: 400; font-size: var(--font-size-body-sm); }

/* ================================================================
   DESKTOP (>= 993px): grade horizontal, menu inline, dropdown no hover
   ================================================================ */
@media (min-width: 993px) {
    .lc-header--sticky { position: sticky; top: 0; }

    .lc-header__inner {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "brand nav contact";
        column-gap: var(--espacamento-lg);
        padding-block: var(--espacamento-md);
        min-height: var(--altura-header);
        text-align: left;
    }
    .lc-header__brand { grid-area: brand; justify-content: flex-start; }
    .lc-header__brand img { max-height: 40px; }

    .lc-burger { display: none; }

    /* Telefones empilhados à direita (como no site atual) */
    .lc-header__contact {
        grid-area: contact;
        flex-direction: column;
        align-items: flex-end;
        gap: var(--espacamento-2xs);
        width: auto;
        padding-block: 0;
        border-top: 0;
        border-bottom: 0;
    }
    .lc-phone { font-size: 16px; }
    .lc-phone__icon { width: 20px; height: 20px; }
    /* Badge "Online agora" ao passar o mouse */
    .lc-phone::after {
        content: "Online agora";
        position: absolute;
        top: -9px; right: -6px;
        padding: 1px 6px;
        background: var(--cor-badge-online);
        color: var(--cor-branca);
        font-size: 9px; font-weight: 700;
        border-radius: 10px;
        border: 1px solid var(--cor-branca);
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    .lc-phone:hover::after { opacity: 1; }

    /* Navegação inline */
    .lc-header__nav {
        grid-area: nav;
        position: static;
        display: block;
        justify-self: center;
        padding: 0;
        background: none;
        overflow: visible;
    }
    .lc-nav__list { flex-direction: row; align-items: center; gap: var(--espacamento-xs); }
    .lc-nav__item { position: relative; border-bottom: 0; }
    .lc-nav__link {
        padding: var(--espacamento-2xs) var(--espacamento-sm);
        font-size: var(--font-size-nav);
        border-radius: var(--borda-radius-sm);
    }
    .lc-nav__link:hover { background-color: rgba(var(--cor-primaria-rgb), 0.1); }
    /* Desktop: submenu abre no HOVER; a setinha some (ela é só afford. no mobile) */
    .lc-nav__caret { display: none; }

    /* Dropdown no hover */
    .lc-nav__sublist {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 240px;
        padding-block: var(--espacamento-2xs);
        background-color: var(--cor-preta);
        border: 1px solid rgba(var(--cor-primaria-rgb), 0.2);
        border-radius: var(--borda-radius-md);
        box-shadow: var(--sombra-media);
    }
    .lc-nav__item--has-children:hover > .lc-nav__sublist { display: block; }
    .lc-nav__link--sub {
        text-align: left;
        padding: var(--espacamento-2xs) var(--espacamento-sm);
        font-size: var(--font-size-nav);
    }
    .lc-nav__link--sub:hover { background-color: rgba(var(--cor-primaria-rgb), 0.15); }
}