/*
 * Homepage Redesign Overlay — Hales AC
 * Targets: halesac.com front page (body.home)
 * Strategy: high-specificity selectors prefixed with body.home
 *           to win over block-level CSS without !important abuse.
 *
 * Sections:
 *   1. General / Section Spacing
 *   2. Hero (.masthead--homepage)
 *   3. Icon Pullouts (.half-image-text-icon-pullouts)
 *   4. Services Accordion (.half-image-half-accordian-links)
 *   5. Testimonials (.testimonials)
 *   6. Floating CTA (.floating-cta)
 *   7. Comfort Club / Home Image-Text (.home-image-text)
 *   8. Service Areas Accordion (.fx-accordion--service-location)
 *   9. Final CTA (.full-width-cta)
 *  10. Accessibility — focus styles
 */
/* ============================================================
   1. GENERAL — Section spacing & global transitions
   ============================================================ */
/* Increase breathing room on all coloured-background sections */
body.home .section-padding {
    padding-top: 56px;
    padding-bottom: 56px;
}
/* Increase section margin collapse on all white-background sections */
body.home .section-margins {
    margin-top: 56px;
    margin-bottom: 56px;
}
@media (min-width: 768px) {
    body.home .section-padding {
        padding-top: 72px;
        padding-bottom: 72px;
    }
    body.home .section-margins {
        margin-top: 72px;
        margin-bottom: 72px;
    }
}
@media (min-width: 1200px) {
    body.home .section-padding {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    body.home .section-margins {
        margin-top: 80px;
        margin-bottom: 80px;
    }
}
/* Smoother global hover transitions for interactive elements */
body.home a,
body.home button,
body.home .btn {
    transition: all 0.25s ease;
}
/* ============================================================
   2. HERO — .masthead--homepage
   ============================================================ */
/* More vertical breathing room in wrapper */
body.home .masthead__wrapper {
    padding: 48px 0 96px;
}
/* Larger years number on mobile */
body.home .masthead__years-number {
    font-size: 72px;
}
/* Slightly larger tagline on mobile */
body.home .masthead__tagline h1 {
    font-size: 26px;
}
/* Better subcopy size on mobile */
body.home .masthead__subcopy {
    font-size: 16px;
}
/* CTA buttons — more generous padding, slightly larger type */
body.home .masthead__cta {
    padding: 14px 24px;
    font-size: 14px;
    border-radius: 10px;
}
/* Trust badges — a bit larger on mobile */
body.home .masthead__trust-badges img {
    height: 42px;
}
/* --- Tablet (768px+) --- */
@media (min-width: 768px) {
    body.home .masthead__wrapper {
        padding: 60px 0 110px;
    }
    body.home .masthead__years-number {
        font-size: 90px;
    }
    body.home .masthead__tagline h1 {
        font-size: 38px;
    }
    body.home .masthead__subcopy {
        font-size: 17px;
    }
    body.home .masthead__cta {
        padding: 14px 26px;
        font-size: 14px;
    }
    body.home .masthead__trust-badges img {
        height: 50px;
    }
}
/* --- Desktop (1200px+) --- */
@media (min-width: 1200px) {
    body.home .masthead__wrapper {
        padding: 70px 0 130px;
    }
    body.home .masthead__years-number {
        font-size: 130px;
    }
    body.home .masthead__tagline h1 {
        font-size: 48px;
        line-height: 1.15;
    }
    body.home .masthead__subcopy {
        font-size: 18px;
        margin-bottom: 24px;
    }
    /* Larger, more impactful CTA buttons on desktop */
    body.home .masthead__cta {
        padding: 16px 28px;
        font-size: 15px;
    }
    body.home .masthead__trust-badges {
        margin-top: 36px;
        gap: 32px;
    }
    body.home .masthead__trust-badges img {
        height: 58px;
    }
    body.home .masthead__cta-group {
        gap: 16px;
    }
}
/* --- Large desktop (1400px+) --- */
@media (min-width: 1400px) {
    body.home .masthead__years-number {
        font-size: 140px;
    }
    body.home .masthead__tagline h1 {
        font-size: 52px;
    }
}
/* ============================================================
   3. ICON PULLOUTS — .half-image-text-icon-pullouts
   ============================================================ */
/* Larger, clearer section heading */
body.home .half-image-text-icon-pullouts__text h2 {
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 14px;
}
/* Slightly larger body copy */
body.home .half-image-text-icon-pullouts__text p {
    font-size: 17px;
    line-height: 1.6;
}
/* Modernised icon pills — subtle gold left border, extra padding, richer shadow */
body.home .list-icon {
    padding: 10px 18px;
    border-left: 3px solid #d4af37;
    box-shadow: 0 4px 18px rgba(51, 51, 51, 0.13);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    font-size: 15px;
}
body.home .list-icon:hover {
    box-shadow: 0 6px 22px rgba(51, 51, 51, 0.18);
    transform: translateY(-2px);
}
body.home .list-icon i {
    width: 30px;
    height: 30px;
    min-width: 30px;
    font-size: 15px;
}
@media (min-width: 768px) {
    body.home .half-image-text-icon-pullouts__text h2 {
        font-size: 32px;
    }
    body.home .half-image-text-icon-pullouts__text p {
        font-size: 17px;
    }
    body.home .list-icon {
        font-size: 16px;
    }
}
@media (min-width: 1200px) {
    body.home .half-image-text-icon-pullouts__text h2 {
        font-size: 36px;
    }
}
/* ============================================================
   4. SERVICES ACCORDION — .half-image-half-accordian-links
   ============================================================ */
/* Larger accordion heading */
body.home .half-image-half-accordian-links .fx-accordion__heading h2 {
    font-size: 28px;
    margin-bottom: 12px;
}
/* Accordion toggle — bolder, more padded */
body.home .half-image-half-accordian-links .fx-accordion__panel__toggle {
    font-size: 18px;
    padding: 18px 76px 18px 22px;
    border-radius: 14px;
    transition: background 0.25s ease, border-color 0.25s ease;
}
/* Accordion panel content — a bit more space */
body.home .half-image-half-accordian-links .fx-accordion__panel__content {
    font-size: 16px;
    line-height: 1.6;
    padding: 8px 22px 20px;
}
/* Expanded panel — cleaner shadow */
body.home .half-image-half-accordian-links .fx-accordion__panel.is-expanded {
    box-shadow: 0 6px 24px rgba(4, 36, 82, 0.1);
    border-radius: 14px;
}
/* Image tiles — more polished border-radius */
body.home .half-image-half-accordian-image {
    border-radius: 16px;
}
@media (min-width: 768px) {
    body.home .half-image-half-accordian-links .fx-accordion__heading h2 {
        font-size: 32px;
    }
    body.home .half-image-half-accordian-links .fx-accordion__panel__toggle {
        font-size: 20px;
        padding: 20px 80px 20px 24px;
    }
}
@media (min-width: 1200px) {
    body.home .half-image-half-accordian-links .fx-accordion__heading h2 {
        font-size: 36px;
    }
    body.home .half-image-half-accordian-links .fx-accordion__panel__toggle {
        font-size: 22px;
        padding: 22px 100px 22px 30px;
    }
    body.home .half-image-half-accordian-links .fx-accordion__panel__content {
        padding: 8px 30px 24px;
    }
    /* Hover border highlight uses gold on desktop */
    body.home .half-image-half-accordian-links .fx-accordion__panel:not(.is-expanded):hover .fx-accordion__panel__toggle {
        border-color: #d4af37;
    }
}
/* ============================================================
   5. TESTIMONIALS — .testimonials
   ============================================================ */
/* Section heading — larger */
body.home .testimonials__heading h2 {
    font-size: 30px;
    line-height: 1.2;
    margin-bottom: 10px;
}
/* Testimonial cards — modern aesthetic */
body.home .testimonial-slide-item {
    border-radius: 18px;
    box-shadow: 0 6px 24px rgba(4, 36, 82, 0.10);
    border-top: 3px solid #d4af37;
    padding: 22px 22px 26px;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
body.home .testimonial-slide-item:hover {
    box-shadow: 0 10px 32px rgba(4, 36, 82, 0.15);
    transform: translateY(-3px);
}
/* Description copy — more readable */
body.home .testimonial-slide-item__description p {
    font-size: 16px;
    line-height: 1.55;
}
/* Custom scrollbar styling for testimonial text */
body.home .testimonial-slide-item__description::-webkit-scrollbar {
    width: 5px;
}
body.home .testimonial-slide-item__description::-webkit-scrollbar-thumb {
    background: #d4af37;
    border-radius: 10px;
}
body.home .testimonial-slide-item__description::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 10px;
}
@media (min-width: 768px) {
    body.home .testimonials__heading h2 {
        font-size: 36px;
    }
    body.home .testimonial-slide-item {
        padding: 24px 24px 30px;
    }
    body.home .testimonial-slide-item__description p {
        font-size: 17px;
    }
}
@media (min-width: 1200px) {
    body.home .testimonials__heading h2 {
        font-size: 38px;
    }
}
/* ============================================================
   6. FLOATING CTA — .floating-cta
   ============================================================ */
/* Larger heading in the floating card */
body.home .floating-cta__wrapper h2 {
    font-size: 26px;
    line-height: 1.25;
    margin-bottom: 10px;
}
/* Improve paragraph readability */
body.home .floating-cta__wrapper p {
    font-size: 16px;
    line-height: 1.6;
}
/* Rounded wrapper — more modern card feel */
body.home .floating-cta__wrapper {
    border-radius: 18px;
}
@media (min-width: 768px) {
    body.home .floating-cta__wrapper h2 {
        font-size: 30px;
    }
    body.home .floating-cta__wrapper p {
        font-size: 17px;
    }
}
@media (min-width: 1200px) {
    body.home .floating-cta__wrapper h2 {
        font-size: 34px;
    }
    body.home .floating-cta__wrapper p {
        font-size: 18px;
    }
}
/* ============================================================
   7. COMFORT CLUB / HOME IMAGE-TEXT — .home-image-text
   ============================================================ */
/* Larger section headings */
body.home .home-image-text__text h2,
body.home .home-image-text__text .sub-heading {
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 8px;
}
/* Larger body copy */
body.home .home-image-text__text p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 16px;
}
/* List items — more room and slightly larger */
body.home .home-image-text__text ul li {
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: 8px;
    padding-left: 30px;
}
/* More prominent, modern image */
body.home .home-image-text__img img {
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(4, 36, 82, 0.15);
    transition: box-shadow 0.3s ease;
}
body.home .home-image-text__img:hover img {
    box-shadow: 0 16px 50px rgba(4, 36, 82, 0.2);
}
@media (min-width: 768px) {
    body.home .home-image-text__text h2,
    body.home .home-image-text__text .sub-heading {
        font-size: 34px;
    }
    body.home .home-image-text__text p {
        font-size: 17px;
    }
    body.home .home-image-text__text ul li {
        font-size: 17px;
    }
}
@media (min-width: 1200px) {
    body.home .home-image-text__text h2,
    body.home .home-image-text__text .sub-heading {
        font-size: 38px;
    }
}
/* ============================================================
   8. SERVICE AREAS ACCORDION — .fx-accordion--service-location
   ============================================================ */
/* Tighter, cleaner heading */
body.home .fx-accordion--service-location .fx-accordion__heading h2 {
    font-size: 28px;
    margin-bottom: 14px;
}
/* Toggle — extra breathing room, softer border */
body.home .fx-accordion--service-location .fx-accordion__panel__toggle {
    padding: 22px 76px 22px 26px;
    font-size: 18px;
    border-radius: 14px;
    border-color: rgba(4, 36, 82, 0.3);
    transition: border-color 0.25s ease, background 0.25s ease;
}
/* Expanded panel — clean shadow */
body.home .fx-accordion--service-location .fx-accordion__panel.is-expanded {
    box-shadow: 0 4px 20px rgba(4, 36, 82, 0.09);
    border-radius: 14px;
}
/* Column divider inside content area — softer tone */
body.home .accordian-location-links__col {
    border-bottom-color: rgba(51, 51, 51, 0.12);
}
/* City links — slightly larger */
body.home .accordian-location-links__col ul li a {
    font-size: 16px;
    line-height: 1.5;
    transition: color 0.2s ease;
}
/* Map container — cleaner look */
body.home .fx-accordion--service-location__map {
    background: rgba(4, 36, 82, 0.1);
    border-radius: 20px;
}
@media (min-width: 768px) {
    body.home .fx-accordion--service-location .fx-accordion__heading h2 {
        font-size: 34px;
    }
    body.home .fx-accordion--service-location .fx-accordion__panel__toggle {
        font-size: 20px;
        padding: 22px 80px 22px 28px;
    }
}
@media (min-width: 1200px) {
    body.home .fx-accordion--service-location .fx-accordion__heading h2 {
        font-size: 38px;
    }
}
/* ============================================================
   9. FINAL CTA — .full-width-cta
   ============================================================ */
/* Larger section heading */
body.home .full-width-cta h2 {
    font-size: 24px;
    line-height: 1.25;
    margin-bottom: 8px;
}
/* Body copy */
body.home .full-width-cta p {
    font-size: 16px;
    line-height: 1.6;
}
/* Larger highlight text on mobile */
body.home .full-width-cta__highlight-text {
    font-size: 30px;
}
body.home .full-width-cta__highlight-text::after {
    font-size: 30px;
}
/* CTA buttons — more impactful */
body.home .full-width-cta__text .btn {
    padding: 14px 28px;
    font-size: 16px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
body.home .full-width-cta__text .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}
@media (min-width: 768px) {
    body.home .full-width-cta h2 {
        font-size: 28px;
    }
    body.home .full-width-cta__highlight-text {
        font-size: 48px;
    }
    body.home .full-width-cta__highlight-text::after {
        font-size: 48px;
    }
}
@media (min-width: 1200px) {
    body.home .full-width-cta h2 {
        font-size: 32px;
    }
    /* Preserve the desktop 86px display size from the original stylesheet
       but add the new after-pseudo font-size to keep them in sync */
    body.home .full-width-cta__highlight-text {
        font-size: 90px;
    }
    body.home .full-width-cta__highlight-text::after {
        font-size: 90px;
    }
    body.home .full-width-cta p {
        font-size: 17px;
    }
    body.home .full-width-cta__text .btn {
        padding: 16px 32px;
        font-size: 17px;
    }
}
/* ============================================================
   10. ACCESSIBILITY — Focus styles
   ============================================================ */
/* Visible, on-brand focus rings for keyboard navigation */
body.home a:focus-visible,
body.home button:focus-visible,
body.home .btn:focus-visible,
body.home .masthead__cta:focus-visible,
body.home .fx-accordion__panel__toggle:focus-visible {
    outline: 3px solid #d4af37;
    outline-offset: 3px;
    border-radius: 6px;
}
/* Remove the default outline only when a custom one is applied */
body.home a:focus:not(:focus-visible),
body.home button:focus:not(:focus-visible),
body.home .btn:focus:not(:focus-visible) {
    outline: none;
}