/*--------------------------------------------------------------

KEY:

** -DEPRECIATE - ** = Is a candidate for Depreciation in the next version
** -CHILD - ** = Flagged to be moved to child theme
** -PLUGIN - ** = Flagged to be moved to plugin
** -EDIT - ** = Is section of code that is typically edited for each site

TABLE OF CONTENTS:

# Responsively hidden sections are greyed out in editor
# Color Scheme - Radio Buttons -DEPRECIATE?
# ACF framework overides
# Find a better fix for this
# Type
# Positioning options
# Content
# Background images

--------------------------------------------------------------*/



/* Apply this only in the WordPress block editor */
@media (min-width: 0px) and (max-width: 575.98px) {
	body .editor-styles-wrapper .d-none {
    opacity: .35;  /* Grey out the element */
        pointer-events: none;  /* Disable interaction with the element */
        display: block !important;  /* Ensure it's visible in the editor */
}
}

@media (min-width: 576px) and (max-width: 767.98px) {
    body .editor-styles-wrapper .d-sm-none {
        opacity: .35;  /* Grey out the element */
        pointer-events: none;  /* Disable interaction with the element */
        display: block !important;  /* Ensure it's visible in the editor */
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    body .editor-styles-wrapper .d-md-none {
        opacity: .35;  /* Grey out the element */
        pointer-events: none;  /* Disable interaction with the element */
        display: block !important;  /* Ensure it's visible in the editor */
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    body .editor-styles-wrapper .d-lg-none {
        opacity: .35;  /* Grey out the element */
        pointer-events: none;  /* Disable interaction with the element */
        display: block !important;  /* Ensure it's visible in the editor */
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    body .editor-styles-wrapper .d-xl-none {
        opacity: .35;  /* Grey out the element */
        pointer-events: none;  /* Disable interaction with the element */
        display: block !important;  /* Ensure it's visible in the editor */
    }
}

@media (min-width: 1400px) {
    body .editor-styles-wrapper .d-xxl-none {
        opacity: .35;  /* Grey out the element */
        pointer-events: none;  /* Disable interaction with the element */
        display: block !important;  /* Ensure it's visible in the editor */
    }
}


/*--------------------------------------------------------------
# Color Scheme - Radio Buttons -DEPRECIATE?
--------------------------------------------------------------*/

.acf-input ul.acf-radio-list li, .acf-input ul.acf-checkbox-list li {
    font-size: 12px !important;
    line-height: 30px !important;
    margin: 0 !important;
    position: relative !important;
    word-wrap: break-word !important;
    display: inline-block !important;
    width: 50% !important;
}

.acf-input ul.acf-radio-list li label {
	/*top: -6px;
	position: relative;*/
}

.acf-input input[type=checkbox], .acf-input input[type=radio] {
    border: 10px solid #fff !important;
    border-radius: 100px !important;
    padding: 12px !important;
    margin: 10px 7px 0px 0 !important;
	 top: -6px;
    position: relative;
}

ul.acf-radio-list, ul.acf-checkbox-list {
    border: 0px !important;
    border-radius: 0px !important;
}

ul.acf-radio-list:focus-within, ul.acf-checkbox-list:focus-within {
    border: 0px !important;
    border-radius: 0px !important;
}

.exterior_or_interior .acf-input input[type=checkbox], .exterior_or_interior .acf-input input[type=radio] {
    border: 1px solid #fff !important;
    border-radius: 100px !important;
    background: #fff !important;
    padding: 9px !important;
    margin: 12px 6px 0px 0 !important;
}

input[type=radio]:before {
    width: 1.65rem !important;
    height: 1.65rem !important;
    margin: -0.8rem !important;
}



/*--------------------------------------------------------------
# ACF framework overides
--------------------------------------------------------------*/

/* // Toolbar fix and Override additional markup that ACF adds to blocks. 
/* These extra divs effects/breaks Bootstraps styles. 
/* 1. Remove added wrapper divs. There is an official front end fix at acf. 2. Build custom toolbar with js/react */


.acf-innerblocks-container {
	display: contents;
}

/* Override additional markup that ACF adds to blocks. This allows g-* css to work on child (col) divs */

.row {
  margin-right: inherit !important;
  margin-left: inherit !important;
}

.row .acf-innerblocks-container > *, .row .acf-innerblocks-container .wp-block > * {
  padding-right: calc(var(--bs-gutter-x) * .35);
  padding-left: calc(var(--bs-gutter-x) * .35);
  margin-top: var(--bs-gutter-y);
}

.row .acf-innerblocks-container .acf-innerblocks-container > *, .row .acf-innerblocks-container .acf-innerblocks-container .wp-block > * {
  padding-right: 0px;
  padding-left: 0px;
  margin-top: 0px;
}



/*--------------------------------------------------------------
# Type
--------------------------------------------------------------*/

.row-proportionate, .row-static {
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	/*overflow: hidden;*/
	margin: auto;
}



/*--------------------------------------------------------------
# Positioning Options
--------------------------------------------------------------*/

.position-absolute-bh {
	position: absolute !important;
	z-index: 9999 !important;
   width: 100% !important;
}



/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/

.row-content {
	position: relative;
	z-index: 10;
	overflow: visible;
	margin: auto;
	height: 100%;
}

.outer-block-wrapper {
	height: 100%;
}

/*
.row h1 {
	color: var(--bh-color-1);
}

.content-block {
	overflow: visible;
}*/



/*--------------------------------------------------------------
# Background images
--------------------------------------------------------------*/

.row-small, .row-medium, .row-large {
	position: absolute; 
}

@media (max-width: 575px) {
.row-small {
		background-repeat: no-repeat;
		width: 100%; 
		height: 100%; 
	}
.row-large {
		/*display: none;*/
	}	
}

.row-large {
background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

@media (min-width: 576px) {
.row-large {
	}
.row-small {
		display: none;
	}	
}