/*
 * Compatibility layer between WordPress block markup and the original
 * CodeIgniter site's Bootstrap/custom CSS.
 *
 * Gutenberg wraps images in <figure class="wp-block-image ..."> and puts the
 * block's extra classes (w-100, cover-img, about-icon ...) on the <figure>,
 * not on the <img>. These rules make the inner <img> fill the figure so the
 * original sizing rules (which now land on the figure) still apply.
 */

.wp-block-group,
.wp-block-post-content,
.wp-block-template-part {
	margin-top: 0;
	margin-bottom: 0;
}

figure.wp-block-image {
	margin: 0;
}

.wp-block-image img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

.wp-block-image.w-100 img,
.wp-block-image.cover-img img,
.wp-block-image.about-icon img,
.wp-block-image.appointment-icon img,
.owl-carousel .wp-block-image img {
	width: 100%;
}

.wp-block-image.cover-img {
	overflow: hidden;
}

.wp-block-image.cover-img img {
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.wp-block-image.about-icon img {
	height: 100%;
	object-fit: contain;
}

/* Paragraph-like <div>s from the original markup become paragraphs. */
p.aayra-div {
	margin-bottom: 0;
}

/* Blog posts: CKEditor content converted to blocks. */
.aayra-blog-content > * + * {
	margin-top: 0;
}

.aayra-blog-content .wp-block-image {
	margin: 0.5rem 1.5rem 1rem 0;
}

.aayra-blog-content .wp-block-image.alignleft {
	float: left;
}

.aayra-blog-content .wp-block-image.alignright {
	float: right;
	margin: 0.5rem 0 1rem 1.5rem;
}

.aayra-blog-content h1,
.aayra-blog-content h2,
.aayra-blog-content h3,
.aayra-blog-content h4 {
	clear: both;
	margin-top: 1.5rem;
}

.aayra-blog-content a {
	color: #ffc328;
}

.aayra-blog-content::after {
	content: "";
	display: table;
	clear: both;
}

.aayra-blog-content .wp-block-embed {
	margin: 1rem 0;
}

/* Collection grids output YouTube iframes exactly like the original site. */
.individual-section iframe {
	width: 100%;
}

/* Image pop-up on the home page accordion. */
#imageModalPop .modal-body img {
	width: 100%;
}