/**
 * SpetBook - Stili Responsivi e Accessibilità
 * Versione: 2.0.0
 * 
 * Mobile-First responsive styles with enhanced accessibility
 */

/* ==========================================================================
   Breakpoints and Viewport
   ========================================================================== */

/* Viewport settings should be in the HTML head:
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, viewport-fit=cover">
*/

/* Extra small devices (portrait phones, less than 576px) */
:root {
    /* Touch targets */
    --touch-target-min: 44px;
    
    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    
    /* Typography */
    --font-size-base: 16px;
    --font-size-sm: 0.875rem;
    --font-size-lg: 1.125rem;
    --line-height-base: 1.5;
    
    /* Colors */
    --color-primary: #008b7d;
    --color-primary-hover: #007b6d;
    --color-text: #333;
    --color-text-light: #666;
    --color-border: #ddd;
    --color-error: #ff3860;
    --color-success: #23d160;
    --color-focus: #0088cc;
    
    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    
    /* Transitions */
    --transition-base: all 0.2s ease-in-out;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

/* Reset and base styles */
* {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

html {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    color: var(--color-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* Make images responsive */
img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    line-height: 1.2;
}

/* ==========================================================================
   Links and Buttons
   ========================================================================== */

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition-base);
}

a:hover, a:focus {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* Base button styles */
button,
.button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    padding: 0.5rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Primary button */
.button.is-primary {
    background-color: var(--color-primary);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.button.is-primary:hover,
.button.is-primary:focus {
    background-color: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.button.is-primary:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.field {
    margin-bottom: var(--space-md);
    position: relative;
}

.label {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: 500;
    color: var(--color-text);
    font-size: 0.9375rem; /* Slightly larger for better touch */
}

.input,
.textarea,
.select select {
    display: block;
    width: 100%;
    padding: 0.75rem; /* Increased padding for better touch */
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
    background-color: #fff;
    background-clip: padding-box;
    border: 2px solid var(--color-border); /* Slightly thicker border */
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Optimize input types for mobile keyboards */
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"] {
    /* Ensure proper keyboard type on mobile */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Specific optimizations for different input types */
input[type="email"] {
    text-transform: lowercase;
    -webkit-text-transform: lowercase;
    -moz-text-transform: lowercase;
    -ms-text-transform: lowercase;
}

input[type="tel"] {
    inputmode: tel;
}

input[type="number"] {
    -moz-appearance: textfield; /* Hide number spinners in Firefox */
}

/* Hide number spinners in WebKit browsers */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Date and time inputs */
input[type="date"],
input[type="time"] {
    min-height: 3rem; /* Larger touch target */
}

/* Textarea specific styles */
.textarea {
    min-height: 6rem; /* Larger default height for better mobile input */
    resize: vertical;
}

/* Select dropdowns */
.select {
    position: relative;
    display: block;
}

.select:after {
    content: '▼';
    font-size: 0.75em;
    color: var(--color-text-light);
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.select select {
    padding-right: 2.5rem; /* Make room for the dropdown arrow */
}

.input:focus,
.textarea:focus,
.select select:focus {
    border-color: var(--color-focus);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 136, 204, 0.25);
}

/* Error states */
.field.is-error .input,
.field.is-error .textarea,
.field.is-error .select select {
    border-color: var(--color-error);
}

.field.is-error .help {
    color: var(--color-error);
    font-size: var(--font-size-sm);
    margin-top: 0.25rem;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
    width: 100%;
    padding-right: var(--space-md);
    padding-left: var(--space-md);
    margin-right: auto;
    margin-left: auto;
}

/* Responsive breakpoints */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
    
    .media {
        display: flex;
        align-items: flex-start;
    }
    
    .media-left {
        margin-right: var(--space-md);
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

/* ==========================================================================
   Stili Mobile First
   ========================================================================== */

/* Base Styles */
:root {
    --touch-target-min: 44px; /* Dimensione minima per i target touch */
    --font-size-base: 16px;  /* Dimensione base del font */
    --line-height-base: 1.5;  /* Altezza di riga base */
}

/* Reset per mobile */
* {
    -webkit-tap-highlight-color: transparent; /* Rimuove l'highlight blu al tap su mobile */
}

/* ==========================================================================
   Componenti
   ========================================================================== */

/* Header Evento - Mobile */
@media screen and (max-width: 767px) {
    .media {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .media-left {
        margin-right: 0;
        margin-bottom: 1.5rem;
        padding-right: 0;
        width: 100%;
    }
    
    .media-content {
        width: 100%;
    }
    
    .box.event-header {
        padding: 1.25rem;
    }
}

/* Form - Mobile */
@media screen and (max-width: 575px) {
    .box.booking-form {
        padding: 1.25rem;
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    .field:not(:last-child) {
        margin-bottom: 1rem;
    }
    
    .button.is-primary {
        width: 100%;
        padding: 1em;
    }
}

/* ==========================================================================
   Accessibilità
   ========================================================================== */

/* Miglioramento del contrasto */
.has-text-primary {
    color: #008b7d !important; /* Aumenta il contrasto */
}

/* Focus states migliorati */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex="0"]:focus {
    outline: 3px solid rgba(0, 131, 116, 0.5);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 209, 178, 0.3);
}

/* Nascondi visivamente ma mantieni accessibile */
.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;
}

/* Miglioramenti per la navigazione da tastiera */
[role="button"],
button,
input[type="submit"],
input[type="button"] {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
}

/* ==========================================================================
   Performance Mobile
   ========================================================================== */

/* Riduci le animazioni su dispositivi che supportano prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Ottimizza il rendering per scorrimento */
html {
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 100%;
}

/* ==========================================================================
   Form - Miglioramenti Accessibilità
   ========================================================================== */

/* Etichette dei campi obbligatori */
.label.required:after {
    content: ' *';
    color: #f14668;
}

/* Messaggi di errore */
.help.is-danger {
    color: #f14668;
    font-size: 0.85em;
    margin-top: 0.25rem;
}

/* Campi con errori */
.input.is-danger,
.textarea.is-danger {
    border-color: #f14668;
}

/* Messaggi di successo */
.notification.is-success {
    background-color: #f0f9f8;
    border-left: 4px solid #00d1b2;
}

/* ==========================================================================
   Media Queries Progressive Enhancement
   ========================================================================== */

/* Miglioramenti per schermi medi */
@media (min-width: 768px) {
    .box.event-header {
        padding: 2rem;
    }
    
    .media-left {
        flex-basis: 100px;
        flex-grow: 0;
        flex-shrink: 0;
    }
}

/* Miglioramenti per desktop */
@media (min-width: 1024px) {
    .box.booking-form {
        position: sticky;
        top: 2rem;
    }
}