/* ==========================================================================
   HEADER.CSS — Fundação Fênix 193
   Header padronizado em duas camadas, usado em todas as páginas do site:

   #main-header
   ├── .header--top   → Logo · Pesquisa · AkanniHUB · Redes Sociais
   └── .header--main  → Navegação principal (com dropdowns)

   DESKTOP (> 768px)
   - Camada superior (branca) rola junto com a página e "esconde" ao descer;
     a barra de navegação (escura) permanece fixa no topo (sticky).
   - Pesquisa, AkanniHUB e redes ficam na camada superior.

   MOBILE (≤ 768px)
   - Só a camada superior (logo + hambúrguer, 70px) fica visível.
   - A navegação vira o menu em tela cheia já existente (#menu.active),
     e Pesquisa / AkanniHUB / Redes aparecem dentro dele
     (.menu-mobile-search e .menu-mobile-extras).

   ATENÇÃO: os IDs #main-header, #nav-menu, #menu e #btn-mobile foram
   mantidos — os scripts de menu/dropdown já existentes continuam valendo.

   Carregar DEPOIS de style.css e dropdown.css (substitui as regras antigas
   do header, inclusive o CSS crítico inline de cada página).
   ========================================================================== */

:root {
    --header-top-h: 76px;
    /* altura da camada superior (desktop) */
    --header-main-h: 48px;
    /* altura da barra de navegação (desktop) */
}

/* -------------------------------------------------
   1. CONTÊINER DO HEADER
   top negativo = altura da camada superior → ao rolar, ela sai da tela
   e só a barra de navegação fica grudada no topo.
------------------------------------------------- */
#main-header {
    position: sticky;
    top: calc(-1 * var(--header-top-h));
    z-index: 1000;
    background: var(--off-white);
    box-shadow: 0 2px 16px rgba(0, 0, 0, .3);
}

/* -------------------------------------------------
   2. HEADER--TOP  (Logo · Pesquisa · AkanniHUB · Redes)
------------------------------------------------- */
#main-header .header--top {
    height: var(--header-top-h);
    background: var(--off-white);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.header-top-inner {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 24px;
}

#main-header .header--top .logo-area {
    flex-shrink: 0;
}

/* ── Pesquisa ── */
.header-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.header-search--top {
    flex: 1 1 200px;
    min-width: 140px;
    max-width: 460px;
    margin: 0 auto;
    /* centraliza entre logo e ações */
}

.header-search-input {
    width: 100%;
    height: 42px;
    padding: 0 50px 0 18px;
    background: var(--white);
    border: 1.5px solid var(--gray-light);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: .9rem;
    color: var(--text);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.header-search-input::placeholder {
    color: var(--text-muted);
}

/* Remove o "x" nativo do input[type=search] (o botão de busca basta) */
.header-search-input::-webkit-search-cancel-button,
.header-search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.header-search-input:hover {
    border-color: var(--gray);
}

.header-search-input:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(225, 34, 23, .15);
}

.header-search-btn {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: var(--red);
    color: var(--white);
    border: none;
    border-radius: 50%;
    font-size: .85rem;
    cursor: pointer;
    transition: background var(--transition);
}

.header-search-btn:hover {
    background: var(--red-dark);
}

/* ── Ações: AkanniHUB + redes sociais ── */
.header-top-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.header-hub-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    background: transparent;
    color: var(--navy);
    border: 1.5px solid var(--navy);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.header-hub-btn i {
    color: var(--red);
    transition: color var(--transition);
}

.header-hub-btn:hover {
    background: var(--navy);
    color: var(--white);
}

.header-hub-btn:hover i {
    color: var(--amber);
}

.header-social {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
}

.header-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--white);
    color: var(--navy);
    border: 1px solid var(--gray-light);
    border-radius: var(--radius);
    font-size: .95rem;
    transition: background var(--transition), border-color var(--transition),
        color var(--transition), transform var(--transition);
}

.header-social a:hover {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
    transform: translateY(-2px);
}

/* Hover por rede (mesmas cores do rodapé) */
.header-social a[aria-label="Instagram"]:hover {
    background: #c13584;
    border-color: #c13584;
}

.header-social a[aria-label="Facebook"]:hover {
    background: #1877f2;
    border-color: #1877f2;
}

.header-social a[aria-label="WhatsApp"]:hover {
    background: #25d366;
    border-color: #25d366;
}

.header-social a[aria-label="YouTube"]:hover {
    background: #ff0000;
    border-color: #ff0000;
}

/* Itens exclusivos do menu mobile: escondidos no desktop */
.menu-mobile-search,
.menu-mobile-extras {
    display: none;
}

/* -------------------------------------------------
   3. HEADER--MAIN  (navegação principal) — DESKTOP
------------------------------------------------- */
@media (min-width: 769px) {

    #main-header .header--main {
        background: var(--navy);
        border-bottom: 3px solid var(--red);
    }

    #main-header .header--main .container {
        height: var(--header-main-h);
    }

    #main-header #nav-menu,
    #main-header #menu {
        height: 100%;
    }

    #main-header #menu {
        align-items: stretch;
        gap: 2px;
    }

    #main-header #menu>li {
        display: flex;
        align-items: stretch;
    }

    /* Itens exclusivos do menu mobile: SEMPRE escondidos no desktop.
       Precisa vir depois (e com mais especificidade) da regra acima,
       senão o display:flex do li vence o display:none. */
    #main-header #menu>li.menu-mobile-search,
    #main-header #menu>li.menu-mobile-extras {
        display: none;
    }

    /* Links de primeiro nível (não afeta os itens dos dropdowns) */
    #main-header #menu>li>a {
        position: relative;
        display: flex;
        align-items: center;
        padding: 0 14px;
        border-radius: 0;
        color: rgba(255, 255, 255, .9);
        font-size: .875rem;
        font-weight: 600;
        letter-spacing: .03em;
    }

    #main-header #menu>li>a:hover {
        color: var(--amber);
        background: rgba(255, 255, 255, .07);
    }

    /* Traço âmbar: hover/foco e página atual (aria-current="page") */
    #main-header #menu>li>a::after {
        content: '';
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 0;
        height: 3px;
        background: var(--amber);
        border-radius: 3px 3px 0 0;
        transform: scaleX(0);
        transition: transform var(--transition);
    }

    #main-header #menu>li>a:hover::after,
    #main-header #menu>li.has-dropdown:hover>a::after,
    #main-header #menu>li>a[aria-current="page"]::after {
        transform: scaleX(1);
    }

    #main-header #menu>li>a[aria-current="page"] {
        color: var(--amber);
    }

    /* Dropdown encostado na barra (substitui o offset de 10px do dropdown.css) */
    #main-header .dropdown-menu {
        top: calc(100% + 6px);
    }
}

/* Tablet: libera espaço na camada superior */
@media (min-width: 769px) and (max-width: 1024px) {
    .header-social {
        display: none;
    }

    .header-top-inner {
        gap: 16px;
    }
}

@media (min-width: 769px) and (max-width: 900px) {

    /* AkanniHUB vira botão só com ícone (o aria-label mantém o nome acessível) */
    .header-hub-label {
        display: none;
    }

    .header-hub-btn {
        width: 40px;
        padding: 0;
        justify-content: center;
    }

    #main-header .logo-title {
        font-size: 1rem;
    }
}

/* -------------------------------------------------
   4. MOBILE (≤ 768px)
------------------------------------------------- */
@media (max-width: 768px) {

    /* Sem recolhimento da camada superior: header fixo de 70px */
    #main-header {
        top: 0;
    }

    #main-header .header--top {
        height: 70px;
    }

    .header-top-inner {
        gap: 12px;
    }

    /* Pesquisa/AkanniHUB/redes do topo saem; entram no menu em tela cheia */
    .header--top .header-search--top,
    .header-top-actions {
        display: none;
    }

    #btn-mobile {
        margin-left: auto;
    }

    /* A camada de navegação não ocupa espaço: #menu é position: fixed */
    #main-header .header--main {
        height: 0;
        background: transparent;
        border: 0;
    }

    /* ── Pesquisa dentro do menu ── */
    #main-header .menu-mobile-search {
        display: block;
        padding: 6px 0 14px;
    }

    #main-header .menu-mobile-search .header-search-input {
        height: 48px;
        font-size: 1rem;
        /* ≥16px evita zoom automático no iOS */
    }

    #main-header .menu-mobile-search .header-search-btn {
        width: 38px;
        height: 38px;
        right: 5px;
    }

    /* ── AkanniHUB + redes dentro do menu ── */
    #main-header .menu-mobile-extras {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid var(--gray-light);
    }

    /* Especificidade maior que "#menu a" (regra genérica dos links do menu) */
    #main-header .menu-mobile-extras a.header-hub-btn {
        justify-content: center;
        width: 100%;
        height: 48px;
        padding: 0 18px;
        border-radius: 999px;
        font-family: var(--font-body);
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: .02em;
        color: var(--navy);
    }

    #main-header .menu-mobile-extras a.header-hub-btn:hover {
        color: var(--white);
        background: var(--navy);
    }

    #main-header .menu-mobile-extras .header-social {
        justify-content: center;
        gap: 12px;
    }

    #main-header .menu-mobile-extras .header-social a {
        justify-content: center;
        width: 46px;
        height: 46px;
        min-height: 0;
        padding: 0;
        border-radius: var(--radius);
        font-family: var(--font-body);
        font-size: 1.1rem;
        color: var(--navy);
    }

    #main-header .menu-mobile-extras .header-social a:hover {
        color: var(--white);
    }
}