/* Controles interativos do rodapé OZATI em Liquid Glass:
   - Redes sociais circulares (44px, ícone 19px)
   - Setas circulares de contato e da assinatura
   - Seletor de tema visível na base, com interruptor (76x44, thumb 36x36)
   - Alternador de idioma em cápsula idêntica (76x44, thumb 36x36 deslizante)
   - Cápsula da assinatura com contorno e desfoque sutil
   - Material e reservas de acessibilidade reutilizados de glass.css
*/

@layer components {
  /* -------------------------------------------------------------
     1. Redes Sociais em Liquid Glass
     ------------------------------------------------------------- */
  .f-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espaco-2, 0.5rem);
    margin-top: var(--espaco-5, 1.5rem);
  }

  .f-soc {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-inline-size: 44px;
    min-block-size: 44px;
    border-radius: var(--raio-controle, 999px);
    color: var(--cor-texto);
    text-decoration: none;
    transition: background-color var(--duracao-rapida, 150ms) var(--curva-padrao),
                color var(--duracao-rapida, 150ms) var(--curva-padrao),
                transform var(--duracao-rapida, 150ms) var(--curva-padrao),
                box-shadow var(--duracao-rapida, 150ms) var(--curva-padrao);
  }

  .f-soc:hover {
    background-color: var(--cor-acao);
    color: var(--cor-acao-texto);
    transform: translateY(-2px);
  }

  .f-soc:focus-visible { outline: 2px solid var(--cor-foco); outline-offset: 2px; }

  .f-soc .f-ic {
    width: 19px;
    height: 19px;
    display: block;
    color: inherit;
    flex-shrink: 0;
  }

  /* -------------------------------------------------------------
     2. Círculo de Seta nas Linhas de Contato Clicáveis
     ------------------------------------------------------------- */
  .f-go-circle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-inline-size: 28px;
    min-block-size: 28px;
    border-radius: var(--raio-controle, 999px);
    color: var(--cor-texto-suave);
    flex-shrink: 0;
    transition: background-color var(--duracao-rapida, 150ms) ease,
                color var(--duracao-rapida, 150ms) ease,
                transform var(--duracao-rapida, 150ms) ease;
  }

  a.f-row:hover .f-go-circle,
  a.f-row:active .f-go-circle,
  a.f-row:focus-visible .f-go-circle {
    background-color: var(--cor-acao);
    color: var(--cor-acao-texto);
    transform: translate(2px, -2px);
  }

  .f-go-circle .f-go-arrow {
    width: 14px;
    height: 14px;
    display: block;
    color: inherit;
  }

  /* -------------------------------------------------------------
     3. Controle de Preferências de Tema em Liquid Glass (76x44)
     ------------------------------------------------------------- */
  .f-prefs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  .f-prefs[hidden] { display: none !important; }

  .f-prefs-title {
    color: var(--cor-texto-suave);
    font-size: var(--texto-legenda);
    font-weight: var(--peso-medio);
    white-space: nowrap;
  }

  .f-prefs-form { display: block; margin-top: 0; }

  .f-theme-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: var(--alvo-toque, 44px);
    cursor: pointer;
  }

  .f-theme-track {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    inline-size: 76px;
    block-size: var(--alvo-toque, 44px);
    padding-inline: 14px;
    border-radius: var(--raio-controle);
    color: var(--cor-texto-suave);
  }

  .f-theme-thumb {
    position: absolute;
    inset-inline-start: var(--espaco-1, 4px);
    inset-block-start: var(--espaco-1, 4px);
    inline-size: 36px;
    block-size: 36px;
    border-radius: var(--raio-controle);
    background-color: var(--cor-acao);
    transition: transform var(--duracao-media) var(--curva-padrao);
  }

  .f-theme-icon {
    position: relative;
    inline-size: 16px;
    block-size: 16px;
  }

  .f-theme-sun { color: var(--cor-acao-texto); }
  .f-theme-switch input:checked + .f-theme-track .f-theme-thumb { transform: translateX(32px); }
  .f-theme-switch input:checked + .f-theme-track .f-theme-sun { color: var(--cor-texto-suave); }
  .f-theme-switch input:checked + .f-theme-track .f-theme-moon { color: var(--cor-acao-texto); }
  .f-theme-switch input:focus-visible + .f-theme-track { outline: 2px solid var(--cor-foco); outline-offset: 3px; }
  .f-theme-switch:hover .f-theme-track { background-color: var(--vidro-hover); }

  @media (forced-colors: active) {
    .f-theme-track { outline: 1px solid currentColor; }
    .f-theme-thumb { outline: 2px solid currentColor; }
  }

  /* -------------------------------------------------------------
     4. Assinatura em Cápsula Liquid Glass com Seta Circular
     ------------------------------------------------------------- */
  .by {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 44px;
    padding: 0 10px 0 20px;
    border-radius: var(--raio-controle, 999px);
    color: var(--cor-texto-suave);
    text-decoration: none;
    font-size: var(--texto-legenda, 0.75rem);
    transition: background-color var(--duracao-rapida, 150ms) var(--curva-padrao),
                color var(--duracao-rapida, 150ms) var(--curva-padrao),
                transform var(--duracao-rapida, 150ms) var(--curva-padrao);
  }

  .by:hover,
  .by:focus-visible { color: var(--cor-texto); transform: translateY(-1px); }
  .by:active { transform: translateY(0); }

  .by:focus-visible { outline: 2px solid var(--cor-foco); outline-offset: 2px; }

  .by-t {
    font-weight: var(--peso-regular, 400);
    color: var(--cor-texto-suave);
    white-space: nowrap;
    line-height: 1;
  }

  .by-mark {
    display: inline-flex;
    align-items: center;
    color: var(--cor-texto);
    line-height: 1;
  }

  .by-logo-svg {
    height: 13px;
    width: auto;
    display: block;
    color: currentColor;
    vertical-align: middle;
  }

  .by-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-inline-size: 24px;
    min-block-size: 24px;
    border-radius: var(--raio-controle, 999px);
    background-color: transparent;
    border: 1px solid transparent;
    color: var(--cor-texto-suave);
    flex-shrink: 0;
    transition: background-color var(--duracao-rapida, 150ms) ease,
                border-color var(--duracao-rapida, 150ms) ease,
                color var(--duracao-rapida, 150ms) ease,
                transform var(--duracao-rapida, 150ms) ease;
  }

  .by:hover .by-go,
  .by:active .by-go,
  .by:focus-visible .by-go {
    background-color: var(--cor-acao);
    border-color: var(--cor-acao);
    color: var(--cor-acao-texto);
    transform: translate(2px, -2px);
  }

  .by-go .by-go-arrow {
    width: 12px;
    height: 12px;
    display: block;
    color: inherit;
  }

  /* -------------------------------------------------------------
     5. Alternador de Idioma em Cápsula Liquid Glass (76x44, Thumb 36x36)
     ------------------------------------------------------------- */
  .f-lang-control {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: var(--alvo-toque, 44px);
  }

  .f-lang-track {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    inline-size: 76px;
    block-size: var(--alvo-toque, 44px);
    padding-inline: 14px;
    border-radius: var(--raio-controle);
    color: var(--cor-texto-suave);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--duracao-rapida, 150ms) var(--curva-padrao);
  }

  .f-lang-track:hover {
    background-color: var(--vidro-hover);
  }

  .f-lang-track:focus-visible {
    outline: 2px solid var(--cor-foco);
    outline-offset: 3px;
  }

  .f-lang-thumb {
    position: absolute;
    inset-inline-start: var(--espaco-1, 4px);
    inset-block-start: var(--espaco-1, 4px);
    inline-size: 36px;
    block-size: 36px;
    border-radius: var(--raio-controle);
    background-color: var(--cor-acao);
    transition: transform var(--duracao-media) var(--curva-padrao);
    pointer-events: none;
  }

  .f-lang-track.is-en .f-lang-thumb {
    transform: translateX(32px);
  }

  .f-lang-opt {
    position: relative;
    z-index: 1;
    font-size: var(--texto-legenda, 0.75rem);
    font-weight: var(--peso-semi, 600);
    letter-spacing: 0.05em;
    pointer-events: none;
    transition: color var(--duracao-media) var(--curva-padrao);
  }

  .f-lang-track .f-lang-pt {
    color: var(--cor-acao-texto);
  }
  .f-lang-track .f-lang-en {
    color: var(--cor-texto-suave);
  }

  .f-lang-track.is-en .f-lang-pt {
    color: var(--cor-texto-suave);
  }
  .f-lang-track.is-en .f-lang-en {
    color: var(--cor-acao-texto);
  }

  @media (forced-colors: active) {
    .f-lang-track { outline: 1px solid currentColor; }
    .f-lang-thumb { outline: 2px solid currentColor; }
  }
}