/*
Theme Name: MH Magazine lite Child Theme
Author: Varin
Description: There is a Child Theme
Version: 1.0
Template: mh-magazine-lite

This is the child theme for MH Magazine lite theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/
/* --- START: Dynamic Content Workflow CSS (REPLACE ANY EXISTING DYNAMIC CSS HERE) --- */

/* Wrapper for the entire dynamic content block */
.dynamic-content-wrapper {
    background-color: transparent; /* No background color */
    border: none; /* No border */
    padding: 0; /* No padding */
    margin-top: 30px;
    margin-bottom: 30px; /* Add some space below the dynamic content */
    border-radius: 0;
    text-align: center;
    width: 100%; 
    box-sizing: border-box; 
    max-width: 700px; /* Max width for content area on larger screens */
    margin-left: auto; /* Center the wrapper */
    margin-right: auto; /* Center the wrapper */
}

/* Container for displaying dynamic images */
.dynamic-image-display-stage {
    display: flex;
    flex-direction: column; /* Stack images vertically */
    align-items: center; /* Center images horizontally */
    gap: 15px; /* Space between images */
    margin-bottom: 20px;
    width: 100%; 
    box-sizing: border-box;
}

/* Individual dynamic images */
.dynamic-image-display-stage img {
    width: 100%; /* Make image take full width of its container */
    max-width: 100%; /* Ensure it's responsive and doesn't exceed container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Important for proper spacing and centering */
    border-radius: 0;
    image-rendering: auto; /* Use browser's default for best quality */
    /* object-fit: contain; */ /* Use 'contain' if images are getting cut off and you want them fully visible */
    /* object-fit: cover; */ /* Use 'cover' if images need to fill the space, potentially cropping parts */
}

/* Container for the next stage button image */
.dynamic-image-button {
    display: block; /* Make button container a block element */
    margin: 15px auto 10px auto; /* Center button image, with top/bottom margin */
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

/* Next stage button image itself */
.dynamic-image-button img {
    border: none; /* No border */
    border-radius: 0;
    transition: none; /* No transition on hover */
    max-width: 200px; /* Limit button image width to make it smaller */
    width: 100%; /* Responsive up to max-width */
    height: auto; /* Maintain aspect ratio */
    cursor: pointer;
    transform: none; /* No transform on hover */
    border-color: transparent;
}

/* Styling for messages (e.g., "Thank you for reading...") */
.dynamic-content-message,
.dynamic-content-error {
    font-size: 1.1em;
    color: #555;
    margin-top: 20px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    line-height: 1.5; /* For better readability of multi-line messages */
}
.dynamic-content-error {
    color: #d9534f; /* Red color for error messages */
}

/* --- END: Dynamic Content Workflow CSS --- */

/* Add any other custom CSS for your child theme below this block */