/*
Theme Name: Muraluxe
Description: Thème pour Muraluxe
Author: agence m / Yanick & Co
Version: 2025
*/


/* VARIABLES
   ----------------------------- */

:root {
   --golden-sand: #c7a873;
   --beige: #f2f0eb;
   --beige-contrast: #a69f93;
   --beige-contrast-bg: #e9e7e3;
   --beige-contrast-border: #d8d6d2;
   --brown: #9C9487;
   --grey: #8c9199;
   --white: #FFF;
   --black: #000;
   --red: #7A291F;
   --dark-transparent: rgba(0,0,0,0.45);
   --light-transparent: rgba(255,255,255,0.20);
   --dark-border: rgba(0,0,0,0.15);
   --field-bg: #fff;
   --fancybox-border-radius: 8px;

   --h1-size: clamp(44px, 5vw, 75px);
   --h2-size: 54px; 
   --h3-size: 44px;
   --h4-size: 42px;
   --h5-size: 30px;
   --h6-size: 13px;
   --paragraph-size: 16px;
   --menu-size: 16px;
   --btn-size: 13px;
   --btn-padding: 16px 22px;
   --small-text-size: 14px;
   --badge-size: 12px;
   --small-label-size: 10px;
   --font-main: "Montserrat", sans-serif;
   --font-title:  "Playfair Display", serif;

   --container-padding: 50px;
   --row-padding-xs: 45px;
   --row-padding-sm: 100px;
   --row-padding-md: 130px;
   --row-padding-lg: 150px;
   --size-wrap: 1600px;

}




/* FONTS
   ----------------------------- */

html, body{
   height: 100% !important;
}

body {
   font-size: 16px;
   line-height: 22px;
   font-family: var(--font-main);
   font-weight: 400;
   color: var(--black);
   background: var(--beige);
}

p {
   font-size: var(--paragraph-size);
   line-height: 1.375;
   font-family: var(--font-main);
   font-weight: 400;
}

h1,
.h1 {
   font-size: var(--h1-size);
   line-height: 1.06;
   font-family: var(--font-title);
   font-weight: 400;
}

h2,
.h2 {
   font-size: var(--h2-size);
   line-height: 1.08;
   font-family: var(--font-title);
   font-weight: 400;
}

h3,
.h3 {
   font-size: var(--h3-size);
   line-height: 1.08;
   font-family: var(--font-title);
   font-weight: 400;
}

h4,
.h4 {
   font-size: var(--h4-size);
   line-height: 1.08;
   font-family: var(--font-title);
   font-weight: 400;
}

h5,
.h5 {
   font-size: var(--h5-size);
   line-height: 1.25;
   font-family: var(--font-title);
   font-weight: 400;
}

h6,
.h6 {
   font-size: var(--h6-size);
   line-height: 1.15;
   font-family: var(--font-main);
   font-weight: 400;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}


/* GENERAL
   ----------------------------- */

/* General */

.paragraph {
   font-size: var(--paragraph-size);
   line-height: 1.375;
}

a {
   transition: all 0.2s ease;
}


.flickity-enabled:focus {
    outline: none; 
}

.simpleParallax {
   height: 100% !important;
   width: 100% !important;
}

.paragraph p{
   font-size: var(--paragraph-size);
   padding-bottom: 15px;
}

.paragraph p:last-child{
   padding-bottom: 0;
}

/* Fancybox */

.fancybox__counter{
   font-size: 14px !important;
}
.fancybox__container,
.fancybox__toolbar{
   --carousel-button-width: 32px !important;
   --carousel-button-height: 32px !important;
   --carousel-button-svg-width: 15px !important;
   --carousel-button-svg-height: 15px !important;
}

.fancybox__thumbs .carousel__slide .fancybox__thumb::after {
   border-width: 2px;
   border-color: var(--white);
}

.fancybox__caption {
   font-size: var(--paragraph-size);
   line-height: 1.2;
}

.fancybox__content,
.fancybox__image {
  border-radius: 8px !important;
}


/* Container */

.container {
  max-width: var(--size-wrap);
  padding: 0 var(--container-padding);
  margin: 0 auto;
  width: 100%;
}


/* BUTTONS
   ----------------------------- */

.main-btn {
   min-width: 230px;
   color: var(--black);
   cursor: pointer;
   justify-content: space-between;
   align-items: center;
   gap: 55px;
   padding: var(--btn-padding);
   font-size: var(--btn-size);
   line-height: 1;
   text-decoration: none;
   display: inline-flex;
   position: relative;
   font-family: var(--font-main);
   text-transform: uppercase;
   font-weight: 500;
}

.main-btn .main-text {
   white-space: nowrap;
   line-height: 1.3;
   margin-top: 1px;
}

.main-btn [data-animate-chars] {
   overflow: hidden;
   position: relative;
   display: inline-block;
}

.main-btn [data-animate-chars] span {
   display: inline-block;
   position: relative;
   text-shadow: 0 1.3em currentColor;
   transform: translateY(0) rotate(0.001deg);
   transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.main-btn:hover [data-animate-chars] span {
   transform: translateY(-1.3em) rotate(0.001deg);
}

.main-btn:hover .dot {
   transform: rotate(45deg);
}

.main-btn .main-bg {
   background-color: var(--golden-sand);
   border-radius: 99px;
   position: absolute;
   inset: 0;
   transition: inset 0.6s cubic-bezier(0.625, 0.05, 0, 1);
   will-change: inset;
}
.main-btn.btn-white .main-bg{
   background-color: var(--white);
}

.main-btn:hover .main-bg {
   inset: 0.125em;
}


.main-btn .dot {
   position: relative;
   width: 8px;
   height: 8px;
   border-radius: 1px;
   background: var(--black);
   flex-shrink: 0;
   transition: transform 0.8s cubic-bezier(0.625, 0.05, 0, 1);
}

/* CF7 FORMS
   ----------------------------- */


input::-webkit-input-placeholder {
  color: var(--black);
  opacity: 0.5;
}

input:-moz-placeholder {
  color: var(--black);
  opacity: 0.5;
}

input::-moz-placeholder {
  color: var(--black);
  opacity: 0.5;
}

input:-ms-input-placeholder {
  color: var(--dark-grey);
  opacity: 0.5;
}

.wpcf7-turnstile {
   width: 100%;
}

.wpcf7-form{
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

.wpcf7-form label{
   font-size: var(--badge-size);
   line-height: 1.15;
   font-family: var(--font-main);
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   color: var(--black);
}
.wpcf7-form .wpcf7-form-control-wrap {
    display: block;
    margin-top: 5px;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
   width: 100%;
   font-family: var(--font-main);
   font-size: 14px;
   font-weight: 400;
   line-height: 1;
   color: var(--black);
   background: var(--field-bg);
   padding: 18px;
   border-radius: 4px;
   border: 1px solid var(--beige-contrast-border);
}


.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form select:focus,
.wpcf7-form .textarea-wrap.is-focus textarea {
   box-shadow: none;
   border-color: var(--beige-contrast-border);
}

.wpcf7-form textarea {
   height: 160px;
   line-height: 1.3 !important;
   resize: none;
}


.wpcf7-form .control-group{
   position: relative;
   width: 100%;
   margin: 8px 0;
   user-select: none;
}
.wpcf7-form .control-group.first {
   margin-top: 0;
}

.wpcf7-form .control-group.mid{
   width: calc(50% - 10px);
}

.wpcf7-form .submit-wrap{
   width: 100%;
   margin-top: 15px;
   display: flex;
   align-items: center;
   gap: 20px;
   justify-content: flex-start;
}

.wpcf7-form .submit-wrap .main-btn {
   align-self: flex-end;
}

.wpcf7-form .submit-wrap input{
   display: none;
}

.wpcf7-form .wpcf7-not-valid-tip {
   display: none;
}

.wpcf7-form input[type="text"].wpcf7-not-valid,
.wpcf7-form input[type="email"].wpcf7-not-valid,
.wpcf7-form input[type="tel"].wpcf7-not-valid,
.wpcf7-form .textarea-wrap.has-error textarea,
.wpcf7-form select.wpcf7-not-valid {
    border-color: var(--red) !important;
}

.wpcf7-form .wpcf7-response-output{
   font-size: 14px;
   line-height: 1.4;
   background: transparent;
   border: 0 !important;
    padding: 40px 0 0 0 !important;
    margin: 0 auto !important;
   width: 100%;
   text-align: center;
}

.wpcf7-spinner::before {
   display: none;
}

.wpcf7-form .wpcf7-spinner{
   margin: 0 !important;
   background-image: url('images/loader.svg') !important;
   background-color: transparent !important;
   width: 24px !important;
   height: 24px !important;
   display: block;
}


/* RESPONSIVE
   ----------------------------- */

@media (max-width: 1300px) {
  :root {
      --h2-size: 48px; 
      --h3-size: 40px;
      --h4-size: 34px;
      --h5-size: 26px;
      --paragraph-size: 15px;
      --menu-size: 15px;
      --btn-size: 12px;
      --btn-padding: 14px 20px;
      --small-text-size: 13px;
      --badge-size: 11px;
      --row-padding-sm: 90px;
      --row-padding-md: 110px;
      --row-padding-lg: 120px;
  }
}

@media (max-width: 1024px) {
  :root {
      --h2-size: 42px; 
      --h3-size: 34px;
      --h4-size: 28px;
      --h5-size: 24px;
      --row-padding-xs: 45px;
      --row-padding-sm: 80px;
      --row-padding-md: 90px;
      --row-padding-lg: 100px;
      --container-padding: 30px;
  }
   .wpcf7-form textarea,
   .wpcf7-form input[type="email"],
   .wpcf7-form input[type="tel"],
   .wpcf7-form input[type="text"]{
      padding: 16px;
      font-size: 13px;
   }


}

@media (max-width: 767px) {
  :root {
      --h1-size: 38px;
      --h2-size: 36px; 
      --h3-size: 26px;
      --h4-size: 22px;
      --h5-size: 20px;
      --paragraph-size: 14px;
      --menu-size: 14px;
      --btn-padding: 12px 18px;
      --small-text-size: 12px;
      --badge-size: 10px;
      --small-label-size: 9px;
      --row-padding-xs: 40px;
      --row-padding-sm: 70px;
      --row-padding-md: 80px;
      --row-padding-lg: 90px;
      --container-padding: 20px;
  }
   .main-btn .dot {
      width: 7px;
      height: 7px;
   }
   .wpcf7-form .control-group.mid {
      width: 100%;
   }
   .submit-wrap {
      margin-top: 15px;
   }
   .wpcf7-form .wpcf7-response-output {
      font-size: 13px;
   }
   .wpcf7-form label {
      font-size: 10px;
   }
   .main-btn {
      min-width: 0;
   }
}


@media (max-width: 500px) {
  :root {
      --h1-size: 35px;
      --h2-size: 32px; 
  }
}

@media (max-width: 450px){}