/**
 * Gutenberg Block Editor Styles
 * Ensures proper rendering of WordPress block editor content on the frontend
 */

/* ============================================
   CRITICAL: HIGH-PRIORITY ALIGNMENT FIXES
   These rules MUST come first to ensure alignment works
   ============================================ */

/* Align left - works for images, figures, and any block */
img.alignleft,
figure.alignleft,
.alignleft {
    float: left !important;
    margin-right: 2rem !important;
    margin-bottom: 1rem !important;
    margin-left: 0 !important;
}

/* Align right - works for images, figures, and any block */
img.alignright,
figure.alignright,
.alignright {
    float: right !important;
    margin-left: 2rem !important;
    margin-bottom: 1rem !important;
    margin-right: 0 !important;
}

/* Align center - works for images, figures, and any block */
img.aligncenter,
figure.aligncenter,
.aligncenter {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}

/* Ensure images inside aligned figures maintain proper sizing */
.alignleft img,
.alignright img {
    width: 100% !important;
    height: auto !important;
}

/* ============================================
   BLOCK ALIGNMENT SUPPORT
   ============================================ */

/* Default block alignment */
.wp-block {
    max-width: 100%;
}

/* Align wide blocks */
.alignwide {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Align full blocks */
.alignfull {
    max-width: 100%;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Align left */
.alignleft {
    float: left;
    margin-right: 2rem;
    margin-bottom: 1rem;
}

/* Align right */
.alignright {
    float: right;
    margin-left: 2rem;
    margin-bottom: 1rem;
}

/* Align center */
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Clear floats */
.wp-block-group::after,
.entry-content::after,
.single-post-body::after {
    content: "";
    display: table;
    clear: both;
}

/* ============================================
   COLUMNS & MEDIA-TEXT BLOCKS
   ============================================ */

/* Columns block */
.wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.wp-block-column {
    flex: 1;
    min-width: 0;
}

/* Two columns */
.wp-block-columns.has-2-columns .wp-block-column {
    flex-basis: calc(50% - 1rem);
}

/* Three columns */
.wp-block-columns.has-3-columns .wp-block-column {
    flex-basis: calc(33.333% - 1.333rem);
}

/* Four columns */
.wp-block-columns.has-4-columns .wp-block-column {
    flex-basis: calc(25% - 1.5rem);
}

/* Media & Text block - THIS IS KEY FOR SIDE-BY-SIDE LAYOUTS */
.wp-block-media-text {
    display: grid;
    grid-template-columns: 50% 1fr;
    grid-template-rows: auto;
    gap: 2rem;
    align-items: center;
    margin-bottom: 2rem;
}

.wp-block-media-text.has-media-on-the-right {
    grid-template-columns: 1fr 50%;
}

.wp-block-media-text__media {
    margin: 0;
    grid-column: 1;
    grid-row: 1;
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
    grid-column: 2;
    grid-row: 1;
}

.wp-block-media-text__content {
    padding: 0;
    grid-column: 2;
    grid-row: 1;
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
    grid-column: 1;
    grid-row: 1;
}

.wp-block-media-text__media img,
.wp-block-media-text__media video {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Stack on mobile */
@media (max-width: 768px) {
    .wp-block-media-text {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    .wp-block-media-text__media,
    .wp-block-media-text__content {
        grid-column: 1 !important;
    }

    .wp-block-media-text__media {
        grid-row: 1 !important;
    }

    .wp-block-media-text__content {
        grid-row: 2 !important;
    }

    .wp-block-columns {
        flex-direction: column;
        gap: 1rem;
    }

    .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* ============================================
   IMAGE BLOCKS
   ============================================ */

.wp-block-image {
    margin-bottom: 1.5rem;
}

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

.wp-block-image.alignleft,
.wp-block-image.alignright {
    max-width: 50%;
}

.wp-block-image.aligncenter {
    text-align: center;
}

.wp-block-image.aligncenter img {
    margin-left: auto;
    margin-right: auto;
}

.wp-block-image figcaption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #666;
    text-align: center;
    font-style: italic;
}

/* ============================================
   GALLERY BLOCKS
   ============================================ */

.wp-block-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem;
}

.wp-block-gallery .wp-block-image {
    flex: 1 1 calc(33.333% - 1rem);
    margin: 0;
}

.wp-block-gallery.columns-2 .wp-block-image {
    flex-basis: calc(50% - 0.5rem);
}

.wp-block-gallery.columns-4 .wp-block-image {
    flex-basis: calc(25% - 0.75rem);
}

/* ============================================
   COVER BLOCKS
   ============================================ */

.wp-block-cover {
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.wp-block-cover__inner-container {
    width: 100%;
    z-index: 1;
    color: #fff;
}

.wp-block-cover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

/* ============================================
   GROUP & CONTAINER BLOCKS
   ============================================ */

.wp-block-group {
    margin-bottom: 1.5rem;
}

.wp-block-group__inner-container {
    padding: 0;
}

.wp-block-group.has-background {
    padding: 2rem;
}

/* ============================================
   QUOTE BLOCKS
   ============================================ */

.wp-block-quote {
    border-left: 4px solid #73884D;
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
}

.wp-block-quote cite {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #666;
}

.wp-block-pullquote {
    border-top: 4px solid #73884D;
    border-bottom: 4px solid #73884D;
    padding: 2rem 0;
    margin: 2rem 0;
    text-align: center;
}

.wp-block-pullquote blockquote {
    margin: 0;
    font-size: 1.5rem;
    font-style: italic;
}

/* ============================================
   LIST BLOCKS
   ============================================ */

.wp-block-list {
    margin: 1rem 0;
    padding-left: 2rem;
}

.wp-block-list li {
    margin-bottom: 0.5rem;
}

/* ============================================
   BUTTON BLOCKS
   ============================================ */

.wp-block-button {
    margin-bottom: 1rem;
}

.wp-block-button__link {
    background-color: #73884D;
    color: #fff;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 4px;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.wp-block-button__link:hover {
    background-color: #5A7A1F;
}

.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* ============================================
   SEPARATOR BLOCKS
   ============================================ */

.wp-block-separator {
    border: none;
    border-top: 1px solid #ddd;
    margin: 2rem 0;
}

.wp-block-separator.is-style-wide {
    border-top-width: 2px;
}

.wp-block-separator.is-style-dots {
    border: none;
    text-align: center;
}

.wp-block-separator.is-style-dots::before {
    content: "···";
    font-size: 1.5rem;
    letter-spacing: 1rem;
    color: #666;
}

/* ============================================
   SPACER BLOCKS
   ============================================ */

.wp-block-spacer {
    clear: both;
}

/* ============================================
   EMBED BLOCKS
   ============================================ */

.wp-block-embed {
    margin-bottom: 1.5rem;
}

.wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.wp-block-embed__wrapper iframe,
.wp-block-embed__wrapper object,
.wp-block-embed__wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ============================================
   TABLE BLOCKS
   ============================================ */

.wp-block-table {
    margin-bottom: 1.5rem;
    overflow-x: auto;
}

.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
    padding: 0.75rem;
    border: 1px solid #ddd;
    text-align: left;
}

.wp-block-table th {
    background-color: #f5f5f5;
    font-weight: 600;
}

/* ============================================
   CUSTOM COLOR CLASSES
   ============================================ */

.has-primary-green-color {
    color: #73884D !important;
}

.has-primary-green-background-color {
    background-color: #73884D !important;
}

.has-dark-green-color {
    color: #5A7A1F !important;
}

.has-dark-green-background-color {
    background-color: #5A7A1F !important;
}

.has-accent-gold-color {
    color: #C4B768 !important;
}

.has-accent-gold-background-color {
    background-color: #C4B768 !important;
}

.has-text-dark-color {
    color: #333333 !important;
}

.has-text-dark-background-color {
    background-color: #333333 !important;
}

.has-bg-light-color {
    color: #F9F9F9 !important;
}

.has-bg-light-background-color {
    background-color: #F9F9F9 !important;
}

/* ============================================
   ENSURE CONTENT WRAPPER DOESN'T RESTRICT
   ============================================ */

.single-post-body {
    overflow: visible;
}

.single-post-body>* {
    max-width: 100%;
}

/* Allow full-width blocks to break out */
.single-post-body .alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ============================================
   FIX FOR WORDPRESS CORE BLOCKS
   ============================================ */

/* Ensure blocks don't have conflicting margins */
.wp-block {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* Fix for nested blocks */
.wp-block-group .wp-block,
.wp-block-column .wp-block {
    margin-bottom: 1rem;
}

/* Ensure images in blocks are responsive */
.wp-block img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   MOBILE RESPONSIVENESS
   ============================================ */

@media (max-width: 600px) {

    .alignleft,
    .alignright {
        float: none;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }

    .wp-block-image.alignleft,
    .wp-block-image.alignright {
        max-width: 100%;
    }

    .wp-block-gallery .wp-block-image {
        flex-basis: 100%;
    }
}

/* ============================================
   CRITICAL: OVERRIDE THEME STYLES FOR BLOG POSTS
   ============================================ */

/* Remove restrictive styling from blog-content wrapper on single posts */
.single-post .blog-content,
.single .blog-content,
.entry-content {
    text-align: left !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

/* CRITICAL: Override max-width restriction for blog content */
.single .blog-content,
.single-post .blog-content,
.blog-single-container .blog-content {
    max-width: 1200px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Allow blocks to have proper spacing */
.entry-content>*,
.blog-content>* {
    margin-bottom: 1.5rem;
}

/* Ensure paragraphs in blog posts are left-aligned */
.entry-content p,
.single-post-body p,
.blog-content p {
    text-align: left !important;
}

/* Ensure headings in blog posts are left-aligned */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6 {
    text-align: left !important;
}

/* Ensure lists are properly styled */
.entry-content ul,
.entry-content ol,
.blog-content ul,
.blog-content ol {
    text-align: left !important;
    padding-left: 2rem !important;
    list-style-position: outside !important;
}

.entry-content ul,
.blog-content ul {
    list-style-type: disc !important;
}

.entry-content ol,
.blog-content ol {
    list-style-type: decimal !important;
}

.entry-content li,
.blog-content li {
    margin-bottom: 0.5rem !important;
}

/* CRITICAL: Ensure images with alignment classes work properly */
.blog-content .alignleft,
.entry-content .alignleft {
    float: left !important;
    margin-right: 2rem !important;
    margin-bottom: 1rem !important;
    max-width: 50% !important;
}

.blog-content .alignright,
.entry-content .alignright {
    float: right !important;
    margin-left: 2rem !important;
    margin-bottom: 1rem !important;
    max-width: 50% !important;
}

.blog-content .aligncenter,
.entry-content .aligncenter {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* Ensure clearfix for floated elements */
.blog-content::after,
.entry-content::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* Override any border-radius on images */
.blog-content img,
.entry-content img {
    border-radius: 0 !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Ensure aligned images don't get border-radius override */
.blog-content .alignleft img,
.blog-content .alignright img,
.entry-content .alignleft img,
.entry-content .alignright img {
    border-radius: 0 !important;
}