/*
Theme Name:   Esencia Residence Child
Theme URI:    https://esenciascr.com/
Description:  Esencia Costa Rica design applied to WP Residence, so the real estate site is visually identical to the main site. Purely additive — no parent template is overridden and no WP Residence functionality (listings, agents, search, submissions) is altered.
Author:       Built for Esencia Costa Rica
Version:      5.6.2
Template:     wpresidence
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  esencia-residence
*/

/* ==========================================================================
   NOTES
   --------------------------------------------------------------------------
   "Template: wpresidence" must match the parent folder in /wp-content/themes/.

   Version is 5.6.2 to match the parent. WP Rentals (the same vendor) contains a
   guard that deactivates its own core plugin when the ACTIVE theme's version
   floatval is under 2.2 — keeping this high avoids the same class of trap.

   Everything here is ADDITIVE. Parent CSS is never dequeued: WP Residence's
   layout, search, maps and dashboards all depend on it. All sizes are in px,
   because the parent may set a reduced root font-size.
   ========================================================================== */

:root{
  --es-basalt:#08120F;
  --es-canopy:#0E241D;
  --es-moss:#15382B;
  --es-moss-2:#1D4C39;
  --es-fern:#57AE81;
  --es-gold:#E7B443;
  --es-gold-2:#C98F26;
  --es-gold-dk:#9C6B14;
  --es-ember:#DE6B3C;
  --es-mist:#F5F3EC;
  --es-mist-2:#E9E5D8;
  --es-paper:#FBFAF6;
  --es-ink:#08120F;
  --es-ink-65:rgba(8,18,15,.72);
  --es-ink-40:rgba(8,18,15,.45);
  --es-line:rgba(8,18,15,.10);
  --es-lineD:rgba(245,243,236,.16);
  --es-display:'Fraunces',Georgia,serif;
  --es-sans:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --es-ease:cubic-bezier(.16,.84,.44,1);
}

/* ==========================================================================
   TYPOGRAPHY — match the main site
   ========================================================================== */
body.esencia-res,
.esencia-res p,.esencia-res li,.esencia-res label,
.esencia-res input,.esencia-res select,.esencia-res textarea,.esencia-res button{
  font-family:var(--es-sans) !important;
}
.esencia-res h1,.esencia-res h2,.esencia-res h3,.esencia-res h4,
.esencia-res .entry-title,.esencia-res .listing_title,
.esencia-res .featured_property h4,.esencia-res .featured_property h3{
  font-family:var(--es-display) !important;
  font-weight:600 !important;letter-spacing:-.025em !important;
  text-transform:none !important;
}
body.esencia-res{background:var(--es-mist) !important;color:var(--es-ink)}

/* ==========================================================================
   HEADER + PRIMARY NAVIGATION
   Verified: <nav class="wpresidence-navigation-menu ... navbar navbar-expand-lg">
   with .menu-mega-menu-updated-container inside.
   ========================================================================== */
.esencia-res .wpresidence-navigation-menu,
.esencia-res .navbar,
.esencia-res .header_wrapper,
.esencia-res #header_wrapper{
  background:rgba(14,36,29,.97) !important;border:0 !important;
  transition:background .45s var(--es-ease),box-shadow .45s;
}
.esencia-res .wpresidence-navigation-menu ul li a,
.esencia-res .menu-mega-menu-updated-container ul li a,
.esencia-res .navbar-nav > li > a{
  font-family:var(--es-sans) !important;
  font-size:15px !important;font-weight:500 !important;
  letter-spacing:-.005em !important;text-transform:none !important;
  color:#F2EFE6 !important;opacity:1 !important;
  text-shadow:0 1px 12px rgba(8,18,15,.45);
  transition:color .3s var(--es-ease);
}
.esencia-res .wpresidence-navigation-menu ul li a:hover,
.esencia-res .wpresidence-navigation-menu ul li.current-menu-item > a,
.esencia-res .wpresidence-navigation-menu ul li.current_page_item > a,
.esencia-res .menu-mega-menu-updated-container ul li a:hover,
.esencia-res .navbar-nav > li > a:hover{
  color:var(--es-gold) !important;background:transparent !important;
}
.esencia-res .wpresidence-navigation-menu .sub-menu,
.esencia-res .menu-mega-menu-updated-container .sub-menu{
  background:rgba(14,36,29,.98) !important;
  border:1px solid var(--es-lineD) !important;border-radius:12px !important;
  overflow:hidden;padding:5px !important;
  box-shadow:0 20px 48px -26px rgba(0,0,0,.7) !important;
}
.esencia-res .sub-menu li a{border-radius:8px !important;padding:10px 14px !important;font-size:14px !important}
.esencia-res .sub-menu li a:hover{background:rgba(231,180,67,.18) !important}
.esencia-res .top_bar,.esencia-res .left-top-widet,.esencia-res .right-top-widet{
  background:var(--es-basalt) !important;color:rgba(245,243,236,.7) !important;
}
.esencia-res .top_bar a{color:rgba(245,243,236,.8) !important}
.esencia-res .top_bar a:hover{color:var(--es-gold) !important}
.esencia-res .logo img,.esencia-res .navbar-brand img{max-height:64px;width:auto}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.esencia-res .btn-primary,
.esencia-res .wpestate_button,
.esencia-res .vc_general.vc_btn3,
.esencia-res input[type="submit"],
.esencia-res button[type="submit"],
.esencia-res .submit_listing{
  background:var(--es-gold) !important;
  border:0 !important;color:#241a04 !important;
  border-radius:100px !important;
  font-family:var(--es-sans) !important;font-weight:700 !important;
  letter-spacing:.02em;padding:13px 26px !important;
  transition:transform .4s var(--es-ease),background .4s;
}
.esencia-res .btn-primary:hover,
.esencia-res input[type="submit"]:hover,
.esencia-res button[type="submit"]:hover{background:#F2C55C !important;transform:translateY(-2px)}
.esencia-res .btn-secondary,.esencia-res .btn-default{
  background:transparent !important;border:1px solid var(--es-line) !important;
  color:var(--es-ink) !important;border-radius:100px !important;font-weight:600 !important;
}

/* ==========================================================================
   PROPERTY CARDS — verified class names
   ========================================================================== */
.esencia-res .featured_property,
.esencia-res .featured_property_type1,
.esencia-res .featured_prop_type4,
.esencia-res .featured_prop_type5,
.esencia-res .featured_prop_type6,
.esencia-res .featured_div{
  background:#fff !important;
  border:1px solid var(--es-line) !important;
  border-radius:20px !important;overflow:hidden;
  transition:transform .5s var(--es-ease),box-shadow .5s;
}
.esencia-res .featured_property:hover,
.esencia-res .featured_div:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 48px -26px rgba(8,18,15,.34);
}
.esencia-res .featured_img,
.esencia-res .featured_img_type2{border-radius:0 !important}
.esencia-res .featured_prop_price,
.esencia-res .price,.esencia-res .listing_price{
  font-family:var(--es-display) !important;
  color:var(--es-gold-dk) !important;font-weight:600 !important;
}
.esencia-res .featured_article_label{
  background:var(--es-gold) !important;color:#241a04 !important;
  border-radius:100px !important;font-size:11px !important;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px !important;
}
.esencia-res .featured_gradient{
  background:linear-gradient(180deg,transparent 0%,rgba(8,18,15,.78) 100%) !important;
}
.esencia-res .agent_face img{border-radius:50% !important}
.esencia-res .agent_position{color:var(--es-ink-40) !important;font-size:13px !important}

/* ==========================================================================
   FORMS + PANELS
   ========================================================================== */
.esencia-res input[type="text"],.esencia-res input[type="email"],
.esencia-res input[type="password"],.esencia-res input[type="tel"],
.esencia-res input[type="number"],.esencia-res select,.esencia-res textarea,
.esencia-res .form-control{
  border:1px solid var(--es-line) !important;border-radius:12px !important;
  background:#fff !important;color:var(--es-ink) !important;
  font-size:15px !important;padding:12px 14px !important;box-shadow:none !important;
}
.esencia-res .form-control:focus{
  border-color:var(--es-gold) !important;
  box-shadow:0 0 0 3px rgba(231,180,67,.18) !important;
}
.esencia-res .panel,.esencia-res .widget,.esencia-res .single-content{
  border-radius:18px !important;border-color:var(--es-line) !important;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.esencia-res .footer_wrapper,.esencia-res footer,.esencia-res #footer{
  background:#0C0A09 !important;color:rgba(245,243,236,.7) !important;
}
.esencia-res .footer_wrapper a,.esencia-res footer a{color:rgba(245,243,236,.78) !important}
.esencia-res .footer_wrapper a:hover,.esencia-res footer a:hover{color:var(--es-gold) !important}
.esencia-res .footer_wrapper h3,.esencia-res .footer_wrapper h4,
.esencia-res footer .widget-title{
  font-family:var(--es-sans) !important;font-size:11px !important;font-weight:700 !important;
  letter-spacing:.18em;text-transform:uppercase;color:var(--es-gold) !important;
}

/* ==========================================================================
   MOBILE — matches the main site
   ========================================================================== */
.esencia-res-burger{
  display:none;width:44px;height:40px;flex-direction:column;justify-content:center;
  align-items:center;gap:5px;cursor:pointer;flex:none;margin-left:auto;
  background:none;border:1px solid rgba(245,243,236,.32);border-radius:10px;padding:0;
}
.esencia-res-burger span{display:block;width:19px;height:2px;background:#F2EFE6;border-radius:2px;transition:transform .3s,opacity .3s}
.esencia-res-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.esencia-res-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.esencia-res-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.esencia-res-mnav{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:400;
  visibility:hidden;opacity:0;transition:opacity .3s ease,visibility 0s linear .3s;
}
.esencia-res-mnav.is-open{visibility:visible;opacity:1;transition-delay:0s}
.esencia-res-mnav .scrim{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(8,18,15,.6)}
.esencia-res-mnav .panel{
  position:absolute;top:0;right:0;bottom:0;width:min(86vw,340px);
  box-sizing:border-box;background:var(--es-canopy);
  padding:22px 24px 30px;display:flex;flex-direction:column;gap:18px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateX(100%);transition:transform .34s var(--es-ease);
  box-shadow:-24px 0 60px -30px rgba(0,0,0,.8);
}
.esencia-res-mnav.is-open .panel{transform:none}
.esencia-res-mnav .close-btn{
  align-self:flex-end;font-size:30px;line-height:1;color:rgba(245,243,236,.75);
  background:none;border:0;cursor:pointer;padding:0 4px;
}
.esencia-res-mnav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.esencia-res-mnav li{border-bottom:1px solid var(--es-lineD);list-style:none}
.esencia-res-mnav a{
  display:block;padding:15px 0;text-decoration:none;
  font-family:var(--es-display);font-size:20px;font-weight:500;
  letter-spacing:-.02em;color:#F2EFE6;
}
.esencia-res-mnav a:hover,.esencia-res-mnav a.is-current{color:var(--es-gold)}
html.esencia-res-open,html.esencia-res-open body{overflow:hidden}

@media (max-width:1024px){
  .esencia-res-burger{display:flex}
  .esencia-res .wpresidence-navigation-menu > .menu-mega-menu-updated-container,
  .esencia-res .navbar-nav{display:none !important}
  .esencia-res h1,.esencia-res .entry-title{font-size:28px !important;line-height:1.14 !important}
  .esencia-res .featured_property,
  .esencia-res .featured_div{width:100% !important;float:none !important;margin:0 0 18px !important}
  .esencia-res .container,.esencia-res .main_wrapper{
    box-sizing:border-box !important;
    padding-left:16px !important;padding-right:16px !important;
    max-width:100% !important;width:100% !important;
  }
  /* max-width alone will not beat a 33% column — width and float must go too. */
  .esencia-res .row{
    box-sizing:border-box !important;
    padding-left:0 !important;padding-right:0 !important;
    margin-left:0 !important;margin-right:0 !important;max-width:100% !important;
  }
  .esencia-res [class*="col-md-"],
  .esencia-res [class*="col-lg-"],
  .esencia-res [class*="col-sm-"]{
    box-sizing:border-box !important;
    width:100% !important;flex:0 0 100% !important;float:none !important;
    padding-left:0 !important;padding-right:0 !important;
    margin-left:0 !important;margin-right:0 !important;max-width:100% !important;
  }
  .esencia-res img{max-width:100% !important;height:auto}
  /* WP Residence's own drawer, matched to ours */
  .esencia-res .mobilewrapper,.esencia-res .mobilewrapper-user,
  .esencia-res .snap-drawer{background:var(--es-canopy) !important}
  .esencia-res .mobilewrapper a{color:#F2EFE6 !important;font-size:16px !important;padding:14px 20px !important}
  .esencia-res .mobilemenu-close,.esencia-res .mobilemenu-close-user{color:#F2EFE6 !important}
}
@media (min-width:1025px){
  .esencia-res-burger,.esencia-res-mnav{display:none !important}
}
@media (prefers-reduced-motion:reduce){
  .esencia-res-mnav,.esencia-res-mnav .panel{transition:none}
  .esencia-res *{animation:none !important}
}

/* fallback menu inherits the same styling as a real one */
.esencia-res .esencia-res-fallback-menu{
  list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:4px;
}
.esencia-res .esencia-res-fallback-menu li{list-style:none}
.esencia-res .esencia-res-fallback-menu a{
  display:block;padding:20px 14px;text-decoration:none;
  font-family:var(--es-sans);font-size:15px;font-weight:500;
  color:#F2EFE6;transition:color .3s var(--es-ease);white-space:nowrap;
}
.esencia-res .esencia-res-fallback-menu a:hover,
.esencia-res .esencia-res-fallback-menu .current-menu-item > a{color:var(--es-gold)}
@media(max-width:1024px){.esencia-res .esencia-res-fallback-menu{display:none !important}}

/* ==========================================================================
   HEADER CTAs + BRAND — match the main site header exactly
   ========================================================================== */
.esencia-res .wpresidence-navigation-menu{display:flex;align-items:center;gap:0}
.esencia-res .logo,.esencia-res .navbar-brand{flex:0 0 auto;margin-right:auto}
.esencia-res .esencia-res-cta{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:26px}
.esencia-res .es-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--es-sans);font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  padding:12px 22px;border-radius:100px;white-space:nowrap;
  transition:transform .4s var(--es-ease),background .4s,border-color .4s;
}
.esencia-res .es-btn-gold{background:var(--es-gold);color:#241a04;border:1px solid var(--es-gold)}
.esencia-res .es-btn-gold:hover{background:#F2C55C;transform:translateY(-2px);color:#241a04}
.esencia-res .es-btn-glass{background:transparent;color:#F2EFE6;border:1px solid rgba(245,243,236,.34)}
.esencia-res .es-btn-glass:hover{border-color:var(--es-gold);color:var(--es-gold);transform:translateY(-2px)}

.esencia-res-mnav-cta{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.esencia-res-mnav-cta .es-btn{width:100%;font-size:14px;padding:14px}

@media(max-width:1240px){.esencia-res .es-btn-glass{display:none}}
@media(max-width:1024px){
  .esencia-res .esencia-res-cta{display:none}
  .esencia-res-mnav-cta .es-btn-glass{display:inline-flex}
}

/* --- brand logo + header alignment, matched to the main site --- */
.esencia-res .wpresidence-navigation-menu,
.esencia-res .header_wrapper_inside{
  max-width:1360px;margin:0 auto;
  padding-left:26px !important;padding-right:26px !important;
}
.esencia-res .logo img,
.esencia-res .navbar-brand img,
.esencia-res .esencia-res-logo{
  height:58px !important;max-height:58px !important;width:auto !important;
  max-width:180px;object-fit:contain;display:block;
}
@media(max-width:1024px){
  .esencia-res .wpresidence-navigation-menu,
  .esencia-res .header_wrapper_inside{padding-left:16px !important;padding-right:16px !important}
  .esencia-res .logo img,.esencia-res .esencia-res-logo{height:46px !important;max-height:46px !important;max-width:150px}
}
@media(max-width:480px){
  .esencia-res .logo img,.esencia-res .esencia-res-logo{height:40px !important;max-height:40px !important;max-width:126px}
}

/* ==========================================================================
   HEADER CORRECTIONS
   1. Logo pushed in from the edge to match the main site.
   2. The theme's header phone number duplicated the one in the top bar and sat
      loose in the middle of the nav — hidden here, the top bar keeps it.
   ========================================================================== */
.esencia-res .wpresidence-navigation-menu,
.esencia-res .header_wrapper_inside{
  flex-wrap:nowrap !important;
  padding-left:150px !important;padding-right:50px !important;
  min-height:96px;
}
.esencia-res .menu-mega-menu-updated-container{margin-left:auto}
.esencia-res .header_phone,
.esencia-res .header_phone_wrapper,
.esencia-res .phone_header,
.esencia-res .header-phone,
.esencia-res .wpresidence_header_phone,
.esencia-res .user_menu_wrapper .phone,
.esencia-res .wpresidence-navigation-menu > .phone{display:none !important}
.esencia-res .esencia-res-cta{flex:0 0 auto !important;flex-wrap:nowrap !important;margin-left:22px !important}
.esencia-res .es-btn{padding:11px 20px;font-size:12px}

@media(max-width:1500px){
  .esencia-res .esencia-res-fallback-menu a,
  .esencia-res .menu-mega-menu-updated-container ul li a{padding:20px 10px !important;font-size:14px !important}
  .esencia-res .es-btn{padding:10px 16px;font-size:11.5px}
}
@media(max-width:1499px){
  .esencia-res .wpresidence-navigation-menu,
  .esencia-res .header_wrapper_inside{padding-left:120px !important;padding-right:44px !important}
}
@media(max-width:1199px){
  .esencia-res .es-btn-glass{display:none !important}
  .esencia-res .wpresidence-navigation-menu,
  .esencia-res .header_wrapper_inside{padding-left:80px !important;padding-right:36px !important}
}
@media(max-width:1024px){
  .esencia-res .wpresidence-navigation-menu,
  .esencia-res .header_wrapper_inside{
    padding-left:20px !important;padding-right:16px !important;min-height:64px;
  }
}

/* ==========================================================================
   HERO — bring it in line with the main site
   The demo hero uses a purple accent and a purple glow behind the search box.
   ========================================================================== */
.esencia-res .hero_wrapper,
.esencia-res .header_media,
.esencia-res .hero-section{position:relative}
.esencia-res .hero_wrapper::after,
.esencia-res .header_media::after{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,18,15,.55) 0%,rgba(8,18,15,.18) 42%,rgba(8,18,15,.80) 100%);
}
.esencia-res .hero_wrapper > *,
.esencia-res .header_media > *{position:relative;z-index:2}

/* headline: Fraunces, cream, gold italic accent instead of purple */
.esencia-res .header_media h1,
.esencia-res .hero_wrapper h1,
.esencia-res .header_media .elementor-heading-title,
.esencia-res .hero-title{
  font-family:var(--es-display) !important;
  color:#F5F3EC !important;font-weight:600 !important;
  letter-spacing:-.03em !important;line-height:1.06 !important;
  text-shadow:0 2px 30px rgba(8,18,15,.5);
}
.esencia-res .header_media h1 span,
.esencia-res .hero_wrapper h1 span,
.esencia-res .header_media .elementor-heading-title span{
  color:var(--es-gold) !important;font-style:italic !important;
}
.esencia-res .header_media h2,
.esencia-res .header_media h4,
.esencia-res .hero_wrapper h2,
.esencia-res .hero-subtitle{
  font-family:var(--es-sans) !important;font-weight:400 !important;
  color:rgba(245,243,236,.86) !important;font-size:17px !important;
  letter-spacing:0 !important;text-transform:none !important;
}

/* search panel: kill the purple glow, match the main site's glass bar */
.esencia-res .advanced_search_shortcode,
.esencia-res .wpestate_search_form,
.esencia-res .hero_search_wrapper,
.esencia-res .adv_search_hero{
  background:rgba(245,243,236,.96) !important;
  border:1px solid rgba(8,18,15,.10) !important;
  border-radius:20px !important;
  box-shadow:0 26px 60px -34px rgba(8,18,15,.55) !important;
}
.esencia-res .advanced_search_shortcode label,
.esencia-res .wpestate_search_form label{
  font-family:var(--es-sans) !important;font-size:11px !important;font-weight:700 !important;
  letter-spacing:.16em;text-transform:uppercase;color:var(--es-ink-40) !important;
}
.esencia-res .advanced_search_shortcode .btn,
.esencia-res .wpestate_search_form .btn,
.esencia-res .adv_search_hero .btn{
  background:var(--es-gold) !important;color:#241a04 !important;border:0 !important;
  border-radius:100px !important;font-weight:700 !important;
  letter-spacing:.08em;text-transform:uppercase;font-size:13px !important;padding:14px 28px !important;
}
/* any remaining demo purple */
.esencia-res [style*="rgb(155"],
.esencia-res [style*="#9b"],
.esencia-res [style*="#a5"]{color:var(--es-gold) !important}


/* ==========================================================================
   HEADER LAYOUT — identical to the main site
   logo (left, inset) | menu (CENTRED, never wraps) | buttons (hard right)
   The demo header let the menu wrap onto a second line and pushed Contact
   below; nowrap plus a flexible centre column prevents that at any width.
   ========================================================================== */
.esencia-res .wpresidence-navigation-menu,
.esencia-res .header_wrapper_inside{
  display:flex !important;align-items:center !important;flex-wrap:nowrap !important;
  box-sizing:border-box !important;width:100% !important;max-width:none !important;
  margin:0 !important;
  padding-left:200px !important;padding-right:28px !important;
  min-height:96px;
}
/* Only the header bar is the positioning context. The nav element must stay
   static — making it relative meant the absolutely-positioned menu anchored to
   an element with no height of its own, and the items collapsed to zero. */
.esencia-res .header_wrapper_inside{position:relative !important}
.esencia-res .wpresidence-navigation-menu{position:static !important}
.esencia-res .logo,.esencia-res .navbar-brand{flex:0 0 auto !important;margin:0 !important}
.esencia-res .menu-mega-menu-updated-container{
  /* Spans the full header height and centres its contents with flex, rather
     than being centred with translateY(-50%). A translate-centred box shifts
     upward the instant its own height changes — which is what made the menu
     jump when a dropdown opened. Anchoring top and bottom makes its vertical
     position independent of its contents. */
  position:absolute !important;left:50% !important;
  top:0 !important;bottom:0 !important;
  transform:translateX(-50%) !important;
  display:flex !important;align-items:center !important;
  height:auto !important;
  flex:0 0 auto !important;min-width:0 !important;margin:0 !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
}
.esencia-res .menu-mega-menu-updated-container > ul,
.esencia-res .esencia-res-fallback-menu{
  display:flex !important;flex-wrap:nowrap !important;justify-content:center !important;
  margin:0 !important;padding:0 !important;list-style:none !important;
}
.esencia-res .menu-mega-menu-updated-container ul li a,
.esencia-res .esencia-res-fallback-menu a{
  white-space:nowrap !important;padding:20px clamp(8px,1vw,16px) !important;
}
.esencia-res .esencia-res-cta{
  flex:0 0 auto !important;display:flex !important;align-items:center !important;
  gap:10px !important;margin:0 0 0 auto !important;flex-wrap:nowrap !important;
}
@media(max-width:1600px){
  .esencia-res .wpresidence-navigation-menu,
  .esencia-res .header_wrapper_inside{padding-left:150px !important}
}
@media(max-width:1400px){
  .esencia-res .wpresidence-navigation-menu,
  .esencia-res .header_wrapper_inside{padding-left:110px !important}
  .esencia-res .menu-mega-menu-updated-container ul li a,
  .esencia-res .esencia-res-fallback-menu a{font-size:14px !important}
}
@media(max-width:1200px){
  .esencia-res .wpresidence-navigation-menu,
  .esencia-res .header_wrapper_inside{padding-left:70px !important}
  .esencia-res .es-btn-glass{display:none !important}
}
@media(max-width:1024px){
  .esencia-res .wpresidence-navigation-menu,
  .esencia-res .header_wrapper_inside{
    padding-left:20px !important;padding-right:16px !important;min-height:64px;
  }
  .esencia-res .menu-mega-menu-updated-container,
  .esencia-res .esencia-res-cta{display:none !important}
}

/* ==========================================================================
   HEADER — remove the green block behind the menu, and stop the hover jump
   --------------------------------------------------------------------------
   WP Residence gives the nav element and the mega-menu container their own
   background and height. With our header already painted, that produced a
   second, taller green block sitting behind the links. And because the
   mega-menu container is sized for a dropdown, hovering made the row jump.

   Only the outer header carries a background from here on; the nav and the menu
   container are transparent and auto-height, and submenus are pinned below the
   bar so nothing can move the row itself.
   ========================================================================== */
.esencia-res .wpresidence-navigation-menu,
.esencia-res .menu-mega-menu-updated-container,
.esencia-res .menu-mega-menu-updated-container > ul,
.esencia-res .esencia-res-fallback-menu,
.esencia-res nav#access,
.esencia-res .navbar-collapse{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;box-shadow:none !important;
  height:auto !important;min-height:0 !important;max-height:none !important;
}
/* the header bar is the only thing with a background */
.esencia-res .header_wrapper_inside{background:transparent !important}
.esencia-res .header_wrapper{background:rgba(14,36,29,.97) !important}

/* --- menu row must never change height --- */
.esencia-res .menu-mega-menu-updated-container > ul > li,
.esencia-res .esencia-res-fallback-menu > li{
  position:relative !important;
  height:auto !important;margin:0 !important;padding:0 !important;
  background:transparent !important;
}
.esencia-res .menu-mega-menu-updated-container > ul > li > a,
.esencia-res .esencia-res-fallback-menu > li > a{
  line-height:1.2 !important;height:auto !important;
  transform:none !important;
  transition:color .3s var(--es-ease) !important;
}
/* nothing on hover may resize or lift the item */
.esencia-res .menu-mega-menu-updated-container > ul > li:hover,
.esencia-res .menu-mega-menu-updated-container > ul > li > a:hover,
.esencia-res .esencia-res-fallback-menu > li:hover,
.esencia-res .esencia-res-fallback-menu > li > a:hover{
  /* Padding must match the resting state exactly — setting 20px here while the
     base state is 0 made the item grow by 40px on hover, which is what made the
     row jump. The anchor carries the padding, not the list item. */
  transform:none !important;
  padding:0 !important;margin:0 !important;background:transparent !important;
}

/* --- submenus / mega menus: pinned below the bar --- */
.esencia-res .menu-mega-menu-updated-container ul ul,
.esencia-res .menu-mega-menu-updated-container .sub-menu,
.esencia-res .with-megamenu ul,
.esencia-res nav#access .sub-menu{
  position:absolute !important;
  top:100% !important;bottom:auto !important;left:0 !important;right:auto !important;
  transform:none !important;
  min-width:220px;width:auto !important;
  background:rgba(14,36,29,.98) !important;
  border:1px solid var(--es-lineD) !important;border-radius:12px !important;
  padding:6px !important;margin:0 !important;
  box-shadow:0 20px 48px -26px rgba(0,0,0,.7) !important;
  z-index:500 !important;
}
.esencia-res .menu-mega-menu-updated-container ul ul li,
.esencia-res .sub-menu li{width:100% !important;height:auto !important}
.esencia-res .menu-mega-menu-updated-container ul ul a,
.esencia-res .sub-menu a{
  padding:10px 14px !important;border-radius:8px !important;
  font-size:14px !important;white-space:nowrap !important;
}
.esencia-res .menu-mega-menu-updated-container ul ul a:hover,
.esencia-res .sub-menu a:hover{background:rgba(231,180,67,.18) !important;color:var(--es-gold) !important}

/* --- kill the demo purple that survives in the hero --- */
.esencia-res .header_media h1 span,
.esencia-res .hero_wrapper h1 span,
.esencia-res .elementor-heading-title span,
.esencia-res h1 span[style*="color"],
.esencia-res h1 mark{
  color:var(--es-gold) !important;background:transparent !important;
  -webkit-text-fill-color:var(--es-gold) !important;
}


/* Dropdowns must never be clipped by the header or its children. */
.esencia-res .header_wrapper,
.esencia-res .header_wrapper_inside,
.esencia-res .wpresidence-navigation-menu,
.esencia-res .menu-mega-menu-updated-container,
.esencia-res .menu-mega-menu-updated-container > ul,
.esencia-res .esencia-res-fallback-menu{overflow:visible !important}

/* Open state, whether the theme uses hover or a click-toggled class. */
.esencia-res .menu-mega-menu-updated-container li:hover > ul,
.esencia-res .menu-mega-menu-updated-container li:focus-within > ul,
.esencia-res .menu-mega-menu-updated-container li.open > ul,
.esencia-res .menu-mega-menu-updated-container li.active > ul,
.esencia-res .menu-mega-menu-updated-container li.hover > ul{
  display:block !important;visibility:visible !important;opacity:1 !important;
}


/* ==========================================================================
   DROPDOWN FUNCTIONALITY
   Submenus must open below the bar and be clickable, without ever changing the
   height or position of the menu row.
   ========================================================================== */
.esencia-res .menu-mega-menu-updated-container,
.esencia-res .menu-mega-menu-updated-container > ul,
.esencia-res .esencia-res-fallback-menu,
.esencia-res .menu-mega-menu-updated-container > ul > li{
  overflow:visible !important;
}
.esencia-res .menu-mega-menu-updated-container > ul{
  align-items:center !important;height:100% !important;
}
/* the parent item keeps its own height no matter what opens beneath it */
.esencia-res .menu-mega-menu-updated-container > ul > li{
  display:flex !important;align-items:center !important;
  height:100% !important;flex:0 0 auto !important;
}
.esencia-res .menu-mega-menu-updated-container > ul > li > a{
  display:flex !important;align-items:center !important;height:100% !important;
}
/* submenus hang from the bottom of the bar */
.esencia-res .menu-mega-menu-updated-container ul ul,
.esencia-res .menu-mega-menu-updated-container .sub-menu,
.esencia-res nav#access .sub-menu{
  top:100% !important;bottom:auto !important;
  margin-top:0 !important;
  pointer-events:auto !important;
}
/* a small bridge so the pointer can travel from the link into the dropdown */
.esencia-res .menu-mega-menu-updated-container > ul > li.menu-item-has-children::after,
.esencia-res .menu-mega-menu-updated-container > ul > li:hover::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:10px;
}

/* ==========================================================================
   MENU MUST NOT CHANGE WIDTH ON HOVER
   --------------------------------------------------------------------------
   The menu is centred, so ANY change to an item's width re-centres the whole
   row and the links appear to squeeze together. WP Residence changes the font
   weight (and adds borders) on hover and for the current item, which changes
   the text width.

   Every state below is therefore metric-identical: same weight, same spacing,
   same padding, same borders. Only COLOUR changes. The active item gets its
   emphasis from colour and an underline drawn with a pseudo-element, which
   takes up no layout space.
   ========================================================================== */
.esencia-res .menu-mega-menu-updated-container > ul > li > a,
.esencia-res .menu-mega-menu-updated-container > ul > li > a:hover,
.esencia-res .menu-mega-menu-updated-container > ul > li > a:focus,
.esencia-res .menu-mega-menu-updated-container > ul > li > a:active,
.esencia-res .menu-mega-menu-updated-container > ul > li.current-menu-item > a,
.esencia-res .menu-mega-menu-updated-container > ul > li.current_page_item > a,
.esencia-res .menu-mega-menu-updated-container > ul > li.current-menu-ancestor > a,
.esencia-res .menu-mega-menu-updated-container > ul > li:hover > a,
.esencia-res .esencia-res-fallback-menu > li > a,
.esencia-res .esencia-res-fallback-menu > li > a:hover,
.esencia-res .esencia-res-fallback-menu > li.current-menu-item > a{
  font-weight:500 !important;
  font-style:normal !important;
  letter-spacing:-.005em !important;
  text-transform:none !important;
  font-size:15px !important;
  padding:20px clamp(8px,1vw,16px) !important;
  margin:0 !important;
  border:0 !important;outline:0 !important;
  text-decoration:none !important;
  transform:none !important;
  box-shadow:none !important;
  background:transparent !important;
  transition:color .3s cubic-bezier(.16,.84,.44,1) !important;
}
@media(max-width:1400px){
  .esencia-res .menu-mega-menu-updated-container > ul > li > a,
  .esencia-res .menu-mega-menu-updated-container > ul > li > a:hover,
  .esencia-res .menu-mega-menu-updated-container > ul > li.current-menu-item > a,
  .esencia-res .esencia-res-fallback-menu > li > a,
  .esencia-res .esencia-res-fallback-menu > li > a:hover{font-size:14px !important}
}

/* the item box itself is locked too */
.esencia-res .menu-mega-menu-updated-container > ul > li,
.esencia-res .menu-mega-menu-updated-container > ul > li:hover,
.esencia-res .esencia-res-fallback-menu > li,
.esencia-res .esencia-res-fallback-menu > li:hover{
  padding:0 !important;margin:0 !important;border:0 !important;
  transform:none !important;background:transparent !important;
}

/* colour is the only thing that changes */
.esencia-res .menu-mega-menu-updated-container > ul > li > a:hover,
.esencia-res .menu-mega-menu-updated-container > ul > li:hover > a,
.esencia-res .menu-mega-menu-updated-container > ul > li.current-menu-item > a,
.esencia-res .menu-mega-menu-updated-container > ul > li.current_page_item > a,
.esencia-res .esencia-res-fallback-menu > li > a:hover,
.esencia-res .esencia-res-fallback-menu > li.current-menu-item > a{
  color:var(--es-gold) !important;
}

/* underline for the current page — drawn, so it occupies no layout space */
.esencia-res .menu-mega-menu-updated-container > ul > li.current-menu-item > a::after,
.esencia-res .menu-mega-menu-updated-container > ul > li.current_page_item > a::after,
.esencia-res .esencia-res-fallback-menu > li.current-menu-item > a::after{
  content:"";position:absolute;left:clamp(8px,1vw,16px);right:clamp(8px,1vw,16px);
  bottom:14px;height:2px;background:var(--es-gold);border-radius:2px;
}
.esencia-res .menu-mega-menu-updated-container > ul > li > a,
.esencia-res .esencia-res-fallback-menu > li > a{position:relative}

/* ==========================================================================
   THEME HEADER (listings, taxonomy, agent and all non-Elementor pages)
   --------------------------------------------------------------------------
   The realestate homepage is built with Elementor and uses an Elementor header;
   every other page uses WP Residence's own header1/header2 template. Those were
   still rendering unstyled — white bar, demo menu, loose phone number.

   header1/header2 build the bar as:
     <div class="header_wrapper_inside mx-5 py-0 d-flex w-100 flex-wrap
                 align-items-center justify-content-between">
   so the background goes on that element directly rather than on an outer
   wrapper whose class varies by header type, and Bootstrap's mx-5 / flex-wrap /
   justify-content-between are neutralised so the layout matches the main site.
   ========================================================================== */
.esencia-res .header_wrapper_inside{
  background:rgba(14,36,29,.97) !important;
  margin:0 !important;                    /* kills mx-5 */
  flex-wrap:nowrap !important;            /* kills flex-wrap */
  justify-content:flex-start !important;  /* kills justify-content-between */
  width:100% !important;max-width:none !important;
  padding-left:200px !important;padding-right:28px !important;
  min-height:96px;position:relative !important;
}
.esencia-res .header_wrapper,
.esencia-res #header_wrapper,
.esencia-res .website-wrapper > header{background:rgba(14,36,29,.97) !important}

/* the theme's own menu on these pages */
.esencia-res .header_wrapper_inside .wpresidence-navigation-menu{
  position:static !important;background:transparent !important;flex:0 0 auto !important;
}
.esencia-res .header_wrapper_inside .menu-mega-menu-updated-container,
.esencia-res .header_wrapper_inside nav ul.menu{
  position:absolute !important;left:50% !important;top:0 !important;bottom:0 !important;
  transform:translateX(-50%) !important;
  display:flex !important;align-items:center !important;
  background:transparent !important;margin:0 !important;
}
.esencia-res .header_wrapper_inside nav ul li a,
.esencia-res .header_wrapper_inside .menu li a{
  color:#F2EFE6 !important;font-family:var(--es-sans) !important;
  font-size:15px !important;font-weight:500 !important;
  text-transform:none !important;white-space:nowrap !important;
}
.esencia-res .header_wrapper_inside nav ul li a:hover,
.esencia-res .header_wrapper_inside nav ul li.current-menu-item > a,
.esencia-res .header_wrapper_inside .menu li.current-menu-item > a{color:var(--es-gold) !important}

/* logo + the loose phone number */
.esencia-res .header_wrapper_inside .logo,
.esencia-res .header_wrapper_inside .wpresidence-logo-container{
  flex:0 0 auto !important;margin:0 !important;
}
.esencia-res .header_wrapper_inside .header_phone,
.esencia-res .header_wrapper_inside .user_menu_wrapper .phone,
.esencia-res .header_phone{display:none !important}

@media(max-width:1600px){.esencia-res .header_wrapper_inside{padding-left:150px !important}}
@media(max-width:1400px){.esencia-res .header_wrapper_inside{padding-left:110px !important}}
@media(max-width:1200px){.esencia-res .header_wrapper_inside{padding-left:70px !important}}
@media(max-width:1024px){
  .esencia-res .header_wrapper_inside{
    padding-left:20px !important;padding-right:16px !important;min-height:64px;
  }
  .esencia-res .header_wrapper_inside .menu-mega-menu-updated-container,
  .esencia-res .header_wrapper_inside nav ul.menu{display:none !important}
}

/* ==========================================================================
   THEME HEADER — written against the ACTUAL rendered markup
   --------------------------------------------------------------------------
   <div class="header_wrapper_inside mx-5 py-0 d-flex w-100 flex-wrap
               align-items-center justify-content-between">
     <div class="logo"> …
     <nav class="wpresidence-navigation-menu px-5 py-0 navbar navbar-expand-lg">
       <div class="menu-mega-menu-updated-container">
         <ul id="menu-main-v3" class="menu">
           <li class="menu-item …"><a class="menu-item-link"> …
           <ul class="  sub-menu "> …
     <div class="user_menu_wrapper"> … <div class="header_phone"> …
     <button class="esencia-res-burger"> <div class="esencia-res-cta">

   w-100 plus our padding was overflowing the page; border-box fixes it.
   ========================================================================== */
.esencia-res .header_wrapper_inside{
  box-sizing:border-box !important;
  background:rgba(14,36,29,.97) !important;
  margin:0 !important;                    /* mx-5 */
  flex-wrap:nowrap !important;            /* flex-wrap */
  justify-content:flex-start !important;  /* justify-content-between */
  width:100% !important;max-width:100% !important;
  padding-left:200px !important;padding-right:28px !important;
  min-height:96px;position:relative !important;overflow:visible !important;
}
.esencia-res .header_wrapper_inside > *{box-sizing:border-box !important}

/* nav: px-5 removed, becomes the absolutely-centred column */
.esencia-res .wpresidence-navigation-menu{
  padding:0 !important;margin:0 !important;background:transparent !important;
  position:static !important;flex:0 0 auto !important;
}
.esencia-res .menu-mega-menu-updated-container{
  position:absolute !important;left:50% !important;top:0 !important;bottom:0 !important;
  transform:translateX(-50%) !important;height:auto !important;
  display:flex !important;align-items:center !important;
  background:transparent !important;margin:0 !important;overflow:visible !important;
}
.esencia-res ul#menu-main-v3,
.esencia-res .menu-mega-menu-updated-container > ul.menu{
  display:flex !important;flex-wrap:nowrap !important;align-items:center !important;
  list-style:none !important;margin:0 !important;padding:0 !important;height:100% !important;
}
.esencia-res ul#menu-main-v3 > li,
.esencia-res .menu-mega-menu-updated-container > ul.menu > li{
  position:relative !important;display:flex !important;align-items:center !important;
  height:100% !important;flex:0 0 auto !important;
  margin:0 !important;padding:0 !important;border:0 !important;background:transparent !important;
}

/* links — metric-locked, colour is the only change */
.esencia-res a.menu-item-link,
.esencia-res a.menu-item-link:hover,
.esencia-res a.menu-item-link:focus,
.esencia-res li.current-menu-item > a.menu-item-link,
.esencia-res li:hover > a.menu-item-link{
  font-family:var(--es-sans) !important;
  font-size:15px !important;font-weight:500 !important;font-style:normal !important;
  letter-spacing:-.005em !important;text-transform:none !important;
  padding:20px clamp(8px,1vw,16px) !important;margin:0 !important;
  border:0 !important;outline:0 !important;text-decoration:none !important;
  transform:none !important;background:transparent !important;
  white-space:nowrap !important;
  display:flex !important;align-items:center !important;height:100% !important;
  color:#F2EFE6 !important;
  transition:color .3s var(--es-ease) !important;
}
.esencia-res a.menu-item-link:hover,
.esencia-res li:hover > a.menu-item-link,
.esencia-res li.current-menu-item > a.menu-item-link,
.esencia-res li.current_page_item > a.menu-item-link{color:var(--es-gold) !important}

/* submenu: class is "  sub-menu " with stray spaces */
.esencia-res ul.sub-menu,
.esencia-res [class~="sub-menu"]{
  position:absolute !important;top:100% !important;bottom:auto !important;
  left:50% !important;right:auto !important;transform:translateX(-50%) !important;
  min-width:230px !important;width:auto !important;
  list-style:none !important;margin:0 !important;padding:6px !important;
  background:rgba(14,36,29,.98) !important;
  border:1px solid var(--es-lineD) !important;border-radius:12px !important;
  box-shadow:0 20px 48px -26px rgba(0,0,0,.7) !important;
  z-index:600 !important;
}
.esencia-res ul.sub-menu > li{width:100% !important;height:auto !important;display:block !important}
.esencia-res ul.sub-menu a.menu-item-link{
  display:block !important;height:auto !important;
  padding:10px 14px !important;border-radius:8px !important;font-size:14px !important;
}
.esencia-res ul.sub-menu a.menu-item-link:hover{background:rgba(231,180,67,.18) !important;color:var(--es-gold) !important}

/* phone + user menu sit right, before the buttons */
.esencia-res .header_wrapper_inside .header_phone{display:none !important}
.esencia-res .user_menu_wrapper{margin-left:auto !important;flex:0 0 auto !important}
.esencia-res .user_menu_wrapper .user_menu{background:transparent !important}
.esencia-res .esencia-res-cta{margin-left:14px !important}

/* ==========================================================================
   MOBILE — the bar and drawer were still the theme's blue
   ========================================================================== */
@media(max-width:1024px){
  .esencia-res .header_wrapper_inside{
    padding-left:20px !important;padding-right:16px !important;min-height:64px;
  }
  .esencia-res .menu-mega-menu-updated-container,
  .esencia-res .user_menu_wrapper,
  .esencia-res .esencia-res-cta{display:none !important}
}
.esencia-res .mobile_menu_header,
.esencia-res .mobilewrapper,
.esencia-res .mobilewrapper-user,
.esencia-res .snap-drawer,
.esencia-res .mobile_user_menu,
.esencia-res .mobilex-menu,
.esencia-res #mobilewrapper_links,
.esencia-res #mobilewrapperuser{
  background:var(--es-canopy) !important;background-image:none !important;
}
.esencia-res .mobilewrapper a,
.esencia-res .mobilewrapper-user a,
.esencia-res #mobilewrapper_links a,
.esencia-res .snap-drawer a,
.esencia-res .mobile_user_menu a{
  color:#F2EFE6 !important;font-family:var(--es-sans) !important;
  font-size:16px !important;border-bottom:1px solid var(--es-lineD) !important;
}
.esencia-res .mobilewrapper a:hover,
.esencia-res #mobilewrapper_links a:hover,
.esencia-res .snap-drawer a:hover{color:var(--es-gold) !important}
.esencia-res .mobilemenu-close,
.esencia-res .mobilemenu-close-user,
.esencia-res .mobilemenu-close i,
.esencia-res .navicon,
.esencia-res .navicon-button{color:#F2EFE6 !important}
.esencia-res .navicon-button span,
.esencia-res .navicon span{background:#F2EFE6 !important}

/* The CTA row can attach to the theme header or, on Elementor headers, to the
   nav element — it must sit right and stay on one line in either case. */
.esencia-res .wpresidence-navigation-menu{display:flex !important;align-items:center !important}
.esencia-res .esencia-res-cta{
  margin-left:auto !important;flex:0 0 auto !important;
  display:flex !important;align-items:center !important;
  flex-wrap:nowrap !important;gap:10px !important;
}
@media(max-width:1024px){.esencia-res .esencia-res-cta{display:none !important}}

/* ==========================================================================
   CTA CONTAINMENT
   --------------------------------------------------------------------------
   The buttons are printed by PHP after the primary nav, so they land INSIDE
   the <nav> element rather than as a direct child of the header bar. The bar's
   padding-right therefore did not contain them and they ran off the screen.

   The nav is made a flex row that reaches the header's right edge, and the
   buttons are held inside it.
   ========================================================================== */
.esencia-res .wpresidence-navigation-menu{
  display:flex !important;align-items:center !important;flex-wrap:nowrap !important;
  flex:1 1 auto !important;min-width:0 !important;
  padding:0 !important;margin:0 !important;
  position:static !important;
}
.esencia-res .wpresidence-navigation-menu > .esencia-res-cta{
  margin-left:auto !important;margin-right:0 !important;
  flex:0 0 auto !important;
}
.esencia-res .esencia-res-cta{
  display:flex !important;align-items:center !important;
  flex-wrap:nowrap !important;gap:10px !important;
  max-width:100% !important;
}
.esencia-res .esencia-res-cta .es-btn{
  flex:0 0 auto !important;white-space:nowrap !important;
  padding:11px 20px !important;font-size:12px !important;
}
/* nothing in the header may push past the right edge */
.esencia-res .header_wrapper_inside,
.esencia-res .header_wrapper_inside > *{max-width:100% !important;min-width:0 !important}
.esencia-res .header_wrapper_inside{overflow-x:clip !important}

@media(max-width:1500px){
  .esencia-res .esencia-res-cta .es-btn{padding:10px 16px !important;font-size:11.5px !important}
}
@media(max-width:1300px){
  .esencia-res .esencia-res-cta .es-btn-glass{display:none !important}
}
@media(max-width:1024px){
  .esencia-res .esencia-res-cta{display:none !important}
}

/* ==========================================================================
   STOP THE PAGE BEING WIDER THAN THE WINDOW
   --------------------------------------------------------------------------
   The header was pushing the document wider than the viewport, which put a
   horizontal scrollbar on the page and left the last button sitting off the
   right-hand edge. Nothing in the header may exceed the window width.
   ========================================================================== */
html:has(body.esencia-res),
body.esencia-res{overflow-x:hidden !important;max-width:100% !important}

.esencia-res .header_wrapper,
.esencia-res .header_wrapper_inside,
.esencia-res .website-wrapper,
.esencia-res #all_wrapper{
  box-sizing:border-box !important;
  max-width:100vw !important;overflow-x:clip !important;
}
.esencia-res .header_wrapper_inside{
  width:100% !important;margin:0 !important;
  padding-right:28px !important;
}
/* the nav must be able to shrink rather than force the bar wider */
.esencia-res .wpresidence-navigation-menu{
  flex:1 1 auto !important;min-width:0 !important;
  padding:0 !important;margin:0 !important;
  display:flex !important;align-items:center !important;
}
/* buttons: last thing in the bar, never wider than what is left */
.esencia-res .esencia-res-cta{
  flex:0 0 auto !important;margin-left:auto !important;margin-right:0 !important;
  display:flex !important;align-items:center !important;gap:10px !important;
  flex-wrap:nowrap !important;
}
.esencia-res .esencia-res-cta .es-btn{flex:0 0 auto !important;white-space:nowrap !important}

/* ==========================================================================
   CTA PINNED TO THE HEADER'S RIGHT EDGE
   --------------------------------------------------------------------------
   Flex sizing could not be trusted here: WP Residence's .user_menu_wrapper
   contains the entire dashboard dropdown list, so the row's natural width is
   far wider than the bar and the buttons were pushed hundreds of pixels off the
   right-hand side — clipped rather than scrollable, which is why they looked
   simply cut in half.

   Positioning them absolutely against the header bar removes any dependence on
   what the siblings measure. They are always 28px from the right edge.
   ========================================================================== */
.esencia-res .header_wrapper_inside{position:relative !important;padding-right:300px !important}
.esencia-res .esencia-res-cta{
  position:absolute !important;
  right:28px !important;left:auto !important;
  top:50% !important;transform:translateY(-50%) !important;
  margin:0 !important;z-index:60 !important;
  display:flex !important;align-items:center !important;
  gap:10px !important;flex-wrap:nowrap !important;
  max-width:none !important;
}
.esencia-res .esencia-res-cta .es-btn{flex:0 0 auto !important;white-space:nowrap !important}

/* the dashboard dropdown must not occupy layout width in the header row */
.esencia-res #user_menu_open,
.esencia-res .user_menu_wrapper .dropdown-menu{
  position:absolute !important;right:0 !important;
}
.esencia-res .user_menu_wrapper{
  position:relative !important;flex:0 0 auto !important;
  margin-left:auto !important;margin-right:284px !important;
}

@media(max-width:1500px){
  .esencia-res .header_wrapper_inside{padding-right:280px !important}
  .esencia-res .user_menu_wrapper{margin-right:264px !important}
  .esencia-res .esencia-res-cta .es-btn{padding:10px 16px !important;font-size:11.5px !important}
}
@media(max-width:1300px){
  .esencia-res .esencia-res-cta .es-btn-glass{display:none !important}
  .esencia-res .header_wrapper_inside{padding-right:190px !important}
  .esencia-res .user_menu_wrapper{margin-right:174px !important}
}
@media(max-width:1024px){
  .esencia-res .esencia-res-cta{display:none !important}
  .esencia-res .header_wrapper_inside{padding-right:16px !important}
  .esencia-res .user_menu_wrapper{margin-right:0 !important}
}

/* ==========================================================================
   LANGUAGE PILL — same segmented control as the main site
   ========================================================================== */
.esencia-res .esencia-res-langpill{
  position:static !important;
  display:inline-flex !important;align-items:stretch !important;
  padding:3px !important;gap:2px !important;
  border:1px solid rgba(245,243,236,.22) !important;
  border-radius:100px !important;
  background:rgba(8,18,15,.34) !important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  line-height:1 !important;flex:0 0 auto !important;
  margin:0 4px 0 0 !important;
}
.esencia-res .esencia-res-lang-opt{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  font-family:var(--es-sans) !important;font-size:11px !important;font-weight:700 !important;
  letter-spacing:.16em !important;text-transform:uppercase !important;
  color:rgba(245,243,236,.62) !important;
  padding:8px 13px !important;border-radius:100px !important;
  border:0 !important;background:none !important;text-decoration:none !important;
  white-space:nowrap !important;
  transition:background .35s var(--es-ease),color .35s var(--es-ease) !important;
}
.esencia-res .esencia-res-lang-opt:hover{color:var(--es-mist) !important}
.esencia-res .esencia-res-lang-opt.on{
  background:var(--es-gold) !important;color:#241a04 !important;
  box-shadow:0 2px 10px -3px rgba(231,180,67,.6) !important;
}
.esencia-res .esencia-res-lang-opt.on:hover{color:#241a04 !important}



@media(max-width:1500px){
  .esencia-res .header_wrapper_inside{padding-right:378px !important}
  .esencia-res .user_menu_wrapper{margin-right:362px !important}
}
@media(max-width:1300px){
  .esencia-res .header_wrapper_inside{padding-right:288px !important}
  .esencia-res .user_menu_wrapper{margin-right:272px !important}
}
@media(max-width:1024px){
  /* on mobile it sits beside the burger rather than being hidden */
  .esencia-res .esencia-res-langpill{padding:2px !important;margin-right:0 !important}
  .esencia-res .esencia-res-lang-opt{font-size:10px !important;padding:7px 10px !important}
  .esencia-res .header_wrapper_inside{padding-right:16px !important}
  .esencia-res .user_menu_wrapper{margin-right:0 !important}
}
/* hide Weglot's own floating switcher */
body.esencia-res .country-selector.weglot-dropdown:not(.esencia-res-langpill *),
body.esencia-res .weglot-container:not(.esencia-res-langpill *){display:none !important}

/* The pill is a flex child of the CTA row, so spacing is automatic. */
.esencia-res .esencia-res-cta{gap:10px !important}
.esencia-res .esencia-res-cta > .esencia-res-langpill{margin-right:4px !important;flex:0 0 auto !important}
@media(max-width:1024px){
  /* on mobile the buttons hide, but the pill stays — shown beside the burger */
  .esencia-res .esencia-res-cta{
    display:flex !important;position:absolute !important;
    right:76px !important;top:50% !important;transform:translateY(-50%) !important;
  }
  .esencia-res .esencia-res-cta .es-btn{display:none !important}
  .esencia-res .esencia-res-langpill{padding:2px !important;margin:0 !important}
  .esencia-res .esencia-res-lang-opt{font-size:10px !important;padding:7px 10px !important}
}