/**
 * GL's HeaderImage Enhancer Styles
 */

/* 
 * Base class for our enhanced images.
 * - max-width: 50%; prevents very wide but short images from taking up too much horizontal space.
 * - max-height: 200px; is set via inline style on the image itself.
 */
.glhie-enhanced-image {
    max-width: 50%;
}

/* 
 * Increased selector specificity by chaining classes.
 * This makes our styles more important than generic theme styles for .wp-block-image
 */
figure.wp-block-image.glhie-enhanced-image.alignleft {
    float: left;
    margin: 5px 20px 10px 0;
}

figure.wp-block-image.glhie-enhanced-image.alignright {
    float: right;
    margin: 5px 0 10px 20px;
}

/* Ensures the image behaves correctly within the figure container */
.glhie-enhanced-image img {
    display: block;
    margin-bottom: 0;
}

/* Add a clearfix to the element following floated images to prevent layout breaks */
.entry-content > h2, 
.post-content > h2 {
    clear: both;
}