/* DaSilva Property Group — shared styles
   Base tokens live inline per page <head>; this file carries the responsive
   show/hide rules (replacing the design runtime's mobile/desktop/wide/narrow
   flags), the mobile menu, the call dock, and hero slide behavior. */

html { scroll-behavior: smooth; }
body { margin: 0; background: #FAF8F3; color: #1C1C1A; font-family: Lato, sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: #7A6B40; text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; }

/* ---- Responsive show/hide (breakpoint-driven) ------------------------- */
/* Each element keeps its own inline display; we only hide it past a breakpoint. */
@media (min-width: 900px) { .only-mobile { display: none !important; } }
@media (max-width: 899px) { .only-desktop { display: none !important; } }
@media (min-width: 640px) { .only-narrow { display: none !important; } }
@media (max-width: 639px) { .only-wide { display: none !important; } }

/* Mobile slide-down menu: JS toggles display; never shows at desktop width. */
.mobile-menu { display: none; }
@media (min-width: 900px) { .mobile-menu { display: none !important; } }

/* ---- Mobile call dock ------------------------------------------------- */
.dock { display: none; }
.dock-spacer { display: none; }
@media (max-width: 759px) {
  body.dock-on .dock { display: grid; }
  body.dock-on .dock-spacer { display: block; }
}
@media (min-width: 760px) {
  .dock, .dock-spacer { display: none !important; }
}

/* ---- Buyer guide jump nav grid --------------------------------------- */
.jump-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 960px; }
@media (min-width: 860px) { .jump-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---- Hero slides ------------------------------------------------------ */
.hero-slide { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 3s cubic-bezier(.45,0,.55,1); will-change: opacity; }
.hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 10s linear; will-change: transform; }

/* On phones the hero CTAs and the photo credit both pin near the bottom.
   Give the content extra bottom room and drop the credit to the very bottom
   so they never overlap. */
@media (max-width: 639px) {
  .hero-content { padding-bottom: 168px !important; }
  .hero-credit { bottom: 16px !important; }
}

/* Honor reduced-motion: stop the Ken Burns zoom. */
@media (prefers-reduced-motion: reduce) {
  .hero-slide img { transition: none !important; transform: none !important; }
  html { scroll-behavior: auto; }
}