/*
    ARQUIVO: suite.css
    DESCRIÇÃO: Define os estilos visuais para a página "Suite".
    FUNCIONALIDADES: Controla layout, cores, fontes, avatar, links, switch de tema e responsividade.
*/

/* 
   ESTILOS GLOBAIS 
   Configurações básicas para o HTML e o corpo da página.
*/
html, body {
    height: 100%; /* Garante que o site ocupe toda a altura da janela */
    width: 100%;  /* Garante que o site ocupe toda a largura da janela */
}

body {
    background-color: #ffffff; /* Cor de fundo padrão (Modo Claro) */
    color: #000000; /* Cor do texto padrão (Modo Claro) */
    /* Fonte padrão do sistema para garantir carregamento rápido e boa legibilidade */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    display: flex; /* Ativa Flexbox para centralizar o conteúdo */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    height: 100vh; /* Ocupa 100% da altura da tela visível */
    margin: 0; /* Remove margens indesejadas do navegador */
}

/* 
   CONTÊINER PRINCIPAL 
   Envolve todo o conteúdo e organiza os elementos em uma coluna centralizada.
*/
.container {
    display: flex;
    flex-direction: column; /* Empilha os itens (Avatar -> Switch -> Links -> Clima) */
    align-items: center; /* Centraliza os itens horizontalmente */
}

/* 
   SEÇÃO DO AVATAR 
   Área que contém a foto de perfil e o nome do usuário.
*/
.avatar {
    width: 588px;
    height: 192px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 8px; /* Espaço entre a foto e o nome */
    margin-top: 50px;
}

/* Contêiner da imagem do avatar */
.avatar-img {
    width: 112px;
    height: 112px;
    padding-bottom: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilo da imagem circular/arredondada do avatar */
.avatar-img img {
    width: 112px;
    height: 111px;
    border-radius: 25px; /* Estilo "Squircle" (quadrado arredondado) */
    border: 1.5px solid #00000080; /* Borda preta com transparência */
}

/* Estilo do nome do usuário (@kendricknicoleti) */
.avatar-name {
    font-size: 16px;
    font-weight: 400;
}

/* Nome do avatar quando estilizado como um botão/link */
.avatar-name.link-item {
    align-self: center;
    padding: 4px 12px;
    margin-top: 4px;
    font-size: 16px;
}

/* Garante que o nome seja branco no modo claro (devido ao fundo escuro do item) */
body:not(.dark-mode) .avatar-name.link-item {
    color: #fff; 
}

/* 
   COMPONENTE SWITCH (ALTERNADOR DE TEMA) 
   O botão que permite trocar entre Sol e Lua.
*/
.switch {
    width: 64px;
    height: 32px; /* Altura total do componente */
    position: relative;
    border-radius: 999px;
    margin-top: -20px; /* Ajuste de posição para sobrepor levemente a seção anterior */
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Trilho (fundo) do switch */
.switch-bg {
    width: 64px;
    height: 24px;
    position: absolute;
    background: #0000001a;
    border-radius: 9999px;
    border: 1px solid #00000080;
    backdrop-filter: blur(8px); /* Efeito de vidro fosco */
    left: 0;
    right: 0;
}

/* Botão circular que desliza dentro do switch */
.switch-toggle {
    width: 32px;
    height: 32px;
    position: absolute;
    left: 0px; /* Alinhado perfeitamente à esquerda no início */
    background: #000000;
    box-shadow: 0px 2px 8px #00000040;
    border-radius: 9999px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s; /* Animação suave e precisa */
    z-index: 2;
}

/* Classe para mover o botão para a direita (Modo Escuro) */
.switch-toggle-right {
    transform: translateX(32px); /* 64px (total) - 32px (botão) = 32px de deslocamento exato para encostar no fim */
}

/* Ícones de Sol e Lua dentro do botão */
.switch-icon {
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-sun, .icon-moon {
    font-size: 16px;
    display: none; /* Escondidos por padrão */
}

/* Mostra o Sol no Modo Claro */
body:not(.dark-mode) .icon-sun {
    display: block; 
}

/* Mostra a Lua no Modo Escuro */
body.dark-mode .icon-moon {
    display: block; 
}

/* 
   SEÇÃO DE LINKS 
   Lista de botões principais da página.
*/
.links {
    width: 588px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px; /* Espaço entre cada botão */
}

/* Estilo individual de cada botão de link */
.link-item {
    align-self: stretch; /* Ocupa toda a largura disponível */
    color: #fff !important; /* Texto sempre branco para contraste com o fundo do botão */
    padding: 16px 24px;
    background: #0000001a;
    border-radius: 8px;
    border: 1px solid #00000080;
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
}

/* Efeito de clique (feedback visual) */
.link-item:active {
    background: #00000033;
}

body.dark-mode .link-item:active {
    background: #ffffff33;
}

/* 
   MODO ESCURO (DARK MODE) 
   Inverte as cores de fundo, texto e bordas.
*/
body.dark-mode {
    background-color: #000000;
    color: #ffffff;
}

body.dark-mode .avatar-img img {
    border: 1.5px solid #ffffff80;
}

body.dark-mode .switch-bg {
    background: #ffffff1a;
    border: 1px solid #ffffff80;
}

body.dark-mode .switch-toggle {
    background: #ffffff;
    transform: translateX(34px); /* Alinhamento perfeito no modo escuro */
}

body.dark-mode .link-item {
    background: #ffffff1a;
    border: 1px solid #ffffff80;
}

/* 
   CARD "SANTO DO DIA" 
   Estilos para a seção litúrgica dinâmica.
*/
.santo-do-dia {
    width: 588px;
    padding: 16px 24px;
    margin-top: 8px;
    background: #0000001a;
    border-radius: 8px;
    border: 1px solid #00000080;
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    font-family: var(--font-oswald); /* Fonte específica para esta seção */
}

.santo-header {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.santo-name {
    font-size: 16px;
    font-weight: 600;
    flex: 1;
    color: #fff;
}

/* Fitinha colorida que indica a cor litúrgica */
.santo-ribbon {
    width: 12px;
    height: 24px;
    border-radius: 2px;
    background-color: #9370DB; /* Cor padrão */
    flex-shrink: 0;
    box-shadow: 0px 2px 4px #00000040;
}

.santo-type {
    font-size: 12px;
    font-weight: 500;
    color: #ffffff99;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.santo-description {
    font-size: 13px;
    color: #ffffffcc;
    line-height: 18px;
    font-weight: 400;
}

/* Ajustes do card do santo no Modo Escuro */
body.dark-mode .santo-do-dia {
    background: #ffffff1a;
    border: 1px solid #ffffff80;
}

/* 
   RESPONSIVIDADE (MOBILE) 
   Ajusta o layout para telas pequenas (celulares).
*/
@media (max-width: 1000px) {
    .santo-do-dia {
        width: 75vw;
        max-width: 100vw;
        padding: 12px 16px;
    }
    
    .links {
        width: 50%;
        padding: 16px;
    }

    .container {
        width: 100vw;
        padding: 8px 0;
    }

    .avatar, .links, .footer {
        width: 75vw;
    }

    .avatar {
        margin-top: -200px; /* Ajuste para centralizar melhor no mobile */
    }
}