/* this is whitelabel default styles that give BLOCKS that wireframe style */
/* This stylesheet should only pertain to blocks, header and footer styles can go into zg-foundation

/* ===== ZG BLOCK ZEBRA (align-safe for ACF blocks) ===== */

/* 
	This just adds default zebra striping background colors for our blocks so that peole can easily see them. 
	These are the possible direct children inside the content area:
	- .wp-block                 (core wrapper, often appears with align full/wide in editor)
	- .wp-block-acf-*           (ACF wrapper on front end + sometimes editor)
	- any element whose class contains wp-block-acf- (safest wildcard)
*/

/* ===== ZG BLOCK ZEBRA (Front End) ===== */
/* Front end: your blocks are literal <section class="zg-block"> inside .entry-content */
.entry-content > section.zg-block:nth-of-type(odd)  { --zg-block-bg: #e6e6e6; }
.entry-content > section.zg-block:nth-of-type(even) { --zg-block-bg: #d6d6d6; }
.entry-content > section.zg-block { background-color: var(--zg-block-bg); }

/* ===== ZG BLOCK ZEBRA (Editor) ===== */
/* Editor: blocks sit under .wp-block-post-content with wrapper blocks */
.editor-styles-wrapper .wp-block-post-content > :is(.wp-block, [class*="wp-block-acf-"]):nth-child(odd)  section.zg-block { --zg-block-bg:#e6e6e6; }
.editor-styles-wrapper .wp-block-post-content > :is(.wp-block, [class*="wp-block-acf-"]):nth-child(even) section.zg-block { --zg-block-bg:#d6d6d6; }
.editor-styles-wrapper .wp-block-post-content section.zg-block { background-color: var(--zg-block-bg); }

/* Example: style icons for blocks in the ZG category in the inserter */
.block-editor-block-types-list__item[data-category="zg"] .block-editor-block-icon {
  background: #70BCC5;
  color: #ffffff;
  border-radius: 4px;
}

/* Override hook (later palette dropdown) */
section.zg-block.has-bg-override { background-color: var(--zg-block-bg); }

/* section should not have padding or margins Left and Right */
section { 
	width: 100%;
}

.inner-container{
  width: 90vw;
  max-width: 60rem;
  margin: 0 auto;
  padding: 50px 0;
}
.inner-nav-container{
  width: 90vw;
  max-width: 60rem;
  margin: 0 auto;
  padding: 25px 0;
}

section ul.wp-block-list  , section ol.wp-block-list  {
	padding-inline-start: 40px;
}

section ul.wp-block-list li {
		text-transform: none;
	}
		section ul {
		line-height: 1.5em;
		margin: 5px 0 25px;
		padding: 0;
	}
	section ul.wp-block-list  li {
		text-align: left;
		margin: 0 0 1rem .5rem;
		list-style: none;
		position: relative;
		padding: 0 0 0 1rem;
	}
	section ul.wp-block-list  li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 8px;
		width: 5px;
		height: 5px;
		border-radius: 100px;
		background: #000000;
	}
	section ol.wp-block-list  {
		margin: 0 0 1.5rem 0;
		padding: 0;
		list-style: none;
	}
	section ol.wp-block-list  li {
		display: block;
		overflow: hidden;
		position: relative;
		padding-left: 60px;
		min-height: 35px;
		margin: 10px 0px;
		padding-top: 4px;
		color: #000000;
	}
	section ol.wp-block-list  li::before {
		position: absolute;
		top: 6px;
		left: 15px;
		width: 28px;
		height: 35px;
		line-height: 35px;
		font-size: 23px;
		font-weight: 700;
		background: #000000;
	}

/* --- Gutenberg default stuff, if it's fighting us --- */

.wp-block-buttons{
	margin: 3rem 0;	
}