/*
  Spacerent — the project's own layer on top of Tailwind.
  Sections: base -> typography -> components -> forms -> map -> HTMX -> mobile.
*/

/* -------------------------------------------------------------------- base */

:root {
  --brand-navy: #192637;
  --brand-gold: #c29348;
  --ring: 0 0 0 3px rgb(211 164 90 / 0.55);
  --header-h: 4rem;
}

html {
  scroll-behavior: smooth;
  /* Anchors and pagination jumps must clear the sticky header. */
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  text-rendering: optimizeLegibility;
}

/* Keyboard-only focus ring, consistent on light and dark backgrounds. */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 0.5rem;
}

/* Text selection in the brand colours. */
::selection {
  background: rgb(194 147 72 / 0.28);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* -------------------------------------------------------------- typography */

/* Prices and table figures keep their width as digits change. */
.tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.balance {
  text-wrap: balance;
}

/* Card title truncation, in case the line-clamp plugin is unavailable. */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* -------------------------------------------------------------- components */

/* Soft card elevation — less material-ish than Tailwind's default. */
.card {
  box-shadow:
    0 1px 2px rgb(16 25 38 / 0.04),
    0 8px 24px -12px rgb(16 25 38 / 0.12);
}
.card-hover {
  transition:
    box-shadow 220ms ease,
    transform 220ms ease,
    border-color 220ms ease;
}
@media (hover: hover) {
  .card-hover:hover {
    transform: translateY(-2px);
    box-shadow:
      0 2px 4px rgb(16 25 38 / 0.05),
      0 18px 40px -18px rgb(16 25 38 / 0.28);
  }
}
.dark .card {
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.3),
    0 10px 30px -18px rgb(0 0 0 / 0.6);
}

/* Lazy images fade in over a placeholder instead of popping. */
img[loading='lazy'] {
  background-color: rgb(219 225 234 / 0.6);
}
.dark img[loading='lazy'] {
  background-color: rgb(38 51 74 / 0.6);
}

/* Horizontal strips (gallery thumbnails, filter chips) with a slim scrollbar. */
.scroll-x {
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.scroll-x::-webkit-scrollbar {
  height: 6px;
}
.scroll-x::-webkit-scrollbar-thumb {
  background: rgb(139 154 176 / 0.5);
  border-radius: 999px;
}
.scroll-x > * {
  scroll-snap-align: start;
}
.no-scrollbar {
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Entrance for the filter sheet and the gallery on phones. */
@keyframes sheet-in {
  from {
    transform: translateY(2%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.sheet-in {
  animation: sheet-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-in {
  animation: fade-in 180ms ease-out;
}

/* Blueprint grid — background for the hero and call-to-action bands. */
.blueprint {
  background-image:
    linear-gradient(rgb(211 164 90 / 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgb(211 164 90 / 0.07) 1px, transparent 1px),
    linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px);
  background-size:
    96px 96px,
    96px 96px,
    24px 24px,
    24px 24px;
  background-position: center;
}

/* Lock background scrolling while a full-screen panel is open. */
body.overlay-open {
  overflow: hidden;
}

/* ------------------------------------------------------------------- forms */

/* Brand-coloured select arrow, identical across platforms. */
select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364758f' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 1.15rem;
  padding-right: 2.1rem;
}
.dark select:not([multiple]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238b9aae' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
}

/* No spinners on number fields — ranges are typed, not stepped. */
input[type='number'] {
  -moz-appearance: textfield;
}
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='search']::-webkit-search-cancel-button {
  cursor: pointer;
}

/* --------------------------------------------------------------------- map */

.leaflet-container {
  font: inherit;
  background: #eaeef4;
}
.dark .leaflet-container {
  background: #101a26;
}
.leaflet-popup-content-wrapper {
  border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgb(16 25 38 / 0.45);
}
.leaflet-popup-content {
  margin: 12px;
}
.dark .leaflet-popup-content-wrapper,
.dark .leaflet-popup-tip {
  background: #192637;
  color: #eaeef4;
}
.dark .leaflet-popup-close-button {
  color: #8b9aae !important;
}
.leaflet-bar a,
.leaflet-control-attribution {
  border-radius: 8px;
}
.dark .leaflet-bar a,
.dark .leaflet-control-attribution {
  background: #26334a;
  color: #dbe1ea;
  border-color: #3d4a5e;
}
/* Dimmed map tiles in dark mode so the pins stay readable. */
.dark .leaflet-tile-pane {
  filter: brightness(0.72) saturate(0.72) contrast(1.05);
}
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background: rgb(194 147 72 / 0.28);
}
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background: #c29348;
  color: #101a26;
  font-weight: 700;
}

/* --------------------------------------------------------------------- HTMX */

.htmx-indicator {
  opacity: 0;
  transition: opacity 150ms ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}
/* Results dim while loading so the swap is visible. */
#results.htmx-request {
  opacity: 0.45;
  transition: opacity 150ms ease;
  pointer-events: none;
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 639px) {
  /* iOS zooms the page when focusing a field smaller than 16px. */
  input:not([type='checkbox']):not([type='radio']),
  select,
  textarea {
    font-size: 16px;
  }
}

/* Comfortable hit targets for every control on touch devices. */
@media (pointer: coarse) {
  button,
  [role='button'],
  a.tap,
  select,
  summary {
    min-height: 44px;
  }
  .tap-sm {
    min-height: 40px;
  }
}

@media print {
  header,
  footer,
  .no-print {
    display: none !important;
  }
  body {
    background: #fff;
  }
}