/* 
Theme Name: The Studio - Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: The Studio - Elementor Child is a child theme of Hello Elementor, created by The Studio team
Author: JeremyWebb.Dev
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.3
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ===============================
   1. The Studio™ Framework Colors
   =============================== */

:root {
  /* Primary */
  --color-primary: #F7F6F3; /* Alabaster White */

  /* Secondary */
  --color-dark: #2E2E2E;
  --color-burgundy: #72383D;
  --color-navy: #22333D;
  --color-taupe: #AC9C8D;
  --color-sand: #D1C7BD;

  /* Market Identity Palette */
  --color-la: #B3B3B3;
  --color-vegas: #7E4A35;
  --color-palmsprings: #D8936C;
  --color-scottsdale: #9D8A81;

  /* Text Colors */
  --text-dark-bg: #F7F6F3; /* use on dark backgrounds */
  --text-light-bg: #2E2E2E; /* use on light backgrounds */
}

/* ==================================
   2. Split CTA Base Effect
   ================================== */

.studio-split-btn,
.elementor-button.studio-split-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  overflow: visible;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    padding-right 0.4s cubic-bezier(0.23, 1, 0.32, 1);

  /* default palette */
  --split-btn-base-bg: var(--color-burgundy);
  --split-btn-base-text: var(--text-dark-bg);
  --split-btn-hover-bg: var(--color-navy);
  --split-btn-hover-text: var(--text-dark-bg);

  background-color: var(--split-btn-base-bg);
  color: var(--split-btn-base-text);
}

/* ensure Elementor internals inherit button color */
.elementor-button.studio-split-btn,
.elementor-button.studio-split-btn .elementor-button-content-wrapper,
.elementor-button.studio-split-btn .elementor-button-text,
.elementor-button-link.studio-split-btn,
.elementor-button-link.studio-split-btn .elementor-button-content-wrapper,
.elementor-button-link.studio-split-btn .elementor-button-text {
  color: currentColor !important;
}

/* let Elementor’s internal spans inherit */
.studio-split-btn span,
.studio-split-btn .elementor-button-text {
  position: relative;
  z-index: 1;
  color: inherit;
}

/* Arrow bubble */
.studio-split-btn::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--split-btn-base-bg);
  color: var(--split-btn-base-text);
  transform: translateY(-50%) scale(1) rotate(-45deg);
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Hover */
.studio-split-btn:hover,
.studio-split-btn:focus-visible {
  background-color: var(--split-btn-hover-bg);
  color: var(--split-btn-hover-text);
}

.studio-split-btn:hover::after,
.studio-split-btn:focus-visible::after {
  background-color: var(--split-btn-hover-bg);
  color: var(--split-btn-hover-text);
  transform: translateY(-50%) scale(1.1) translateX(60px);
}

/* Focus */
.studio-split-btn:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.4);
  outline-offset: 3px;
}
.studio-split-btn:focus {
  outline: none;
}

/* Remove default Elementor icons */
.elementor-button.studio-split-btn .elementor-button-icon {
  display: none !important;
}

/* ==================================
   3. Color Variants
   ================================== */

/* 3.1 Primary: Burgundy → Navy */
.studio-split-btn--primary {
  --split-btn-base-bg: var(--color-burgundy);
  --split-btn-base-text: var(--text-dark-bg);
  --split-btn-hover-bg: var(--color-navy);
  --split-btn-hover-text: var(--text-dark-bg);
}

/* 3.2 Secondary: Navy → Burgundy */
.studio-split-btn--secondary {
  --split-btn-base-bg: var(--color-navy);
  --split-btn-base-text: var(--text-dark-bg);
  --split-btn-hover-bg: var(--color-burgundy);
  --split-btn-hover-text: var(--text-dark-bg);
}

/* 3.3 Light CTA: Sand → Taupe */
.studio-split-btn--light {
  --split-btn-base-bg: var(--color-sand);
  --split-btn-base-text: var(--text-light-bg);
  --split-btn-hover-bg: var(--color-taupe);
  --split-btn-hover-text: var(--text-light-bg);
}

/* 3.4 Market tags */

/* LA */
.studio-split-btn--la {
  --split-btn-base-bg: var(--color-la);
  --split-btn-base-text: var(--text-light-bg);
  --split-btn-hover-bg: var(--color-dark);
  --split-btn-hover-text: var(--text-dark-bg);
}

/* Vegas */
.studio-split-btn--vegas {
  --split-btn-base-bg: var(--color-vegas);
  --split-btn-base-text: var(--text-dark-bg);
  --split-btn-hover-bg: var(--color-dark);
  --split-btn-hover-text: var(--text-dark-bg);
}

/* Palm Springs */
.studio-split-btn--palmsprings {
  --split-btn-base-bg: var(--color-palmsprings);
  --split-btn-base-text: var(--text-light-bg);
  --split-btn-hover-bg: var(--color-dark);
  --split-btn-hover-text: var(--text-dark-bg);
}

/* Scottsdale */
.studio-split-btn--scottsdale {
  --split-btn-base-bg: var(--color-scottsdale);
  --split-btn-base-text: var(--text-dark-bg);
  --split-btn-hover-bg: var(--color-dark);
  --split-btn-hover-text: var(--text-dark-bg);
}

/* ==================================
   4. Charcoal Alt Variant (Static)
   ================================== */

.studio-split-btn--charcoal {
  --split-btn-base-bg: var(--color-dark);          /* charcoal background */
  --split-btn-base-text: var(--color-primary);     /* alabaster white text */
  --split-btn-hover-bg: var(--color-dark);         /* same on hover */
  --split-btn-hover-text: var(--color-primary);    /* same on hover */
  border: 2px solid var(--color-dark);
  background-color: var(--split-btn-base-bg);
  color: var(--split-btn-base-text);
}

/* Hover and focus simply animate split movement */
.studio-split-btn--charcoal:hover,
.studio-split-btn--charcoal:focus-visible {
  background-color: var(--split-btn-hover-bg);
  color: var(--split-btn-hover-text);
  border-color: var(--color-dark);
}

/* Arrow remains same color and moves only */
.studio-split-btn--charcoal::after {
  background-color: var(--split-btn-base-bg);
  color: var(--split-btn-base-text);
}
.studio-split-btn--charcoal:hover::after,
.studio-split-btn--charcoal:focus-visible::after {
  background-color: var(--split-btn-hover-bg);
  color: var(--split-btn-hover-text);
  transform: translateY(-50%) scale(1) translateX(60px);
}

/* ==================================
   5. Inner Corner Mask Utility
   ================================== */

.inner-corner-mask {
  position: relative;
  border-radius: 12px;
}

.inner-corner-mask::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  bottom: 0;
  right: 0;
  background: #fff;
  border-radius: 0 0 0 12px;
  transform: translate(100%, 100%);
  pointer-events: none;
}






/* ================================
   BASE STICKY HEADER
================================ */
#site-header {
  z-index: 999;
}

/* Inner wrapper */
#site-header > .elementor-container,
#site-header > .e-con {
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    padding 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.2s ease,
    margin 0.25s ease,
    border-radius 0.25s ease,
    width 0.25s ease;
}

/* ================================
   DEFAULT STATE (top of page)
================================ */
#site-header {
  background: transparent;
  transform: translateY(0);
  box-shadow: none;
}

#site-header .header-nav-full {
  display: flex;
  align-items: center;
}

#site-header .header-nav-compact {
  display: none;
  align-items: center;
}

@media (min-width: 1025px) {
  #site-header .header-nav-compact {
    display: none;
  }
}

#site-header .header-logo,
#site-header .header-nav-full,
#site-header .header-nav-compact {
  background: transparent;
  border-radius: 0;
  margin: 0;
}

/* ================================
   SHARED PILL GEOMETRY
================================ */

/* Shared height for clean pill alignment */
:root {
  --header-pill-min-height: 3.25em;
}

/* Outer pill wrapper */
#site-header.header--collapsed > .elementor-container,
#site-header.header--collapsed > .e-con,
#site-header.header--expanded-pill > .elementor-container,
#site-header.header--expanded-pill > .e-con {
  display: inline-flex;
  align-items: center;
  background-color: #2e2e2e;
  border-radius: 999px;
  padding: 1em;
  width: max-content;
  margin: 0.75em auto;
  gap: 0;
}

/* Shared base for halves */
#site-header.header--collapsed .header-logo,
#site-header.header--collapsed .header-nav-compact,
#site-header.header--expanded-pill .header-logo,
#site-header.header--expanded-pill .header-nav-full {
  display: flex;
  align-items: end;
  background-color: #2e2e2e;
  border-radius: 0;
  margin: 0;

  /* Shared min-height → perfect alignment */
  min-height: var(--header-pill-min-height);
}
#site-header.header--expanded-pill .header-nav-full {align-items:flex-end;}
/* Left half */
#site-header.header--collapsed .header-logo,
#site-header.header--expanded-pill .header-logo {
  padding: 0.75em 1em 0.75em 1.5em;
  border-radius: 999px 0 0 999px;
}

/* Right half */
#site-header.header--collapsed .header-nav-compact,
#site-header.header--expanded-pill .header-nav-full {
  padding: 0.75em 1.5em 0.75em 1em;
  border-radius: 0 999px 999px 0;
}

/* Logo sizing */
#site-header.header--collapsed .header-logo img,
#site-header.header--expanded-pill .header-logo img {
  max-height: 2em;
}

/* ================================
   STATE 1: COLLAPSED (scroll down)
================================ */
#site-header.header--collapsed {
  background: transparent !important;
  padding: .5em .5em;
  transform: translateY(0);
  box-shadow: none;
}

#site-header.header--collapsed .header-nav-compact {
  display: flex !important;
}

#site-header.header--collapsed .header-nav-full {
  display: none !important;
}

/* ================================
   STATE 2: EXPANDED-PILL (scroll up)
================================ */
#site-header.header--expanded-pill {
  background: transparent !important;
  padding: 1em 1em;
  transform: translateY(0);
  box-shadow: none;
}

#site-header.header--expanded-pill .header-nav-full {
  display: flex !important;
  align-items: center;
  gap: 1em;
}

#site-header.header--expanded-pill .header-nav-compact {
  display: none !important;
}

/* Remove Elementor gaps */
#site-header.header--collapsed .elementor-container,
#site-header.header--collapsed .e-con,
#site-header.header--expanded-pill .elementor-container,
#site-header.header--expanded-pill .e-con {
  gap: 0;
}


/* Enforce min-height on all pill halves (logo + either menu) */
#site-header.header--collapsed .header-logo,
#site-header.header--collapsed .header-nav-compact,
#site-header.header--expanded-pill .header-logo,
#site-header.header--expanded-pill .header-nav-full {
  min-height: 80px;
  display: flex;
  align-items: flex-end;
}
#site-header.header--collapsed {justify-content: start;}





/* 1. Native WP + generic buttons */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.wp-block-button__link,
.button {
  border-radius: 9999px !important;
}

/* 2. Elementor buttons (all sizes/variants) */
.elementor-button,
.elementor-button.elementor-size-xs,
.elementor-button.elementor-size-sm,
.elementor-button.elementor-size-md,
.elementor-button.elementor-size-lg,
.elementor-button.elementor-size-xl,
.elementor-kit-61 .elementor-button,
.elementor-kit-61 button,
.elementor-kit-61 input[type="button"],
.elementor-kit-61 input[type="submit"] {
  border-radius: 9999px !important;
}
#mc4wp-form-1 .mc4wp-form-fields > div {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: nowrap;
    gap: 12px; /* optional */
	align-items:center;
}

#mc4wp-form-1 .mc4wp-form-fields > div input[type="email"],
#mc4wp-form-1 .mc4wp-form-fields > div input[type="text"] {
    flex: 1 1 auto;     /* let inputs expand */
    width: 100%;        /* ensure full stretch */
	padding: .5em 3em;
}

#mc4wp-form-1 .mc4wp-form-fields > div button,
#mc4wp-form-1 .mc4wp-form-fields > div input[type="submit"] {
    flex: 0 0 auto;     /* keep button-size fixed */
    white-space: nowrap;
}




















/* Hide default WP gallery caption cards on work gallery (if used) */
#workGal .gallery-item-caption-wrap.caption-style-card {
  display: none;
}

/* EAEL Filterable Gallery: filters */
#testGal .fg-filter-trigger {
  background: #2e2e2e;
  color: #ffffff;
  border: 1px solid #2e2e2e;
}

#testGal .fg-filter-trigger span {
  font-weight: 600;
  font-size: 26px;
  letter-spacing: 1.5px;
}

/* Search box */
#testGal .fg-layout-3-search-box {
  background: none;
}

#testGal #fg-search-box-input {
    color: #000000;
}

/* Overlay content (title/description) */
#testGal .eael-gallery-grid-item {
  position: relative;
}

#testGal .eael-gallery-grid-item .fg-layout-3-item-content {
  padding: 0;
  text-align: center;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: auto;
  background: rgba(0,0,0,0.9);
  visibility: hidden;
  z-index: 99999;
}

/* Show overlay on hover */
#testGal .eael-gallery-grid-item:hover .fg-layout-3-item-content {
  visibility: visible;
}

/* Title */
#testGal .eael-gallery-grid-item .fg-layout-3-item-content h2 {
  font-size: 48px;
  margin: 0;
  font-weight: 700;
  color: #ffffff;
}

/* Body text */
#testGal .eael-gallery-grid-item .fg-layout-3-item-content .fg-item-content,
#testGal .eael-gallery-grid-item .fg-layout-3-item-content .fg-item-content p {
  font-size: 18px;
  color: #ffffff;
}

#testGal .eael-gallery-grid-item .fg-layout-3-item-content .fg-item-content h2 {
  padding: 40px 0 10px;
}

#testGal .eael-gallery-grid-item .fg-layout-3-item-content .fg-item-content p:last-child {
  margin-bottom: 40px;
}

/* Button inside overlay */
#testGal .eael-gallery-grid-item .fg-layout-3-item-content .fg-item-content .btn {
  font-size: 18px;
  border-radius: 0;
}

#testGal .eael-gallery-grid-item .fg-layout-3-item-content .fg-item-content .btn:hover {
  background: #2e2e2e;
}

/* Category label – hidden */
#testGal .eael-gallery-grid-item .fg-item-category {
  display: none;
}

#testGal .eael-gallery-grid-item .fg-item-category span {
  font-size: 12px;
  background: none;
}



	
	#testGal .fg-layout-3-item-content .btn {
    background: #2e2e2e !important;   /* white button */
    color: #F7F6F3 !important;        /* black text */
    border: none !important;          /* clean flat style */
    font-weight: 600;
    font-size: 18px;
    padding: 12px 28px;
    border-radius: 999px !important;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Hover: invert black + white (high contrast) */
#testGal .fg-layout-3-item-content .btn:hover {
    background: #F7F6F3 !important;
    color: #2e2e2e !important;
}

	/* Universal EAEL lightbox rounding */
.mfp-content .mfp-figure figure img,
.mfp-content .mfp-figure img.mfp-img,
.eael-mfp-wrap .mfp-content img {
    border-radius: 12px !important;
    overflow: hidden;
}