/* Rental Depot — theme.css
 * Complements Tailwind CDN with the exact tokens from the React design system. */

:root {
  --pine:  #0D3B2E;
  --clay:  #C24D2C;
  --sand:  #F5F5F0;
  --cream: #FAF9F6;
  --ink:   #1A202C;
  --muted: #4A5568;
  --border:#E2E8F0;
}

html, body { background: var(--cream); color: var(--ink); }
body { font-family: 'Playfair Display', Georgia, serif; -webkit-font-smoothing: antialiased; font-weight: 400; }
h1, h2, h3, .font-display { font-family: 'Playfair Display', Georgia, serif; letter-spacing: -0.01em; font-weight: 600; }

/* Small utility text still uses Inter for legibility (eyebrows, tiny labels, buttons) */
.text-eyebrow,
button, .mopg-btn,
input, textarea, select, .mopg-input, .mopg-textarea, .mopg-select, .mopg-label,
.text-xs, .text-\[10px\], .text-\[11px\] {
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.text-eyebrow {
	font-size: 0.72rem; font-weight: 600;
	letter-spacing: 0.2em; text-transform: uppercase;
}

/* Colored utility overrides for tailwind CDN speed */
.bg-pine { background-color: var(--pine); }  .text-pine { color: var(--pine); }
.bg-clay { background-color: var(--clay); }  .text-clay { color: var(--clay); }
.bg-sand { background-color: var(--sand); }
.bg-cream { background-color: var(--cream); }
.border-pine { border-color: var(--pine); }
.ring-clay { --tw-ring-color: var(--clay); }
.hover\:bg-pine\/90:hover { background-color: rgba(13,59,46,.9); }
.hover\:bg-clay\/90:hover { background-color: rgba(194,77,44,.9); }

/* Grain overlay */
.grain { position: relative; }
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .5; mix-blend-mode: multiply;
}

/* Leaflet marker pin */
.marker-pin {
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--pine); color: white;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid white; box-shadow: 0 2px 8px rgba(0,0,0,.25);
  font-weight: 600; font-family: 'Inter', sans-serif; font-size: 12px;
}
.marker-pin.active { background: var(--clay); transform: scale(1.15); }

/* Buttons */
.mopg-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.65rem 1.35rem; border-radius:999px; font-weight:500; transition: background-color .2s, transform .15s; }
.mopg-btn:active { transform: scale(.97); }
.mopg-btn-primary   { background: var(--pine); color: white; }
.mopg-btn-primary:hover   { background: rgba(13,59,46,.92); }
.mopg-btn-accent    { background: var(--clay); color: white; }
.mopg-btn-accent:hover    { background: rgba(194,77,44,.92); }
.mopg-btn-outline   { border:1px solid var(--border); background:white; color: var(--ink); }
.mopg-btn-ghost-white { background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3); color: white; }
.mopg-btn-ghost { background: transparent; border:1px solid var(--pine); color: var(--pine); }
.mopg-btn-ghost:hover { background: var(--pine); color: white; }

/* Cards */
.mopg-card { background: white; border:1px solid var(--border); border-radius: 1rem; transition: transform .2s ease-out, box-shadow .2s; }
.mopg-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.06); }

/* Form controls */
.mopg-label { display:block; font-size:.875rem; font-weight:500; margin-bottom:.35rem; color: var(--ink); }
.mopg-input, .mopg-textarea, .mopg-select {
  width:100%; border:1px solid var(--border); background: white;
  border-radius:.5rem; padding:.625rem .8rem; font-size:.925rem;
  font-family: 'Manrope', sans-serif;
}
.mopg-input:focus, .mopg-textarea:focus, .mopg-select:focus {
  outline: none; border-color: var(--pine); box-shadow: 0 0 0 3px rgba(13,59,46,.15);
}
.mopg-textarea { min-height: 100px; resize: vertical; }
.mopg-check { display:inline-flex; gap:.5rem; align-items:flex-start; font-size:.9rem; }
.mopg-radio { display:inline-flex; gap:.5rem; align-items:center; margin-right: 1.5rem; }

/* Header */
.mopg-header { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(14px); background: rgba(255,255,255,.85); border-bottom: 1px solid rgba(0,0,0,.05); }

/* FAQ accordion */
.mopg-faq { border: 1px solid var(--border); background: white; border-radius: .75rem; overflow: hidden; }
.mopg-faq + .mopg-faq { margin-top: .5rem; }
.mopg-faq summary { list-style:none; cursor:pointer; padding:1rem 1.25rem; font-weight:600; color: var(--pine); display:flex; justify-content:space-between; align-items:center; }
.mopg-faq summary::-webkit-details-marker { display: none; }
.mopg-faq summary::after { content: "+"; font-size: 1.25rem; color: var(--muted); }
.mopg-faq[open] summary::after { content: "–"; }
.mopg-faq .faq-a { padding: 0 1.25rem 1rem; color: var(--muted); line-height: 1.6; }

/* Toast */
.mopg-toast { position: fixed; top: 20px; right: 20px; background: var(--pine); color: white; padding: .8rem 1.1rem; border-radius:.6rem; box-shadow: 0 8px 24px rgba(0,0,0,.15); z-index:100; opacity:0; transform: translateY(-8px); transition: opacity .2s, transform .2s; }
.mopg-toast.show { opacity: 1; transform: translateY(0); }
.mopg-toast.error { background: #991B1B; }

/* Utilities */
.aspect-4-3 { aspect-ratio: 4/3; }
.line-clamp-1 { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }

/* Nav link */
.mopg-nav a { color:#525252; font-size:.875rem; font-weight:500; }
.mopg-nav a:hover, .mopg-nav a.active { color: var(--pine); }

/* Phone CTA buttons — class-based sizing so both header pill + outline pill
   look proportional to their content, especially on mobile */
.mopg-phone-btn { font-variant-numeric: tabular-nums; }
.mopg-phone-btn .mopg-phone-num { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.mopg-phone-btn .mopg-phone-label { letter-spacing: .01em; }

/* Mobile: shrink phone buttons to content, matched icon + text sizing */
@media (max-width: 767px) {
	.mopg-phone-btn {
		height: auto !important;
		min-height: 0 !important;
		padding: .55rem 1rem !important;
		gap: .4rem !important;
		font-size: .875rem !important;
		line-height: 1 !important;
	}
	.mopg-phone-btn svg { width: 14px !important; height: 14px !important; flex-shrink: 0; }
	.mopg-phone-btn .mopg-phone-num,
	.mopg-phone-btn .mopg-phone-label { font-size: .875rem !important; letter-spacing: 0 !important; line-height: 1 !important; font-weight: 500 !important; }
	/* Outline-style phone buttons (listing sidebar) shouldn't stretch full-width on mobile */
	aside .mopg-phone-btn { width: auto; align-self: center; padding: .6rem 1.25rem !important; }
}

/* Keep the old .mopg-phone-num-only-on-desktop tweak for legacy buttons that don't have the new class */
.mopg-phone-num { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* Thumbnail strip (single rental listing) */
.mopg-thumb-strip-wrap { position:relative; }
.mopg-thumb-strip { display:flex; gap:.5rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; padding: 2px 2px 8px; scrollbar-width:thin; }
.mopg-thumb-strip::-webkit-scrollbar { height:4px; }
.mopg-thumb-strip::-webkit-scrollbar-thumb { background:rgba(13,59,46,.25); border-radius:999px; }
.mopg-thumb-strip::-webkit-scrollbar-track { background:transparent; }
.mopg-thumb-item { flex:0 0 auto; width:110px; height:80px; border-radius:8px; overflow:hidden; background:#F1F1EE; border:0; padding:0; cursor:pointer; scroll-snap-align:start; transition: transform .25s ease; }
.mopg-thumb-item:hover { transform: translateY(-1px); }
.mopg-thumb-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.mopg-thumb-item:hover img { transform:scale(1.05); }
.mopg-thumb-arrow { position:absolute; top:calc(50% - 8px); transform:translateY(-50%); width:32px; height:32px; border-radius:999px; border:0; background:rgba(255,255,255,.95); box-shadow:0 2px 8px rgba(0,0,0,.15); color:var(--pine); font-size:18px; font-weight:600; cursor:pointer; z-index:2; display:none; }
.mopg-thumb-arrow:hover { background:#fff; }
.mopg-thumb-prev { left:-10px; }
.mopg-thumb-next { right:-10px; }
@media (hover: hover) and (min-width: 768px) { .mopg-thumb-arrow { display:flex; align-items:center; justify-content:center; } }
@media (max-width: 767px) { .mopg-thumb-item { width:90px; height:66px; } }

/* =========================================================
 * Mobile & tablet polish (touch-first tweaks, desktop untouched)
 * ========================================================= */

/* Never allow horizontal scroll on small screens */
html, body { overflow-x: hidden; max-width: 100%; }

/* Only apply card lift on devices that actually hover */
@media (hover: none) {
	.mopg-card:hover { transform: none; box-shadow: none; }
}

/* Mobile-only rules */
@media (max-width: 767px) {
	/* Prevent iOS auto-zoom on focus by keeping inputs at ≥16px */
	.mopg-input, .mopg-textarea, .mopg-select { font-size: 16px; padding: .75rem .85rem; }
	.mopg-label { font-size: .95rem; }

	/* Bigger tap targets on primary CTAs */
	.mopg-btn { min-height: 44px; padding: .7rem 1.25rem; }

	/* Radios & checkboxes: stack on their own line so long labels don't wrap awkwardly */
	.mopg-radio, .mopg-check { display: flex; margin-right: 0; padding: .35rem 0; min-height: 40px; line-height: 1.35; }
	.mopg-radio input, .mopg-check input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; }

	/* Mobile nav: comfy 44px tap area */
	[data-mopg-mobile-menu] a { display: block; padding: .8rem 0; font-size: 1rem; border-bottom: 1px solid rgba(0,0,0,.05); }
	[data-mopg-mobile-menu] a:last-child { border-bottom: none; }
	[data-mopg-mobile-menu] .mopg-btn { display: inline-flex; min-height: 44px; }

	/* Long addresses / emails wrap instead of overflowing cards */
	.mopg-card, .mopg-faq { word-break: break-word; }

	/* Section titles: tighter line-height, no giant jumps */
	h1.font-display { line-height: 1.1; }
	h2.font-display { line-height: 1.15; }

	/* Hero image blocks that use min-height on desktop shouldn't dwarf mobile */
	.hero-image-shrink { min-height: 220px !important; }
}

/* Tablet (portrait): keep two-col layouts breathable */
@media (min-width: 640px) and (max-width: 1023px) {
	.mopg-btn { min-height: 44px; }
	.mopg-radio input, .mopg-check input { width: 18px; height: 18px; }
}