/*
Theme Name: TopNow News
Theme URI: https://topnow.news
Author: Your Name
Author URI: https://topnow.news
Description: A custom WordPress theme based on your frontend.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: topnow-news
Tags: news, bisp, punjab, pakistan, tailwind
*/
/* In your theme's style.css or custom CSS file */
.page-numbers {
    /* These @apply rules will only work if you have a local Tailwind build process.
       If you are only using the CDN, these will be ignored by the browser. */
    /* @apply inline-block px-3 py-1 border border-gray-300 text-gray-700 rounded-md mr-1 hover:bg-gray-100; */
    display: inline-block;
    padding: 0.25rem 0.75rem; /* px-3 py-1 */
    border: 1px solid #D1D5DB; /* border-gray-300 */
    color: #4B5563; /* text-gray-700 */
    border-radius: 0.375rem; /* rounded-md */
    margin-right: 0.25rem; /* mr-1 */
}
.page-numbers:hover {
    background-color: #F3F4F6; /* hover:bg-gray-100 */
}
.page-numbers.current {
    /* @apply bg-green-600 text-white border-green-600; */
    background-color: #059669; /* bg-green-600 */
    color: #FFFFFF; /* text-white */
    border-color: #059669; /* border-green-600 */
}
.page-numbers.dots {
    /* @apply border-none; */
    border: none;
}

/* General styling for article content (to be applied to the dynamically loaded content) */
/* These styles are crucial if your content relies on default HTML elements */
.article-content h1 {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700; /* font-bold */
    margin-bottom: 1rem;
    color: #1F2937; /* text-gray-900 */
}
.article-content h2 {
    font-size: 1.75rem; /* text-2xl */
    font-weight: 600; /* font-semibold */
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: #1F2937;
}
.article-content h3 {
    font-size: 1.5rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: #1F2937;
}
.article-content p {
    margin-bottom: 1rem;
    line-height: 1.7;
    color: #374151; /* text-gray-700 */
}
.article-content ul, .article-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    color: #374151;
}
.article-content ul li {
    list-style-type: disc;
    margin-bottom: 0.5rem;
}
.article-content ol li {
    list-style-type: decimal;
    margin-bottom: 0.5rem;
}
.article-content strong {
    font-weight: 600;
    color: #1F2937;
}
.article-content a {
    color: #10B981; /* A shade of green, adjust if needed */
    text-decoration: underline;
}
.article-content a:hover {
    text-decoration: none;
}
.article-content .list-circle {
    list-style-type: circle;
}

/* Custom variables if your design uses them, otherwise Tailwind's JIT handles this */
:root {
    --color-primary: #10B981; /* A shade of green */
    --color-primary-foreground: #FFFFFF;
    --color-card: #FFFFFF;
    --color-card-foreground: #1F2937; /* Dark gray for text */
    --color-muted-foreground: #6B7280; /* Gray for muted text */
    --color-input: #FFFFFF;
    --color-background: #FFFFFF;
    --color-border: #D1D5DB; /* Light gray border */
    --color-ring: #10B981; /* Green ring for focus */
    --color-ring-offset: #FFFFFF;
}

/* Apply custom variables to Tailwind-like classes if not already handled by Tailwind's JIT/config */
.bg-card { background-color: var(--color-card); }
.text-card-foreground { color: var(--color-card-foreground); }
.border-primary\/20 { border-color: rgba(16, 185, 129, 0.2); }
.text-primary { color: var(--color-primary); }
.hover\:bg-primary\/90:hover { background-color: rgba(16, 185, 129, 0.9); }
.text-muted-foreground { color: var(--color-muted-foreground); }
.border-input { border-color: var(--color-border); }
.bg-background { background-color: var(--color-background); }
.ring-offset-background { --tw-ring-offset-color: var(--color-ring-offset); }
.focus-visible\:ring-1:focus-visible { --tw-ring-width: 1px; }
.focus-visible\:ring-ring:focus-visible { --tw-ring-color: var(--color-ring); }
.focus-visible\:ring-offset-0:focus-visible { --tw-ring-offset-width: 0px; }
.focus-visible\:ring-2:focus-visible { --tw-ring-width: 2px; }
.focus-visible\:ring-offset-2:focus-visible { --tw-ring-offset-width: 2px; }
.bg-primary { background-color: var(--color-primary); }
.text-primary-foreground { color: var(--color-primary-foreground); }