/**
 | Next Steps list
 |
 */
.next-steps-list {
	counter-set: next-steps 0;
}
.next-steps-list li:before {
	counter-increment: next-steps;
	content: counter(next-steps) ".";
	text-align: right;
}

/**
 |
 | In the block editor
 |
 |
 */
html.block-editor-iframe__html {
	
	/**
	 |
	 | Editor control overrides
	 |
	 | In the block editor, when an image is selected,
	 | 	a `div` is placed in between the `figure` and the `img`.
	 | 	This potentially breaks the max-width of the image.
	 | 	In this case however, the image needs to always be full-width.
	 |
	 | NOTE: No longer used as it is breaking other things.
	 |
	 |
	 */
	/* .tab-toggle-in-editor figure:has(> div > img) > div {
		max-width: 100% !important;
		height: auto !important;
	} */
	
	/**
	 | If a `.js_tab_content` element is not directly selected (`.is-selected`)
	 | 	or does not have one of it descendants selected (`.has-child-selected`),
	 | 	then disable pointer events on it.
	 |
	 |
	 */
	.tab-toggle-in-editor .js_tab_content:not(.is-selected):not(.has-child-selected) {
		opacity: 0;
		pointer-events: none;
	}
	.tab-toggle-in-editor .js_tab_content:not(.is-selected):not(.has-child-selected) * {
		pointer-events: inherit;
	}
	/* DEFAULT SELECTED TAB */
	.tab-toggle-in-editor:not(:has( .js_tab_trigger.is-selected )):not(:has( .js_tab_content.is-selected )):not(:has( .js_tab_content.has-child-selected )) .js_tab_content.js_tab__west-facing-villa {
		opacity: 1;
		pointer-events: auto;
	}

	
	/* TAB 1: West Facing Villa */
	.tab-toggle-in-editor:has( .js_tab_trigger.js_tab_for__west-facing-villa.is-selected ) .js_tab_content.js_tab__west-facing-villa,
		/* ^ when the tab trigger is selected */
	.tab-toggle-in-editor:has(.js_tab_content.js_tab__west-facing-villa:where(.is-selected,.has-child-selected)) .js_tab_content.js_tab__west-facing-villa {
		/* ^ when the tab contents are selected */
		opacity: 1;
		pointer-events: auto;
	}
	.tab-toggle-in-editor:has( .js_tab_trigger.js_tab_for__west-facing-villa.is-selected ) .js_tab_trigger.js_tab_for__west-facing-villa,
		/* ^ when the tab trigger is selected */
	.tab-toggle-in-editor:has(.js_tab_content.js_tab__west-facing-villa:where(.is-selected,.has-child-selected)) .js_tab_trigger.js_tab_for__west-facing-villa {
		/* ^ when the tab contents are selected */
		border-color: rgba( var( --dark ), var( --tw-border-opacity ) );
		background-color: rgba( var( --dark ), var( --tw-bg-opacity ) );
		color: rgba( var( --ochre-100 ), var( --tw-text-opacity ) );
		box-shadow: 0 0 0 2px var( --dark );
		z-index: 10;
	}

	/* TAB 2: East Facing Villa */
	.tab-toggle-in-editor:has( .js_tab_trigger.js_tab_for__east-facing-villa.is-selected ) .js_tab_content.js_tab__east-facing-villa,
		/* ^ when the tab trigger is selected */
	.tab-toggle-in-editor:has(.js_tab_content.js_tab__east-facing-villa:where(.is-selected,.has-child-selected)) .js_tab_content.js_tab__east-facing-villa {
		/* ^ when the tab contents are selected */
		opacity: 1;
		pointer-events: auto;
	}
	.tab-toggle-in-editor:has( .js_tab_trigger.js_tab_for__east-facing-villa.is-selected ) .js_tab_trigger.js_tab_for__east-facing-villa,
		/* ^ when the tab trigger is selected */
	.tab-toggle-in-editor:has(.js_tab_content.js_tab__east-facing-villa:where(.is-selected,.has-child-selected)) .js_tab_trigger.js_tab_for__east-facing-villa {
		/* ^ when the tab contents are selected */
		border-color: rgba( var( --dark ), var( --tw-border-opacity ) );
		background-color: rgba( var( --dark ), var( --tw-bg-opacity ) );
		color: rgba( var( --ochre-100 ), var( --tw-text-opacity ) );
		box-shadow: 0 0 0 2px var( --dark );
		z-index: 10;
	}
	
}