*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p {
  margin: 0;
}

/* .brand-badge ships as part of @sale-sync/theme-maker's bundled
   property-map-view.css, not something this consumer can edit — it's now an
   <a href="/"> (map page's logo links home, see PropertyMapViewSlice/
   index.ts) but that stylesheet never resets text-decoration, since it was
   only ever a plain div before. */
.brand-badge {
  text-decoration: none;
}

/* TestimonialsSlice's loading-skeleton pulse (createStyle() only emits flat class rules, no
   @keyframes support — see TestimonialsSlice/style.ts's skeletonBlock/skeletonQuoteLine/
   skeletonAuthorLine, which reference this by name). */
@keyframes testimonials-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Responsive overrides — createStyle() only emits flat rules, so
   breakpoints for the generated classes live here instead. */

/* !important is required here: global.css is always linked before the
   slice stylesheets (hardcoded in builder.ts), so at equal specificity
   these overrides would otherwise lose to the later, unconditional
   rules in e.g. hero.css regardless of whether the media query matches. */

@media (max-width: 640px) {
  .layout-header {
    padding: var(--spacing-md) var(--spacing-lg) !important;
  }

  /* Hamburger only exists at this breakpoint — see navToggle's `display:
     none` base in layout/style.ts, which this overrides. Fixed positioning
     keeps it above #site-nav.nav-menu-open (see below) so it stays
     reachable as the close button once the full-screen menu is open. */
  .layout-navToggle {
    display: inline-flex !important;
    position: fixed !important;
    top: var(--spacing-md) !important;
    right: var(--spacing-lg) !important;
    z-index: var(--zIndex-modal) !important;
  }

  /* Collapsed by default; header.ts's navToggleAssets script toggles
     .nav-menu-open on click. #site-nav's id gives this the specificity to
     win over .nav-nav's always-on `display: flex` without relying on load
     order. */
  #site-nav {
    display: none !important;
  }

  #site-nav.nav-menu-open {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--spacing-xl) !important;
    background-color: var(--color-white) !important;
    z-index: var(--zIndex-fixed) !important;
    padding: var(--spacing-2xl) !important;
    overflow-y: auto !important;
  }

  .nav-link {
    font-size: var(--fontSize-lg) !important;
  }

  .hero-panel {
    min-height: 50vh !important;
    padding: var(--spacing-xl) !important;
  }

  .hero-title {
    font-size: var(--fontSize-3xl) !important;
  }
}