:root {
	--tag-background-color: var(--grey-500);
	--tag-border-color: var(--grey-400);
	--tag-text-color: var(--white);
	--tag-text-size: .82rem;
	--tag-padding: 8px 16px;
}

html {
	scroll-behavior: smooth;
}
body,
body :where(.brxe-section),
#brx-content {
	background-color: var(--white-plytix);
}
#wpadminbar {
	position: fixed;
}

/* Text color helpers */
.dark-texts  {
	color: var(--grey-500) !important;
}
.light-texts {
	color: var(--white) !important;
}

/* Theme-aware helpers */
:where(.blurry-dark i),
:where(.transparent-dark i),
:where(.blurry-dark h2),
:where(.transparent-dark h2),
:where(.blurry-dark h3),
:where(.transparent-dark h3),
:where(.blurry-dark h4),
:where(.transparent-dark h4),
:where(.blurry-dark p),
:where(.transparent-dark p),
:where(.blurry-dark a),
:where(.transparent-dark a) {
	color: var(--white);
}

:where(.blurry-light i),
:where(.transparent-light i),
:where(.blurry-light h2),
:where(.transparent-light h2),
:where(.blurry-light h3),
:where(.transparent-light h3),
:where(.blurry-light h4),
:where(.transparent-light h4),
:where(.blurry-light p),
:where(.transparent-light p),
:where(.blurry-light a),
:where(.transparent-light a) {
	color: var(--grey-500);
}

/* Small helper components */
.pt-tag {
	display: inline-block;
	padding: .1rem .3rem;
	background-color: var(--grey-450);
	color: var(--white);
	border-radius: 200px;
	font-size: .6rem !important;
	word-break: keep-all;
}

/* Radius utility classes */
.rad-0 { border-radius: 0rem; }
.rad-1 { border-radius: .4rem; }
.rad-2 { border-radius: .8rem; }
.rad-3 { border-radius: 1.2rem; }
.rad-4 { border-radius: 1.8rem; }
.rad-5 { border-radius: 2.5rem; }
.rad-full { border-radius: 100vw; }

/* Metadata */
.metadata {
	font-size: 0.75rem !important;
}
.metadata-m {
	font-size: .85rem !important;
}

/* Temp while migrating */
/* Center-Align cookie banner buttons */
#hs-eu-cookie-confirmation #hs-eu-confirmation-button,
#hs-eu-cookie-confirmation #hs-eu-decline-button {
  text-align: center !important;
}

/* ------------------
   Layout / Responsive
   ------------------ */
@media screen and (max-width: 1200px) {
	.brxe-section {
		padding: var(--space-3);
	}
}

/* ------------------
   Components
   ------------------ */
/* Post card */
.post-card {
	cursor: pointer;
	box-shadow: 0px 0px 0px transparent;
	transform: translateY(0);
	padding: var(--space-2);
	border-radius: .8rem;
	transition: transform .3s ease-out, box-shadow .3s ease-out;
}
.post-card:hover * {
	transform: scale(1);
	transition: transform .3s ease-out;
}
.post-card:hover {
	box-shadow: 0px 2px 6px #CCCCCCCC;
	transform: translateY(-2px);
}

/* ------------------
   Header / Navigation
   ------------------ */
.menu-link-container {
	margin-bottom: .8rem;
}
.menu-link-container a {
	width: 100%;
}
.menu-link-icon {
	width: 30px !important;
}
.menu-link-title {
	font-size: 1rem;
	color: var(--white);
	font-weight: 700;
}
.menu-link-description {
	font-size: .75rem;
	color: var(--grey-300);
}

/* Password protected page layout */
.post-password-required {
	padding: 20vh 0;
}

/* ------------------
   Tag styles
   ------------------ */
/* Main tag component */
.custom-tag {
	display: inline-block;
	font-size: var(--tag-text-size);
	font-weight: 500;
	color: var(--tag-text-color);
	line-height: 1.2;
	background-color: var(--tag-background-color);
	padding: var(--tag-padding);
	border-radius: 100vw;
	border: solid 1px var(--tag-border-color);
}
.custom-tag.custom-tag-light {
	--tag-background-color: #FFFFFF;
	--tag-text-color: #595369;
	--tag-border-color: transparent;
}
.custom-tag-s {
	--tag-text-size: .75rem;
	--tag-padding: 3px 10px;
}
.custom-tag-m {
	--tag-text-size: .82rem;
	--tag-padding: 8px 16px;
}
.custom-tag-l {
	--tag-text-size: .9rem;
	--tag-padding: 12px 20px;
}
a.custom-tag,
.custom-tag-link {
	cursor: pointer;
	transition: transform .3s ease-out;
}
a.custom-tag:hover,
.custom-tag-link:hover {
	transform: translateY(-2px);
}

/* ------------------
   Blog / Single post content
   ------------------ */
/* Wrapper */
.the-content {
	margin-bottom: 5rem;
}

/* Headings */
.the-content h1,
.the-content h2,
.the-content h3,
.the-content h4 {
	font-family: figtree, sans-serif;
	line-height: 1.1;
	margin-top: 2rem;
	margin-bottom: 1rem;
	scroll-margin-top: 80px;
}
.the-content h1:first-child {
	margin-top: 0;
}
.customer-stories-content h2,
.customer-stories-content h3{
	background: linear-gradient(to left, var(--purple-main), var(--blue-main));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* Text / paragraphs */
.the-content p,
.the-content .brxe-text-basic,
.the-content a,
.the-content li {
	font-size: 1.05rem;
	line-height: 1.6;
	font-weight: 300;
	margin-bottom: 1.2rem;
}
.the-content b {
	font-weight: 700;
}

/* Images */
.the-content :where(img) {
	width: 100%;
	border-radius: 8px;
	margin: .5rem 0;
}

/* Blockquotes */
.the-content blockquote,
.blockquote {
	font-family: var(--font-family-body);
	padding: 1.5rem;
	margin: var(--space-2) 0;
	border-radius: 0;
	text-align: left;
	font-size: 1.1rem;
	color: var(--grey-500);
	border: none;
	border-left: solid 2px var(--purple-main);
}
.the-content blockquote cite,
.blockquote cite {
	font-family: var(--font-family-body);
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--grey-500);
	opacity: 1;
}
.the-content .blue blockquote,
.the-content .purple blockquote,
.the-content .yellow blockquote,
.the-content .white blockquote,
.blockquote.blue,
.blockquote.purple,
.blockquote.yellow,
.blockquote.white
 {
	border-radius: var(--radius-2);
	border: none !important;
}
.the-content .blue blockquote,
.blockquote.blue {
	 background-color: #EFFAFF;
}
.the-content .blue blockquote:before,
.blockquote.blue:before,
.the-content .white blockquote:before,
.blockquote.white:before {
	 content: "💡 ";
}
.the-content .white blockquote,
.blockquote.white {
	 background-color: #FFF;
}
.the-content .purple blockquote,
.blockquote.purple {
	 background-color: #F9F7FF;
}
.the-content .purple blockquote:before,
.blockquote.purple:before {
	 content: "ℹ️ ";
}
.the-content .yellow blockquote,
.blockquote.yellow {
	 background-color: #FFFBF1;
}
.the-content .yellow blockquote:before,
.blockquote.yellow:before {
	 content: "⚠️ ";
}
.the-content .wp-block-pullquote {
	padding: 0;
}

/* Lists */
.the-content .brxe-text {
	width: 100%;
}
.the-content a {
	text-decoration: underline;
}

.the-content ol,
.the-content ul {
	margin-bottom: 1.4rem;
	padding-left: 1.4rem;
	margin-top: 0rem;
}
.the-content ol li,
.the-content ul li { 
	margin: 0; padding: .4rem 0;
}
.the-content ol:has(ol),
.the-content ol:has(ul),
.the-content ul:has(ul),
.the-content ul:has(ol) {
	 margin-bottom: 0;
}
.the-content > ol,
.the-content > ul {
	 margin-left: 0;
}
.the-content ol {
	 list-style: none !important; counter-reset: item;
}
.the-content ul ul,
.the-content ul ul ul,
.the-content ol ul,
.the-content ol ul ul,
.the-content ol ol,
.the-content ol ol ol { 
	margin-bottom: -0.4rem;
}
.the-content .chevron-list ul {
	padding-left: .2rem;
}
.the-content .chevron-list li {
	margin: 0; padding: .4rem 0 .6rem 1.5rem;
	list-style: none;
	background-image: url('https://www.plytix.com/hubfs/bullet-point-img.svg');
	background-repeat: no-repeat;
	background-position: left 11px;
	background-size: 1rem;
	/* line-height: 1.6; */
}
.the-content ul li ul {
	padding-top: 0.3rem;
}
.the-content ul ul li {
	padding-bottom: 0.3rem;
}
.the-content ol li {
	counter-increment: item;
	margin-bottom: 5px;
	padding-left: 1.5rem;
	position: relative;
}
.the-content ol li:before {
	content: counter(item) ".";
	background: transparent;
	border-radius: 2px;
	color: inherit;
	width: 1.3rem;
	text-align: center;
	display: inline-block;
	left: 0;
	position: absolute;
}
.the-content ul p {
	margin-bottom: 0;
}
.checkbox-list ul {
  list-style: none;
	position: relative;
	padding-left: 1.6em;
}

.checkbox-list li::before {
	content: "";
	position: absolute;
	left: 0;
	display: inline-block;
	width: 1em;
	height: 1em;
	border: 1.5px solid var(--grey-450);
	background-color: transparent;
	border-radius: 3px;
	transform: translateY(.28em);
}

/* Related terms */
.related-terms-container {
	margin-top: 1.2rem;
}
.related-terms-container .related-term {
	display: inline-block;
	color: var(--grey-500);
	width: 100%;
	padding: .8rem 1.5rem;
	transform: translateX(-1rem);
	border-radius: .5rem;
	transition: background ease-out .2s;
}
.related-terms-container .related-term:hover {
	background-color: var(--white); color: var(--grey-500);
}

/* Post FAQs */
.faq-title {
  font-size: 1.2rem !important;
  font-weight: 400 !important;
}

/* Pagination */
.page-numbers{
  padding: 4px 10px;
  border-radius: 3px;
}
.page-numbers.current{
  background-color: var(--grey-500);
  color: var(--white);
}
a.page-numbers:not(.current):hover{
  background-color: var(--grey-200);
  color: var(--grey-500);
}

/* FAQs */
.the-content .single-faq-container {
	margin-bottom: 1rem; border-bottom: solid 1px var(--grey-300);
}

/* Tables made with divs */
.content-table {
  --table-border-color: var(--grey-250);
}
.content-table {
  display: table;
  border: solid 1px var(--table-border-color);
  border-radius: var(--radius-1)
}
.content-table > div {
  display: table-row;
}
.content-table > div > div {
  display: table-cell;
  padding: 8px;
  border-bottom: solid 1px var(--table-border-color);
}
.content-table > div:last-child > div {
  border-bottom: none;
}
table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
  border: 1px solid var(--grey-250);
  border-radius: 8px;
  overflow: hidden;
}
table tr th,
table tr td {
  padding: 16px 24px;
  border-bottom: 1px solid var(--grey-250);
  text-align: left;
  vertical-align: top;
}
table tr:last-child td {
  border-bottom: none;
}
/* ------ */
/* .content-table .table-titles {
  background-color: var(--grey-200);
} */
.content-table .table-titles .brxe-text-basic {
  font-weight: 600;
}
.content-table .brxe-text-basic,
.content-table p,
.content-table h2,
.content-table h3,
.content-table h4 {
  margin: 0;
}

/* Testimonial component simple */
.content-testimonial p {
	line-height: 1.2;
	margin-bottom: .4em;
}
.content-testimonial p:last-child {
	font-size: .9rem;
}





/* Tables inside content */
.the-content table {
	border-collapse: collapse;
}
.the-content table td,
.the-content table th,
.the-content table td {
	border: solid 1px var(--grey-200);
	padding: .5rem;
	text-align: left;
}
.the-content .wp-block-details p {
	padding-top: .5rem; padding-left: 1rem;
}



/* 1. Eliminamos el estilo por defecto de la lista */
.the-content ol {
  list-style: none;
  counter-reset: my-counter;
  padding-left: 0;
}
/* 2. Estilizamos cada elemento de la lista */
.the-content ol li {
  counter-increment: my-counter;
  position: relative;
  padding-left: 32px;
  margin-bottom: 0px;

}
/* 3. Creamos el círculo con el número usando el pseudo-elemento ::before */
.the-content ol li::before {
  content: counter(my-counter);
  position: absolute;
  left: 6px;
  top: 12px;
  /* Círculo y dimensiones */
  width: 16px;
  height: 16px;
  border: 1px solid var(--grey-500);
  border-radius: 50%;
  /* Centrado del número */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Estilo de la fuente */
  font-size: 10px;
  color: var(--grey-500);
	line-height: 1;
}