/* Costa Rica Realtor brand polish on top of Tailwind */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
.maplibregl-popup-content { border-radius: 10px; padding: 8px; }
.font-700 { font-weight: 700; }
.font-600 { font-weight: 600; }
.font-500 { font-weight: 500; }
.font-400 { font-weight: 400; }
::selection { background: #C16A43; color: #fff; }
/* truncate helper for 2 lines */
.clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* rotating hero */
.hero-rotator { position:absolute; inset:0; overflow:hidden; background:#16352B; }
.hero-slide { position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; animation:heroFade 35s infinite; will-change:opacity; }
.hero-slide:nth-child(1){ animation-delay:0s }
.hero-slide:nth-child(2){ animation-delay:7s }
.hero-slide:nth-child(3){ animation-delay:14s }
.hero-slide:nth-child(4){ animation-delay:21s }
.hero-slide:nth-child(5){ animation-delay:28s }
@keyframes heroFade { 0%{opacity:0} 3%{opacity:1} 17%{opacity:1} 20%{opacity:0} 100%{opacity:0} }
@media (prefers-reduced-motion: reduce){ .hero-slide{ animation:none } .hero-slide:nth-child(1){ opacity:1 } }
.drop-shadow { text-shadow:0 2px 12px rgba(0,0,0,.35); }

/* brand book: the gold line (divider system) */
.rule-gold { height:1px; background:#FFC531; opacity:.5; border:0; }
.rule-node { display:flex; align-items:center; gap:16px; }
.rule-node::before, .rule-node::after {
  content:""; height:1px; background:#FFC531; opacity:.5; flex:1; }
.rule-node .nd { width:9px; height:9px; background:#FFC531;
  border-radius:2px; transform:rotate(45deg); flex:0 0 auto; }
@media (max-width:760px){ .crr-why{ grid-template-columns:1fr !important; } }

/* purged tw build lacks lg:grid-cols-3 (lg-grid3) */
@media (min-width:1024px){ .lg\:grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* ---- mobile overflow hardening (2026-07-10 codex mobile audit) ----
   html-level clip: body-level overflow-x-hidden is ignored for scrolling by
   iOS Safari, which is exactly the "scroll right and it goes off screen"
   report. clip (unlike hidden) creates no scroll container and keeps
   position:sticky working. Sources are fixed too; this is the backstop. */
html{overflow-x:clip}
.wrap-any{overflow-wrap:anywhere;word-break:break-word}
/* rich blog/agency HTML (body_html|safe): media and tables must never widen
   the page; tables scroll inside their own box instead. */
.prose img,.prose iframe,.prose video{max-width:100%;height:auto}
.prose table{display:block;max-width:100%;overflow-x:auto}
.prose pre{max-width:100%;overflow-x:auto;white-space:pre-wrap}
.prose a{overflow-wrap:anywhere}
/* closing calculator: stack the three rate inputs on phones */
.calc-grid{display:grid;grid-template-columns:1fr;gap:.75rem}
@media (min-width:640px){.calc-grid{grid-template-columns:repeat(3,1fr)}}
/* opened mobile drawer must scroll within the viewport, not run below it
   (header is 4rem sticky) */
.mob-nav-scroll{max-height:calc(100dvh - 4rem);overflow-y:auto}
/* 44px minimum touch target without visual change: an invisible centered
   hit box (Apple HIG / WCAG 2.5.8). Applied to small header/chip/icon links. */
.tap{position:relative}
.tap::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100%,44px);height:max(100%,44px)}
.tap44{min-width:44px;min-height:44px}

/* A form that is mid-submit must LOOK mid-submit. Without this the button is
   inert but unchanged, so a visitor on a slow phone connection taps it again,
   which is exactly what happened to a real lead on 2026-09-06: her message
   saved, her second tap failed the single-use robot check, and she was shown
   "we could not verify your browser" over her own thank-you. */
button:disabled, .htmx-request button { opacity: .55; cursor: progress; }

/* --- Utilities MISSING FROM tw.css ------------------------------------------
   tw.css was built 2026-06-27; these five are used in templates and were never
   generated, so they did nothing at all. A missing positioning class does not
   look wrong in the markup, which is why they survived.

   .right-3 / .sm:right-6  the lightbox next arrow had no offset, so the browser
     parked it at its static position: the MIDDLE of a justify-center flex row.
   .top-20 / .lg:top-20    `sticky` with no offset never sticks, so the enquiry
     form sidebar did not follow the page down.
   .sm:left-6              the previous arrow silently fell back to left-3.

   Kept here rather than rebuilding tw.css, which is six weeks stale and would
   change far more than these five things. */
.right-1 { right: 0.25rem; }  /* search page mic button; tw.css lacks it */
.right-3 { right: 0.75rem; }
.top-20 { top: 5rem; }

@media (min-width: 640px) {
  .sm\:left-6 { left: 1.5rem; }
  .sm\:right-6 { right: 1.5rem; }
}

@media (min-width: 1024px) {
  .lg\:top-20 { top: 5rem; }
}

/* ---- answer capsule (2026-09-30, owner: "brand it, this is AI slop") ----
   No box: a 2px jungle rule, a terra kicker with the gold node from the
   divider system, a display headline, and the medians as big numerals on
   hairline-ruled rows. Two columns from 900px when figures are present. */
.crr-capsule{border-top:2px solid #1E4D3E;padding-top:1.25rem;margin:2rem 0 2.5rem;display:grid;gap:1.5rem 3.5rem}
@media (min-width:900px){.crr-capsule.has-figures{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}}
.crr-capsule__kicker{display:flex;align-items:center;gap:.6rem;margin:0 0 .6rem;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#C16A43}
.crr-capsule__kicker::before{content:"";width:8px;height:8px;background:#FFC531;border-radius:1px;transform:rotate(45deg);flex:0 0 auto}
.crr-capsule__q{margin:0;font-size:1.55rem;line-height:1.2;font-weight:700;color:#1E4D3E;max-width:30ch}
@media (min-width:768px){.crr-capsule__q{font-size:1.95rem}}
.crr-capsule__a{margin:.85rem 0 0;max-width:62ch;font-size:.95rem;line-height:1.65;color:rgba(28,43,37,.72)}
.crr-capsule__links{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;margin:1rem 0 0}
.crr-capsule__links a{color:#C16A43;font-weight:600;font-size:.92rem;text-decoration:none}
.crr-capsule__links a:hover{color:#A8542F;text-decoration:underline}
.crr-capsule__note{margin:.9rem 0 0;font-size:.72rem;color:rgba(28,43,37,.5)}
.crr-capsule__figs{margin:0}
.crr-capsule__fig{padding:1rem 0;border-bottom:1px solid rgba(28,43,37,.14)}
.crr-capsule__fig:first-child{padding-top:.2rem}
.crr-capsule__fig dt{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(28,43,37,.55)}
.crr-capsule__fig dd{margin:.35rem 0 0;display:flex;align-items:baseline;flex-wrap:wrap;gap:.1rem .4rem}
.crr-capsule__num{font-size:2.6rem;line-height:1;font-weight:700;color:#1E4D3E;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.crr-capsule__unit{font-size:1rem;font-weight:600;color:#1E4D3E}
.crr-capsule__n{margin-left:auto;font-size:.8rem;color:rgba(28,43,37,.55);font-variant-numeric:tabular-nums}
@media (max-width:420px){.crr-capsule__num{font-size:2.2rem}}


/* Mobile audit: switches and search controls need clear, separate touch areas. */
.crr-hdr-switch{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0}
.crr-search-swipe-hint{display:none}
.crr-search-mobile-tools{display:none}
@media (max-width:1023px){
  .crr-search-mobile-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 16px 8px}
  .crr-search-contact{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
    padding:0 12px;border-radius:8px;background:#1e4d3e;color:#fff;font-size:13px;font-weight:600;white-space:nowrap;text-decoration:none}
}
@media (max-width:767px){
  .crr-search-swipe-hint{display:block;padding:0;color:#61716a;font-size:12px}
}


/* Map view is available on phones; show load/failure state while tiles initialise. */
#crr-map-status{position:absolute;inset:0;z-index:3;display:none;align-items:center;justify-content:center;
  padding:24px;text-align:center;background:#f6f2e9;color:#1e4d3e;font-size:16px;line-height:1.5;pointer-events:none}
#crr-mobile-map-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:8px;padding:0 18px;border:1px solid #1e4d3e;border-radius:8px;background:#1e4d3e;color:#fff;font-weight:600}
@media (max-width:1023px){
  #crr-search-grid.crr-map-open #crr-map-status:not([hidden]){display:flex}
  #crr-search-grid.crr-map-open #results{display:none}
  #crr-search-grid.crr-map-open .crr-search-map-panel{display:block}
  #crr-search-grid.crr-map-open #map-wrap{position:relative;top:auto;height:calc(100dvh - 14rem);min-height:360px}
  .crr-search-map-panel .mapboxgl-ctrl-group button{width:44px;height:44px}
}


/* The agency directory page-size links are used with a thumb on phones. */
.crr-agency-page-size a,.crr-agency-page-size span{display:inline-flex;align-items:center;justify-content:center;min-height:44px}

/* Listing cards may be 2 columns on phones; show the full price. */
.crr-card-price{overflow-wrap:anywhere}
@media (max-width:639px){.crr-card-price{font-size:16px;line-height:1.3}}

.crr-area-pill{display:inline-flex;align-items:center;min-height:44px}

.crr-save-search-form input[type=email],.crr-save-search-form button{min-height:44px}

.crr-results-page-link{display:inline-flex;align-items:center;min-height:44px}

/* Keep four full-size switches and the menu visible on narrow phones. */
@media (max-width:359px){
  .crr-header-row{padding-left:8px;padding-right:8px;gap:4px}
  .crr-header-switches{gap:0}
  .crr-header-switches>span{display:none}
}

/* Reserve the line that the fallback font uses before Inter arrives on 3G. */
@media (min-width:390px) and (max-width:419px){.crr-home-intro{min-height:6lh}}
@media (max-width:339px){html[lang="en"] .crr-home-intro{min-height:8lh}}
@media (min-width:640px) and (max-width:799px){html[lang="en"] .crr-home-intro{min-height:4lh}}

/* Utility classes added after the Tailwind bundle was built need a real gap. */
.crr-card-facts{column-gap:12px;row-gap:4px}

/* The swipe gallery must not set the main grid track's minimum width. */
.crr-detail-layout>*{min-width:0}
@media (max-width:1023px){.crr-detail-layout{grid-template-columns:minmax(0,1fr)}}
.crr-detail-layout h1{overflow-wrap:anywhere}