/* ==========================================
   Global Image & Thumbnail Formatting
   ========================================== */

/* Fix for post previews and cards container */
.featured-card, 
.post-entry {
    overflow: hidden; 
}

/* Standardize ALL thumbnails and aggressively disable Lightbox/Zoom JS 
 * Targets theme classes and typical JS-injected classes (.medium-zoom-image)
 */
.featured-card img, 
.post-summary img, 
.post-thumbnail img,
.post-list img,
.recent-posts img {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important; 
    object-fit: contain !important; 
    background-color: #0b0d14 !important; /* Matches the dark theme background */
    border-radius: 8px !important;
    display: block !important;
    transition: transform 0.3s ease; 
    cursor: pointer !important; /* Overrides the JS magnifying glass */
    pointer-events: none !important; /* Kills the JS click event on the image */
}

/* Smooth zoom effect on hover for thumbnails
 * Since pointer-events is none on the img, hover is detected by the parent container
 */
.featured-card:hover img, 
.post-summary:hover img, 
.post-thumbnail:hover img {
    transform: scale(1.03); 
}

/* Universal styling for images INSIDE the post content 
 * Allows the Lightbox JS to work normally only where it matters
 */
.post-content img, 
article img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 1.5rem auto !important;
    cursor: zoom-in !important; /* Keeps the magnifying glass cursor here */
    pointer-events: auto !important; /* Re-enables the JS click event */
}

/* ==========================================
   Nuclear Override para Lupa en Miniaturas
   ========================================== */
article.post-card .post-thumbnail,
article.post-card .post-thumbnail a,
article.post-card .post-thumbnail img.thumbnail-img {
    cursor: pointer !important; /* Fuerza la manita estándar de enlace */
}

/* ==========================================
   THE FINAL CURE: Total removal of the zoom icon
   This targets the class we just added in the partial override.
   ========================================== */

/* 1. Kill the magnifying glass icon/cursor */
.no-zoom, 
img[data-nozoom],
.post-image img,
.post-thumbnail img {
    cursor: default !important;
    pointer-events: none !important;
}

/* 2. Ensure the parent link is the one handling the click, not the image */
.post-image a, 
.post-thumbnail a {
    cursor: pointer !important;
    display: block !important;
}

/* ==========================================
   TABLE STYLING: Add visible borders to tables
   ========================================== */
.post-content table, 
article table, 
table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
}

table th, 
table td {
    border: 1px solid #444 !important; /* Color de la línea (gris oscuro) */
    padding: 10px 15px;
    text-align: left;
}

table th {
    background-color: #1e1e2e; /* Color de fondo sutil para el encabezado */
}

/* ==========================================
   CUSTOM NAVIGATION BUTTONS
   ========================================== */
.post-nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 40px 0; /* Spacing above and below the buttons */
    width: 100%;
}

.btn-custom {
    background-color: #5eead4; /* Cyan/Mint color */
    color: #0f172a !important; /* Dark text for contrast */
    padding: 12px 24px;
    border-radius: 30px; /* Pill shape */
    text-decoration: none !important;
    font-weight: bold;
    transition: transform 0.2s, background-color 0.2s;
    display: inline-block;
}

/* Hover effect for better UX */
.btn-custom:hover {
    background-color: #34d399; /* Slightly darker mint on hover */
    transform: translateY(-2px); /* Moves button up slightly */
}

/* ==========================================
   STYLED IN-POST NAVIGATION CARDS (Mimic bottom boxes)
   ========================================== */
.styled-nav-container {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Spacing between buttons if they sit side-by-side */
    margin: 40px 0; /* Vertical spacing in the post content */
    width: 100%;
    flex-wrap: wrap; /* Allows stacking on mobile */
}

/* Base card styling */
.styled-nav-card {
    flex: 1 1 calc(50% - 10px); /* Tries to take 50% width on desktop */
    min-width: 250px; /* Minimum width before stacking */
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background-color: #1e1e2e; /* Dark background to match theme cards */
    border: 2px solid transparent; /* Transparent border for hover effect */
    border-radius: 8px; /* Rounded corners */
    text-decoration: none !important;
    transition: all 0.2s ease-in-out;
}

/* Specific alignments for previous (icon left) and next (icon right) */
.styled-nav-prev {
    justify-content: flex-start;
}

.styled-nav-next {
    justify-content: flex-end;
    text-align: right;
}

/* Hover effects */
.styled-nav-card:hover {
    background-color: #2e2e3e; /* Slightly lighter on hover */
    transform: translateY(-2px); /* Moves up slightly */
    border-color: #5eead4; /* Cyan border on hover */
}

/* Icon styling */
.styled-nav-icon {
    color: #5eead4; /* Cyan color for arrows */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Margin handling for icon placement */
.styled-nav-prev .styled-nav-icon {
    margin-right: 15px;
}

.styled-nav-next .styled-nav-icon {
    margin-left: 15px;
}

/* Text container styling */
.styled-nav-text {
    display: flex;
    flex-direction: column;
}

/* "Anterior" / "Siguiente" small label */
.styled-nav-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #a0a0a0; /* Muted gray text */
    margin-bottom: 2px;
    font-weight: normal;
}

/* Main post title styling inside the card */
.styled-nav-title {
    font-size: 1.1rem;
    color: #e0e0e0 !important; /* Main white/light gray text */
    font-weight: bold;
}