/* ===================================
   ACCESSIBILITY.CSS - Media Query Speciali
   Versione: 1.0.0
   Progetto: K_CodKilo2
   
   Questo file contiene tutte le media query speciali per
   l'accessibilità e le preferenze degli utenti:
   - prefers-reduced-motion
   - prefers-contrast
   - hover states / touch devices
   - orientation & high DPI
   - utilities (sr-only, skip-link)
   =================================== */
:root {
    /* ===== COLOR SYSTEM ===== */
    --color-primary: #05F2DB;
    --color-primary-dark: #05C7F2;
    --color-primary-light: #3BE4EB;
    
    --color-secondary: #BA35F2;
    --color-secondary-dark: #7A24A8;
    --color-secondary-light: #ec76fc;
    
    --color-white: #FFFFFF;
    --color-black: #000000;}
    
/* ===================================
   ACCESSIBILITY UTILITIES (WCAG)
   =================================== */

/* SCREEN READER ONLY - Nasconde visivamente ma legge il testo per i non vedenti */
.sr-only,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* SKIP LINK - Permette di saltare la navigazione con il tasto Tab */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--color-primary);
    color: var(--color-text-white);
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
    font-weight: 600;
    z-index: 9999;
    transition: top var(--transition-micro);
    border-radius: 0 0 var(--radius-md) 0;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid var(--color-text-white);
    outline-offset: -3px;
}

/* ===================================
   FOCUS VISIBLE SYSTEM (WCAG 2.4.7)
   =================================== */

*:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
    transition: outline 0.2s ease, outline-offset 0.2s ease;
}

:focus:not(:focus-visible) {
    outline: none;
}

/* Focus interattivi */
a:focus-visible, button:focus-visible, input:focus-visible, 
textarea:focus-visible, select:focus-visible, .btn:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(5, 242, 219, 0.4);
}

.btn--primary:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4);
}

.card:focus-within, .package-card--flip:focus-visible, .portfolio-card:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(5, 242, 219, 0.4);
}

.card--featured:focus-within {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(186, 53, 242, 0.4);
}

/* ===================================
   REDUCED MOTION SUPPORT (WCAG 2.3.3)
   =================================== */

@media (prefers-reduced-motion: reduce) {
    /* Riduce le animazioni invece di disabilitarle completamente */
    *, *::before, *::after {
        animation-duration: 0.3s !important;
        transition-duration: 0.15s !important;
    }
    
    html { scroll-behavior: auto !important; }
    
    /* Hero - animazioni ridotte ma non eliminate */
    .hero::before, .hero::after {
        animation-duration: 4s !important;
        opacity: 0.6 !important;
    }
    
    .hero__particle {
        animation-duration: 8s !important;
        opacity: 0.4 !important;
    }
    
    /* Logo - animazione molto ridotta */
    .hero__logo-container {
        animation-duration: 8s !important;
    }
    
    .hero__logo-container img {
        animation-duration: 6s !important;
    }
    
    .hero__logo-ring, .hero__logo-ring-inner {
        animation-duration: 10s !important;
    }
    
    /* Contenuto hero - animazioni fade-in ridotte */
    .hero__visual, .hero__content, .hero__title, .hero__title span,
    .hero__subtitle, .hero__cta, .hero__cta .btn, .hero__packages-cta {
        animation-duration: 0.2s !important;
        animation-delay: 0s !important;
    }
    
    /* Riduce hover effects invece di disabilitarli */
    .nav__link:hover, .nav__link--cta:hover, .service-card:hover, .service-card:hover::before,
    .package-card:hover, .package-card:hover::before, .portfolio-card:hover,
    .about__profile-img:hover, .contact-info__item:hover, .packages__carousel-btn:hover,
    .packages__perfect-for-item:hover {
        transition-duration: 0.1s !important;
    }
    
/* Flip Card - transizione ridotta ma funzionante */
    .package-card__flip-front, .package-card__flip-back {
        transition-duration: 0.3s !important;
        transition-timing-function: ease-out !important;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        will-change: transform, opacity;
    }
    .package-card--flip.flipped .package-card__flip-front {
        opacity: 0 !important;
        transform: translateY(-100%) !important;
    }
    .package-card--flip.flipped .package-card__flip-back {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    .package-card--flip.flipped .package-card__flip-front {
        opacity: 0.3;
        transform: translateY(-30%) !important;
    }
    .package-card--flip.flipped .package-card__flip-back {
        opacity: 1;
        transform: translateY(0) !important;
    }
    
    /* Active states ridotti */
    .packages__carousel-btn:active, .btn:active:not(:disabled), .card:active {
        transform: scale(0.98) !important;
        transition-duration: 0.05s !important;
    }
}

/* ===================================
   HIGH CONTRAST & FORCED COLORS
   =================================== */

@media (prefers-contrast: high) {
    .btn, .card, .package-card__flip-front, .package-card__flip-back,
    .form__input, .form__textarea, .form__select, .service-card, .portfolio-card {
        border: 2px solid currentColor;
    }
    .packages__carousel-dot { background-color: rgba(5, 242, 219, 0.5); border: 1px solid var(--color-primary); }
    .packages__carousel-dot--active { background-color: var(--color-primary); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--color-primary); }
}

@media (forced-colors: active) {
    .packages__carousel-dot, .packages__carousel-btn, .btn, .card {
        forced-color-adjust: none;
    }
}

/* ===================================
   TOUCH DEVICE OPTIMIZATIONS (NO HOVER)
   =================================== */

@media (hover: none) {
    /* Disattiva hover effects espansivi su touch */
    .nav__link:hover { color: var(--color-text-secondary); }
    .nav__link:hover::after { width: 0; }
    .nav__link--cta:hover { transform: none; box-shadow: none; }
    
    .service-card:hover, .package-card:hover, .portfolio-card:hover { transform: none; }
    .service-card:hover::before, .package-card:hover::before, .portfolio-card:hover::before { transform: scaleX(0); }
    
    .portfolio-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(5, 242, 219, 0.1); }
    .contact-info__item:hover { transform: none; background-color: rgba(5, 242, 219, 0.1); }
    
    .packages__perfect-for-item:hover {
        transform: none; 
        background: linear-gradient(135deg, rgba(186, 53, 242, 0.18), rgba(5, 242, 219, 0.12)); 
        color: var(--color-text-secondary); border-color: rgba(186, 53, 242, 0.3);
    }
    
    .portfolio-card__package:hover { transform: none; box-shadow: none; border-color: var(--color-primary); color: var(--color-primary); }
    .portfolio-card__package:hover::before { width: 0; height: 0; }
    
    .package-card--flip:hover .package-card__flip-front, .package-card--flip.flipped:hover .package-card__flip-back { border-color: rgba(5, 242, 219, 0.2); box-shadow: none; }
    
    /* Touch Carousel */
    .packages__carousel-dot:hover { background-color: rgba(5, 242, 219, 0.3); box-shadow: none; }
    .packages__carousel-btn:hover { transform: translateY(-50%); box-shadow: var(--shadow-md); }
    .packages__carousel-btn:active { transform: translateY(-50%) scale(0.95); }
}

/* ===================================
   ACTIVE STATES (Feedback click)
   =================================== */

.btn:active:not(:disabled) { transform: translateY(-1px) scale(0.98); }
.card:active { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.portfolio-card:active, .service-card:active { transform: translateY(-6px) scale(1.01); transition: transform 0s, box-shadow 0s; }
.package-card--flip:active { box-shadow: 0 4px 12px rgba(5, 242, 219, 0.4); transition: box-shadow 0s; }

/* ===================================
   DISPLAY & PRINT OPTIMIZATIONS
   =================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .service-card, .portfolio-card, .package-card--flip, .form__input { border-width: 1px; }
}

@media print {
    .skip-link, nav, footer, .btn--secondary, .d-none-print { display: none !important; }
    * { background: transparent !important; box-shadow: none !important; color: black !important; }
    body { font-size: 12pt; line-height: 1.5; }
    a { text-decoration: underline; }
    a[href^="http"]::after { content: " (" attr(href) ")"; }
}

@media (prefers-reduced-data: reduce) {
    .hero__particle, .hero::before, .hero::after { display: none !important; }
}

/* ===================================
   CONDIZIONI OFFERTA - ACCESSIBILITY
   =================================== */
.toc__link:focus-visible,
.accordion-header:focus-visible {
    outline-width: 3px;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    /* Riduce invece di disabilitare */
    .toc__link:hover,
    .accordion-item:hover,
    .included-service:hover,
    .excluded-service:hover {
        transform: translateY(-1px) !important;
        transition-duration: 0.1s !important;
    }
    
    .accordion-header__arrow,
    .accordion-content {
        transition-duration: 0.2s !important;
    }
    
    /* Card animations - ridotte ma presenti */
    .service-card, .portfolio-card {
        animation-duration: 0.15s !important;
        animation-delay: 0s !important;
    }
    
    /* Package card features - animazioni sequenziali veloci */
    .package-card__feature {
        animation-duration: 0.1s !important;
        animation-delay: 0.02s !important;
    }
    
    /* Portfolio card hover ridotto */
    .portfolio-card:hover {
        transform: translateY(-4px) scale(1.01) !important;
        transition-duration: 0.15s !important;
    }
    
    /* Service card hover ridotto */
    .service-card:hover {
        transform: translateY(-3px) !important;
        transition-duration: 0.15s !important;
    }
}