/*
=========================================
--- Main Site & Typography Styles ---
=========================================
*/
body { 
    font-family: 'Roboto', sans-serif; 
    background-color: #f8f9fa; 
}
.blog-title { 
    font-family: 'Merriweather', serif; 
    font-weight: 700; 
}
/* Common styles for both */
.post-title { 
    font-family: 'Merriweather', serif; 
    font-weight: 700; 
}

/* 1. Size for the Single Post Page (h1) */
h1.post-title {
    font-size: 2.0rem; /* Adjust this number (e.g. 1.8rem for smaller) */
}

/* 2. Size for the Index/Home Page (h2) */
h2.post-title {
    font-size: 1.5rem; /* Adjust this number (e.g. 1.2rem for smaller) */
}
.post-content { 
    font-family: 'Merriweather', serif; 
    font-size: 1.1rem; 
    line-height: 1.7; 
}
.navbar { 
    box-shadow: 0 2px 4px rgba(0,0,0,.05); 
}

/*
=========================================
--- Sidebar Styles ---
=========================================
*/
.sidebar-link {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: #212529;
    border-bottom: 1px solid #eee;
}
.sidebar-link:hover {
    background-color: #f1f1f1;
}
.sidebar-link .badge {
    float: right;
    background-color: #6c757d;
}

/*
=========================================
--- Post Metadata (Icons/Counts) Styles ---
=========================================
*/
.post-meta {
    font-size: 0.85rem;
    color: #6c757d;
}
.post-meta-item {
    margin-right: 15px;
}
.post-meta .fas {
    margin-right: 5px;
}
/* This is the new style for the | separator */
.post-meta-divider {
    margin-left: 10px;
    margin-right: 10px;
    color: #aeaeae;
}

/*
=========================================
--- Navigation Bar Styles ---
=========================================
*/
.top-navbar {
    background-color: #f8f9fa; 
}
.main-navbar {
    background-color: #D96D00; /* Burnt orange */
    font-family: 'Merriweather', serif;
}
.main-navbar .nav-link {
    color: #ffffff;
    font-weight: 500;
}
.main-navbar .nav-link:hover,
.main-navbar .nav-link:focus {
    color: #f0f0f0;
    background-color: rgba(0,0,0,0.1);
}
.main-navbar .dropdown-menu {
    background-color: #D96D00;
    border: none;
}
.main-navbar .dropdown-item {
    color: #ffffff;
}
.main-navbar .dropdown-item:hover {
    background-color: rgba(0,0,0,0.1);
    color: #f0f0f0;
}

/*
=========================================
--- Elegant Post Card Styles ---
=========================================
*/

/* This targets the blog cards on the index page */
.card.mb-4 {
    /* NEW GRADIENT: 
       A crisp white at the top fading into a very pale, warm grey/orange at the bottom.
       This gives it a "premium paper" look.
    */
    background: linear-gradient(145deg, #ffffff 0%, #fdfbf7 100%);
    
    /* A very light border to define the shape clearly */
    border: 1px solid #f0f0f0;
    
    /* A slightly stronger shadow for depth */
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    
    /* Smooth transition */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Ensure it sits on top */
    position: relative;
    overflow: hidden; /* Keeps everything inside the rounded corners */
}

/* OPTIONAL: Add a tiny orange accent line on the left on hover */
.card.mb-4:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    border-color: #e0e0e0;
}

/* --- New Title Link Styles --- */
.post-title a {
    /* Make the link look like a normal title */
    text-decoration: none;
    color: #212529; /* Default text color */
    
    /* Add a smooth transition for the hover */
    transition: color 0.2s ease;
}

/* On hover, make the title link turn blue */
.post-title a:hover {
    color: #0d6efd; /* Bootstrap primary blue */
}

/*
=========================================
--- Disclaimer Box Styles ---
=========================================
*/
.disclaimer-box {
    background-color: #fffaf0; /* Light yellow/orange */
    border-left: 4px solid #D96D00; /* Main orange color */
    font-size: 0.9rem;
    color: #555;
}
.disclaimer-box strong {
    display: block;
    margin-bottom: 5px;
    color: #333;
}
.disclaimer-box small {
    line-height: 1.5;
}

/*
=========================================
--- Featured Post Styles ---
=========================================
*/

.featured-title {
    font-family: 'Merriweather', serif;
    font-weight: 700;
    color: #D96D00; /* Use your main orange color */
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.5rem;
}

.featured-post {
    /* A subtle gold/yellow background to make it different */
    background-image: linear-gradient(to top, #fffaf0 0%, #ffffff 100%);
    
    /* A border to make it pop */
    border: 1px solid #fff0c7;
    
    /* Give it a slightly stronger shadow */
    box-shadow: 0 5px 15px rgba(0,0,0,0.07);
}

.featured-post:hover {
    /* Make the hover effect a bit stronger */
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.12);
}

/*
=========================================
--- Pagination Styles ---
=========================================
*/
.pagination-nav .page-item.active .page-link {
    background-color: #D96D00; /* Your main orange */
    border-color: #D96D00;
}
.pagination-nav .page-link {
    color: #D96D00;
}
.pagination-nav .page-link:hover {
    color: #a45300;
}

/*
=========================================
--- Social Share Button Styles ---
=========================================
*/
.social-share-box h5 {
    font-family: 'Merriweather', serif;
    font-weight: 700;
}
.social-share-btn {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 5px;
    color: #fff;
    text-decoration: none;
    margin-right: 8px;
    margin-bottom: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}
.social-share-btn .fab {
    margin-right: 8px;
}
.social-share-btn:hover {
    color: #fff;
    opacity: 0.85;
}

.btn-linkedin { background-color: #0077b5; }
.btn-twitter { background-color: #1da1f2; }
.btn-facebook { background-color: #1877f2; }
.btn-whatsapp { background-color: #25d366; }

/*
=========================================
--- Comment Avatar Styles ---
=========================================
*/
.comment-avatar-placeholder {
    width: 80px;  /* Increased from 60px */
    height: 80px; /* Increased from 60px */
    background-color: #D96D00;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px; /* Increased from 24px for a bolder look */
    font-weight: 700;
    text-transform: uppercase;
    /* Stronger shadow to make it pop */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); 
    border: 3px solid #fff; /* Optional: Adds a nice white ring effect */
}

.opp-title a:hover {
    text-decoration: underline !important;
    color: #b35900 !important; /* Slightly darker orange */
}