/* =================================================================
   TRP MODERN NEWS LAYOUT - FINAL (COMPACT META EDITION)
   ================================================================= */

/* -----------------------------------------------------------------
   1. GLOBAL HEADER FIXES (Applies to Homepage & Articles)
   ----------------------------------------------------------------- */

/* Reduce the white bar height */
.site-header {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    min-height: auto !important;
    border-bottom: 1px solid #eaeaea;
    background: #fff;
}

/* Force Logo to be sleek and compact */
.custom-logo-link img,
.site-logo .custom-logo {
    max-height: 50px !important;
    width: auto;
    object-fit: contain;
    margin: 0 !important;
    padding: 0 !important;
}

/* Align the Menu and remove gaps */
.main-navigation {
    margin-top: 0 !important;
}

.main-navigation .main-menu > li > a {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Remove extra branding margins */
.site-branding {
    margin-bottom: 0 !important;
    margin-right: 20px;
}

/* -----------------------------------------------------------------
   2. SINGLE ARTICLE LAYOUT (Does NOT affect Homepage)
   ----------------------------------------------------------------- */

/* Override the top margin ONLY on single posts */
body.single .site-content {
    margin-top: 1rem !important; /* Very tight to header */
    padding-top: 0 !important;
}

/* CENTER the Title Wrapper */
body.single .entry-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 1rem auto !important; /* Reduced bottom margin */
    padding: 0 15px;
}

/* Modern Headline Style */
body.single h1.entry-title {
    font-family: 'Merriweather', 'Georgia', serif;
    font-size: 2.6rem !important;
    line-height: 1.2;
    font-weight: 800;
    color: #111;
    margin-bottom: 0.5rem !important; /* Tight spacing to meta */
}

/* --- UPDATED META SECTION (One Line, No Borders) --- */
body.single .entry-meta {
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px; /* Space between elements */
    
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.85rem;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    /* REMOVING BORDERS AND PADDING AS REQUESTED */
    border: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
    width: 100%;
}

/* Author Name Styling */
body.single .entry-meta .author a {
    color: #000;
    font-weight: 700;
    text-decoration: none;
}

/* Add a separator symbol (|) between Author and Date */
body.single .entry-meta .byline::after {
    content: "|";
    margin-left: 10px;
    color: #ccc;
    font-weight: normal;
}

/* Date Color */
body.single .entry-meta .posted-on time {
    color: #666;
}

/* -----------------------------------------------------------------
   3. CONTENT READABILITY (The "New York Times" Look)
   ----------------------------------------------------------------- */

/* Narrow Column for Text - ONLY on single articles */
body.single .entry-content {
    max-width: 740px !important;
    margin: 0 auto;
    font-family: 'Georgia', serif;
    font-size: 20px !important;
    line-height: 1.7 !important;
    color: #222;
}

/* Paragraph Spacing */
body.single .entry-content p {
    margin-bottom: 1.8rem;
}

/* Drop Cap (First Letter) */
body.single .entry-content > p:first-of-type::first-letter {
    float: left;
    font-size: 4.5rem;
    line-height: 0.8;
    font-weight: bold;
    margin-right: 12px;
    margin-top: 5px;
    color: #0056b3; /* TRP Blue */
}

/* Blockquotes */
body.single .entry-content blockquote {
    border-left: 4px solid #0056b3;
    padding-left: 20px;
    margin: 2rem 0;
    font-style: italic;
    font-size: 1.4rem;
    color: #444;
}

/* -----------------------------------------------------------------
   4. IMAGE HANDLING (Single Articles Only)
   ----------------------------------------------------------------- */

/* Constrain the Featured Image Height */
body.single .post-thumbnail {
    margin-bottom: 2rem !important;
    margin-top: 1.5rem !important; /* Small gap after Meta */
    text-align: center;
}

body.single .post-thumbnail img {
    max-height: 550px;
    width: auto;
    max-width: 100%;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

/* Images inside the article body */
body.single .entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 2rem 0;
}

/* -----------------------------------------------------------------
   5. MOBILE OPTIMIZATION
   ----------------------------------------------------------------- */

@media (max-width: 768px) {
    .custom-logo-link img { max-height: 40px !important; }
    
    body.single h1.entry-title { font-size: 1.8rem !important; }
    
    body.single .entry-content { 
        padding: 0 15px; 
        font-size: 18px !important;
    }
    
    /* Ensure meta stays on one line or wraps neatly on very small phones */
    body.single .entry-meta { font-size: 0.75rem; }
    
    body.single .post-thumbnail img { max-height: 300px; }
}