/*
Theme Name: laulne
Theme URI: 
Author: Studio Marmite
Author URI: 
Description: Theme de l'Aulne
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 7.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: laulne
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/* header */

header.wp-block-template-part {
    position: sticky;
    top: 0;
    z-index: 1;
}

@media (max-width: 991px) {
    body.scrolled header.wp-block-template-part {
        background-color: var(--wp--preset--color--base);
    }
}

@media (min-width: 992px) {
    body.scrolled header.wp-block-template-part {
        width: var(--wp--preset--spacing--50);
        height: calc(var(--wp--preset--spacing--20) * 2 + 2.5rem);
        overflow: hidden;
    }
}

.header-logo {
    height: 2.5rem;
}

.header-logo .has-elegante-classica-font-family {
    -webkit-text-stroke: .25px;
}

.wp-block-buttons > .wp-block-button.header-contact {
    display: inline-flex;
    align-items: center;
}

.header-contact a {
    display: flex;
    align-items: center;
}

.header-contact svg {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
}

@media (max-width: 991px) {
    .header-contact svg {
        margin-left: .75rem;
    }
}

@media (max-width: 767px) {
    .header-contact svg {
        margin-left: 0;
    }

    .header-contact a {
        font-size: 0 !important;
        flex-direction: column;
    }
}

@media (min-width: 992px) {
    .wp-block-buttons > .wp-block-button.header-contact {
        --offset-margin: calc((var(--wp--preset--spacing--50) + 1.5rem) / 2);
        margin-right: calc(var(--offset-margin) * -1);
    }

    .header-contact a svg {
        margin-left: calc(var(--offset-margin) - 1.5rem);
    }
}

/* menu toggle */

.header-menu .wp-block-navigation__responsive-container-close,
.header-menu .wp-block-navigation__responsive-container-open {
    display: flex;
    align-items: center;
    margin-left: -6px;
    position: static;
}

.header-menu .wp-block-navigation__responsive-container-close {
    height: 2.5rem;
}

.header-menu .wp-block-navigation__responsive-container-close svg,
.header-menu .wp-block-navigation__responsive-container-open svg {
    width: 32px;
    height: 32px;
    margin-right: .5rem;
}

@media (min-width: 768px) {
    .header-menu .wp-block-navigation__responsive-container-close::after,
    .header-menu .wp-block-navigation__responsive-container-open::after {
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 500;
    }

    .header-menu .wp-block-navigation__responsive-container-close::after {
        content: 'Fermer';
    }

    .header-menu .wp-block-navigation__responsive-container-open::after {
        content: 'Menu';
    }
}

@media (min-width: 992px) {
    .header-menu .wp-block-navigation__responsive-container-close,
    .header-menu .wp-block-navigation__responsive-container-open {
        --offset-margin: calc((var(--wp--preset--spacing--50) + 32px) / 2);
        margin-left: calc(var(--offset-margin) * -1);
    }

    .header-menu .wp-block-navigation__responsive-container-close svg,
    .header-menu .wp-block-navigation__responsive-container-open svg {
        margin-right: calc(var(--offset-margin) - 32px);
    }
}

/* modal menu */

@media (min-width: 992px) {
    html.has-modal-open {
        overflow: initial !important;
    }

    html.has-modal-open main, html.has-modal-open footer {
        pointer-events: none;
    }
}

@media (min-width: 768px) {
    .header-menu .wp-block-navigation__responsive-container{
        max-width: 300px;
        box-shadow: 0 0 0 4000px #fff4;
    }
}

.header-menu .wp-block-navigation__responsive-container.is-menu-open{
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
}

.header-menu.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open{
  background-color:var(--wp--preset--color--contrast-2);
}

.header-menu.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open{
  color:var(--wp--preset--color--base)
}

@keyframes overlay-menu__fade-in-animation-left {
  0%{
    opacity:0;
    transform:translateX(-2rem);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

@media not (prefers-reduced-motion){
    .header-menu .wp-block-navigation__responsive-container.is-menu-open{
        animation:overlay-menu__fade-in-animation-left .1s ease-out;
    }
}

.header-menu .wp-block-navigation__responsive-container ul{
    font-size: var(--wp--preset--font-size--large);
}

@media (min-width: 992px) {
    .header-menu .wp-block-navigation__responsive-container ul{
        font-size: 2rem;
    }
}

/* blocks style */

.is-style-section-hero,
.is-style-section-full {
    /* full height minus header */
    min-height: calc(100vh - (var(--wp--preset--spacing--20) * 2 + 2.5rem));
}

@media (min-width: 992px) {
    .is-style-section-full {
        min-height: 100vh;
    }
}

@media (max-width: 767px) {
    .is-style-section-hero {
        padding: 0 !important;
    }
}

.is-style-section-full,
.is-style-section-hero {
    display: flex;
}

.is-style-section-full > *,
.is-style-section-hero > * {
    flex-grow: 1;
}

@media (max-width: 767px) {
    .is-style-responsive-row {
        flex-direction: column;
    }
}

.is-style-mr-overflow {
    margin-right: calc(var(--wp--preset--spacing--50) * -1) !important;
}

.wp-block-button.is-style-btn-arrow-right > .wp-block-button__link {
	padding: 0 1rem 0 0;
    color: var(--wp--preset--color--contrast);
    background-color: transparent;
    font-size: inherit;
    position: relative;
    transition: .2s;
}

.wp-block-button.is-style-btn-arrow-right > .wp-block-button__link::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border: solid 2px;
    border-left: none;
    border-bottom: none;
    transform: rotate(45deg);
    position: absolute;
    bottom: -5px;
    right: 0;
    transition: inherit;
}

.wp-block-button.is-style-btn-arrow-right > .wp-block-button__link:hover::before {
    right: -1rem;
    color: var(--wp--preset--color--wine-light);
}

.wp-block-button.is-style-btn-arrow-right > .wp-block-button__link::after {
    content: '';
    display: block;
    border-bottom: solid 2px;
    margin-top: .5rem;
    width: calc(100% + 1rem);
    transition: inherit;
}

.wp-block-button.is-style-btn-arrow-right > .wp-block-button__link:hover::after {
    width: calc(100% + 2rem);
    color: var(--wp--preset--color--wine-light);
}

.wp-block-button.is-style-btn-arrow-down > .wp-block-button__link,
.wp-block-button.is-style-btn-read-more > .wp-block-button__link {
	padding: 0 1.5rem 0 0;
    color: var(--wp--preset--color--contrast);
    background-color: transparent;
    font-size: inherit;
    position: relative;
    transition: .2s;
}

.wp-block-button.is-style-btn-arrow-down > .wp-block-button__link::before,
.wp-block-button.is-style-btn-read-more > .wp-block-button__link::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border: solid 2px;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
    position: absolute;
    bottom: 5px;
    right: 0;
    transition: inherit;
}

.wp-block-button.is-style-btn-arrow-down > .wp-block-button__link:hover::before,
.wp-block-button.is-style-btn-read-more > .wp-block-button__link:hover::before {
    bottom: 0;
    color: var(--wp--preset--color--wine-light);
}

.wp-block-button.is-style-btn-arrow-down > .wp-block-button__link::after,
.wp-block-button.is-style-btn-read-more > .wp-block-button__link::after {
    content: '';
    display: block;
    position: absolute;
    border-right: solid 2px;
    right: 5px;
    top: 5px;
    bottom: 5px;
    transition: inherit;
}

.wp-block-button.is-style-btn-arrow-down > .wp-block-button__link:hover::after,
.wp-block-button.is-style-btn-read-more > .wp-block-button__link:hover::after {
    top: 0;
    bottom: 0;
    color: var(--wp--preset--color--wine-light);
}

.wp-block-button.is-style-btn-arrow-back > .wp-block-button__link {
	padding: 0 0 0 1.5rem;
    color: var(--wp--preset--color--contrast);
    background-color: transparent;
    font-size: inherit;
    position: relative;
    transition: .2s;
}

.wp-block-button.is-style-btn-arrow-back > .wp-block-button__link::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border: solid 2px;
    border-right: none;
    border-top: none;
    transform: rotate(45deg);
    position: absolute;
    bottom: 5px;
    left: 0;
    transition: inherit;
}

.wp-block-button.is-style-btn-arrow-back > .wp-block-button__link:hover::before {
    left: -5px;
    color: var(--wp--preset--color--wine-light);
}

.wp-block-button.is-style-btn-arrow-back > .wp-block-button__link::after {
    content: '';
    display: block;
    position: absolute;
    border-top: solid 2px;
    left: 0;
    top: 50%;
    width: 15px;
    transition: inherit;
}

.wp-block-button.is-style-btn-arrow-back > .wp-block-button__link:hover::after {
    left: -5px;
    width: 22px;
    color: var(--wp--preset--color--wine-light);
}

body .is-style-bg-mask {
    background-image: none !important;
    background-color: transparent !important;
    position: relative;
    z-index: 0;
}

.is-style-bg-mask::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--background-mask-color);
    mask-image: var(--background-image-url);
    mask-position: center top;
    mask-repeat: no-repeat;
    mask-size: contain;
    z-index: -1;
}

/* common */

.word-break-keep {
    word-break: keep-all;
}

.position-relative {
    position: relative;
}

.mt-auto {
    margin-top: auto;
}

@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }
}

/* scroll-snap */

html:not(.block-editor-iframe__html) {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

.is-style-section-hero,
.home footer.wp-block-template-part {
    scroll-snap-align: end;
}

.is-style-section-full {
    scroll-snap-align: start;
}

@media (max-width: 991px) {
    .is-style-section-full {
        scroll-margin-top: calc(var(--wp--preset--spacing--20) * 2 + 2.5rem);
    }
}

/* slider */

.vertical-slider-bar {
    position: fixed;
    top: calc(var(--wp--preset--spacing--20) * 2 + 2.5rem);
    bottom: calc(var(--wp--preset--spacing--20) * 2 + 2.5rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    left: calc(var(--wp--preset--spacing--50) / 2 - 1px);
    opacity: 0;
    visibility: hidden;
    transition: .2s;
}

@media (max-width: 991px) {
    .vertical-slider-bar {
        justify-content: center;
        left: calc(var(--wp--preset--spacing--50) - 5px);
    }
}

@media (max-width: 767px) {
    .vertical-slider-bar {
        display: none;
    }
}

.vertical-slider-bar.show {
    opacity: 1;
    visibility: visible;
}

.vertical-slider-bar a {
    display: block;
    width: 3px;
    height: 2rem;
    background-color: var(--wp--preset--color--contrast);
    margin-bottom: .5rem;
    opacity: 0.7;
}

.vertical-slider-bar a.current {
    background-color: var(--wp--preset--color--wine-light);
    opacity: 1;
}

.vertical-slider-bar a:hover {
    opacity: 1;
}

/* wines */

.wine-scroll {
    overflow-x: auto;
    scrollbar-width: none;
    width: 100%;
}

.wine-wrapper {
    --wine-img-height: calc(100vh - (var(--wp--preset--spacing--40) * 2));
    --wine-img-width: calc(var(--wine-img-height) * 0.86);
    --wine-gap: calc(var(--wine-img-width) * 0.75);

    background-size: auto var(--wine-img-height) !important;
    flex-shrink: 0;
    flex-basis: 100%;
}

.wine-row {
    gap: var(--wine-gap) !important;
}

@media (max-width: 1499px) {
    .wine-wrapper {
        background-position: 110% center !important;
        font-size: 0.9em;
    }

    .wine-row {
        gap: 1rem !important;
        padding-right: var(--wine-gap);
        flex-direction: column;
    }
}

@media (max-width: 991px) {
    .wine-wrapper {
        --wine-img-height: calc(50vh - (var(--wp--preset--spacing--40) * 2));

        background-position: right var(--wp--preset--spacing--40) !important;
        font-size: 1em;
    }

    .wine-row {
        padding-right: 0;
    }

    .wine-row h2.wp-block-heading {
        min-height: var(--wine-img-height);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .wine-wrapper {
        --wine-img-height: calc(60vh - (var(--wp--preset--spacing--40) * 2));

        background-position: center var(--wp--preset--spacing--40) !important;
    }

    .wine-row {
        padding-top: var(--wine-img-height);
    }

    .wine-row h2.wp-block-heading {
        min-height: 0;
        display: block;
        text-align: center;
    }
}

.wine-row > * {
    width: 100%;
    flex-basis: 100%;
}

.wine-desc-tab {
    flex-shrink: 0;
    width: calc(100vw - (var(--wp--preset--spacing--50) * 2));
    max-height: calc(100vh - (var(--wp--preset--spacing--40) * 2));
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    overflow-y: auto;
    font-size: 0.9em;
}

.wine-tabs {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}

.wine-tabs-header {
    display: flex;
    gap: 1rem;
}

.wine-tab-title {
    cursor: pointer;
    font-family: var(--wp--preset--font-family--elegante-classica);
    font-size: var(--wp--preset--font-size--large);
    border-bottom: transparent 2px solid;
}

.wine-tab-title.current {
    border-bottom: 2px solid;
    color: var(--wp--preset--color--contrast);
}

.wine-tabs-content {
    flex-shrink: 1;
}

.wine-tab-content {
    display: none;
}

.wine-tab-content:first-child {
    display: block;
}

.wine-tab-content .wp-block-list {
    list-style: none;
    padding: 0;
}

main .plant-wrapper {
    background-color: var(--plant-background-color) !important;
}

.plant-wrapper .prefix{
    font-weight: 600;
    font-family: var(--wp--preset--font-family--elegante-classica);
}

.plant-svg svg{
    width: 100%;
    max-width: 15rem;
    height: auto;
}

.plant-svg svg path{
    fill: var(--plant-front-color);
}