/*
Theme Name:		PHWE
Theme URI: 		http://phwe.swiss
Version: 		1.17
Author: 		mig
Author URI: 	http://migagentur.ch
*/

@font-face {
    font-family: 'Neue Montreal';
    src: url('assets/fonts/NeueMontreal-Regular.woff2') format('woff2'),
        url('assets/fonts/NeueMontreal-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Montreal';
    src: url('assets/fonts/NeueMontreal-Medium.woff2') format('woff2'),
        url('assets/fonts/NeueMontreal-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Montreal';
    src: url('assets/fonts/NeueMontreal-Light.woff2') format('woff2'),
        url('assets/fonts/NeueMontreal-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

body {
	-moz-osx-font-smoothing: grayscale;
	/* -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased; */
    letter-spacing: 0.03em;
}


/*
 * Text and navigation link styles.
 * Necessary until the following issue is resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/27075
 */



.wp-site-blocks > .entry-content {
	/* padding: 5.75rem 0 */
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25ch;
}

a:hover,
a:focus {
	text-decoration-style: dashed;
}

a:active {
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-item a:focus {
	text-decoration: underline;
	text-decoration-style: solid;
}

/*
 * Search and File Block button styles.
 * Necessary until the following issues are resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/36444
 * https://github.com/WordPress/gutenberg/issues/27760
 */

.wp-block-search__button,
.wp-block-file .wp-block-file__button {
	background-color: var(--wp--preset--color--primary);
	border-radius: 0;
	border: none;
	color: var(--wp--preset--color--background);
	font-size: var(--wp--preset--font-size--medium);
	padding: calc(.667em + 2px) calc(1.333em + 2px);
}

/*
 * Button hover styles.
 * Necessary until the following issue is resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/27075
 */

.wp-block-search__button:hover,
.wp-block-file .wp-block-file__button:hover,
.wp-block-button__link:hover {
	opacity: 0.90;
}

/*
 * Alignment styles.
 * These rules are temporary, and should not be relied on or
 * modified too heavily by themes or plugins that build on
 * Twenty Twenty-Two. These are meant to be a precursor to
 * a global solution provided by the Block Editor.
 *
 * Relevant issues:
 * https://github.com/WordPress/gutenberg/issues/35607
 * https://github.com/WordPress/gutenberg/issues/35884
 */

.wp-site-blocks,
body > .is-root-container,
.edit-post-visual-editor__post-title-wrapper,
.wp-block-group.alignfull,
.wp-block-group.has-background,
.wp-block-cover.alignfull,
.is-root-container .wp-block[data-align="full"] > .wp-block-group,
.is-root-container .wp-block[data-align="full"] > .wp-block-cover {

}

.wp-site-blocks .alignfull,
.wp-site-blocks > .wp-block-group.has-background,
.wp-site-blocks > .wp-block-cover,
.wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background,
.wp-site-blocks > .wp-block-template-part > .wp-block-cover,
body > .is-root-container > .wp-block-cover,
body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background,
body > .is-root-container > .wp-block-template-part > .wp-block-cover,
.is-root-container .wp-block[data-align="full"] {

	width: 100%;
}

/* Blocks inside columns don't have negative margins. */
.wp-site-blocks .wp-block-columns .wp-block-column .alignfull,
.is-root-container .wp-block-columns .wp-block-column .wp-block[data-align="full"],
/* We also want to avoid stacking negative margins. */
.wp-site-blocks .alignfull:not(.wp-block-group) .alignfull,
.is-root-container .wp-block[data-align="full"] > *:not(.wp-block-group) .wp-block[data-align="full"] {

	width: inherit;
}

/*
 * Responsive menu container padding.
 * This ensures the responsive container inherits the same
 * spacing defined above. This behavior may be built into
 * the Block Editor in the future.
 */

.wp-block-navigation__responsive-container.is-menu-open {
	padding-top: var(--wp--custom--spacing--outer);
	padding-bottom: var(--wp--custom--spacing--large);
	padding-right: var(--wp--custom--spacing--outer);
	padding-left: var(--wp--custom--spacing--outer);
}



/* THEME */




html, body {
	overflow-x: hidden;
}


html, body {
	font-size: 14px;
	line-height: 125%;
    font-weight: 300 !important;
}

@media (min-width: 600px) {
	html, body {
		font-size: 17px !important;
		line-height: 125%
	}
}





header {
    position: fixed;
    z-index: 99999;
    width: 100%;
    top: 0;
}

.is-scrolling header {
    background: #fff;
}

    /* header > .wp-block-group.has-background-background-color {
        background-color: transparent !important
    } */

    header .wp-block-site-logo img {
        width: 11.5rem !important;
        height: auto;
    }

    .frontend header .wp-block-site-logo img {
        display: none;
    }

    .frontend header .wp-block-site-logo a {
        content: "";
        display: block;
        width: 9rem !important;
        height: auto;
        aspect-ratio: 3 / 1;
        background: url("https://projects.botanibot.com/phwe/app/uploads/2023/08/PHWE_Logo_neg_weiss_SH.png") no-repeat center left;
        background-size: contain;
    }

        .frontend header .wp-block-site-logo a {
            background-image: url("https://projects.botanibot.com/phwe/app/uploads/2023/08/PHWE_Logo.png")
        }

        @media (min-width: 600px) {
            .frontend header .wp-block-site-logo a {
                width: 11.5rem !important;
            }
        }

h1,
h2,
h3,
h4,
h5  {
	text-transform: uppercase;
}


@media (max-width: 1000px) {
    h1, h2 {
        font-size: 3rem;
        line-height: 120%;
    }
}

@media (max-width: 600px) {
    h2 {
        font-size: 2.5rem;
        line-height: 120%;
    }
}


h3, h4 {
    color: #77891a;
}

h5 + p {
    margin-block-start: 0 !important
}

.entry-content > .wp-block-group,
.entry-content > .wp-block-cover {
	margin: 0 !important
}

.entry-content > .wp-block-cover .wp-block-cover__inner-container {
    max-width: var(--wp--style--global--content-size) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.entry-content > .wp-block-cover h1 {
    margin-bottom: 1em;
}

@media (min-width: 782px) {
    .entry-content > .wp-block-cover h1 {
        margin-bottom: 3em;
    }
}

    h1 em,
    h2 em,
    .is-nav h2 a {
        font-style: normal;
        position: relative;
    }

    h1 em *,
    h2 em *,
    .is-nav h2 a * {
        position: relative;
        z-index: 9;
    }

        h1 em::before,
        h2 em::before,
        .is-nav h2 a::before {
            content: "";
            display: block;
            width: 100%;
            position: absolute;
            height: 0.25em;
            background: #98ae22;
            opacity: 0.8;
            bottom: 0.2em;
            z-index: 1;
            transition: all 0.8s ease-out;
            transition-delay: 1s;
        }

        .is-nav h2 a::before {
            transition: all 0.2s ease-out;
            transition-delay: 0s;
            opacity: 1;
            background: #aec727;
        }

        .frontend h1 em::before,
        .frontend h2 em::before,
        .frontend .is-nav h2 a::before {
            width: 0%;
        }

        .frontend .is-in-viewport h1 em::before,
        .frontend .is-in-viewport h2 em::before,
        .frontend .is-nav h2 a:hover::before {
            width: 100%;
        }

.entry-content > .wp-block-group {
	padding-top: 4em;
	padding-bottom: 4em
}

    @media (min-width: 600px) {
        .entry-content > .wp-block-group {
        	padding-top: 7em;
        	padding-bottom: 7em
        }
    }

.entry-content > .wp-block-group.has-base-background-color {
	padding-top: 5em;
	padding-bottom: 5em
}

.wp-block-image.alignfull {
	width: 100% !important;
}

.wp-block-query {
	margin-top: 0 !important;
	margin-bottom: 2.33rem !important
}

.entry-content {
	margin-top: 0 !important
}

.wp-block-template-part {
	margin-top: 0
}

.wp-block-navigation__responsive-dialog {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: 0 !important;
    background-color: #000000;
}




.has-small-font-size,
.has-medium-font-size,
.has-large-font-size,
.has-x-large-font-size {
    line-height: 125%;
}

@media (max-width: 600px) {
    .has-large-font-size {
        font-size: 1.3rem;
        line-height: 120%;
    }
}

.circle-holder {
    width: 80%;
    /* aspect-ratio: 1/1; */
    padding: 0 !important;
    position: relative;
    z-index: 0;
    padding-top: 6rem !important;
    transition: all 0.5s ease-out;
}

    @media (min-width: 600px) {
        .circle-holder {
            width: 50%;
            padding-top: 6rem !important;
        }
    }

    @media (min-width: 1000px) {
        .circle-holder {
            width: 33%;
            padding-top: 8rem !important;
        }
    }

    .frontend .circle-holder {
        opacity: 0;
        transform: scale(0);
    }

    .frontend .circle-holder.is-in-viewport {
        opacity: 1;
        transform: scale(1);
    }

    .circle-holder::before {
        content: "";
        display: block;
        background: rgb(152,174,34);
        background: linear-gradient(90deg, rgba(152,174,34,1) 0%, rgba(119,137,26,1) 100%);
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0.9
    }

    .frontend .circle-holder::before {
        width: 200%;
        aspect-ratio: 1 / 1;
        height: auto;
        border-radius: 100%;
        transform: translateX(-28%);
    }


        .frontend #success-stories .circle-holder::before {
            width: 170%;
        }

    .circle-holder > * {
        z-index: 9;
        position: relative;
    }





footer {
	/* margin-top: 1.33rem !important; */
    font-weight: 400 !important

}
	footer a {
		color: inherit;
		text-decoration: none;
	}

	.has-text-color > a,
	mark > a {
		color: inherit !important;
	}


footer > .wp-block-group:first-child > *:first-child {
    max-width: 1900px !important;
    margin: 0 auto;
}



footer .wp-block-social-links {
    margin-bottom: 0.5em !important;
}


footer figure.is-logo {
    padding-bottom: 0.5rem !important;
}


@media (max-width: 781px) {

    footer .wp-block-group .wp-block-columns .wp-block-column:nth-child(2) > * {
        justify-content: flex-start !important;
        text-align: left !important;
    }
}

#main {
    padding-top: 15rem;
}

#main h3 {
    padding-left: 4.5rem;
    position: relative;
}

    @media (min-width: 782px) and (max-width: 1000px) {
        #main h3 {
            font-size: 1.25rem !important;
            line-height: 120% !important;
        }
    }

#main h3 img {
    position: absolute;
    width: 7.5rem !important;
    height: auto;
    left: -0.4rem;
    top: 0.9em;
    transform: translateY(-100%);
}

@media (max-width: 781px) {
    #main .wp-block-columns .wp-block-column + .wp-block-column {
        margin-top: 10rem;
    }
}

#main .wp-block-columns .wp-block-column h3 img {
    transition: all 0.5s ease-out;
}

#main .wp-block-columns .wp-block-column:nth-child(1) h3 img { transition-delay: 0.5s }
#main .wp-block-columns .wp-block-column:nth-child(2) h3 img { transition-delay: 1.5s }
#main .wp-block-columns .wp-block-column:nth-child(3) h3 img { transition-delay: 2.5s }

.frontend #main .wp-block-columns .wp-block-column h3,
.frontend #main .wp-block-columns .wp-block-column p {
    color: transparent !important;
    transition: all 0.4s ease-out;
}

.frontend #main .wp-block-columns .wp-block-column p {
    transform: translateY(-2rem);
}

#main .wp-block-columns .wp-block-column:nth-child(1) h3 { transition-delay: 1s }
#main .wp-block-columns .wp-block-column:nth-child(2) h3 { transition-delay: 2s }
#main .wp-block-columns .wp-block-column:nth-child(3) h3 { transition-delay: 3s }

.frontend #main.is-in-viewport .wp-block-columns .wp-block-column h3 {
    color: var(--wp--preset--color--secondary) !important
}

#main .wp-block-columns .wp-block-column:nth-child(1) p { transition-delay: 1.2s }
#main .wp-block-columns .wp-block-column:nth-child(2) p { transition-delay: 2.2s }
#main .wp-block-columns .wp-block-column:nth-child(3) p { transition-delay: 3.2s }

.frontend #main.is-in-viewport .wp-block-columns .wp-block-column p {
    color: #000 !important;
    transform: translateY(0);
}

.frontend #main .wp-block-columns .wp-block-column h3 img {
    opacity: 0;
    transform: translateY(-150%);
}

.frontend #main.is-in-viewport .wp-block-columns .wp-block-column h3 img {
    opacity: 1;
    transform: translateY(-100%);
}


.wp-block-media-text {

}

    .wp-block-media-text__content,
    .entry-content > .wp-block-cover:first-child .wp-block-group.has-background-background-color {
        background: #fff;
        box-shadow: 0 0 1em rgba(0,0,0,0.2);
        padding: 2em !important;
        position: relative;
    }

    .entry-content > .wp-block-cover:first-child .wp-block-group.has-background-background-color {
        margin-bottom: 2rem;
    }

        .wp-block-media-text__content > *:first-child {
            margin-block-start: 0 !important;
        }

        .wp-block-media-text__content > *:last-child {
            margin-block-end: 0 !important;
        }

        .wp-block-media-text__content::before,
        .entry-content > .wp-block-cover:first-child .wp-block-group.has-background-background-color::after {
            content: "";
            display: block !important;
            position: absolute;
            left: -4rem;
            top: -2.5rem;
            width: 4rem;
            height: calc(100% + 5rem);
            background: rgb(152,174,34);
            background: linear-gradient(180deg, rgba(152,174,34,1) 0%, rgba(119,137,26,1) 100%);
            mix-blend-mode: multiply;
            transition: all 0.5s ease-out;
            transition-delay: 1s;
            transform: scaleY(0);
            transform-origin: top center;
        }

        .entry-content > .wp-block-cover:first-child .wp-block-group.has-background-background-color::after {
            opacity: 0.85
        }

        .wp-block-media-text.is-in-viewport .wp-block-media-text__content::before,
        .entry-content > .wp-block-cover:first-child .wp-block-group.has-background-background-color.is-in-viewport::after {
            transform: scaleY(1);
        }


.is-style-rounded {
    position: relative;
    max-width: 90%;
}

.is-style-rounded img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
}

    .is-style-rounded::before {
        content: "";
        display: block !important;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 4rem;
        background: rgb(152,174,34);
        background: linear-gradient(90deg, rgba(152,174,34,1) 0%, rgba(119,137,26,1) 100%);
        mix-blend-mode: multiply;
    }


.wp-block-group.slider .wp-block-group {
    width: 100%;
    padding: 2rem 2rem 2rem 1.5rem !important
}

    @media (min-width: 782px) {
        .wp-block-group.slider .wp-block-group {
            padding: 2rem 6rem 2rem 1.5rem !important
        }
    }

.team-slider-holder {
    margin: 5rem auto !important;
    position: relative;
}

.frontend .team-slider-holder {
    display: none;
}

.frontend .team-slider-holder.is-visible {
    display: block;
}



.team-slider-holder .wp-block-group.team-slider {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 0 1.5rem 0;
}

    @media (min-width: 782px) {
        .team-slider-holder .wp-block-group.team-slider {
            margin-left: 4rem !important;
            margin-right: 4rem !important;
            padding: 0 1.5rem 1.5rem 0;
        }
    }

.team-slider::before {
    content: "";
    display: block !important;
    position: absolute;
    left: -4rem;
    top: -2.5rem;
    width: 4rem;
    height: calc(100% + 5rem);
    background: rgb(152,174,34);
    background: linear-gradient(180deg, rgba(152,174,34,1) 0%, rgba(119,137,26,1) 100%);
    mix-blend-mode: multiply;
}

.team-slider-holder .flickity-page-dots {
    position: relative;
    margin: 0 !important;
    transform: translateY(-1.5rem);
    text-align: right;
}

    @media (max-width: 781px) {
        .team-slider-holder .flickity-page-dots {
            right: 1.5rem !important
        }
    }

    .team-slider-holder .flickity-page-dots .dot {
        background: #77891a;
        width: 0.9rem;
        height: 0.9rem;
        margin: 0 0.25rem;
    }

#philippe,
#alessandro,
#michel {
    cursor: pointer;
}

#philippe *::before,
#alessandro *::before,
#michel *::before{
    transition: all 0.2s ease-out;
}

#philippe:hover *::before,
#alessandro:hover *::before,
#michel:hover *::before {
    height: 100%;
}


.team-slider-close {
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    top: -1.25rem;
    right: -1.25rem;
    background: url(assets/images/close.svg) no-repeat center;
    background-size: contain;
    cursor: pointer;
    z-index: 999;
    transition: all 0.2s ease-out;
}

    @media (min-width: 782px) {
        .team-slider-close {
            top: 1.5rem;
            right: 5.5rem;
        }
    }

    .team-slider-close:hover {
        transform: scale(0.85);
    }

.references-holder {
    padding-left: 0;
    position: relative;
}

    @media (min-width: 1000px) {
        .references-holder {
            padding-left: 0;
            padding-right: 4rem;
        }
    }

.frontend .references-holder .wp-block-media-text {
    box-shadow: 0 0 1em rgba(0,0,0,0.2);
    background: #fff;
    display: none;
    flex-flow: row wrap;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    margin-bottom: 6rem !important;
    transition: all 0.2s ease-out;
}


    .frontend .references-holder .wp-block-media-text.is-active {
        display: block;
        opacity: 0;
        position: absolute;
    }

    @media (min-width: 600px) {
        .frontend .references-holder .wp-block-media-text.is-active {
            display: flex;
        }
    }

    .frontend .references-holder .wp-block-media-text.is-active.is-visible {
        opacity: 1
    }

.references-holder .wp-block-media-text .wp-block-media-text__content {
    background: #ededed;
    box-shadow: none;
    flex: 1;
    padding: 2rem 2rem 4rem 2rem !important
}


.references-holder .wp-block-media-text .wp-block-media-text__media {
    background: #fff;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    box-sizing: border-box;
}

    @media (min-width: 600px) {
        .references-holder .wp-block-media-text .wp-block-media-text__media {
            width: 33.33%;
            padding: 0;
        }
    }

    .references-holder .wp-block-media-text .wp-block-media-text__media img {
        width: 80%;
        height: 80%;
        object-fit: contain;
        object-position: center;

    }

.references-holder .wp-block-media-text .wp-block-media-text__content::before {
    left: auto;
    right: -4rem;
}


    .references-holder .wp-block-media-text .wp-block-media-text__content .close {
        position: absolute;
        width: 2.5rem;
        height: 2.5rem;
        bottom: 1.5rem;
        right: 1.5rem;
        background: url(assets/images/close.svg) no-repeat center;
        background-size: contain;
        cursor: pointer;
        z-index: 999;
        transition: all 0.2s ease-out;
    }


        .references-holder .wp-block-media-text .wp-block-media-text__content .close:hover {
            transform: scale(0.85);
        }


.references-overview {
    display: flex;
    flex-flow: row wrap;
    gap: 2rem;
    margin-block-start: 0;
}

    .references-overview > * {
        width: calc(50% - 1rem);
        height: auto;
        aspect-ratio: 2 / 1;
        object-fit: contain;
        object-position: center;
        cursor: pointer;
        opacity: 0.5;
        transition: all 0.2s ease-out;
    }

    @media (min-width: 370px) {
        .references-overview {
            gap: 2rem;
        }

        .references-overview > * {
            width: calc(33.33% - 1.334rem);
        }
    }

    @media (min-width: 782px) {
        .references-overview {
            gap: 2rem 6rem;
        }

        .references-overview > * {
            width: calc(25% - 4.5rem);
        }
    }

    .references-overview > *:hover,
    .references-overview > *.is-active {
        opacity: 1;
    }



.nav-toggle {
    height: 1.5rem;
    width: 3rem;
    cursor: pointer;
    z-index: 9999;
    position: relative;
    display: block;
}

    .nav-toggle span {
        display: block;
        width: 100%;
        margin: 0 auto 0.65rem auto;
        height: 2px;
        background: #fff;
        transition: all 0.2s ease-out;
    }

        .frontend .nav-toggle span {
            background: var(--wp--preset--color--secondary)
        }

    .nav-open .nav-toggle span {
        background: #fff !important;
    }

    .nav-open .nav-toggle {
        height: 3rem;
    }

    .nav-open .nav-toggle span:nth-child(1) {
        margin-top: 1.5rem;
        transform: rotate(-135deg);
    }

    .nav-open .nav-toggle span:nth-child(2) {
        transform: scaleX(0);
    }

    .nav-open .nav-toggle span:nth-child(3) {
        transform: rotate(-225deg);
        margin-top: -1.5rem;
    }



header .wp-block-group.is-layout-flex {
    position: relative;
}

.frontend .is-nav {
    position: absolute;
    right: 0;
    top: 0;
    color: #fff !important;
    padding-top: 3rem;
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s ease-out;
    transform-origin: top right;
}

    @media (min-width: 800px) {
        .frontend .is-nav {
            padding-top: 4rem;
        }
    }

.nav-open.frontend .is-nav {
    transform: scale(1);
    opacity: 1;
    pointer-events: all;
}


    .is-nav h2,
    .is-nav h3 {
        color: #fff !important;
        font-size: 2rem;
        line-height: 120%;
        margin-block-start: 0.25em !important;
    }

        @media (min-width: 800px) {
            .is-nav h2,
            .is-nav h3 {
                font-size: 2.8rem;
                line-height: 120%;
            }
        }

        .is-nav a {
            text-decoration: none;
        }

        .is-nav > * {
            z-index: 9;
            position: relative;
        }


        .is-nav::before {
            content: "";
            display: block;
            background: rgb(152,174,34);
            background: linear-gradient(90deg, rgba(152,174,34,1) 0%, rgba(119,137,26,1) 100%);
            position: absolute;
            z-index: 1;
            left: 20%;
            top: 0%;
            width: 100%;
            height: 100%;
        }

        .frontend .is-nav::before {
            width: 180%;
            aspect-ratio: 1 / 1;
            height: auto;
            border-radius: 100%;
            transform: translateX(-28%) translateY(-10%);
        }

        @media (max-width: 799px) {
            .frontend .is-nav::before {
                width: 250%;
            }
        }


    .is-nav .wp-block-social-links {
        gap: 0.5em !important;
    }

    .entry-content ul {
        padding-left: 1em;
    }
    .entry-content ul li {
        /* list-style-type: none;
        position: relative; */
        list-style-type: none;
        position: relative;
    }

    .entry-content ul li::before {
        content: "";
        display: block;
        width: 0.25em;
        height: 0.25em;
        background: #98ae22;

        border-radius: 100%;
        position: absolute;
        left: -0.8em;
        top: 0.5em;
    }

        .entry-content ul li li::before {
            width: 0.18em;
            height: 0.18em;
            top: 0.6em;
        }


.wp-block-media-text__content img {
    transition: all 0.25s ease-out;
}

.wp-block-media-text__content img:hover {
    transform: scale(1.2);
}