/*
Theme Name:    GeneratePress Child
Theme URI:     https://generatepress.com
Description:   Custom style for recipe blog
Author:        Peter Alric
Template:      generatepress
Version:       1.1
*/
/* ========== THEME CONFIGURATION ========== */
:root {
    --primary: #FF6F00; /* Brand color: Orange */
    --primary-dark: #C53A5F; /* Darker shade for hover effects */
    --text: #111; /* Text color */
    --text-light: #555; /* Light text color */
    --bg: #fff; /* Background color */
    --bg-accent: #fbe6ed; /* Accent background */
    --border-radius: 6px; /* Border radius for rounded corners */
}

/* ========== GLOBAL CONTAINER & PAGE ELEMENTS ========== */
.page {
    position: relative;
    z-index: 1;
}

/* ========== MAIN TITLE (H1) ========== */
.entry-title, 
h1.entry-title,
h1 {
    background-color: var(--bg);
    color: #000;
    text-align: center;
    font-family: "Playfair Display", serif;
    font-size: 2.2em;
    font-weight: 700;
    border-radius: var(--border-radius);
    padding: 12px 20px;
    margin: 24px 0 16px;
}

/* ========== HEADINGS (H2–H4) ========== */
.entry-content h2,
.entry-content h3,
.entry-content h4,
h2, h3, h4 {
    background-color: var(--bg);
    color: #000;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    padding: 6px 10px;
    border-left: 4px solid var(--primary);
    margin: 20px 0 12px;
    border-radius: 4px;
    line-height: 1.4;
}

/* Font size adjustments */
.entry-content h2, h2 { font-size: 1.5em; }
.entry-content h3, h3 { font-size: 1.3em; }
.entry-content h4, h4 { font-size: 1.1em; }

/* ========== HEADINGS (H5) ========== */
.entry-content h5,
h5 {
    font-weight: bold;
    color: #000;
    margin: 20px 0 12px;
    line-height: 1.4;
}

/* ========== PARAGRAPHS ========== */
.entry-content,
body {
    font-family: "Georgia", serif;
    font-size: 19px;
    line-height: 1.7;
    color: var(--text);
    padding: 0 10px;
}

/* ========== LIST STYLES ========== */
.entry-content ul,
.entry-content ol,
ul, ol {
    padding-left: 1em;
    margin-left: 0;
    list-style-position: inside;
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 1.2em;
    color: #222;
}

/* Enhanced List Item Styling */
.entry-content li,
li {
    margin-bottom: 0.5em;
}

/* Custom Bullet Styles for Lists */
.entry-content ul {
    list-style-type: disc;
}
.entry-content ol {
    list-style-type: decimal;
}
/* ========== LIST STYLES (Fundamental Setup) ========== */

/* * এই ব্লকটি ul ও ol এর জন্য বেসিক ফন্ট, মার্জিন, লাইনের উচ্চতা সেট করে।
 * আমরা ul এবং ol এর জন্য list-style: none দিচ্ছি না, বরং li এর মধ্যে দিচ্ছি।
 */
.entry-content ul,
.entry-content ol,
ul, ol {
    list-style-position: outside; 
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 1.2em;
    color: #222;
    padding-left: 0;
    margin-left: 0;
}

/* Enhanced List Item Styling: li এর বেসিক সেটিং */
.entry-content li,
li {
    margin-bottom: 0.5em;
    position: relative; /* কাস্টম বুলেট/নাম্বারিং পজিশনিং এর জন্য */
}


/* ========================================================= */
/* ----------- CUSTOM LARGE BULLET AND NUMBERING FIX ------- */
/* ========================================================= */

/* * A. কাস্টম বুলেটের জন্য ul আইটেম (ol/listicle/compact-list ছাড়া) 
 */
.entry-content ul:not(.table-compact-list):not(.listicle) li,
ul:not(.table-compact-list):not(.listicle) li {
    list-style: none; /* ডিফল্ট বুলেট হাইড করুন */
    padding-left: 20px; /* বুলেটের জন্য জায়গা তৈরি */
}

/* কাস্টম বুলেটের স্টাইল */
.entry-content ul:not(.table-compact-list):not(.listicle) li:before,
ul:not(.table-compact-list):not(.listicle) li:before {
    content: "•"; /* বড় বৃত্ত */
    color: #000;
    font-size: 1.3em; /* বুলেটের আকার */
    position: absolute;
    left: 0;
    top: 0;
    line-height: 1.6; /* মূল লেখার line-height এর সাথে মেলাতে */
    font-weight: bold;
}


/*
 * B. কাস্টম নাম্বারের জন্য ol আইটেম (Number List)
 */
.entry-content ol,
ol {
    /* ol এর জন্য কাউন্টার রিসেট করা হচ্ছে */
    counter-reset: list-counter;
}

.entry-content ol li,
ol li {
    list-style: none; /* ডিফল্ট নাম্বারিং লুকানো হলো */
    counter-increment: list-counter; /* কাউন্টার শুরু করা হলো */
    padding-left: 30px; /* <--- নাম্বারের জন্য পর্যাপ্ত জায়গা */
    margin-left: 10px;
}

/* কাস্টম নাম্বারের স্টাইল */
.entry-content ol li:before,
ol li:before {
    content: counter(list-counter) "."; /* নাম্বার এবং ডট দেখানো */
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 900;
    font-size: 1em; /* <--- ফিক্স: নাম্বারের আকার বড় করা হলো */
    color:  color: #000; /* থিমের মূল রঙ ব্যবহার করে হাইলাইট করা হলো */
    line-height: 1.6;
}

/* ========== STRONG & EMPHASIS ========== */
.entry-content strong,
strong {
    color: #000;
    font-weight: bold;
}

.entry-content em,
em {
    color: var(--text-light);
    font-style: italic;
}

/* --- FIX: Main Navigation Bullets --- */
.main-navigation ul li {
    list-style: none !important;
    padding-left: 0 !important; /* কাস্টম বুলেটের জন্য তৈরি করা প্যাডিং রিমুভ করুন */
}

.main-navigation ul li:before {
    content: none !important; /* কাস্টম বুলেট পুরোপুরি হাইড করুন */
}

/* --- FIX: Sidebar Widget Bullets --- */
.widget ul li,
.sidebar-content ul li {
    list-style: none !important;
    padding-left: 0 !important; /* কাস্টম বুলেটের জন্য তৈরি করা প্যাডিং রিমুভ করুন */
}

.widget ul li:before,
.sidebar-content ul li:before {
    content: none !important; /* কাস্টম বুলেট পুরোপুরি হাইড করুন */
}

/* ========== BLOCKQUOTE ========== */
.entry-content blockquote,
blockquote {
    background-color: var(--bg-accent);
    border-left: 4px solid var(--primary);
    padding: 12px 16px;
    margin: 18px 0;
    font-style: italic;
    color: #333;
    font-size: 0.95em;
}

/* ========== TOC SUPPORT ========== */
.toc-container {
    background: var(--bg);
    border: 1px solid var(--primary);
    padding: 16px;
    border-radius: var(--border-radius);
    margin: 24px 0;
}

.toc-container ul {
    list-style-type: none;
    padding-left: 0;
}

.toc-container li {
    margin-bottom: 6px;
}

.toc-container a {
    color: var(--primary);
    text-decoration: none;
}

.toc-container a:hover {
    text-decoration: underline;
}

/* ========== CALLOUT BOX ========== */
.callout-box {
    background: var(--bg-accent);
    border-left: 4px solid var(--primary);
    padding: 16px;
    margin: 20px 0;
    border-radius: 4px;
    font-family: "Poppins", sans-serif;
    color: #333;
}

/* ========== NAVIGATION MENU ========== */
.main-navigation ul li a {
    font-family: "Playfair Display", serif;
    font-size: 18px;
    font-weight: 600;
    color: #000;
    padding: 8px 16px;
    display: inline-block;
    position: relative;
    transition: all 0.3s ease;
    text-decoration: none;
}

.main-navigation ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 0%;
    height: 2px;
    background-color: var(--primary);
    transition: width 0.3s ease;
}

.main-navigation ul li a:hover::after {
    width: 100%;
}

/* ========================================================= */
/* ---------------- RATING BAR STYLES (Existing) ----------- */
/* ========================================================= */
:root {
    --brand-color-ratings: #f1511b; 
    --text-color-ratings: #000;
    --light-bg-ratings: #f7f7f7;
}

.rating-container {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 15px 30px;
    padding: 15px 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.rating-heading {
    grid-column: 1 / -1; 
    text-align: center;
}
.rating-heading h4 {
    background: transparent !important; border-left: none !important; 
    padding: 0 !important; margin: 0 0 10px 0 !important; 
    font-size: 1.3em !important; color: var(--text-color-ratings) !important; font-weight: 700;
}

.rating-item {
    display: flex;
    flex-direction: column; 
    align-items: flex-start;
    margin-bottom: 0;
}

.rating-item .rating-label {
    font-weight: 600; font-size: 0.9em; margin-bottom: 4px;
}

.rating-bar-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    height: 14px;
    background-color: var(--light-bg-ratings);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.rating-bar {
    height: 100%;
    background-color: var(--brand-color-ratings); 
    border-radius: 2px;
    position: absolute;
    left: 0;
    top: 0;
}

.rating-value {
    position: absolute;
    right: 5px;
    z-index: 10;
    font-weight: 700;
    font-size: 0.8em;
    color: var(--text-color-ratings);
    background-color: transparent; 
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.7);
    padding: 0;
    box-shadow: none;
}

/* ========================================================= */
/* ----------- MOBILE RESPONSIVE & MODAL STYLES ------------ */
/* ========================================================= */

/* 0. FIX: Hide the Compact List on Desktop/Larger Screens by Default */
.responsive-table-wrap {
    display: none; 
}


@media (max-width: 768px) {
    /* Mobile Global Adjustments */
    body,
    .entry-content {
        font-size: 15px;
        line-height: 2;
        padding: 0 0px; /* <--- ফিক্স: পেজের কন্টেন্ট দুই পাশে ৫ পিক্সেল প্যাডিং */
    }

    .entry-title,
    h1.entry-title,
    h1 {
        font-size: 1.4em;
        padding: 10px 14px;
    }

    .entry-content h2, h2 { font-size: 1.3em; }
    .entry-content h3, h3 { font-size: 1.1em; }
    .entry-content h4, h4 { font-size: 1em; }
    .entry-content h5, h5 { font-size: 1em; }
    .main-navigation ul li a { font-size: 16px; }
    
    /* Adjust Listicles for Smaller Screens */
    ul.listicle,
    ol.listicle {
        margin: 16px auto;
        max-width: 95%; /* 90% থেকে 95% করে দেওয়া হলো */
    }

    /* 1. Hide the original <table> element on mobile screens */
    .entry-content table:not(.rating-container table) {
        display: none !important;
    }
    
    
    /* 2. Show the custom list on mobile (Overrides the desktop rule above) */
    .responsive-table-wrap {
        display: block; 
        margin: 20px 0;
        padding: 0 0px; /* <--- ফিক্স: রেসপনসিভ টেবিল র‍্যাপের প্যাডিংও ৫ পিক্সেল */
    }
    
    /* Compact List Styling */
    .table-compact-list {
        list-style: none;
        padding: 0;
        margin: 0;
        border: 1px solid #ddd;
        border-radius: 6px;
        overflow: hidden;
    }

    .table-list-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 15px;
        background-color: #fff;
        border-bottom: 1px solid #eee;
        cursor: pointer;
        font-weight: 600;
        transition: background-color 0.2s;
    }

    .table-list-item:hover {
        background-color: #f5f5f5;
    }

    .table-list-item:last-child {
        border-bottom: none;
    }

    .table-list-icon {
        color: var(--primary);
        font-size: 1.2em;
        font-weight: bold;
    }
    
    /* 3. Modal (Popup) Styling */
    .table-modal-overlay {
        display: none; /* Hidden by default */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 99999;
        justify-content: center;
        align-items: center;
        overflow-y: auto; 
        padding: 20px;
    }

    .table-modal-content {
        background-color: #fff;
        padding: 25px 20px;
        border-radius: 8px;
        width: 100%;
        max-width: 400px; 
        position: relative;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        transform: scale(0.95);
        animation: scaleIn 0.3s forwards;
    }
    
    /* Modal Header and Close Button */
    .modal-title {
        font-size: 1.2em;
        font-weight: 700;
        color: var(--primary-dark);
        margin-top: 0;
        margin-bottom: 15px;
        padding-bottom: 5px;
        border-bottom: 1px solid #eee;
    }

    .modal-close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        background: none;
        border: none;
        font-size: 1.5em;
        cursor: pointer;
        color: #555;
    }
    
    /* Detail Label and Value Styling */
    .modal-detail-item {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px dashed #eee;
    }

    .modal-detail-label {
        font-weight: 600;
        color: var(--text-light);
        flex-basis: 40%;
        text-align: left;
    }

    .modal-detail-value {
        font-weight: 500;
        flex-basis: 55%;
        text-align: right;
    }
}

/* Rating container specific mobile adjustment (if needed) */
@media (max-width: 600px) {
    .rating-container { grid-template-columns: 1fr; gap: 15px 0; }
}

/* Simple scale-in animation */
@keyframes scaleIn {
    to {
        transform: scale(1);
    }
}

/* আপনার বিদ্যমান CSS এর শেষে যোগ করুন */
.entry-content table.custom-blog-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* সামান্য শ্যাডো */
    border-radius: 8px; /* কোণ গোলাকার করুন */
    overflow: hidden; /* রাউন্ডেড কর্নার রাখতে */
}

.entry-content table.custom-blog-table th,
.entry-content table.custom-blog-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0; /* সারির মধ্যে বর্ডার */
}

.entry-content table.custom-blog-table th {
    background-color: var(--primary); /* আপনার ডিফাইন করা প্রাইমারি রং #FF6F00 */
    color: white; /* হেডার টেক্সট হোয়াইট */
    font-weight: 600;
}

.entry-content table.custom-blog-table tr:nth-child(even) {
    background-color: #f9f9f9; /* জোড় সারির ব্যাকগ্রাউন্ড */
}

.entry-content table.custom-blog-table tr:hover {
    background-color: var(--bg-accent); /* হোভারে সারি হাইলাইট */
}

.entry-content table.custom-blog-table td {
    color: var(--text-light); /* টেক্সট রং */
}

@media (max-width: 768px) {
    /* মোবাইলে টেবিল রেস্পন্সিভ করুন */
    .entry-content table.custom-blog-table,
    .entry-content table.custom-blog-table thead,
    .entry-content table.custom-blog-table tbody,
    .entry-content table.custom-blog-table th,
    .entry-content table.custom-blog-table td,
    .entry-content table.custom-blog-table tr {
        display: block; /* সবকিছু ব্লক হিসেবে দেখাবে */
    }

    .entry-content table.custom-blog-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .entry-content table.custom-blog-table tr {
        border: 1px solid #ccc;
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 6px;
        background-color: white;
    }

    .entry-content table.custom-blog-table td {
        border: none;
        position: relative;
        padding-left: 50% !important; /* মোবাইলে লেবেল স্পেস দেয়ার জন্য */
        text-align: right;
    }

    .entry-content table.custom-blog-table td:before {
        content: attr(data-label) ": "; /* ডেটা লেবেল থেকে হেডার নাম নেয় */
        position: absolute;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
        color: var(--primary);
    }
}

/* ========== TABLE DESIGN 1: SOLID HEADER WITH HOVER REMOVED ========== */
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    border: 2px solid #f26725; /* চারপাশের বর্ডার কমলা */
    border-radius: 8px;
}

.entry-content table th {
    background-color: #f1511b; /* হালকা কমলা (নতুন টোন) */
    color: white;
    text-align: center;
    font-weight: bold;
    padding: 14px 20px;
    border-right: 2px solid #f26725; /* কলামের মধ্যে কমলা বর্ডার */
}

.entry-content table td {
    padding: 12px 18px;
    text-align: center;
    border-right: 2px solid #f26725; /* কলামের মধ্যে কমলা বর্ডার */
}

/* First row color and bold text */
.entry-content table tr:first-child td {
    background-color: #f26725; /* হালকা কমলা */
    color: white; /* সাদা টেক্সট */
    font-weight: bold; /* বোল্ড টেক্সট */
}

/* Bold first column */
.entry-content table td:first-child {
    font-weight: bold; /* প্রথম কলামের জন্য বোল্ড */
}

.entry-content table tr:nth-child(even) {
    background-color: #fff; /* সাদা রো */
}

.entry-content table tr:nth-child(odd) {
    background-color: #f9f9f9; /* হালকা গ্রে */
}

/* Orange line under each row */
.entry-content table tr {
    border-bottom: 2px solid #f26725; /* কমলা লাইন প্রতিটি রো এর নিচে */
}

/* Fix the last border on the right side */
.entry-content table td:last-child {
    border-right: 2px solid #f26725; /* সঠিকভাবে শেষের কলামের কমলা বর্ডার */
}