/* Fonte académica serifada — próxima ao Computer Modern do Typst/LaTeX */
/* STIX Two Text cobre texto corrido e inline math; STIX Two Math cobre display math */
@import url('https://fonts.googleapis.com/css2?family=STIX+Two+Text:ital,wght@0,400..700;1,400..700&display=swap');

/* --- INDEX GERAL CONFIG --- */


/* :root é uma pseudo-classe CSS que seleciona o */
/* elemento raiz do documento */
@media (prefers-color-scheme: dark) {
  :root {
    /* -- é obrigatório para declarar Custom Property, as */
    /* variáveis no css */
    /* aqui também é implícito que esse é o tema padrao*/
    --background: #181918;
    --foreground: #deded9;
    --border: #3a3b38;
    --title: #f0f0eb;
    --todo: #a0a09a;
    --modal-background: #20211f;
    --code-background: #252624;
    --code-foreground: #deded9;
  }
}

[data-theme="dark"] {
    --background: #181918;
    --foreground: #deded9;
    --border: #3a3b38;
    --title: #f0f0eb;
    --todo: #a0a09a;
    --modal-background: #20211f;
    --code-background: #252624;
    --code-foreground: #deded9;
  }

  [data-theme="light"] {
    --background: #f7f7f5;
    --foreground: #242424;
    --border: #d6d6d2;
    --title: #181818;
    --todo: #666666;
    --modal-background: #f2f2ef;
    --code-background: #eeeeeb;
    --code-foreground: #292927;
  }

  * {
    /* Config para width height incluam o tamanho da do elemento como */
    /* a soma entre o content, padding, border */
    box-sizing: border-box;
  }

  html {
    font-family:
      "Cascadia Mono",
      "SFMono-Regular",
      "Consolas",
      "Liberation Mono",
      monospace;
    font-size: 16px;
    /* font-weight: 400; */
  }

  body {

    /* impoem as tags filhas, um sistema de eixos: */
    /* - princial: da esquerda par direita */
    /* - cruzado: de cima para baixo */
    display: flex;

    /* faz o body ser toda altura do navegador */
    /* vh := viewport height */
    /* 1vh = 1% da altura visível da tela dispositivo */
    min-height: 100vh;

    /* o fluxo principal agora é colunar, ou seja */
    /* inverteu o principal com o cruzado no sistema de eixos */
    flex-direction: column;

    /* centraliza o conteúdo considerando */
    /* o fluxo principal definido no flex-direction */
    /* justify-content: center; */

    /* centraliza o conteúdo considerando */
    /* o fluxo secundário definido no flex-direction */
    align-items: center;

    /* remove margens padroes do navegador */
    margin: 0;

    /* coloca um espaçamento na parte de cima, sem centralizar, */
    /* mas deixando um espaço proporcional ao "campo de visão" */
    padding-top: 10vh;


    /* puxam as variáveis definidas no root */
    background: var(--background);
    color: var(--foreground);
  }

  .like-tui {
    /* classe para fazer as bordas das seçoes inspiradas */
    /* no wlctl e no bluetui */

    /* margin-left: auto; */
    /* margin-right: auto; */

    border-style: solid;
    border-color: var(--border);
    /* border-radius: 2%; */

    /* top right botton left */
    margin: 1.6rem 1rem 1rem 1rem;

    padding: 0.2rem 0.5em 0.2rem 0.5rem;

    /* se algum filho usar position absolute, ele será posicionado */
    /* relativamente a mim */
    position: relative;
  }

  h1 {
    /* o rem é relacionado ao tamanho do font-size do html, */
    /* aqui 1.75 x html font-size */
    font-size: 1.75rem;
    /* font-weight: normal; */
    color: var(--title);
    /* test colors */

    /* border-style: solid; */
    /* border-color: var(--border); */

    margin-bottom: 0.5rem;
    margin-top: -2.5rem;
  }

  h2 {
    font-size: 1.22rem;
    /* font-weight: normal; */
    position: absolute;
    top: -2rem;
    left: 0.75rem;
    background: var(--background);
    padding: 0.5%;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    /* border-style: solid; */
    /* border-color: var(--border); */

  }

  .like-tui h3 {
    margin-left: 1.5rem;
    margin-top: 1.8rem;
    margin-bottom: 0;
  }

  a {
    /* torna o link com a mesma cor do pai */
    color: inherit;

    /* remove o sublinhado */
    text-decoration: none;
  }

  ul {
    /* remove a bolinha decorativa das listas */
    list-style: none;
  }

  li {
    padding: 0.04rem;
  }

  /* --- TOGGLES GLOBAIS (home / nav) --- */

  details>summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
  }

  details>summary::-webkit-details-marker {
    display: none;
  }

  details>summary::before {
    content: "[+] ";
    font-size: 0.85rem;
    opacity: 0.6;
  }

  details[open]>summary::before {
    content: "[-] ";
  }

  main {

    /* pode ocupar todo espaço (100%) desde que */
    /* não ultrapasse o máximo conforável */
    width: 100%;
    max-width: 630px;
    padding: 0px 0px 0px 0px;
  }

  p {
    text-align: justify;
    padding-right: 2.5rem;
    padding-left: 2.5rem;
  }

  /* Aplica cinza no li e desabilita o clique no link */
  li.todo {
    color: var(--todo);
    /* background: grey; */
  }

  li.todo a {
    pointer-events: none;
    cursor: default;
  }

  /* Badge "[em breve] := comming soon" aparece depois do texto do link */
  li.todo::after {
    content: " [comming soon]";
    font-size: 0.75rem;
    opacity: 0.7;
  }

  /* --- PÁGINA EM CONSTRUÇÃO --- */
  /* Texto principal de "em construção" */
  .todo-label {
    margin: 0.5rem 1rem 1rem 1rem;
  }



  /* --- PHOTOS SECTION --- */

  /* O Grid que organiza as fotos */
  .photo-grid {
    /* Ativa o grid */
    display: grid;
    /* Cria colunas responsivas: No mínimo 150px de largura, 
     se sobrar espaço, distribui igualmente (1fr) */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    /* Espaço entre os itens */
    padding: 1rem;
    margin: 0;
  }

  /* O botão que envolve cada foto */
  .photo-btn {
    /* Tira todo o estilo padrão de botão, deixando ele invisível, só clicável */
    background: none;
    border: none;
    padding: 0;
    width: 100%;
    cursor: pointer;
    color: inherit;
    font-family: inherit;
    transition: opacity 0.2s ease;
  }

  /* Estilo para que o focus no botão fique visível pro teclado */
  .photo-btn:focus-visible {
    outline: 2px solid var(--border);
    outline-offset: 4px;
  }

  /* Container do preview (figura) */
  .photo-btn figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    /* Segue a sua borda tui */
    border: 1px solid var(--border);
    background: var(--background);
    transition: transform 0.2s ease;
  }

  /* Efeitinho legal quando passa o mouse por cima do grid */
  .photo-btn:hover figure {
    transform: translateY(-2px);
  }

  /* A miniatura em si */
  .photo-btn img {
    width: 100%;
    /* Fixamos uma altura pra formar os "quadradinhos" */
    height: 150px;
    /* Cover impede que a foto amasse, cortando as sobras se precisar */
    object-fit: cover;
  }

  /* O footer de cada item (data) */
  .photo-btn figcaption {
    padding: 0.5rem;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 0.9rem;
  }

  /* --- MODAL (DIALOG) --- */

  /* Estiliza o próprio balão do modal */
  #photo-modal {
    /* Reseta os padrões do navegador pro dialog */
    color: var(--foreground);
    background: var(--background);
    /* Usa as variáveis que vc já criou na classe .like-tui */
    border: 1px solid var(--border);
    margin: auto;
    max-width: 90vw;
    max-height: 90vh;
    padding: 1rem;
  }

  /* ::backdrop é a "tela preta" semi-transparente que fica atrás do modal */
  #photo-modal::backdrop {
    /* background: rgba(0, 0, 0, 0.8); */
    background: var(--modal-background);
  }

  /* O botão de fechar */
  .close-btn {
    background: var(--background);
    color: var(--foreground);
    border: 1px solid var(--border);
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-family: monospace;
    position: absolute;
    top: 1rem;
    right: 1rem;
  }

  .close-btn:hover {
    background: var(--foreground);
    color: var(--background);
  }

  /* Estrutura interna do Modal */
  .modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
  }

  /* A foto em tamanho real */
  #modal-image {
    max-width: 100%;
    /* A imagem não pode ultrapassar 60% da altura da tela, sobrando espaço pro texto */
    max-height: 60vh;
    /* contain mostra a foto inteira sem cortar */
    object-fit: contain;
    border: 1px solid var(--border);
  }

  /* Footer maximizado (Metadados) */
  .modal-footer {
    width: 100%;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
  }

  .modal-footer h3 {
    margin-top: 0;
    font-size: 1.1rem;
  }

  /* Definition List para os Metadados (dt=Key, dd=Value) */
  .modal-footer dl {
    display: grid;
    /* Grade com 2 colunas: a Chave (auto) e o Valor (1fr) */
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1rem;
    margin: 0;
    font-size: 0.9rem;
  }

  .modal-footer dt {
    font-weight: bold;
  }

  .modal-footer dd {
    margin: 0;
  }

  /* --- DSAI GENERAL CONFIGS --- */
  .sublist {
    padding: 0.5rem 1rem 1rem 1rem;
  }

  .sublist li {
    padding: 0.1rem;
  }

  /* aumentar a largura as anotacoes dos cursos */
  /* para melhorar a leitura e a escrita */
  .courses-main {

    /* pode ocupar todo espaço (100%) desde que */
    /* não ultrapasse o máximo conforável */
    width: 100%;
    max-width: 850px;
    padding: 0px 0px 0px 0px;
  }

  .courses-like-tui {
    /* classe para fazer as bordas das seçoes inspiradas */
    /* no wlctl e no bluetui */

    /* margin-left: auto; */
    /* margin-right: auto; */

    border-style: solid;
    border-color: var(--border);
    /* border-radius: 2%; */

    /* top right botton left */
    margin: 1.6rem 1rem 1rem 1rem;

    padding: 1.3rem 0.5em 1.3rem 0.5rem;

    /* se algum filho usar position absolute, ele será posicionado */
    /* relativamente a mim */
    position: relative;
  }


  /* --- NOTE-CONTENT: TIPOGRAFIA ACADÊMICA --- */
  /* Texto corrido dentro das anotações usa fonte serifada, */
  /* próxima ao Computer Modern do Typst/LaTeX, sem afetar o restante do site */

  .note-content {
    font-family: "STIX Two Text", Georgia, "Times New Roman", serif;
    font-size: 1.1rem;
    line-height: 1.7;
  }

  /* h2 até h6 internos ao conteúdo voltam para monospace, consistente com o site */
  .note-content h2,
  .note-content h3,
  .note-content h4,
  .note-content h5,
  .note-content h6 {
    font-family:
      "Cascadia Mono",
      "SFMono-Regular",
      "Consolas",
      "Liberation Mono",
      monospace;
    /* alinha com o recuo dos parágrafos */
    margin-left: 2.5rem;
    margin-right: 2.5rem;
    margin-bottom: -0.5rem;
  }

  /* Evita que os subtítulos fiquem menores que o texto padrão (1.1rem) */
  .note-content h4 { font-size: 1.15rem; }
  .note-content h5 { font-size: 1.1rem; }
  .note-content h6 { font-size: 1.1rem; opacity: 0.9; }

  /* blocos de código permanecem monospace — já herdado do pre global, */
  /* mas explicitado aqui para clareza */
  .note-content pre {
    font-family: "Fira Code", "Cascadia Mono", monospace;
    font-size: 1rem;
    background: var(--code-background);
    color: var(--code-foreground);
    padding: 0.8rem;
    border-radius: 4px;
    overflow-x: auto;
    margin-left: 2.5rem;
    margin-right: 2.5rem;

  }


  /* MathML: força STIX Two Text que inclui glifos matemáticos de qualidade */
  /* Isso melhora espessura de linha, espaçamento e estilo das fórmulas */
  .note-content math {
    font-family: "STIX Two Text", serif;
    font-size: 1.1rem;
  }

  /* Fórmulas em display block: espaçamento vertical adequado para leitura */
  .note-content math[display="block"] {
    display: block;
    margin: 1.2em auto;
    text-align: center;
    overflow-x: auto;
  }

  /* Chrome MathML Core fix: aplicado via JS que detecta o browser e injeta */
  /* a classe .is-chrome no <html>. Sem isso, o Chrome quebra cada sub-elemento */
  /* do <math> em linha separada por não manter o contexto de formatação matemática. */
  .is-chrome .note-content math {
    display: inline-flex;
    align-items: baseline;
  }

  .is-chrome .note-content math[display="block"] {
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
  }

  /* --- DIVIDER (HR) dentro de .note-content --- */

  .note-content hr {
    border: none;
    border-top: 2.5px solid var(--border);
    margin: 1.6rem 2.5rem;
    opacity: 1;
  }

  /* --- TOGGLES (DETAILS / SUMMARY) dentro de .note-content --- */

  /* Alinha com o recuo dos parágrafos e adiciona visual de seção */
  .note-content details {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
    margin-top: 1.4rem;
    margin-bottom: 1.4rem;
  }

  /* Remove o triângulo padrão do navegador */
  .note-content details>summary {
    list-style: none;
    cursor: pointer;
    font-family: "Cascadia Mono", "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
    font-size: 1rem;
    padding: 0.35rem 0;
    opacity: 0.85;
    user-select: none;
  }

  /* Firefox */
  .note-content details>summary::-webkit-details-marker {
    display: none;
  }

  /* Prefixo [+] fechado / [−] aberto */
  .note-content details>summary::before {
    content: "[+] ";
    opacity: 0.55;
  }

  .note-content details[open]>summary::before {
    content: "[−] ";
  }

  /* Hover sutil no summary */
  .note-content details>summary:hover {
    opacity: 1;
  }

  /* Pequeno espaço entre o summary e o corpo expandido */
  .note-content details[open]>summary {
    margin-bottom: 0.6rem;
  }
  /* --- CARDS (para listas de cursos e itens) --- */
  .card-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0;
    margin: 1rem 1.5rem; /* Aumentado espaçamento lateral */
  }

  .card {
    display: flex;
    flex-direction: row;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    background: var(--background);
    transition: background 0.2s;
  }
  
  .card:hover {
    background: var(--code-background);
  }

  .card-thumb {
    width: 100px; /* Diminuído de 120px para 100px */
    height: 100px; /* Diminuído de 120px para 100px */
    object-fit: cover;
    border-right: 1px solid var(--border);
  }

  .card-content {
    padding: 0.6rem 1.2rem; /* Reduzido o padding vertical levemente */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .card-content h4 {
    margin: 0 0 0.4rem 0;
    font-size: 1.1rem;
    font-family: inherit;
    position: static;
    background: none;
    padding: 0;
  }

  .card-content p {
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
    opacity: 0.85;
    text-align: left;
  }