/**
 * Theme Name:       Mai Studio
 * Theme URI:        https://bizbudding.com/products/mai-studio-theme/
 * Description:      Mai Studio child theme for the Genesis Framework.
 * Author:           BizBudding
 * Author URI:       https://bizbudding.com/
 * Version:          2.0.2
 * Text Domain:      mai-studio
 * Template:         genesis
 * Template Version: 3.3.2
 * License:          GPL-2.0-or-later
 * License URI:      http://www.gnu.org/licenses/gpl-2.0.html
 */

/* === OVERRIDE BROKEN MAI ENGINE FONT PATHS === */

/* Lato Regular */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap !important;
    src: url('/wp-content/fonts/lato/1ceff43a2cddfa9e50683857fb7749d0') format('woff2') !important;
}

/* Lato Regular Italic */
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
    font-display: swap !important;
    src: url('/wp-content/fonts/lato/53cc0f9a1df937c1a5ea3ce815e8b1918') format('woff2') !important;
}

/* Lato Bold */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap !important;
    src: url('/wp-content/fonts/lato/1e749525e8e3d5246e55964bd093b75b') format('woff2') !important;
}

/* Lato Bold Italic */
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 700;
    font-display: swap !important;
    src: url('/wp-content/fonts/lato/51b6e90f7c4e38cc756a840123196a8e') format('woff2') !important;
}


/* header.min.css | https://lucie.versastyledesign.ca/wp-content/plugins/mai-engine/assets/css/header.min.css?ver=2.37.0.101820250443 */

.site-header {
  /* background: var(--site-header-background,var(--color-header)); */
  background: #5E534A;
}

.menu-item-link {
  --link-text-decoration:var(--menu-item-link-text-decoration,none);
  --link-text-decoration-hover:var(--menu-item-link-text-decoration-hover,none);
  --link-filter-hover:brightness(1);
  align-items:center;
  color:#FAF8F6;
  display:var(--menu-item-link-display,flex);
  flex:var(--menu-item-link-flex,unset);
  justify-content:var(--menu-item-link-justify-content,start);
  max-width:var(--menu-item-link-max-width,100%);
  padding:var(--menu-item-link-padding,var(--spacing-md) var(--spacing-md));
  text-align:var(--menu-item-link-text-align,start);
  width:var(--menu-item-link-width,auto)
}

/* header.min.css | https://lucie.versastyledesign.ca/wp-content/plugins/mai-engine/assets/css/header.min.css?ver=2.37.0.101820250443 */

.title-area {
  /* padding: var(--title-area-padding,var(--spacing-md) 0); */
  	padding: 20px;
	color: #FAF8F6;
}

.site-title:hover {
  /* padding: var(--title-area-padding,var(--spacing-md) 0); */
	color: #C8A46A;
}

/* main.min.css | https://lucie.versastyledesign.ca/wp-content/plugins/mai-engine/assets/css/main.min.css?ver=2.37.0.101820250443 */

.menu-item-link-current, .menu-item-link:focus-visible, .menu-item-link:hover {
  /* color: var(--menu-item-link-color-hover,var(--menu-item-link-color,var(--color-link))); */
  /* filter: var(--menu-item-name-filter-hover,var(--link-filter-hover)); */
	color:#C8A46A !important;
}

/* main.min.css | https://lucie.versastyledesign.ca/wp-content/plugins/mai-engine/assets/css/main.min.css?ver=2.37.0.101820250443 */

.menu-item-link-current, .menu-item-link:focus-visible, .menu-item-link:hover {
  		filter: none;
		color:#C8A46A !important;
}
	
/* Inline | https://lucie.versastyledesign.ca/ */

.has-black-color {
  --body-color: var(--color-black);
  --heading-color: var(--color-black);
}

/* Element | https://lucie.versastyledesign.ca/ */

div.wp-block-group:nth-child(1) > div:nth-child(1) > h2:nth-child(2) {
  Color: #C8A46A !important;
}

/* style.css | https://lucie.versastyledesign.ca/wp-content/themes/mai-studio/style.css?ver=2.0.2.101920252332 */

.menu-item-link {
  /* padding: var(--menu-item-link-padding,var(--spacing-md) var(--spacing-md)); */
}

/* main.min.css | https://lucie.versastyledesign.ca/wp-content/plugins/mai-engine/assets/css/main.min.css?ver=2.37.0.101820250443 */

.menu-item-link {
  /* padding: var(--menu-item-link-padding,var(--spacing-md) var(--spacing-md)); */
  padding: 14px;
}


/* Element | https://lucie.versastyledesign.ca/ */
/*
div.wp-block-button:nth-child(2) {
  /* --button-secondary-color: var(--color-body); */
  /* --button-secondary-background: var(--color-white); */
  /*--button-secondary-background-hover: #e6e6e6;
}
*/

/* =========================================================
   BUTTON RESET – Completely neutralize all inherited styles
   ========================================================= */
button,
.button,
.button:visited,
[type="button"],
[type="submit"],
[type="reset"] {
  all: unset;             /* wipes every style (font, margin, color, etc.) */
  display: inline-block;  /* restore base display */
  cursor: pointer;
  box-sizing: border-box;
  font-family: inherit;
  line-height: normal;
  text-align: center;
  text-decoration: none;
  appearance: none;
}
/* ---------------------------------------------------------
   MAIN LUXURY BUTTON – Gradient gold, elevated look
   --------------------------------------------------------- */
/* The parent container provides the visual button */
.main-luxury-btn {
	color: #FAF8F6;
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg, #c5a679, #a78455);
  border: none;
  border-radius: 50px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
  padding: 0; /* Remove padding from the parent */
}

/* Hover + focus styles on the parent container */
.main-luxury-btn:hover,
.main-luxury-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.35);
  outline: none;
}

/* Active (pressed) styles on the parent container */
.main-luxury-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

/* Subtle highlight overlay on the parent */
.main-luxury-btn::after {
  content: '';
  position: absolute;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.15);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.main-luxury-btn:hover::after {
  opacity: 1;
}

/* Target the link inside the button container to apply clickable area styling */
.main-luxury-btn a {
  display: inline-block;
  color: #FAF8F6;
  padding: 1rem 1.9rem; /* Apply padding to the link */
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}



/* ---------------------------------------------------------
   SECONDARY BUTTON – Transparent with gold border
   --------------------------------------------------------- */
/* Parent container holds visual button styling */
.secondary-btn {
  position: relative;
  display: inline-block;
  background: transparent;
  color: #a78455; /* Keep color on the parent as a fallback */
  border: 2px solid #c5a679;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition: all 0.3s ease;
  overflow: hidden;
  padding: 0; /* Important: Remove padding from parent */
}

/* Hover + focus styles on the parent container */
.secondary-btn:hover,
.secondary-btn:focus-visible {
  background: linear-gradient(90deg, #c5a679, #a78455);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  transform: translateY(-2px);
  outline: none;
}

/* Active styles on the parent container */
.secondary-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

/* Highlight overlay on the parent */
.secondary-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.secondary-btn:hover::after {
  opacity: 1;
}

/* Target the link inside the button to apply clickable area and text styling */
.secondary-btn a {
  display: inline-block; /* Makes link block-like to expand clickable area */
  color: #a78455; /* Also keep color here for specificity */
  padding: 1rem 1.9rem; /* Moved padding here from parent */
  border-radius: 50px; /* Kept here for specific link-level rounding */
  box-sizing: border-box;
}

/* Hover + focus for the link inside */
.secondary-btn:hover a,
.secondary-btn:focus-visible a {
  color: #FAF8F6; /* Change link color on parent hover/focus */
}


/* ---------------------------------------------------------
   TERTIARY BUTTON – Contrast version for photo backgrounds
   --------------------------------------------------------- */
/* Parent container holds visual button styling */
.contrast-btn {
  position: relative;
  display: inline-block;
  background: rgba(0, 0, 0, 0.25); /* Subtle dark base for contrast */
  color: #FAF8F6; /* Keep color on the parent as a fallback */
  border: 2px solid #c5a679;
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  padding: 0; /* Important: Remove padding from parent */
}

/* Hover + focus styles on the parent container */
.contrast-btn:hover,
.contrast-btn:focus-visible {
  background: linear-gradient(90deg, #c5a679, #a78455);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
  outline: none;
}

/* Active styles on the parent container */
.contrast-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

/* Subtle highlight overlay on the parent */
.contrast-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.contrast-btn:hover::after {
  opacity: 1;
}

/* Target the link inside the button to apply clickable area and text styling */
.contrast-btn a {
  display: inline-block;
  color: #FAF8F6; /* Also keep color here for specificity */
  padding: 1rem 1.9rem; /* Moved padding here from parent */
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}


/* Combined styles */
.main-luxury-btn,
.secondary-btn, .contrast-btn {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  background-clip: padding-box;
}

/* Prevent background on text hover/focus */
.main-luxury-btn *, .secondary-btn *, .contrast-btn * {
  background: transparent !important;
  box-shadow: none !important;
}

/* Luxury Primary Button */
.gform_button, .btn-luxury {
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg, #c5a679, #a78455);
  color: #FAF8F6;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.gform_button:hover, .btn-luxury:hover,
.gform_button:focus, .btn-luxury:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  color: #FAF8F6 !important;
}

.gform_button:active, .btn-luxury:active {
  transform: translateY(0);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Micro-interaction overlay */
.gform_button::after, .btn-luxury::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  /*background: rgba(255, 255, 255, 0.2);*/
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* crucial fix */
}

.gform_button:hover::after, .btn-luxury:hover::after {
  opacity: 1;
}

/* Luxury Secondary Button */
.btn-luxury-secondary {
  position: relative;
  display: inline-block;
  background: transparent;
  color: #a78455;
  padding: 0.75rem 1.75rem;
  border: 2px solid #c5a679;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
  cursor: pointer
}

.btn-luxury-secondary:hover,
.btn-luxury-secondary:focus {
  background: linear-gradient(90deg, #c5a679, #a78455);
  color: #FAF8F6 !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
  outline: none;
}

.btn-luxury-secondary:active {
  transform: translateY(0);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}