@font-face {
    font-family: 'DM Mono';
    src: url('../assets/fonts/DMMono-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

*,
*:before,
*:after {
    font: inherit;
    line-height: inherit;
    box-sizing: inherit;
}

html {
    font-family: var(--font-main);
    font-size: var(--fontSize);
    box-sizing: border-box;
}

/* O macete de CSS para que o componente não quebre o esqueleto do Grid */
julia-post {
    display: contents; /* Essa tag customizada se torna invisível pro layout de Grid pai */
}

body {
    background-color: var(--background);
    color: var(--foreground);
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    column-gap: var(--columnGap);
    margin: 0;
    padding: var(--columnGap);
    min-height: 100vh;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    margin: var(--baseline) 0;
}

h1 {
    font-size: var(--h1-size);
}

h2 {
    font-size: var(--h2-size);
}

h3 {
    font-size: var(--h3-size);
}

h4 {
    font-size: var(--h4-size);
}

article p {
    font-size: 1rem;
    line-height: var(--lineHeight);
    max-width: 65ch;
}

code,
pre,
.mono {
    font-family: var(--font-code);
}

header,
main,
footer {
    grid-column: 1 / -1;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 calc(var(--baseline) * var(--displayScale));
    border-bottom: var(--pixel) solid var(--border);
}

header .logo img {
    height: calc(1.5rem * var(--displayScale));
    width: auto;
}

header nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: calc(1.5rem * var(--displayScale));
}

header nav a {
    text-decoration: none;
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s, opacity 0.2s;
}

header nav a:hover {
    color: var(--foreground);
    opacity: 0.5;
}

main,
section {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
}

main > *,
section > * {
    grid-column: 1 / -1;
}

.posts {
    row-gap: var(--rowGap);
    column-gap: var(--columnGap);
    padding: 2rem 0;
}

article {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    gap: calc(0.5rem * var(--displayScale));
    border: var(--pixel) solid var(--border);
    padding: var(--baseline);
}

.posts article {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.posts article img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(var(--baseline) * var(--displayScale)) 0;
    border-top: var(--pixel) solid var(--border);
    margin-top: auto;
}

/* =========================================
   UI DO TERMINAL (Admin Panel) 
   ========================================= */

.cms-form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--baseline) * 2);
    grid-column: 1 / -1;
    max-width: 600px;
    margin-top: calc(var(--baseline) * 2);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: calc(var(--baseline) / 2);
}

.cms-form label {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--muted-fg);
    text-transform: uppercase;
}

.cms-form input,
.cms-form textarea {
    background: transparent;
    border: var(--pixel) solid var(--border);
    color: var(--foreground);
    padding: var(--baseline);
    font-size: 1rem;
    font-family: var(--font-main);
    transition: border-color 0.2s;
}

.cms-form input:focus,
.cms-form textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.cms-form button {
    background: var(--primary);
    color: var(--background);
    border: none;
    padding: calc(var(--baseline) * 1.5);
    font-family: var(--font-heading);
    font-weight: 700;
    cursor: pointer;
    font-size: 1.1rem;
    margin-top: calc(var(--baseline) * 2);
    transition: opacity 0.2s;
}

.cms-form button:hover {
    opacity: 0.8;
}

.status-box {
    grid-column: 1 / -1;
    max-width: 600px;
    margin-top: calc(var(--baseline) * 4);
    padding: calc(var(--baseline) * 2);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    border: var(--pixel) dashed var(--primary);
}

.status-box textarea {
    width: 100%;
    margin-top: var(--baseline);
    background: var(--background);
    color: var(--foreground);
    border: none;
    padding: var(--baseline);
    font-family: var(--font-code);
}