/* Realtor Newsletters - runtime layer on top of the pen.dev export.
   The export ships two fixed-width artboards (1440 desktop, 390 mobile)
   absolutely positioned on one canvas. app.js turns that into a real page:
   one artboard is shown at a time and scaled to the viewport. */

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #F5EFE3; }

/* canvas wrapper the export emits */
body > div[class*="relative"] {
  position: relative !important;
  width: 100% !important;
  height: 0;
  overflow: hidden;
}

.rn-board {
  position: absolute !important;
  top: 0;
  transform-origin: top left;
}
.rn-board[hidden] { display: none !important; }

/* anything app.js wires to a URL or an anchor */
.rn-link { cursor: pointer; }
.rn-link:hover { opacity: .82; }

/* live Greetform embed */
.rn-embed {
  position: relative;
  border: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background: #FFFAF0;
  display: block;
}
.rn-embed-shell { position: relative; }
.rn-embed-fallback {
  position: absolute;
  inset: 0;
  display: none;
}
.rn-embed-shell[data-embed-failed="true"] .rn-embed { display: none; }
.rn-embed-shell[data-embed-failed="true"] .rn-embed-fallback { display: block; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* the canvas-measured width for this label rounds a hair short in the browser */
[data-pencil-name="Powered"] {
  width: auto !important;
  white-space: nowrap;
}

/* localhost-only preview toggle (app.js does not render it off localhost) */
.rn-preview-toggle {
  position: fixed;
  z-index: 9999;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 12px;
  border-radius: 999px;
  background: #171717;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
  font-family: Inter, system-ui, sans-serif;
}
.rn-preview-toggle span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #8A8279;
  margin-right: 2px;
}
.rn-preview-toggle button {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 7px 13px;
  border-radius: 999px;
  background: transparent;
  color: #B5AEA4;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
}
.rn-preview-toggle button[data-active="true"] {
  background: #C24C32;
  color: #FFFAF0;
}

/* EXPORT BUG FIX — do not remove.
   pen.dev's html export writes frames that have padding as box-sizing:content-box
   while still declaring the frame's TOTAL width (e.g. w-[1440px] + p-[96px]).
   That makes every full-width section 1632px wide inside a 1440px page, so the
   right ~110-190px of every section gets clipped. In pen.dev's own layout model
   width always includes padding, so border-box is the correct reading. */
[class*="box-sizing:content-box"] {
  box-sizing: border-box !important;
}