/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Hide scrollbar globally */
* {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

*::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Utility class for elements that need visible scrollbar */
.scrollbar-visible {
  scrollbar-width: auto;
  -ms-overflow-style: auto;
}

.scrollbar-visible::-webkit-scrollbar {
  display: block;
}

/* ==========================================================================
   DISTRICT COLORS - La Città Fatta Per Me
   ========================================================================== */

:root {
  /* District Primary Colors */
  --district-services: #287bc0;
  --district-services-dark: #1e5a8a;
  --district-services-light: #4a9ad4;

  --district-events: #e6b800;
  --district-events-dark: #b38f00;
  --district-events-light: #ffd633;

  --district-providers: #f9b114;
  --district-providers-dark: #d4940e;
  --district-providers-light: #ffc943;

  --district-resources: #69c6dd;
  --district-resources-dark: #4aa8bf;
  --district-resources-light: #8fd8eb;

  --district-trips: #10b981;
  --district-trips-dark: #0d9668;
  --district-trips-light: #34d399;
}

/* District Background Gradients */
.district-bg-services {
  background: linear-gradient(to bottom right, var(--district-services), var(--district-services-dark));
}

.district-bg-events {
  background: linear-gradient(to bottom right, var(--district-events), var(--district-events-dark));
}

.district-bg-providers {
  background: linear-gradient(to bottom right, var(--district-providers), var(--district-providers-dark));
}

.district-bg-resources {
  background: linear-gradient(to bottom right, var(--district-resources), var(--district-resources-dark));
}

.district-bg-trips {
  background: linear-gradient(to bottom right, var(--district-trips), var(--district-trips-dark));
}

.district-bg-places {
  background: linear-gradient(to bottom right, var(--district-trips), var(--district-trips-dark));
}

/* District Text Colors */
.district-text-services { color: var(--district-services); }
.district-text-events { color: var(--district-events); }
.district-text-providers { color: var(--district-providers); }
.district-text-resources { color: var(--district-resources-dark); }
.district-text-trips { color: var(--district-trips); }

/* District Border Colors */
.district-border-services { border-color: var(--district-services); }
.district-border-events { border-color: var(--district-events); }
.district-border-providers { border-color: var(--district-providers); }
.district-border-resources { border-color: var(--district-resources); }
.district-border-trips { border-color: var(--district-trips); }

/* District Button Styles */
.district-btn-services {
  background-color: var(--district-services);
  color: white;
}
.district-btn-services:hover {
  background-color: var(--district-services-dark);
}

.district-btn-events {
  background-color: var(--district-events);
  color: white;
}
.district-btn-events:hover {
  background-color: var(--district-events-dark);
}

.district-btn-providers {
  background-color: var(--district-providers);
  color: white;
}
.district-btn-providers:hover {
  background-color: var(--district-providers-dark);
}

.district-btn-resources {
  background-color: var(--district-resources);
  color: white;
}
.district-btn-resources:hover {
  background-color: var(--district-resources-dark);
}

.district-btn-trips {
  background-color: var(--district-trips);
  color: white;
}
.district-btn-trips:hover {
  background-color: var(--district-trips-dark);
}

/* District Card Hover Effects */
.district-card-services {
  transition: all 0.2s ease-in-out;
}
.district-card-services:hover {
  border-color: var(--district-services);
  box-shadow: 0 4px 12px rgba(40, 123, 192, 0.25);
}

.district-card-events {
  transition: all 0.2s ease-in-out;
}
.district-card-events:hover {
  border-color: var(--district-events);
  box-shadow: 0 4px 12px rgba(252, 231, 6, 0.35);
}

.district-card-providers {
  transition: all 0.2s ease-in-out;
}
.district-card-providers:hover {
  border-color: var(--district-providers);
  box-shadow: 0 4px 12px rgba(249, 177, 20, 0.3);
}

.district-card-resources {
  transition: all 0.2s ease-in-out;
}
.district-card-resources:hover {
  border-color: var(--district-resources);
  box-shadow: 0 4px 12px rgba(105, 198, 221, 0.3);
}

.district-card-trips {
  transition: all 0.2s ease-in-out;
}
.district-card-trips:hover {
  border-color: var(--district-trips);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* District Link Hover */
.district-link-services:hover { color: var(--district-services); }
.district-link-events:hover { color: var(--district-events-dark); }
.district-link-providers:hover { color: var(--district-providers); }
.district-link-resources:hover { color: var(--district-resources-dark); }
.district-link-trips:hover { color: var(--district-trips); }

/* ==========================================================================
   HEADER SCROLL FIX
   ========================================================================== */

/* Classe per nascondere i tab durante lo scroll senza interferire con classi responsive Tailwind */
.header-tabs-hidden {
  display: none !important;
}

/* ==========================================================================
   FAVORITE BUTTON ANIMATIONS
   ========================================================================== */

/* Heart "pop" animation - triggered when adding/removing favorites */
@keyframes heart-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

.animate-heart-pop {
  animation: heart-pop 0.3s ease-in-out;
}

/* Fade in-out animation for the feedback message */
@keyframes fade-in-out {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  15% {
    opacity: 1;
    transform: translateY(0);
  }
  85% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(4px);
  }
}

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

/* ==========================================================================
   DISTRICT HERO ANIMATIONS
   ========================================================================== */

/* Floating animation for decorative blobs */
@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(3deg);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* Floating delayed - offset timing for visual variety */
@keyframes float-delayed {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(-3deg);
  }
}

.animate-float-delayed {
  animation: float-delayed 8s ease-in-out infinite 1s;
}

/* Fade in up animation for hero content */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards;
  opacity: 0;
}

/* Disable fade-in-up animation on mobile to prevent delayed content flash */
@media (max-width: 767px) {
  .animate-fade-in-up {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Fade in animation for popovers */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .animate-float,
  .animate-float-delayed,
  .animate-fade-in-up,
  .animate-fade-in,
  .provider-section {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   PROVIDER PAGE - GLASSMORPHISM & ANIMATIONS
   ========================================================================== */

/* Provider Card with Glassmorphism effect */
.provider-card-glass {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 1rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.provider-card-glass:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Fallback for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(10px)) {
  .provider-card-glass {
    background: rgba(255, 255, 255, 0.98);
  }
}

/* Slide up reveal animation for sections */
@keyframes slide-up-reveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.provider-section {
  animation: slide-up-reveal 0.5s ease-out forwards;
  opacity: 0;
}

/* Staggered animation delays for sections */
.provider-section-1 { animation-delay: 50ms; }
.provider-section-2 { animation-delay: 100ms; }
.provider-section-3 { animation-delay: 150ms; }
.provider-section-4 { animation-delay: 200ms; }
.provider-section-5 { animation-delay: 250ms; }
.provider-section-6 { animation-delay: 300ms; }
.provider-section-7 { animation-delay: 350ms; }
.provider-section-8 { animation-delay: 400ms; }

/* Hover lift effect for interactive cards */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* Safe area padding for iPhone notch/home indicator */
.safe-area-pb {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Safe area padding with minimum value for main content areas */
.pb-safe {
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 1rem));
}

@media (min-width: 1024px) {
  .lg\:pb-6 {
    padding-bottom: 1.5rem;
  }
}

/* Mobile bottom bar glass effect */
.mobile-bottom-bar-glass {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@supports not (backdrop-filter: blur(12px)) {
  .mobile-bottom-bar-glass {
    background: rgba(255, 255, 255, 0.98);
  }
}

/* ==========================================================================
   MOBILE BOTTOM NAV - iOS Safari Scroll Fix
   iOS Safari changes the visual viewport height as the toolbar animates
   during scroll, causing position:fixed elements to briefly "detach".
   The overscroll bounce effect can also create a gap below the nav.
   Fix: GPU compositing layer + ::after pseudo-element to fill the gap.
   ========================================================================== */

.mobile-bottom-nav {
  /* Force a GPU compositing layer - stabilizes position:fixed during
     iOS Safari toolbar animation */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Fill any gap that appears between the nav and the screen bottom
   during iOS overscroll bounce effect */
.mobile-bottom-nav::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -200px;
  height: 200px;
  background: white;
}

/* ==========================================================================
   SAFARI iOS FIXED POSITION FIX
   Safari iOS has issues with position:fixed when backdrop-filter is used.
   This creates a separate class specifically for fixed bottom bars that
   avoids the problematic CSS properties.
   ========================================================================== */

/* Fixed bottom bar - Safari iOS compatible */
.mobile-fixed-bottom-bar {
  position: fixed !important;
  bottom: 4rem; /* bottom-16 = 64px */
  left: 0;
  right: 0;
  z-index: 40;
  /* Force GPU layer composition to fix Safari iOS */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Prevent any containing block issues */
  will-change: transform;
}

/* Inner container with glass effect - separated from fixed positioning */
.mobile-fixed-bottom-bar-inner {
  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid #e5e7eb; /* border-gray-200 */
  padding: 0.75rem 1rem; /* py-3 px-4 */
  /* Safe area for iPhone notch/home indicator */
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

/* Only apply backdrop-filter on browsers that handle it well with fixed */
@supports (backdrop-filter: blur(12px)) {
  /* Feature detection: if browser supports backdrop-filter, check if it's not problematic Safari iOS */
  @media not all and (-webkit-touch-callout: none) {
    /* Non-iOS browsers can use backdrop-filter safely */
    .mobile-fixed-bottom-bar-inner {
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
  }
}

/* Alternative approach: Use solid background for maximum Safari iOS compatibility */
.mobile-fixed-bar-solid {
  position: fixed !important;
  bottom: calc(4rem + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  z-index: 40;
  background: white;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
  /* Force compositing layer */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Provider stat badge */
.provider-stat-badge {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.provider-stat-badge:hover {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   LEAFLET MAP POPUP CUSTOMIZATION
   ========================================================================== */

/* Hide the native Leaflet close button - we use our custom one */
.place-marker-popup .leaflet-popup-close-button {
  display: none !important;
}

/* Ensure popup content wrapper has proper styling */
.place-marker-popup .leaflet-popup-content-wrapper {
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
}

.place-marker-popup .leaflet-popup-content {
  margin: 0;
  width: 220px !important;
}

/* ==========================================================================
   TOAST NOTIFICATION ANIMATIONS
   ========================================================================== */

/* Progress bar shrink animation - synced with auto-dismiss duration (5s) */
@keyframes toast-shrink {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

.animate-toast-shrink {
  animation: toast-shrink 5s linear forwards;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .animate-toast-shrink {
    animation: none;
  }
}

/* ==========================================================================
   PROSE TYPOGRAPHY - List styling for privacy/legal pages
   Since @tailwindcss/typography plugin is not installed, we manually
   style lists inside .prose containers
   ========================================================================== */

/* ==========================================================================
   WCAG 2.4.7 - Focus Visible
   Ensures all interactive elements have a visible focus indicator when
   navigated via keyboard. Uses :focus-visible to avoid showing focus ring
   on mouse clicks.
   ========================================================================== */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid #0284c7;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  a:focus-visible,
  button:focus-visible,
  [role="button"]:focus-visible {
    transition: none;
  }
}

/* ==========================================================================
   WCAG 1.4.11 - Non-text Contrast for Disabled Controls
   Disabled buttons use distinct background/color instead of opacity
   to maintain 3:1 contrast ratio with adjacent colors.
   ========================================================================== */

button:disabled,
input[type="submit"]:disabled {
  opacity: 1;
  background-color: #d1d5db;
  color: #6b7280;
  border-color: #d1d5db;
  cursor: not-allowed;
  box-shadow: none;
}

.prose ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.prose ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.prose li {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}

.prose ul ul,
.prose ol ul {
  list-style-type: circle;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.prose ul ul ul,
.prose ol ul ul {
  list-style-type: square;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

/* Evitare doppio padding liste quando .prose contiene .trix-content */
.prose .trix-content ul,
.prose .trix-content ol {
  padding-left: 0;
}

/* Varianti prose (senza @tailwindcss/typography plugin) */
.prose-sm { font-size: 0.875rem; line-height: 1.6; }
.prose-lg { font-size: 1.125rem; line-height: 1.75; }
.prose-gray { color: #4b5563; }
.prose-amber a { color: #d97706; }
.prose-amber a:hover { color: #b45309; }
.prose-purple a { color: #7c3aed; }
.prose-purple a:hover { color: #6d28d9; }

/* ==========================================================================
   Windows High Contrast Mode (forced-colors)
   WCAG - Ensures UI elements remain visible when OS-level high contrast
   mode is active. Uses system color keywords for proper adaptation.
   ========================================================================== */

@supports (forced-colors: active) {
  .provider-card-glass,
  .mobile-bottom-bar-glass {
    border: 2px solid ButtonText;
    background: Canvas;
  }

  .district-btn-services,
  .district-btn-events,
  .district-btn-providers,
  .district-btn-resources,
  .district-btn-trips {
    border: 2px solid ButtonText;
  }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 3px solid Highlight;
  }

  button:disabled,
  input[type="submit"]:disabled {
    border: 2px solid GrayText;
    color: GrayText;
  }
}