/* =========================================================
   MEelo — HOMEPAGE COMPATIBILITY
   Works with the current public/index.html
   Base homepage styling is handled by style.css
========================================================= */

/*
   IMPORTANT:
   The current index.html uses these classes:
   hero-label, hero-card, hero-card-one,
   hero-card-two, hero-card-three, hero-card-four.

   The previous home.css belonged to a different
   homepage layout and was overriding style.css.

   Keep this file free of conflicting layout rules.
*/

/* Smooth hover effects for homepage cards */

.hero-card {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.hero-card:hover {
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.12);
}

/* Hero button interaction */

.hero-button {
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.hero-button:hover {
    background: #e91e63;
    transform: translateY(-2px);
}

/* Search button interaction */

.home-search button {
    transition: background 0.2s ease;
}

.home-search button:hover {
    background: #e91e63;
}

/* Accessibility */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid #e91e63;
    outline-offset: 3px;
}