/* ================== */
/* Paragraph settings */
/* ================== */
p 					{ padding: 0 1em 0 1em; } 
p.parazero  		{ padding-left: 0em; }
p.parastep			{ padding-left: 3.625em; }  /* this should be the same value as the text-indent in the step-number class below */
p.stepheading		{ 
	display: inline-block;
	width: fit-content !important; 
	margin:1rem auto 1rem 1rem;
	padding: 0.5em 1em 0.5em 1em; 
	border-radius: 8px; 
	background-color: #FF7700; 
	color: #FFFFFF; 
	font-size: 1.1rem; 
	font-weight: 900; 
	text-align: center !important;
}


/* ============================================ */
/* Redefine standard bullets to blue and square */ 
/* ============================================ */
.wp-block-list ul {
	list-style: none outside none;
}

.wp-block-list li::before {
	position:absolute;
	content: "■";
	color:#0088BB;
	font-size:1.5rem; 	
	left:-2rem;  /* position of bullet in relation to following text */
	top:-0.4rem;
}

.wp-block-list li {
	position:relative;  
	margin-left:2.625rem;  /* position of bullet from left margin */
	margin-top:0.5rem;
	margin-bottom:1.5rem;
}

/* hide the system bullet */
.wp-block-list li::marker { color:transparent; }

/* Square bullet under step number (larger indent) */
.wp-block-list.L2-indent li {	
	position:relative;  
	margin-left:4.625rem;  /* position of bullet from left margin */
}


/* ============ */
/* Gold bullets */ 
/* ============ */
.goldbullet.wp-block-list ul {
	list-style: none outside none;
}

.goldbullet.wp-block-list li {	
	position:relative;
	margin-left:2rem;  /* distance to the left of the bullet text */
	margin-bottom:0.7rem;
}

.goldbullet.wp-block-list li::before {
	position:absolute;
	content: "\00BB";  /*double chevron */		
	color:#FFDD00; 
	font-size:1.5rem; 	
	left:-1.25rem; /* position of the bullet text relative to its normal position when standard bullets are used */
	top:-0.3rem;
}

.goldbullet.wp-block-list li {	
	position:relative;
	margin-left:2rem;  /* distance to the left of the bullet text */
	margin-bottom:0.7rem;
}

.goldbullet.wp-block-list li::marker { color:transparent; }


/* ============================================= */
/* Optin form bullets (green circle, white tick) */ 
/* ============================================= */
.optinbullet.wp-block-list ul {
	list-style: none outside none;
}
.optinbullet.wp-block-list li {	
	position:relative;
	margin-left:2.0rem;  /* position of the bullet text relative to its normal position when standard bullets are used */
	margin-bottom:0.7rem;
}
.optinbullet.wp-block-list li::before {
	position:absolute;
	content: "\2713";  /* checkmark/tick */		
	color: white; 
	background-color: green;
	font-size:1.2rem;
	font-weight:bold;
	left:-2.5rem;  /* distance to the left of the bullet text */
	top:-0.1rem;
	
	/* White circle border */
	border: 2px solid white;
	border-radius: 50%;
	width: 1.8rem;
	height: 1.8rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.optinbullet.wp-block-list li::marker { color:transparent; }



/* ========================================== */
/* Fix centering issue with new style images  */
/* ========================================== */
.wp-block-uagb-image__figure
{
	margin: 1.5rem 0 2.5rem 0 !important;
}


/* ============= */
/* TOC item text */
/* ============= */
.uagb-toc__list  {
    padding-left: 0;
    text-indent: -1rem;
}
	

/* ======= */
/* Dropcap */
/* ======= */
.dropcap:first-letter {
	float: left;
	font-size: 3.75em;
	line-height: 0.9;
	font-weight: 700;
	margin-right: 0.05em;
	color: #F70; 
}


/* ============= */
/* Formula block */
/* ============= */
.formula {
	padding: 1.25rem 1.93rem; /*20px 30px */
	border-radius: 8px;
	background-color: #1e1e1e;
	font-family: Consolas, monospace; 
	color: #EEE;
	font-size: 1rem;
	font-style:normal;
	font-weight:400;
	text-align:left;    
	line-height:1.3em;
	margin-left: 3.8em;
	max-width: 95%;
}


/* =================== */
/* Related Post inline */
/* =================== */
.relpost {
	position: relative; /* Needed for the abs icon */
	padding: 1.25rem 2rem;
	border-radius: 0.5rem;
	background-color: #0088BB33;
	color: #222222;
	font-size: 1rem;
	font-style: normal;
	font-weight: 400;
	text-align: left;
	line-height: 1.3rem;
	display: inline-block;
	border: 5px double #0088BB66;
	margin-left: 6.8em;
	max-width: 95%;
}

/* ========================== */
/* ✨ icon in top-left corner */
/* ========================== */
.relpost::before {
	content: "✨";
	position: absolute;
	top: -0.75rem;
	left: -0.75rem;
	background: #fff;
	padding: 0.375rem;
	font-size: 1.125rem;
	border: 2px solid #0088BB;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	z-index: 2;
	line-height: 1;
}


/* ============== */
/* Step numbering */
/* ============== */
.step-number {
	background-color: #135;
	color: white;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	font-size: 1em;
	font-weight: bold;
	line-height: 1rem;
	vertical-align: middle;
	text-indent:0; 
	padding-top:0;
	margin:-0.1875rem 0.6875rem 0.1rem 0.6875rem;
}


p:has(.step-number) {
	text-indent: -3.425rem; /* pulls the circle leftward */
	padding-left: 3.625rem; /* creates space so the text that follows the circle isn't clipped */
}


/* ================= */
/* H2 Step numbering */
/* ================= */
h2:has(.h2-step-number) {
    display: flex;
    align-items: center;
    padding-left: 0;
    text-indent: 0;
}
.h2-step-number {
    background-color: #135;
    color: white;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.9em;
    height: 1.8em;
    border-radius: 50%;
	padding-bottom: 0.05em;
	padding-right:0.05em;
	font-size: 1em;
    font-weight: bold;
    flex-shrink: 0;
    margin-right: 0.4em;
    text-indent: 0;
    vertical-align: middle;
}


/* ========= */
/* Post meta */
/* ========= */
.wp-block-post-excerpt__excerpt {
	margin: 0.6rem 0 0.6rem 0;
	color: #CCC;
	line-height:1.5rem;
	font-size: 0.93rem;
}

.wp-block-uagb-image__figure {
	margin: 0 0 0 -1.25rem;
}

.authorname {
		font-family: Montserrat;
		font-weight:700;
		letter-spacing:0.125rem;
		font-size: 1rem;
		text-transform: uppercase;
		margin: -1.25rem 0 0 0;
}

/*	 
.authorname mark {
	color: #FFBB00 !important;
}
*/
	
.ct-meta-last-updated {
    color: #00CCFF;
		font-weight:400;
		font-size: 0.75rem;
		margin: 0em;	
}

.ct-post-read-more {
    display: none;
}


.wp-block-post-featured-image {
	max-width:100%; 
}


/* ======================== */
/* Link colors for dark bgd */
/* ======================== */
a.lightlink,
a.lightlink:link, 
a.lightlink:visited 
{color: #88DDFF !important;} 
a.lightlink:hover, 
a.lightlink:active
{color: #FFDD00 !important;} 



/* ========================================================================================================= */
/* This section changes elements of the search results page that cannot be changed in Appearance > Customize */
/* ========================================================================================================= */

/* Set title on search results to a consistent height */
.search-results .entry-title {
    height: 4em;
	margin-left:0 !important;
	letter-spacing:-0.05em;
	overflow: hidden;
    display: -webkit-box;
/*    -webkit-line-clamp: 3; */
	/* Limits to 2 lines */
    -webkit-box-orient: vertical;
}	


/* Set description on search results to a consistent height */
.search-results .entry-excerpt {
    height: 6em;
	width:100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

/* Highlight the search term in each result */
.search-results mark {
    background-color: #ffeb3b;
    font-weight: bold;
    padding: 2px 4px;
}


/* Add height above the page title */
.search-results .page-title,
.search .page-title,
.search .ct-container > h1 {
    margin-top: 1em;
}


/* Padding of results card */
.search-results article.entry-card {
    padding: 10px !important; 
}


/* Hide via CSS while JS adds quotes */
.search .page-title {
    visibility: visible;
}


/* ===================================================================== */
/* Set container height to full screen minus 400px for header and footer */
/* ===================================================================== */
.almostfullheight {
  	height: calc(100vh - 140px);
}


/* ========================================================= */
/* Bring footer element up to close the gap to the main page */
/* ========================================================= */
.ct-footer {
  	margin-top:-15px;
}


/* =============================== */
/* FluentForms Optin form elements */
/* =============================== */
.form-container {
	width: 850px !important;
}
.name-field, .submit-button {
	width: 150px !important;
}
.email-field {
	width: 375px !important;
}

/* =================================================================================================== */
/* When there is insufficient screen width to show all form elements on one row, stack and centre them */
/* =================================================================================================== */
@media (max-width: 767px) {
  .name-field, .email-field, .submit-button {
    width: 300px !important;
    margin: 0 auto;
	}
  .form-container {
	width: 95% !important; 
	}
}


/* =================================================================== */
/* Remove the 0.8 opacity that Fluent Forms adds to button hover state */
/* =================================================================== */
.ff_btn_style:hover {
	opacity: 1 !important;
	filter: none !important;
}