/*
Theme Name: MakingCode Theme
Theme URI: https://makingcode.dev
Author: Estuardo Andrés Esquivel Díaz
Author URI: https://makingcode.dev
Description: A calm, minimal, typography-driven editorial theme for technical publications. Optimized for long-form reading.
Version: 3.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: makingcode theme
*/

/* Custom Styles - Tailwind handles most styling */

/* WordPress Pagination Styles */
.pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.5rem;
}

.pagination li {
    margin: 0;
}

.pagination a,
.pagination span {
    display: inline-block;
}

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

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Smooth Transitions */
* {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* WordPress Image Alignment */
.alignleft {
    float: left;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

.alignright {
    float: right;
    margin-left: 1rem;
    margin-bottom: 1rem;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* WordPress Gallery */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

/* Code Blocks */
pre {
    background-color: #1e293b;
    color: #e2e8f0;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 1.5rem 0;
}

code {
    background-color: #f1f5f9;
    color: #1e293b;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
}

.dark code {
    background-color: #1e293b;
    color: #e2e8f0;
}

pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
}

/* WordPress Comments */
.comment-list {
    list-style: none;
    padding: 0;
}

.comment {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #e5e7eb;
}

.dark .comment {
    border-bottom-color: #27272a;
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}


/* Focus Styles */
*:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Featured Slider Styles */
.featured-slider {
    position: relative;
}

.slider-container {
    position: relative;
    width: 100%;
}

.slider-track {
    display: flex;
    will-change: transform;
}

.slider-slide {
    flex-shrink: 0;
    width: 100%;
}

.slider-btn {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.featured-slider:hover .slider-btn {
    opacity: 1;
}

@media (max-width: 768px) {
    .slider-btn {
        opacity: 1;
        width: 10px;
        height: 10px;
        padding: 0;
    }
    
    .slider-btn svg {
        width: 16px;
        height: 16px;
    }
    
    .slider-prev {
        left: 8px;
    }
    
    .slider-next {
        right: 8px;
    }
}

/* Prose Styles for Article Content */
.prose {
    color: inherit;
}

.prose p {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.prose h2 {
    font-size: 1.875em;
    margin-top: 2em;
    margin-bottom: 1em;
    font-weight: 700;
    line-height: 1.3333333;
}

.prose h3 {
    font-size: 1.5em;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
    font-weight: 600;
    line-height: 1.6;
}

.prose ul, .prose ol {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-left: 1.625em;
}

.prose li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.prose blockquote {
    font-weight: 500;
    font-style: italic;
    border-left-width: 0.25rem;
    border-left-color: #3b82f6;
    quotes: "\201C""\201D""\2018""\2019";
    margin-top: 1.6em;
    margin-bottom: 1.6em;
    padding-left: 1em;
}

.prose code {
    font-size: 0.875em;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
}

.prose pre {
    overflow-x: auto;
    margin-top: 1.7142857em;
    margin-bottom: 1.7142857em;
    border-radius: 0.375rem;
    padding: 0.8571429em 1.1428571em;
    font-size: 0.875em;
    line-height: 1.7142857;
}

.prose pre code {
    background-color: transparent;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    font-weight: 400;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
}

.prose img {
    margin-top: 2em;
    margin-bottom: 2em;
    border-radius: 0.5rem;
}

.prose a {
    text-decoration: underline;
    font-weight: 500;
}

.prose a:hover {
    opacity: 0.8;
}

.prose strong {
    font-weight: 600;
}

/* Force dark mode text colors */
.dark .prose {
    color: #A1A1AA !important;
}

.dark .prose p {
    color: #A1A1AA !important;
}

.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4,
.dark .prose h5,
.dark .prose h6 {
    color: #FAFAFA !important;
}

.dark .prose a {
    color: #60A5FA !important;
}

.dark .prose code {
    color: #E2E8F0 !important;
    background-color: #1A1A1D !important;
}

.dark .prose pre {
    background-color: #1A1A1D !important;
    color: #E2E8F0 !important;
}

.dark .prose blockquote {
    color: #A1A1AA !important;
    border-left-color: #3B82F6 !important;
}

.dark .prose li {
    color: #A1A1AA !important;
}

.dark .prose ul,
.dark .prose ol {
    color: #A1A1AA !important;
}

.dark .prose strong {
    color: #FAFAFA !important;
}