/* ==============================================================
   LARAMAG CORE ARTICLE & TYPOGRAPHY SYSTEM UPGRADES
   ============================================================== */

/* 1. Import Premium Digital Tech Font Family */
@import url('https://googleapis.com');

/* 2. Global Headline Overrides (Forces Crisp, Weighted Titles) */
h1, h2, h3, h4, h5, h6,
.post-title, .entry-title, .article-title, 
.post-detail-title, .single-post-title,
.post-block h3, .card h3 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important; /* Premium tight-spaced letter look */
    line-height: 1.3 !important;
}

/* 3. Main Single Article View Headline Focus */
.post-detail .entry-header h1,
.single-post-title h1,
.article-inner-content h1 {
    font-size: 32px !important;
    color: #f3f4f6 !important;
    margin-bottom: 16px !important;
}

/* 4. Deep Article Body Content Readability (Comfortable Long-Form Setup) */
.post-content, .entry-content, .article-content, .post-detail-content, .post-content p {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;      /* Optimal text readability scale */
    line-height: 1.75 !important;    /* Breathable text spacing for long articles */
    color: #d1d5db !important;       /* Soft white text that reduces eye fatigue */
    font-weight: 400 !important;
}

/* 5. Clean Paragraph Spacing rules within the story */
.post-content p, .entry-content p {
    margin-bottom: 24px !important; /* Perfect separation between paragraph thoughts */
}

/* 6. Fix Meta Tag Information (Author, Date, Category tags) */
.post-meta, .entry-meta, .post-date, .author-name, .article-meta-info {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #9ca3af !important;
}
/* ==============================================================
   LARAMAG PREMIUM ARTICLE PAGE DECORATION & LAYOUT
   ============================================================== */

/* 1. Article Container Breathing Room */
.post-detail, .single-post-wrap, .article-inner-content {
    background-color: #161b26 !important;
    border: 1px solid #212836 !important;
    border-radius: 16px !important;
    padding: 40px !important; /* Adds professional spacing around the content */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    margin-bottom: 30px !important;
}

@media (max-width: 768px) {
    .post-detail, .single-post-wrap {
        padding: 20px !important; /* Responsive scaling for mobile devices */
    }
}

/* 2. Modernizing Sub-headings (H2, H3) Inside the Article */
.post-content h2, .article-content h2 {
    font-size: 24px !important;
    color: #ffffff !important;
    margin-top: 40px !important;
    margin-bottom: 16px !important;
    position: relative !important;
    padding-bottom: 8px !important;
}

.post-content h3, .article-content h3 {
    font-size: 20px !important;
    color: #ffffff !important;
    margin-top: 30px !important;
    margin-bottom: 12px !important;
}

/* 3. Re-styling Outdated Text Blockquotes into Premium Tech Callouts */
.post-content blockquote, .article-content blockquote {
    background: linear-gradient(90deg, rgba(255, 65, 108, 0.05), transparent) !important;
    border-left: 4px solid #ff416c !important; /* Signature glowing neon accent border */
    padding: 20px 30px !important;
    margin: 35px 0 !important;
    border-radius: 0 12px 12px 0 !important;
    font-style: italic !important;
}

.post-content blockquote p {
    color: #ffffff !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
    margin-bottom: 0 !important;
}

/* 4. Elegant Image Shadows and Wrappers inside the post */
.post-content img, .article-content img, .post-detail .main-featured-image img {
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid #212836 !important;
    margin: 30px auto !important;
    display: block;
    transition: transform 0.3s ease !important;
}

.post-content img:hover {
    transform: scale(1.01) !important; /* Subtle tactile response when viewing images */
}

/* 5. Custom Styling for Hyperlinks Inside the Story Content */
.post-content a, .article-content a {
    color: #ff4b2b !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    border-bottom: 1px dashed rgba(255, 75, 43, 0.4) !important;
    transition: all 0.2s ease !important;
}

.post-content a:hover {
    color: #ff416c !important;
    border-bottom-color: #ff416c !important;
    background-color: rgba(255, 65, 108, 0.05) !important;
}

/* 6. Clean Unordered & Ordered Feature Lists */
.post-content ul, .post-content ol {
    margin-bottom: 24px !important;
    padding-left: 24px !important;
}

.post-content li {
    margin-bottom: 8px !important;
    color: #d1d5db !important;
    line-height: 1.7 !important;
}