/* =========================================================================
   2026 refresh — website layer (loaded after style.css and theme.css)
   One signature moment: the listing photo glides from the card into its page (cross-page view transition).
   Around it: a header that condenses as you scroll, an app-style tab bar on phones, tactile controls.
   ========================================================================= */

/* ---- Page-to-page transitions (Chrome, Edge, Safari 18+; other browsers just load the page) ---- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
::view-transition-group(hero-photo) { animation-duration: .42s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-image-pair(hero-photo) { isolation: isolate; }
::view-transition-old(hero-photo), ::view-transition-new(hero-photo) { height: 100%; object-fit: cover; overflow: clip; animation: none; mix-blend-mode: normal; }
::view-transition-new(hero-photo) { animation: vtFade .42s ease both; }
@keyframes vtFade { from { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---- Header: condenses as the page scrolls ---- */
.nav { transition: box-shadow .25s, background-color .25s; }
.nav-inner { transition: height .25s cubic-bezier(.2, .8, .2, 1); }
.nav .brand img { transition: height .25s, width .25s; }
.nav.is-scrolled .nav-inner { height: 62px; }
.nav.is-scrolled .brand img { height: 34px; width: auto; }
.nav.is-scrolled .cat-tab { padding-top: 7px; padding-bottom: 7px; }

/* ---- Tactile, consistent controls ---- */
.btn { transition: transform .12s ease, box-shadow .2s ease, background-color .2s, filter .2s; }
.btn:active, .rx-btn:active, .spot-card:active, .card:active { transform: scale(.975); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid color-mix(in srgb, var(--brand, #0e7c66) 55%, transparent); outline-offset: 2px; border-radius: 10px; }
::selection { background: color-mix(in srgb, var(--accent, #d9401f) 22%, transparent); }
input, select, textarea { transition: border-color .15s, box-shadow .15s; }
:where(.field, .au-field, .pfield) :is(input, select, textarea):focus { border-color: var(--brand, #0e7c66); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand, #0e7c66) 14%, transparent); outline: none; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---- Photos load in on a soft shimmer instead of an empty grey box ---- */
.card-img, .rs-img, .spot-img, .pr-img, .rx-g, .rx-room-gal { background: linear-gradient(100deg, #eef3f0 30%, #f8faf9 50%, #eef3f0 70%) 0 0 / 300% 100%; }
.card-img:not(.is-loaded), .rs-img:not(.is-loaded), .spot-img:not(.is-loaded), .pr-img:not(.is-loaded) { animation: shimmer 1.3s linear infinite; }
.card-img img, .rs-img img, .spot-img img, .pr-img img { transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.card-img:not(.is-loaded) img, .rs-img:not(.is-loaded) img, .spot-img:not(.is-loaded) img, .pr-img:not(.is-loaded) img { opacity: 0; }
@keyframes shimmer { to { background-position: -300% 0; } }

/* ---- Phones: an app-style tab bar; the category tabs move into it ---- */
.tabbar { display: none; }
@media (max-width: 760px) {
  .tabbar { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 70; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding: 6px; border-radius: 22px; background: rgba(255, 255, 255, .86); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border: 1px solid rgba(15, 60, 45, .1); box-shadow: 0 18px 40px -20px rgba(6, 52, 44, .55); }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px 6px; border: 0; background: none; border-radius: 16px;
    font: inherit; font-size: .68rem; font-weight: 700; color: #5d6874; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .2s, background-color .2s; }
  .tabbar svg { width: 23px; height: 23px; }
  .tabbar .on { color: var(--brand-dark, #0b5e4f); background: color-mix(in srgb, var(--brand, #0e7c66) 11%, transparent); }
  .tabbar a:active, .tabbar button:active { transform: scale(.94); }
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .nav .cat-tabs { display: none; }
  .wa-float { bottom: calc(92px + env(safe-area-inset-bottom)); right: 14px; padding: 12px; }
  .wa-float span { display: none; }
  .rx-mbar { bottom: calc(92px + env(safe-area-inset-bottom)) !important; }
  .a2hs-bar, .a2hs-banner { bottom: calc(92px + env(safe-area-inset-bottom)) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .card-img, .rs-img, .spot-img, .pr-img { animation: none !important; }
  .nav-inner, .btn { transition: none; }
}