/* RegsNav — site styles.
   Base block is ported verbatim from the Claude Design source; the .rn-* classes
   below replace the design runtime's style-hover / style-focus attributes with
   real CSS, and the media queries at the bottom make the desktop-first layout
   survive small screens. */

html { scroll-behavior: smooth; }
body {
  margin: 0; background: #FAFAF8; color: #2B2B2B;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; text-wrap: pretty;
}
* { box-sizing: border-box; }
a { color: #66734F; text-decoration: none; }
a:hover { color: #C9A227; }
input { font-family: inherit; }
::selection { background: #C9A227; color: #2B2B2B; }

@keyframes rnFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes rnPulse { 0%, 100% { opacity: .35; transform: scale(.82); } 50% { opacity: 1; transform: scale(1); } }
@keyframes rnSweep { from { transform: translateX(-100%); } to { transform: translateX(320%); } }
@keyframes rnGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.rn-tip { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.rn-tip::before { display: none !important; }
.rn-tip-light { font-family: 'IBM Plex Mono', monospace !important; font-size: 10px !important; border: 0 !important; box-shadow: 0 4px 14px rgba(0,0,0,.14) !important; }
.leaflet-bar a { background: #1F1F1F !important; color: #F7F7F5 !important; border-color: rgba(247,247,245,.14) !important; }

/* ---- interactive states (were style-hover / style-focus in the design) ---- */

.rn-pill-dark { transition: background .18s ease, border-color .18s ease, color .18s ease; }
.rn-pill-dark:hover { background: #C9A227 !important; border-color: #C9A227 !important; color: #2B2B2B !important; }

.rn-btn-gold { transition: background .18s ease; }
.rn-btn-gold:hover { background: #F7F7F5 !important; color: #2B2B2B !important; }

.rn-btn-ghost-dark { transition: border-color .18s ease, color .18s ease; }
.rn-btn-ghost-dark:hover { border-color: #C9A227 !important; color: #C9A227 !important; }

.rn-btn-ghost-light { transition: border-color .18s ease; }
.rn-btn-ghost-light:hover { border-color: #C9A227 !important; }

/* min-width:0 lets the flex item shrink below the input's intrinsic content
   width — without it a long query string pushes the whole card past the viewport */
.rn-field { transition: border-color .18s ease; min-width: 0; }
.rn-field:focus-within { border-color: #C9A227 !important; }
#demo-input { min-width: 0; text-overflow: ellipsis; }

.rn-btn-submit { transition: background .18s ease, color .18s ease; }
.rn-btn-submit:hover { background: #C9A227 !important; color: #2B2B2B !important; }

.rn-chip { transition: border-color .18s ease, color .18s ease; }
.rn-chip:hover { border-color: #C9A227 !important; color: #2B2B2B !important; }

.rn-acc-btn { transition: background .18s ease; }
.rn-acc-btn:hover { background: #F4F4EF !important; }

.rn-who-cell { transition: background .18s ease; }
.rn-who-cell:hover { background: #FFFFFF !important; }

.rn-nav a { transition: color .18s ease; }
.rn-nav a:hover { color: #2B2B2B !important; }

/* ---- responsive ----
   The design comp was desktop-only: its columns carry inline min-width values
   (330–400px) that force horizontal overflow on a phone. .rn-col marks every
   such column so the breakpoints below can release the minimum. */

body { overflow-x: hidden; }

@media (max-width: 980px) {
  .rn-header-inner { flex-wrap: wrap; gap: 12px 20px !important; padding: 12px 20px !important; }
  .rn-header-inner > a:first-child { order: 1; }
  .rn-header-actions { order: 2; margin-left: auto; }
  .rn-nav { order: 3; flex: 0 0 100% !important; width: 100%; gap: 20px !important;
            overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .rn-nav::-webkit-scrollbar { display: none; }
  .rn-nav a { white-space: nowrap; }
}

@media (max-width: 760px) {
  .rn-col { min-width: 0 !important; }
  .rn-demo-form { flex-wrap: wrap; }
  .rn-demo-form .rn-btn-submit { width: 100%; padding: 14px 0 !important; }
  .rn-coverage-map-wrap { height: 440px !important; }
  .rn-parcel-map-wrap { width: 100% !important; min-width: 0 !important; min-height: 320px !important;
                        border-left: 0 !important; border-top: 1px solid #E8E8E3; }
  .rn-parcel-map-wrap regsnav-parcel-map { min-height: 320px !important; }
  .rn-result-side { width: 100% !important; border-left: 0 !important; padding-left: 0 !important;
                    border-top: 1px solid #E8E8E3; padding-top: 20px !important;
                    flex-direction: row !important; flex-wrap: wrap; gap: 24px !important; }
  .rn-split > div { border-right: 0 !important; }
}

@media (max-width: 680px) {
  section { padding-left: 20px !important; padding-right: 20px !important; }
  .rn-demo-section { padding-left: 14px !important; padding-right: 14px !important; }
  .rn-pad { padding-left: 18px !important; padding-right: 18px !important; }
  h1 { font-size: clamp(32px, 8.6vw, 46px) !important; }
  h2 { font-size: clamp(26px, 6.6vw, 38px) !important; }
  .rn-coverage-map-wrap { height: 400px !important; }
  /* the parcel fact grid is 2-up on desktop; one column reads better on a phone */
  .rn-facts { grid-template-columns: 1fr !important; }
}

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