/* American Dream Homes — global floating nav + menu. Loaded by every page.
   Markup comes from nav() in scripts/build_team.py (index.html is synced from it by that build). */

/* ── Floating pill ── */
#nav { transition: opacity .45s, transform .6s cubic-bezier(.16,1,.3,1), visibility 0s; }
#nav.is-hidden { opacity: 0; transform: translateY(-24px); visibility: hidden; pointer-events: none; transition: opacity .35s, transform .5s cubic-bezier(.16,1,.3,1), visibility 0s .5s; }
#nav .pill { max-width: 1240px; overflow: hidden; background: rgba(15,25,36,.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 30px rgba(0,0,0,.28); transition: max-width .8s cubic-bezier(.16,1,.3,1); }
#nav .pill .btn { border-radius: 999px; }

/* parts that leave when the pill shrinks */
#nav .nav-fold { max-width: 1000px; overflow: hidden; white-space: nowrap; transition: max-width .7s cubic-bezier(.16,1,.3,1), opacity .35s; }
#nav.is-compact .pill { max-width: 560px; }

/* current section, shown between the logo and Menu while compact */
.nav-now { flex: 1 1 0; min-width: 0; max-width: 0; overflow: hidden; opacity: 0; text-align: center; white-space: nowrap; text-overflow: ellipsis; font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.72); transition: max-width .7s cubic-bezier(.16,1,.3,1), opacity .3s; }
#nav.is-compact .nav-now { max-width: 320px; opacity: 1; transition-delay: 0s, .25s; }
.nav-now.in { animation: navNow .5s cubic-bezier(.16,1,.3,1); }
@keyframes navNow { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nav-now.in { animation: none; } }
#nav.is-compact .pill.pill-cta { max-width: 380px; } /* ad pages: logo + Book button */
#nav.is-compact .nav-fold { max-width: 0; opacity: 0; pointer-events: none; visibility: hidden; transition: max-width .7s cubic-bezier(.16,1,.3,1), opacity .2s, visibility 0s .7s; }

/* ── Menu button: two lines in a circle + "Menu" ── */
.menu-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding-left: 6px; color: #fff; font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; overflow: hidden; transition: max-width .7s cubic-bezier(.16,1,.3,1), opacity .35s; }
.menu-btn .m-ring { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); transition: background-color .3s, border-color .3s; }
.menu-btn .m-ring i { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.menu-btn .m-ring i + i { margin-top: 5px; }
.menu-btn .m-ring span { display: grid; }
.menu-btn:hover .m-ring { background: #177cb0; border-color: #177cb0; }
.menu-btn:hover .m-ring i:first-child { transform: translateX(3px); }
.menu-btn:hover .m-ring i:last-child { transform: translateX(-3px); }
/* desktop: at the top the links are showing, so the button waits for the compact pill */
@media (min-width: 1024px) {
  #nav:not(.is-compact) .menu-btn { max-width: 0; opacity: 0; padding: 0; pointer-events: none; }
  #nav .menu-btn { max-width: 200px; }
}

/* ── Links ── */
.nav-link { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.86); transition: color .25s; }
.nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: #2098D1; transform: scaleX(0); transform-origin: right; transition: transform .45s cubic-bezier(.16,1,.3,1); }
.nav-link:hover, .nav-link[aria-current="page"] { color: #fff; }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
@media (min-width: 1024px) and (max-width: 1279px) { .nav-link { letter-spacing: .05em; font-size: 14px; } #nav .btn { padding: 0 1rem; letter-spacing: .1em; } #nav nav { gap: 14px; } }

/* ── Full-screen menu (every screen size) ── */
#menu { transition: opacity .4s, visibility .4s; }
#menu:not(.open) { opacity: 0; visibility: hidden; }
#menu .menu-link { transition: color .25s, padding-left .45s cubic-bezier(.16,1,.3,1); }
#menu .menu-link:hover, #menu .menu-link[aria-current="page"] { color: #2098D1; padding-left: 10px; }

/* phones: the section name needs the room, so the compact Menu button is just the circle */
@media (max-width: 639px) {
  #nav.is-compact .menu-btn > span:first-child { display: none; }
  .nav-now { font-size: 13px; letter-spacing: .16em; }
}