/* ===================================================================
   TechBlog — Design System (minimalista refinado)
   Construído sobre as variáveis nativas do Bootstrap 5 (dark mode ok).
   =================================================================== */

:root {
    --tb-accent:        #6d5efc;
    --tb-accent-hover:  #5a4be0;
    --tb-radius:        .85rem;
    --tb-shadow:        0 1px 2px rgba(16,24,40,.04), 0 8px 24px -12px rgba(16,24,40,.18);
    --tb-shadow-hover:  0 2px 4px rgba(16,24,40,.06), 0 18px 40px -16px rgba(16,24,40,.30);

    --bs-primary:       var(--tb-accent);
    --bs-primary-rgb:   109,94,252;
    --bs-link-color:    var(--tb-accent);
    --bs-link-hover-color: var(--tb-accent-hover);
    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

[data-bs-theme="dark"] {
    --tb-accent:        #8b7dff;
    --tb-accent-hover:  #a99dff;
    --bs-primary:       var(--tb-accent);
    --tb-shadow:        0 1px 2px rgba(0,0,0,.30), 0 10px 28px -14px rgba(0,0,0,.65);
    --tb-shadow-hover:  0 2px 6px rgba(0,0,0,.40), 0 22px 48px -18px rgba(0,0,0,.75);
}

html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    letter-spacing: -.011em;
}
main { flex: 1; }

h1, h2, h3, h4, .display-6 { font-weight: 700; letter-spacing: -.02em; }

a { text-underline-offset: .2em; }

.btn { border-radius: .6rem; font-weight: 500; }
.btn-primary {
    --bs-btn-bg: var(--tb-accent);
    --bs-btn-border-color: var(--tb-accent);
    --bs-btn-hover-bg: var(--tb-accent-hover);
    --bs-btn-hover-border-color: var(--tb-accent-hover);
    --bs-btn-active-bg: var(--tb-accent-hover);
}
.btn-outline-primary {
    --bs-btn-color: var(--tb-accent);
    --bs-btn-border-color: var(--tb-accent);
    --bs-btn-hover-bg: var(--tb-accent);
    --bs-btn-hover-border-color: var(--tb-accent);
}
:focus-visible { outline: 2px solid var(--tb-accent); outline-offset: 2px; }

/* ---------- Navbar ---------- */
.navbar.tb-nav {
    background: color-mix(in srgb, var(--bs-body-bg) 80%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--bs-border-color);
}
.navbar.tb-nav .navbar-brand { font-weight: 800; letter-spacing: -.03em; }
.navbar.tb-nav .nav-link { font-weight: 500; border-radius: .5rem; padding-inline: .7rem; }
.navbar.tb-nav .nav-link.active { color: var(--tb-accent); }

/* ---------- Cards de post ---------- */
.post-card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--tb-radius);
    background: var(--bs-body-bg);
    box-shadow: var(--tb-shadow);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--tb-shadow-hover);
    border-color: color-mix(in srgb, var(--tb-accent) 45%, var(--bs-border-color));
}
.post-card .ratio-media { overflow: hidden; }
.post-card img.cover { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.post-card:hover img.cover { transform: scale(1.04); }

/* Placeholder quando não há imagem (gradiente por categoria) */
.media-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    background: linear-gradient(135deg,
        hsl(var(--hue, 250) 70% 58%),
        hsl(calc(var(--hue, 250) + 40) 72% 46%));
}
.media-fallback i { font-size: 2.4rem; opacity: .9; }

.chip {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .72rem; font-weight: 600; letter-spacing: .02em;
    text-transform: uppercase;
    padding: .28rem .6rem; border-radius: 999px;
    background: color-mix(in srgb, var(--tb-accent) 14%, transparent);
    color: var(--tb-accent);
    text-decoration: none;
}
.chip:hover { background: color-mix(in srgb, var(--tb-accent) 24%, transparent); }

.post-card .post-title a { color: var(--bs-body-color); text-decoration: none; }
.post-card:hover .post-title a { color: var(--tb-accent); }
.meta { font-size: .82rem; color: var(--bs-secondary-color); }
.meta i { opacity: .75; }

/* ---------- Hero (post em destaque) ---------- */
.hero {
    position: relative;
    border-radius: calc(var(--tb-radius) + .3rem);
    overflow: hidden;
    box-shadow: var(--tb-shadow);
    min-height: 340px;
    display: flex;
}
.hero .hero-bg { position: absolute; inset: 0; }
.hero .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero .media-fallback { position: absolute; inset: 0; }
.hero::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8,10,20,.15) 0%, rgba(8,10,20,.82) 100%);
}
.hero .hero-body {
    position: relative; z-index: 1;
    margin-top: auto; padding: clamp(1.25rem, 4vw, 2.5rem); color: #fff;
}
.hero .hero-body h2 { color: #fff; font-size: clamp(1.5rem, 3.4vw, 2.4rem); }
.hero .hero-body .meta, .hero .hero-body p { color: rgba(255,255,255,.85); }
.hero .chip { background: rgba(255,255,255,.18); color: #fff; }

/* ---------- Sidebar ---------- */
.sidebar-card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--tb-radius);
    background: var(--bs-body-bg);
    box-shadow: var(--tb-shadow);
}
.sidebar-card .list-group-item { border: 0; background: transparent; border-radius: .5rem; }
.sidebar-card .list-group-item.active {
    background: color-mix(in srgb, var(--tb-accent) 16%, transparent);
    color: var(--tb-accent); font-weight: 600;
}

/* ---------- Artigo ---------- */
.article-wrap { max-width: 46rem; margin-inline: auto; }
.post-content { font-size: 1.075rem; line-height: 1.8; }
.post-content > :first-child { margin-top: 0; }
.post-content h2, .post-content h3 { margin-top: 2.2rem; margin-bottom: .8rem; }
.post-content p, .post-content ul, .post-content ol { margin-bottom: 1.15rem; }
.post-content img { max-width: 100%; height: auto; border-radius: var(--tb-radius); margin: 1.5rem 0; }
.post-content .ql-align-center  { text-align: center; }
.post-content .ql-align-right   { text-align: right; }
.post-content .ql-align-justify { text-align: justify; }
.post-content blockquote {
    margin: 1.5rem 0; padding: .5rem 1.25rem;
    border-left: 4px solid var(--tb-accent);
    color: var(--bs-secondary-color); font-style: italic;
}
.post-content pre {
    background: #0d1117; color: #e6edf3;
    padding: 1.1rem 1.25rem; border-radius: var(--tb-radius);
    overflow: auto; font-size: .92rem; margin: 1.5rem 0;
}
.post-content :not(pre) > code {
    background: var(--bs-tertiary-bg);
    padding: .15rem .4rem; border-radius: .35rem; font-size: .9em;
}
.post-content table { width: 100%; margin: 1.5rem 0; border-collapse: collapse; font-size: .95rem; }
.post-content th, .post-content td { border: 1px solid var(--bs-border-color); padding: .55rem .8rem; }
.post-content thead th { background: var(--bs-tertiary-bg); }
.post-content iframe {
    width: 100%; aspect-ratio: 16/9; height: auto;
    border: 0; border-radius: var(--tb-radius); margin: 1.5rem 0;
}
.post-hero-img {
    width: 100%; max-height: 460px; object-fit: cover;
    border-radius: calc(var(--tb-radius) + .2rem); margin-bottom: 2rem;
}

/* ---------- Footer ---------- */
.tb-footer { border-top: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); }
.tb-footer a { color: var(--bs-secondary-color); text-decoration: none; }
.tb-footer a:hover { color: var(--tb-accent); }

/* ---------- Utilidades ---------- */
.section-title { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.lead-muted { color: var(--bs-secondary-color); font-size: 1.05rem; }
.line-clamp-2 {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .post-card, .post-card img.cover { transition: none; }
}

/* ===================================================================
   ADMIN — mesmo design system, escopo .admin
   =================================================================== */
body.admin { background: var(--bs-tertiary-bg); }

.admin-topbar {
    background: color-mix(in srgb, var(--bs-body-bg) 82%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--bs-border-color);
}
.admin-topbar .navbar-brand { font-weight: 800; letter-spacing: -.03em; }

.admin-sidebar {
    border-right: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    min-height: calc(100vh - 57px);
}
.admin-sidebar .nav-link {
    display: flex; align-items: center; gap: .65rem;
    color: var(--bs-body-color);
    border-radius: .6rem; padding: .6rem .85rem; margin-bottom: .15rem;
    font-weight: 500;
}
.admin-sidebar .nav-link i { font-size: 1.05rem; opacity: .8; }
.admin-sidebar .nav-link:hover { background: var(--bs-tertiary-bg); }
.admin-sidebar .nav-link.active {
    background: color-mix(in srgb, var(--tb-accent) 14%, transparent);
    color: var(--tb-accent);
}
.admin-sidebar .nav-link.active i { opacity: 1; }

/* Cards/painéis do admin = mesmo tratamento dos cards públicos */
.admin .card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--tb-radius);
    box-shadow: var(--tb-shadow);
    background: var(--bs-body-bg);
}
.admin .card-header {
    background: transparent;
    border-bottom: 1px solid var(--bs-border-color);
    font-weight: 600;
}

/* Stat cards do dashboard */
.stat-card { position: relative; overflow: hidden; }
.stat-card .stat-value { font-size: 2rem; font-weight: 700; line-height: 1; }
.stat-card .stat-label {
    font-size: .72rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--bs-secondary-color);
}
.stat-icon {
    width: 2.75rem; height: 2.75rem; border-radius: .75rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    background: color-mix(in srgb, var(--tb-accent) 15%, transparent);
    color: var(--tb-accent);
}

/* Tabelas do admin */
.admin .table { margin-bottom: 0; }
.admin .table > thead th {
    font-size: .74rem; font-weight: 600; letter-spacing: .03em;
    text-transform: uppercase; color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--bs-border-color);
}
.admin .table > tbody td { vertical-align: middle; }
.admin .table-hover > tbody > tr:hover > * {
    background: color-mix(in srgb, var(--tb-accent) 7%, transparent);
}

/* Login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; }
.login-card {
    border: 1px solid var(--bs-border-color);
    border-radius: calc(var(--tb-radius) + .2rem);
    box-shadow: var(--tb-shadow-hover);
    background: var(--bs-body-bg);
}
.login-mark {
    width: 56px; height: 56px; border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Offcanvas (sidebar mobile) */
.admin-offcanvas { background: var(--bs-body-bg); width: 16rem; }
.admin-offcanvas .nav-link {
    display: flex; align-items: center; gap: .65rem;
    color: var(--bs-body-color); border-radius: .6rem;
    padding: .6rem .85rem; margin-bottom: .15rem; font-weight: 500;
}
.admin-offcanvas .nav-link:hover { background: var(--bs-tertiary-bg); }
.admin-offcanvas .nav-link.active {
    background: color-mix(in srgb, var(--tb-accent) 14%, transparent);
    color: var(--tb-accent);
}

/* Botão "kebab" de ações */
.action-toggle {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-bg: var(--bs-tertiary-bg);
    --bs-btn-hover-border-color: var(--tb-accent);
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-hover-color: var(--tb-accent);
    line-height: 1;
}
.action-toggle::after { display: none; } /* sem caret */
.admin .dropdown-menu {
    --bs-dropdown-border-color: var(--bs-border-color);
    border-radius: .7rem; padding: .35rem;
    font-size: .92rem;
}
.admin .dropdown-item { border-radius: .45rem; padding: .5rem .65rem; }
.admin .dropdown-item:active { background: var(--tb-accent); }
.admin .dropdown-menu form { margin: 0; }

/* Lista em cards (mobile) */
.admin-list-card .card-body { padding: 1rem 1.1rem; }
.admin-list-card .meta { font-size: .8rem; color: var(--bs-secondary-color); }
.admin-list-card .meta i { opacity: .7; }
.admin .card-footer {
    background: transparent;
    border-top: 1px solid var(--bs-border-color);
    padding: .8rem 1.1rem;
}
.admin-list-card .card-footer .btn { flex: 1 1 auto; }

/* ====================================================================
   ACESSIBILIDADE
   ==================================================================== */

/* Skip link: invisível até receber foco pelo teclado (Tab). */
.skip-link {
    position: absolute;
    left: .75rem;
    top: -3rem;
    z-index: 2000;
    background: var(--tb-accent);
    color: #fff;
    padding: .6rem 1rem;
    border-radius: .5rem;
    font-weight: 600;
    text-decoration: none;
    transition: top .15s ease;
}
.skip-link:focus {
    top: .75rem;
    color: #fff;
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Foco visível e consistente em qualquer elemento interativo,
   apenas para navegação por teclado (não polui o clique de mouse). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--tb-accent);
    outline-offset: 2px;
    border-radius: .35rem;
}

/* O alvo do skip link não deve mostrar contorno ao receber foco
   programático. */
main:focus,
main:focus-visible { outline: none; }

/* Respeita quem pediu menos animação no SO. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}