/* ==========================================================================
   COMPONENTES GLOBAIS — BÁRBARA RESENDE
========================================================================== */


/* ==========================================================================
   01. HEADER — CONFIGURAÇÃO BASE
========================================================================== */

.site-header {
    z-index: var(--z-header);

    background: var(--color-header);

    transition:
        left var(--ease),
        right var(--ease),
        background-color var(--ease),
        box-shadow var(--ease),
        transform var(--ease);
}


/* ==========================================================================
   02. HEADER — ESTADO INICIAL

   Agora ocupa toda a largura desde o carregamento,
   porque a antiga coluna lateral foi removida.
========================================================================== */

.site-header:not(.is-sticky) {
    position: absolute;

    top: 1.5rem;
    left: 0;
    right: 0;

    width: auto;
}


/* ==========================================================================
   03. HEADER — ESTADO FIXO

   Depois do scroll ocupa toda a largura da tela.
========================================================================== */

.site-header.is-sticky {
    position: fixed;

    top: 1.5rem;
    left: 0;
    right: 0;

    width: auto;

    background: var(--color-header-sticky);

    box-shadow:
        0 0.75rem 2.25rem rgba(17,
            50,
            104,
            0.18);
}


/* ==========================================================================
   04. ESTRUTURA INTERNA DO HEADER

   No scroll (.is-sticky) o header encolhe — a altura some do
   header-row, não do <header> em si, então o menu suspenso (que se
   ancora em "top:100%" do header-row) já acompanha a mudança sozinho.
========================================================================== */

.header-row {
    position: relative;

    min-height: var(--header-height);

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap:
        clamp(1rem,
            2vw,
            2rem);

    transition: min-height var(--ease);
}

.site-header.is-sticky .header-row {
    min-height: var(--header-height-sticky);
}


/* ==========================================================================
   05. MARCA (centralizada) — duas versões empilhadas, alternadas por
   CSS conforme o estado do header (ver bloco de troca de logo abaixo).

   Centralizada por posicionamento absoluto (não por coluna de grid): assim
   ela fica sempre no centro exato do header, mesmo quando o menu (à
   esquerda) precisa de mais espaço que as ações (à direita) — antes, as
   duas colunas dividiam o espaço em partes iguais e o menu vazava por
   cima da logo.
========================================================================== */

.brand {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 1;
}

.brand__img {
    width: 20rem;
    height: auto;
    display: block;

    transition: width var(--ease);
}

/*
 * No header fixo (scroll) a logo também precisa encolher — senão fica
 * colada no topo/rodapé do header, que já é bem mais baixo nesse
 * estado (ver --header-height-sticky). Mantém a mesma redução em rem
 * do tamanho inicial anterior (18→11rem), só aplicada ao novo base
 * (20rem), pra não ficar pequena demais em nenhum dos dois estados.
 */
.site-header.is-sticky .brand__img {
    width: 13rem;
}

/*
 * A versão negativa (branca) do logo não é mais trocada no scroll —
 * só o fundo do header muda de cor (ver .site-header.is-sticky). Fica
 * sempre escondida no header.
 */
.brand__img--negativo {
    display: none;
}


/* ==========================================================================
   06. NAVEGAÇÃO PRINCIPAL
========================================================================== */

.header-nav-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

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

/*
 * O menu fica sempre atrás do toggle (mesmo padrão do Artemis), em vez de
 * ficar sempre visível ao lado da logo — com a logo centralizada, uma
 * lista de 6 links "sempre aberta" não cabe sem invadir o espaço da logo.
 * Vira uma barra horizontal cheia, abaixo do header (não um dropdown
 * pequeno), ancorada no .header-row — que é quem tem position:relative
 * e quem muda de altura no scroll — então o painel já acompanha o
 * header sozinho, sem JS extra.
 */
.main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;

    z-index: 20;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    gap:
        clamp(1.5rem,
            3vw,
            2.5rem);

    max-height: 0;
    overflow: hidden;

    padding-inline:
        clamp(1.25rem,
            3vw,
            3rem);

    background: var(--color-white);

    border-top: 1px solid var(--color-surface);

    box-shadow: var(--shadow-sm);

    opacity: 0;
    visibility: hidden;

    transition:
        max-height var(--ease),
        opacity var(--ease);
}


.main-nav.is-open {
    max-height: 6rem;

    padding-block: 1rem;

    opacity: 1;
    visibility: visible;
}


.main-nav a {
    display: inline-flex;
    align-items: center;

    padding-block: 0.5rem;
    padding-inline: 0.875rem;

    color: var(--color-blue);

    font-size: var(--font-size-base);

    font-weight: 800;

    white-space: nowrap;

    background: transparent;

    border-radius: var(--radius-sm);
    border-bottom: 0.1875rem solid transparent;

    transition:
        color var(--ease-fast),
        background-color var(--ease-fast),
        border-color var(--ease-fast);
}


.main-nav a:hover,
.main-nav a:focus-visible {
    color: var(--color-secondary);

    background: rgba(35, 182, 233, 0.12);

    border-bottom-color: var(--color-secondary);
}


.main-nav a[aria-current="page"],
.main-nav a[aria-current="page"]:hover,
.main-nav a[aria-current="page"]:focus-visible {
    color: var(--color-blue);

    background: rgba(35, 182, 233, 0.12);

    border-bottom-color: var(--color-blue);
}


/* ==========================================================================
   07. BOTÃO PRINCIPAL DO HEADER
========================================================================== */

.header-cta {
    min-width: 10rem;
    min-height: 3.125rem;

    padding-inline: 1.5rem;

    display: inline-flex;

    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    color: var(--color-white);

    background: var(--color-secondary);

    border:
        1px solid transparent;

    border-radius: var(--pill);

    box-shadow:
        0 0.5rem 1.5rem rgba(17,
            50,
            104,
            0.16);

    transition:
        color var(--ease-fast),
        background-color var(--ease-fast),
        border-color var(--ease-fast),
        box-shadow var(--ease-fast),
        transform var(--ease-fast);
}


.header-cta:hover {
    color: var(--color-white);

    background: var(--color-secondary-hover);

    box-shadow:
        0 0.85rem 2rem rgba(17,
            50,
            104,
            0.28);

    transform: translateY(-0.125rem);
}


.header-cta:active {
    background: var(--color-secondary-active);

    transform: translateY(0);
}


.header-cta span {
    font-size: var(--font-size-xs);

    font-weight: 800;

    white-space: nowrap;
}

/* Ícone coerente em todos os botões do site — mesma seta usada nos
   links do rodapé, só pra reforçar a ação sem competir com o texto. */
.btn__icon,
.header-cta__icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* ==========================================================================
   TEXTO DO BOTÃO GLOBAL — QUERO SER OUVIDO
========================================================================== */

.header-cta,
.header-cta span {
    color: var(--color-white);

    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 800;
    line-height: 1;

    text-decoration: none;
    letter-spacing: 0;
    white-space: nowrap;
}


/* ==========================================================================
   BOTÃO SECUNDÁRIO DO HEADER — COMPROMISSOS

   Mesmo tamanho/formato do CTA principal, preenchido no azul mais forte
   do design system — não compete com o verde de "Quero ser ouvido".
========================================================================== */

.header-cta--outline,
.header-cta--outline span {
    color: var(--color-white);
}

.header-cta--outline {
    background: var(--color-blue);

    border-color: transparent;

    box-shadow: none;
}

.header-cta--outline:hover {
    color: var(--color-white);

    background: var(--color-primary);

    box-shadow: none;
}

.header-cta--outline:hover span {
    color: var(--color-white);
}


/* ==========================================================================
   08. MENU TOGGLE
========================================================================== */

.menu-toggle {
    height: 2.75rem;

    padding-inline: 0.5rem 0.75rem;

    display: inline-flex;
    align-items: center;
    gap: 0.75rem;

    border: 0;
    border-radius: var(--pill);

    background: transparent;

    cursor: pointer;

    transition: background-color var(--ease-fast);
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
    background: var(--color-surface-soft);
}

.menu-toggle__icon {
    width: 1.75rem;

    display: grid;
    gap: 0.3125rem;
}

.menu-toggle__icon span {
    width: 100%;
    height: 0.125rem;

    display: block;

    background: var(--color-blue);

    transition: transform var(--ease-fast), opacity var(--ease-fast), width var(--ease-fast);
}

.menu-toggle__icon span:last-child {
    width: 65%;
}

/* Hambúrguer vira X quando o menu está aberto. */
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:first-child {
    transform: translateY(0.4375rem) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(2) {
    opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:last-child {
    width: 100%;
    transform: translateY(-0.4375rem) rotate(-45deg);
}

.menu-toggle__label {
    color: var(--color-blue);

    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}


/* ==========================================================================
   08b. BUSCA DO HEADER (estilo Artemis: ícone no header, painel some
   por baixo ao clicar)
========================================================================== */

.header-search-trigger {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-blue);
    cursor: pointer;
    transition: background var(--ease-fast), color var(--ease-fast);
}

.header-search-trigger svg {
    width: 1.375rem;
    height: 1.375rem;
}

.header-search-trigger:hover,
.header-search-trigger:focus-visible {
    background: var(--color-surface-soft);
}

.header-search-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: calc(var(--z-header) - 1);
    background: var(--color-white);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity var(--ease-fast), transform var(--ease-fast), visibility var(--ease-fast);
}

.header-search-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-search-panel__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-block: 1.25rem;
}

.header-search-form {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--color-surface);
    border-radius: var(--pill);
    color: var(--color-blue);
}

.header-search-form svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
}

.header-search-form input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: var(--font-size-md);
    color: var(--color-heading-dark);
}

.header-search-close {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--color-surface-soft);
    color: var(--color-blue);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}


/* ==========================================================================
   09. EYEBROW

   Usa exclusivamente a fonte local:
   assets/fonts/eds-market-main-script.ttf
========================================================================== */

.eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 0.75rem;

    color: var(--color-purple);

    font-family: var(--font-family-eyebrow);
    font-size: var(--font-size-eyebrow);
    font-style: normal;
    font-weight: 400;

    line-height: 1.2;

    letter-spacing: 0;

    text-transform: none;
}


.eyebrow::before {
    content: "";

    width: 0.3125rem;
    height: 1.75rem;

    flex:
        0
        0
        0.3125rem;

    background: currentColor;
}


.eyebrow--yellow {
    color: var(--color-yellow);
}


/* ==========================================================================
   10. BOTÕES — BASE
========================================================================== */

.btn {
    min-height: 3.125rem;

    padding:
        0.875rem 1.75rem;

    display: inline-flex;

    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    border:
        1px solid transparent;

    border-radius: var(--pill);

    font-size: var(--font-size-sm);

    font-weight: 800;

    line-height: 1;

    cursor: pointer;

    transition:
        transform var(--ease-fast),
        color var(--ease-fast),
        background-color var(--ease-fast),
        border-color var(--ease-fast),
        box-shadow var(--ease-fast);
}


.btn:hover {
    transform: translateY(-0.125rem);
}


.btn--yellow {
    color: var(--color-blue-deep);

    background: var(--color-yellow);
}


.btn--yellow:hover {
    background: var(--color-yellow-hover);
}


.video-modal__follow {
    color: var(--color-white);

    background: var(--color-secondary);
}

.video-modal__follow:hover {
    background: var(--color-secondary-hover);
}


.btn--yellow:active {
    background: var(--color-yellow-active);
}


.btn--outline-light {
    color: var(--color-white);

    border-color: var(--color-white);

    background: transparent;
}


.btn--outline-light:hover {
    color: var(--color-blue);

    background: var(--color-white);
}


.btn--primary {
    color: var(--color-white);

    background: var(--color-primary);
}


.btn--primary:hover {
    background: var(--color-primary-hover);
}


.btn--primary:active {
    background: var(--color-primary-active);
}


.btn--secondary {
    color: var(--color-white);

    background: var(--color-secondary);
}


.btn--secondary:hover {
    background: var(--color-secondary-hover);
}


.btn--secondary:active {
    background: var(--color-secondary-active);
}


.btn--light {
    color: var(--color-blue);

    background: var(--color-white);
}


.btn--light:hover {
    color: var(--color-white);

    background: var(--color-primary-hover);
}


.btn--full {
    width: 100%;
}


/* ==========================================================================
   11. CABEÇALHO PADRÃO DAS SEÇÕES
========================================================================== */

.section-heading {
    margin-bottom:
        clamp(2.75rem,
            5vw,
            4.5rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr) minmax(0, 0.85fr);

    align-items: end;

    gap:
        clamp(2.5rem,
            6vw,
            6rem);
}


.section-heading h2 {
    margin:
        0.875rem 0 0;

    font-size: var(--font-size-h2);
}


.section-heading>p {
    max-width: 35rem;

    margin-bottom: 0;

    font-size: var(--font-size-md);

    line-height: 1.65;
}


.section-heading--light h2,
.section-heading--light>p {
    color: var(--color-white);
}


/* ==========================================================================
   12. TAGS
========================================================================== */

.tag,
.result-label {
    padding:
        0.375rem 0.75rem;

    display: inline-flex;

    align-items: center;

    color: var(--color-white);

    background: var(--color-purple);

    border-radius: var(--pill);

    font-size: var(--font-size-xs);

    font-weight: 800;

    line-height: 1;
}


/* ==========================================================================
   13. ALERTAS
========================================================================== */

.alert {
    padding:
        0.875rem 1rem;

    border-radius: var(--radius-sm);

    font-size: var(--font-size-sm);

    font-weight: 700;
}


.alert--success {
    color: var(--color-blue);

    background: var(--color-success);
}


.alert--error {
    color: var(--color-heading-dark);

    background: var(--color-error);
}


/* ==========================================================================
   14. MODAIS
========================================================================== */

.modal {
    position: fixed;

    inset: 0;

    z-index: var(--z-modal);

    display: none;

    place-items: center;
}


.modal.is-open {
    display: grid;
}


.modal-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(6,
            20,
            48,
            0.82);

    backdrop-filter: blur(0.375rem);
}


.modal-dialog {
    position: relative;

    z-index: 1;

    width:
        min(calc(100% - 2rem),
            38.75rem);

    max-height:
        calc(100vh - 2rem);

    overflow: auto;

    padding:
        clamp(1.75rem,
            4vw,
            2.5rem);

    background: var(--color-white);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-lg);
}


.modal-dialog--video {
    width:
        min(calc(100% - 2rem),
            62.5rem);
}


.modal-close {
    position: absolute;

    top: 0.9375rem;
    right: 0.9375rem;

    width: 2.5rem;
    height: 2.5rem;

    display: grid;

    place-items: center;

    border: 0;

    border-radius: 50%;

    font-size: 1.625rem;

    cursor: pointer;
}


.video-placeholder {
    min-height: 32.5rem;

    display: grid;

    place-items: center;

    color: var(--color-white);

    background: #111111;
}


/* ==========================================================================
   15. FORMULÁRIOS
========================================================================== */

.simple-form {
    display: grid;

    gap: 1rem;
}


.simple-form label:not(.check),
.listening-form label:not(.check) {
    display: grid;

    gap: 0.5rem;
}


.simple-form input,
.listening-form input,
.listening-form textarea {
    width: 100%;

    padding: 0.875rem;

    color: var(--color-heading-dark);

    background: var(--color-white);

    border:
        1px solid #D2D5DA;

    border-radius: var(--radius-sm);

    transition:
        border-color var(--ease-fast),
        box-shadow var(--ease-fast);
}


.simple-form input:focus,
.listening-form input:focus,
.listening-form textarea:focus {
    border-color: var(--color-primary);

    outline: 0;

    box-shadow:
        0 0 0 0.25rem rgba(29,
            105,
            215,
            0.14);
}


.check {
    display: flex;

    align-items: flex-start;

    gap: 0.625rem;

    font-size: var(--font-size-xs);
}


/* ==========================================================================
   BOTÃO INTERNO DO MENU

   No desktop fica escondido, pois o header já possui
   o botão externo do lado direito.
========================================================================== */

.main-nav__cta {
    display: none;
}



/* ==========================================================================
   CARD DE VÍDEO — LEGENDA SIMPLES

   A legenda abaixo do vídeo substitui o bloco redundante de título,
   eyebrow e parágrafo que existia anteriormente.
========================================================================== */

.video-card__caption {
    padding:
        1.25rem 1.5rem;

    display: block;

    color: var(--color-blue);

    background: var(--color-white);

    font-size: var(--font-size-md);

    font-weight: 700;

    line-height: 1.35;

    text-align: left;
}


/* O último item textual do menu não recebe separador depois de Contato. */
.main-nav .menu-item--last-regular::after,
.main-nav .menu-item--last-regular > a::before {
    content: none !important;
    display: none !important;
}


/* ==========================================================================
   MODAL DE VÍDEO

   Colar no final de:
   assets/css/components.css
========================================================================== */

.video-modal[hidden] {
    display: none;
}

.video-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: grid;
    place-items: center;

    padding: 1.5rem;
}

.video-modal__backdrop {
    position: absolute;
    inset: 0;

    background: rgba(7, 26, 55, 0.9);
}

.video-modal__dialog {
    position: relative;
    z-index: 1;

    width: min(64rem, calc(100vw - 3rem));
    max-height: calc(100vh - 5rem);

    background: #000;

    box-shadow:
        0
        2rem
        6rem
        rgba(0, 0, 0, 0.45);
}

.video-modal__content {
    aspect-ratio: 16 / 9;
}

.video-modal__content iframe {
    width: 100%;

    display: block;

    border: 0;
}

.video-modal__content:not(.video-modal__content--instagram) iframe {
    height: 100%;
}

.video-modal__content--instagram {
    width: min(28rem, calc(100vw - 3rem));
    max-height: calc(100vh - 6rem);

    margin-inline: auto;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    aspect-ratio: auto;

    overflow-y: auto;

    background: #fff;
}

.video-modal__content--instagram iframe,
.video-modal__content--instagram .instagram-media,
.video-modal__content--instagram iframe.instagram-media {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 28rem !important;
    min-height: 700px;

    margin: 0 auto !important;
}

.video-modal__close {
    position: absolute;
    top: -3rem;
    right: 0;

    width: 2.5rem;
    height: 2.5rem;

    display: grid;
    place-items: center;

    color: #fff;
    background: transparent;

    border: 0;

    font-size: 2rem;
    line-height: 1;

    cursor: pointer;
}

body.video-modal-open {
    overflow: hidden;
}


/* ==========================================================================
   CAMPO-ARMADILHA ANTISPAM
========================================================================== */

.br-form-trap {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: -1px !important;
    padding: 0 !important;

    overflow: hidden !important;

    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;
}

/* ==========================================================================
   ESCUTA MS — ENVIO AJAX E RETORNO
========================================================================== */

/*
 * Área de retorno do formulário.
 */
.listening-form__feedback {
    width: 100%;
    margin-top: 1rem;
}


/*
 * Mantém a mensagem escondida enquanto estiver vazia.
 */
.listening-form__feedback[hidden] {
    display: none;
}


/*
 * Estado do formulário durante o envio.
 */
.listening-form.is-submitting {
    cursor: progress;
}


/*
 * Botão bloqueado enquanto a requisição estiver em andamento.
 */
.listening-form.is-submitting [data-listening-submit],
.listening-form [data-listening-submit]:disabled {
    cursor: wait;
    opacity: 0.72;
    pointer-events: none;
}


/*
 * Foco acessível quando a mensagem de retorno recebe o foco.
 */
.listening-form__feedback:focus {
    outline: 0.1875rem solid currentColor;
    outline-offset: 0.1875rem;
}