/* === Diaspora webfont === */
@font-face{
  font-family: 'Diaspora';
  src: url('../fonts/diaspora/Diaspora-Regular.woff2') format('woff2'),
       url('../fonts/diaspora/Diaspora-Regular.woff') format('woff'),
       url('../fonts/diaspora/DiasporaRegular-ALdw7.otf') format('opentype'),
       url('../fonts/diaspora/Diaspora Demo.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* === NAV CLEANUP OVERRIDES === */

/* make header always transparent */
.site-header,
.site-header.scrolled {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* brand is visible for centered logo between dividers */
/* Hide hamburger menu button on desktop */
@media (min-width: 1025px) {
  .burger {
    display: none !important;
  }
}

/* Fully remove burger menu and background on desktop */
@media (min-width: 1025px) {
  .burger,
  .burger::before,
  .burger::after,
  .scrim {
    display: none !important;
    background: none !important;
    box-shadow: none !important;
  }
}

/* New nav layout: split left, center brand, right */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.nav a {
  padding: 0 12px;
  text-decoration: none;
  color: white;
}
.nav .nav-brand {
  font-family: 'Marcellus', serif;
  font-size: 1.4rem;
  color: var(--brand-pink);
  font-weight: bold;
}
.btn-book {
  background-color: var(--brand-pink);
  color: #fff !important;
  padding: 8px 14px;
  border-radius: 20px;
  font-weight: bold;
  transition: background-color 0.2s ease;
}
.btn-book:hover {
  background-color: #c49c99;
}

/* Three-column nav layout */
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
}
.nav-left, .nav-right {
  display: flex;
  gap: 18px;
}
.nav-right {
  justify-content: flex-end;
}
.nav-center{ display:none !important; }
.nav a {
  text-decoration: none;
  color: white;
}
.nav-brand {
  font-family: 'Marcellus', serif;
  font-size: 1.5rem;
  color: var(--brand-pink);
  font-weight: bold;
}
.btn-book {
  background-color: var(--brand-pink);
  color: #fff !important;
  padding: 8px 14px;
  border-radius: 20px;
  font-weight: bold;
  transition: background-color 0.2s ease;
}
.btn-book:hover {
  background-color: #c49c99;
}

/* FORCE three-column nav layout on desktop */
.nav {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  width: 100% !important;
}
.nav-left, .nav-right {
  display: flex !important;
  gap: 18px !important;
}
.nav-right {
  justify-content: flex-end !important;
}
.nav-center{ display:none !important; }
.nav a {
  text-decoration: none !important;
  color: white !important;
}
.nav-brand {
  font-family: 'Marcellus', serif !important;
  font-size: 1.5rem !important;
  color: var(--brand-pink) !important;
  font-weight: bold !important;
}
.btn-book {
  background-color: var(--brand-pink) !important;
  color: #fff !important;
  padding: 8px 14px !important;
  border-radius: 20px !important;
  font-weight: bold !important;
  transition: background-color 0.2s ease !important;
}
.btn-book:hover {
  background-color: #c49c99 !important;
}

/* Center PRANAYA link style */
.nav-brand {
  font-size: 1.2em;
  font-weight: bold;
  color: inherit;
  text-decoration: none;
}

/* Center PRANAYA link */
.nav-center{ display:none !important; }
.nav-center{ display:none !important; }

/* BOOK YOUR STAY button styling */
.btn-book {
  background-color: var(--brand-pink);
  color: #fff !important;
  padding: 8px 14px;
  border-radius: 20px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.2s ease;
  margin-left: 10px;
}
.btn-book:hover {
  background-color: #c49c99;
}

/* Adjust right divider to fit BOOK YOUR STAY button */
.nav-right {
  padding-right: 20px !important; /* space inside before edge */
}
/* Transparent BOOK YOUR STAY button */
.btn-book {
  background-color: transparent !important;
  border: 2px solid var(--brand-pink) !important;
  color: #fff !important;
  padding: 8px 14px !important;
  border-radius: 20px !important;
  font-weight: bold !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  margin-left: 10px !important;
}
.btn-book:hover {
  background-color: var(--brand-pink) !important;
  color: #fff !important;
}

/* Move right divider left so CTA sits to its right */
/* Place BOOK YOUR STAY to the far right, away from divider */
.nav-glass{ position: fixed; }
.btn-book{
  position: absolute;
  top: 50%;
  right: min(48px, 3vw);
  transform: translateY(-50%);
  white-space: nowrap;
  background: transparent !important;
  border: 2px solid var(--brand-pink) !important;
  color: #fff !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: clamp(12px, .95vw, 14px);
  font-weight: 700;
  line-height: 1;
}
.btn-book:hover{ background: var(--brand-pink) !important; color:#fff !important; }

/* Precise shift requests */
/* Move BOOK YOUR STAY 1cm further right (toward the edge) */
.btn-book{
  right: calc(max(0px, min(48px, 3vw) - 1cm)) !important;
}

/* Move the other right-side menu items 2cm left (more space for the button) */
.nav-right{
  padding-right: calc(min(48px, 3vw) + 2cm) !important;
}

/* === Balanced spacing using dividers and center brand === */
:root{
/* keep in sync with ::after */
}

/* Make hairlines use the same variables */
/* Three-lane layout: left group | PRANAYA | right group */
.nav-wrap{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  height: 100% !important;
}

/* Spread links evenly within their half, using dividers as padding bounds */
.nav-left, .nav-right{
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 0 !important; /* spacing comes from space-between */
}
.nav-left{
  justify-content: space-between !important;
  padding-left: calc(var(--hair-left) + 16px) !important;
  padding-right: clamp(16px, 3vw, 32px) !important;
}
.nav-right{
  justify-content: space-between !important;
  padding-left: clamp(16px, 3vw, 32px) !important;
  /* leave room on the far right for the absolute CTA and the divider */
  padding-right: calc(var(--hair-right) + 2cm) !important; /* includes your 2cm nudge */
}

/* Keep PRANAYA centered */
.brand{ justify-self: center !important; }

/* Keep nav items on a single line */
.nav-wrap{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
  align-items: center !important;
  height: 100% !important;
}
.nav-left, .nav-right{
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;     /* never wrap to second row */
  gap: clamp(14px, 1.8vw, 24px) !important;
  min-width: 0 !important;          /* allow flex items to shrink inside grid */
}
.nav-left a, .nav-right a{
  white-space: nowrap !important;   /* "Our Story" stays on one line */
}
/* Slightly reduce internal padding so everything fits comfortably */
.nav-left{
  padding-left: calc(var(--hair-left) + 8px) !important;
  padding-right: clamp(8px, 2vw, 20px) !important;
}
.nav-right{
  padding-left: clamp(8px, 2vw, 20px) !important;
  padding-right: calc(var(--hair-right) + 2cm) !important; /* keeps room for CTA */
}

/* === Single-row balanced nav, centered PRANAYA, CTA right === */

/* Use variables for consistent spacing and responsive letter spacing */
:root{
--nav-gap: clamp(10px, 1.2vw, 22px);
  --nav-letter: clamp(0.10em, 0.14vw, 0.18em);
}

/* Hairlines reference */
/* Three lanes: left | center | right, constrain columns so children can shrink instead of wrapping */
.nav-wrap{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
  align-items: center !important;
  height: 100% !important;
  column-gap: 0 !important;
}

/* Keep groups on a single line */
.nav-left, .nav-right{
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
  gap: var(--nav-gap) !important;
}

/* Left/right padding respects the dividers, and reserves space for CTA on right */
.nav-left{
  justify-content: space-between !important;
  padding-left: calc(var(--hair-left) + 16px) !important;
  padding-right: clamp(8px, 2vw, 20px) !important;
}
.nav-right{
  justify-content: space-between !important;
  padding-left: clamp(8px, 2vw, 20px) !important;
  padding-right: calc(var(--hair-right) + 2cm) !important; /* room for CTA */
}

/* Links: never wrap, slightly responsive letter-spacing and size */
.nav-left a, .nav-right a{
  white-space: nowrap !important;
  letter-spacing: var(--nav-letter) !important;
  font-size: clamp(12px, .95vw, 14px) !important;
  line-height: 1 !important;
}

/* Center brand stays on one line and slightly larger */
.brand, .nav-center{ display:none !important; }
.brand-text, .nav-center{ display:none !important; }

/* CTA fixed at far right, already set earlier */
/* .btn-book rules remain from previous patch */

/* Safety: if space still tight near 1280-1440px, gently tighten spacing so we stay one row */
@media (max-width: 1440px){
  :root{ --nav-gap: clamp(8px, 1vw, 18px); --nav-letter: clamp(0.08em, 0.12vw, 0.16em); }
}
@media (max-width: 1280px){
  :root{ --nav-gap: clamp(6px, 0.9vw, 16px); --nav-letter: clamp(0.06em, 0.10vw, 0.14em); }
}

/* === Force single-row alignment across header === */
.nav-wrap{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
}

.nav-left, .nav-right, .brand, .nav-center{ display:none !important; }

/* Prevent any stray margins from creating a second line */
.nav-left a, .nav-right a, .brand, .nav-center{ display:none !important; }
.nav-left, .nav-right { flex-wrap: nowrap !important; }

/* Tighten spacing slightly to keep all items on one row */
.nav-left, .nav-right { gap: clamp(10px, 1.2vw, 18px) !important; }
.nav-left a, .nav-right a { letter-spacing: clamp(0.08em, 0.12vw, 0.16em) !important; }

/* Remove overlap: give more room for the CTA and dividers */
.nav-right{ padding-right: calc(var(--hair-right) + 3cm) !important; } /* was 2cm */
.nav-left{  padding-left: calc(var(--hair-left) + 24px) !important; }   /* was 16px */

/* === Center PRANAYA between dividers, even spacing, single row === */

/* Use divider positions as content bounds */
.nav-wrap{
  padding-left: var(--hair-left) !important;
  padding-right: var(--hair-right) !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
  align-items: center !important;
  height: 100% !important;
}

/* Ensure groups never wrap and distribute evenly */
.nav-left, .nav-right{
  display:flex !important;
  align-items:center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;         /* spacing comes from space-between */
  min-width: 0 !important;
  width: 100% !important;
}
.nav-left a, .nav-right a{
  white-space: nowrap !important;
  letter-spacing: clamp(0.08em, 0.12vw, 0.16em) !important;
  font-size: clamp(12px, .95vw, 14px) !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* Remove old extra padding that skewed centering */
.nav-right{ padding-right: 0 !important; }
.nav-left{  padding-left: 0 !important;  padding-right: 0 !important; }

/* Keep the brand centered in the middle column */
.brand, .nav-center{ display:none !important; }

/* The CTA remains at the far right, outside the content bounds */
.btn-book{
  position: absolute !important;
  top: 50% !important;
  right: min(48px, 3vw) !important;
  transform: translateY(-50%) !important;
  white-space: nowrap !important;
}

/* Evenly space left and right menus across their grid columns */
.nav-left, .nav-right{
  justify-content: space-evenly !important;
  flex: 1 1 auto !important;
  white-space: nowrap !important;
}

/* Prevent wrapping for nav links */
.nav-left a, .nav-right a{
  white-space: nowrap !important;
}

/* Keep the 5-column grid so brand sits centered */
@media (min-width: 961px){
  .nav-wrap{ grid-template-columns: 64px 1fr auto 1fr 64px !important; }
}


/* === Force brand visible and centered === */
.brand, .brand .brand-text{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.brand{
  grid-column: 2 !important;   /* middle column of 5-col grid */
  justify-self: center !important;
  align-items: center !important;
  text-decoration: none !important;
}

.nav-center{ display: none !important; }


/* Remove border on BOOK YOUR STAY CTA */
.btn-book,
.btn-book:hover,
.btn-book:focus,
.btn-book:active{
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}





/* Shift BOOK YOUR STAY toward the right edge (outside divider) on desktop */
@media (min-width: 961px){
  .btn-book{
    right: max(8px, 0.6vw) !important;
  }
}


/* Use Diaspora for the centered wordmark */
.brand .brand-text{
  font-family: 'Diaspora', 'Marcellus', 'Optima', 'Trajan Pro', ui-serif, Georgia, serif !important;
  letter-spacing: 0.18em !important;
  font-weight: 400 !important;
}


/* Use Diaspora for the CTA text */
.btn-book{
  font-family: 'Diaspora', 'Marcellus', 'Optima', 'Trajan Pro', ui-serif, Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}


/* === CTA in brand Blush === */
.btn-book{
  background: var(--blush) !important;
  color: var(--navy) !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: .6rem 1.1rem !important;
  line-height: 1 !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.08) !important;
}
.btn-book:hover{
  background: color-mix(in srgb, var(--blush) 88%, black) !important;
}
.btn-book:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--blush) 80%, white) !important;
  outline-offset: 2px !important;
}


/* === Header hover visibility === */
.nav-glass{
  z-index: 130 !important; /* ensure above page overlay */
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease !important;
}

/* Darken the glass when the user hovers or tabs into the nav */
.nav-glass:hover,
.nav-glass:focus-within{
  background: rgba(8,18,24,.55) !important;
  backdrop-filter: blur(14px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(110%) !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.18) !important;
}

/* Brighten link colors while hovered/focused nav is active */
.nav-glass:hover .nav-left a,
.nav-glass:hover .nav-right a,
.nav-glass:hover .brand-text,
.nav-glass:focus-within .nav-left a,
.nav-glass:focus-within .nav-right a,
.nav-glass:focus-within .brand-text{
  color: #fff !important;
  opacity: 1 !important;
}

/* Make sure the mobile drawer is clearly visible too */
.drawer{
  background: rgba(8,18,24,.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}


/* === CTA: no hover effect, white text === */
.btn-book{
  color: #fff !important;                 /* white text */
  background: var(--blush) !important;    /* keep brand fill */
  border: none !important;
  box-shadow: none !important;
  transition: none !important;            /* disable hover animations */
}

.btn-book:hover,
.btn-book:focus,
.btn-book:active{
  color: #fff !important;                 /* keep white on interactions */
  background: var(--blush) !important;    /* no color change on hover */
  border: none !important;
  box-shadow: none !important;
}


/* === Canonical nav-wrap grid to center PRANAYA between hairlines === */
.nav-wrap{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important; /* left | PRANAYA | right */
  align-items: center !important;
  padding-left: var(--hair-left) !important;
  padding-right: var(--hair-right) !important;
}
.brand{
  grid-column: 2 !important;
  justify-self: center !important;
}


/* === Force PRANAYA perfectly centered between dividers === */
.nav-wrap{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important; /* three lanes */
  align-items: center !important;
}
.brand{
  grid-column: 2 !important; /* always the middle */
  justify-self: center !important;
  margin: 0 auto !important;
}


/* === Strict centering between equal dividers === */
.nav-glass{
  /* balance the hairlines left/right so the middle is geometric */
position: fixed; /* keep existing behavior */
}

.nav-wrap{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important; /* left | PRANAYA | right */
  align-items: center !important;
  padding-left: var(--hair-left) !important;
  padding-right: var(--hair-right) !important;
}

.brand{
  grid-column: 2 !important;
  justify-self: center !important;
}


/* === Mobile centering & spacing === */
@media (max-width: 768px){
  .nav-glass{
}
  .nav-wrap{
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    padding-left: var(--hair-left) !important;
    padding-right: var(--hair-right) !important;
  }
  .brand{
    grid-column: 2 !important;
    justify-self: center !important;
  }
}


/* === Divider position fix: place divider to LEFT of BOOK bubble === */
@media (min-width: 1024px){
  }


/* === Divider position fix v2: stronger push left === */
@media (min-width: 1024px){
  }


  .nav-wrap{
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    padding-left: var(--hair-left) !important;
    padding-right: var(--hair-right) !important;
  }
  .brand{
    grid-column: 2 !important;
    justify-self: center !important;
  }
}


  .nav-wrap{
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    padding-left: var(--hair-left) !important;
    padding-right: var(--hair-right) !important;
  }
  .brand{
    grid-column: 2 !important;
    justify-self: center !important;
    margin: 0 auto !important;
  }
  /* Hide right divider on mobile so PRANAYA stays centered */
  
}


/* === Desktop divider snug before CTA === */
@media (min-width: 1024px){
  }


  .nav-wrap{
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    padding-left: var(--hair-left) !important;
    padding-right: var(--hair-right) !important;
  }
  .brand{
    grid-column: 2 !important;
    justify-self: center !important;
    margin: 0 auto !important;
  }
  }


/* === Tablet (768px–1024px) adjustments === */
@media (min-width: 769px) and (max-width: 1023px){
  .nav-glass{
}
  .nav-wrap{
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
  }
  .brand{
    grid-column: 2 !important;
    justify-self: center !important;
  }
  /* Divider optional on tablet */
  
}


  .nav-wrap{
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .brand{
    grid-column: 2 !important;
    justify-self: center !important;
    margin: 0 auto !important;
  }
  }


/* === Mobile absolute-center PRANAYA === */
@media (max-width: 768px){
  .brand{
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
  }
  .nav-wrap{
    position: relative !important;
  }
}

/* === Mobile absolute-center PRANAYA (final tidy) === */
@media (max-width: 768px){
  .brand{
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
  }
  .nav-wrap{
    position: relative !important;
  }
}


/* === Mobile absolute-center anchored to full bar (nav-glass) === */
@media (max-width: 768px){
  .nav-glass{
    position: relative !important; /* anchor for absolute centering */
  }
  .brand{
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    width: max-content !important;
    pointer-events: none !important; /* don't block taps on MENU */
  }
  /* Remove dividers on mobile for clean centering */
  .nav-glass::before,
  
}

/* === Cal patch 2025-08-27: Right divider flush with BOOK YOUR STAY === */

/* Hide the old right hairline that was anchored to the viewport edge */
header/* Make the BOOK YOUR STAY button host its own divider */
/* Vertical hairline that sits directly to the left of the bubble */
/* Keep some breathing room on the right so the bubble doesn't hug the edge */



/* === Community Help visibility & alignment (minimal, non-invasive) === */
:root{
  /* Provide fallbacks so var() never drops rules */
  --nav-divider-left:  calc(min(48px, 3vw) + 18px);
  --nav-divider-right: calc(min(48px, 3vw) + 158px);
  --hair-left: var(--nav-divider-left);
  --hair-right: var(--nav-divider-right);
}

@media (min-width: 961px){
  /* Make sure the right group actually renders and keeps room for CTA & divider */
  .nav-right{ 
    display:flex !important; 
    justify-content:flex-end !important; 
    margin-right: 0 !important;
    padding-right: calc(var(--nav-divider-right) + 12px) !important;
  }
  .nav-right .nav-community{ white-space: nowrap; }
}