/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- offset for scrolling */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.el-anchor .el-anchor-target {
    --el-anchor-top-offset: calc(var(--template-top-height) + 1rem);
}
.bh-bemode .el-anchor .el-anchor-target {
    --el-anchor-top-offset: calc(var(--template-top-height) + 1rem + 50px);
}
@media only screen and (max-width:799.98px) {
    .el-anchor .el-anchor-target {
        --el-anchor-top-offset: calc(var(--template-top-height) + 1rem + var(--el-anchor-toggler-height));
    }
    .bh-bemode .el-anchor .el-anchor-target {
        --el-anchor-top-offset: calc(var(--template-top-height) + 1rem + var(--el-anchor-toggler-height) + 50px);
    }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- anchor styles (be- & fe-mode) */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.el-anchor.bhElement {
    min-height: 2px;
    margin-bottom: 0 !important;
}
.bhe-state-editing .el-anchor.bhElement {
    min-height: 20px;
}
.el-anchor .anchor-container {
    position: relative;
    width: 100%;
}
.bh-bemode .anchor-container {
    border-bottom: 2px dashed #666666;
    opacity: 0.4;
}
.anchor-icon {
    position: absolute;
    left: -3rem;
    top: 0px;
}
.anchor-name {
    text-align: center;
    display: none;
}
.bhe-state-editing .anchor-name {
    display: block;
}
.bhe-state-editing .anchor-container {
    opacity: 1;
}
.bh-femode .el-anchor .anchor-container {
    opacity: 0;
    height: 0px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- page content with anchor menu */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- desktop */

@media only screen and (min-width:800px) {
    .el-anchor-navigation-loaded {
        --el-anchor-content-gap: clamp(3rem , 6vw, 13.5rem);
        --el-anchor-menu-width: clamp(22rem, 30vw, 34.5rem);
        --el-anchor-menu-sticky-offset: calc(var(--template-top-height) + 4rem);

        .content-inner {
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-start;
            align-items: flex-start;
            gap: var(--el-anchor-content-gap);

            > .bhContainer {
                position: relative;
                width: calc(100% - var(--el-anchor-menu-width) - (var(--el-anchor-content-gap) / 2));
                order: 1;
            }

            > .bhContainer::before {
                content: '';
                width: 1px;
                height: 100%;
                position: absolute;
                right: calc(var(--el-anchor-content-gap) * -0.5);
                top: 0;
                background-color: var(--root-color-10);
            }

            > .el-anchor-menu {
                flex-shrink: 0;
                width: calc(var(--el-anchor-menu-width) - (var(--el-anchor-content-gap) / 2));
                order: 2;
            }
        }
    }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- adjust Elements with bh-width-max */

@media only screen and (min-width:1291px) {
    .el-anchor-navigation-loaded .content-inner > .bhContainer > .bh-centered.bh-width-max,
    .el-anchor-navigation-loaded .newsdetail-content-events > .bhContainer > .bh-centered.bh-width-max,
    .el-anchor-navigation-loaded .newsdetail-inquiry-inner > .bhContainer > .bh-centered.bh-width-max  {
        width: calc(100% + 8rem);
    }
}
@media only screen and (max-width:1290px) and (min-width:1024px) {
	.el-anchor-navigation-loaded .content-inner > .bhContainer > .bh-centered.bh-width-max,
	.el-anchor-navigation-loaded .newsdetail-content-events > .bhContainer > .bh-centered.bh-width-max,
	.el-anchor-navigation-loaded .newsdetail-inquiry-inner > .bhContainer > .bh-centered.bh-width-max  {
		width: calc(100% + 6rem);
	}
}
@media only screen and (max-width:1023px) and (min-width:800px) {
	.el-anchor-navigation-loaded .content-inner > .bhContainer > .bh-centered.bh-width-max,
	.el-anchor-navigation-loaded .newsdetail-content-events > .bhContainer > .bh-centered.bh-width-max,
	.el-anchor-navigation-loaded .newsdetail-inquiry-inner > .bhContainer > .bh-centered.bh-width-max  {
		width: calc(100% + 3rem);
	}
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- mobile */

@media only screen and (max-width:799.98px) {
    .el-anchor-navigation-loaded {
        --el-anchor-menu-width: 100%;
        --el-anchor-position-left: 0;
        --el-anchor-position-right: auto;
        --el-anchor-position-bottom: auto;
        --el-anchor-position-top: var(--template-top-height);
        --el-anchor-toggler-height: 6.9rem;
        --el-anchor-toggler-width: 100%;

        &.scrolled .top-inner {
            box-shadow: none;
        }

        &.scrolled .el-anchor-menu {
            box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.15);
            -webkit-box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.15);
            transition: ease-out box-shadow 0.4s;
        }
    }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- anchor menu */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.el-anchor-menu {
	height: auto;
}

.el-anchor-menu-inner {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--bhf-gap-s);
}

.el-anchor-menu .anchor-menu-item {
    width: 100%;
    padding: 1rem 0;
    font-size: 1.9rem;
    line-height: 1.5;
    color: var(--root-color-100);
    border-top: 1px solid var(--root-color-10);
    text-decoration: none;
    transition: ease-in color 0.3s;
    cursor: pointer;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- desktop menu */

@media only screen and (min-width:800px) {
	.el-anchor-menu {
		width: var(--el-anchor-menu-width);
		position: sticky;
		top: var(--el-anchor-menu-sticky-offset);
	    
        .el-anchor-menu-headline {
            color: var(--primary-color-100);
            font-size: 1.4rem;
            line-height: 1.2;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            margin-top: 0px;
            margin-bottom: 1.8rem;
        }

        /* .anchor-menu-item {
            width: 100%;
            padding: 1rem 0;
            font-size: 1.9rem;
	        line-height: 1.5;
            color: var(--root-color-100);
            border-top: 1px solid var(--root-color-10);
        } */
        .el-anchor-menu-toggler {
            display: none;
            visibility: hidden;
        }
        .el-anchor-menu-inner {
            width: 100%;
            display: flex;
            flex-flow: column nowrap;
            justify-content: flex-start;
            align-items: flex-start;
            /* gap: var(--bhf-gap-s); */
        }
    }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- mobile menu */

@media only screen and (max-width:799.98px) {
	.el-anchor-menu {
		width: var(--el-anchor-menu-width);
		position: fixed;
		top: var(--el-anchor-position-top);
		bottom: var(--el-anchor-position-bottom);
		left: var(--el-anchor-position-left);
		right: var(--el-anchor-position-right);
		margin-right: 0;
		z-index: 99;
        background-color: white;
        transition: ease-in box-shadow 0.4s;
	}
    .el-anchor-menu-headline {
        display: none;
    }
	.el-anchor-menu .anchor-menu-item {
		opacity: 0;
		transition: ease-in opacity 0.3s;
	}
	.open.el-anchor-menu .anchor-menu-item {
		opacity: 1;
		transition: ease-in opacity 0.3s 0.4s;
	}
	.el-anchor-menu .anchor-menu-item,
	.el-anchor-menu .anchor-menu-item:hover {
		color: var(--color-text-invert);
	}
	.el-anchor-menu-toggler {
		position: relative;
        visibility: visible;
		color: var(--primary-color-100);
        border-top: 1px solid var(--root-color-10);
		height: var(--el-anchor-toggler-height);
		width: var(--el-anchor-toggler-width);
		display: flex;
		flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 1.2rem;
        padding: 0 var(--website-padding-100);
		cursor: pointer;
		z-index: 2;
        transition: ease-in background-color 0.4s;
	}
    .el-anchor-menu.open .el-anchor-menu-toggler {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.60) 0%, rgba(0,0,0,0.05) 49.28%);
        transition: ease-out background-color 0.4s;
    }
    .el-anchor-menu-toggler-icon {
        font-size: 24px;
    }
    .el-anchor-menu-toggler-text {
        color: var(--primary-color-100);
        font-size: 1.4rem;
        line-height: 1.2;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

	.el-anchor-menu-inner {
		position: absolute;
        top: 100%;
        left: 0;
		padding: 1.2rem 2.4rem;
		width: var(--el-anchor-menu-width);
		height: auto;
		box-sizing: border-box;
		overflow: hidden;
		background-color: white;
		transform: scaleY(0);
		opacity: 0;
		transform-origin: left top;
		pointer-events: none;
		transition: ease-in all 0.4s 0.3s;
		z-index: 1;
	}
	.open .el-anchor-menu-inner {
		transform: scaleY(1);
		opacity: 1;
		pointer-events: all;
		transition: ease-out all 0.4s;
	}
    .el-anchor-menu .anchor-menu-item {
        padding: 1.2rem 0;
    }
    .el-anchor-menu .anchor-menu-item:first-child {
        border-top: none;
    }
}