/**
 * Custom FSE Typography Font Size Classes
 * These classes provide consistent font sizing across different themes
 * Options: T (Tiny), S (Small), B (Body), M (Medium), L (Large), XL (Extra Large)
 */

 /* 
 * Note: We're using !important to ensure our classes take precedence
 * over any theme-specific font size classes, without interfering with
 * the default WordPress classes when our classes aren't present.
 */


/* FRONT END FONT CONTROL */

/* Body font size */
.cm-fse-body,
.has-body-font-size.cm-fse-body,
.editor-styles-wrapper .cm-fse-body {
    font-size: inherit !important;
}

.cm-body-cqi{
    font-size: clamp(13px,2cqi,50px);
    letter-spacing: .1cqi;
    line-height: 1.3;
}

/* CM Typography Font Size Classes */

/* Tiny font size */
.cm-fse-tiny,
.cm-fse-tiny .cm-paragraph,
.has-tiny-font-size.cm-fse-tiny,
.editor-styles-wrapper .cm-fse-tiny {
    font-size: clamp(12px, .7vw, 55px) !important;
}

/* Small font size */
.cm-fse-small,
.cm-fse-small .cm-paragraph,
.has-small-font-size.cm-fse-small,
.editor-styles-wrapper .cm-fse-small {
    font-size: clamp(14px, .9vw, 85px) !important;
}

/* Medium font size */
.cm-fse-medium,
.cm-fse-medium .cm-paragraph,
.has-medium-font-size.cm-fse-medium,
.editor-styles-wrapper .cm-fse-medium {
    font-size: clamp(18px, 2vw, 105px) !important;
}

/* Large font size */
.cm-fse-large,
.cm-fse-large .cm-paragraph,
.has-large-font-size.cm-fse-large,
.editor-styles-wrapper .cm-fse-large {
    font-size: clamp(21px, 3.5vw, 110px) !important;
}

/* Extra Large font size - we are not sure if WP uses x or exra so covering both */
.cm-fse-extra-large,
.cm-fse-extra-large .cm-paragraph,
.has-x-large-font-size.cm-fse-extra-large,
.has-extra-large-font-size.cm-fse-extra-large,
.editor-styles-wrapper .cm-fse-extra-large {
    font-size: clamp(20px, 5vw, 123px) !important;
}

/* Style for blocks with cm-typography class */
.is-style-cm-typography {
    position: relative;
}


.is-style-cm-typography.cm-fse-tiny,
.is-style-cm-typography.cm-fse-small,
.is-style-cm-typography.cm-fse-medium,
.is-style-cm-typography.cm-fse-large,
.is-style-cm-typography.cm-fse-extra-large {
    /* Add any additional styling for typography blocks here */
}

.cm-circle-separator {
    display: inline-block;
    width: clamp(14px, .9vw, 85px);  /* Responsive width based on viewport width */
    height:clamp(14px, .9vw, 85px); /* Same as width to create a circle */
    background-color: #c82e2e; /* Red color */
    border-radius: 50%; /* Makes it a circle */
    margin: 0 0.5vw; /* Responsive margin on left and right */
    vertical-align: middle; /* Aligns with the middle of the text */
}
.cm-cqi-container {
    float: none !important;        
    container-type: inline-size;
    margin-left: auto;
    margin-right: auto;
}
/* !important was required to override our zeXX classes in FSE */
.block-editor-block-list__block.cm-cqi-container{
    float: none !important;
}
.cm-fw-centered-container{
    float: none !important;
    margin-left: auto;
    margin-right: auto;
    display: table;
}

/* H1 Header */
.cm-fse-h1,
.editor-styles-wrapper .cm-fse-h1 {
    font-size: clamp(18px,2.5vw, 105px) !important;
    margin: .5em 0 .5em 0;
    font-weight: 600;
}

/* H2 Header */
.cm-fse-h2,
.editor-styles-wrapper .cm-fse-h2 {
    font-size: clamp(16px, 2vw, 105px) !important;
    margin: .5em 0 .5em 0;
    font-weight: 600;
}

/* H3 Header */
.cm-fse-h3,
.editor-styles-wrapper .cm-fse-h3 {
    font-size: clamp(14px, 1.5vw, 105px) !important;
    font-weight: 600;
    margin: .5em 0 .5em 0;    
}

/* H4 Header */
.cm-fse-h4,
.editor-styles-wrapper .cm-fse-h4 {
    font-size: clamp(13px, 1.25vw, 105px) !important;
    font-weight: 600;
    margin: .5em 0 .5em 0;    
}

/* H5 Header */
.cm-fse-h5,
.editor-styles-wrapper .cm-fse-h5 {
    font-size: clamp(12px, 1vw, 105px) !important;
    font-weight: 600;
    margin: .5em 0 .5em 0;    
}

/* H6 Header */
.cm-fse-h6,
.editor-styles-wrapper .cm-fse-h6 {
    font-size: clamp(11px, .8vw, 105px) !important;
    font-weight: 600;
    margin: .5em 0 .5em 0;    
}
 

.block-editor-block-list__block h1,
.block-editor-block-list__block h2,
.block-editor-block-list__block h3,
.block-editor-block-list__block h4,
.block-editor-block-list__block h5,
.block-editor-block-list__block h6{
    box-sizing: border-box;
    border: thin dashed lightcoral;
}

.wp-site-blocks h1,
.wp-site-blocks h2,
.wp-site-blocks h3,
.wp-site-blocks h4,
.wp-site-blocks h5,
.wp-site-blocks h6{
    margin: .5em 0;
    padding: 0;
}

.wp-site-blocks .has-vivid-red-color{
    color: #ab2e2e !important;
}

.cm_debug_bar{
    display: block;

    background: red;
    color: white;
    position: fixed;
    top: 0px;
    z-index: 1000;
    opacity: 0.9;
    padding: .5em;
    letter-spacing: .2em;
}

.wp-block-image img{
    max-width: unset;
}

.pc0{
    width: 0%;
    height: auto;
}
.pc5{
    width: 5%;
    height: auto;
}
.pc10{
    width: 10%;
    height: auto;
}
.pc15{
    width: 15%;
    height: auto;
}
.pc20{
    width: 20%;
    height: auto;
}
.pc25{
    width: 25%;
    height: auto;
}   
.pc30{
    width: 30%;
    height: auto;
}
.pc35{
    width: 35%;
    height: auto;
}          
.pc40{
    width: 40%;
    height: auto;
}
.pc45{
    width: 45%;
    height: auto;   
}
.pc50{
    width: 50%;
    height: auto;
}
.pc55{
    width: 55%;
    height: auto;
}
.pc60{
    width: 60%;
    height: auto;       
}
.pc65{
    width: 65%;
    height: auto;
}
.pc70{
    width: 70%;
    height: auto;
}
.pc75{
    width: 75%;
    height: auto;       
}
.pc80{
    width: 80%;
    height: auto;
}
.pc85{
    width: 85%;
    height: auto;
}
.pc90{
    width: 90%;
    height: auto;                   
}
.pc95{
    width: 95%;
    height: auto;
}
.pc100{
    width: 100%;
    height: auto;
}
 
/* FSE environment required targeting using this structure */
.wp-block-image .components-resizable-box__container .cm-cqi-img-50-pct,.cm-cqi-img-50-pct {
    width: 50cqi;    
}
/* FSE environment required targeting using this structure */
.wp-block-image .components-resizable-box__container .cm-cqi-img-80-pct,.cm-cqi-img-80-pct {
    width: 50cqi;  
}

.cm-belly-container{
    z-index: 5;
    float: left !important;
    width: 100%;
    clear: both;
    display: inline-block;
    padding: 0;
    margin: 0;
    position: relative;    
}
.cm-footer-container{
    z-index: 5;
    float: left !important;
    width: 100%;
    clear: both;
    padding: 0;
    margin: 0;
    position: relative;    
}

/* applies a top and bottom margin of 1em to the element */
.cm-mar-vert-1em{
    margin-top: 1em;
    margin-bottom: 1em;
}
/* applies a top and bottom margin of 1em to the element */
.cm-mar-horiz-1em{
    margin-left: 1em;
    margin-right: 1em;
}

:root :where(.wp-site-blocks) > * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}