/* Autopost Frontend Styles */

/* General style for extra content blocks */
.autopost-extra {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 15px;
    border-left: 4px solid #0073aa; /* Example border color */
    background-color: #f9f9f9; /* Light background */
}

/* Specific style for overview */
.autopost-extra-overview {
    /* You could adjust width here if needed, e.g., width: 90%; margin-left: auto; margin-right: auto; */
    /* Adding slightly more padding for the 'box' feel */
    padding: 20px;
    border: 1px solid #e0e0e0; /* Lighter border */
    border-left-width: 4px; /* Keep the accent */
    border-radius: 4px;
}

.autopost-extra-overview ul {
    margin-left: 20px;
    list-style: disc;
}

/* Specific style for sources */
.autopost-extra-sources {
    font-size: 0.9em; /* Smaller font size */
    border-left-color: #cccccc; /* Different accent color */
    background-color: transparent;
    padding-left: 10px;
}

.autopost-extra-sources h3 {
    font-size: 1.1em;
    margin-bottom: 5px;
}

.autopost-extra-sources ul {
    margin: 0;
    padding-left: 15px;
    list-style: square;
}

.autopost-extra-sources li {
    margin-bottom: 5px;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Spacer style */
.autopost-spacer {
    height: 50px;
    clear: both; /* Optional: Helps in some layouts */
}

/* Q&A Section Styles */
.autopost-extra-questions-answers {
    border: none; /* Remove the default border */
    background-color: transparent; /* Remove default background */
    padding: 0; /* Remove default padding */
    border-left: none; /* Remove default left border */
}

.autopost-qa-item {
    border: 1px solid #e0e0e0; /* Light border for the box */
    border-radius: 5px; /* Rounded corners */
    margin-bottom: 15px; /* Space between items */
    overflow: hidden; /* Ensure border radius applies correctly */
}

.autopost-qa-question {
    background-color: #f5f5f5; /* Slightly different background for the question */
    padding: 15px 20px;
    margin: 0;
    cursor: pointer; /* Indicate it's clickable */
    font-size: 1.1em;
    font-weight: 600;
    transition: background-color 0.3s ease;
    position: relative; /* For pseudo-element */
}

/* Add a simple indicator (e.g., plus/minus sign) */
.autopost-qa-question::after {
    content: '+'; /* Default state: closed */
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4em;
    font-weight: normal;
    color: #777;
    transition: transform 0.3s ease;
}

/* Change indicator when active/open (requires JS to add a class, e.g., 'active') */
.autopost-qa-item.active .autopost-qa-question::after {
    content: '−'; /* Minus sign for open state */
    transform: translateY(-50%) rotate(180deg); /* Optional rotation */
}


.autopost-qa-question:hover {
    background-color: #eeeeee; /* Darker background on hover */
}

.autopost-qa-answer {
    padding: 20px;
    background-color: #ffffff; /* White background for the answer */
    border-top: 1px solid #e0e0e0; /* Separator line */
    display: none; /* Hide answer by default */
    line-height: 1.6;
}

/* Style when the answer is visible (requires JS to add a class, e.g., 'active') */
.autopost-qa-item.active .autopost-qa-answer {
    display: block;
}

.autopost-qa-answer p {
    margin: 0; /* Remove default paragraph margin if needed */
}

/* Frontend Styles for Autopost Plugin */

/* Style for Table of Contents (if enabled) */
.autopost-toc {
    /* Add styles for your ToC container */
    border: 1px solid #eee;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
}

.autopost-toc-title {
    font-weight: bold;
    margin-bottom: 10px;
}

.autopost-toc ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0; /* Remove default bottom margin */
}

.autopost-toc ul li {
    margin-bottom: 5px;
}

.autopost-toc ul li a {
    text-decoration: none;
}

/* Author Box Styles */
.autopost-author-box {
    margin-top: 30px; /* Increased top margin for separation */
    margin-bottom: 30px; /* Added bottom margin */
    padding: 25px; /* Increased padding */
    border: 1px solid #e0e0e0; /* Fine border */
    border-radius: 15px; /* Rounded corners */
    background-color: #ffffff; /* White background */
    text-align: center; /* Center align all content inside */
    clear: both; /* Ensure it clears floats */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Subtle shadow for depth */
}

.autopost-author-box .author-avatar {
    /* The container itself doesn't need margin if text-align: center is on parent */
    margin-bottom: 15px; /* Space below avatar */
}

.autopost-author-box .author-avatar img {
    border-radius: 50%; /* Make avatar circular */
    /* Centering is handled by text-align on parent */
    width: 100px; /* Explicit width */
    height: 100px; /* Explicit height */
    object-fit: cover; /* Ensure image covers the area */
    display: inline-block; /* Needed for text-align center to work properly */
}

.autopost-author-box .author-name {
    margin-bottom: 10px;
    font-size: 1.2em; /* Slightly larger name */
    font-weight: 600; /* Bolder name */
}

.autopost-author-box .author-name a {
    text-decoration: none;
    color: #333; /* Darker color */
}

.autopost-author-box .author-name a:hover {
    color: #0073aa; /* Link color on hover */
    text-decoration: none; /* Keep underline off */
}

.autopost-author-box .author-bio {
    font-size: 1em; /* Slightly larger bio text */
    color: #555;
    max-width: 600px; /* Limit width for better readability */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6; /* Improve readability */
}

/* Author Meta Avatar Styles */
.autopost-meta-avatar {
    width: 24px; /* Match the size set in PHP */
    height: 24px; /* Match the size set in PHP */
    border-radius: 50%; /* Make it circular */
    vertical-align: middle; /* Align vertically with text */
    margin-right: 5px; /* Add some space between avatar and name */
    object-fit: cover; /* Ensure image covers the area */
    display: inline-block; /* Ensure proper alignment */
}


/* CSS para el Bloque de Posts Relacionados Personalizado */
.related-posts-block-custom {
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 25px;
    background-color: #f8f9fa; /* Un fondo gris muy claro */
    border: 1px solid #e9ecef;
    border-radius: 10px; /* Bordes más redondeados */
    clear: both; /* Asegurar que no flote con otros elementos */
}

.related-posts-block-custom h3 {
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 1.6em; /* Tamaño del título del bloque */
    color: #343a40; /* Color de texto oscuro pero no negro puro */
    text-align: center;
    font-weight: 600;
}

.related-posts-container-custom {
    display: flex;
    flex-wrap: wrap;
    gap: 25px; /* Espacio entre los items */
    justify-content: center; /* Centrar los items si no ocupan todo el espacio */
}

.related-post-item-custom {
    flex: 1 1 calc(50% - 25px); /* Dos items por fila, ajustando por el gap */
    max-width: calc(50% - 12.5px); /* Máximo ancho para dos columnas */
    box-sizing: border-box;
    background-color: #ffffff; /* Fondo blanco para cada item */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Sombra sutil */
    overflow: hidden;
    transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

.related-post-item-custom:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.related-post-item-custom a {
    text-decoration: none;
    color: inherit; /* Hereda el color del texto */
    display: block;
}

.related-post-item-custom .related-post-image-custom {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background-color: #e9ecef;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.related-post-item-custom h4 {
    font-size: 1.15em;
    margin: 15px;
    color: #212529;
    font-weight: 600;
    line-height: 1.4;
    min-height: 3em;
}

@media (max-width: 768px) {
    .related-post-item-custom {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .related-post-item-custom .related-post-image-custom {
        height: 200px;
    }

    .related-posts-block-custom h3 {
        font-size: 1.4em;
    }

    .related-post-item-custom h4 {
        font-size: 1.1em;
        min-height: auto;
    }
}

@media (max-width: 480px) {
    .related-posts-block-custom {
        padding: 15px;
    }
    .related-posts-container-custom {
        gap: 15px;
    }
     .related-post-item-custom .related-post-image-custom {
        height: 160px;
    }
}

.autopost-fact-check-notice {
    background-color: #f0f0f0; /* Light grey background */
    border: 1px solid #dddddd;
    padding: 8px 15px 8px 35px; /* Adjusted padding: top/bottom, right, left (for icon) */
    margin-bottom: 20px; /* Space below the notice */
    border-radius: 4px;
    font-size: 0.875em; /* Slightly smaller font size (equiv. to 14px if base is 16px) */
    color: #222222; /* Very dark grey, not quite black */
    text-align: left;
    position: relative; /* For positioning the pseudo-element if needed, or direct background */
    line-height: 1.4; /* Improved line height for readability */
    background-image: url('../images/info-icon.svg'); /* Path relative to this CSS file */
    background-repeat: no-repeat;
    background-position: 10px center; /* Position icon: 10px from left, vertically centered */
    background-size: 16px 16px; /* Adjust size of SVG icon as needed */
}