/*
Theme Name:   Villa Martegani
Description:  Thème pour le site de la Villa Martegani
Author:       Loïc Miralles
Author URI:   http://www.loicmiralles.com/
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  villa-martegani
*/

:root {
  --kross_widget_primary: var(--wp--preset--color--purple) !important;
  --header-height: 79px;
}

footer {
  margin-top: 0px;
}

header > div {
  animation: fixed-header linear auto both;
  animation-timeline: scroll();
  animation-range: 0 100px;
}

header > div * {
  animation: darken-color linear auto forwards;
  animation-timeline: scroll();
  animation-range: 0 100px;
}

@media screen and (max-width: 860px) {
  :root {
    --wp--preset--spacing--60: 5rem !important;
  }

  header > div {
    background-color: white !important;
  }

  header > div * {
    color: black !important;
    border-color: !important;
  }
}

.wpcf7-submit {
  background-color: var(--wp--preset--color--purple);
  border-radius: 0 !important;
  color: var(--wp--preset--color--base);
  font-size: var(--wp--preset--font-size--small);
  border-width: 0;
  color: #fff;
  font-family: var(--wp--preset--font-family--jost);
  line-height: inherit;
  padding-top: calc(0.667em + 2px);
  padding-right: calc(1.333em + 2px);
  padding-bottom: calc(0.667em + 2px);
  padding-left: calc(1.333em + 2px);
  text-decoration: none;
  cursor: pointer;
  border-radius: 4px;
  width: 100%;

  &:hover {
    background-color: var(--wp--preset--color--purple);
    color: var(--wp--preset--color--base);
    border-color: var(--wp--preset--color--purple);
  }

  transition: background-color 0.3s ease-in-out;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  background-color: var(--wp--preset--color--base-2);
  border: rgba(0, 0, 0, 0.1) 1px solid;
  color: #495057;
  font-family: var(--wp--preset--font-family--jost);
  font-size: var(--wp--preset--font-size--medium);
  line-height: inherit;
  padding: 1rem;
  max-width: calc(100% - 2rem);
  width: 100%;
  margin-top: 0.5rem;
}

.wpcf7 label {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
}

.wpcf7 label span {
  display: flex;
}

@keyframes pop-in {
  from {
    opacity: 0.75;
    scale: 0.85;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes pop-out {
  from {
    scale: 1;
  }
  to {
    scale: 0.95;
    border-radius: 1.5rem;
  }
}

@keyframes fade-left {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-down {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-up {
  from {
    transform: translateY(100px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slide-down {
  from {
    transform: translateY(-100px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slide-left {
  from {
    transform: translateX(-30px);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slide-right {
  from {
    transform: translateX(30px);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes fixed-header {
  from {
    background-color: transparent;
    border-color: transparent;
  }

  to {
    background-color: white;
    border-color: #e2e8f0;
  }
}

@keyframes darken-color {
  from {
    color: white;
    border-color: white;
  }

  to {
    color: black;
    border-color: black;
  }
}

.trp-language-switcher {
  width: fit-content;
  height: 55px;
}

.trp-language-switcher > div {
  padding: 0 !important;
  background-color: transparent !important;
}

.trp-language-switcher > div > a {
  padding: 0 !important;
  color: white;
}

.trp-language-switcher-container {
  display: flex;
  align-items: center;
}

@media (max-width: 860px) {
  .hide-on-mobile {
    display: none !important;
  }

  .wp-block-site-logo a {
    width: 180px;
  }
}

.wp-block-gallery.wp-block-gallery-3 {
  gap: var(--wp--preset--spacing--20) !important;
}

.wpseopress-faqs {
  columns: auto 450px;
  gap: var(--wp--preset--spacing--30);
}

.wpseopress-faq {
  transition: 0.3s all ease-in-out;
  overflow: hidden;
}

.wpseopress-faq-question {
  background-color: var(--wp--preset--color--purple);
  color: var(--wp--preset--color--beige);
  padding: var(--wp--preset--spacing--20);
  border: none;
  text-align: left;
}

.wpseopress-faq-answer {
  background-color: var(--wp--preset--color--base-2);
  padding: 0 var(--wp--preset--spacing--20);
  display: block !important;
  padding: var(--wp--preset--spacing--20);
  margin-bottom: var(--wp--preset--spacing--30);
}

.wpseopress-faq-answer p {
  margin: 0;
}

.wpseopress-faq-question {
  margin: 0;
}

.wpseopress-faq-question br {
  display: none;
}

.trp-language-switcher > div {
  border: none !important;
}

.kross-container * {
  font-family: var(--wp--preset--font-family--jost);
}

.kross-container > .kross-transparency {
  background: transparent !important;
  padding: 0px !important;
}

.kross-container .kb-btn {
  letter-spacing: 1px;
}

.kross-container .kb-form-group {
  border: none !important;
}

.kb-btn {
  text-decoration: none;
}

textarea {
  height: 200px;
}

.wpcf7-form p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.grecaptcha-badge {
  display: none !important;
}

.flex-1 {
  flex: 1;
}

.w-fit {
  width: fit-content;
}

.kross-container .form-kross-booking {
  background-color: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(20px) !important;
  font-size: var(--wp--preset--font-size--small) !important;
}

.kb-btn-submit-txt {
  backdrop-filter: blur(20px) !important;
  font-size: var(--wp--preset--font-size--small) !important;
}

.is-style-full-screen {
  align-items: end;
  min-height: 100svh;
  height: 100svh;
}

.wp-block-column:has(> .wp-block-image) {
  max-height: calc(
    100svh - var(--header-height) - var(--wp--preset--spacing--30)
  );
  position: sticky;
  top: calc(var(--header-height) + var(--wp--preset--spacing--20));
}

.wp-block-column:has(> .wp-block-image) .wp-block-image {
  display: flex;
  max-height: calc(
    100svh - var(--header-height) - var(--wp--preset--spacing--30)
  );
}

picture {
  min-height: 100%;
  max-height: 100%;
  display: flex !important;
}

strong {
  font-weight: 600;
}

.wp-block-navigation__responsive-container-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: var(--wp--preset--spacing--30);
  padding-right: var(--wp--preset--spacing--30);
  padding-bottom: var(--wp--preset--spacing--40);
  text-align: center;
  width: fit-content;
  margin: auto;
}

.wp-block-navigation__responsive-container.is-menu-open {
  max-width: 400px !important;
  border-right: 1px solid #e2e8f0;
}

.wp-block-navigation__responsive-container-close {
  top: 8px;
  right: 8px;
}

.animated-title {
  display: inline-block;
  overflow: hidden;
}

.animated-title .word {
  display: inline-block;
  white-space: nowrap;
}

.animated-title .word span {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
}

.animated-title.in-view .word span {
  animation: slideUp 0.5s ease-out forwards;
  animation-delay: calc(0.05s * var(--i));
}

@keyframes slideUp {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

html, body {
  height: auto;
  min-height: 100%;
}