/* Villa Addon — Villa Header widget CSS.
   The .vo-drawer*, .vo-burger and .btn styles are already global on the live site
   (Elementor kit). Only the desktop/mobile .nav* scaffold is missing there, so it
   lives here. v3 CSS variables are redefined on .nav (the live site uses Elementor
   globals, so these vars aren't defined otherwise). */
.nav{
  --bg:#F4F5F2; --dark:#123536; --body:#5E5F5E; --line:#DCDFDB; --teal-ink:#097370;
  --pad-x:clamp(22px,3.6vw,100px); --ease:cubic-bezier(.22,.61,.36,1);
  --sans:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.nav__logo-text{ font-family:"Cormorant",Georgia,serif; font-weight:600; font-size:1.5rem; color:var(--dark); text-decoration:none; }

/* ---- desktop nav ---- */
.nav{ position:relative; z-index:20; background:var(--bg); }
.nav__grid{
  display:grid; grid-template-columns:1fr auto 1fr; gap:20px;
  align-items:center; height:161px;
  max-width:none; margin-inline:auto; padding-inline:var(--pad-x);
  transition:height .35s var(--ease);
}
/* measured: Outfit 20px / 500 / lh 24px. Rest = #514941 with an underline whose
   decoration-color is transparent; hover + active = #26180f and the underline
   colours in. transition: all 0.3s. */
.nav__links{ display:flex; gap:40px; }
.nav__links a{
  font-family:var(--sans); font-size:20px; font-weight:500; line-height:24px;
  color:var(--body);
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px;
  transition:all .3s ease;
}
.nav__links a:hover,
.nav__links a.is-active{ color:var(--dark); text-decoration-color:var(--dark); }
.nav__logo{ width:98px; height:auto; justify-self:center; display:block; transition:transform .35s var(--ease), width .4s var(--ease); }
.nav__logo img{ width:100%; height:auto; }
.nav__logo:hover{ transform:scale(1.05); }
.nav__right{ justify-self:end; }
.nav__burger{ display:none; }
.nav__bar{ border-bottom:1px solid var(--line); }

/* sticky, shrunk header on scroll — js/main.js toggles .stuck + inserts a spacer */
.nav.stuck{
  position:fixed; top:0; left:0; right:0; z-index:70;
  background:rgba(244,245,242,.9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line), 0 12px 30px -22px rgba(18,53,54,.45);
  animation:navDrop .45s var(--ease);
}
@keyframes navDrop{ from{ transform:translateY(-100%); } to{ transform:none; } }
.nav.stuck .nav__grid{ height:86px; }
.nav.stuck .nav__bar{ border-bottom:0; }
.nav.stuck .nav__logo{ width:54px; }
.nav__placeholder{ width:100%; }

/* ---- responsive nav ---- */
@media (max-width:1240px){
  .nav__grid{ grid-template-columns:1fr auto 1fr; height:110px; }
  .nav__links{ gap:26px; }
}
@media (max-width:1040px){
  /* logo | Check availability | burger.
     The CTA used to be hidden on mobile, so once the hero scrolled away a phone
     user had NO visible "Check availability" anywhere — which is the exact
     complaint the client raised. It lives in the sticky header now, on every
     width, so it is always one glance away without ever covering the copy. */
  .nav__grid{ grid-template-columns:auto 1fr auto; height:96px; gap:10px; }
  .nav__links{ display:none; }
  .nav__logo{ justify-self:start; width:52px; height:52px; }
  .nav__right{ display:block; justify-self:end; }
  .nav__right .btn{
    padding:11px 20px; font-size:14px; white-space:nowrap;
    background:var(--teal-ink); border-color:var(--teal-ink); color:#fff;
  }
  .nav__right .btn:hover{ background:var(--dark); border-color:var(--dark); }

  /* ----------  Burger: a ringed button, middle rule extends on press  ---------- */
}

/* -------------------------------------------------------------------------
 * Overlay mode — nav sits transparently over the hero video (home header).
 * Off by default (solid nav for sub-pages); on via the widget's Overlay control.
 * ---------------------------------------------------------------------- */
.nav--overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: transparent;
  border-bottom: 0;
}
.nav--overlay .nav__links a { color: rgba(255, 255, 255, .92); }
.nav--overlay .nav__links a:hover { color: #fff; }
.nav--overlay .nav__right .btn { border-color: rgba(255, 255, 255, .6); color: #fff; }
.nav--overlay .nav__right .btn:hover { background: #fff; color: var(--dark); border-color: #fff; }
.nav--overlay .vo-burger span { background: #fff; }
.nav--overlay .nav__logo img { transition: filter .35s var(--ease); }

/* When the overlay (transparent, white-content) nav sticks, JS adds .stuck and
   it drops onto the cream .stuck bar — so revert every white element to the
   solid dark treatment, or it reads as an invisible/faded header (white links,
   white logo and white burger on a near-white bar). This is the fix for the
   "header is not the same" report. */
.nav--overlay.stuck .nav__links a { color: var(--body); }
.nav--overlay.stuck .nav__links a:hover,
.nav--overlay.stuck .nav__links a.is-active { color: var(--dark); text-decoration-color: var(--dark); }
.nav--overlay.stuck .vo-burger span { background: var(--dark); }
/* White PNG logo → darken it so it's legible on the cream bar. */
.nav--overlay.stuck .nav__logo img { filter: brightness(0); }
@media (min-width: 1041px) {
  .nav--overlay.stuck .nav__right .btn { background: transparent; border-color: var(--teal-ink); color: var(--teal-ink); }
  .nav--overlay.stuck .nav__right .btn:hover { background: var(--teal-ink); border-color: var(--teal-ink); color: #fff; }
}