/* =======================================================
   SMART ELECTRICITY TRACKER
   DOCUMENTATION.CSS
   PART 1
   Global Styles + Header + Sidebar + Layout
======================================================= */

/* ===========================
   GOOGLE FONT
=========================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');


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

:root{

    --primary:#0f172a;
    --secondary:#1e293b;
    --accent:#2563eb;
    --accent-light:#3b82f6;

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

    --background:#868b9422;
    --surface:#0f0b0b18;

    --text:#4b0000;
    --text-light:#64748b;

    --border:#dbe4ee;

    --shadow-small:0 3px 10px rgba(0,0,0,.08);
    --shadow-medium:0 10px 25px rgba(0,0,0,.10);
    --shadow-large:0 18px 45px rgba(0,0,0,.15);

    --radius:14px;

}


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

*{

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

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    background:var(--background);

    color:var(--text);

    line-height:1.7;

}


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

a{

    text-decoration:none;

    color:inherit;

}


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

img{

    max-width:100%;

    display:block;

}


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

ul,
ol{

    padding-left:20px;

}


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

p{

    margin-bottom:18px;

    color:var(--text-light);

}


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

h1,
h2,
h3,
h4{

    color:var(--primary);

    font-weight:700;

    line-height:1.3;

}


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

.header{

    position:sticky;

    top:0;

    z-index:1000;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px 60px;

    background:white;

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

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

}


/* ===========================
   LOGO
=========================== */

.logo h2{

    color:var(--accent);

    font-size:1.6rem;

}


/* ===========================
   TOP NAVIGATION
=========================== */

.top-nav{

    display:flex;

    gap:30px;

    align-items:center;

}


.top-nav a{

    font-weight:500;

    color:var(--text);

    transition:.3s;

    position:relative;

}


.top-nav a:hover{

    color:var(--accent);

}


.top-nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--accent);

    transition:.3s;

}


.top-nav a:hover::after{

    width:100%;

}


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

.documentation-container{

    display:grid;

    grid-template-columns:280px 1fr;

    min-height:calc(100vh - 90px);

}


/* ======================================================
   SIDEBAR
====================================================== */

.sidebar{

    position:sticky;

    top:90px;

    height:calc(100vh - 90px);

    overflow-y:auto;

    background:rgba(171, 224, 247, 0.105);

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

    padding:35px 25px;

}


/* ===========================
   SIDEBAR TITLE
=========================== */

.sidebar-title{

    margin-bottom:30px;

    text-align:center;

}


.sidebar-title h3{

    font-size:1.3rem;

    color:var(--accent);

}


/* ===========================
   SIDEBAR LIST
=========================== */

.sidebar ul{

    list-style:none;

    padding:0;

}


/* ===========================
   SIDEBAR HEADING
=========================== */

.sidebar-heading{

    margin-top:28px;

    margin-bottom:12px;

    font-size:.8rem;

    letter-spacing:1px;

    color:var(--text-light);

    text-transform:uppercase;

    font-weight:700;

}


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

.sidebar li a{

    display:block;

    padding:12px 15px;

    border-radius:10px;

    margin-bottom:6px;

    transition:.3s;

    color:var(--text);

    font-size:.95rem;

}


.sidebar li a:hover{

    background:#eff6ff;

    color:var(--accent);

    transform:translateX(6px);

}


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

.sidebar::-webkit-scrollbar{

    width:8px;

}

.sidebar::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:20px;

}

.sidebar::-webkit-scrollbar-thumb:hover{

    background:#94a3b8;

}


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

.content{

    padding:50px;

    overflow:hidden;

}


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

.content section{

    margin-bottom:80px;

}
/* =======================================================
   DOCUMENTATION.CSS
   PART 2
   HERO SECTION + BUTTONS + FEATURE PREVIEW
=======================================================*/


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

.hero{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:40px;

    align-items:center;

    background:var(--surface);

    border-radius:var(--radius);

    padding:50px;

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

}


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

.hero-text h1{

    font-size:3rem;

    margin:20px 0;

}


.hero-text p{

    font-size:1.05rem;

    line-height:1.9;

}


/* ======================================================
   VERSION BADGE
====================================================== */

.version{

    display:inline-block;

    background:#dbeafe;

    color:var(--accent);

    padding:8px 18px;

    border-radius:999px;

    font-size:.85rem;

    font-weight:600;

    letter-spacing:.5px;

}


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

.hero-buttons{

    display:flex;

    gap:18px;

    margin-top:35px;

    flex-wrap:wrap;

}


/* ======================================================
   PRIMARY BUTTON
====================================================== */

.primary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 28px;

    border-radius:10px;

    background:var(--accent);

    color:white;

    font-weight:600;

    transition:.3s;

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

}


.primary-btn:hover{

    background:var(--accent-light);

    transform:translateY(-3px);

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

}


/* ======================================================
   SECONDARY BUTTON
====================================================== */

.secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 28px;

    border-radius:10px;

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

    color:var(--accent);

    font-weight:600;

    transition:.3s;

}


.secondary-btn:hover{

    background:var(--accent);

    color:white;

    transform:translateY(-3px);

}


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

.hero-card{

    background:linear-gradient(180deg,#eff6ff,#ffffff);

    border-radius:var(--radius);

    padding:30px;

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

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

}


.hero-card h3{

    margin-bottom:25px;

    text-align:center;

    color:var(--accent);

}


/* ======================================================
   INFO BOXES
====================================================== */

.info-box{

    background:white;

    border-radius:12px;

    padding:18px;

    margin-bottom:18px;

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

    box-shadow:0 4px 12px rgba(0,0,0,.06);

}


.info-box:last-child{

    margin-bottom:0;

}


.info-box h4{

    margin-bottom:8px;

    color:var(--primary);

}


.info-box p{

    margin:0;

    color:var(--text-light);

    font-size:.95rem;

}


/* ======================================================
   FEATURE PREVIEW
====================================================== */

.feature-preview{

    margin-top:70px;

}


.feature-preview h2{

    font-size:2rem;

    margin-bottom:15px;

}


.feature-preview>p{

    max-width:750px;

    margin-bottom:40px;

}


/* ======================================================
   CARD GRID
====================================================== */

.card-grid{

    display:grid;

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

    gap:25px;

}


/* ======================================================
   PREVIEW CARD
====================================================== */

.preview-card{

    background:var(--surface);

    padding:30px;

    border-radius:16px;

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

    transition:.35s;

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

    position:relative;

    overflow:hidden;

}


/* ======================================================
   TOP ACCENT BAR
====================================================== */

.preview-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:var(--accent);

}


/* ======================================================
   HOVER EFFECT
====================================================== */

.preview-card:hover{

    transform:translateY(-8px);

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

}


/* ======================================================
   ICON
====================================================== */

.preview-card span{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:65px;

    height:65px;

    border-radius:50%;

    background:#dbeafe;

    font-size:2rem;

    margin-bottom:20px;

}


/* ======================================================
   TITLE
====================================================== */

.preview-card h3{

    margin-bottom:15px;

    font-size:1.25rem;

}


/* ======================================================
   DESCRIPTION
====================================================== */

.preview-card p{

    margin:0;

    font-size:.96rem;

    color:var(--text-light);

}


/* ======================================================
   SIMPLE FADE ANIMATION
====================================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


.hero,
.feature-preview{

    animation:fadeUp .8s ease;

}
/* =======================================================
   DOCUMENTATION.CSS
   PART 3
   DOCUMENTATION SECTIONS
   TABLES
   CODE BLOCKS
   ALERT BOXES
=======================================================*/


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

.doc-section{

    background:var(--surface);

    padding:45px;

    border-radius:16px;

    margin-bottom:50px;

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

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

}


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

.section-tag{

    display:inline-block;

    background:#dbeafe;

    color:var(--accent);

    padding:8px 18px;

    border-radius:999px;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:18px;

}


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

.doc-section h2{

    font-size:2rem;

    margin-bottom:20px;

}


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

.sub-heading{

    margin-top:40px;

    margin-bottom:20px;

    color:var(--primary);

    font-size:1.3rem;

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

    padding-left:15px;

}


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

.doc-section p{

    margin-bottom:18px;

    line-height:1.9;

}


/* ======================================================
   INFORMATION CARD
====================================================== */

.info-card{

    margin-top:30px;

    background:#eff6ff;

    padding:28px;

    border-radius:14px;

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

}


.info-card h3{

    margin-bottom:12px;

}


.info-card p{

    margin-bottom:0;

}


/* ======================================================
   STORAGE BOX
====================================================== */

.storage-box{

    margin-top:35px;

    background:#eefbf3;

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

    border-radius:14px;

    padding:25px;

}


.storage-box h3{

    color:var(--success);

    margin-bottom:18px;

}


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

.success-box{

    margin-top:30px;

    padding:22px;

    border-radius:12px;

    background:#ecfdf3;

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

    color:#166534;

}


.success-box strong{

    display:block;

    margin-bottom:8px;

}


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

.warning-box{

    margin-top:30px;

    padding:22px;

    border-radius:12px;

    background:#fff8e6;

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

    color:#92400e;

}


.warning-box strong{

    display:block;

    margin-bottom:8px;

}


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

.doc-table{

    width:100%;

    border-collapse:collapse;

    margin-top:25px;

    margin-bottom:35px;

    overflow:hidden;

    border-radius:12px;

}


.doc-table thead{

    background:var(--primary);

    color:white;

}


.doc-table th{

    padding:18px;

    text-align:left;

    font-weight:600;

}


.doc-table td{

    padding:18px;

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

    color:var(--text);

}


.doc-table tbody tr{

    transition:.25s;

}


.doc-table tbody tr:nth-child(even){

    background:#f8fafc;

}


.doc-table tbody tr:hover{

    background:#eff6ff;

}


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

.code-block{

    margin:25px 0;

    padding:25px;

    background:#0f172a;

    color:#f8fafc;

    border-radius:12px;

    overflow-x:auto;

    font-size:.95rem;

    line-height:1.8;

    font-family:Consolas, monospace;

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

}


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

.feature-list{

    margin-top:20px;

    margin-left:20px;

}


.feature-list li{

    margin-bottom:12px;

    color:var(--text);

    line-height:1.7;

}


/* ======================================================
   NUMBER LIST
====================================================== */

.number-list{

    margin-top:20px;

    margin-left:22px;

}


.number-list li{

    margin-bottom:14px;

    line-height:1.8;

    color:var(--text);

}


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

hr{

    margin:45px 0;

    border:none;

    height:1px;

    background:var(--border);

}


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

strong{

    color:var(--primary);

}


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

code{

    background:#e2e8f0;

    padding:3px 8px;

    border-radius:6px;

    font-family:Consolas, monospace;

    font-size:.92rem;

}


/* ======================================================
   BLOCKQUOTE (Future Use)
====================================================== */

blockquote{

    margin:25px 0;

    padding:20px 25px;

    background:#f8fafc;

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

    color:var(--text-light);

    font-style:italic;

}


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

.doc-table{

    display:block;

    overflow-x:auto;

    white-space:nowrap;

}
/* =======================================================
   DOCUMENTATION.CSS
   PART 4
   OBJECTIVE CARDS
   STEP CARDS
   WORKFLOW
   ADDITIONAL COMPONENTS
=======================================================*/


/* ======================================================
   OBJECTIVE GRID
====================================================== */

.objective-grid{

    display:grid;

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

    gap:25px;

    margin-top:35px;

}


/* ======================================================
   OBJECTIVE CARD
====================================================== */

.objective-card{

    background:var(--surface);

    padding:30px;

    border-radius:16px;

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

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

    transition:.35s;

}


.objective-card:hover{

    transform:translateY(-8px);

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

}


.objective-card h3{

    color:var(--accent);

    margin-bottom:15px;

    font-size:1.2rem;

}


.objective-card p{

    margin-bottom:0;

}


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

.step-container{

    display:grid;

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

    gap:30px;

    margin-top:40px;

}


/* ======================================================
   STEP CARD
====================================================== */

.step-card{

    position:relative;

    background:var(--surface);

    padding:35px 25px;

    border-radius:16px;

    text-align:center;

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

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

    transition:.35s;

}


.step-card:hover{

    transform:translateY(-8px);

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

}


.step-card h3{

    margin-bottom:15px;

}


.step-card p{

    margin-bottom:0;

}


/* ======================================================
   STEP NUMBER
====================================================== */

.step-number{

    width:65px;

    height:65px;

    border-radius:50%;

    margin:0 auto 25px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--accent);

    color:white;

    font-size:1.4rem;

    font-weight:700;

}


/* ======================================================
   WORKFLOW
====================================================== */

.workflow{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:18px;

    margin-top:40px;

}


/* ======================================================
   WORKFLOW BOX
====================================================== */

.workflow-box{

    width:320px;

    max-width:100%;

    background:var(--surface);

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

    border-radius:14px;

    padding:18px;

    text-align:center;

    font-weight:600;

    color:var(--primary);

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

    transition:.3s;

}


.workflow-box:hover{

    background:var(--accent);

    color:white;

    transform:scale(1.03);

}


/* ======================================================
   WORKFLOW ARROWS
====================================================== */

.arrow{

    font-size:2rem;

    color:var(--accent);

    font-weight:bold;

}


/* ======================================================
   PRE TAG INSIDE STORAGE BOX
====================================================== */

.storage-box pre{

    margin-top:15px;

}


/* ======================================================
   TABLE INSIDE INFO CARD
====================================================== */

.info-card table{

    margin-top:20px;

}


/* ======================================================
   DOCUMENTATION SECTION SPACING
====================================================== */

.doc-section>*:last-child{

    margin-bottom:0;

}


/* ======================================================
   HOVER EFFECT FOR TABLES
====================================================== */

.doc-table tbody tr{

    transition:.25s ease;

}


.doc-table tbody tr:hover{

    transform:scale(1.005);

}


/* ======================================================
   FEATURE LIST ICON STYLE
====================================================== */

.feature-list li{

    padding-left:5px;

}


/* ======================================================
   NUMBER LIST STYLE
====================================================== */

.number-list li::marker{

    font-weight:700;

    color:var(--accent);

}


/* ======================================================
   EMPHASIZED PARAGRAPH
====================================================== */

.doc-section p strong{

    color:var(--accent);

}


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

.doc-section{

    transition:.3s;

}


.doc-section:hover{

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

}


/* ======================================================
   SMOOTH CARD ANIMATION
====================================================== */

.preview-card,
.objective-card,
.step-card,
.info-card{

    animation:fadeUp .7s ease;

}


/* ======================================================
   SMALL DIVIDER
====================================================== */

.divider{

    width:100%;

    height:1px;

    background:var(--border);

    margin:40px 0;

}


/* ======================================================
   SMALL BADGE
====================================================== */

.badge{

    display:inline-block;

    padding:6px 14px;

    background:#e0f2fe;

    color:#0284c7;

    border-radius:999px;

    font-size:.8rem;

    font-weight:600;

}


/* ======================================================
   LIGHT BACKGROUND SECTION
====================================================== */

.light-section{

    background:#f8fafc;

    border-radius:16px;

    padding:30px;

}


/* ======================================================
   MINI INFORMATION BOX
====================================================== */

.mini-box{

    padding:18px;

    background:white;

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

    border-radius:12px;

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

}


/* ======================================================
   FLEX ROW
====================================================== */

.flex-row{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}


/* ======================================================
   FLEX COLUMN
====================================================== */

.flex-column{

    display:flex;

    flex-direction:column;

    gap:20px;

}


/* ======================================================
   CENTER UTILITY
====================================================== */

.center{

    text-align:center;

}


/* ======================================================
   SPACING UTILITIES
====================================================== */

.mt-20{

    margin-top:20px;

}

.mt-30{

    margin-top:30px;

}

.mt-40{

    margin-top:40px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-30{

    margin-bottom:30px;

}

.mb-40{

    margin-bottom:40px;

}
/* =======================================================
   DOCUMENTATION.CSS
   PART 5
   RESPONSIVE DESIGN
   SCROLLBAR
   ANIMATIONS
   FINAL POLISH
=======================================================*/


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

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#e2e8f0;

}

::-webkit-scrollbar-thumb{

    background:var(--accent);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--accent-light);

}


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

::selection{

    background:var(--accent);

    color:white;

}


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

a:focus,
button:focus{

    outline:3px solid rgba(37,99,235,.35);

    outline-offset:4px;

}


/* ======================================================
   SMOOTH TRANSITIONS
====================================================== */

a,
button,
.preview-card,
.objective-card,
.step-card,
.workflow-box,
.info-card,
.doc-section{

    transition:.3s ease;

}


/* ======================================================
   HOVER EFFECTS
====================================================== */

.doc-table tbody tr:hover{

    background:#eff6ff;

}

.feature-list li:hover{

    color:var(--accent);

    transform:translateX(5px);

}

.number-list li:hover{

    color:var(--accent);

}


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

.code-block{

    scrollbar-width:thin;

}


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

.doc-table td,
.doc-table th{

    vertical-align:top;

}


/* ======================================================
   PARAGRAPH READABILITY
====================================================== */

.doc-section p{

    text-align:justify;

}


/* ======================================================
   IMAGE SUPPORT
====================================================== */

.doc-section img{

    width:100%;

    border-radius:16px;

    margin-top:25px;

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

}


/* ======================================================
   FADE IN ANIMATION
====================================================== */

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


/* ======================================================
   FLOAT UP
====================================================== */

@keyframes floatUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

.doc-section{

    animation:floatUp .7s ease;

}

.hero{

    animation:fadeIn .9s ease;

}

.preview-card{

    animation:fadeUp .7s ease;

}


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

@media(max-width:1100px){

    .documentation-container{

        grid-template-columns:240px 1fr;

    }

    .hero{

        grid-template-columns:1fr;

    }

    .hero-card{

        margin-top:20px;

    }

    .content{

        padding:35px;

    }

}


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

@media(max-width:900px){

    .header{

        flex-direction:column;

        gap:20px;

        padding:25px;

        position:relative;

    }

    .top-nav{

        flex-wrap:wrap;

        justify-content:center;

    }

    .documentation-container{

        grid-template-columns:1fr;

    }

    .sidebar{

        position:relative;

        top:0;

        height:auto;

        border-right:none;

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

    }

    .content{

        padding:30px;

    }

}


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

@media(max-width:768px){

    .hero{

        padding:35px;

    }

    .hero-text h1{

        font-size:2.2rem;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .primary-btn,
    .secondary-btn{

        width:100%;

        justify-content:center;

    }

}


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

@media(max-width:600px){

    .doc-section{

        padding:25px;

    }

    .hero{

        padding:25px;

    }

    .hero-text h1{

        font-size:1.8rem;

    }

    .feature-preview h2{

        font-size:1.7rem;

    }

    .doc-section h2{

        font-size:1.6rem;

    }

    .sub-heading{

        font-size:1.15rem;

    }

    .workflow-box{

        width:100%;

    }

    .card-grid{

        grid-template-columns:1fr;

    }

    .objective-grid{

        grid-template-columns:1fr;

    }

    .step-container{

        grid-template-columns:1fr;

    }

}


/* ======================================================
   EXTRA SMALL DEVICES
====================================================== */

@media(max-width:420px){

    body{

        font-size:15px;

    }

    .logo h2{

        font-size:1.25rem;

    }

    .top-nav{

        gap:12px;

    }

    .top-nav a{

        font-size:.9rem;

    }

    .sidebar{

        padding:20px;

    }

    .content{

        padding:18px;

    }

}


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

@media print{

    body{

        background:white;

    }

    .header,
    .sidebar,
    .hero-buttons{

        display:none;

    }

    .documentation-container{

        display:block;

    }

    .content{

        padding:0;

    }

    .doc-section{

        box-shadow:none;

        border:1px solid #ccc;

        page-break-inside:avoid;

    }

}

footer{

    margin-top:80px;

    padding:40px 20px;

    text-align:center;

    color:#cbd5e1;

    background:

    rgba(8,15,30,.80);

    backdrop-filter:blur(25px);

    border-top:

    1px solid rgba(255,255,255,.08);

}
/* ======================================================
   END OF FILE
====================================================== */