/* ==========================================
   UFUMBUZI BLOG ARTICLE
   article.css
========================================== */

:root {

    --primary: #0f4c81;
    --primary-hover: #2563eb;

    --background: #ffffff;

    --surface: #f8fafc;

    --border: #e5e7eb;

    --text: #1f2937;

    --text-light: #6b7280;

    --radius: 14px;

    --shadow:
        0 4px 16px rgba(0,0,0,.08);

    --max-width: 1200px;

    --article-width: 800px;

}

/* ==========================================
   RESET
========================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    font-family:
        Inter,
        "Segoe UI",
        sans-serif;

    background: var(--background);

    color: var(--text);

    line-height: 1.8;

}

img {

    display: block;

    width: 50%;

    height: auto;

}

.img-related {

    display: block;

    width: 200px;

    height: auto;

}

a {

    text-decoration: none;

    color: var(--primary);

}

a:hover {

    color: var(--primary-hover);

}

/* ==========================================
   CONTAINER
========================================== */

.container {

    width:
        min(
            100% - 2rem,
            var(--max-width)
        );

    margin-inline: auto;

}

/* ==========================================
   HEADER
========================================== */

.site-header {

    position: sticky;

    top: 0;

    z-index: 999;

    background: rgba(255,255,255,.96);

    backdrop-filter: blur(12px);

    border-bottom:
        1px solid var(--border);

}

.site-header .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1rem 0;

}

.logo img {

    height: 48px;

    width: auto;

}

.logo-related img {

    height: 64px;

    width: auto;

}

.main-nav {

    display: flex;

    gap: 2rem;

}

.main-nav a {

    font-weight: 600;

    color: var(--text);

}

/* ==========================================
   BREADCRUMBS
========================================== */

.breadcrumbs {

    margin-top: 2rem;

    margin-bottom: 2rem;

    font-size: .9rem;

    color: var(--text-light);

}

.breadcrumbs a {

    color: var(--text-light);

}

/* ==========================================
   ARTICLE HEADER
========================================== */

.article-header {

    margin-bottom: 2rem;

}

.article-category {

    display: inline-block;

    color: var(--primary);

    font-weight: 700;

    text-transform: uppercase;

    font-size: .85rem;

    margin-bottom: 1rem;

}

.article-header h1 {

    font-size:
        clamp(
            2rem,
            4vw,
            3.5rem
        );

    line-height: 1.2;

    margin-bottom: 1rem;

}

.article-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

    color: var(--text-light);

    font-size: .95rem;

}

/* ==========================================
   FEATURED IMAGE
========================================== */

.featured-image {

    margin-bottom: 3rem;

}

.featured-image img {

    border-radius: var(--radius);

}

/* ==========================================
   LAYOUT
========================================== */

.article-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 800px)
        280px;

    gap: 3rem;

    align-items: start;

}

/* ==========================================
   CONTENT
========================================== */

.article-content {

    min-width: 0;

}

.article-content p {

    margin-bottom: 1.5rem;

}

.article-content h2 {

    margin-top: 3rem;

    margin-bottom: 1rem;

    font-size: 2rem;

}

.article-content h3 {

    margin-top: 2rem;

    margin-bottom: .75rem;

    font-size: 1.5rem;

}

.article-content ul,
.article-content ol {

    margin-bottom: 1.5rem;

    margin-left: 1.5rem;

}

.article-content li {

    margin-bottom: .5rem;

}

.article-content blockquote {

    border-left:
        4px solid var(--primary);

    background: var(--surface);

    padding: 1rem 1.5rem;

    margin: 2rem 0;

}

.article-content table {

    width: 100%;

    border-collapse: collapse;

    margin: 2rem 0;

}

.article-content th,
.article-content td {

    border:
        1px solid var(--border);

    padding: .75rem;

    text-align: left;

}

.article-content th {

    background: var(--surface);

}

/* ==========================================
   CODE BLOCKS
========================================== */

.article-content pre {

    overflow-x: auto;

    padding: 1rem;

    border-radius: var(--radius);

    background: #0f172a;

    color: #f8fafc;

    margin: 2rem 0;

}

.article-content code {

    font-family:
        Consolas,
        Monaco,
        monospace;

}

.article-content :not(pre) > code {

    background: var(--surface);

    padding: .15rem .4rem;

    border-radius: 4px;

}

/* ==========================================
   TOC
========================================== */

.toc {

    position: sticky;

    top: 100px;

    padding: 1.25rem;

    border:
        1px solid var(--border);

    border-radius: var(--radius);

    background: white;

}

.toc h3 {

    margin-bottom: 1rem;

}

.toc ul {

    list-style: none;

}

.toc li {

    margin-bottom: .75rem;

}

.toc a {

    color: var(--text-light);

}

/* ==========================================
   SHARE
========================================== */

.share-section {

    margin-top: 4rem;

    padding-top: 2rem;

    border-top:
        1px solid var(--border);

}

.share-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

    margin-top: 1rem;

}

.share-buttons a {

    padding:
        .75rem 1rem;

    border:
        1px solid var(--border);

    border-radius: var(--radius);

}

/* ==========================================
   RELATED TOOLS
========================================== */

.related-tools {

    margin-top: 4rem;

}

.tools-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(250px,1fr)
        );

    gap: 1.5rem;

}

.tool-card {

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    padding: 1.5rem;

}

.tool-card h3 {

    margin-bottom: .75rem;

}

.tool-card p {

    color: var(--text-light);

    margin-bottom: 1rem;

}

/* ==========================================
   RELATED ARTICLES
========================================== */

.related-articles {

    margin-top: 4rem;

}

.related-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px,1fr)
        );

    gap: 1.5rem;

}

/* ==========================================
   ABOUT UFUMBUZI
========================================== */

.about-ufumbuzi {

    margin-top: 4rem;

    padding: 2rem;

    background: var(--surface);

    border-radius: var(--radius);

}

.about-ufumbuzi h2 {

    margin-bottom: 1rem;

}

.about-ufumbuzi p {

    margin-bottom: 1rem;

}

/* ==========================================
   FOOTER
========================================== */

.site-footer {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid #ccc;
    background-color: lightblue;
    
    /* Flexbox para alinear todo al centro verticalmente */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Espaciado uniforme entre los bloques del footer */
    text-align: center;
}

/* Contenedor flexible para enlaces o botones que van en la misma fila */
.footer-row {
    display: flex;
    flex-wrap: wrap;       /* Hace que salten de línea si no hay espacio */
    justify-content: center; /* Centra los elementos horizontalmente */
    gap: 15px;             /* Separación entre los botones/enlaces */
}

.site-footer p {
    margin: 0; /* Reseteamos márgenes para que el 'gap' del footer controle el espacio */
}

.site-footer a {
    color: #007bff;
    text-decoration: none;
    background-color: lightblue;
    padding: 5px 8px;
    border-radius: 4px;
    border: 0 solid #ddd;
}

.site-footer a:hover {
    text-decoration: underline;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 1000px) {

    .article-layout {

        grid-template-columns:
            1fr;

    }

    .toc {

        display: none;

    }

}

@media (max-width: 768px) {

    .site-header .container {

        flex-direction: column;

        gap: 1rem;

    }

    .main-nav {

        flex-wrap: wrap;

        justify-content: center;

        gap: 1rem;

    }

    .article-header h1 {

        font-size: 2rem;

    }

}

@media (max-width: 480px) {

    .container {

        width:
            min(
                100% - 1rem,
                var(--max-width)
            );

    }

}

.toc a.active {

    color: var(--primary);

    font-weight: 700;

}

.toast {

    position: fixed;

    bottom: 20px;

    right: 20px;

    background: #0f4c81;

    color: white;

    padding: .75rem 1rem;

    border-radius: 8px;

    z-index: 9999;

    opacity: 0;

    pointer-events: none;

    transition: opacity .3s ease;

}

.toast.show {

    opacity: 1;

}