/**
 * MediSense — Global Custom CSS Utilities
 *
 * Contains utility classes that cannot be expressed in Tailwind config
 * or that require vendor-prefixed properties. Loaded in every layout.
 */

/* ── Material Symbols: Default icon weight settings ──────────────────────── */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Gradient Backgrounds ─────────────────────────────────────────────────── */
.bg-primary-gradient {
    background: linear-gradient(135deg, #006768 0%, #008284 100%);
}

/* ── Gradient Text ────────────────────────────────────────────────────────── */
.text-gradient {
    background: linear-gradient(135deg, #006768 0%, #008284 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Glassmorphism ────────────────────────────────────────────────────────── */
.glass-nav {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* ── Auth Left Panel: Wavy decorative background pattern ─────────────────── */
.wave-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='40' viewBox='0 0 80 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 40 C 20 40 20 0 40 0 C 60 0 60 40 80 40' stroke='white' stroke-width='1.5' fill='transparent' opacity='0.06'/%3E%3C/svg%3E");
    background-size: 80px 40px;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

html,
body {
    overflow-x: hidden;
}

@media (max-width: 640px) {
    body {
        font-size: 14px;
    }

    h1,
    h2,
    h3,
    p,
    a,
    button,
    span {
        overflow-wrap: anywhere;
    }

    nav .max-w-7xl,
    main .max-w-7xl,
    footer .max-w-7xl,
    .max-w-3xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    main section {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    main section:first-child {
        min-height: auto !important;
        padding-top: 6rem !important;
    }

    h1 {
        font-size: clamp(2.5rem, 14vw, 3.5rem) !important;
        line-height: 1.05 !important;
    }

    h2 {
        font-size: clamp(1.75rem, 9vw, 2.35rem) !important;
        line-height: 1.12 !important;
    }

    .rounded-3xl,
    .rounded-4xl {
        border-radius: 1.25rem !important;
    }

    .fixed.bottom-8.right-8 {
        right: 1rem !important;
        bottom: 1rem !important;
        width: 3.5rem !important;
        height: 3.5rem !important;
    }

    .fixed.bottom-32.right-8 {
        right: 1.25rem !important;
        bottom: 5.25rem !important;
    }
}