/* Form Mobile Fixes - Legend and Fieldset Styling */

@media screen and (max-width: 768px) {
    /* Fix fieldset and legend positioning */
    fieldset {
        margin: 0 0 20px 0 !important;
        padding: 15px 10px !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
    }
    
    legend {
        padding: 0 5px !important;
        margin: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: var(--primary-color, #065f46) !important;
        float: none !important;
        position: relative !important;
        left: 0 !important;
        transform: none !important;
    }
    
    /* Form groups within fieldsets */
    fieldset .form-group {
        margin-bottom: 15px !important;
        width: 100% !important;
    }
    
    /* Form labels */
    fieldset label {
        display: block !important;
        margin-bottom: 5px !important;
        font-size: 0.9rem !important;
        font-weight: 500 !important;
        word-wrap: break-word !important;
    }
    
    /* Form inputs */
    fieldset input[type="text"],
    fieldset input[type="email"],
    fieldset input[type="tel"],
    fieldset input[type="password"],
    fieldset input[type="date"],
    fieldset input[type="number"],
    fieldset select,
    fieldset textarea {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        box-sizing: border-box !important;
    }
    
    /* Registration form specific */
    .kc-registration-form {
        padding: 15px !important;
    }
    
    .kc-registration-form h2,
    .kc-registration-form h3 {
        font-size: 1.25rem !important;
        margin-bottom: 15px !important;
        word-wrap: break-word !important;
    }
    
    /* Two column fields on mobile */
    .form-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .form-row .form-group {
        width: 100% !important;
    }
}

@media screen and (max-width: 480px) {
    fieldset {
        padding: 12px 8px !important;
        margin: 0 0 15px 0 !important;
    }
    
    legend {
        font-size: 0.95rem !important;
        padding: 0 3px !important;
    }
    
    .kc-registration-form {
        padding: 10px !important;
    }
    
    fieldset input,
    fieldset select,
    fieldset textarea {
        padding: 8px !important;
        font-size: 16px !important;
    }
}

/* Dark mode support for forms */
@media (prefers-color-scheme: dark) {
    fieldset {
        background: var(--card-bg-dark, #1f2937) !important;
        border-color: var(--border-color-dark, #374151) !important;
    }
    
    legend {
        color: var(--primary-dark, #10b981) !important;
    }
    
    fieldset input,
    fieldset select,
    fieldset textarea {
        background: var(--input-bg-dark, #111827) !important;
        border-color: var(--border-color-dark, #374151) !important;
        color: var(--text-color-dark, #f3f4f6) !important;
    }
    
    fieldset label {
        color: var(--text-color-dark, #e5e7eb) !important;
    }
}

/* Mobile Menu Tap Target Fixes */
@media screen and (max-width: 768px) {
    /* Increase menu link tap targets */
    .main-navigation a {
        padding: 14px 20px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        font-size: 16px !important;
    }
    
    .main-navigation .menu > li {
        border-bottom: 1px solid #e5e5e5;
    }
    
    .main-navigation .sub-menu a {
        padding: 12px 20px 12px 40px !important;
        min-height: 44px !important;
    }
    
    /* Footer menu tap targets */
    .footer-menu a,
    .site-footer a {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 8px 0 !important;
    }
}