/*
Theme Name: Medium Tailwind Clone
Author: Your Name
Version: 1.3
*/

/* Custom Line Clamp */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

/* Ensure images don't break layout */
img {
    max-width: 100%;
    height: auto;
}


/* Custom Pagination Styling */
.pagination {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 14px;
}

.pagination .nav-links {
    display: flex;
    gap: 15px;
    align-items: center;
}

.pagination a, .pagination span {
    padding: 8px 16px;
    border-radius: 99px;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: all 0.2s ease;
}

.pagination a:hover {
    color: #000;
    background: #f2f2f2;
}

.pagination .current {
    color: #000;
    font-weight: 700;
}


/* Handle WordPress generated content spacing */
.serif-text p {
    margin-bottom: 1.75em;
}
.serif-text h2, .serif-text h3 {
    margin-top: 2em;
    margin-bottom: 1em;
    font-family: var(--font-sans); /* Headers stay sans-serif for contrast */
    color: #000;
}
.dark .serif-text h2, .dark .serif-text h3 {
    color: #fff;
}

/* Typography & Layout for Articles */
.entry-content {
    font-size: 1.125rem; /* 18px */
    line-height: 1.8;
    letter-spacing: -0.003em;
}

/* Headers - Clean & Bold */
.entry-content h1, .entry-content h2, .entry-content h3 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* Paragraph Spacing */
.entry-content p {
    margin-bottom: 1.5rem;
}

/* Blockquotes - The Medium Look */
.entry-content blockquote {
    border-left: 3px solid #1a8917;
    padding-left: 1.5rem;
    margin-left: 0;
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-style: italic;
    font-size: 1.25rem;
    color: #4b5563; /* Gray-600 */
}
.dark .entry-content blockquote {
    color: #9ca3af; /* Gray-400 */
}

/* Code Blocks - Clean Mono */
.entry-content pre {
    background: #f9fafb; /* Gray-50 */
    padding: 1.25rem;
    border-radius: 0.75rem;
    overflow-x: auto;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.875rem;
    margin: 2rem 0;
    border: 1px solid #f3f4f6;
}
.dark .entry-content pre {
    background: #1a1a1a;
    border-color: #262626;
    color: #e5e7eb;
}

/* Inline Code */
.entry-content code:not(pre code) {
    background: #f3f4f6;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.9em;
    font-family: monospace;
}
.dark .entry-content code:not(pre code) {
    background: #262626;
}

/* Images & Captions */
.entry-content img {
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}
.entry-content figcaption {
    text-align: center;
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 2rem;
}

/* Tables - Minimalist & Responsive */
.entry-content table {
    width: 100%;
    margin-bottom: 2rem;
    border-collapse: collapse;
    font-size: 0.95rem;
    border: 1px solid #f3f4f6; /* Gray-100 */
}

.dark .entry-content table {
    border-color: #262626;
}

.entry-content th {
    background-color: #f9fafb;
    font-weight: 700;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #f3f4f6;
}

.dark .entry-content th {
    background-color: #1a1a1a;
    border-bottom-color: #262626;
    color: #ffffff;
}

.entry-content td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
}

.dark .entry-content td {
    border-bottom-color: #262626;
}

.entry-content tr:hover {
    background-color: #fcfcfc;
}

.dark .entry-content tr:hover {
    background-color: #161616;
}

/* Lists - Proper Indentation & Spacing */
.entry-content ul, .entry-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.entry-content li {
    margin-bottom: 0.5rem;
}

.entry-content ul {
    list-style-type: disc;
}

.entry-content ol {
    list-style-type: decimal;
}

/* Horizontal Rule (Divider) */
.entry-content hr {
    margin: 3rem 0;
    border: 0;
    border-top: 1px solid #f3f4f6;
    text-align: center;
}

.entry-content hr::after {
    content: "···";
    display: inline-block;
    position: relative;
    top: -0.75rem;
    padding: 0 0.5rem;
    background: #fff;
    color: #9ca3af;
    font-size: 1.5rem;
    letter-spacing: 0.5rem;
}

.dark .entry-content hr {
    border-top-color: #262626;
}

.dark .entry-content hr::after {
    background: #121212; /* Match your dark bg */
}

/* Task Lists (Checkboxes) */
.entry-content ul li input[type="checkbox"] {
    margin-right: 0.5rem;
    accent-color: #1a8917;
}

/* Keyboard Inputs (<kbd>) */
.entry-content kbd {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.8rem;
    font-family: sans-serif;
    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

.dark .entry-content kbd {
    background: #262626;
    border-color: #404040;
    color: #fff;
}