/** DEFAULTING **/

.bs-wrapper {
	position: relative;
	z-index: 0;
	color: #DBD2C9;
}

.bs-wrapper,
.bs-wrapper p,
.bs-wrapper .wp-block-heading,
.bs-wrapper h1 , 
.bs-wrapper h2 , 
.bs-wrapper h3 , 
.bs-wrapper h4 , 
.bs-wrapper h5 , 
.bs-wrapper h6  {
	font-family: opensans;
}

.bs-wrapper h2.wp-block-heading {
	font-size: 2em;
}
.bs-wrapper h3.wp-block-heading {
	font-size: 1.8em;
}
.bs-wrapper h4.wp-block-heading {
	font-size: 1.6em;
}
.bs-wrapper h5.wp-block-heading {
	font-size: 1.4em;
}
.bs-wrapper h6.wp-block-heading {
	font-size: 1.2em;
}

.bs-wrapper a {
	font-family: congenial;
	color: #DBD2C9;
}

.bs-wrapper p {
	margin: 0;
}

:root {
	--wp--style--global--content-size: 100%;
	--naiv-content-size: 850px;
}

.bs-exp-inner,
.bs-exp-header {
	width: var(--naiv-content-size);
	max-width: var(--max-content-size);
}

.bs-exp-inner {
	display: flex;
	flex-direction: column; 
	align-items: center; 
}


/** STYLE **/

/** BS INTRO **/

.bs-btns-container {
	position:relative;
	width: 100%;
	height: 330px;
	min-width:330px;
}

.bs-btns-container:before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	width: 205px;
	aspect-ratio: 1;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url('/naiv/assets/icons/branch/branch.svg');
}

.bs-btn {
	width: 70px;
	aspect-ratio:1;

	margin-top: auto;

	transform: scale(1);
	transition: transform .12s;
}

.bs-btn i {
	display:block;
	width: 100%;
	height: 100%;

	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	filter: invert(.8);
}

.bs-btn:hover {
	transform: scale(1.2);
}

.bs-btn.bs-btn-menu {
  position: unset;
  width: unset;
  aspect-ratio: unset;
  margin-top: unset;
  transform: unset;
  transition: unset;
}

.bs-exp-header .branch-root a {
	/** text-decoration: none; **/
}
.bs-exp-header .branch-name {
	background: rgba(249, 255, 128, .25);
}


.bs-content-menu .bs-exp-header {
	display:none;
}

.bs-btn .label {
	position: absolute;
	white-space: nowrap;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 100%);
	text-align: center;
	
	font-family: naivcursed;
	font-size: 22px;
}

/** pos **/

.bs-btns {
	position: absolute;
	left: 50%;
	bottom:0;
}

.bs-btn {
	position: absolute;
}

.branches-count-2 .branch-0 {
	right: 80px;
	bottom: 80px;
}
.branches-count-2 .branch-1 {
	left: 35px;
	bottom: 30px;
}

.branches-count-3 .branch-0 {
	right: 95px;
	bottom: 85px;
}
.branches-count-3 .branch-1 {
	left: -40px;
	bottom: 115px;
}
.branches-count-3 .branch-2 {
	left: 80px;
	bottom: 75px;
}

.branches-count-3 .bs-btn i {
	transform: scale(.8);
}

.branches-count-3 .label {
	font-size: 18px;
}
/** excep **/

.branches-count-3 .bs-btn.illustr-navire i {
	transform: scale(.9);
}

/** icons **/

.bs-btn-menu i {
	background-image: url('/naiv/assets/icons/branch/branch-simplified.svg');
}

.bs-btn.not-home-branch i {
	background-image: var(--illustr);
}


/** more icons **/

.illustr-paperplane i:before {
	content: '';
	width: 165px;
	aspect-ratio: 1;
	position: absolute;
	top: -126%;
	left: -162%;
	
	background-image: url('/naiv/assets/icons/branch/trace.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.bs-btn-menu i:before {
	content: '';
	width: 35px;
	top: 0;
	right: -12px;
	aspect-ratio: 1;
	position: absolute;
	
	
	background-image: url('/naiv/assets/icons/back-arrow-filled.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/** intro text **/

.bs-intro {
	margin-bottom: var(--total-menu-area-height);
}

.bs-intro-text {
	text-align: center;
	margin-bottom: 20px;
}

.bs-intro-text .highlight {
	font-weight: 700;
	color: var(--mapBgColor);
		filter: 
		saturate(25%) 
		brightness(1.75) 
		hue-rotate(35deg);	
}

/** BS CONTENT **/

.bs-content {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.nb-branch:has(.bs-explanation), .bs-explanation {
	min-height: calc(100dvh - var(--total-menu-area-height));
	position: relative;
	display: flex;
	flex-direction: column; 
	align-items: center; 

	overflow-x: clip;

	transition:  opacity .25s, width .25s;
	width:0;
	height:0;
	opacity: 0;
}

.nb-branch:has(.bs-explanation.expanded), .bs-explanation.expanded {
	width:100%;
	opacity: 1;
	height:auto;
}

:root {
	--dynamic-offset: 0;
}

.bs-explanation .bs-exp-inner > * {
	margin-right: var(--dynamic-offset);
	
}



.bs-content-menu {
	display:flex;
	justify-content:center;
	align-items:center;
}


/** BS ISLANDS **/

/** global **/

.nb-ile:has(.int-island-container .expanded) {
	z-index: 10;
}


.int-island .textBox {
	position: absolute;
	left: var(--islTextBox-x);
	top: var(--islTextBox-y);
	width: var(--islTextBox-w);
	height: var(--islTextBox-h);
	
	text-align:center;
	color: black;
}

:root {
	--islWidth: 300px;
}


.int-island-container {
	--islTextBox-x: 0;
	--islTextBox-y: 0;
	--islTextBox-w: 100%;
	--islTextBox-h: 100%;
	
	transition: 
		width .5s,
		height .5s,
		margin-top .5s;
	
	width: var(--islWidth);
	height: var(--islWidth);
	
	margin-bottom: 50px !important;
}


.int-island:before {
	content: '';
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	
	background: var(--mapBgColor);
		filter: 
		saturate(25%) 
		brightness(1.75) 
		hue-rotate(35deg);	
	mask: var(--islSvgPath);
	mask-size: 100% 100%;
	-webkit-mask: var(--islSvgPath);
	-webkit-mask-size: 100% 100%;
	
}
.int-island {
	filter: drop-shadow(2px 2px 5px rgba(0,0,0,.5));
	
	width: var(--islWidth);
	
	position: absolute;
	top: 50%;
	left: 50%;
	
	
	z-index:5;
	aspect-ratio: 1;

	transition: 
		transform .12s,
		width .5s;
	transform: translate(-50%, -50%) scale(1);
}


.int-island:hover {
	transform: translate(-50%, -50%) scale(1.2);
}

.int-island-container .title p {
	font-size: 14px;
	font-family: shikamaru;
	text-transform: uppercase;
}
.int-island-container .title p::first-letter {
	color: #8A0000;
	font-size: 18px;
}

/** zoomable **/

.int-island-container.zoomable.expanded {
	margin-top: -50%;
	--islWidth: 850px;
}

.int-island.zoomable.expanded {
	transform: translate(-50%, -50%) scale(1);
}

.int-island.zoomable .textBox .content {
	opacity: 0;
	transition: opacity .5s;
}
.int-island.zoomable.expanded .textBox .content {
	opacity: 1;
}


.int-island.zoomable .textBox .content p {
	font-size: 13px;
}

/** side popup **/
.island-content.side-popup:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: var(--mapBgColor);
		filter: 
		saturate(25%) 
		brightness(2) 
		hue-rotate(35deg);	
	opacity: .6;
}

.int-island-container.side-popup {
	position: relative;
	left:0;
	transition:
		left		.25s;
}
/* 
.int-island-container.side-popup.expanded {
	left: -50%;
} */

.island-content.side-popup {
	position: absolute;
	
	z-index:4;
	
	padding: 10px;
	
	transition:
	opacity		.5s,
    width		.5s,
    max-height	1.5s,
    left		.5s,
    top			.5s,
	transform	0s;
	
	opacity: 0;
	left: var(--islTextBox-center-x);
	top: var(--islTextBox-center-y);
	width:0;
	height:0;
	max-height: 0; 
	transform: translate(-50%, -50%) scale(1); 
	will-change: transform; 
}

.island-content.side-popup.expanded {
	opacity: 1;
	left: 50%;
	top: 50%;
	width:fit-content;
	height:fit-content;
	max-height: 500px; 
	transform: translate(-50%, -50%) scale(1.4, 1.4);
	transition: transform	30s ease-out;
	z-index: 5;
}

.island-content.side-popup .close-cross {
	position: absolute;
	top: 0%;
	left: 100%;
	transform: translate(-50%,-50%);
	
	width:12px;
	height: 12px;
	
	border-radius: 100%;
	
	background: var(--mapBgColor);
		filter: 
		saturate(25%) 
		brightness(2) 
		hue-rotate(35deg);	
	opacity: .6;
}
.island-content.side-popup .close-cross::after {
	content: '';
	background-image:url("/naiv/assets/icons/cross.svg");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	
	width:50%;
	height: 50%;
	
	filter: brightness(0);
	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index:5;
}

@media (max-width: 600px) {
	.island-content.side-popup.expanded,
	.island-content.side-popup {
		position: fixed;
		z-index:10;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%) scale(1); 
	}
	.island-content.side-popup.expanded {
		width: 70dvw;
		max-width: 70dvw;
		transform: translate(-50%, -50%) scale(1.2, 1.2);
	}
}


.island-content .content,
.island-content .title {
	max-width: 100%;
	max-height: 100%;
	overflow: hidden;
	white-space: nowrap;
}
@media (max-width: 600px) {
	.island-content .content,
	.island-content .title {
		white-space: normal;
	}
}

.island-content  p,
.island-content p a {
	font-size: 13px;
	color: black;
}

/** jardin-zen **/

.int-island-container.jardin-zen {
	--islWidth: 100px;
}

.isl-title{
	filter: drop-shadow(2px 2px 5px rgba(0,0,0,.5));
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform:translate(-50%,100%);
	
	font-size: 20px;
	white-space: preserve nowrap;
	margin: 0;
}