/* =========================================================
   Homecare360 — Stylesheet
   Brand colours:
     Blue        #1574ff
     Grey        #7f8da0
     Light Grey  #bec7d3
     White       #ffffff
   Font: Montserrat
========================================================= */

:root {
    --blue: #1574ff;
    --blue-dark: #0d5fd6;
    --grey: #7f8da0;
    --light-grey: #bec7d3;
    --bg-grey: #eceff2;
    --white: #ffffff;
    --text-dark: #2c333d;

    --font: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

    --container-width: 1140px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-pill: 999px;

    --shadow-card: 0 2px 10px rgba(44, 51, 61, 0.08);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
    margin: 0;
    font-family: var(--font);
    color: var(--text-dark);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { text-decoration: none; color: inherit; }

ul { list-style: none; margin: 0; padding: 0; }

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* Scroll offset so anchored sections aren't hidden under the sticky header */
section[id], div[id] { scroll-margin-top: 120px; }

.section-heading {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 8px;
    text-align: center;
}

.section-heading.light { color: var(--white); text-align: left; }

.section-subheading {
    text-align: center;
    color: var(--grey);
    margin: 0 0 40px;
    font-size: 0.95rem;
}

/* ============ HEADER ============ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-top {
    background: var(--blue);
}

.header-top-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top:5px;
    padding-bottom: 5px;
}

.logo img {
    height: 120px;
    width: auto;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.nav-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--white);
    border-radius: 2px;
}

.main-nav {
    background: var(--light-grey);
}

.main-nav ul {
    display: flex;
    justify-content: center;
    gap: 120px;
    padding: 28px 0;
}

.main-nav a {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--grey);
    padding-bottom: 6px;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--grey);
    border-bottom: 3.5px solid var(--blue);
}

/* ============ PLACEHOLDERS ============
   Swap these for real <img> tags — see comments in index.php */
.image-placeholder {
    background: var(--grey);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    min-height: 220px;
    border-radius: var(--radius-sm);
}

.image-placeholder.square {
    aspect-ratio: 1 / 1;
    min-height: 0;
    overflow: hidden;   /* clips the photo to the square, no grey edges */
}

.image-placeholder img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;      /* fills the box, cropping instead of stretching */
    object-position: center;
}

/* Fallback for browsers that don't support aspect-ratio (older Android
   WebView, in-app browsers, older Safari). Without this the square box has
   no height to hold onto, so the photo has nothing to sit inside and never
   appears — which is why it can show on a newer desktop browser but not on
   an older or less common mobile one. */
@supports not (aspect-ratio: 1 / 1) {
    .image-placeholder.square {
        position: relative;
        height: 0;
        padding-top: 100%;   /* 1:1 box using long-supported CSS */
    }

    .image-placeholder.square img {
        position: absolute;
        top: 0;
        left: 0;
    }
}

.hero-placeholder {
    background: var(--grey);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 600;
    height: 360px;
}

/* ============ HERO SLIDESHOW ============ */
/* 1. The hero scales with the viewport instead of being locked to a fixed
      pixel height. clamp() gives it a floor and a ceiling, and the vw value
      in the middle keeps the banner in proportion to the page width at every
      browser zoom level, so the crop never jumps around. */
.hero {
    position: relative;
    width: 100%;
    height: clamp(17.5rem, 34vw, 32rem);
    overflow: hidden;
    background: var(--grey); /* shows while a background image loads */
}

/* 2. The slideshow fills the hero exactly. Sizing lives on .hero only —
      don't set a height here as well or the two can disagree. */
.hero-slideshow {
    position: absolute;
    inset: 0;
}

/* 3. Position all slides on top of each other inside that container.
      inset: 0 (instead of top/left + width/height) avoids the 1px seams
      that show up at fractional zoom levels like 110% or 125%. */
.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* Fade transition setup */
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    will-change: opacity;
    backface-visibility: hidden;
    z-index: 1;
}

/* When a slide is active, it fades into view */
.hero-slide.is-active {
    opacity: 1;
    z-index: 2;
}

/* Unique background images for each slide with a dark gradient overlay */
.hero-slide--1 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../images/dustbin-cleaning2.jpg');
}

.hero-slide--2 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../images/garden-rubble-removal.jpg');
}

.hero-slide--3 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../images/bakkie-rentals.jpg');
}

.hero-slide--4 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../images/solar-panel-cleaning.jpg');
}

.hero-slide--5 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../images/mobile-car-wash.jpg');
}

.hero-slide--6 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../images/firewood-supplies.jpg');
}

.hero-slide--7 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../images/window-cleaning.jpg');
}

/* ============ WHO WE ARE ============ */
.who-we-are {
    padding: 100px 0;
    background: var(--white);
}

.who-we-are-grid {
    display: grid; 
    grid-template-columns: 300px 1fr; 
    gap: 48px; 
    align-items: center; 
    margin-top: 40px; 
}

.who-we-are-copy p {
    color: var(--grey);
    line-height: 1.7;
    margin: 0 0 16px;
    font-size: 0.95rem;
}

.tagline-strong {
    color: var(--text-dark) !important;
    font-weight: 600;
}

/* ============ SERVICES ============ */
.services {
    padding: 100px 0;
    background: var(--bg-grey);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.service-card {
   display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
}

/* The image frame. Both the real-photo wrapper (.service-media) and the
   grey placeholder use the identical box, so a row stays level whether a
   card has a photo yet or not. The frame — not the photo — sets the height. */
.service-media,
.service-card .image-placeholder {
    width: 100%;
    aspect-ratio: 3 / 4;
    min-height: 0;          /* cancels the 220px floor on .image-placeholder */
    margin-bottom: 16px;
    border-radius: 16px;
    overflow: hidden;       /* clips the photo to the rounded corners */
    background: var(--grey);
}

/* The photo fills the frame and is cropped to fit, instead of dictating
   its own height the way an unstyled <img> does. */
.service-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Fallback for older mobile browsers (pre-iOS 15 Safari, older Android
   WebView) that don't support aspect-ratio. Without this the frame has no
   height of its own and each photo falls back to its natural size, which is
   what makes the cards uneven on some phones. The padding-top percentage
   reproduces the same 3:4 box using only long-supported CSS. */
@supports not (aspect-ratio: 3 / 4) {
    .service-media,
    .service-card .image-placeholder {
        position: relative;
        height: 0;
        padding-top: 133.333%;  /* 4 ÷ 3 — keep in sync with the ratio above */
    }

    .service-media img {
        position: absolute;
        top: 0;
        left: 0;
    }

    .service-card .image-placeholder span {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
    }
}

.service-badge {
    display: inline-block;
    background: var(--blue);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    margin-bottom: 12px;
}

.service-desc {
    color: var(--grey);
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0 0 12px;
}

.service-price {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.5;
}

/* ============ TAGLINE BANNER ============ */
.tagline-banner {
    padding: 50px 0;
    background: var(--white);
    text-align: center;
}

.tagline-pill {
    display: inline-block;
    border: 2px solid var(--blue);
    color: var(--blue);
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px 40px;
    border-radius: var(--radius-pill);
}

/* ============ REVIEWS ============ */
.reviews {
    padding: 70px 0;
    background: var(--white);
    text-align: center;
}

.reviews-soon-text {
    color: var(--grey);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 28px;
}

/* Holds the third-party Google reviews widget embed code (see the
   setup comment above #google-reviews-widget in index.php). Most
   widget providers size themselves responsively, so this just keeps
   sensible breathing room above the action buttons. */
#google-reviews-widget {
    max-width: 100%;
    margin: 0 auto 32px;
    overflow: hidden; /* stops the widget's own script from stretching this box wider than the screen, which is the usual reason something centered below it ends up looking shifted on mobile */
}

/* ---- Action buttons ---- */
.reviews-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.btn-submit-review {
    display: inline-block;
    background: var(--blue);
    color: var(--white);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 13px 30px;
    border-radius: var(--radius-pill);
    transition: background 0.2s ease;
}

.btn-submit-review:hover { background: var(--blue-dark); }

.reviews-soon-link {
    color: var(--blue);
    font-weight: 600;
    font-size: 0.85rem;
}

.reviews-soon-link:hover { text-decoration: underline; }

/* ============ CONTACT ============ */
.contact {
    background: var(--blue);
    color: var(--white);
    padding: 100px 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 44px;
}

.contact-block p {
    margin: 0 0 6px;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.6;
}

.contact-grid > .contact-block:last-child {
    text-align: right;
}

.contact-block a:hover { text-decoration: underline; }

.connect-block h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 18px;
}

.social-icons {
    display: flex;
    gap: 14px;
}

.social-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
}

.social-icon:hover { transform: translateY(-2px); }

.social-icon svg {
    width: 18px;
    height: 18px;
    fill: var(--blue);
}

/* ============ FLOATING WHATSAPP BUTTON ============ */
.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    z-index: 200;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-float:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.whatsapp-float svg {
    width: 32px;
    height: 32px;
    fill: var(--white);
}

@media (max-width: 640px) {
    .whatsapp-float {
        width: 52px;
        height: 52px;
        bottom: 18px;
        right: 18px;
    }
    .whatsapp-float svg {
        width: 28px;
        height: 28px;
    }
}

/* ============ FOOTER ============ */
.site-footer {
    background: var(--light-grey);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 36px 24px 20px;
}

.footer-grid h4 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dark);
    margin: 0 0 12px;
}

/* Quick Links column stays left; Contact Details column stays right —
   tied explicitly to each column so alignment can't drift on any device. */
.footer-grid > div:first-child {
    text-align: left;
}

.footer-grid > div:last-child {
    text-align: right;
}

.footer-grid ul li { margin-bottom: 6px; }

.footer-grid a,
.footer-grid p {
    color: var(--text-dark);
    font-size: 0.85rem;
    margin: 0 0 6px;
}

.footer-grid a:hover { color: var(--blue); }

.footer-bottom {
    border-top: 1px solid var(--light-grey);
    padding: 16px 0;
}

.footer-bottom p {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-dark);
    text-align: center;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 900px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .who-we-are-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .contact-grid > .contact-block:last-child { text-align: left; }
    .logo img { height: 90px; }
    .hero { height: clamp(15rem, 40vw, 22rem); }
    .hero-slide-icon { width: 64px; height: 64px; }
    .hero-slide-label { font-size: 1.1rem; }
}

@media (max-width: 640px) {
    .nav-toggle { display: flex; }

    .main-nav {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .main-nav.is-open { max-height: 260px; }

    .main-nav ul {
        flex-direction: column;
        gap: 0;
        padding: 6px 0;
    }

    .main-nav a {
        display: block;
        padding: 12px 0;
    }

    .services-grid { grid-template-columns: 1fr; }
    .section-heading { font-size: 1.8rem; }
    .footer-grid { gap: 12px; padding: 28px 20px 16px; }
    .footer-grid h4 { font-size: 0.78rem; }
    .footer-grid a, .footer-grid p { font-size: 0.78rem; }
    .logo img { height: 64px; }
    .header-top-inner { padding-top: 14px; padding-bottom: 14px; }
    .hero { height: clamp(12.5rem, 46vw, 18rem); }
    .hero-slide-icon { width: 52px; height: 52px; }
    .hero-slide-label { font-size: 0.95rem; }

    /* Nudge the hamburger in from the container edge so it isn't flush
       against the side of the screen. Raise the value to move it further
       left, lower it to move it back toward the edge. */
    .nav-toggle { right: 20px; }

    /* One card per row on a phone, so a 3:4 portrait photo ends up roughly
       500px tall and pushes the text far down the page. A landscape frame
       keeps every card the same height while staying scrollable. Delete
       this block if you'd rather keep the tall portrait crop. */
    .service-media,
    .service-card .image-placeholder { aspect-ratio: 4 / 3; }
}

@supports not (aspect-ratio: 3 / 4) {
    @media (max-width: 640px) {
        .service-media,
        .service-card .image-placeholder { padding-top: 75%; }  /* 3 ÷ 4 */
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}