/* /wp-content/themes/your-child-theme/css/esl-article-styles.css */

/* ========================================== */
/* Enhanced CSS for Display ESL Article Shortcode */
/* ========================================== */

/* --- Main Container --- */
.esl-article-display {
    margin-top: 2em;
    margin-bottom: 2.5em;
    padding: 20px 25px; /* Add some internal padding */
    background-color: #fdfdfd; /* Very light background */
    border: 1px solid #e8e8e8; /* Subtle border */
    border-radius: 5px; /* Slightly rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Subtle shadow */
    max-width: 800px; /* Control max width for readability */
    margin-left: auto;
    margin-right: auto;
    overflow: hidden; /* Crucial: Contains floated elements within this main div */
}

/* --- Article Title (H2) --- */
.esl-article-display h2.esl-article-title {
    margin-top: 0;
    margin-bottom: 0.75em; /* Space below title before banner or content */
    font-size: 1.9em; /* Make title prominent */
    font-weight: 600; /* Semi-bold */
    color: #2c3e50; /* Dark grayish blue */
    line-height: 1.3;
    text-align: center; /* Center the main title */
    padding-bottom: 0.5em;
    border-bottom: 2px solid #800080; /* Purple border */
}

/* --- Banner Image Section --- */
/* Container for the banner image */
.esl-article-display .esl-banner-image-container {
    width: 100%; /* Full width of the article container */
    height: 200px; /* Fixed height for the banner */
    overflow: hidden; /* Crucial: Hides parts of the image that exceed the container dimensions */
    margin-top: 0.75em; /* Space between title and banner */
    margin-bottom: 1.5em; /* Space between banner and content/separator */
    border-radius: 4px; /* Optional: subtle border radius */
    box-shadow: 0 1px 3px rgba(0,0,0,0.08); /* Optional: subtle shadow */
    display: block; /* Ensure block layout */
}

/* The actual banner image */
.esl-article-display .esl-banner-image-container img.esl-banner-image {
    display: block; /* Ensure image is block element */
    width: 100%; /* Make image fill the container width */
    height: 100%; /* Make image fill the container height */
    object-fit: cover; /* Scale image maintaining aspect ratio to cover the container, clipping if necessary */
    /* object-position is set inline by PHP */
    margin: 0; /* Remove default image margins */
    border-radius: 4px; /* Match container border-radius */
}

/* --- Separator Lines (HR) --- */
.esl-article-display hr.esl-article-separator {
    border: 0;
    border-top: 1px dashed #cccccc; /* Dashed separator */
    margin: 2.5em 0; /* Default spacing around separators */
}

/* Adjust separator margin slightly if it's immediately after the banner */
.esl-article-display hr.esl-article-separator.banner-present-separator {
    margin-top: 1.5em; /* Less space if immediately below banner, matching banner bottom margin */
}

/* --- Main Article Content Area --- */
/* This contains all paragraph blocks */
.esl-article-display .esl-article-content {
    /* No specific styles usually needed here unless you want padding etc. */
}

/* --- Individual Paragraph Block Container --- */
/* This div wraps the heading, potentially floated image, and text */
.esl-article-display .esl-paragraph-block {
    margin-bottom: 2.5em; /* Space between paragraph blocks */
    /* overflow: hidden; */ /* Alternative to .esl-paragraph-clear for containing floats */
}

/* --- Subheadings (H5) --- */
/* Subheadings are now directly within .esl-paragraph-block */
.esl-article-display .esl-paragraph-block h5.esl-article-subheading {
    font-size: 1.3em; /* Slightly larger subheadings */
    font-weight: 700; /* Bold */
    color: #34495e; /* Darker blue/gray */
    margin-top: 0; /* Remove top margin from first element in block */
    margin-bottom: 0.8em; /* Space below subheading */
    padding-bottom: 0.2em;
    /* Optional: border-bottom: 1px solid #ecf0f1; */ /* Lighter underline */
}

/* --- Paragraph Image Section --- */
/* Container for the small paragraph image */
/* This is now placed *after* the heading but *before* the paragraph text */
.esl-article-display .esl-paragraph-block .esl-paragraph-image-container {
    /* --- New Size --- */
    width: 300px; /* Increased width */
    height: 200px; /* Increased height */
    /* ------------- */
    overflow: hidden; /* Clip image if it doesn't fit */
    margin-bottom: 15px; /* Space below the image (adjust as needed) */
    margin-top: 5px; /* Small space above the image, below the heading */
    border-radius: 3px; /* Optional: subtle rounded corners */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Optional: subtle shadow */
    display: block; /* Ensure block layout before float */

    /* If you implement captions (see PHP suggestion), set height to auto */
    /* height: auto; */
    /* max-height: calc(200px + 2em); /* Example space for caption */
}

/* --- If using <figure> and <figcaption> for captions --- */
.esl-article-display .esl-paragraph-block .esl-paragraph-image-container figure.esl-paragraph-figure {
     margin: 0; /* Remove default figure margin */
     padding: 0;
     width: 100%; /* Ensure figure takes full width of its container */
     height: 100%; /* Ensure figure takes full height of its container (if container has fixed height) */
     /* Or if container height is auto: */
     /* height: auto; */
}

.esl-article-display .esl-paragraph-block .esl-paragraph-image-container img.esl-paragraph-image {
     display: block; /* Ensure image is block element */
     width: 100%; /* Make image fill the container/figure width */
     /* If container height is fixed, use 100%. If auto (for captions), use the desired image height. */
     height: 100%; /* Use 100% if parent container or figure has fixed height */
     /* If parent container has height: auto (for captions), set image height directly */
     /* height: 200px; */ /* Example: keep image height fixed even if container is auto */

     object-fit: cover; /* Scale image maintaining aspect ratio to cover the container */
     margin: 0; /* Remove default image margins */
     border-radius: 3px; /* Match container border-radius */
}

.esl-article-display .esl-paragraph-block .esl-paragraph-image-container figcaption.esl-paragraph-caption {
    display: block; /* Ensure caption is below image */
    font-size: 0.8em; /* Smaller text */
    text-align: center; /* Center caption text */
    color: #777; /* Muted color */
    margin-top: 5px; /* Space between image and caption */
    padding: 0 5px; /* Small side padding */
    line-height: 1.3;
}
/* --- End Caption Styling --- */


/* Modifier classes for floating paragraph images */
/* These classes are applied to the PARENT BLOCK CONTAINER (.esl-paragraph-block), */
/* NOT the image container itself. */
/* The float is applied to the image container *within* the block based on the block's class. */
.esl-article-display .esl-paragraph-block.has-image.align-left .esl-paragraph-image-container {
    float: left;
    margin-right: 20px; /* Increased space between left-aligned image and text */
}

.esl-article-display .esl-paragraph-block.has-image.align-right .esl-paragraph-image-container {
    float: right;
    margin-left: 20px; /* Increased space between right-aligned image and text */
}


/* --- Content Paragraphs (P) --- */
/* Paragraphs are now directly within .esl-paragraph-block, and will float around the image */
.esl-article-display .esl-paragraph-block p {
    font-size: 1em; /* Or match your theme's base paragraph size */
    line-height: 1.75; /* Generous line spacing for reading */
    margin-top: 0; /* Important: Remove default top margin so text sits right after the heading/image area */
    margin-bottom: 1.5em; /* Good spacing between paragraphs */
    color: #444; /* Dark gray, easy to read */
    text-align: justify; /* Justify text for a blockier look */
    text-justify: inter-word;
    hyphens: auto; /* Enable hyphenation if supported */
}

/* Add back the top margin for the first paragraph *only if* there is NO image */
/* This targets the first paragraph when the parent block does *not* have the 'has-image' class */
.esl-article-display .esl-paragraph-block:not(.has-image) p:first-of-type {
    margin-top: 0.5em; /* Example: Small space below heading if no image */
}


/* --- Clearfix element after a paragraph block --- */
/* This is essential when images are floated within the block */
.esl-article-display .esl-paragraph-clear {
    clear: both; /* This is essential to prevent the next paragraph block from floating next to the image */
    height: 0;
    visibility: hidden; /* Hide the element visually */
    margin: 0; /* Remove any default margins */
    padding: 0; /* Remove any default padding */
}


/* --- Source Link Paragraph --- */
.esl-article-display p.esl-article-source {
    margin-top: 2em; /* Space above source */
    padding-top: 1em;
    font-size: 0.85em;
    color: #7f8c8d; /* Muted gray color */
    text-align: right; /* Align source to the right */
    border-top: 1px dotted #bdc3c7; /* Dotted line above source */
}

/* --- Source Link (A inside .esl-article-source) --- */
.esl-article-display p.esl-article-source a {
    color: #2980b9; /* Clear blue link color */
    text-decoration: none; /* No underline by default */
    border-bottom: 1px dotted #2980b9; /* Dotted underline */
    transition: color 0.2s ease, border-color 0.2s ease; /* Smooth hover */
}

.esl-article-display p.esl-article-source a:hover {
    color: #1abc9c; /* Change color on hover */
    border-bottom-color: #1abc9c;
}

/* --- Error Message Paragraph --- */
p.esl-article-error {
    color: #c0392b; /* Stronger red */
    background-color: #f5e1e1;
    border: 1px solid #e74c3c;
    padding: 1em 1.5em;
    margin-bottom: 1.5em;
    border-radius: 4px;
    font-weight: normal; /* Normal weight for errors */
    text-align: center;
}

/* --- Styles for Highlighted Words (Definition Tooltip) --- */
/* This style is for key vocabulary terms that show definitions on hover. */
.esl-highlighted-word {
    background-color: #f0f0f0; /* Light grey background (moved from theme) */
    color: #007bff;          /* Blue color (from theme) */
    font-weight: bold;       /* Make the text bold (from theme) */
    padding: 0 2px;          /* (from theme) */
    border-radius: 5px;      /* (from theme) */
    border: 1px solid #d0d0d0; /* Add a subtle darker grey border (from theme) */
    cursor: help; /* Indicates hover for definition */
}

/* Style for user-clicked highlighted words */
.user-clicked-highlight {
    background-color: #f0f0f0; /* Light grey, same as .esl-highlighted-word */
    color: purple !important;   /* Purple text as requested */
    font-weight: bold;       /* Make text bold */
    border-radius: 5px;      /* Match .esl-highlighted-word */
    padding: 0 2px;          /* Match .esl-highlighted-word */
    cursor: pointer;
    /* Remove text-decoration if not desired for user highlights */
    text-decoration: none; 
}

/* --- Styles for the Definition Tooltip --- */
/* Ensure these styles are present and not overridden */
.esl-definition-tooltip {
    position: absolute; /* Position relative to the viewport */
    background-color: #333; /* Dark background */
    color: #fff; /* White text */
    padding: 5px 8px;
    border-radius: 3px;
    font-size: 0.9em;
    z-index: 9999; /* High z-index to be on top of everything */
    pointer-events: none; /* Allow clicks to pass through to elements below */
    white-space: normal; /* Allow text wrapping */
    max-width: 280px; /* Set a max-width for the tooltip */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: none; /* Hidden by default, managed by JS fade */
    /* Add arrow styles if desired */
    /* Example for arrow (requires more complex pseudo-elements) */
}


/* --- Add some responsive adjustments --- */
@media (max-width: 768px) { /* Adjusted breakpoint slightly */
    .esl-article-display {
        padding: 15px; /* Reduce padding on small screens */
    }
    .esl-article-display h3.esl-article-title {
        font-size: 1.6em; /* Slightly smaller title */
    }
     .esl-article-display .esl-banner-image-container {
         height: 180px; /* Example: reduce banner height */
     }
     .esl-article-display .esl-banner-image-container img.esl-banner-image {
         height: 180px;
     }

    .esl-article-display .esl-paragraph-block h5.esl-article-subheading {
        font-size: 1.2em; /* Slightly smaller subheadings */
    }

     /* For small screens, remove floats and stack paragraph image and text */
     .esl-article-display .esl-paragraph-block.has-image .esl-paragraph-image-container {
         float: none; /* Remove float */
         margin-left: auto; /* Center image */
         margin-right: auto; /* Center image */
         width: 80%; /* Make image take more width, centered */
         height: auto; /* Auto height to maintain aspect ratio (especially important with captions) */
         max-height: none; /* Remove any max height */
         margin-bottom: 15px; /* Add space below image */
         margin-top: 1em; /* Add space above image, below heading */
     }
      .esl-article-display .esl-paragraph-block.has-image .esl-paragraph-image-container img.esl-paragraph-image {
          width: 100%; /* Ensure image fills its new container width */
          height: auto; /* Allow image height to scale */
          object-fit: contain; /* Maybe 'contain' for small screens to avoid cropping */
      }

    .esl-article-display .esl-paragraph-block p {
        text-align: left; /* Switch to left align on small screens */
        hyphens: none;
    }
     /* Restore top margin for the first paragraph when image is stacked on mobile */
     .esl-article-display .esl-paragraph-block.has-image p:first-of-type {
         margin-top: 1em; /* Space between image and paragraph */
     }


     .esl-article-display p.esl-article-source {
        text-align: left; /* Left align source on small screens */
    }
     .esl-article-display .esl-paragraph-clear {
         display: none; /* No need for clear float if not floating */
     }

}

/* Additional small screen adjustments if needed */
@media (max-width: 480px) {
     .esl-article-display .esl-banner-image-container {
         height: 150px; /* Even smaller banner on very small screens */
     }
     .esl-article-display .esl-banner-image-container img.esl-banner-image {
         height: 150px;
     }
      .esl-article-display .esl-paragraph-block.has-image .esl-paragraph-image-container {
          width: 95%; /* Allow image to be wider */
      }
}