/* =====================================
   UNITY FAMILY HOME LLC
   Modern Healthcare Website Styles
===================================== */


/* ===============================
   ROOT VARIABLES
================================ */

:root {

    --ufh-bg: #ffffff;

    --ufh-primary: #2A7FA5;
    --ufh-primary-dark: #216986;

    --ufh-accent: #4CAF8A;

    --ufh-text: #1f2937;
    --ufh-muted: #6b7280;

    --ufh-surface: #f5f9fb;

    --ufh-focus: #0ea5e9;

    --ufh-star: #f59e0b;


    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 20px;


    --shadow-sm:
    0 4px 12px rgba(0,0,0,.05);


    --shadow-md:
    0 12px 30px rgba(0,0,0,.08);


    --transition:
    all .35s ease;

}


/* ===============================
   GLOBAL
================================ */


html {

    scroll-behavior:smooth;

}


body {

    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;


    color:var(--ufh-text);

    background:
    var(--ufh-bg);

    line-height:1.6;

}



img {

    max-width:100%;

    display:block;

}



section {

    padding:80px 0;

}




/* ===============================
   ACCESSIBILITY
================================ */


.skip-link {

    position:absolute;

    left:-999px;

}



.skip-link:focus {

    left:20px;

    top:20px;

    background:#000;

    color:#fff;

    padding:12px 18px;

    border-radius:8px;

    z-index:2000;

}





/* ===============================
   NAVBAR
================================ */

.navbar {
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-bottom: 1px solid #e5e7eb;

    min-height: 82px;
    padding: 0.6rem 0;

    box-shadow: 0 3px 14px rgba(0,0,0,.04);
}


/* Brand container */
.navbar-brand {
    padding: 0;
    margin-right: 2rem;

    display: flex;
    align-items: center;
}


/* Logo wrapper */
.navbar-brand .logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    height: 68px;
    width: auto;
}


/* Actual logo image */
.navbar-brand .site-logo {
    display: block;

    width: auto;
    height: 68px;

    max-width: 240px;

    object-fit: contain;
    object-position: left center;
}


/* Navigation links */
.navbar-nav {
    align-items: center;
}


.nav-link {
    font-weight: 600;
    position: relative;

    padding: 0.75rem 0.7rem !important;

    color: var(--ufh-text);
}


.nav-link:hover,
.nav-link:focus {
    color: var(--ufh-primary);
}


/* underline animation */
.nav-link::after {
    content: "";

    position: absolute;

    bottom: 4px;
    left: 50%;

    width: 0;
    height: 3px;

    background: var(--ufh-primary);

    border-radius: 20px;

    transform: translateX(-50%);

    transition: width .3s ease;
}


.nav-link:hover::after,
.nav-link[aria-current="page"]::after {
    width: 65%;
}


.nav-link:focus-visible {
    outline: 3px solid var(--ufh-focus);
    outline-offset: 3px;
}


/* Contact button spacing */
.navbar .btn-cta {
    white-space: nowrap;
}


/* Tablet */
@media (max-width: 1200px) {

    .navbar-brand .logo {
        height: 60px;
    }

    .navbar-brand .site-logo {
        height: 60px;
        max-width: 205px;
    }

    .nav-link {
        padding-left: .5rem !important;
        padding-right: .5rem !important;
        font-size: .94rem;
    }
}


/* Mobile navigation */
@media (max-width: 991.98px) {

    .navbar {
        min-height: 72px;
        padding: .45rem 0;
    }

    .navbar-brand {
        margin-right: 0;
    }

    .navbar-brand .logo {
        height: 58px;
    }

    .navbar-brand .site-logo {
        height: 58px;
        max-width: 190px;
    }

    .navbar-collapse {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .navbar-nav {
        align-items: stretch;
    }

    .nav-link {
        padding: .75rem 0 !important;
    }

    .nav-link::after {
        display: none;
    }

    .navbar .btn-cta {
        display: block;
        width: 100%;
        margin: .5rem 0 0 !important;
        text-align: center;
    }
}


/* Small phones */
@media (max-width: 576px) {

    .navbar-brand .logo {
        height: 52px;
    }

    .navbar-brand .site-logo {
        height: 52px;
        max-width: 165px;
    }
}


/* ===============================
   HERO
================================ */


.hero {


    min-height:75vh;

    display:grid;

    place-items:center;


    position:relative;


    overflow:hidden;


    background:

    linear-gradient(
    180deg,
    rgba(42,127,165,.15),
    rgba(76,175,138,.12)
    ),

    #eaf5f9;


}



.hero::before {


    content:"";


    position:absolute;


    inset:0;


    background:

    url("assets/hero-caregivers.jpg")
    center/cover no-repeat;


    opacity:.3;


}



.hero-content {


    position:relative;


    max-width:950px;


    padding:4rem 1.2rem;


    text-align:center;


}



.hero h1 {


    font-size:

    clamp(
    2rem,
    4vw,
    3.2rem
    );


    font-weight:900;


    color:
    var(--ufh-primary-dark);


}



.hero p.lead {


    max-width:65ch;


    margin:
    1rem auto 2rem;


    color:
    var(--ufh-text);


    font-size:1.2rem;


}




/* ===============================
   BUTTONS
================================ */


.btn-cta {


    background:
    var(--ufh-primary);


    color:white;


    border:none;


    padding:
    .9rem 1.5rem;


    border-radius:50px;


    font-weight:700;


    box-shadow:
    var(--shadow-sm);


    transition:
    var(--transition);


}



.btn-cta:hover {


    background:
    var(--ufh-primary-dark);


    transform:
    translateY(-3px);


}



.btn-ghost {


    border:

    2px solid var(--ufh-primary);


    color:
    var(--ufh-primary);


    border-radius:50px;


    padding:
    .9rem 1.5rem;


    font-weight:700;


    transition:
    var(--transition);


}



.btn-ghost:hover {


    background:
    var(--ufh-surface);


}



/* ===============================
   SECTION TITLES
================================ */


.section-light {


    background:
    var(--ufh-surface);


}



.section-title {


    font-weight:900;


    color:
    var(--ufh-primary-dark);


}



.section-subtitle {


    color:
    var(--ufh-muted);


}



/* ===============================
   CARDS
================================ */


.service-card,
.profile-card,
.testimonial-card {


    background:white;


    border:

    1px solid #e5e7eb;


    border-radius:
    var(--radius);


    transition:
    var(--transition);


}



.service-card:hover,
.profile-card:hover,
.testimonial-card:hover {


    transform:
    translateY(-8px);


    box-shadow:
    var(--shadow-md);


}




.icon-lg {


    width:36px;

    height:36px;


    color:
    var(--ufh-primary-dark);


}


/* ===============================
   GALLERY
================================ */


#gallery {


    background:white;


}



.gallery-img {


    width:100%;


    height:600px;


    object-fit:cover;


    border-radius:
    var(--radius-lg);


    transition:
    transform .6s ease;


}



.gallery-img:hover {


    transform:
    scale(1.04);


}



#facilityCarousel {


    overflow:hidden;


    border-radius:
    var(--radius-lg);


    box-shadow:
    var(--shadow-md);


}



.carousel-item {


    transition:
    transform .8s ease-in-out;


}



.carousel-control-prev,
.carousel-control-next {


    width:60px;


}



.carousel-control-prev-icon,
.carousel-control-next-icon {


    background-color:

    rgba(42,127,165,.85);


    border-radius:50%;


    padding:20px;


}

/* ===============================
   SCROLL REVEAL ANIMATIONS
================================ */


/*
   Default reveal animation
*/

.animate {

    opacity:0;

    transform:
    translateY(50px);

    transition:
    opacity .8s ease,
    transform .8s ease;

}



.animate.show {

    opacity:1;

    transform:
    translateY(0);

}



/*
   Slide from left
*/

.fade-left {

    opacity:0;

    transform:
    translateX(-60px);

    transition:
    all .8s ease;

}



.fade-left.show {

    opacity:1;

    transform:
    translateX(0);

}




/*
   Slide from right
*/

.fade-right {

    opacity:0;

    transform:
    translateX(60px);

    transition:
    all .8s ease;

}



.fade-right.show {

    opacity:1;

    transform:
    translateX(0);

}





/*
   Zoom animation
*/

.zoom {

    opacity:0;

    transform:
    scale(.9);

    transition:
    all .8s ease;

}



.zoom.show {

    opacity:1;

    transform:
    scale(1);

}



/*
   Stagger animation for cards
*/

.stagger > * {


    opacity:0;


    transform:
    translateY(30px);


    transition:
    all .6s ease;


}



.stagger.show > *:nth-child(1){

    transition-delay:.1s;

}


.stagger.show > *:nth-child(2){

    transition-delay:.2s;

}


.stagger.show > *:nth-child(3){

    transition-delay:.3s;

}


.stagger.show > *:nth-child(4){

    transition-delay:.4s;

}



.stagger.show > * {


    opacity:1;


    transform:
    translateY(0);

}





/* ===============================
   CAREGIVER PROFILES
================================ */


.profile-card img {


    aspect-ratio:
    0.8/0.6;


    object-fit:cover;


}





/* ===============================
   TESTIMONIALS
================================ */


.stars {


    color:
    var(--ufh-star);


    letter-spacing:
    3px;


}



/* ===============================
   FORMS
================================ */


.form-control,
.form-select {


    padding:
    .8rem 1rem;


    border-radius:
    var(--radius);


    border:
    1px solid #d1d5db;


}



.form-control:focus,
.form-select:focus {


    border-color:
    var(--ufh-focus);


    box-shadow:

    0 0 0 .25rem
    rgba(14,165,233,.2);


}





/* ===============================
   FOOTER
================================ */


footer {


    background:
    #0f172a;


    color:
    #e5e7eb;


}



footer a {


    color:
    #c0e5f4;


    text-decoration:none;


}



footer a:hover {


    text-decoration:underline;


}



/* ===============================
   FLOATING EFFECTS
================================ */


.service-card,
.profile-card,
.gallery-img,
.btn {


    will-change:
    transform;


}




/* ===============================
   MOBILE RESPONSIVENESS
================================ */



@media(max-width:992px){


    .hero {


        min-height:
        65vh;


    }


    .gallery-img {


        height:
        450px;


    }


}




@media(max-width:768px){



    section {


        padding:
        60px 0;


    }



    .hero-content {


        padding:
        3rem 1rem;


    }



    .hero h1 {


        font-size:
        2rem;


    }



    .hero p.lead {


        font-size:
        1rem;


    }



    .hero .d-flex {


        flex-direction:
        column;


        width:
        100%;


    }



    .hero .btn {


        width:
        100%;


    }



    .gallery-img {


        height:
        320px;


    }



    .service-card,
    .profile-card {


        text-align:center;


    }



    .nav-link::after {


        display:none;


    }


}





@media(max-width:576px){


    .section-title {


        font-size:
        1.8rem;


    }



    .gallery-img {


        height:
        250px;


    }



    .carousel-control-prev,
    .carousel-control-next {


        width:
        45px;


    }



}




/* ===============================
   REDUCED MOTION ACCESSIBILITY
================================ */


@media(prefers-reduced-motion:reduce){


    *,
    *::before,
    *::after {


        animation:none !important;


        transition:none !important;


        scroll-behavior:auto !important;


    }



}