/* Estilos inspirados na identidade visual da Netflix */

:root{
    --bg: #141414; /* cor base do fundo (dark) */
    --bg-end: #0f0f0f; /* fim do gradiente para dark */
    --muted: #b3b3b3; /* cor para textos secundários */
    --accent: #e50914; /* cor de destaque (vermelho Netflix) */
    --text: #ffffff; /* cor do texto principal (padrão dark) */
    --width-of-switch: 3.5em; /* largura do botão do tema */
    --height-of-switch: 2em; /* altura do botão do tema */
    --size-of-icon: 1.4em; /* tamanho do emoji no botão do tema */
    --slider-offset: 0.3em; /* distância do slider da borda do botão */
}

/* Faz com que o cálculo de largura/altura inclua padding e border */
* {
    box-sizing: border-box;
}

/* Garante que o body ocupe toda a altura disponível */
html,body {
    height: 100%;
}


body{
    margin: 0; /* remove margem padrão do navegador */
    font-family: "Helvetica Neue", Arial, sans-serif; /* pilha de fontes */
    background: linear-gradient(180deg,var(--bg) 0%, var(--bg-end) 100%); /* gradiente de fundo */
    color: var(--text); /* cor do texto principal (controlada por variável) */
}

/* Light theme: sobrescreve variáveis para modo claro */
.light-theme{
    --bg:  #ffffff; /* fundo muito claro */
    --bg-end:  #f3f4f6; /* variação sutil no gradiente */
    --text:  #0f1724; /* texto escuro para contraste */
    --muted:  #6b7280; /* texto secundário */
    --accent:  #e50914; /* mantém o accent */
}

main{
    min-height: 100vh; /* garante altura mínima ocupando toda a viewport */
    display: flex; /* ativa layout flexbox */
    flex-direction: column; /* empilha filhos verticalmente */
    align-items: center; /* centraliza itens horizontalmente */
    justify-content: center; /* centraliza itens verticalmente */
    padding: 3rem 1rem; /* espaçamento interno ao redor do conteúdo */
    text-align: center; /* centraliza texto dentro do main */
}

.logo img{
    position: fixed; /* fixa o logo no topo */
    top: 12px; /* distância do topo */
    left: 12px; /* distância da esquerda */
    z-index: 1200; /* garante que o logo fique acima de outros elementos */;
    width: clamp(120px,20vw,180px); /* largura responsiva entre 120px e 180px */
    margin-bottom: 0; /* remove margem inferior para evitar espaçamento extra */
    transition: transform .5s ease; /* suaviza a transformação ao passar o mouse */
}

.logo img:hover {
    transform: Scale(1.05); /* aumenta o logo ao passar o mouse */
    cursor: pointer; /* muda o cursor para indicar que é clicável */
}

h1{
    font-size: 2.4rem; /* tamanho da fonte do título */
    margin: 0 0 1.8rem 0; /* margem superior 0, inferior 1.8rem */
    letter-spacing: 0.02em; /* espaçamento entre letras */
    color: var(--text); /* cor do título (segue a variável de tema) */
}

/* Perfis: layout responsivo com tamanhos fluidos */
.profiles-outer,
.profiles { 
    padding: 0; /* remove padding padrão de listas */
    margin: 0; /* remove margem padrão de listas */
    list-style: none; /* remove marcadores de lista */
}

.profiles {
    display: flex; /* coloca perfis em linha usando flexbox */
    flex-wrap: wrap; /* permite quebra automática de linha */
    justify-content: center; /* centraliza a grade */
    gap: clamp(.75rem,3.5vw,2.25rem); /* espaço fluido entre perfis */
    align-items: flex-end; /* alinha os perfis pela base para um visual mais uniforme */
}

.item-profile {
    list-style: none; /* remove marcador */
    width: clamp(100px,14vw,170px); /* largura responsiva entre 100px e 170px */
}

.profile {
    display: block; /* torna o link ocupar todo o item */ 
    text-decoration: none; /* remove sublinhado do link */ 
    color: inherit; /* herda a cor do texto do tema */
}

.item-profile figure {
    margin: 0; /* remove margem padrão da figura */
}

.item-profile img {
    width: 100%; /* ocupa 100% da largura do `.profile` */
    aspect-ratio: 1 / 1; /* mantém proporção quadrada */
    object-fit: cover; /* preenche o espaço sem distorcer */
    border-radius: clamp(8px,1.2vw,14px); /* arredondamento responsivo */
    display: block; /* remove espaço em branco abaixo da imagem */
    transition: transform .22s ease, box-shadow .22s ease; /* suaviza transformações e sombras */
    box-shadow: 0 6px 20px rgba(0,0,0,.6); /* sombra sutil para dar profundidade */
}

/* Efeito ao passar o mouse ou focar: aplica ao link que envolve a figura */
.profile:focus img,
.profile:hover img {
    transform: translateY(-8px) scale(1.06); /* eleva e aumenta a imagem para destacar */
    box-shadow: 0 14px 30px rgba(0,0,0,.65), 0 0 0 6px rgba(230,9,20); /* sombra mais intensa e contorno vermelho para destaque */
}

.nome-profile {
    margin-top: .65rem; /* espaço entre a imagem e o nome do perfil */
    font-size: clamp(.9rem,1.6vw,1rem); /* tamanho de fonte responsivo entre 0.9rem e 1rem */
    color: var(--muted); /* cor secundária para o nome do perfil */
    text-decoration: none; /* garante que não haja sublinhado herdado */
}

/* Acessibilidade: foco no link (não no li) com contorno visível */
.profile:focus {
    outline: 3px solid rgba(229,9,20,0.18); /* contorno vermelho suave para indicar foco */
    border-radius: 14px; /* arredondamento para combinar com a imagem */
}

/* Estilo do rodapé caso seja adicionado posteriormente */
footer {
    color: var(--muted); /* cor secundária */ 
    font-size: .9rem; /* menor que o texto padrão */ 
    padding: 2rem 0; /* espaço acima e abaixo */
}

/* botão visível com emoji que controla o tema */
.theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--width-of-switch);
    height: var(--height-of-switch);
    font-size: var(--size-of-icon);
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: background .15s, transform .12s, border-color .15s;
}

/* estado do botão no tema claro */
.light-theme .theme-btn {
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(0,0,0,0.02);
    color: var(--text);
}

/* foco acessível */
.theme-btn:focus {
    outline: 3px solid rgba(229,9,20,0.12);
    outline-offset: 2px;
}

.topbar {
    position: fixed; /* fixa a barra de controle no topo da página */
    top: 12px; /* distância do topo */
    right: 12px; /* distância da direita */
    z-index: 1200; /* garante que fique acima de outros elementos */;
}

/* Botão simples com emoji (lua/sol) */
#theme-toggle {
    background: transparent; /* transparente por padrão */
    border: 1px solid rgba(255,255,255,0.12); /* borda sutil no dark */
    color: var(--text); /* segue esquema de cores */
    padding: .35rem .6rem; /* espaçamento interno */
    border-radius: 8px; /* cantos arredondados */
    font-size: 1.05rem; /* tamanho da fonte para o emoji */
    line-height: 1; /* altura da linha para centralizar o emoji */
    cursor: pointer; /* indica que é clicável */
    transition: background .15s, transform .12s, border-color .15s; /* suaviza as transições de estado */
}

#theme-toggle:focus {
    outline: 3px solid rgba(229,9,20,0.12); /* contorno vermelho suave para indicar foco */
    outline-offset: 2px; /* espaço entre o contorno e o botão */
}

.light-theme #theme-toggle {
    border:1px solid rgba(0,0,0,0.08); /* borda mais clara no modo claro */
    background:rgba(0,0,0,0.02); /* leve fundo para destacar no modo claro */
}

/* Ajustes adicionais para telas bem pequenas */
@media (max-width:420px) {
    main {
        padding: 1.5rem .75rem; /* reduz o padding para telas pequenas */
    }

    h1 {
        font-size:1.25rem; /* reduz o tamanho do título para melhor legibilidade em telas pequenas */
    }

    .profiles {
        gap:1rem; /* reduz o gap entre os perfis para melhor aproveitamento do espaço em telas pequenas */
    }
    .profile {
        width: clamp(96px,20vw,130px); /* ajusta a largura dos perfis para telas pequenas, mantendo a responsividade */
    }
}

/* Pequenas otimizações para telas largas */
@media (min-width:1400px) {
    .profiles {
        gap: clamp(1rem,2.5vw,3.5rem);
    }
    
    .profile {
        width: clamp(140px,10vw,200px); /* aumenta a largura máxima dos perfis em telas muito largas */
    }
}