/*
Theme Name: wefoodies
Theme URI: https://www.wp-profis.com/
Description: Custom theme for wefoodies
Author: WP Profis
Author URI: https://www.wp-profis.com/
Template: twentytwentyfive
Version: 1.0.0
*/

/* Import parent theme stylesheet */
@import url("../twentytwentyfive/style.css");

/* ===================================
   CUSTOM PROPERTIES
   =================================== */

:root {
    /* Form-specific custom properties that extend theme.json */
    --form-border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
    --form-focus-ring: 0 0 0 var(--wp-admin-border-width-focus, 2px) color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent);
    --form-transition: all 0.2s ease-in-out;
    --form-transition-fast: all 0.15s ease-in-out;
}

/* ===================================
   HEADER COMPONENTS
   =================================== */

/**
 * Header bar with transparent blurred background
 * Adds shadow when scrolled for better visibility
 */
.header-bar {
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: box-shadow 0.3s ease-in-out;
}

.scrolled .header-bar {
    box-shadow: var(--wp--preset--shadow--natural);
}

/* ===================================
   FOODTRUCK FORM - BASE STYLES
   =================================== */

/**
 * Main form container with consistent styling
 * Uses semantic spacing and shadow for visual hierarchy
 */
.foodtruck-form {
    padding: var(--wp--preset--spacing--50);
    border-radius: var(--wp--custom--border--radius--medium);
    box-shadow: var(--wp--preset--shadow--deep);
    margin-bottom: var(--wp--preset--spacing--50);
    font-family: var(--wp--preset--font-family--manrope, sans-serif);
    background-color: var(--wp--preset--color--base);
}

/* Form headings */
.foodtruck-form h3.wp-block-heading {
    margin-bottom: var(--wp--preset--spacing--40);
    font-size: var(--wp--preset--font-size--x-large);
    /* color: var(--wp--preset--color--primary); */
}

/* ===================================
   FORM INPUT ELEMENTS
   =================================== */

/* Base label styles */
.foodtruck-form .form-label {
    display: block;
    margin-bottom: var(--wp--preset--spacing--20, 0.5rem);
    font-weight: 600;
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--contrast);
}

/* Base input styles - applies to all form controls */
.foodtruck-form input[type="text"],
.foodtruck-form input[type="email"],
.foodtruck-form input[type="tel"],
.foodtruck-form input[type="date"],
.foodtruck-form input[type="number"],
.foodtruck-form textarea,
.foodtruck-form select {
    width: 100%;
    padding: var(--wp--preset--spacing--20, 0.5rem) var(--wp--preset--spacing--30, 1rem);
    border: 1px solid var(--form-border-color);
    border-radius: var(--wp--custom--border--radius--small);
    background-color: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
    font-size: var(--wp--preset--font-size--medium);
    font-family: inherit;
    box-sizing: border-box;
    transition: var(--form-transition);
}

/* Focus states for all inputs */
.foodtruck-form input:focus,
.foodtruck-form textarea:focus,
.foodtruck-form select:focus {
    border-color: var(--wp--preset--color--primary);
    box-shadow: var(--form-focus-ring);
    outline: none;
}

/* Placeholder styling */
.foodtruck-form ::placeholder {
    color: color-mix(in srgb, var(--wp--preset--color--contrast) 60%, transparent);
    opacity: 1;
    font-size: var(--wp--preset--font-size--medium);
}

/* ===================================
   SPECIFIC INPUT TYPES
   =================================== */

/* Date input specific styling */
.foodtruck-form input[type="date"] {
    min-height: calc(var(--wp--preset--spacing--20, 0.5rem) * 2 + var(--wp--preset--font-size--medium) + 2px);
}

.foodtruck-form input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

.foodtruck-form input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.6;
    cursor: pointer;
    filter: invert(0.2);
    transition: opacity 0.2s ease;
}

.foodtruck-form input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Custom select styling with arrow */
.foodtruck-form select.form-select {
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%208l5%205%205-5z%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right var(--wp--preset--spacing--30, 1rem) center;
    background-size: 1em;
    padding-right: calc(var(--wp--preset--spacing--30, 1rem) * 2 + var(--wp--preset--spacing--20, 0.5rem) + 1em);
}

/* Textarea row heights */
.foodtruck-form textarea[rows="2"] {
    min-height: calc((var(--wp--preset--font-size--medium) * 1.5 * 2) + (var(--wp--preset--spacing--20, 0.5rem) * 2) + 2px);
}

.foodtruck-form textarea[rows="3"] {
    min-height: calc((var(--wp--preset--font-size--medium) * 1.5 * 3) + (var(--wp--preset--spacing--20, 0.5rem) * 2) + 2px);
}

/* ===================================
   LAYOUT COMPONENTS
   =================================== */

/* Column layout */
.foodtruck-form .wp-block-columns {
    margin-bottom: var(--wp--preset--spacing--30, 1.5rem);
    gap: var(--wp--preset--spacing--40, 1.8rem);
}

.foodtruck-form .wp-block-column {
    margin-bottom: 0;
}

/* ===================================
   SERVICES GROUP & CHECKBOXES
   =================================== */

/**
 * Services group container with distinct background
 * Provides visual separation for related form elements
 */
.foodtruck-form .services-group {
    padding: var(--wp--preset--spacing--30, 1.5rem);
    border-radius: var(--wp--custom--border--radius--small);
    margin: var(--wp--preset--spacing--30, 1.5rem) 0;
    background-color: var(--wp--preset--color--surface) !important;
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}

.foodtruck-form .services-group > .form-label {
    font-size: var(--wp--preset--font-size--large);
    margin-bottom: var(--wp--preset--spacing--20, 0.5rem);
    display: block;
    color: var(--wp--preset--color--contrast);
}

/**
 * Custom checkbox styling with modern design
 * Provides accessible and visually appealing checkboxes
 */
.foodtruck-form .custom-checkbox {
    margin-bottom: var(--wp--preset--spacing--20, 0.5rem);
}

.foodtruck-form .custom-checkbox .wpcf7-list-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: calc(var(--wp--preset--font-size--medium) * 1.4);
    cursor: pointer;
    margin: 0;
}

/* Hidden native checkbox */
.foodtruck-form .custom-checkbox .wpcf7-list-item input[type="checkbox"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    margin: 0;
}

/* Checkbox label with custom styling */
.foodtruck-form .custom-checkbox .wpcf7-list-item .wpcf7-list-item-label {
    position: relative;
    padding-left: calc(var(--wp--preset--spacing--30, 1rem) + var(--wp--preset--spacing--20, 0.5rem));
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--contrast);
    line-height: 1.4;
    display: inline-block;
    z-index: 1;
    pointer-events: none;
}

/* Custom checkbox appearance */
.foodtruck-form .custom-checkbox .wpcf7-list-item .wpcf7-list-item-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--wp--preset--spacing--30, 1rem);
    height: var(--wp--preset--spacing--30, 1rem);
    background-color: var(--wp--preset--color--base);
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 25%, transparent);
    border-radius: var(--wp--custom--border--radius--small);
    transition: var(--form-transition-fast);
}

/* Checkmark */
.foodtruck-form .custom-checkbox .wpcf7-list-item .wpcf7-list-item-label::after {
    content: '';
    position: absolute;
    left: calc(var(--wp--preset--spacing--30, 1rem) * 0.35);
    top: 50%;
    transform: translateY(-50%) rotate(45deg) scale(0);
    transform-origin: center;
    width: calc(var(--wp--preset--spacing--30, 1rem) * 0.3);
    height: calc(var(--wp--preset--spacing--30, 1rem) * 0.6);
    border: solid var(--wp--preset--color--base);
    border-width: 0 2px 2px 0;
    transition: var(--form-transition-fast);
}

/* Checked state */
.foodtruck-form .custom-checkbox .wpcf7-list-item input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
    background-color: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
}

.foodtruck-form .custom-checkbox .wpcf7-list-item input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
    transform: translateY(-50%) rotate(45deg) scale(1);
}

/* Focus state */
.foodtruck-form .custom-checkbox .wpcf7-list-item input[type="checkbox"]:focus + .wpcf7-list-item-label::before {
    box-shadow: var(--form-focus-ring);
}

/* ===================================
   SUBMIT BUTTON
   =================================== */

.foodtruck-form .form-submit-container {
    margin-top: var(--wp--preset--spacing--50);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.foodtruck-form .wp-block-button .wp-block-button__link.wpcf7-submit {
    background-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--base) !important;
    padding: var(--wp--preset--spacing--20, 0.5rem) var(--wp--preset--spacing--40, 1.8rem);
    font-size: var(--wp--preset--font-size--large);
    font-family: inherit !important;
    border-radius: var(--wp--custom--border--radius--small) !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer;
    transition: var(--form-transition), transform 0.1s ease-in-out;
}

.foodtruck-form .wp-block-button .wp-block-button__link.wpcf7-submit:hover,
.foodtruck-form .wp-block-button .wp-block-button__link.wpcf7-submit:focus {
    background-color: var(--wp--preset--color--accent-3) !important;
    transform: translateY(-1px);
}

/* ===================================
   FORM MESSAGES & VALIDATION
   =================================== */

.foodtruck-form .form-note {
    margin-top: var(--wp--preset--spacing--30, 1.5rem);
    font-size: var(--wp--preset--font-size--small);
    color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent);
}

/* Contact Form 7 response messages */
.foodtruck-form .wpcf7-response-output {
    margin: var(--wp--preset--spacing--40, 1.8rem) 0 var(--wp--preset--spacing--30, 1.5rem);
    padding: var(--wp--preset--spacing--20, 0.5rem) var(--wp--preset--spacing--30, 1.5rem);
    border-radius: var(--wp--custom--border--radius--small);
    font-size: var(--wp--preset--font-size--small);
}

/* Error messages */
.foodtruck-form .wpcf7-response-output.wpcf7-validation-errors,
.foodtruck-form .wpcf7-response-output.wpcf7-spam-blocked {
    border: 1px solid var(--wp--preset--color--accent-6);
    background-color: color-mix(in srgb, var(--wp--preset--color--accent-6) 15%, var(--wp--preset--color--base));
    color: var(--wp--preset--color--contrast);
}

/* Success messages */
.foodtruck-form .wpcf7-response-output.wpcf7-mail-sent-ok {
    border: 1px solid var(--wp--preset--color--primary);
    background-color: color-mix(in srgb, var(--wp--preset--color--primary) 15%, var(--wp--preset--color--base));
    color: var(--wp--preset--color--contrast);
}

/* Validation styling */
.foodtruck-form .wpcf7-not-valid {
    border-color: var(--wp--preset--color--accent-6) !important;
}

.foodtruck-form .wpcf7-not-valid-tip {
    color: var(--wp--preset--color--accent-6);
    font-size: var(--wp--preset--font-size--small);
    display: block;
}

.foodtruck-form span.wpcf7-form-control-wrap {
    display: block;
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

/**
 * Mobile-first responsive adjustments
 * Optimizes layout for smaller screens
 */
@media (max-width: 768px) {
    .foodtruck-form {
        padding: var(--wp--preset--spacing--40, 1.8rem);
    }
    
    .foodtruck-form h3.wp-block-heading {
        font-size: var(--wp--preset--font-size--large);
    }
    
    .foodtruck-form .wp-block-columns {
        flex-direction: column;
        gap: 0;
    }
    
    .foodtruck-form .wp-block-column {
        width: 100% !important;
        margin-bottom: var(--wp--preset--spacing--30, 1.5rem);
    }
    
    .foodtruck-form .checkbox-columns .wp-block-column {
        margin-bottom: 0;
    }
}