/**
 * Theme Name: Mosaic Momentum
 * Description: A child theme of Primer for custom modifications.
 * Author: Your Name
 * Template: primer
 * Version: 1.0.0
 * License: GPL-2.0
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: mosaicmomentum
 */

/* ==========================================================================
   Child Theme Styles
   ========================================================================== */

/* ==========================================================================
   WordPress Standard Alignment Classes
   ========================================================================== */

/* Standard WordPress alignment classes for blocks and content */
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Content Width Constraint for Normal Content
   ========================================================================== */

/* Reset page-content to full width to allow proper breakouts */
.page-content,
.entry-content,
.post-content {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Constrain normal content elements to a centered 980px width - EXCEPT on Beaver Builder pages */
body:not(.fl-builder) .page-content > *:not(.alignwide):not(.alignfull):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.wp-block-heading),
body:not(.fl-builder) .entry-content > *:not(.alignwide):not(.alignfull):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.wp-block-heading),
body:not(.fl-builder) .post-content > *:not(.alignwide):not(.alignfull):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.wp-block-heading) {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2em;
    padding-right: 2em;
}

/* COMPREHENSIVE HEADING FIX - Use exact pixel values to match other content */
/* This rule targets all possible heading selectors with maximum specificity */
body:not(.fl-builder) .page-content h1:not(.alignwide):not(.alignfull),
body:not(.fl-builder) .page-content h2:not(.alignwide):not(.alignfull),
body:not(.fl-builder) .page-content h3:not(.alignwide):not(.alignfull),
body:not(.fl-builder) .page-content h4:not(.alignwide):not(.alignfull),
body:not(.fl-builder) .page-content h5:not(.alignwide):not(.alignfull),
body:not(.fl-builder) .page-content h6:not(.alignwide):not(.alignfull),
body:not(.fl-builder) .entry-content h1:not(.alignwide):not(.alignfull),
body:not(.fl-builder) .entry-content h2:not(.alignwide):not(.alignfull),
body:not(.fl-builder) .entry-content h3:not(.alignwide):not(.alignfull),
body:not(.fl-builder) .entry-content h4:not(.alignwide):not(.alignfull),
body:not(.fl-builder) .entry-content h5:not(.alignwide):not(.alignfull),
body:not(.fl-builder) .entry-content h6:not(.alignwide):not(.alignfull),
body:not(.fl-builder) .post-content h1:not(.alignwide):not(.alignfull),
body:not(.fl-builder) .post-content h2:not(.alignwide):not(.alignfull),
body:not(.fl-builder) .post-content h3:not(.alignwide):not(.alignfull),
body:not(.fl-builder) .post-content h4:not(.alignwide):not(.alignfull),
body:not(.fl-builder) .post-content h5:not(.alignwide):not(.alignfull),
body:not(.fl-builder) .post-content h6:not(.alignwide):not(.alignfull),
body:not(.fl-builder) .wp-block-heading:not(.alignwide):not(.alignfull) {
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 36px !important; /* Exactly 36px to match other content */
    padding-right: 36px !important; /* Exactly 36px to match other content */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    width: auto !important;
}

@media (max-width: 768px) {
    body:not(.fl-builder) .page-content h1:not(.alignwide):not(.alignfull),
    body:not(.fl-builder) .page-content h2:not(.alignwide):not(.alignfull),
    body:not(.fl-builder) .page-content h3:not(.alignwide):not(.alignfull),
    body:not(.fl-builder) .page-content h4:not(.alignwide):not(.alignfull),
    body:not(.fl-builder) .page-content h5:not(.alignwide):not(.alignfull),
    body:not(.fl-builder) .page-content h6:not(.alignwide):not(.alignfull),
    body:not(.fl-builder) .entry-content h1:not(.alignwide):not(.alignfull),
    body:not(.fl-builder) .entry-content h2:not(.alignwide):not(.alignfull),
    body:not(.fl-builder) .entry-content h3:not(.alignwide):not(.alignfull),
    body:not(.fl-builder) .entry-content h4:not(.alignwide):not(.alignfull),
    body:not(.fl-builder) .entry-content h5:not(.alignwide):not(.alignfull),
    body:not(.fl-builder) .entry-content h6:not(.alignwide):not(.alignfull),
    body:not(.fl-builder) .post-content h1:not(.alignwide):not(.alignfull),
    body:not(.fl-builder) .post-content h2:not(.alignwide):not(.alignfull),
    body:not(.fl-builder) .post-content h3:not(.alignwide):not(.alignfull),
    body:not(.fl-builder) .post-content h4:not(.alignwide):not(.alignfull),
    body:not(.fl-builder) .post-content h5:not(.alignwide):not(.alignfull),
    body:not(.fl-builder) .post-content h6:not(.alignwide):not(.alignfull),
    body:not(.fl-builder) .wp-block-heading:not(.alignwide):not(.alignfull) {
        padding-left: 18px !important; /* Exactly 18px for mobile */
        padding-right: 18px !important; /* Exactly 18px for mobile */
    }
}

/* Remove padding on mobile for better use of space - EXCEPT on Beaver Builder pages */
@media (max-width: 768px) {
    body:not(.fl-builder) .page-content > *:not(.alignwide):not(.alignfull):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.wp-block-heading),
    body:not(.fl-builder) .entry-content > *:not(.alignwide):not(.alignfull):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.wp-block-heading),
    body:not(.fl-builder) .post-content > *:not(.alignwide):not(.alignfull):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.wp-block-heading) {
        padding-left: 1em;
        padding-right: 1em;
    }
}

/* Beaver Builder pages: Reset to full width with no constraints */
body.fl-builder .page-content,
body.fl-builder .entry-content,
body.fl-builder .post-content {
    max-width: none;
    margin: 0;
    padding: 0;
}

body.fl-builder .page-content > *,
body.fl-builder .entry-content > *,
body.fl-builder .post-content > * {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   Block Editor Wide and Full Width Alignment (Non-Beaver Builder pages only)
   ========================================================================== */

/* Wide width alignment for blocks - extends beyond the content area but stays within site-content */
body:not(.fl-builder) .alignwide {
    max-width: 1200px;
    clear: both;
    margin-left: auto;
    margin-right: auto;
}

/* On smaller screens, use viewport calculations to extend beyond content */
@media (max-width: 1239px) {
    body:not(.fl-builder) .alignwide,
    body:not(.fl-builder) .page-content .alignwide,
    body:not(.fl-builder) .entry-content .alignwide,
    body:not(.fl-builder) .post-content .alignwide {
        width: calc(100vw - 4em);
        margin-left: calc(-50vw + 50% + 2em);
        margin-right: calc(-50vw + 50% + 2em);
    }
}

/* On large screens, center at fixed width */
@media (min-width: 1240px) {
    body:not(.fl-builder) .alignwide,
    body:not(.fl-builder) .page-content .alignwide,
    body:not(.fl-builder) .entry-content .alignwide,
    body:not(.fl-builder) .post-content .alignwide {
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Full width alignment for blocks - breaks out of all containers to viewport edges */
body:not(.fl-builder) .alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    clear: both;
}

body:not(.fl-builder) .page-content .alignfull,
body:not(.fl-builder) .entry-content .alignfull,
body:not(.fl-builder) .post-content .alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* Ensure wide and full width work properly within content containers */
body:not(.fl-builder) .entry-content .alignwide,
body:not(.fl-builder) .entry-content .alignfull,
body:not(.fl-builder) .page-content .alignwide,
body:not(.fl-builder) .page-content .alignfull {
    clear: both;
}

/* ==========================================================================
   Responsive Wide and Full Width Adjustments (Non-Beaver Builder pages only)
   ========================================================================== */

/* For mobile screens, make alignments more conservative */
@media (max-width: 768px) {
    body:not(.fl-builder) .alignwide,
    body:not(.fl-builder) .page-content .alignwide,
    body:not(.fl-builder) .entry-content .alignwide {
        width: calc(100vw - 2em);
        max-width: calc(100vw - 2em);
        margin-left: calc(-50vw + 50% + 1em);
        margin-right: calc(-50vw + 50% + 1em);
    }
    
    body:not(.fl-builder) .alignfull,
    body:not(.fl-builder) .page-content .alignfull,
    body:not(.fl-builder) .entry-content .alignfull {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
    }

    /* Reduce margins on smaller screens */
    body:not(.fl-builder) .alignleft,
    body:not(.fl-builder) .alignright {
        margin: 0.5em;
    }
    
    body:not(.fl-builder) .alignnone {
        margin: 0.5em 1em 1em 0;
    }

    /* Make sure floated alignments don't break on mobile */
    body:not(.fl-builder) .wp-block-image.alignleft,
    body:not(.fl-builder) .wp-block-image.alignright {
        max-width: 50%;
    }
}

/* ==========================================================================
   Block Editor Specific Alignments
   ========================================================================== */

/* Image block alignments */
.wp-block-image.alignleft,
.wp-block-image.alignright {
    width: auto;
}

.wp-block-image.alignleft {
    float: left;
    margin-right: 2em;
    margin-bottom: 1em;
}

.wp-block-image.alignright {
    float: right;
    margin-left: 2em;
    margin-bottom: 1em;
}

.wp-block-image.aligncenter {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Gallery block alignments */
.wp-block-gallery.alignleft,
.wp-block-gallery.alignright {
    max-width: 420px;
    width: 100%;
}

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

/* Group block alignments */
.wp-block-group.alignwide,
.wp-block-group.alignfull {
    padding-left: 2em;
    padding-right: 2em;
}

/* Cover block alignments */
.wp-block-cover.alignwide,
.wp-block-cover.alignfull {
    width: auto;
}

/* ==========================================================================
   Text Alignment Classes
   ========================================================================== */

.has-text-align-left {
    text-align: left;
}

.has-text-align-center {
    text-align: center;
}

.has-text-align-right {
    text-align: right;
}

.has-text-align-justify {
    text-align: justify;
}

/* Add your custom styles below this line */