/* ============================================================
   NOI Don Bosco Fiemme – Custom CSS
   Colori brand: Blue #0066B0 | Orange #F04B2F
   ============================================================ */

:root {
  --noi-blue:    #0066B0;
  --noi-blue2:   #004F8A;
  --noi-orange:  #F04B2F;
  --noi-dark:    #1E293B;
  --noi-gray:    #64748B;
  --noi-light:   #F8FAFC;
}

/* ── Base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--noi-dark);
  -webkit-font-smoothing: antialiased;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary {
  @apply inline-flex items-center justify-center bg-noi-blue hover:bg-noi-blue2
         text-white font-semibold py-2.5 px-6 rounded-xl transition-all duration-200
         shadow-sm hover:shadow-md active:scale-95 cursor-pointer;
}

.btn-outline {
  @apply inline-flex items-center justify-center border-2 border-noi-blue text-noi-blue
         hover:bg-noi-blue hover:text-white font-semibold py-2.5 px-6 rounded-xl
         transition-all duration-200 cursor-pointer;
}

.btn-hero-primary {
  @apply inline-flex items-center bg-noi-orange hover:bg-orange-600 text-white
         font-bold text-lg py-4 px-8 rounded-xl transition-all shadow-xl
         hover:shadow-2xl active:scale-95;
}

.btn-hero-secondary {
  @apply inline-flex items-center bg-white/10 hover:bg-white/20 text-white
         font-bold text-lg py-4 px-8 rounded-xl transition-all border-2 border-white/30
         hover:border-white/50 backdrop-blur-sm;
}

/* ── Navigation ────────────────────────────────────────────── */
.nav-link {
  @apply text-noi-dark/80 hover:text-noi-blue font-medium px-3 py-2 rounded-lg
         hover:bg-noi-blue/5 transition-all text-sm;
}
.nav-link-active {
  @apply text-noi-blue bg-noi-blue/5;
}
.dropdown-link {
  @apply block px-4 py-2.5 text-sm text-gray-700 hover:bg-noi-blue/5 hover:text-noi-blue
         transition-colors;
}
.mobile-nav-link {
  @apply block px-3 py-2.5 rounded-lg text-noi-dark hover:bg-noi-blue/5 hover:text-noi-blue
         transition-colors font-medium;
}

/* ── Typography helpers ────────────────────────────────────── */
.section-badge {
  @apply inline-block text-xs font-bold uppercase tracking-widest text-noi-orange
         bg-noi-orange/10 px-3 py-1 rounded-full mb-3;
}
.section-title {
  @apply text-3xl sm:text-4xl font-extrabold text-noi-dark text-center mb-4;
}
.section-subtitle {
  @apply text-gray-500 text-lg text-center max-w-2xl mx-auto mb-8;
}

/* ── Cards ─────────────────────────────────────────────────── */
.feature-card {
  @apply bg-white rounded-2xl p-8 shadow hover:shadow-lg transition-all border border-gray-50;
}
.feature-icon {
  @apply w-14 h-14 rounded-2xl flex items-center justify-center mb-5 transition-all;
}
.activity-card {
  @apply bg-white rounded-2xl overflow-hidden shadow hover:shadow-xl transition-all
         border border-gray-100 cursor-pointer no-underline block;
}
.activity-category-card {
  @apply flex flex-col items-center justify-center p-6 bg-white rounded-2xl shadow
         hover:shadow-lg transition-all border border-gray-100 text-center;
}

/* ── Forms ─────────────────────────────────────────────────── */
.form-label {
  @apply block text-sm font-semibold text-noi-dark mb-1.5;
}
.form-input {
  @apply w-full border border-gray-200 rounded-xl px-4 py-3 text-noi-dark
         focus:outline-none focus:ring-2 focus:ring-noi-blue focus:border-transparent
         placeholder-gray-300 bg-white transition-shadow text-sm;
}
.form-input:invalid:not(:placeholder-shown) {
  @apply border-red-300 ring-1 ring-red-300;
}

/* ── Filters ───────────────────────────────────────────────── */
.filter-btn {
  @apply px-4 py-2 text-sm font-medium bg-white border border-gray-200 rounded-full
         hover:border-noi-blue hover:text-noi-blue transition-all cursor-pointer;
}
.filter-active {
  @apply px-4 py-2 text-sm font-medium bg-noi-blue text-white rounded-full
         shadow-sm cursor-pointer;
}

/* ── Area Riservata ────────────────────────────────────────── */
.admin-nav-btn {
  @apply px-4 py-2 text-sm font-medium bg-white border border-gray-200 rounded-lg
         hover:border-noi-blue hover:text-noi-blue transition-all text-gray-600 no-underline;
}
.admin-nav-btn-active {
  @apply bg-noi-blue text-white border-noi-blue;
}

.stat-card {
  @apply bg-white rounded-xl p-5 shadow border border-gray-50;
}
.stat-label {
  @apply text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1;
}
.stat-value {
  @apply text-3xl font-extrabold text-noi-dark;
}

/* ── Gallery ───────────────────────────────────────────────── */
.gallery-grid {
  @apply grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2;
}

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

/* ── Prose ─────────────────────────────────────────────────── */
.prose p { @apply text-gray-600 leading-relaxed mb-4; }
.prose h2 { @apply text-2xl font-bold text-noi-dark mb-4 mt-8; }
.prose h3 { @apply text-xl font-bold text-noi-dark mb-3 mt-6; }
.prose a { @apply text-noi-blue hover:underline; }
.prose ul { @apply list-disc list-inside space-y-1 text-gray-600 mb-4; }
.prose strong { @apply font-semibold text-noi-dark; }

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--noi-blue); }

/* ── Animations ────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.5s ease forwards; }

/* ── Utility ───────────────────────────────────────────────── */
.text-noi-blue  { color: var(--noi-blue); }
.text-noi-orange { color: var(--noi-orange); }
.bg-noi-blue    { background-color: var(--noi-blue); }
.bg-noi-blue2   { background-color: var(--noi-blue2); }
.bg-noi-orange  { background-color: var(--noi-orange); }
.border-noi-blue { border-color: var(--noi-blue); }

/* ── Print styles (modulo iscrizione) ──────────────────────── */
@media print {
  nav, footer, .no-print { display: none !important; }
  body { font-size: 12pt; }
  .print-break { page-break-before: always; }
}

/* ── Accessibility ─────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--noi-blue);
  outline-offset: 2px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}