/*=========================================================
  PRIMOWORK ARTICLE STYLESHEET
  Part 1
  Layout • Typography • Hero • Article Body
=========================================================*/

/*==============================
ROOT VARIABLES
==============================*/

:root{

--primary:#2563eb;
--primary-dark:#1d4ed8;
--primary-light:#dbeafe;

--success:#16a34a;
--warning:#ea580c;
--danger:#dc2626;

--gray-50:#f9fafb;
--gray-100:#f3f4f6;
--gray-200:#e5e7eb;
--gray-300:#d1d5db;
--gray-400:#9ca3af;
--gray-500:#6b7280;
--gray-600:#4b5563;
--gray-700:#374151;
--gray-800:#1f2937;
--gray-900:#111827;

--body:#374151;
--heading:#111827;

--border:#e5e7eb;

--shadow-sm:
0 2px 6px rgba(0,0,0,.05);

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

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

--radius-sm:8px;
--radius:14px;
--radius-lg:20px;

--container:820px;

--transition:
.3s ease;

}

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

*,
*::before,
*::after{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:
Inter,
system-ui,
Segoe UI,
Roboto,
Arial,
sans-serif;

font-size:18px;

line-height:1.8;

background:#fff;

color:var(--body);

text-rendering:optimizeLegibility;

-webkit-font-smoothing:antialiased;

overflow-x:hidden;

}

/*==============================
SELECTION
==============================*/

::selection{

background:var(--primary);

color:#fff;

}

/*==============================
SCROLLBAR
==============================*/

::-webkit-scrollbar{

width:11px;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:20px;

}

::-webkit-scrollbar-track{

background:#f3f4f6;

}

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

a{

color:var(--primary);

text-decoration:none;

transition:var(--transition);

}

a:hover{

color:var(--primary-dark);

}

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

img{

display:block;

max-width:100%;

height:auto;

}

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

.container{
    width:100%;
    max-width:820px;
    margin-inline:auto;
    padding-inline:24px;
    box-sizing:border-box;
}

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

.article{

padding:60px 0 100px;

}

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

.article-hero{

padding-top:50px;

padding-bottom:40px;

}

.category-badge{

display:inline-flex;

align-items:center;

gap:8px;

padding:7px 18px;

border-radius:50px;

background:var(--primary-light);

color:var(--primary);

font-size:.9rem;

font-weight:700;

margin-bottom:20px;

}

.article-hero h1{

font-size:clamp(2.2rem,5vw,3.6rem);

line-height:1.15;

font-weight:800;

color:var(--heading);

margin-bottom:28px;

letter-spacing:-1px;

}

.article-intro{

font-size:1.2rem;

color:var(--gray-600);

max-width:760px;

margin-bottom:35px;

}

.article-meta{

display:flex;

flex-wrap:wrap;

gap:20px;

margin-bottom:35px;

font-size:.95rem;

color:var(--gray-500);

}

.article-meta span{

display:flex;

align-items:center;

gap:8px;

}

.article-hero img{

width:100%;

border-radius:20px;

box-shadow:var(--shadow-lg);

margin-top:20px;

}

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

section{

margin-bottom:75px;

}

.container{

    width:100%;
    max-width:820px;
    margin-inline:auto;
    padding-inline:24px;

}

/*==============================
HEADINGS
==============================*/

h2{

font-size:2rem;

font-weight:800;

color:var(--heading);

line-height:1.3;

margin-bottom:20px;

scroll-margin-top:100px;

}

h3{

font-size:1.35rem;

margin-top:45px;

margin-bottom:16px;

font-weight:700;

color:var(--heading);

}

h4{

font-size:1.15rem;

margin-bottom:12px;

font-weight:700;

color:var(--heading);

}

/*==============================
PARAGRAPHS
==============================*/

p{

margin-bottom:22px;

}

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

ul,
ol{

margin-bottom:28px;

padding-left:28px;

}

li{

margin-bottom:12px;

}

/*==============================
STRONG
==============================*/

strong{

font-weight:700;

color:var(--heading);

}

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

blockquote{

margin:40px 0;

padding:30px;

background:#f8fafc;

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

border-radius:12px;

font-size:1.1rem;

font-style:italic;

}

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

hr{

border:none;

height:1px;

background:var(--border);

margin:60px 0;

}

/*==============================
SMALL TEXT
==============================*/

small{

font-size:.9rem;

color:var(--gray-500);

}

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

.article section>*:last-child{

margin-bottom:0;

}

/*==============================
FOCUS
==============================*/

a:focus-visible{

outline:3px solid var(--primary);

outline-offset:4px;

border-radius:6px;

}

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

#table-of-contents h2{

margin-bottom:25px;

}

/*==============================
DESKTOP
==============================*/

@media (min-width:1200px){

.article{

padding-top:70px;

}

.article-hero{

padding-top:70px;

}

}

/*==============================
TABLET
==============================*/

@media (max-width:992px){

body{

font-size:17px;

}

.article{

padding-top:45px;

}

.article-hero h1{

font-size:2.8rem;

}

}

/*==============================
MOBILE
==============================*/
*{
    outline:1px solid red;
}

@media (max-width:768px){

    .container{
        width:100%;
        max-width:820px;
        padding-inline:20px;
        margin-inline:auto;
        box-sizing:border-box;
    }

}



/*=========================================================
PRIMOWORK ARTICLE STYLESHEET
Part 2
TOC • Tables • Images • Cards • Tip Boxes • Buttons
=========================================================*/


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

.table-of-contents,
#table-of-contents{

background:#fff;

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

border-radius:18px;

padding:30px;

box-shadow:var(--shadow-sm);

margin-bottom:60px;

}

.table-of-contents h2,
#table-of-contents h2{

margin-bottom:22px;

font-size:1.7rem;

}

.table-of-contents ul,
#table-of-contents ul{

list-style:none;

padding:0;

margin:0;

}

.table-of-contents li,
#table-of-contents li{

margin-bottom:14px;

}

.table-of-contents a,
#table-of-contents a{

display:block;

padding:12px 18px;

border-radius:10px;

font-weight:600;

color:var(--gray-700);

transition:.25s;

}

.table-of-contents a:hover{

background:var(--primary-light);

color:var(--primary);

transform:translateX(6px);

}

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

.article img,
section img{

display:block;

width:100%;

height:auto;

border-radius:18px;

margin:35px auto;

box-shadow:var(--shadow);

transition:.35s;

}

.article img:hover{

transform:scale(1.01);

}

/*==================================
IMAGE CAPTION
===================================*/

.image-caption,
figcaption{

text-align:center;

font-size:.95rem;

color:var(--gray-500);

margin-top:-18px;

margin-bottom:35px;

}

/*==================================
TABLE WRAPPER
===================================*/

.table-responsive{

overflow-x:auto;

margin:35px 0;

border-radius:14px;

}

/*==================================
TABLE
===================================*/

table{

width:100%;

border-collapse:collapse;

margin:35px 0;

overflow:hidden;

border-radius:16px;

box-shadow:var(--shadow-sm);

background:#fff;

}

thead{

background:var(--primary);

color:#fff;

}

thead th{

padding:18px;

font-size:1rem;

font-weight:700;

text-align:left;

}

tbody td{

padding:18px;

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

}

tbody tr{

transition:.2s;

}

tbody tr:hover{

background:#f8fbff;

}

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

.checklist{

background:#f0fdf4;

border-left:6px solid var(--success);

padding:28px;

border-radius:14px;

margin:40px 0;

box-shadow:var(--shadow-sm);

}

.checklist h3{

margin-top:0;

color:var(--success);

}

.checklist ul{

margin-top:20px;

}

.checklist li{

list-style:none;

padding-left:6px;

font-weight:500;

}

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

.tip-box{

background:#eff6ff;

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

padding:28px;

border-radius:14px;

margin:40px 0;

box-shadow:var(--shadow-sm);

}

.tip-box h3{

margin-top:0;

color:var(--primary);

}

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

.info-box{

background:#f8fafc;

border-left:6px solid #0f766e;

padding:28px;

border-radius:14px;

margin:40px 0;

box-shadow:var(--shadow-sm);

}

.info-box h3{

margin-top:0;

color:#0f766e;

}

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

.warning-box{

background:#fff7ed;

border-left:6px solid var(--warning);

padding:28px;

border-radius:14px;

margin:40px 0;

box-shadow:var(--shadow-sm);

}

.warning-box h3{

margin-top:0;

color:var(--warning);

}

/*==================================
SUCCESS BOX
===================================*/

.success-box{

background:#f0fdf4;

border-left:6px solid var(--success);

padding:28px;

border-radius:14px;

margin:40px 0;

box-shadow:var(--shadow-sm);

}

.success-box h3{

margin-top:0;

color:var(--success);

}

/*==================================
ARTICLE CARDS
===================================*/

.article-card{

background:#fff;

padding:28px;

border-radius:18px;

box-shadow:var(--shadow-sm);

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

margin:30px 0;

transition:.3s;

}

.article-card:hover{

transform:translateY(-6px);

box-shadow:var(--shadow);

}

/*==================================
BUTTONS
===================================*/

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 26px;

border-radius:10px;

font-weight:700;

transition:.25s;

cursor:pointer;

text-decoration:none;

}

.btn-primary{

background:var(--primary);

color:#fff;

}

.btn-primary:hover{

background:var(--primary-dark);

transform:translateY(-2px);

}

.btn-outline{

background:#fff;

border:2px solid var(--primary);

color:var(--primary);

}

.btn-outline:hover{

background:var(--primary);

color:#fff;

}

/*==================================
HIGHLIGHT TEXT
===================================*/

mark{

background:#fff3bf;

padding:2px 6px;

border-radius:4px;

}

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

code{

background:#f3f4f6;

padding:3px 8px;

border-radius:6px;

font-size:.9rem;

font-family:Consolas,monospace;

}

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

pre{

background:#111827;

color:#fff;

padding:25px;

overflow:auto;

border-radius:16px;

margin:35px 0;

font-size:.95rem;

line-height:1.6;

}

/*==================================
NUMBER BADGE
===================================*/

.badge{

display:inline-flex;

align-items:center;

justify-content:center;

width:34px;

height:34px;

border-radius:50%;

background:var(--primary);

color:#fff;

font-weight:700;

margin-right:10px;

}

/*==================================
HORIZONTAL FEATURE LIST
===================================*/

.feature-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(220px,1fr));

gap:24px;

margin:40px 0;

}

.feature{

background:#fff;

padding:25px;

border-radius:16px;

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

box-shadow:var(--shadow-sm);

transition:.3s;

}

.feature:hover{

transform:translateY(-5px);

box-shadow:var(--shadow);

}

.feature h3{

margin-top:0;

}

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

@media(max-width:768px){

.table-of-contents,
#table-of-contents{

padding:22px;

}

.table-of-contents a{

padding:10px 12px;

font-size:.95rem;

}

table{

font-size:.92rem;

}

thead th,
tbody td{

padding:14px;

}

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

padding:20px;

}

.feature-grid{

grid-template-columns:1fr;

}

.btn{

width:100%;

}

}



/*=========================================================
PRIMOWORK ARTICLE STYLESHEET
Part 3
FAQ • Related Posts • Author • Progress • Print • Dark Mode
=========================================================*/


/*==================================
STICKY TABLE OF CONTENTS (DESKTOP)
===================================*/

@media (min-width:1200px){

.article-layout{

display:grid;

grid-template-columns:280px 1fr;

gap:50px;

align-items:start;

}

.sidebar{

position:sticky;

top:100px;

height:max-content;

}

}

/*==================================
FAQ
===================================*/

.faq{

margin:60px 0;

}

.faq-item{

background:#fff;

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

border-radius:14px;

margin-bottom:18px;

overflow:hidden;

transition:.3s;

box-shadow:var(--shadow-sm);

}

.faq-item:hover{

box-shadow:var(--shadow);

}

.faq-question{

padding:22px;

cursor:pointer;

font-weight:700;

font-size:1.05rem;

color:var(--heading);

display:flex;

justify-content:space-between;

align-items:center;

}

.faq-question::after{

content:"+";

font-size:1.4rem;

font-weight:700;

color:var(--primary);

}

.faq-item.active .faq-question::after{

content:"−";

}

.faq-answer{

display:none;

padding:0 22px 22px;

}

.faq-item.active .faq-answer{

display:block;

}

/*==================================
RELATED POSTS
===================================*/

.related-posts{

margin-top:80px;

}

.related-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(250px,1fr));

gap:25px;

}

.related-card{

background:#fff;

border-radius:18px;

overflow:hidden;

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

transition:.3s;

box-shadow:var(--shadow-sm);

}

.related-card:hover{

transform:translateY(-6px);

box-shadow:var(--shadow);

}

.related-card img{

margin:0;

border-radius:0;

height:180px;

object-fit:cover;

}

.related-content{

padding:20px;

}

.related-content h3{

margin:0 0 12px;

font-size:1.1rem;

}

.related-content p{

font-size:.95rem;

margin-bottom:18px;

}

/*==================================
AUTHOR BOX
===================================*/

.author-box{

display:flex;

gap:22px;

align-items:center;

margin-top:80px;

padding:28px;

background:#fff;

border-radius:18px;

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

box-shadow:var(--shadow-sm);

}

.author-box img{

width:90px;

height:90px;

border-radius:50%;

margin:0;

object-fit:cover;

}

.author-box h3{

margin-top:0;

margin-bottom:10px;

}

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

.share-buttons{

display:flex;

flex-wrap:wrap;

gap:12px;

margin:40px 0;

}

.share-buttons a{

display:flex;

align-items:center;

justify-content:center;

padding:12px 18px;

border-radius:8px;

background:var(--primary);

color:#fff;

font-weight:600;

transition:.3s;

}

.share-buttons a:hover{

background:var(--primary-dark);

}

/*==================================
BREADCRUMB
===================================*/

.breadcrumb{

display:flex;

flex-wrap:wrap;

gap:8px;

font-size:.95rem;

margin-bottom:30px;

color:var(--gray-500);

}

.breadcrumb a{

color:var(--gray-500);

}

.breadcrumb a:hover{

color:var(--primary);

}

/*==================================
READING PROGRESS BAR
===================================*/

.progress-bar{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

background:var(--primary);

z-index:9999;

transition:width .15s linear;

}

/*==================================
BACK TO TOP
===================================*/

.back-to-top{

position:fixed;

right:25px;

bottom:25px;

width:52px;

height:52px;

display:flex;

align-items:center;

justify-content:center;

background:var(--primary);

color:#fff;

border-radius:50%;

box-shadow:var(--shadow);

opacity:0;

visibility:hidden;

transition:.3s;

z-index:999;

}

.back-to-top.show{

opacity:1;

visibility:visible;

}

.back-to-top:hover{

background:var(--primary-dark);

transform:translateY(-5px);

}

/*==================================
ARTICLE NAVIGATION
===================================*/

.article-navigation{

display:flex;

justify-content:space-between;

gap:20px;

margin:70px 0;

}

.article-navigation a{

flex:1;

padding:22px;

border-radius:14px;

background:#fff;

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

transition:.3s;

box-shadow:var(--shadow-sm);

}

.article-navigation a:hover{

transform:translateY(-4px);

box-shadow:var(--shadow);

}

/*==================================
ANIMATIONS
===================================*/

.fade-up{

animation:fadeUp .7s ease both;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.fade{

animation:fade .5s ease;

}

@keyframes fade{

from{

opacity:0;

}

to{

opacity:1;

}

}

/*==================================
PRINT
===================================*/

@media print{

body{

background:#fff;

color:#000;

font-size:12pt;

}

.progress-bar,
.back-to-top,
.share-buttons,
.sidebar,
.related-posts{

display:none!important;

}

img{

max-width:100%;

page-break-inside:avoid;

}

a{

color:#000;

text-decoration:none;

}

}

/*==================================
DARK MODE
===================================*/

@media (prefers-color-scheme:dark){

body{

background:#0f172a;

color:#cbd5e1;

}

h1,
h2,
h3,
h4{

color:#fff;

}

section,
.author-box,
.related-card,
.faq-item,
.article-card,
.table-of-contents{

background:#1e293b;

border-color:#334155;

}

table{

background:#1e293b;

}

tbody td{

border-color:#334155;

}

code{

background:#334155;

color:#fff;

}

pre{

background:#020617;

}

}

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

@media(max-width:768px){

.author-box{

flex-direction:column;

text-align:center;

}

.related-grid{

grid-template-columns:1fr;

}

.article-navigation{

flex-direction:column;

}

.back-to-top{

width:46px;

height:46px;

right:15px;

bottom:18px;

}

.share-buttons{

flex-direction:column;

}

.share-buttons a{

width:100%;

justify-content:center;

}

}

/*==================================
REDUCED MOTION
===================================*/

@media(prefers-reduced-motion:reduce){

*{

animation:none!important;

transition:none!important;

scroll-behavior:auto!important;

}

}

/* Fix article layout on mobile */
main{
    width:100%;
    max-width:820px;
    margin:0 auto;
    padding-inline:20px;
    box-sizing:border-box;
}

main > section{
    width:100%;
    max-width:100%;
}

main img,
main table,
main iframe,
main video{
    max-width:100%;
    height:auto;
}

@media (max-width:768px){

    main{
        padding-inline:16px;
    }

}