/* ==========================================================
   AYW DESIGN SYSTEM
   COMPONENTS / BRAND

   Responsabilidades:
   - marca reutilizável;
   - símbolo ou logotipo;
   - nome principal;
   - texto complementar;
   - tamanhos;
   - variações de alinhamento;
   - truncamento seguro;
   - estados interativos quando a marca for um link.

   Pode ser usado em:
   - navbar pública;
   - sidebar autenticada;
   - footer;
   - telas de autenticação;
   - páginas institucionais;
   - estados vazios;
   - cabeçalhos especiais.

   Não inclui:
   - posicionamento dentro da navegação;
   - espaçamento externo do navbar, sidebar ou footer;
   - comportamento de menu;
   - estrutura do shell;
   - estilos específicos de páginas.

   Dependências:
   - tokens.css.
   ========================================================== */


/* ==========================================================
   COMPONENTE BASE
   ========================================================== */

   .ayw-brand {
    --ayw-brand-gap: var(--ayw-space-3);

    --ayw-brand-mark-size: 40px;
    --ayw-brand-mark-radius: var(--ayw-radius-md);

    --ayw-brand-name-size: var(--ayw-font-size-xl);
    --ayw-brand-name-weight: var(--ayw-font-weight-bold);

    --ayw-brand-meta-size: var(--ayw-font-size-xs);

    display: inline-flex;
    align-items: center;

    min-width: 0;

    gap: var(--ayw-brand-gap);

    color: var(--ayw-text);

    line-height: 1;

    text-decoration: none;
}


/* ==========================================================
   MARCA COMO LINK

   As regras se aplicam quando .ayw-brand estiver em <a>
   ou em outro elemento interativo.
   ========================================================== */

a.ayw-brand,
button.ayw-brand {
    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

a.ayw-brand:hover,
button.ayw-brand:hover {
    color: var(--ayw-text);

    text-decoration: none;
}

a.ayw-brand:focus-visible,
button.ayw-brand:focus-visible {
    outline: 3px solid var(--ayw-focus-ring);
    outline-offset: 3px;

    border-radius: var(--ayw-radius-md);
}


/* ==========================================================
   BOTÃO RESET

   Permite usar a marca como botão quando necessário,
   por exemplo, para abrir um seletor de espaço ou conta.
   ========================================================== */

button.ayw-brand {
    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    font: inherit;

    appearance: none;

    -webkit-appearance: none;
}


/* ==========================================================
   SÍMBOLO DA MARCA
   ========================================================== */

.ayw-brand-mark {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: var(--ayw-brand-mark-size);
    height: var(--ayw-brand-mark-size);

    overflow: hidden;

    border-radius: var(--ayw-brand-mark-radius);

    background:
        linear-gradient(
            135deg,
            var(--ayw-primary),
            #7c3aed
        );

    color: #ffffff;

    font-size: var(--ayw-font-size-sm);
    font-weight: var(--ayw-font-weight-bold);
    line-height: 1;

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


/* ==========================================================
   IMAGEM OU SVG DO SÍMBOLO
   ========================================================== */

.ayw-brand-mark svg,
.ayw-brand-mark img {
    display: block;

    width: 1em;
    height: 1em;

    flex: 0 0 auto;
}

.ayw-brand-mark img {
    object-fit: contain;
}


/* ==========================================================
   LOGOTIPO EM IMAGEM COMPLETA

   Use quando a imagem já possuir fundo, cor e proporção
   próprias e não precisar do gradiente padrão.
   ========================================================== */

.ayw-brand-mark.is-image {
    background: transparent;

    box-shadow: none;
}

.ayw-brand-mark.is-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* ==========================================================
   SÍMBOLO CIRCULAR
   ========================================================== */

.ayw-brand-mark.is-round {
    --ayw-brand-mark-radius: 50%;
}


/* ==========================================================
   SÍMBOLO SEM SOMBRA
   ========================================================== */

.ayw-brand-mark.is-flat {
    box-shadow: none;
}


/* ==========================================================
   SÍMBOLO COM BORDA
   ========================================================== */

.ayw-brand-mark.is-bordered {
    border: 1px solid var(--ayw-border);
}


/* ==========================================================
   CONTEÚDO TEXTUAL
   ========================================================== */

.ayw-brand-content {
    display: block;

    flex: 1 1 auto;

    min-width: 0;
}


/* ==========================================================
   NOME DA MARCA
   ========================================================== */

.ayw-brand-name {
    display: block;

    min-width: 0;

    overflow: hidden;

    color: var(--ayw-text);

    font-size: var(--ayw-brand-name-size);
    font-weight: var(--ayw-brand-name-weight);
    line-height: var(--ayw-line-height-tight);

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================
   TEXTO COMPLEMENTAR
   ========================================================== */

.ayw-brand-meta {
    display: block;

    min-width: 0;

    margin-top: var(--ayw-space-1);

    overflow: hidden;

    color: var(--ayw-text-muted);

    font-size: var(--ayw-brand-meta-size);
    font-weight: var(--ayw-font-weight-regular);
    line-height: var(--ayw-line-height-tight);

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================
   TEXTO EM UMA ÚNICA LINHA

   Útil para navbar e footer quando só existe o nome da marca.
   ========================================================== */

.ayw-brand-text {
    display: block;

    flex: 1 1 auto;

    min-width: 0;

    overflow: hidden;

    color: var(--ayw-text);

    font-size: var(--ayw-brand-name-size);
    font-weight: var(--ayw-brand-name-weight);
    line-height: var(--ayw-line-height-tight);

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================
   TAMANHO PEQUENO
   ========================================================== */

.ayw-brand-sm {
    --ayw-brand-gap: var(--ayw-space-2);

    --ayw-brand-mark-size: 32px;

    --ayw-brand-name-size: var(--ayw-font-size-md);
    --ayw-brand-meta-size: var(--ayw-font-size-xs);
}


/* ==========================================================
   TAMANHO MÉDIO

   É o tamanho padrão usado em navbar e footer.
   ========================================================== */

.ayw-brand-md {
    --ayw-brand-gap: var(--ayw-space-3);

    --ayw-brand-mark-size: 40px;

    --ayw-brand-name-size: var(--ayw-font-size-xl);
    --ayw-brand-meta-size: var(--ayw-font-size-xs);
}


/* ==========================================================
   TAMANHO GRANDE

   Adequado para sidebar e páginas institucionais.
   ========================================================== */

.ayw-brand-lg {
    --ayw-brand-gap: var(--ayw-space-3);

    --ayw-brand-mark-size: 48px;

    --ayw-brand-name-size: var(--ayw-font-size-2xl);
    --ayw-brand-meta-size: var(--ayw-font-size-sm);
}


/* ==========================================================
   TAMANHO EXTRA GRANDE

   Adequado para autenticação, onboarding e hero institucional.
   ========================================================== */

.ayw-brand-xl {
    --ayw-brand-gap: var(--ayw-space-4);

    --ayw-brand-mark-size: 64px;

    --ayw-brand-name-size: var(--ayw-font-size-3xl);
    --ayw-brand-meta-size: var(--ayw-font-size-md);
}


/* ==========================================================
   VARIANTE COMPACTA
   ========================================================== */

.ayw-brand-compact {
    --ayw-brand-gap: var(--ayw-space-2);
}


/* ==========================================================
   SOMENTE O SÍMBOLO
   ========================================================== */

.ayw-brand-icon-only .ayw-brand-content,
.ayw-brand-icon-only .ayw-brand-text,
.ayw-brand-icon-only .ayw-brand-name,
.ayw-brand-icon-only .ayw-brand-meta {
    display: none;
}


/* ==========================================================
   SEM SÍMBOLO
   ========================================================== */

.ayw-brand-text-only .ayw-brand-mark {
    display: none;
}


/* ==========================================================
   ALINHAMENTO CENTRAL
   ========================================================== */

.ayw-brand-center {
    justify-content: center;

    text-align: center;
}


/* ==========================================================
   ALINHAMENTO VERTICAL

   Útil em autenticação e páginas institucionais.
   ========================================================== */

.ayw-brand-vertical {
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.ayw-brand-vertical .ayw-brand-content {
    width: 100%;
}


/* ==========================================================
   LARGURA TOTAL
   ========================================================== */

.ayw-brand-fluid {
    display: flex;

    width: 100%;
}


/* ==========================================================
   TEXTO SEM TRUNCAMENTO

   Deve ser usado apenas quando houver espaço suficiente.
   ========================================================== */

.ayw-brand-wrap .ayw-brand-name,
.ayw-brand-wrap .ayw-brand-meta,
.ayw-brand-wrap .ayw-brand-text {
    overflow: visible;

    text-overflow: clip;
    white-space: normal;

    overflow-wrap: anywhere;
}


/* ==========================================================
   ESTADO ATIVO OU SELECIONADO
   ========================================================== */

.ayw-brand.is-active {
    color: var(--ayw-primary);
}

.ayw-brand.is-active .ayw-brand-name,
.ayw-brand.is-active .ayw-brand-text {
    color: var(--ayw-primary);
}


/* ==========================================================
   ESTADO DESABILITADO
   ========================================================== */

.ayw-brand.is-disabled,
.ayw-brand[aria-disabled="true"] {
    color: var(--ayw-text-disabled);

    cursor: not-allowed;

    opacity: 0.65;

    pointer-events: none;
}


/* ==========================================================
   MOBILE COMPACTO
   ========================================================== */

@media (max-width: 374px) {
    .ayw-brand {
        --ayw-brand-gap: var(--ayw-space-2);
    }

    .ayw-brand-md {
        --ayw-brand-mark-size: 38px;

        --ayw-brand-name-size: var(--ayw-font-size-lg);
    }

    .ayw-brand-lg {
        --ayw-brand-mark-size: 42px;

        --ayw-brand-name-size: var(--ayw-font-size-xl);
    }

    .ayw-brand-xl {
        --ayw-brand-mark-size: 56px;

        --ayw-brand-name-size: var(--ayw-font-size-2xl);
    }
}


/* ==========================================================
   MOVIMENTO REDUZIDO
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .ayw-brand {
        scroll-behavior: auto;
    }
}