@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');
:root {
    --width: 720px;
    --font-main: 'Fira Code', monospace;     /* Mudado para Fira Code */
    --font-secondary: 'Fira Code', monospace; /* Mudado para Fira Code */
    --font-scale: 1em;
    --background-color: #0c0c0c;              /* Um preto mais profundo */
    --heading-color: #90C246;
    --text-color: #90C246;
    --link-color: #90C246;
    --visited-color: #768F50;
    --code-background-color: #222129;
    --code-color: #cccccc;
    --blockquote-color: #666;
}

/* ... resto do CSS ... */

/* EFEITO DE CURSOR PISCANTE NO TÍTULO */
.title h1::after {
    content: '█';
    margin-left: 5px;
    animation: blink 1.2s infinite;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

/* EFEITO DE PROMPT NOS SUBTÍTULOS */
main h2::before, main h3::before {
    content: "~/ ";
    opacity: 0.5;
    margin-right: 5px;
}

/* META DADOS DO POST (DATA, TEMPO, TAGS) */
.meta {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 2rem;
    font-family: 'Fira Code', monospace;
}

.meta span {
    margin-right: 15px;
    display: inline-block;
}

.tags a {
    color: #768F50;
    text-decoration: none;
}
.tags a:hover {
    text-decoration: underline;
}

/* LISTA DE POSTS COM TAGS */
.list-tags {
    margin-left: 10px;
    opacity: 0.7;
    font-size: 0.8em;
}
.tag {
    margin-right: 5px;
    color: #768F50;
}

header {
    margin-bottom: 2rem;
    position: relative; /* Para o lang-switch absoluto se referir a ele */
}

/* LANGUAGE SWITCHER (Posicionado ABSOLUTAMENTE dentro do Header) */
.lang-switch {
    position: absolute;
    top: 0px; /* Alinha no topo do header */
    right: 0px; /* Alinha na direita do header */
    font-family: 'Fira Code', monospace;
    font-size: 0.9em;
    z-index: 10; /* Para garantir que fique acima de outros elementos do header */
}
.lang-switch a {
    color: #444; /* Discreto */
    text-decoration: none;
    border: 1px solid #333;
    padding: 5px 10px;
    border-radius: 3px;
    background: #0c0c0c;
}
.lang-switch a:hover {
    color: #90C246;
    border-color: #90C246;
}

/* SEARCH PAGE STYLES */
.search-container {
    display: flex;
    align-items: center;
    background-color: #151515;
    padding: 10px;
    border-radius: 5px;
    border: 1px dashed #333;
}

.prompt {
    color: #90C246;
    margin-right: 10px;
    font-weight: bold;
    white-space: nowrap; /* Impede quebra de linha no prompt */
}

#search-input {
    background: transparent;
    border: none;
    color: #fff;
    font-family: 'Fira Code', monospace;
    font-size: 1em;
    flex: 1; /* Ocupa o espaço restante, mantendo-se na mesma linha */
    outline: none;
    min-width: 0; /* Garante que o input possa encolher se necessário */
}

#search-input::placeholder {
    color: #444;
}

.error {
    color: #ff5555;
}
.chroma {
    background-color: #222129 !important;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    margin: 1.5rem 0;
    border-left: 3px solid #90C246;
}

/* OS LINKS PARECEM COMANDOS */
nav a::before {
    content: "./";
    opacity: 0.5;
}

/* ... mantém o resto ... */

body {
    font-family: var(--font-secondary);
    font-size: var(--font-scale);
    margin: auto;
    padding: 20px;
    max-width: var(--width);
    text-align: left;
    background-color: var(--background-color);
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
    color: var(--text-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-main);
    color: var(--heading-color);
}

a {
    color: var(--link-color);
    cursor: pointer;
    text-decoration: underline;
}

a:hover {
    text-decoration: underline;
}

main {
    margin-top: 40px;
    margin-bottom: 20px;
    padding: 30px;
    border: 1px solid var(--link-color);
}

nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Espaço consistente entre links */
    margin-top: 10px;
}

nav a {
    margin-right: 0; /* Removemos margem antiga em favor do gap */
    white-space: nowrap; /* Impede quebra de texto dentro do link */
}

strong,
b {
    color: var(--heading-color);
}

button {
    margin: 0;
    cursor: pointer;
}

main {
    line-height: 1.6;
}

table {
    width: 100%;
}

hr {
    border: 0;
    border-top: 1px dashed;
}

img {
    max-width: 100%;
}

code {
    font-family: monospace;
    padding: 2px;
    background-color: var(--code-background-color);
    color: var(--code-color);
    border-radius: 3px;
}

blockquote {
    border-top: 1px solid var(--heading-color);
    border-bottom: 1px solid var(--heading-color);
    color: var(--text-color);
    padding: 20px;
    font-style: italic;
    margin-left: 0px;
    margin-right: 0px;
}

footer {
    padding: 25px 0;
    text-align: center;
    opacity: 0.6;
}

.title:hover {
    text-decoration: none;
}

.title h1 {
    font-size: 1em;
    padding: 5px 10px;
    background: var(--heading-color);
    color: var(--background-color);
    display: inline-block;
    font-weight: 400;
}

.inline {
    width: auto !important;
}

.highlight,
.code {
    padding: 1px 15px;
    background-color: var(--code-background-color);
    color: var(--code-color);
    border-radius: 3px;
    margin-block-start: 1em;
    margin-block-end: 1em;
    overflow-x: auto;
}


.highlight {
    border-left: 5px solid var(--heading-color);
}

/* blog post list */
ul.blog-posts {
    list-style-type: none;
    padding: unset;
}

ul.blog-posts li {
    display: flex;
    margin-bottom: 20px;
}



ul.blog-posts li time {
    font-style: normal;
}

ul.blog-posts li span {
    flex: 0 0 130px;
}

ul.blog-posts li a:visited {
    color: var(--visited-color);
}

table {
    border-collapse: collapse;
}

table,
th,
td {
    border: 1px dashed var(--heading-color);
    padding: 10px;
}

@media only screen and (max-width:767px) {
    main {
        padding: 20px;
        margin-top: 30px;
        margin-bottom: 10px;
    }

    ul.blog-posts li {
        flex-direction: column;
    }

    ul.blog-posts li span {
        flex: unset;
    }
}