/* ============================================================
   Site-specific overrides — kept separate from the vendor theme
   files (css/style.css, css/revolution-slider.css, etc.) so theme
   updates/comparisons stay clean. Loaded last, after everything else.
   ============================================================ */

/* Revolution Slider sets .tp-caption { white-space: nowrap } globally,
   sized for short demo text. Once real (and often longer) admin-edited
   headlines/subtext go in, that runs the text off the edge of the screen
   instead of wrapping. Override to wrap and stay within the viewport —
   !important is needed because the slider JS also sets inline styles on
   these elements for its animations, which beat plain CSS otherwise. */
.main-slider .tp-caption {
    white-space: normal !important;
    word-wrap: break-word !important;
    max-width: min(90vw, 900px) !important;
}

/* The theme's own responsive.css never resizes .main-slider h1 for
   smaller screens (it's a fixed 55px at every breakpoint) — fine for the
   original short two-line demo text, less fine for longer real headlines
   once they wrap. Scale it down to match the site's existing breakpoints. */
@media only screen and (max-width: 767px) {
    .main-slider h1 { font-size: 38px !important; line-height: 46px !important; }
}
@media only screen and (max-width: 500px) {
    .main-slider h1 { font-size: 28px !important; line-height: 34px !important; }
}

/* Review widget cards — styled after Google's own review cards (avatar
   initial, name + location header, yellow stars, plain compact text).
   Reuses .wellcome-section/.item-holder/.item-text from the theme for the
   card shell (border, padding, hover) but left-aligns the content instead
   of the theme's default centered layout. */
.reviews-section .item-holder { min-height: 100%; }
.reviews-section .item-text { padding-top: 20px !important; text-align: left; }

.review-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.review-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #48bef1;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size: 16px;
}
.review-header-info { text-align: left; }
.review-name { margin: 0 !important; padding: 0 !important; font-size: 15px !important; line-height: 20px !important; }
.review-location { display: block; color: #999 !important; font-size: 12px !important; }

/* The theme's .wellcome-section .item-text i rule (meant for a single big
   circular icon badge, e.g. the heartbeat/home icons elsewhere) also
   matches these <i class="fa fa-star"> icons since review cards reuse
   .wellcome-section/.item-text for the card shell — without resetting it,
   each star renders as an 80px blue circle instead of a small star glyph.
   Full reset, including the :hover variant which turns the badge solid
   blue on card hover. */
.reviews-section .item-holder .review-stars i,
.reviews-section .item-holder:hover .review-stars i {
    width: auto !important;
    height: auto !important;
    line-height: normal !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    margin-bottom: 0 !important;
    margin-right: 1px !important;
    font-size: 15px !important;
    display: inline-block !important;
}
.review-stars { margin: 0 0 10px; }
.review-stars .fa-star { color: #fbbc04 !important; }
.review-stars .fa-star-o { color: #dadce0 !important; }
.reviews-section .item-holder:hover .review-stars .fa-star { color: #fbbc04 !important; }
.reviews-section .item-holder:hover .review-stars .fa-star-o { color: #dadce0 !important; }

.review-quote {
    font-style: normal;
    text-align: left;
    color: #3c4043 !important;
    font-size: 14px !important;
    line-height: 22px !important;
    padding-bottom: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Overall rating summary bar — meant to sit right near the top of a page,
   first thing a visitor sees. */
.rating-summary-section {
    padding: 30px 0;
    background: #ffffff;
    border-bottom: 1px solid #eee;
}
.rating-summary-stars { font-size: 30px; margin-bottom: 8px; letter-spacing: 4px; }
.rating-summary-stars .fa-star { color: #fbbc04; }
.rating-summary-stars .fa-star-o { color: #dadce0; }
.rating-summary-value { font-family: 'Roboto Slab', serif; font-size: 22px; font-weight: 700; color: #222222; }
.rating-summary-count { font-size: 14px; color: #777777; }

/* Per-city FAQ on location pages */
.location-faq { margin-bottom: 10px; }
.location-faq-item { margin-bottom: 20px; }
.location-faq-q {
    font-family: 'Roboto Slab', serif;
    font-size: 17px;
    font-weight: 700;
    color: #222222;
    margin-bottom: 8px;
}
.location-faq-q span { color: #48bef1; margin-right: 6px; }