/* ==========================================================================
   RAQ custom styles
   Loaded site-wide, AFTER the theme CSS, so these rules win where they apply.
   Most rules are scoped to .ra-content / .ra-figure / .ra-services and only
   affect the service and location pages. The mobile hero rule applies to all
   pages so the banner title is a sensible size on phones.
   ========================================================================== */

/* Content spacing */
.ra-content h1 { margin-bottom: 18px; }
.ra-content h2 { margin-top: 40px; margin-bottom: 14px; }
.ra-content p  { margin-bottom: 16px; }

/* Bulleted service lists (theme hides list bullets by default) */
.ra-services { padding-left: 22px; margin: 0 0 20px; }
.ra-services li { list-style: disc !important; margin-bottom: 8px; }

/* In-content figure / placeholder image */
.ra-figure { margin: 8px 0 26px; text-align: center; }
.ra-figure img { width: 50%; height: auto; border-radius: 4px; }
.ra-figure figcaption { font-size: 13px; color: #999; font-style: italic; margin-top: 6px; }

/* Call-to-action spacing */
.ra-cta { margin-top: 30px; }

/* ---- Mobile (phones, <= 767px) ---- */
@media (max-width: 767px) {
  /* Shrink the oversized hero banner title (theme leaves it at 42px on mobile) */
  .hero-area .contents h2 { font-size: 26px; line-height: 1.25; margin-bottom: 15px; }

  /* Service / location page content on mobile */
  .ra-figure img { width: 100%; }
  .ra-content h1, .ra-content h2, .ra-content h3 { font-size: 22px; line-height: 1.3; }
  .ra-content p, .ra-content li { font-size: 16px; line-height: 1.7; }
}