/*!
Theme Name: mettevo-theme
Theme URI: https://mettevo.com/
Author: Van Revo
Author URI: http://mettevo.com/
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: mettevo-theme
Domain Path: /lang

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

mettevo-theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
[btn-type="primary"] {
	background: var(--button--background) !important;
	color: var(--button--text) !important;
	border-color: var(--button--border) !important;
	box-shadow: inset 0px -2px 0px var(--button--border);
}
[btn-type="primary"]:hover {
	background: var(--button--background-hover) !important;
	color: var(--button--text-hover) !important;
	border-color: var(--button--border-hover) !important;
	box-shadow: inset 0px 0px 0px var(--button--border);
}
[btn-type="secondary"] {
	background: var(--button--secondary-background) !important;
	color: var(--button--secondary-text) !important;
	border-color: var(--button--secondary-border) !important;
}
[btn-type="secondary"]:hover {
	background: var(--button--secondary-background-hover) !important;
	color: var(--button--secondary-text-hover) !important;
	border-color: var(--button--secondary-border-hover) !important;
}
[btn-type="ghost"] {
	background: var(--button--ghost-background) !important;
	color: var(--button--ghost-text) !important;
	border-color: var(--button--ghost-border) !important;
}
[btn-type="ghost"]:hover {
	background: var(--button--ghost-background-hover) !important;
	color: var(--button--ghost-text-hover) !important; 
	border-color: var(--button--ghost-border-hover) !important;
}
[btn-type="link"] {
	background: var(--colors--main--transparent) !important;
	color: var(--colors--main--text-primary) !important;
	border-color: var(--colors--main--transparent) !important;
}
[btn-type="link"]:hover {
	background: var(--colors--emerald--200) !important;
}
/* Button sizes */
[btn-size="xSmall"] {
	padding: var(--button--xs-pad-top-bottom) var(--button--xs-pad-left-right) !important;
	font-size: var(--button--xs-size) !important;
	font-weight: var(--button--xs-font-weight) !important;
	border-radius: 6px !important;
}
[btn-size="small"] {
	padding: var(--button--s-pad-top-bottom) var(--button--s-pad-left-right) !important;
	font-size: var(--button--s-size) !important;
	font-weight: var(--button--s-font-weight) !important;
	border-radius: 8px !important;
}
[btn-size="normal"] {
	padding: var(--button--m-pad-top-bottom) var(--button--m-pad-left-right) !important;
	font-size: var(--button--m-size) !important;
	font-weight: var(--button--m-font-weight) !important;
	border-radius: 10px !important;
}
[btn-size="large"] {
	padding: var(--button--l-pad-top-bottom) var(--button--l-pad-left-right) !important;
	font-size: var(--button--l-size) !important;
	font-weight: var(--button--l-font-weight) !important;
	border-radius: 12px !important;
}
/* FA icons Sizes */
[fa-icon="xxsmall"] {
	font-size: 8px !important;
}
[fa-icon="xsmall"] {
	font-size: 12px !important;
}
[fa-icon="small"] {
	font-size: 16px !important;
}
[fa-icon="normal"] {
	font-size: 20px !important;
}
[fa-icon="large"] {
	font-size: 24px !important;
}
[fa-icon="xlarge"] {
	font-size: 32px !important;
}
[fa-icon="xxlarge"] {
	font-size: 40px !important;
}
[mode="dark"] {  
	/* background and text */
	--colors--main--background: var(--dark--background);
	--colors--main--text-primary: var(--dark--text-primary);
	--colors--main--text-secondary: var(--dark--text-secondary);
	/* button primary */
	--button--background: var(--dark--button-background);
	--button--text: var(--dark--button-text);
	--button--border: var(--dark--button-border);
	/* button secondary */
	--button--secondary-background: var(--dark--button-secondary-background);
	--button--secondary-text: var(--dark--button-secondary-text);
	--button--secondary-border: var(--dark--button-secondary-border);
	/* button ghost */
	--button--ghost-background: var(--dark--button-ghost-background);
	--button--ghost-text: var(--dark--button-ghost-text);
	--button--ghost-border: var(--dark--button-ghost-border);
	/* greys */
	--colors--gray--900: var(--dark--grey-900);
	--colors--gray--800: var(--dark--grey-800);
	--colors--gray--700: var(--dark--grey-700);
	--colors--gray--600: var(--dark--grey-600);
	--colors--gray--500: var(--dark--grey-500);
	--colors--gray--400: var(--dark--grey-400);
	--colors--gray--300: var(--dark--grey-300);
	--colors--gray--200: var(--dark--grey-200);
	--colors--gray--100: var(--dark--grey-100);
	--colors--gray--50: var(--dark--grey-50);
}
:root {
	--font-weight--100: 100;
	--font-weight--200: 200;
	--font-weight--300: 300;
	--font-weight--400: 400;
	--font-weight--500: 500;
	--font-weight--600: 600;
	--font-weight--700: 700;
	--font-weight--800: 800;
	--font-weight--900: 900;
}
/* Responsive technique - https://finsweet.com/client-first/docs/fluid-responsive */
html { font-size: 1.125rem; }
@media screen and (max-width:1920px) { html { font-size: calc(0.625rem + 0.41666666666666674vw); } }
@media screen and (max-width:1440px) { html { font-size: 1rem; } }
@media screen and (max-width:479px) { html { font-size: calc(0.8747384937238494rem + 0.41841004184100417vw); } }
/* Container Max Width + Center alignment */
.container-medium, .container-small, .container-large, .container-none {
	width: 100%;
	height: 100%;
	margin-right: auto !important;
	margin-left: auto !important;
}
/* mobile */
@media screen and (max-width: 767px) {
	body {
		----container--global-desktop: var(--container--global-mobile);
	}
}
/* No bounce scroll on top or bottom of page, no horizontal scrolling + Crisper font */
body {
	overscroll-behavior: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
/* Prevents horizontal scroll, but still allows sticky elements */
.main-wrapper {
	overflow: clip;
}
/* Border radius fix SAFARI (add more classes if necessary) */
.br-0, .br-2, .br-4, .br-6, .br-8, .br-10, .br-12, .br-16, .br-20, .br-24, .br-32, .br-40, .br-pill { 
	-webkit-transform: translateZ(0);
}
/* Balance the lines in longer descriptions */
.text-balanced {
	text-wrap: balance;
}
/* Break any link on new row (Default is no wrap) */
a {
	word-wrap: break-word;
}
/* Limit long paragraphs to less lines */
.text-2lines {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.text-4lines {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}
/* Get rid of top margin on first element in any rich text element */
.w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child {
	margin-top: 0 !important;
}
/* Get rid of bottom margin on last element in any rich text element */
.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {
	margin-bottom: 0 !important;
}
/* Navigation Default */
@media only screen and (min-width: 991px) {
	.navigation {
		--ease: cubic-bezier(0.6, 0.6, 0, 1);
		--duration: 1s;
		/*background-color: #fff !important;*/
		transition: background-color var(--duration) var(--ease);
	}
	.navigation .container-medium.nav {
		background-color: rgb(255, 255, 255, 0);
		border-radius: 0px;
		border-width: 1px;
		border-color: transparent;
		/*width: 1519.2px;*/
		/*padding: 16px 96px;*/
		margin-top: 0px;
		transition: width var(--duration) var(--ease),
		margin-top var(--duration) var(--ease),
		padding var(--duration) var(--ease),
		border-color var(--duration) var(--ease);
	}
	.navigation .nav__logo {
		position: relative;
		width: 160px;
		overflow: hidden;
		transition: width var(--duration) var(--ease);
	}
	.navigation.scrolled .logo-mark {
		padding-right: 0;
		transition: padding-right var(--duration) var(--ease);
	}
	.navigation .nav__logo .nav__line {
		position: absolute;
		top: 50%;
		left: 40px;
		transform: translateY(-50%);
		opacity: 0;
		display: none;
	}
	.navigation .nav__links-wrapper {
		transform: translate(0, 0);
		transition: transform var(--duration) var(--ease);
	}
	/* Navigation Scrolled */
	.navigation.scrolled {
		background-color: transparent;
	}
	.navigation.scrolled .container-medium.nav {
		border-radius: 8px;
		width: 60rem;
		margin-top: 0.5rem;
		padding: 0.5rem;
		border-color: var(--colors--grey-200);
		background-color: rgb(255, 255, 255, 0.60);
		backdrop-filter: blur(36px);
	}
	.navigation.scrolled .nav__logo {
		width: 42px;
	}
	.navigation.scrolled .logo-mark {
		padding-right: 10px;
	}
	.navigation.scrolled .nav__logo .nav__line {
		opacity: 1;
		display: block;
	}
	.navigation.scrolled .nav__links-wrapper {
		transform: translate(-3.5rem, 0.2rem);
	}
}
.footer-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: var(--colors--main--text-primary);
	transform-origin: left;
	transform: scaleX(var(--scale-x, 0));
}
.home-hero-underline-one {
	position: relative;
	display: inline;
}
.home-hero-underline-two {
	position: relative;
	display: inline;
}
.home-hero-underline-one::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background-color: #C2E78A;
	transform: scaleX(0);
	transform-origin: bottom left;
	animation: underline-one 0.6s ease-in-out forwards;
}
.home-hero-underline-two::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background-color: #C2E78A;
	transform: scaleX(0);
	transform-origin: bottom left;
	animation: underline-two 0.8s ease-in-out forwards 0.6s;
}
@keyframes underline-one {
	from {
		transform: scaleX(0);
		transform-origin: bottom left;
	}
	to {
		transform: scaleX(1);
		transform-origin: bottom left;
	}
}
@keyframes underline-two {
	from {
		transform: scaleX(0);
		transform-origin: bottom left;
	}
	to {
		transform: scaleX(1);
		transform-origin: bottom left;
	}
}
.blog-filter__scrollbar::-webkit-scrollbar {
  display: none;
}
.blog-filter__scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.sab-title{
	margin-bottom: 1.5rem!important;
}
.sab-p{
	margin-bottom: 2.5rem!important;
}
.sidebar-banner-title{
	margin-bottom: 0.5rem!important;
}
.sidebar-banner-p{
	margin-bottom: 1.5rem!important;
}
.black-sidebar-text{
	color: var(--colors--main--text-primary);
}
.footer-cta-title{
	margin-bottom: 1.5rem;
}
.footer-cta-p{
	margin-bottom: 2.5rem;
}
@media (max-width: 991.98px){
	.blog__tags-filter{
		overflow-x: auto;
		max-width: 100%;
	}
	.blog__tags-filter .p-body.black-sidebar-text{
		white-space: nowrap;
	}
	.blog-filter__scrollbar{
		width: 100%!important;
	}
}
.blog__article-tags-wrap.p-small{
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}
@media (max-width: 767.98px){
	.blog__article-tags-wrap.p-small{
		flex-wrap: wrap;
		gap: 10px;
	}
}
.sticky-toc-mettevo {
	padding: 0px;
}

.article-nav__item {
	color: var(--colors--main--brand-dark);
	cursor: pointer;
	

    font-family: var(--body--font-body);
    font-size: var(--content--p-body-size);
    line-height: var(--content--p-body-height);

    font-weight: 500;

	color: var(--colors--main--text-primary);

	position: relative;

	list-style: none;

	padding:8px 0 5px 10px;
}
.article-nav__item.active{
	font-weight: 800;
	opacity: 1 !important;
}
.article-nav__item.title3{
	padding-left: 20px;
	font-size: 90%;
	opacity: 0.8;
}
.article-nav__item:before{
	height: 100%;
	width: 2px;
	background-color: var(--colors--main--brand-primary);
	content: "";
	display: inline-block;
	position: absolute;
	left:0;
	top:0;
}
.toc-container{
	width: 100%;
}
.mettevo-toc-title{
	font-size: var(--h5--size);
	line-height: var(--h5--line-height);
	letter-spacing: var(--h5--letter-spacing);
	font-weight: var(--h5--font-weight);
	margin-top: 0;
}
@media (max-width: 991.98px){
	.toc-container{
		display: none!important;
	}
}
#search-suggestions{
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: white;
	border: 1px solid #ccc;
	max-height: 200px;
	overflow-y: auto;
	display: none;
	z-index: 9999;
	box-sizing: border-box;
}
.blog__search-wrapper{
	position: relative; 
	width: 300px; 
	max-width: 100%;
}
.mettevo-share-buttons{
	display: flex; 
	gap: 10px;
	margin-bottom: 10px;
	margin-left: auto;
	justify-content: flex-end;
}
.mettevo-share-buttons button{
	background-color: transparent;
}