/**
 * Homepage — hand-written CSS (no build step).
 *
 * The theme's SCSS source is not in the repo and we do not run a build, so the
 * custom CSS for the homepage redesign lives here, in its own file, instead of
 * inline <style> blocks in the templates.
 *
 * Enqueued by functions.php (wp_enqueue_style 'prestige-homepage') site-wide,
 * after the theme's compiled CSS (dist/css/style.css) — besides the homepage
 * hero it also styles the reusable "our-homes" section. Selectors are scoped.
 *
 * Theme colours: primary #a78735 (gold) · secondary #1f4283 (dark blue).
 */

/* ============================================================
 * Hero (slider + trust badges bar)
 * ============================================================ */

.homepage-hero { overflow: hidden; }

.homepage-hero .hero-slide {
    position: relative;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    padding-top: 13rem;
    padding-bottom: 2rem;
    background-color: #f5f6fa;
    background-size: cover;
    background-position: center;
}

@media (min-width: 768px) {
    .homepage-hero .hero-slide { padding-top: 10rem; }
}

.homepage-hero .slick-track { display: flex; }
.homepage-hero .slick-track .hero-slide { height: auto; }

.homepage-hero .hero-slide::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(to right, rgba(245,246,250,0.78) 0%, rgba(245,246,250,0.74) 40%, rgba(245,246,250,0.42) 60%, rgba(245,246,250,0) 80%);
}

/* Mobile: the text spans the full width, so the overlay fades top-to-bottom. */
@media (max-width: 767.98px) {
    .homepage-hero .hero-slide::before {
        background: linear-gradient(to bottom, rgba(245,246,250,0.78) 0%, rgba(245,246,250,0.74) 55%, rgba(245,246,250,0.42) 80%, rgba(245,246,250,0) 100%);
    }
}

.homepage-hero .hero-slide .container { position: relative; z-index: 1; margin-top: auto; margin-bottom: auto; }
.homepage-hero .hero-slide-inner { padding-top: 2rem; padding-bottom: 2rem; }
.homepage-hero .hero-title { font-weight: 600; color: #1f4283; }
.homepage-hero .hero-subtitle { font-size: 1.15rem; margin-bottom: 1.5rem; color: #1f4283; }

.homepage-hero .hero-trust-bar { background-color: #1f4283; }
.homepage-hero .trust-item { display: flex; align-items: center; padding: 1.25rem 0.5rem; }
.homepage-hero .trust-icon {
    flex: 0 0 auto;
    color: #a78735;
    font-size: 2rem;
    line-height: 1;
    margin-right: 0.85rem;
}
/* Cap the text width so long badge labels wrap onto a second line. */
.homepage-hero .trust-text { color: #fff; max-width: 9rem; }

.homepage-hero .hero-slides { position: relative; padding-top: 0; }

.homepage-hero .slick-prev,
.homepage-hero .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #1f4283;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.homepage-hero .slick-prev:hover,
.homepage-hero .slick-next:hover { background: #a78735; }
.homepage-hero .slick-prev { left: 20px; }
.homepage-hero .slick-next { right: 20px; }
.homepage-hero .slick-prev i,
.homepage-hero .slick-next i { display: none; }

.homepage-hero .slick-prev::before,
.homepage-hero .slick-next::before {
    content: "";
    display: block;
    width: 11px;
    height: 11px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
}

.homepage-hero .slick-prev::before { transform: rotate(-135deg); margin-left: 4px; }
.homepage-hero .slick-next::before { transform: rotate(45deg); margin-right: 4px; }


/* ============================================================
 * Our Homes (care home cards grid)
 * ============================================================ */

.homepage-homes .our-homes-description { font-size: 1.15rem; color: #1f4283; }

.home-card {
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 6px 20px rgba(31,66,131,0.10);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(31,66,131,0.18);
}

.home-card-media { position: relative; }

.home-card-img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    margin-bottom: 0;
}

.home-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: #a78735;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.3rem 0.7rem;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.home-card-body { padding: 1.5rem; }

/* Info block (title -> location -> phone -> types) vertically centred
   in the space between the image and the CTA. */
.home-card-info { margin-top: auto; margin-bottom: auto; }

.home-card-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #1f4283;
    margin-bottom: 0.15rem;
}

.home-card-location {
    /* Darker shade of the brand gold so location text passes 4.5:1 on
       white (#a78735 is ~3.34:1 — fails normal-text contrast). */
    color: #8c6f25;
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.home-card-phone { margin-bottom: 1rem; }
/* z-index keeps the phone tappable above the card's stretched-link overlay. */
.home-card-phone a { position: relative; z-index: 2; color: #4a4f5c; text-decoration: none; }
.home-card-phone a:hover { color: #a78735; }

.home-card-types {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0;
}

.home-card-type {
    background-color: #f5f6fa;
    color: #1f4283;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
}

.home-card-cta { margin-top: 1.25rem; }


/* ============================================================
 * Why Choose (intro text + 4 feature columns)
 * ============================================================ */

.homepage-why-choose { background-color: #f5f6fa; }

.homepage-why-choose .why-choose-title {
    font-weight: 600;
    color: #1f4283;
    margin-bottom: 1rem;
}

.homepage-why-choose .why-choose-text {
    color: #1f4283;
    margin-bottom: 1.5rem;
}

.homepage-why-choose .why-choose-feature {
    text-align: center;
    margin-bottom: 1.5rem;
}

.homepage-why-choose .why-choose-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #fff;
    color: #1f4283;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.homepage-why-choose .why-choose-feature-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1f4283;
    margin-bottom: 0.5rem;
}

.homepage-why-choose .why-choose-feature-desc {
    font-size: 0.9rem;
    /* Bootstrap gray (#6c757d) is ~4.66:1 — borderline. Use darker
       neutral (~8:1) for safe normal-text contrast. */
    color: #4a4f5c;
    margin-bottom: 0;
}

/* Desktop: vertical divider between the intro and the features. */
@media (min-width: 992px) {
    .homepage-why-choose .why-choose-intro { padding-right: 2.5rem; }
    .homepage-why-choose .why-choose-features {
        border-left: 2px solid #e2e5ee;
        padding-left: 2.5rem;
    }
}

/* Mobile/tablet: stacked layout — horizontal divider between the intro and
   the features, with extra spacing so the icons are not cramped. */
@media (max-width: 991.98px) {
    .homepage-why-choose .why-choose-features {
        margin-top: 2.5rem;
        padding-top: 2.5rem;
        border-top: 2px solid #e2e5ee;
    }
}


/* ============================================================
 * Testimonials (image + quote slider)
 * ============================================================ */

.homepage-testimonials .testimonials-slider {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(31,66,131,0.15);
}

/* Equal-height slides so the panel and image always line up. */
.homepage-testimonials .slick-track { display: flex; }
.homepage-testimonials .slick-slide { height: auto; }
.homepage-testimonials .testimonial-slide {
    height: 100%;
    /* Same blue as the panel so any sub-pixel gap between the image and the
       panel columns stays invisible instead of leaking the page background. */
    background-color: #1f4283;
}
.homepage-testimonials .testimonial-slide > .row { height: 100%; }

.homepage-testimonials .testimonial-media { display: flex; position: relative; }

/* Gradient that fades the image into the blue panel. It overshoots 3px past
   the column edge so its antialiased edge lands on the solid panel, not on the
   column seam (which would otherwise show a hairline once Slick sets the
   slide's fractional pixel width). */
.homepage-testimonials .testimonial-media::after {
    content: "";
    position: absolute;
    top: 0;
    right: -3px;
    bottom: 0;
    width: 100%;
    background: linear-gradient(to right, rgba(31,66,131,0) 0%, rgba(31,66,131,0) 42%, rgba(31,66,131,0.5) 74%, #1f4283 96%);
    pointer-events: none;
}

.homepage-testimonials .testimonial-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.homepage-testimonials .testimonial-panel {
    background-color: #1f4283;
    color: #fff;
    padding: 3rem 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.homepage-testimonials .testimonial-quote {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 1.6rem;
    line-height: 1.4;
    margin-bottom: 1.25rem;
}

.homepage-testimonials .testimonial-attribution {
    color: #cdd6e6;
    margin-bottom: 1.5rem;
}

.homepage-testimonials .testimonial-reviews-link {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
}

.homepage-testimonials .testimonial-reviews-link:hover { color: #a78735; }

/* Slider arrows — bottom-right corner of the slider. */
.homepage-testimonials .testimonial-arrow {
    position: absolute;
    bottom: 1.75rem;
    z-index: 5;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.homepage-testimonials .testimonial-arrow:hover {
    background: #a78735;
    border-color: #a78735;
}

.homepage-testimonials .testimonial-arrow-prev { right: 5rem; }
.homepage-testimonials .testimonial-arrow-next { right: 1.75rem; }

.homepage-testimonials .slick-prev.slick-disabled,
.homepage-testimonials .slick-next.slick-disabled { opacity: 0.4; cursor: default; }

@media (max-width: 767.98px) {
    .homepage-testimonials .testimonial-img {
        height: auto;
        aspect-ratio: 16 / 9;
    }
    /* Stacked layout: fade the image into the panel downwards (overshoots
       3px past the seam, same reason as the desktop gradient). */
    .homepage-testimonials .testimonial-media::after {
        top: auto;
        left: 0;
        right: 0;
        bottom: -3px;
        width: auto;
        height: 75%;
        background: linear-gradient(to bottom, rgba(31,66,131,0) 0%, rgba(31,66,131,0) 42%, rgba(31,66,131,0.5) 74%, #1f4283 96%);
    }
    .homepage-testimonials .testimonial-panel { padding: 2.5rem 1.5rem 5rem; }
    .homepage-testimonials .testimonial-arrow { bottom: 1.25rem; }
}


/* ============================================================
 * Content Rows (alternating text + image blocks)
 * ============================================================ */

.homepage-content-rows { background-color: #f5f6fa; }

.homepage-content-rows .content-row + .content-row { margin-top: 3rem; }

@media (min-width: 768px) {
    .homepage-content-rows .content-row + .content-row { margin-top: 4.5rem; }
}

.homepage-content-rows .content-row-title {
    font-weight: 600;
    color: #1f4283;
    margin-bottom: 1rem;
}

/* Short gold accent bar above each row title. */
.homepage-content-rows .content-row-title::before {
    content: "";
    display: block;
    width: 48px;
    height: 4px;
    background-color: #a78735;
    border-radius: 2px;
    margin-bottom: 1.25rem;
}

.homepage-content-rows .content-row-paragraph {
    color: #1f4283;
    margin-bottom: 1.75rem;
    max-width: 32rem;
}

.homepage-content-rows .content-row-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(31,66,131,0.16);
}

@media (max-width: 767.98px) {
    .homepage-content-rows .content-row-media { margin-top: 1.5rem; }
}


/* ============================================================
 * CTA Banner (gold call-to-action strip)
 * ============================================================ */

/* Boxed banner: the gold background, rounded corners and inner padding live
   on the .container so the band sits inside the page grid (not full-width).
   The section's py-* utilities provide the spacing above and below the box. */
.homepage-cta-banner .container {
    background-color: #a78735;
    border-radius: 16px;
    padding: 2.5rem;
}

@media (max-width: 575.98px) {
    .homepage-cta-banner .container { padding: 1.75rem; }
}

.homepage-cta-banner .cta-banner-heading {
    color: #fff;
    font-weight: 600;
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}

.homepage-cta-banner .cta-banner-subtext {
    /* Solid white + larger/bolder type so the subtext qualifies as "large
       text" under WCAG (>=14pt bold). White on the gold background gives
       ~3.34:1 — fails 4.5:1 for normal text, but passes the 3:1 limit for
       large bold. */
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0;
}

/* Equal-width buttons side by side. Grid keeps them the same width
   regardless of label length (e.g. "Call us" vs "Call 01388 763650"),
   which would otherwise force the longer one to wrap under flex. */
.homepage-cta-banner .cta-banner-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 575.98px) {
    /* Single column on small phones — two narrow buttons in 1fr 1fr
       would crowd. */
    .homepage-cta-banner .cta-banner-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .homepage-cta-banner .cta-banner-actions { margin-top: 1.5rem; }
}

.homepage-cta-banner .cta-btn-solid,
.homepage-cta-banner .cta-btn-outline {
    font-weight: 600;
    /* Keep button labels on one line so equal-width grid cells don't
       force them to wrap (e.g. "Enquire now" or long "Call 01388 763650"). */
    white-space: nowrap;
    /* Reduce horizontal padding from the theme default so longer
       phone-number buttons still fit in the lg breakpoint. */
    padding-left: 1rem;
    padding-right: 1rem;
}

.homepage-cta-banner .cta-btn-solid {
    background-color: #fff;
    color: #1f4283;
}

.homepage-cta-banner .cta-btn-solid:hover {
    background-color: #1f4283;
    color: #fff;
}

.homepage-cta-banner .cta-btn-outline {
    background-color: transparent;
    border: 2px solid rgba(255,255,255,0.7);
    color: #fff;
}

.homepage-cta-banner .cta-btn-outline:hover {
    background-color: #fff;
    border-color: #fff;
    color: #a78735;
}

/* ============================================================
 * Footer — accessibility overrides
 * ------------------------------------------------------------
 * The footer uses Bootstrap's .text-primary (the theme's gold
 * #a78735) for the column labels ("Navigation", "Our Homes",
 * client name, "Address:") on a white background — that gives
 * ~3.34:1 and fails 4.5:1 for normal text. Darken just inside
 * the footer to keep the brand "gold" feel while passing WCAG.
 * Icons (.fa with .text-primary) only need 3:1 under SC 1.4.11
 * — they'd already pass — but the rule covers them too without
 * visual harm.
 * ============================================================ */

.urt-footer .text-primary,
.urt-footer .text-primary > strong,
.urt-footer strong.text-primary { color: #8c6f25; }

/* ============================================================
 * Call us — hero phone list panel (call-us-modal.php)
 * ------------------------------------------------------------
 * Rendered inline in the second column of the hero slide and
 * revealed by that slide's "Call us" CTA (no overlay). Gold card
 * with a fixed max-height and an internal scroll. The column is
 * empty (hero background shows through) until the panel opens.
 * ============================================================ */

.hero-call-us {
    display: flex;
    flex-direction: column;
    max-height: 62vh;
    border-radius: 1rem;
    overflow: hidden;
    background-color: #a78735;
    color: #fff;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
    animation: heroCallUsIn 0.3s ease;
}

@keyframes heroCallUsIn {
    from { opacity: 0; transform: translateY(0.75rem); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-call-us-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.hero-call-us-title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    color: #fff;
}

.hero-call-us-close {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.hero-call-us-close:hover,
.hero-call-us-close:focus {
    background-color: rgba(255, 255, 255, 0.3);
}

.hero-call-us-intro {
    flex: 0 0 auto;
    margin: 0;
    padding: 1rem 1.5rem 0.5rem;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
}

.hero-call-us-list {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 0.5rem 1.5rem 1.5rem;
    list-style: none;
    /* Blue scrollbar (theme secondary) on the gold panel — Firefox. */
    scrollbar-width: thin;
    scrollbar-color: #1f4283 rgba(255, 255, 255, 0.25);
}

/* Blue scrollbar (theme secondary) on the gold panel — WebKit. */
.hero-call-us-list::-webkit-scrollbar {
    width: 8px;
}

.hero-call-us-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.hero-call-us-list::-webkit-scrollbar-thumb {
    background: #1f4283;
    border-radius: 4px;
}

.hero-call-us-list::-webkit-scrollbar-thumb:hover {
    background: #163163;
}

.hero-call-us-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.25rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-call-us-item:last-child {
    border-bottom: 0;
}

.hero-call-us-name {
    flex: 1 1 100%;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #fff;
}

.hero-call-us-location {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
}

/* Icons render as <svg> once Font Awesome swaps the <i>, so target both. */
.hero-call-us-location i,
.hero-call-us-location .svg-inline--fa {
    width: 1em;
    margin-right: 0.5rem;
    text-align: center;
}

.hero-call-us-phone {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}

.hero-call-us-phone i,
.hero-call-us-phone .svg-inline--fa {
    width: 1em;
    margin-right: 0.5rem;
    text-align: center;
}

.hero-call-us-phone:hover,
.hero-call-us-phone:focus {
    color: #1f4283;
    text-decoration: underline;
}

/* Desktop: the panel overlays its column (absolute, vertically centred) so
 * opening it never grows the hero slide — the column keeps its natural height
 * and the panel floats over it within the 80vh slide. The open animation only
 * fades here (the shared keyframe uses translateY, which would fight the
 * translateY(-50%) centring). */
@media (min-width: 768px) {
    .hero-call-us-col {
        position: relative;
    }

    .hero-call-us {
        position: absolute;
        top: 50%;
        left: 15px;
        right: 15px;
        transform: translateY(-50%);
        animation: heroCallUsFade 0.3s ease;
    }

    @keyframes heroCallUsFade {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}

/* Mobile: the right column stacks below the text — give the panel
 * some breathing room from the CTAs above it. */
@media (max-width: 767.98px) {
    .hero-call-us {
        max-height: 70vh;
        margin-top: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-call-us {
        animation: none;
    }
}