/* mediFRESH Global App Styles */

/* ─── Typography baseline ─────────────────────────────────────── */
html {
    scroll-behavior: smooth;
    font-size: 16px;
}

/*
 * Force legible body text. Tailwind utility colors sometimes get overridden
 * by font-weight utilities. We set a strong base here in pure CSS.
 */
body {
    color: #0c0d12;
    /* very close to pure black — maximum contrast */
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Outfit', sans-serif;
    color: #070708;
    line-height: 1.25;
    font-weight: 700;
}

h1 {
    font-weight: 800;
    line-height: 1.1;
}

h2 {
    font-weight: 700;
}

p {
    line-height: 1.85;
}

/* Ensure gray-600 / gray-500 colors are still readable when used intentionally */
.text-gray-600 {
    color: #4b5563 !important;
}

.text-gray-500 {
    color: #6b7280 !important;
}

/* ─── Scroll-reveal animation system ─────────────────────────────
   Add [data-animate] to any element you want to animate on scroll.
   The JS IntersectionObserver in app.js adds .is-visible when in view.
   Uses prefers-reduced-motion to fully disable for accessibility.
─────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    [data-animate] {
        opacity: 0;
        transform: translateY(30px);
        transition:
            opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    }

    [data-animate="fade-left"] {
        transform: translateX(-30px);
    }

    [data-animate="fade-right"] {
        transform: translateX(30px);
    }

    [data-animate="scale"] {
        transform: scale(0.93);
        opacity: 0;
    }

    [data-animate="fade-up"] {
        transform: translateY(30px);
    }

    [data-animate].is-visible {
        opacity: 1;
        transform: none;
    }

    /* Cascade delays for groups of sibling elements */
    [data-delay="100"] {
        transition-delay: 100ms;
    }

    [data-delay="200"] {
        transition-delay: 200ms;
    }

    [data-delay="300"] {
        transition-delay: 300ms;
    }

    [data-delay="400"] {
        transition-delay: 400ms;
    }

    [data-delay="500"] {
        transition-delay: 500ms;
    }
}

/* ─── Custom Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-track {
    background: #f3f0f4;
}

::-webkit-scrollbar-thumb {
    background: #632564;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #471948;
}

/* ─── Utility: Line clamping ─────────────────────────────────── */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─── Base interactive transitions ───────────────────────────── */
a,
button {
    transition-property: color, background-color, border-color, opacity, box-shadow, transform, filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

/* ─── AlpineJS Cloak ─────────────────────────────────────────── */
[x-cloak] {
    display: none !important;
}