/* Global Styles and Custom Animations for Pharmabot Restyling */

:root {
    /* Color Palette - based on existing Tailwind colors */
    --color-primary: #0f766e; /* teal-700 */
    --color-primary-dark: #115e59; /* teal-800 */
    --color-primary-light: #ccfbf1; /* teal-100 */

    --color-text-base: #1f2937; /* gray-800 */
    --color-text-dark: #111827; /* gray-900 */
    --color-text-headings: #111827; /* gray-900 */
    --color-text-muted: #4b5563; /* gray-600 */

    --color-background-light: #f9fafb; /* gray-50 */
    --color-background-white: #ffffff;
    --color-background-dark: #111827; /* gray-900 */

    --font-family-base: 'Inter', sans-serif;
    --font-family-headings: 'Montserrat', sans-serif;
}

/* Utility class for headings */
.font-montserrat {
    font-family: var(--font-family-headings);
}

body {
    font-family: var(--font-family-base);
    color: var(--color-text-base);
    background-color: var(--color-background-light);
    scroll-behavior: smooth;
    position: relative;
    min-height: 100vh;
}

/* ============================================
   SFONDO GLOBALE DEL SITO - Background Pattern
   Pattern leggero ed elegante per tutte le pagine
   ============================================ */

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: url('/assets/images/background-pattern.png');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    opacity: 0.25; /* Effetto più leggero e meno trasparente */
    pointer-events: none;
}

/* Assicura che il contenuto principale stia sopra lo sfondo */
main, header, footer, section, nav {
    position: relative;
    z-index: 1;
}

/* Le sezioni con sfondo proprio mantengono la loro opacità */
.bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-800, .bg-gray-900,
.bg-teal-50, .bg-teal-100, .bg-teal-600, .bg-teal-700,
.hero-section-mobile-view, .hero-gradient {
    position: relative;
    z-index: 1;
}

/* Custom Animation Classes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* We can add more animations here later */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-fade-in {
    animation: fadeIn 1s ease-in-out forwards;
}

/* A class to apply to sections for consistent padding */
.section-padding {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

@media (max-width: 768px) {
    .section-padding {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

/* Stili per il Cookie Banner */
.cookie-banner {
    transition: opacity 0.5s ease-in-out;
}

.cookie-banner.hidden {
    opacity: 0;
    pointer-events: none;
    display: none;
}

/* Screen Reader Only - nascosto visivamente ma disponibile agli screen reader */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}