/*

  Theme Name:   Jannah

  Theme URI:    http://jannah.tielabs.com/

  Description:  Beautiful, Powerful & Flexible WordPress Theme for News, Magazine and Blog websites.

  Author:       TieLabs

  Author URI:   https://tielabs.com/

  Version:      7.6.1

  License:      license purchased

  License URI:  http://themeforest.net/licenses/regular_extended

  Tags:         two-columns, buddypress, left-sidebar, right-sidebar, custom-menu, editor-style, featured-images, full-width-template, microformats, rtl-language-support, sticky-post, threaded-comments, translation-ready

  Text Domain:  jannah

  Tested up to: 6.5

  Requires at least: 5.0

*/



/* The stylesheet is located in "assets/css/style.css". */



/* Full-width table styling inspired by WuxiaWorld */

.container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 20px;

}



.novels-table {

    width: 100%;

    border-collapse: collapse;

    font-family: Arial, sans-serif;

    background-color: #fff; /* Light mode background */

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}



.novels-table th,

.novels-table td {

    padding: 10px;

    text-align: left;

    border-bottom: 1px solid #ddd; /* Light mode border */

}



.novels-table th {

    background-color: #f5f5f5; /* Light mode header */

    font-weight: bold;

    color: #333; /* Light mode header text */

}



.novels-table .thumbnail {

    width: 60px;

}



.novel-thumb {

    width: 50px;

    height: 50px;

    object-fit: cover;

    border-radius: 4px;

}



.novels-table .category {

    width: 50%; /* Wide Category column */

    font-size: 14px;

    color: #555; /* Light mode category text */

}



.novels-table .title {

    width: 20%; /* Smaller Title column */

}



.novels-table .title a {

    text-decoration: none;

    color: #0066cc; /* Light mode link */

    font-weight: 500;

}



.novels-table .title a:hover {

    text-decoration: underline;

}



.novels-table .category a {

    text-decoration: none;

    color: #0066cc; /* Light mode link */

    font-weight: 500;

}



.novels-table .category a:hover {

    text-decoration: underline;

}



.novels-table .time-since {

    width: 20%;

    font-size: 14px;

    color: #777; /* Light mode time text */

}



/* Pagination styling */

.novels-pagination {

    margin-top: 20px;

    text-align: center;

}



.novels-pagination a,

.novels-pagination span {

    display: inline-block;

    margin: 0 5px;

    padding: 8px 12px;

    text-decoration: none;

    color: #0066cc; /* Light mode link */

    background-color: #f5f5f5; /* Light mode background */

    border: 1px solid #ddd; /* Light mode border */

    border-radius: 4px;

    font-size: 14px;

}



.novels-pagination a:hover {

    background-color: #e0e0e0; /* Light mode hover */

}



.novels-pagination .current {

    background-color: #0066cc; /* Light mode active */

    color: #fff;

    border-color: #0066cc;

}



/* Dark mode adjustments for Jannah's .dark-skin and prefers-color-scheme */

body.dark-skin .site-content .main-content .container .novels-table,

body.dark-skin .main-content .site-content .container .novels-table,

@media (prefers-color-scheme: dark) {

    .container .novels-table {

        background-color: #27292D !important; /* Jannah dark mode background */

        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;

    }



    body.dark-skin .site-content .main-content .container .novels-table th,

    body.dark-skin .main-content .site-content .container .novels-table th,

    body.dark-skin .site-content .main-content .container .novels-table td,

    body.dark-skin .main-content .site-content .container .novels-table td {

        border-bottom: 1px solid #3a3c40 !important; /* Darker border for contrast */

        color: #ccc !important; /* Default text color for dark mode */

    }



    body.dark-skin .site-content .main-content .container .novels-table th,

    body.dark-skin .main-content .site-content .container .novels-table th {

        background-color: #333537 !important; /* Slightly lighter than #27292D for header */

        color: #ddd !important; /* Dark mode header text */

    }



    body.dark-skin .site-content .main-content .container .novels-table .category,

    body.dark-skin .main-content .site-content .container .novels-table .category {

        color: #ccc !important; /* Dark mode category text */

    }



    body.dark-skin .site-content .main-content .container .novels-table .title a,

    body.dark-skin .main-content .site-content .container .novels-table .title a,

    body.dark-skin .site-content .main-content .container .novels-table .category a,

    body.dark-skin .main-content .site-content .container .novels-table .category a {

        color: #66b3ff !important; /* Dark mode link */

    }



    body.dark-skin .site-content .main-content .container .novels-table .title a:hover,

    body.dark-skin .main-content .site-content .container .novels-table .title a:hover,

    body.dark-skin .site-content .main-content .container .novels-table .category a:hover,

    body.dark-skin .main-content .site-content .container .novels-table .category a:hover {

        color: #99ccff !important; /* Dark mode link hover */

    }



    body.dark-skin .site-content .main-content .container .novels-table .time-since,

    body.dark-skin .main-content .site-content .container .novels-table .time-since {

        color: #aaa !important; /* Dark mode time text */

    }



    body.dark-skin .site-content .main-content .container .novels-pagination,

    body.dark-skin .main-content .site-content .container .novels-pagination {

        color: #ccc !important; /* Ensure pagination text is light */

    }



    body.dark-skin .site-content .main-content .container .novels-pagination a,

    body.dark-skin .main-content .site-content .container .novels-pagination a,

    body.dark-skin .site-content .main-content .container .novels-pagination span,

    body.dark-skin .main-content .site-content .container .novels-pagination span {

        color: #66b3ff !important; /* Dark mode link */

        background-color: #333537 !important; /* Matches header for consistency */

        border: 1px solid #3a3c40 !important; /* Dark mode border */

    }



    body.dark-skin .site-content .main-content .container .novels-pagination a:hover,

    body.dark-skin .main-content .site-content .container .novels-pagination a:hover {

        background-color: #3e4044 !important; /* Slightly lighter hover */

    }



    body.dark-skin .site-content .main-content .container .novels-pagination .current,

    body.dark-skin .main-content .site-content .container .novels-pagination .current {

        background-color: #66b3ff !important; /* Dark mode active */

        color: #fff !important;

        border-color: #66b3ff !important;

    }

}



/* Responsive design */

@media screen and (max-width: 768px) {

    .novels-table th,

    .novels-table td {

        padding: 8px;

        font-size: 14px;

    }



    .novel-thumb {

        width: 40px;

        height: 40px;

    }



    .novels-table .category,

    .novels-table .time-since {

        font-size: 12px;

    }



    .novels-table .category {

        width: 45%;

    }



    .novels-table .title {

        width: 25%;

    }



    .novels-pagination a,

    .novels-pagination span {

        padding: 6px 10px;

        font-size: 12px;

    }

}



@media screen and (max-width: 480px) {

    .novels-table {

        font-size: 12px;

    }



    .novels-table th,

    .novels-table td {

        padding: 6px;

    }



    .novel-thumb {

        width: 30px;

        height: 30px;

    }



    .novels-table .category {

        width: 45%;

    }



    .novels-table .title {

        width: 25%;

    }



    .novels-table .time-since {

        width: 25%;

    }



    .novels-pagination a,

    .novels-pagination span {

        padding: 5px 8px;

        font-size: 11px;

    }

}