/* 
 * Form utilities for Contact Form 7 
 * Comprehensive styles matching reference HTML designs
 * All utility classes are scoped to form elements only
 */

:root {
    /* Primary color from Tailwind theme */
    --cf7-primary: oklch(35% .1 250) !important;
    --cf7-primary-hover: oklch(30% .1 250) !important;
    --cf7-ring: oklch(35% .1 250) !important;
}

/* ========================================
   MOBILE MENU FIX
   ======================================== */

/* Force mobile menu to be hidden by default */
#mobile-menu {
    opacity: 0;
    pointer-events: none;
}

/* Show mobile menu when active class is added */
#mobile-menu.opacity-100 {
    opacity: 1;
    pointer-events: auto;
}

/* ========================================
   ACCORDION ANIMATION
   ======================================== */

/* Smooth accordion animation */
[data-slot="accordion-content"] {
    overflow: hidden;
    transition: max-height 300ms ease-in-out, opacity 300ms ease-in-out;
}

[data-slot="accordion-content"][data-state="open"] {
    opacity: 1;
}

[data-slot="accordion-content"][data-state="closed"] {
    opacity: 0;
}

/* ========================================
   UTILITY CLASSES (Scoped to forms only)
   ======================================== */

form {

    /* Spacing utilities */
    .space-y-2>*+* {
        margin-top: 0.5rem;
    }

    .space-y-6>*+* {
        margin-top: 1.5rem;
    }

    .gap-2 {
        gap: 0.5rem;
    }

    .gap-6 {
        gap: 1.5rem;
    }

    .pb-6 {
        padding-bottom: 1.5rem;
    }

    .pt-4 {
        padding-top: 1rem;
    }

    .py-6 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .px-12 {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .mt-1 {
        margin-top: 0.25rem;
    }

    .mt-4 {
        margin-top: 1rem;
    }

    .mr-2 {
        margin-right: 0.5rem;
    }

    /* Layout utilities */
    .flex {
        display: flex;
    }

    .inline-flex {
        display: inline-flex;
    }

    .items-center {
        align-items: center;
    }

    .justify-center {
        justify-content: center;
    }

    .text-center {
        text-align: center;
    }

    .w-full {
        width: 100%;
    }

    .h-9 {
        height: 2.25rem;
    }

    /* Typography utilities */
    .text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

    .text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }

    .text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }

    .font-medium {
        font-weight: 500;
    }

    .font-bold {
        font-weight: 700;
    }

    .font-semibold {
        font-weight: 600;
    }

    /* Color utilities */
    .text-red-500 {
        color: #ef4444;
    }

    .text-gray-700 {
        color: #374151;
    }

    .text-gray-900 {
        color: #111827;
    }

    .text-gray-500 {
        color: #6b7280;
    }

    .text-gray-600 {
        color: #4b5563;
    }

    .text-white {
        color: #fff;
    }

    .bg-white {
        background-color: #fff;
    }

    .bg-primary {
        background-color: var(--cf7-primary);
    }

    .border-gray-300 {
        border-color: #d1d5db;
    }

    /* Responsive utilities */
    @media (min-width: 768px) {
        .md\:w-auto {
            width: auto;
        }

        .md\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    /* Grid layout for CF7 forms */
    .cf7-grid-2 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    @media (min-width: 768px) {
        .cf7-grid-2 {
            grid-template-columns: 1fr 1fr;
        }
    }

    /* Responsive grid for file inputs and other 2-column layouts */
    .md\:grid-cols-2 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    @media (min-width: 768px) {
        .md\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    .grid {
        display: grid;
    }

    .grid-cols-1 {
        /* grid-template-columns: repeat(1, minmax(0, 1fr)); */
    }

    /* Border and shadow utilities */
    .rounded-md {
        border-radius: 0.375rem;
    }

    .rounded-full {
        border-radius: 9999px;
    }

    .border {
        border-width: 1px;
    }

    .shadow-md {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    }

    /* Transition utilities */
    .transition-all {
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
    }

    .duration-300 {
        transition-duration: 300ms;
    }

    /* Hover utilities */
    .hover\:bg-primary\/90:hover {
        background-color: var(--cf7-primary-hover);
    }

    .hover\:shadow-lg:hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    }
}

/* ========================================
   CONTACT FORM 7 WRAPPER FIXES
   ======================================== */

.wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
}

/* ========================================
   FORM ELEMENT STYLING
   ======================================== */

/* Base input styling - matching reference HTML */
form.wpcf7-form input[type="text"],
form.wpcf7-form input[type="email"],
form.wpcf7-form input[type="tel"],
form.wpcf7-form select,
form.wpcf7-form textarea {
    width: 100% !important;
    padding: 0.5rem 1rem !important;
    /* px-4 py-2 */
    border: 1px solid #d1d5db !important;
    /* border-gray-300 */
    border-radius: 0.375rem !important;
    /* rounded-md */
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    color: #111827 !important;
    background-color: #fff !important;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important;
}

form.wpcf7-form input::placeholder,
form.wpcf7-form textarea::placeholder {
    color: #9ca3af !important;
}

/* Focus states - matching reference HTML focus:ring-2 focus:ring-primary/50 */
form.wpcf7-form input:focus,
form.wpcf7-form select:focus,
form.wpcf7-form textarea:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(from var(--cf7-ring) r g b / 0.5) !important;
    /* Fallback for browsers that don't support relative colors */
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5) !important;
}

/* Textarea specific */
form.wpcf7-form textarea {
    min-height: 150px !important;
    line-height: 1.6 !important;
    resize: vertical !important;
}

/* Select specific */
form.wpcf7-form select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.5rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.5em 1.5em !important;
    padding-right: 2.5rem !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* File input styling - matching reference HTML */
form.wpcf7-form input[type="file"] {
    width: 100% !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    color: #4b5563 !important;
    /* text-gray-600 */
    background-color: #fff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    cursor: pointer !important;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* File selector button - matching reference: file:mr-4 file:py-2 file:px-4 file:rounded-full file:bg-primary/10 file:text-primary */
form.wpcf7-form input[type="file"]::file-selector-button {
    margin-right: 1rem !important;
    /* mr-4 */
    padding: 0.5rem 1rem !important;
    /* py-2 px-4 */
    background-color: rgba(from var(--cf7-primary) r g b / 0.1) !important;
    /* Fallback */
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: var(--cf7-primary) !important;
    color: #3b82f6 !important;
    /* Fallback */
    border: none !important;
    border-radius: 9999px !important;
    /* rounded-full */
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    /* font-semibold */
    cursor: pointer !important;
    transition: background-color 0.2s !important;
}

form.wpcf7-form input[type="file"]::file-selector-button:hover {
    background-color: rgba(from var(--cf7-primary) r g b / 0.2) !important;
    /* Fallback */
    background-color: rgba(59, 130, 246, 0.2) !important;
}

/* Submit button styling - matching reference HTML */
/* Contact form: py-6 text-lg with icon */
/* Recruit form: h-10 px-12 text-sm */
form.wpcf7-form input[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    padding: 1.5rem 1rem !important;
    /* py-6 px-4 for contact form */
    background-color: var(--cf7-primary) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 1.125rem !important;
    /* text-lg for contact form */
    line-height: 1.75rem !important;
    border-radius: 0.375rem !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important;
    white-space: nowrap !important;
}

form.wpcf7-form input[type="submit"]:hover {
    background-color: var(--cf7-primary-hover) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
}

/* For recruit form with class:w-full class:md:w-auto class:px-12 */
form.wpcf7-form input[type="submit"].w-full {
    width: 100% !important;
}

@media (min-width: 768px) {
    form.wpcf7-form input[type="submit"].md\:w-auto {
        width: auto !important;
    }
}

form.wpcf7-form input[type="submit"].px-12 {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
    padding-top: 0.625rem !important;
    /* h-10 equivalent */
    padding-bottom: 0.625rem !important;
    font-size: 0.875rem !important;
    /* text-sm for recruit form */
    line-height: 1.25rem !important;
}

/* ========================================
   VALIDATION & RESPONSE MESSAGES
   ======================================== */

.wpcf7-not-valid-tip {
    color: #ef4444 !important;
    font-size: 0.75rem !important;
    margin-top: 0.25rem !important;
    display: block !important;
}

.wpcf7-response-output {
    margin-top: 1.5rem !important;
    padding: 1rem !important;
    border-radius: 0.375rem !important;
    border: 1px solid transparent !important;
    font-size: 0.875rem !important;
    text-align: center !important;
}

.wpcf7-mail-sent-ok {
    background-color: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    color: #166534 !important;
}

.wpcf7-validation-errors,
.wpcf7-acceptance-missing {
    background-color: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}

.wpcf7-spinner {
    display: none !important;
}