/*
 * css/style.css
 *
 * Custom styles for RealizzazioneSitiWebCatania.com
 * This file complements the Tailwind CSS classes loaded via CDN.
 */

/* 1. Imports & Global Settings
-------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Inter', sans-serif;
    color: #0f172a; /* Equivalent to text-slate-900 */
    background-color: #ffffff;
}

/* Custom selection color, matching App.tsx */
::selection {
    background-color: #e0f2fe; /* approx. brand-200 / using brand-100 */
    color: #0c4a6e; /* brand-900 */
}


/* 2. Animations (Defined in tailwind.config.js)
-------------------------------------------------- */

/* 
 * These are defined here to ensure they work even if the CDN script has issues
 * and for better organization. They replicate the animations from the React project.
 */

@keyframes fadeInUp {
    '0%' {
        opacity: '0';
        transform: translateY(20px);
    }
    '100%' {
        opacity: '1';
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    '0%' {
        opacity: '0';
        transform: translateY(-10px);
    }
    '100%' {
        opacity: '1';
        transform: translateY(0);
    }
}

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

.animate-fade-in-down {
    animation: fadeInDown 0.3s ease-out forwards;
}


/* 3. Base Typography (Prose styles for long-form content)
-------------------------------------------------- */

/*
 * This section emulates the @tailwindcss/typography plugin which is used in the React
 * components (e.g., ServicePage.tsx, ClusterPage.tsx) for styling rich content blocks.
 */
.prose {
    line-height: 1.7;
    color: #334155; /* slate-700 */
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    color: #0f172a; /* slate-900 */
    font-weight: 800;
    margin-top: 1.6em;
    margin-bottom: 0.8em;
    line-height: 1.2;
}

.prose h1 { font-size: 2.25rem; }
.prose h2 { font-size: 1.875rem; }
.prose h3 { font-size: 1.5rem; }
.prose h4 { font-size: 1.25rem; }

.prose p {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.prose p.lead {
    font-size: 1.25rem;
    line-height: 1.6;
    color: #475569; /* slate-600 */
    font-weight: 500;
}

.prose ul,
.prose ol {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-left: 1.75em;
}

.prose li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.prose ul > li {
    list-style-type: disc;
}

.prose ol > li {
    list-style-type: decimal;
}

.prose a {
    color: #0284c7; /* brand-600 */
    text-decoration: underline;
    font-weight: 500;
    transition: color 0.2s ease-in-out;
}

.prose a:hover {
    color: #0369a1; /* brand-700 */
}

.prose strong {
    font-weight: 700;
    color: #0f172a; /* slate-900 */
}

.prose blockquote {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    padding-left: 1em;
    border-left: 4px solid #e2e8f0; /* slate-200 */
    font-style: italic;
    color: #475569; /* slate-600 */
}

/* Modifier for larger text sizes */
.prose-lg p {
    font-size: 1.125rem;
}
.prose-lg h1 { font-size: 2.5rem; }
.prose-lg h2 { font-size: 2rem; }
.prose-lg h3 { font-size: 1.75rem; }


/* 4. Helper Classes
-------------------------------------------------- */

/* 
 * These classes are crucial for anchor link navigation with a fixed header.
 * While Tailwind CDN should handle them, defining them here ensures they always work.
 */
.scroll-mt-24 {
    scroll-margin-top: 6rem; /* 96px */
}

.scroll-mt-32 {
    scroll-margin-top: 8rem; /* 128px */
}

@media (min-width: 768px) {
    .md\:scroll-mt-32 {
        scroll-margin-top: 8rem;
    }
}

/* 
 * A fallback for line-clamp functionality, which may not be
 * included in all Tailwind CDN versions.
 */
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Custom styles for header items based on scrolled state */

/* Default (non-scrolled) state for header items */
#main-header .logo-text {
  color: white;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.1); /* drop-shadow-sm */
}
#main-header .logo-icon-container {
  background-color: white;
  color: #0369a1; /* brand-700 */
}
#main-header .desktop-nav-link {
  color: white;
}
#main-header .header-cta-btn {
  background-color: white;
  color: #0369a1; /* brand-700 */
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* shadow-lg */
}
#main-header .header-cta-btn:hover {
  background-color: #f9fafb; /* gray-100 */
}

/* Scrolled state for header items */
#main-header.scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
#main-header.scrolled .logo-text {
  color: #0f172a; /* slate-900 */
}
#main-header.scrolled .logo-icon-container {
  background-color: #0284c7; /* brand-600 */
  color: white;
}
#main-header.scrolled .desktop-nav-link {
  color: #334155; /* slate-700 */
}
#main-header.scrolled .header-cta-btn {
   background-color: #f59e0b; /* accent-500 */
   color: white;
   box-shadow: 0 10px 15px -3px rgb(245 158 11 / 0.3), 0 4px 6px -4px rgb(245 158 11 / 0.3); /* shadow-orange-500/30 */
}
#main-header.scrolled .header-cta-btn:hover {
    background-color: #d97706; /* accent-600 */
}