/*
====================================================
Torzle Universal Article Styling
Supports:
 /guides/
 /blog/
 /news/

SEO-focused:
- Long-form readability
- Mobile friendly
- E-E-A-T presentation
- Documentation style layout
====================================================
*/


:root {

    --text-main: #1f2937;
    --text-muted: #6b7280;

    --heading-color: #111827;

    --primary: #2563eb;

    --background-light: #f8fafc;

    --border: #e5e7eb;

    --warning-bg:#fff7ed;
    --warning-border:#f97316;

    --info-bg:#eff6ff;
    --info-border:#2563eb;

}


/* ==========================
   Base
========================== */


body {

    margin:0;

    padding:0;

    background:#ffffff;

    color:var(--text-main);

    font-family:

    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

    line-height:1.75;

}



/* ==========================
   Layout
========================== */


.main-content {

    width:100%;

}


.container {

    max-width:960px;

    margin:auto;

    padding:35px 20px;

}



/* Article wrapper */

.blog-post {

    width:100%;

    background:#ffffff;

}



/* ==========================
   Header
========================== */


.blog-title {

    font-size:44px;

    line-height:1.2;

    font-weight:800;

    letter-spacing:-0.5px;

    color:var(--heading-color);

    margin:

    0 0 15px;

}



.blog-meta {

    color:var(--text-muted);

    font-size:15px;

    margin-bottom:35px;

}



/* Subtitle */

.blog-subtitle {

    font-size:20px;

    color:#4b5563;

    margin-bottom:30px;

}



/* ==========================
   Article Text
========================== */


.blog-content {

    font-size:18px;

}



.blog-content p {

    margin:

    0 0 25px;

}



/* Links */


.blog-content a {

    color:var(--primary);

    font-weight:600;

    text-decoration:none;

}



.blog-content a:hover {

    text-decoration:underline;

}



/* ==========================
   Headings
========================== */


.blog-content h2 {

    margin-top:60px;

    margin-bottom:20px;

    font-size:32px;

    line-height:1.3;

    color:var(--heading-color);

    border-bottom:

    2px solid var(--border);

    padding-bottom:10px;

}



.blog-content h3 {

    margin-top:40px;

    margin-bottom:15px;

    font-size:24px;

    color:#374151;

}



.blog-content h4 {

    margin-top:30px;

    font-size:20px;

}



/* ==========================
   Lists
========================== */


.blog-content ul,
.blog-content ol {

    margin:

    20px 0 30px 35px;

    font-size:18px;

}



.blog-content li {

    margin-bottom:10px;

}



/* ==========================
   Tables
========================== */


.blog-content table {

    width:100%;

    border-collapse:collapse;

    margin:

    35px 0;

    font-size:16px;

}



.blog-content th {

    background:#111827;

    color:white;

    text-align:left;

    padding:14px;

}



.blog-content td {

    padding:14px;

    border-bottom:

    1px solid var(--border);

}



.blog-content tr:nth-child(even){

    background:#f9fafb;

}



/* Mobile table scrolling */

.table-wrapper {

    overflow-x:auto;

}



/* ==========================
   Images
========================== */


.blog-content img {

    width:100%;

    max-width:100%;

    height:auto;

    border-radius:10px;

    margin:

    25px 0;

}



/* Image captions */

figcaption {

    font-size:14px;

    color:var(--text-muted);

    text-align:center;

}



/* ==========================
   Content Boxes
========================== */


/* Security warning */


.warning {

    background:var(--warning-bg);

    border-left:

    5px solid var(--warning-border);

    padding:20px 25px;

    margin:

    35px 0;

    border-radius:6px;

}



/* Educational / Information box */


.info-box {

    background:var(--info-bg);

    border-left:

    5px solid var(--info-border);

    padding:22px 25px;

    margin:

    35px 0;

    border-radius:6px;

}



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


.faq-item {

    margin-bottom:35px;

}


.faq-item h3 {

    color:#111827;

}



/* ==========================
   Quotes
========================== */


blockquote {

    background:#f9fafb;

    border-left:

    5px solid #9ca3af;

    margin:

    35px 0;

    padding:

    20px 25px;

    font-style:italic;

}



/* ==========================
   Code / Technical Content
========================== */


code {

    background:#f3f4f6;

    padding:

    3px 6px;

    border-radius:4px;

}



/* ==========================
   Article Footer Space
========================== */


.blog-post {

    padding-bottom:70px;

}



/* ==========================
   Mobile
========================== */


@media(max-width:768px){


.container {

    padding:

    20px 15px;

}


.blog-title {

    font-size:32px;

}



.blog-subtitle {

    font-size:18px;

}



.blog-content {

    font-size:17px;

}



.blog-content h2 {

    font-size:26px;

}



.blog-content h3 {

    font-size:21px;

}



.blog-content ul,
.blog-content ol {

    margin-left:20px;

}



.blog-content table {

    display:block;

    overflow-x:auto;

    white-space:nowrap;

}



}