/*
 * Site-wide template fixes for the static rebuild (review.md defects 4 and 5).
 * Loaded from src/layouts/Layout.astro after each page's own head, on every route.
 * Rules are deliberately low-specificity (or scoped to body.single-post) so that the
 * home page's per-page Elementor rules still win and home is unchanged.
 */

/* ---- 5. Mobile / overflow containment -------------------------------------- */
html, body { overflow-x: clip; }
img, video, iframe { max-width: 100%; }
.elementor-heading-title, .entry-title { overflow-wrap: anywhere; word-break: break-word; }
/* Swiper carousels: duplicated slides must be clipped by the carousel, not the page. */
.elementor-image-carousel-wrapper, .elementor-image-carousel-wrapper .swiper,
.swiper, .swiper-container, .swiper-wrapper { overflow: hidden; }
/* Archive thumbnails were rendering at intrinsic size (1600px on a 390px screen). */
.post-thumbnail, a.post-thumbnail { display: block; max-width: 100%; }
.post-thumbnail img, .attachment-post-thumbnail { display: block; width: 100%; height: auto; max-width: 100%; }
/* Post headings: cap the size on phones so long titles wrap instead of pushing the page wide. */
@media (max-width: 767px) {
  body.single-post .elementor-heading-title { font-size: 32px; line-height: 1.2; }
}

/* ---- 4. Post appointment form / Hours of Operation block ------------------- */
/* The form's fixed px widths (textarea 636px) exceeded its half-width column and ran under the hours column. */
.appointment-section input, .appointment-section textarea { max-width: 100%; box-sizing: border-box; }
.appointment-section textarea { width: 100%; }
.appointment-section .form-fields { flex-wrap: wrap; }
/* Ribbon heading: the post template had no size rule, so the h2 fell back to 60px gold display text. */
.appointment-hours-text .elementor-heading-title { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; }
/* Posts: stack the ribbon above the hours card in its column instead of overlapping it (home keeps its layout). */
body.single-post .appointment-hours-col .appointment-hours-text { position: relative; top: auto; left: auto; width: 100%; margin: 0 0 20px; }
body.single-post .appointment-hours-col .elementor-widget-elementskit-business-hours { margin-top: 0; }