html{
	scrollbar-gutter: auto;
}
body{
	display: flex;
	flex-direction: column;
}
body main{
	flex-grow: 1;
}

/*************************************************************************************************************/
/***** CONTENT ***********************************************************************************************/
/*************************************************************************************************************/

/**************************************************************************************************************/
/***** UI ELEMENTS ********************************************************************************************/
/**************************************************************************************************************/
/***************************/
/***** BUTTONS *************/
/***************************/
.btn.btn--secondary,
a.btn.btn--secondary{
	background-color: hsl(var(--init-secondary-400-hsl));
	border-color: hsl(var(--init-secondary-400-hsl));
}
.btn.btn--secondary:hover,
a.btn.btn--secondary:hover,
.btn.btn--secondary:focus,
a.btn.btn--secondary:focus{
	background-color: hsl(var(--init-secondary-410-hsl));
	border-color: hsl(var(--init-secondary-410-hsl));
}

.btn.btn--text,
a.btn.btn--text{
	all: unset;
	font-family: var(--ff-heading);
	font-size: var(--fs-h4);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media(min-width: 1025px){
	.btn,
	a.btn{
		min-width: 220px;
	}
}

/********************/
/* Select ***********/
/********************/
.select{
	width: 100%;
}
.select-styled{
	background-color: transparent;
	border-radius: var(--br-elements);
}
.select-options{
	border-radius: var(--br-elements);
}

/*************************************************************************************************************/
/***** GLOBAL INTERACTIVE ELEMENTS ***************************************************************************/
/*************************************************************************************************************/
[data-widget="accordion"] .accordion{
	gap: var(--gap-200);
}
[data-widget="accordion"] .accordion-tab{
	border: 0;
}
[data-widget="accordion"] .accordion-head{
	padding-block: var(--gap-500);
	background-color: var(--color-white-50);
}
[data-widget="accordion"] .accordion-tab .accordion--text{
	font-family: var(--ff-heading);
	font-size: var(--fs-h4);
	line-height: var(--lh-heading);
}
[data-widget="accordion"] .accordion-tab[aria-selected="true"] .accordion-head .accordion--icon svg path{
	fill: var(--init-secondary-400);
}

/* Grouped */
[data-widget="accordion"] .accordion-head,
[data-widget="accordion"] .accordion-content .content{
	padding-inline: var(--gap-500);
}
[data-widget="accordion"] .accordion-tab[aria-selected="true"],
[data-widget="accordion"] .accordion-tab[aria-selected="true"] .content{
	background-color: var(--color-white);
}

@media(max-width: 1024px){
	[data-widget="accordion"] .accordion-tab .accordion-head .accordion--icon,
	[data-widget="accordion"] .accordion-tab .accordion-head .accordion--icon svg rect{
		width: 20px;
	}
}
@media(min-width: 1025px){
	[data-widget="accordion"] .accordion-head,
	[data-widget="accordion"] .accordion-content .content{
		padding-inline: var(--gap-600);
	}
}


/*************************************************************************************************************/
/***** HEADER & FOOTER ***************************************************************************************/
/*************************************************************************************************************/
/***********************************************/
/* Common **************************************/
/***********************************************/
header#site-header,
footer#site-footer{
	position: relative;
	padding-inline: var(--padding-container-inline);
}
@media(min-width: 1025px){
	header#site-header,
	footer#site-footer{
		padding-block: var(--gap);
	}
}

/***********************************************/
/* Header **************************************/
/***********************************************/
header#site-header{
	--gap-header: var(--gap-600);
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	height: var(--height-header);
	background-color: var(--color-white);
	z-index: var(--z-header);

	display: flex;
	align-items: center;
}
header#site-header,
header#site-header .container-fluid,
header#site-header .header-group,
header#site-header .header-part,
header#site-header .logo,
header#site-header .logo img,
header#site-header .logo svg{
	transition: var(--trans);
}
header#site-header .header-group{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--gutter, 20px);
}

header#site-header .header-part{
	/* width: 100%; */
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--gap-header);
}
header#site-header .header-part--left{justify-content: flex-start;}
header#site-header .header-part--center{justify-content: center;}
header#site-header .header-part--right{justify-content: flex-end;}

/********************************/
/* Header Navigation ************/
/********************************/
header#site-header .header-navigation nav ul{
	display: flex;
	align-items: center;
	column-gap: var(--gap-header);
	row-gap: var(--gap-100);
	flex-wrap: wrap;
	justify-content: center;
}
header#site-header .header-navigation nav ul li,
header#site-header .header-navigation nav ul li a{
	position: relative;
}
header#site-header .header-navigation nav ul li a,
header#site-header .header-navigation nav ul li a svg path{
	transition: var(--trans);
}
header#site-header .header-navigation nav ul li a{
	/* font-family: var(--ff-heading); */
	font-size: var(--fs-header);
	color: var(--color-heading);
}

/* Item Current */
header#site-header nav ul li.current-menu-item > a::before{
	transform: scaleX(1);
}

/* Item CTA */
header#site-header nav ul li.menu-item--cta a{
	padding: var(--padding-button);
	border: var(--border);
	background-color: var(--init-secondary-400);
	border-color:var(--init-secondary-400);
	border-radius: var(--br-elements);
	font-family: var(--ff-btn);
	font-size: var(--fs-btn);
	line-height: var(--lh-btn);
	text-transform: uppercase;
	color: var(--color-text-white);
}
header#site-header nav ul li.menu-item--cta a:hover,
header#site-header nav ul li.menu-item--cta a:focus{
	background-color: hsl(var(--init-secondary-410-hsl));
	border-color: hsl(var(--init-secondary-410-hsl));
}
header#site-header nav ul li.menu-item--cta a::before{
	content: unset;
}


/********************************/
/* Header Actions ***************/
/********************************/
/* Logo */
header#site-header .logo{
	display: flex;
}
header#site-header .logo img,
header#site-header .logo svg{
	width:auto;
	height: var(--height-logo);
}

/* Button for Navigation Menu */
header#site-header button#navigation-icon{
	display: flex;
	align-items: center;
	gap: var(--gutter);
}
header#site-header button#navigation-icon svg{
	width: var(--size-100, 32px);
}

/*******************/
/* Header [Sticky] */
/*******************/
header#site-header.sticky{
	position: fixed !important;
	position: sticky;
	top: 0;
	height: var(--height-header--sticky);
	/* border-bottom: 1px solid var(--init-grey-300); */
}
header#site-header.sticky .logo img,
header#site-header.sticky .logo svg{
	width: auto;
	height: var(--height-logo--sticky);
}

/*****************/
/* Header [Open] */
/*****************/
header#site-header.open,
header#site-header.closing{
	z-index: var(--z-header-front);
}

@media(max-width: 1024px){
	/* Logo */
	header#site-header .logo img,
	header#site-header .logo svg{
		max-width: var(--col-2);
	}
}

/***********************************************/
/* Footer **************************************/
/***********************************************/
footer#site-footer{
	width: 100%;
	max-width: var(--container-fluid);
	margin-inline: auto;
	padding-block: var(--gap-600);
	padding-inline: var(--padding-container-inline);
	display: flex;
	flex-direction: column;
	gap: var(--gap-600);
	background-color: var(--color-accent);
	font-family: var(--ff-text);
	font-size: var(--fs-footer);
	color: var(--color-text-white);
	color: var( --color-text-grey-200);
}
footer#site-footer .grid{
	align-items: center;
	gap: var(--gutter-600);
}
footer#site-footer .grid-column{
	display: flex;
	justify-content: center;
}
footer#site-footer .grid-column:last-child{
	display: flex;
	flex-direction: column;
	gap: var(--gutter-600);
	align-items: center;
}
footer#site-footer [data-direction="horizontal"] ul{
	display: flex;
	flex-direction: row;
	justify-content: center;
	column-gap: var(--gap-600);
	row-gap: var(--gap-300);
	flex-wrap: wrap;
}
footer#site-footer .logo{
	max-width: 95px;
}
@media(min-width: 1025px){
	footer#site-footer .grid-column{
		justify-content: flex-start;
	}
	footer#site-footer .grid-column:last-child{
		align-items: flex-end;
	}
}


/*************************************************************************************************************/
/***** NOT SUPPORTING ****************************************************************************************/
/*************************************************************************************************************/
/* NOT Supports Clamp */
@supports (not (width: clamp(1px, 1px, 1px))) {

}