/* Vanaja Deevi — Modernist palette
   Ported from "Vanaja Realty.dc.html" (Claude Design) to a vanilla static site. */

:root {
  --bg:        #EDEAE4;  /* page background */
  --surface:   #FAF8F4;  /* cards / panels */
  --ink:       #26241F;  /* body text */
  --forest:    #1F3B39;  /* primary / accent */
  --gold:      #B08D57;  /* secondary accent */
  --line:      #D9D2C4;  /* borders */
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Inter', sans-serif; overflow-x: hidden; }
a { color: var(--forest); }
a:hover { color: var(--gold); }

/* ---- image-slot placeholder (design's fillable image component, rendered static) ---- */
.image-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background:
    repeating-linear-gradient(45deg, rgba(31,59,57,0.04) 0 12px, rgba(31,59,57,0.08) 12px 24px);
  border: 1px dashed var(--line);
  color: rgba(38,36,31,0.55);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
}
.image-slot span { max-width: 220px; }

/* filled slot: drop the placeholder chrome, let the photo cover */
.image-slot.has-img { padding: 0; border: none; background: none; }
.image-slot.has-img span { display: none; }

/* ---- form controls ---- */
input, textarea, button { font-family: inherit; }
input:focus, textarea:focus { outline: 2px solid var(--forest); outline-offset: 1px; }

/* ---- small niceties ---- */
.image-slot, section, header, footer { transition: none; }

@media (max-width: 640px) {
  .image-slot { font-size: 11px; }
}

/* ---- featured carousel (home) ---- */
.carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  padding-bottom: 2px;
}
.carousel::-webkit-scrollbar { display: none; }
/* while dragging, panning should track the pointer exactly */
.carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }

.carousel__item { flex: 0 0 340px; scroll-snap-align: start; }
@media (max-width: 640px) { .carousel__item { flex-basis: 300px; } }

.carousel__btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #D9D2C4;
  border-radius: 4px;
  background: transparent;
  color: #26241F;
  cursor: pointer;
  padding: 0;
}
.carousel__btn:hover:not(:disabled) { background: #E3DDD0; }
.carousel__btn:disabled { opacity: 0.35; cursor: default; }

/* ---- site header ---- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(20px, 5vw, 64px);
  background: #EDEAE4;
  border-bottom: 1px solid #D9D2C4;
}
.site-nav__brand {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.01em;
  color: #26241F;
  cursor: pointer;
  white-space: nowrap;
}
.site-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 32px);
  font-size: 14px;
}
.site-nav__links > * { white-space: nowrap; }

/* phones: the five links don't fit beside the wordmark, so stack them under it */
@media (max-width: 640px) {
  .site-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .site-nav__links {
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    overflow-x: auto;          /* safety net on very narrow phones */
    scrollbar-width: none;
  }
  .site-nav__links::-webkit-scrollbar { display: none; }
}

/* ---- phones ---- */
/* iOS Safari zooms the whole page when you focus a control whose text is
   under 16px. Inline styles set these smaller, so override them here. */
@media (max-width: 640px) {
  input, textarea, select { font-size: 16px !important; }
}

/* Give the nav links a finger-sized hit area (they render ~19px tall). */
@media (max-width: 640px) {
  .site-nav__links > *,
  footer [data-action="nav"] {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
}

/* stop iOS inflating text when the phone is rotated to landscape */
html { -webkit-text-size-adjust: 100%; }

/* narrow phones (iPhone mini/SE): tighten so the row fits without scrolling */
@media (max-width: 400px) {
  .site-nav__links { gap: 8px; font-size: 12.5px; }
  .site-nav__links > *:last-child {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* wordmark: V mark sits alongside the name */
.site-nav__brand { display: inline-flex; align-items: center; gap: 10px; }
.site-nav__mark { height: 26px; width: auto; display: block; }
@media (max-width: 640px) { .site-nav__mark { height: 22px; } }