/*==================================================
PRIMOWORK ARTICLE STYLESHEET
Version: 2.0
Author: PrimoWork
==================================================*/

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

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    font-size:16px;
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
    color:#243447;
    background:#f5f7fb;
    line-height:1.75;
    overflow-x:hidden;
}

/* Prevent every element from causing horizontal scroll */

img,
video,
iframe,
table,
svg{
    max-width:100%;
}

/*==============================
THEME VARIABLES
==============================*/

:root{

    --primary:#0d6efd;
    --primary-dark:#0a58ca;

    --success:#198754;
    --warning:#ffc107;
    --danger:#dc3545;

    --text:#243447;
    --text-light:#667085;

    --heading:#101828;

    --border:#e5e7eb;

    --surface:#ffffff;

    --background:#f5f7fb;

    --radius:16px;

    --shadow:
    0 10px 30px rgba(15,23,42,.06);

    --container:820px;

}

/*==============================
MAIN ARTICLE WRAPPER
==============================*/

main{

    width:100%;

    max-width:var(--container);

    margin:50px auto;

    padding-inline:24px;

}

/*==============================
ARTICLE SECTION
==============================*/

main section{

    background:var(--surface);

    border-radius:18px;

    padding:40px;

    margin-bottom:28px;

    box-shadow:var(--shadow);

    overflow:hidden;

}

/*==============================
TYPOGRAPHY
==============================*/

h1,
h2,
h3,
h4{

    color:var(--heading);

    font-weight:700;

    line-height:1.3;

}

h1{

    font-size:2.6rem;

    margin-bottom:20px;

}

h2{

    font-size:2rem;

    margin-bottom:18px;

    padding-bottom:12px;

    border-bottom:2px solid #eef2f7;

}

h3{

    font-size:1.35rem;

    margin-top:28px;

    margin-bottom:12px;

}

p{

    margin-bottom:18px;

    color:var(--text);

}

strong{

    color:var(--heading);

}

/*==============================
LISTS
==============================*/

ul,
ol{

    padding-left:24px;

    margin:18px 0;

}

li{

    margin-bottom:10px;

}

/*==============================
LINKS
==============================*/

main a{

    color:var(--primary);

    text-decoration:none;

    transition:.25s;

}

main a:hover{

    color:var(--primary-dark);

    text-decoration:underline;

}


/*==================================================
PART 2 — HERO, ARTICLE META & IMAGES
==================================================*/

/*==============================
ARTICLE HERO
==============================*/

.article-hero{

    background:linear-gradient(135deg,#0d6efd,#2563eb);

    color:#fff;

    padding:70px 0 50px;

    margin-bottom:30px;

}

.article-hero .container{

    max-width:900px;

    margin:auto;

    padding-inline:24px;

}

.category-badge{

    display:inline-flex;

    align-items:center;

    padding:8px 16px;

    border-radius:999px;

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

    color:#fff;

    font-size:.9rem;

    font-weight:600;

    letter-spacing:.3px;

    backdrop-filter:blur(8px);

    margin-bottom:22px;

}

.article-hero h1{

    color:#fff;

    font-size:clamp(2rem,5vw,3.2rem);

    line-height:1.2;

    margin-bottom:22px;

    font-weight:800;

}

.article-intro{

    font-size:1.1rem;

    color:rgba(255,255,255,.95);

    max-width:760px;

    margin-bottom:30px;

}

.article-meta{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:35px;

}

.article-meta span{

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

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

    border:1px solid rgba(255,255,255,.15);

    border-radius:999px;

    font-size:.9rem;

    backdrop-filter:blur(8px);

}

.article-meta i{

    color:#ffd43b;

}

/*==============================
HERO IMAGE
==============================*/

.article-hero img{

    display:block;

    width:100%;

    height:auto;

    aspect-ratio:16/9;

    object-fit:cover;

    border-radius:18px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.20);

}

/*==============================
ARTICLE IMAGES
==============================*/

main section img{

    display:block;

    width:100%;

    max-width:100%;

    height:auto;

    margin:32px auto;

    border-radius:14px;

    box-shadow:
    0 8px 25px rgba(0,0,0,.08);

    transition:
    transform .35s ease,
    box-shadow .35s ease;

}

main section img:hover{

    transform:translateY(-3px);

    box-shadow:
    0 16px 35px rgba(0,0,0,.12);

}

/*==============================
FIGURE
==============================*/

figure{

    margin:35px 0;

}

figure img{

    margin:0;

}

figcaption{

    margin-top:12px;

    text-align:center;

    font-size:.92rem;

    color:var(--text-light);

    font-style:italic;

}

/*==============================
IMAGE ALIGNMENT
==============================*/

main section>*:last-child{

    margin-bottom:0;

}

/*==============================
ARTICLE SPACING
==============================*/

main section+section{

    margin-top:28px;

}

/*==============================
MOBILE
==============================*/

@media (max-width:768px){

    .article-hero{

        padding:45px 0 30px;

    }

    .article-hero .container{

        padding-inline:18px;

    }

    .article-meta{

        gap:10px;

    }

    .article-meta span{

        width:100%;

        justify-content:center;

    }

    .article-intro{

        font-size:1rem;

    }

    main section img{

        margin:24px auto;

        border-radius:12px;

    }

}


/*==================================================
PART 3 — CONTENT COMPONENTS
==================================================*/

/*==============================
TABLE OF CONTENTS
==============================*/

.toc,
section:first-of-type{

    background:#f8fbff;

    border:1px solid #dbeafe;

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

}

.toc h2,
section:first-of-type h2{

    border:none;

    margin-bottom:20px;

}

.toc ul,
section:first-of-type ul{

    list-style:none;

    padding:0;

    margin:0;

}

.toc li,
section:first-of-type li{

    margin-bottom:10px;

}

.toc a,
section:first-of-type a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 16px;

    border-radius:10px;

    color:var(--text);

    font-weight:500;

    transition:.25s;

}

.toc a::before,
section:first-of-type a::before{

    content:"→";

    color:var(--primary);

    font-weight:700;

}

.toc a:hover,
section:first-of-type a:hover{

    background:#e8f2ff;

    color:var(--primary);

    text-decoration:none;

    transform:translateX(4px);

}

/*==============================
TABLES
==============================*/

.table-responsive{

    overflow-x:auto;

    margin:30px 0;

    border-radius:14px;

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

}

table{

    width:100%;

    border-collapse:collapse;

    min-width:650px;

    background:#fff;

}

thead{

    background:var(--primary);

    color:#fff;

}

th{

    padding:16px;

    text-align:left;

    font-size:.95rem;

}

td{

    padding:16px;

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

}

tbody tr{

    transition:.2s;

}

tbody tr:nth-child(even){

    background:#fafafa;

}

tbody tr:hover{

    background:#eef5ff;

}

/*==============================
TIP BOX
==============================*/

.tip-box{

    background:#eff8ff;

    border-left:5px solid #0d6efd;

    padding:24px;

    border-radius:12px;

    margin:30px 0;

}

.tip-box h3{

    color:#0d6efd;

    margin-top:0;

}

/*==============================
INFO BOX
==============================*/

.info-box{

    background:#f0fdf4;

    border-left:5px solid #16a34a;

    padding:24px;

    border-radius:12px;

    margin:30px 0;

}

.info-box h3{

    color:#15803d;

    margin-top:0;

}

/*==============================
WARNING BOX
==============================*/

.warning-box{

    background:#fff7ed;

    border-left:5px solid #ea580c;

    padding:24px;

    border-radius:12px;

    margin:30px 0;

}

.warning-box h3{

    color:#c2410c;

    margin-top:0;

}

/*==============================
CHECKLIST
==============================*/

.checklist{

    background:#f8fafc;

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

    border-radius:14px;

    padding:24px;

    margin:30px 0;

}

.checklist ul{

    list-style:none;

    padding:0;

}

.checklist li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-bottom:14px;

}

.checklist li::before{

    content:"✓";

    width:28px;

    height:28px;

    flex-shrink:0;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:#16a34a;

    color:#fff;

    font-weight:700;

}

/*==============================
BLOCKQUOTE
==============================*/

blockquote{

    margin:30px 0;

    padding:22px 28px;

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

    background:#f8fbff;

    font-style:italic;

    border-radius:10px;

}

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

pre{

    overflow-x:auto;

    background:#111827;

    color:#f9fafb;

    padding:20px;

    border-radius:10px;

}

code{

    font-family:Consolas,monospace;

}

/*==============================
HORIZONTAL RULE
==============================*/

hr{

    border:none;

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

    margin:45px 0;

}

/*==============================
MOBILE
==============================*/

@media (max-width:768px){

    table{

        min-width:560px;

    }

    th,
    td{

        padding:12px;

        font-size:.9rem;

    }

    .tip-box,
    .info-box,
    .warning-box,
    .checklist{

        padding:18px;

    }

}