/* header.css */

.header-content {
    display: flex;
    flex-direction: column; /* <- muda para empilhar verticalmente */
    align-items: center;
    width: 100%;
}

/* Header wrapper fixo e responsivo */
.header-wrapper {
    position: relative;
    width: 100%;
    max-width: 960px; /* igual à .main-container */
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

/* Agrupamento dos botões de idioma e tema no canto superior direito */
.language-theme-wrapper {
  position: absolute;
  top: 10px;
  right: 16px;              /* dá um respiro da borda */
  display: flex;
  gap: 12px;                /* espaço um pouco maior */
  z-index: 20;
}

/* Chips do header (som, idiomas, tema) */
.language-theme-wrapper button,
.language-theme-wrapper .lang-toggle,
.language-theme-wrapper .theme-toggle {
  background-color: var(--btn-bg);
  border: 1px solid var(--btn-hover);
  color: #fff;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1;
  border-radius: 8px;       /* mesmo raio dos botões globais */
  cursor: pointer;
  font-weight: 600;
  transition: background-color .2s ease, transform .1s ease, opacity .2s ease;
  height: 36px;             /* tamanho “chip” consistente */
  min-width: 56px;          /* clique confortável */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* tamanhos específicos por tipo (deixam o layout mais harmônico) */
.language-theme-wrapper .sound-btn,
.language-theme-wrapper .theme-btn { min-width: 44px; }  /* só ícone */
.language-theme-wrapper .lang-btn { min-width: 64px; }   /* “PT/EN” */

/* estados */
.language-theme-wrapper button:hover {
  background-color: var(--btn-hover);
  transform: scale(1.02);
}
.language-theme-wrapper button:active {
  transform: scale(0.98);
  opacity: .9;
}
.language-theme-wrapper button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* opcional: estado “ativo/selecionado” para idioma/tema atual */
.language-theme-wrapper .is-active {
  background-color: var(--btn-hover);
  border-color: var(--btn-hover);
}

/* Logo e imagem de perfil centralizados */
.header-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-logo .logo {
    width: 150px;
    height: 150px;
    object-fit: contain;
}

.header-logo .profile-image {
    width: 40px;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Container de título e subtítulo */
.title-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 4px;
    max-width: 100%;
}

.title-container h1 {
    color: var(--text-primary);
    white-space: normal !important;
    word-wrap: break-word !important;
    text-align: center;
    font-size: 24px;
    margin: 10px 0;
}

.subtitle {
    font-size: 1.2rem;
    font-weight: bold;    
    margin-top: 0.3em;
    color: var(--text-secondary);
    text-align: center;
    white-space: pre-line;
}

/* Slogan com estilo leve */
.header-content .slogan {
    font-size: 1.2rem;
    font-style: italic;
    font-weight: 300;
    color: var(--text-secondary);
    text-shadow: none;
    text-align: center;
    margin-top: 0.5em;
    margin-bottom: 0.2em;
    opacity: 0.9;
}

/* Ícone de ajuda */
.icon-question {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    transition: opacity 0.3s ease;
    object-fit: cover;
}

.icon-question:hover {
    opacity: 0.8;
}

/* Rodapé com visibilidade em temas claros e escuros */
footer {
    color: var(--text-secondary);
    text-align: center;
    padding: 10px;
    font-size: 14px;
}

/* Acessibilidade e responsividade */
@media (max-width: 1024px) {
    .header-logo .logo {
        width: 80vw;
        max-width: 250px;
    }
    .header-logo .profile-image {
        width: 38px;
        height: 38px;
    }
    .slogan {
        font-size: 32px;
        white-space: normal;
        overflow: visible;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .header-logo .logo {
        width: 45vw;
        max-width: 220px;
    }
    .header-logo .profile-image {
        width: 35px;
        height: 35px;
    }
    .slogan {
        white-space: normal;
        overflow: visible;
        font-size: 18px;
        padding: 5px 0;
    }
}

@media (max-width: 480px) {
    .language-theme-wrapper button {
        padding: 4px 8px;
        font-size: 12px;
    }
    .header-logo .logo {
        width: 40vw;
        max-width: 180px;
    }
    .header-logo .profile-image {
        width: 32px;
        height: 32px;
    }
    .slogan {
        white-space: normal;
        overflow: visible;
        font-size: 14px;
        padding: 5px 0;
    }
    .subtitle {
        font-size: 1rem;
    }
}

@media (max-width: 360px) {
    .header-logo .logo {
        width: 35vw;
        max-width: 160px;
    }
    .header-logo .profile-image {
        width: 30px;
        height: 30px;
    }
    .slogan {
        font-size: 12px;
        padding: 5px 0;
        color: var(--text-secondary);
    }
}