/*
 Custom CSS for: centurawealth.com
 Author:       	Tim Taricco
 Author URI:   	http://www.timtaricco.com
 Version:     	12.11.25
*/

/*** Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
1  - Website Variables
2  - Overwrite Enfold CSS
3  - Primary Styles
4  - GenerateBlocks Customizations
5  - Styles Loaded to GB Global Styles
6  - Utility Classes
7  - Custom Text Format Plugin Custom CSS
***/


/*** 1 - Website Variables
–––––––––––––––––––––––––––––––––––––––––––––––––– ***/

:root {
	/* Canonical theme tokens */
	--light-1:  #ffffff;
	--light-2:  #f7f7f7;
	--light-3:  #e3e3e3;
	--light-4:  #B5E0FF;
	--dark-1:   #444444;
	--dark-2:   #0F344E;
	--accent-1: #0669A5;
	--accent-2: #16649D;
	--accent-3: #169251;

	/* Alias WP preset variables to canonical theme tokens */
	--wp--preset--color--light-1:  var(--light-1);
	--wp--preset--color--light-2:  var(--light-2);
	--wp--preset--color--light-3:  var(--light-3);
	--wp--preset--color--light-4:  var(--light-4);
	--wp--preset--color--dark-1:   var(--dark-1);
	--wp--preset--color--dark-2:   var(--dark-2);
	--wp--preset--color--accent-1: var(--accent-1);
	--wp--preset--color--accent-2: var(--accent-2);
	--wp--preset--color--accent-3: var(--accent-3);

	/* Text Styling */
    --text-base: clamp(1rem, 0.9611rem + 0.1639vw, 1.125rem); /* 18/16px */
    --line-height-base: 1.5;
    --margin-bottom-base: 1em;
    
    --text-xs: clamp(0.75rem, 0.7111rem + 0.1639vw, 0.875rem); /* 14/12px */
    --line-height-xs: 1.25; 
    --margin-bottom-xs: 1em;
    
    --text-sm: clamp(0.875rem, 0.8361rem + 0.1639vw, 1rem); /* 16/14px */
    --line-height-sm: 1.25; 
    --margin-bottom-sm: 1em;
    
    --text-p: clamp(1rem, 0.9611rem + 0.1639vw, 1.125rem); /* 18/16px */
    --line-height-p: 1.5; 
    --margin-bottom-p: 1em;
    
    --text-md: clamp(1.125rem, 1.0861rem + 0.1639vw, 1.25rem); /* 20/18px */
    --line-height-md: 1.4; 
    --margin-bottom-md: 1em;
    
    --text-lg: clamp(1.375rem, 1.3361rem + 0.1639vw, 1.5rem); /* 24/22px */
    --line-height-lg: 1.4; 
    --margin-bottom-lg: 1em;
    
    --text-xl: clamp(1.5rem, 1.4611rem + 0.1639vw, 1.625rem); /* 26/24px */
    --line-height-xl: 1.3; 
    --margin-bottom-xl: 1em;
    
    --text-h1: clamp(2.25rem, 2.0164rem + 0.9836vw, 3rem); /* 48/36px */
    --line-height-h1: 1.1; 
    --margin-bottom-h1: 0.5em;
    
    --text-h2: clamp(1.75rem, 1.5164rem + 0.9836vw, 2.5rem); /* 40/28px */
    --line-height-h2: 1.2; 
    --margin-bottom-h2: 0.5em;
    
    --text-h3: clamp(1.625rem, 1.4693rem + 0.6557vw, 2.125rem); /* 34/26px */
    --line-height-h3: 1.3; 
    --margin-bottom-h3: 0.5em;
    
    --text-h4: clamp(1.5rem, 1.4221rem + 0.3279vw, 1.75rem); /* 28/24px */
    --line-height-h4: 1.3; 
    --margin-bottom-h4: 0.5em;
    
    --text-h5: clamp(1.25rem, 1.1721rem + 0.3279vw, 1.5rem); /* 24/20px */
    --line-height-h5: 1.4; 
    --margin-bottom-h5: 0.5em;
    
    --text-h6: clamp(1.25rem, 1.2500rem + 0.0000vw, 1.25rem); /* 20/20px */
    --line-height-h6: 1.4; 
    --margin-bottom-h6: 0.5em;
    
    /* Padding Styling */
    --padding-xs: clamp(0.938rem, 0.8408rem + 0.4092vw, 1.25rem); /* 20/15px */
    --padding-sm: clamp(1.25rem, 0.8607rem + 1.6393vw, 2.5rem); /* 40/20px */
    --padding-md: clamp(2.5rem, 1.7213rem + 3.2787vw, 5rem); /* 80/40px */
    --padding-lg: clamp(3.75rem, 2.5820rem + 4.9180vw, 7.5rem); /* 120/60px */
    --padding-xl: clamp(5rem, 3.4426rem + 6.5574vw, 10rem); /* 160/80px */
	
	/* Margin Styling */
    --margin-xs: clamp(0.938rem, 0.8408rem + 0.4092vw, 1.25rem); /* 20/15px */
    --margin-sm: clamp(1.25rem, 0.8607rem + 1.6393vw, 2.5rem); /* 40/20px */
    --margin-md: clamp(2.5rem, 1.7213rem + 3.2787vw, 5rem); /* 80/40px */
    --margin-lg: clamp(3.75rem, 2.5820rem + 4.9180vw, 7.5rem); /* 120/60px */
    --margin-xl: clamp(5rem, 3.4426rem + 6.5574vw, 10rem); /* 160/80px */
	--margin-before-list: 0.25em;
	--margin-thin: 0.25em;
    
    /* Container Gap Styling */
    --gap-xs: clamp(0.938rem, 0.8408rem + 0.4092vw, 1.25rem); /* 20/15px */
    --gap-sm: clamp(1.25rem, 0.8607rem + 1.6393vw, 2.5rem); /* 40/20px */
    --gap-md: clamp(2.5rem, 1.7213rem + 3.2787vw, 5rem); /* 80/40px */
    --gap-lg: clamp(3.75rem, 2.5820rem + 4.9180vw, 7.5rem); /* 120/60px */
	
	/* Border Styling */
	--border-radius-default: 7px;
	--border-radius-sm: 3px;
	--border-radius-pill: 25px;
	--border-radius-round: 50%;
	
	/* GenerateBlocks Default Colors */
    --contrast: var(--dark-1);
    --contrast-1: var(--dark-2);
    --contrast-2: var(--dark-3);
    --base: var(--light-3);
    --base-1: var(--light-2);
    --base-2: var(--light-1);
    --accent: var(--accent-1);

}


/*** 2 - Overwrite Enfold CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– ***/
p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 {
	margin-top: unset;
}


/*** 3 - Primary Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– ***/

/*** Basic Styles ***/
.block-editor-template {
	background-color: #fff;;
} /* Content Area Styling */
.block-editor-template p {
	margin-top: 0;
} /* Overrides Enfold theme defaults */
.block-editor-template p:last-child:last-of-type {
	margin-bottom: 0;
} /* Overrides Enfold theme defaults */
h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
} /* Limited browser support as of June 2023 */
#top #wrap_all .all_colors .block-editor-template h1 {
	font-size: var(--text-h1) !important;
	font-weight: 700 !important;
	line-height: var(--line-height-h1) !important;
}
#top #wrap_all .all_colors .block-editor-template h1.text_h2 {
	font-size: var(--text-h2) !important;
	line-height: var(--line-height-h2) !important;
}
#top #wrap_all .all_colors .block-editor-template h1.text_h3 {
	font-size: var(--text-h3) !important;
	line-height: var(--line-height-h3) !important;
}
#top #wrap_all .all_colors .block-editor-template h1.text_h4 {
	font-size: var(--text-h4) !important;
	line-height: var(--line-height-h4) !important;
}
#top #wrap_all .all_colors .block-editor-template h1.text_h5 {
	font-size: var(--text-h5) !important;
	line-height: var(--line-height-h5) !important;
}
#top #wrap_all .all_colors .block-editor-template h1.text_h6 {
	font-size: var(--text-h6) !important;
	line-height: var(--line-height-h6) !important;
}
h1 {
	margin-bottom: var(--margin-bottom-h1);
} 
#top #wrap_all .all_colors .block-editor-template h2 {
	font-size: var(--text-h2) !important;
	font-weight: 700 !important;
	line-height: var(--line-height-h2) !important;
}
#top #wrap_all .all_colors .block-editor-template h2.text_h1 {
	font-size: var(--text-h1) !important;
	line-height: var(--line-height-h1) !important;
}
#top #wrap_all .all_colors .block-editor-template h2.text_h3 {
	font-size: var(--text-h3) !important;
	line-height: var(--line-height-h3) !important;
}
#top #wrap_all .all_colors .block-editor-template h2.text_h4 {
	font-size: var(--text-h4) !important;
	line-height: var(--line-height-h4) !important;
}
#top #wrap_all .all_colors .block-editor-template h2.text_h5 {
	font-size: var(--text-h5) !important;
	line-height: var(--line-height-h5) !important;
}
#top #wrap_all .all_colors .block-editor-template h2.text_h6 {
	font-size: var(--text-h6) !important;
	line-height: var(--line-height-h6) !important;
}
h2 {
	margin-bottom: var(--margin-bottom-h2);
}
#top #wrap_all .all_colors .block-editor-template h3 {
	font-size: var(--text-h3) !important;
	font-weight: 700 !important;
	line-height: var(--line-height-h3) !important;
}
#top #wrap_all .all_colors .block-editor-template h3.text_h1 {
	font-size: var(--text-h1) !important;
	line-height: var(--line-height-h1) !important;
}
#top #wrap_all .all_colors .block-editor-template h3.text_h2 {
	font-size: var(--text-h2) !important;
	line-height: var(--line-height-h2) !important;
}
#top #wrap_all .all_colors .block-editor-template h3.text_h4 {
	font-size: var(--text-h4) !important;
	line-height: var(--line-height-h4) !important;
}
#top #wrap_all .all_colors .block-editor-template h3.text_h5 {
	font-size: var(--text-h5) !important;
	line-height: var(--line-height-h5) !important;
}
#top #wrap_all .all_colors .block-editor-template h3.text_h6 {
	font-size: var(--text-h6) !important;
	line-height: var(--line-height-h6) !important;
}
h3 {
	margin-bottom: var(--margin-bottom-h3);
}
#top #wrap_all .all_colors .block-editor-template h4 {
	font-size: var(--text-h4) !important;
	font-weight: 700 !important;
	line-height: var(--line-height-h4) !important;
}
#top #wrap_all .all_colors .block-editor-template h4.text_h1 {
	font-size: var(--text-h1) !important;
	line-height: var(--line-height-h1) !important;
}
#top #wrap_all .all_colors .block-editor-template h4.text_h2 {
	font-size: var(--text-h2) !important;
	line-height: var(--line-height-h2) !important;
}
#top #wrap_all .all_colors .block-editor-template h4.text_h3 {
	font-size: var(--text-h3) !important;
	line-height: var(--line-height-h3) !important;
}
#top #wrap_all .all_colors .block-editor-template h4.text_h5 {
	font-size: var(--text-h5) !important;
	line-height: var(--line-height-h5) !important;
}
#top #wrap_all .all_colors .block-editor-template h4.text_h6 {
	font-size: var(--text-h6) !important;
	line-height: var(--line-height-h6) !important;
}
h4 {
	margin-bottom: var(--margin-bottom-h4);
}
#top #wrap_all .all_colors .block-editor-template h5 {
	font-size: var(--text-h5) !important;
	font-weight: 700 !important;
	line-height: var(--line-height-h5) !important;
}
#top #wrap_all .all_colors .block-editor-template h5.text_h1 {
	font-size: var(--text-h1) !important;
	line-height: var(--line-height-h1) !important;
}
#top #wrap_all .all_colors .block-editor-template h5.text_h2 {
	font-size: var(--text-h2) !important;
	line-height: var(--line-height-h2) !important;
}
#top #wrap_all .all_colors .block-editor-template h5.text_h3 {
	font-size: var(--text-h3) !important;
	line-height: var(--line-height-h3) !important;
}
#top #wrap_all .all_colors .block-editor-template h5.text_h4 {
	font-size: var(--text-h4) !important;
	line-height: var(--line-height-h4) !important;
}
#top #wrap_all .all_colors .block-editor-template h5.text_h6 {
	font-size: var(--text-h6) !important;
	line-height: var(--line-height-h6) !important;
}
h5 {
	margin-bottom: var(--margin-bottom-h5);
}
#top #wrap_all .all_colors .block-editor-template h6 {
	font-size: var(--text-h6) !important;
	font-weight: 700 !important;
	line-height: var(--line-height-h6) !important;
}
#top #wrap_all .all_colors .block-editor-template h6.text_h1 {
	font-size: var(--text-h1) !important;
	line-height: var(--line-height-h1) !important;
}
#top #wrap_all .all_colors .block-editor-template h6.text_h2 {
	font-size: var(--text-h2) !important;
	line-height: var(--line-height-h2) !important;
}
#top #wrap_all .all_colors .block-editor-template h6.text_h3 {
	font-size: var(--text-h3) !important;
	line-height: var(--line-height-h3) !important;
}
#top #wrap_all .all_colors .block-editor-template h6.text_h4 {
	font-size: var(--text-h4) !important;
	line-height: var(--line-height-h4) !important;
}
#top #wrap_all .all_colors .block-editor-template h6.text_h5 {
	font-size: var(--text-h5) !important;
	line-height: var(--line-height-h5) !important;
}
h6 {
	margin-bottom: var(--margin-bottom-h6);
}


/*** WordPress Link Styling Custom CSS ***/
.block-editor-template :is(p, li) a:any-link:not([class^="button_"]):not([class*=" button_"]) {
  text-decoration: none;
  position: relative;
  color: var(--accent-2); /* Normal state color */
  background-image: linear-gradient(var(--accent-1), var(--accent-1));
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.5s ease-in-out, color 0.3s ease-in-out;
}
.block-editor-template :is(p, li) a:any-link:not([class^="button_"]):not([class*=" button_"]):is(:hover, :focus) {
  background-size: 0 2px; /* Full width underline on hover */
  background-image: linear-gradient(var(--accent-2), var(--accent-2)); /* Change color of underline on hover */
  cursor: pointer;
  color: var(--accent-2); /* Change text color on hover */
}


/*** Change cursor to hand on hover ***/
.block-editor-template a {
    cursor: pointer;
}


/*** Website Scrollbar Styles ***/
::-webkit-scrollbar {
	width: .75em;
	height: .75em;
}
::-webkit-scrollbar-track {
	background: var(--light-1);
	border-radius: 100vw;
	margin-block: 0.5em;
}
::-webkit-scrollbar-thumb {
	background: var(--accent-1);
	border: 0.15em solid var(--light-1);
	border-radius: 100vw;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--accent-2);
}
@supports (scrollbar-color: var(--accent-1) var(--light-1)) {
	* {
		scrollbar-color: var(--accent-1) var(--light-1);
		scrollbar-width: auto;
	}
} /* For Firefox */


/*** Block Editor Styles ***/
.components-panel__body p {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	line-height: inherit;
	margin-top: inherit;
	margin-bottom: inherit;
} /* Tweak to reset the styles for <p> inside Block Editor panels - .components-panel__body */
.editor-post-publish-panel__content p {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	line-height: inherit;
	margin-top: inherit;
	margin-bottom: inherit;
} /* Tweak to reset the styles for <p> inside Block Editor panels - .editor-post-publish-panel__content */


/*** Scope: .section_* inside .block-editor-template ***/
:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) p:last-child:last-of-type {
	margin-bottom: 0;
} /* Remove bottom margin from last paragraph in a container */

:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) sup {
	position: relative;
	font-size: 70%;
	line-height: 0;
	vertical-align: baseline;
	top: -.5em;
} /* Style Superscript */


/*** WordPress Table Block Custom CSS ***/
:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) .wp-block-table {
	margin: 0;
} /* Table block formatting */

:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) figure.wp-block-table {
	overflow-x: auto;
	overflow-y: hidden;
} /* Allow sideways scroll for table block on mobile */

:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) .wp-block-table table {
	min-width: 688px;
	margin: 0;
} /* Ensure table has width for horizontal scroll */


/*** Horizontal Line Styling ***/
:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) hr {
	margin-top: var(--margin-bottom-p);
	margin-bottom: var(--margin-bottom-p);
} /* Adjust HR spacing */

:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) .wp-block-separator {
	border: .5px solid;
} /* Thin separator line */


/*** WordPress Blockquote Block Custom CSS ***/
:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) blockquote p {
	border: none;
	font-size: var(--text-lg) !important;
	line-height: var(--line-height-lg) !important;
	margin-bottom: var(--margin-bottom-lg) !important;
}

:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) blockquote::before {
	content: "\201C";
	display: block;
	font-size: 100px;
	color: var(--accent-1);
	top: -10px;
	left: -48px;
	position: relative;
	height: 0;
}

:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) .wp-block-quote {
	border-left: 0 !important;
}

@media (max-width: 767px) {
	:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) blockquote::before {
		font-size: 70px;
		top: 0;
		left: -33px;
	}
}


/*** WordPress Lists (UL / OL) ***/
:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) ul {
	margin: 0 0 var(--margin-bottom-p) 12px;
}

:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) ul:last-child {
	margin-bottom: 0;
}

:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) ul li {
	padding-left: 10px;
}

/* Square bullet + color */
:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) ul li::marker {
	color: var(--accent-1);
	font-size: 17px;
	content: "\25A0";
	font-weight: 700;
}

/* Light variant (class on UL or ancestor) */
:is(.block-editor-template :is([class^="section_"], [class*=" section_"]))) ul.light-bullet-point li::marker,
:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) .light-bullet-point ul li::marker {
	color: var(--light-1);
}

/* Nested UL spacing + marker color */
:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) ul li li {
	padding-left: 10px;
}
:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) ul li li::marker {
	color: var(--accent-1);
}
:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) .light-bullet-point ul li li::marker,
:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) ul.light-bullet-point li li::marker {
	color: var(--light-1);
}
:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) ul li li:first-child {
	padding-top: 3px;
}
:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) ul li li:last-child {
	padding-bottom: 3px;
}


/*** Ordered Lists (OL) ***/
:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) ol {
	margin: 0 0 var(--margin-bottom-p) 22px;
}

:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) ol:last-child {
	margin-bottom: 0;
}

:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) ol li {
	padding-left: 5px;
}

:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) ol li::marker {
	color: var(--accent-1);
}

/* Light variant (class on OL or ancestor) */
:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) ol.light-bullet-point li::marker,
:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) .light-bullet-point ol li::marker {
	color: var(--light-1);
}

/* Nested OL spacing + marker color */
:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) ol li li {
	padding-left: 10px;
}
:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) ol li li::marker {
	color: var(--accent-1);
}
:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) .light-bullet-point ol li li::marker,
:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) ol.light-bullet-point li li::marker {
	color: var(--light-1);
}
:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) ol li li:first-child {
	padding-top: 3px;
}
:is(.block-editor-template :is([class^="section_"], [class*=" section_"])) ol li li:last-child {
	padding-bottom: 3px;
}


/*** 4 - GenerateBlocks Customizations
–––––––––––––––––––––––––––––––––––––––––––––––––– ***/

/*** GenerateBlocks Buttons Global Styles Tweaks ***/
[class*="button_"] {
	-webkit-transition: all 0.2s ease-in 0s;
	-moz-transition: all 0.2s ease-in 0s;
	-o-transition: all 0.2s ease-in 0s;
	-ms-transition:all 0.2s ease-in 0s;
	transition: all 0.2s ease-in 0s;
}
.buttons-container_fixed [class*="button_"] {
	min-width: 200px;
} /* Set button width for "Buttons – Styles" GenerateBlocks Global Style */
@media (max-width: 460px) {
	.buttons-container_fixed,
	.buttons-container_text {
		min-width: 100%;
	} /* Set button width for "Buttons – Styles" GenerateBlocks Global Style */
	.buttons-container_text {
		flex-direction: column !important;
	} /* Stack text buttons on phone */
	.buttons-container_fixed [class*="button_"] {
		min-width: 100%;
	} /* Set button width for "Buttons – Styles" GenerateBlocks Global Style */
}

/*** GenerateBlocks Pagination styling tweaks ***/
.gb-query-loop-pagination > span:first-of-type {
	display: none;
}
.gb-query-loop-pagination > span.page-numbers:first-of-type {
	margin-right: 10px;
	display: block;
}
.gb-query-loop-pagination > span.gb-block-is-current:first-of-type {
	margin-right: 10px;
	display: block;
}
.gb-query-loop-pagination > span:last-of-type {
	display: none;
}
.gb-query-loop-pagination > span.page-numbers:last-of-type {
	display: block;
}
.gb-query-loop-pagination > span.gb-block-is-current {
	color: var(--light-1);
	background-color: var(--accent-1);
}


/*** 5 - Styles Loaded to GB Global Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– ***/

/*** Make paragraph tag look like a list tag (Loaded to GB Global Styles) ***/
.text_bullet-list {
	position: relative;
	padding-left: 20px;
}
.text_bullet-list::before {
	content: "\25A0";
	color: var(--accent-1);
	font-size: 17px;
	font-weight: 700;
	position: absolute;
	left: 0;
	top: 12px;
	transform: translateY(-50%);
}


/*** 6 - Utility Classes
–––––––––––––––––––––––––––––––––––––––––––––––––– ***/

/* Hide Elements */
@media (max-width: 767px) {
	.hide-on-mobile {
		display: none !important;
	}
}
@media (min-width: 768px) and (max-width: 1024px) {
	.hide-on-tablet {
		display: none !important;
	}
}
@media (min-width: 1025px) {
	.hide-on-desktop {
		display: none !important;
	}
}

/* Responsive iFrame CSS */
[style*="--aspect-ratio"] > :first-child {
	width: 100%;
}
[style*="--aspect-ratio"] > img {  
	height: auto;
} 
@supports (--custom:property) {
	[style*="--aspect-ratio"] {
		position: relative;
	}
	[style*="--aspect-ratio"]::before {
    	content: "";
    	display: block;
    	padding-bottom: calc(100% / (var(--aspect-ratio)));
	}  
	[style*="--aspect-ratio"] > :first-child {
    	position: absolute;
    	top: 0;
    	left: 0;
    	height: 100%;
	}  
}


/*** 7 - Custom Text Format Plugin Custom CSS (Icons loaded to /uploads/gctf/ directory)
–––––––––––––––––––––––––––––––––––––––––––––––––– ***/
.uppercase-text {
	text-transform: uppercase;
}
.hyperlink-text-on-dark a,
a .hyperlink-text-on-dark {
	text-decoration: none;
    position: relative;
    color: var(--light-1); /* Normal state color */
    background-image: linear-gradient(var(--light-1), var(--light-1));
    background-size: 0 2px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.5s ease-in-out, color 0.3s ease-in-out;
}
.hyperlink-text-on-dark a:hover,
.hyperlink-text-on-dark a:focus,
a:hover .hyperlink-text-on-dark,
a:focus .hyperlink-text-on-dark {
	background-size: 100% 2px; /* Full width underline on hover */
    background-image: linear-gradient(var(--light-1), var(--light-1)); /* Change color of underline on hover */
    cursor: pointer;
    color: var(--light-1); /* Change text color on hover */
}
.bold-font-weight {
	font-weight: 700;
}
.normal-font-weight {
	font-weight: 400;
}