/* Global Base Styles (using Tailwind for most, but explicit for font-family) */
body {
    font-family: 'Inter', sans-serif; /* Default body font */
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif; /* Headings font */
    color: #2c3e50; /* Darker heading color, consistent with original base */
    line-height: 1.2;
}

/* General link styling across the site (except where overridden by DataTables specific rules) */
a {
    color: #2563eb; /* text-blue-600 equivalent */
    text-decoration: none; /* Remove underlines by default for larger screens */
    transition: color 0.3s ease; /* Smooth hover effect */
}

a:hover {
    color: #1e40af; /* hover:text-blue-800 equivalent */
    text-decoration: underline; /* Add underline on hover for clarity */
}

/* Make links more obvious on small screens */
@media (max-width: 767px) { /* Adjust breakpoint as needed for mobile */
    a {
        text-decoration: underline; /* Always underline links on mobile */
        font-weight: 500; /* Slightly bolder for better visibility */
    }

    /* For links within DataTables on mobile, ensure consistent styling if needed */
    .dataTables_wrapper a {
        text-decoration: underline;
        font-weight: 500;
    }
}


/* Article content specific styles */
.article-content {
    line-height: 1.7; /* Improves readability of long text */
    font-size: 1.05em; /* Slightly larger text for readability */
}

.article-content a {
    color: #2563eb; /* Ensure links within article content are blue */
}

.article-content a:hover {
    color: #1e40af; /* Ensure hover color also applies */
}

.article-content h3 {
    margin-top: 1.8em; /* Increased spacing above h3 for better separation */
    margin-bottom: 0.8em; /* Space below h3 */
    font-size: 1.7em; /* Slightly larger for sub-headings */
    color: #1a202c; /* Deeper color for prominence */
}

/* Custom style for talmudic terms */
.talmudic-term {
    font-style: italic;
    color: #8866aa; /* A distinctive color for terms */
    font-weight: 500; /* Slightly bolder */
}


/*
Custom styles to override or enhance DataTables default appearance.
Mobile responsiveness for tables is now primarily handled by DataTables Responsive extension.
*/
table.dataTable thead th {
    border-bottom: none !important;
    border-top: none !important;
    background-color: #e0f2f7; /* bg-blue-100 */
    color: #1e40af; /* text-blue-800 */
    font-weight: 600; /* font-semibold */
    padding: 0.75rem 1rem; /* py-3 px-4 */
}

table.dataTable tr td {
    border-top: none !important;
    border-bottom: 1px solid #e2e8f0 !important; /* light gray for row separation */
    padding: 0.75rem 1rem; /* py-3 px-4 */
}

/* DataTables pagination styling */
div.dt-container .dt-paging .dt-paging-button {
    box-sizing: border-box;
    display: inline-block;
    min-width: 3.5em;
    padding: .5em 1em;
    margin-left: 2px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 0.25rem; /* 4px */
    background-color: #e2e8f0; /* Light background for pagination buttons */
    color: #2d3748 !important; /* Dark text for pagination buttons */
    transition: background-color 0.3s ease;
}

div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button:hover {
    background-color: #3182ce; /* Blue for current/hover */
    color: white !important;
}

div.dt-container .dt-search input {
    padding: 0.5rem 1rem; /* px-4 py-2 */
    border: 1px solid #cbd5e0; /* border-gray-300 */
    border-radius: 0.375rem; /* rounded-md */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    outline: none; /* focus:outline-none */
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.5); /* focus:ring-2 focus:ring-blue-400 */
}

/* General link styling within tables */
.dataTables_wrapper a {
    color: #2563eb; /* text-blue-600 */
    text-decoration: none; /* Keep consistent with general link styling, will be overridden by mobile media query */
    transition: color 0.2s ease-in-out;
}
.dataTables_wrapper a:hover {
    color: #1e40af; /* hover:text-blue-800 */
    text-decoration: underline;
}