/* site.css — custom styles for YourPlace public site (loaded after Tailwind CDN). */

html, body { overflow-x: hidden; max-width: 100%; }

/* Hero title (override Tailwind text-5xl) */
.hero-title {
    color: #ef3e36;
    font-size: 52px !important;
}
.hero-title span {
    color: #0A3377;
}
.hero-subtitle {
    color: #ffffff;
}

/* Rich text from the admin WYSIWYG editor (page bodies + property descriptions).
   Tailwind CDN resets these, so restore sensible defaults for the allowlisted tags. */
.prose p, .yp-prose p { margin: 0 0 1em; }
.prose h2, .yp-prose h2 { font-size: 1.5rem; font-weight: 700; color: #152744; margin: 1.2em 0 .5em; }
.prose h3, .yp-prose h3 { font-size: 1.25rem; font-weight: 700; color: #152744; margin: 1em 0 .4em; }
.prose ul, .yp-prose ul { list-style: disc !important; padding-left: 1.5em; margin: 0 0 1em; }
.prose ol, .yp-prose ol { list-style: decimal !important; padding-left: 1.5em; margin: 0 0 1em; }
.prose li, .yp-prose li { margin: .25em 0; }
.prose a, .yp-prose a { color: #1d4ed8; text-decoration: underline; }
.prose strong, .yp-prose strong { font-weight: 700; }
.prose em, .yp-prose em { font-style: italic; }
.prose blockquote, .yp-prose blockquote { border-left: 3px solid #cbd5e1; padding-left: 1em; color: #475569; margin: 0 0 1em; }

/* ---------------------------------------------------------------------------
   Storefront width + type scale.
   The client is used to the old 10 Ninety site, which ran wider with a small
   gutter and used larger type. The page containers are all `max-w-6xl` (1152px),
   which left a lot of empty space on a 1440px screen and made the text look
   small by comparison.

   Rather than editing every template, the container cap is widened per
   breakpoint and the root font size is nudged up. Tailwind's text-* utilities
   are rem-based, so raising the root scales the whole page proportionally --
   headings, body and nav together -- without touching any markup.
   --------------------------------------------------------------------------- */

/* Laptop / standard desktop: 1140-1280 */
@media (min-width: 1024px) {
    html { font-size: 16.5px; }
    .max-w-6xl { max-width: 1200px; }
}

/* Desktop (standard): 1140-1366 */
@media (min-width: 1280px) {
    html { font-size: 17px; }
    .max-w-6xl { max-width: 1320px; }
}

/* Desktop (large): 1440-1600 */
@media (min-width: 1440px) {
    .max-w-6xl { max-width: 1340px; }
}

@media (min-width: 1680px) {
    .max-w-6xl { max-width: 1440px; }
}

/* The hero title is set in px, so it does not follow the root scale. Nudge it
   in step with the rest so the home page stays balanced. */
@media (min-width: 1280px) {
    .hero-title { font-size: 56px !important; }
}