/* Tema do paulorb.dev, sobre Bootstrap 5. Bootstrap fornece grid, utilities
   e o colapso responsivo da navbar; aqui ficam cor, tipografia e os
   componentes proprios do blog (sidebar, widgets, prose, code, dark mode). */

:root {
    --bg: #fff;
    --surface: #f5f7fa;
    --text: #141a21;
    --muted: #65707d;
    --border: #e2e7ee;
    --accent: #1d5fd0;
    --chip: #eef2f8;
    --code-bg: #111823;
    --prose-font: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

:root[data-theme="dark"] {
    --bg: #0e1116;
    --surface: #151a21;
    --text: #e6ebf2;
    --muted: #8b97a6;
    --border: #232b35;
    --accent: #6da4f5;
    --chip: #1b222c;
    --code-bg: #080b10;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--prose-font);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent); }
h1, h2, h3, h4 { font-family: var(--prose-font); letter-spacing: -.02em; }
hr { border-color: var(--border); opacity: 1; }
.text-muted { color: var(--muted) !important; }
.accent { color: var(--accent); }
.border-b { border-bottom: 1px solid var(--border); }
.border-t { border-top: 1px solid var(--border); }
.bg-surface { background: var(--surface); }
.num { font-variant-numeric: tabular-nums; }
.min-w-0 { min-width: 0; }

/* Navbar */
.site-head { border-bottom: 1px solid var(--border); background: var(--bg); }
.brand { font-weight: 700; font-size: 1.15rem; letter-spacing: -.03em; color: var(--text); font-family: var(--mono); }
.navlink { font-size: .875rem; color: var(--muted); padding: .35rem 0; border-bottom: 1.5px solid transparent; display: inline-block; }
.navlink:hover { color: var(--text); }
.navlink.active { color: var(--text); font-weight: 500; border-bottom-color: var(--accent); }
.icon-btn {
    width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 50%;
    background: transparent; color: var(--muted); display: inline-flex;
    align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer;
}
.icon-btn:hover { color: var(--text); border-color: var(--muted); }
.navbar-toggler { border-color: var(--border); }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(20,26,33,0.75)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
:root[data-theme="dark"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(230,235,242,0.75)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Chips / tags */
.chip {
    display: inline-block; font-size: .7rem; color: var(--muted); background: var(--chip);
    padding: .2rem .55rem; border-radius: 3px; letter-spacing: .02em;
}
a.chip:hover { color: var(--accent); }
.chip-pill {
    display: inline-block; font-size: .72rem; color: var(--muted); border: 1px solid var(--border);
    padding: .18rem .6rem; border-radius: 999px; font-family: var(--mono);
}
a.chip-pill:hover { color: var(--accent); border-color: var(--accent); }

/* Cover placeholder (quando o post nao tem imagem de destaque) */
.cover { position: relative; overflow: hidden; background-size: 14px 14px; border-radius: 4px; }
.cover-stripes {
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.09) 0 1px, transparent 1px 10px);
}
.cover-label {
    position: absolute; bottom: 6px; left: 9px; font-family: var(--mono);
    font-size: .62rem; opacity: .55; letter-spacing: .02em; color: #fff;
}
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sidebar widgets */
.widget { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); padding: 1.15rem 1.15rem 1.25rem; margin-bottom: 1.25rem; }
.widget-title { font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 .9rem; }
.widget-list { list-style: none; margin: 0; padding: 0; }
.widget-list li { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .42rem 0; border-bottom: 1px solid var(--border); font-size: .85rem; }
.widget-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.widget-list a { flex: 1; min-width: 0; }
.count { font-size: .72rem; color: var(--muted); background: var(--chip); border-radius: 999px; padding: .05rem .5rem; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.archive-year { font-size: .8rem; font-weight: 600; color: var(--text); margin: .85rem 0 .35rem; font-variant-numeric: tabular-nums; }
.archive-year:first-child { margin-top: 0; }
.archive-month { display: flex; justify-content: space-between; font-size: .82rem; padding: .3rem 0 .3rem .7rem; border-left: 1px solid var(--border); }
.archive-month:hover { border-left-color: var(--accent); }
.recent-item { display: flex; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid var(--border); }
.recent-item:last-child { border-bottom: 0; padding-bottom: 0; }
.recent-thumb { width: 44px; height: 44px; flex-shrink: 0; }
.recent-title { font-size: .8rem; line-height: 1.35; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.recent-date { font-size: .68rem; color: var(--muted); margin-top: .15rem; font-variant-numeric: tabular-nums; }
.searchbox { display: flex; border: 1px solid var(--border); border-radius: 5px; overflow: hidden; background: var(--bg); }
.searchbox input { flex: 1; border: 0; background: transparent; color: var(--text); font-size: .85rem; padding: .5rem .65rem; outline: none; min-width: 0; }
.searchbox input::placeholder { color: var(--muted); }
.searchbox button { border: 0; background: transparent; color: var(--muted); padding: 0 .65rem; cursor: pointer; }

/* Post card (grid) */
.post-card-title { font-size: 1.05rem; font-weight: 600; line-height: 1.3; margin-bottom: .5rem; }
.post-card-excerpt {
    font-size: .85rem; line-height: 1.55; color: var(--muted); margin-bottom: .6rem;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-meta-line { font-size: .72rem; color: var(--muted); }

/* Featured post */
.featured-kicker { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.featured-title { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.2rem); font-weight: 700; line-height: 1.15; }

/* Prose */
.prose { font-size: 1.05rem; line-height: 1.75; }
.prose p { margin: 0 0 1.25rem; }
.prose h2 { font-size: clamp(1.2rem, 1rem + .8vw, 1.4rem); font-weight: 600; margin: 2.2rem 0 .9rem; }
.prose blockquote { margin: 1.6rem 0; padding: .75rem 1.25rem; border-left: 3px solid var(--accent); color: var(--muted); font-style: italic; }
.prose img { max-width: 100%; border-radius: 4px; }
.codeblock { background: var(--code-bg); color: #e6e1d6; border-radius: 6px; padding: 1rem 1.15rem; margin: 1.25rem 0; font-family: var(--mono); font-size: .82rem; line-height: 1.6; overflow: auto; }
.prose code { font-family: var(--mono); }

/* Bloco de codigo estilo janela (barra com 3 bolinhas + copiar).
   O highlight.js cuida da cor do codigo em si (tema atom-one-dark),
   aqui so fica a moldura. */
.code-window { margin: 1.5rem 0; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.18); background: #282c34; }
.code-window-bar { display: flex; align-items: center; justify-content: space-between; padding: .55rem .8rem; background: #21252b; }
.code-window-dots { display: flex; gap: .4rem; }
.code-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.code-dot-red { background: #ff5f56; }
.code-dot-yellow { background: #ffbd2e; }
.code-dot-green { background: #27c93f; }
.code-copy-btn {
    background: transparent; border: 1px solid #3a3f4b; color: #9da5b4;
    font-family: var(--prose-font); font-size: .72rem; font-weight: 500;
    border-radius: 5px; padding: .25rem .65rem; cursor: pointer; line-height: 1.4;
}
.code-copy-btn:hover { color: #e6ebf2; border-color: #565f6f; }
.code-copy-btn.copied { color: #27c93f; border-color: #27c93f; }
.code-window pre { margin: 0; border-radius: 0; overflow: auto; }
.code-window pre code.hljs { padding: 1rem 1.15rem; font-family: var(--mono); font-size: .82rem; line-height: 1.6; }
.code-window .hljs-ln-numbers {
    text-align: right; padding-right: .9rem !important; padding-left: .9rem !important;
    color: #5c6370; user-select: none; border-right: 1px solid #3a3f4b;
}
.code-window .hljs-ln-code { padding-left: .9rem !important; }
.post-title { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.4rem); font-weight: 700; line-height: 1.13; }

/* Comments */
.comment { display: flex; gap: .85rem; padding: .9rem 0; border-bottom: 1px solid var(--border); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--chip); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 600; flex-shrink: 0; }
textarea.field, input.field {
    width: 100%; padding: .7rem .8rem; background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: 5px; font-size: .875rem; font-family: inherit; outline: none;
}
textarea.field { min-height: 90px; resize: vertical; }
.btn-accent { background: var(--accent); color: #fff; border: 0; border-radius: 5px; padding: .5rem 1.2rem; font-size: .85rem; font-weight: 600; }
:root[data-theme="dark"] .btn-accent { color: #10151c; }
.hp-field { position: absolute; left: -9999px; top: -9999px; }

.site-foot { border-top: 1px solid var(--border); background: var(--surface); font-size: .8rem; color: var(--muted); }
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--accent); }

/* Tag cloud (pagina Categorias) */
.tag-cloud-item { display: inline-flex; align-items: baseline; gap: .4rem; }

/* Paginação numérica — grid de 3 colunas garante uma linha só, com os
   números sempre centralizados de verdade (mesmo quando so um dos botoes
   anterior/proximo existe). */
.pagination-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem; }
.page-btn-prev { justify-self: start; }
.page-btn-next { justify-self: end; }
.page-numbers {
    grid-column: 2; justify-self: center; display: flex; flex-wrap: nowrap; align-items: center; gap: .3rem;
    max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.page-numbers::-webkit-scrollbar { display: none; }
.page-num { flex-shrink: 0; }

.page-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text);
    font-size: .82rem; font-weight: 600;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease, transform .1s ease;
}
.page-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--chip); }
.page-btn:active { transform: scale(.97); }
.page-btn i { font-size: .72rem; }

.page-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.3rem; height: 2.3rem; border-radius: 50%;
    font-size: .82rem; font-weight: 500; font-variant-numeric: tabular-nums;
    color: var(--muted);
    transition: background-color .15s ease, color .15s ease, transform .1s ease;
}
a.page-num:hover { background: var(--chip); color: var(--text); }
a.page-num:active { transform: scale(.94); }
.page-num-active {
    background: var(--accent); color: #fff; font-weight: 700;
    box-shadow: 0 3px 10px -2px rgba(29, 95, 208, .5);
}
:root[data-theme="dark"] .page-num-active { box-shadow: 0 3px 10px -2px rgba(109, 164, 245, .35); }
.page-ellipsis { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 2.3rem; color: var(--muted); font-size: .82rem; }