/*
Theme Name: Villa Chakamani
Theme URI: 
Author: 
Author URI: 
Description: 
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: villa-chakamani
Tags: 
*/

/* ---------------------------------------- CSS MOBILE ---------------------------------------- */

/* --------------------------- GENERAL --------------------------- */
/* menu button style */
.vc-btn .gspb-buttonbox-textwrap {
  gap: var(--wp--preset--spacing--x-small);
}


/* general button style */
.vc-btn {
  text-decoration: none !important;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 28px 10px 40px;
  /* on laisse de la place pour la bulle à gauche */
  font-size: 14px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
  overflow: visible;
}

/* Icône flèche */
.vc-btn .gspb-buttonbox-icon {
  position: relative;
  z-index: 2;
  /* au-dessus du contour animé */
}

/* Texte */
.vc-btn .gspb-buttonbox-text {
  position: relative;
  z-index: 2;
}

/* Contour animé : état normal = petit cercle autour de la flèche */
.vc-btn::before {
  content: "";
  position: absolute;
  left: 0%;
  /* centre à peu près la bulle sur la flèche */
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  /* largeur = hauteur → cercle */
  height: 30px;
  border: 1px solid var(--wp--preset--color--custom-burgundy);
  border-radius: 999px;
  /* forme capsule quand on élargit */
  transition: width 0.5s ease-in-out, left 0.5s ease-in-out;
  z-index: 1;
}

/* Survol : le cercle s'étire en capsule qui englobe tout le bouton */
.vc-btn:hover::before,
.vc-btn:focus-visible::before {
  width: 100%;
  /* prend toute la largeur du bouton */
  left: 0;
  /* repart du bord gauche */
}

/* ---------------------------------------- CSS TABLETTE ---------------------------------------- */

@media screen and (min-width:768px) {}

/* ---------------------------------------- CSS DESKTOP ---------------------------------------- */

@media screen and (min-width:1024px) {


}

/* ---------------------------------------- CSS LARGE DESKTOP ---------------------------------------- */

@media screen and (min-width:1441px) {

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

  /* largeur colonne centrale */

  .gspb_row__content {
    max-width: 1300px !important;
  }

}