/* * Nuisance Vehicle Report — form layout styles * * Loaded automatically by the plugin via wp_enqueue_style. * * Two-column layout on desktop; stacks to single column on mobile. */ /* * Two-column layout using CSS Grid. * Each adjacent pair of

tags inside .ppa-nuisance-vehicle-grid forms one * implicit grid row. When a CF7 validation error expands one cell, the paired * cell in the same row expands with it, keeping opposite columns aligned. * (A flexbox two-column approach doesn't do this — the columns drift apart.) */ .ppa-nuisance-vehicle-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; } /* Label styling */ .ppa-nuisance-vehicle-form label { font-size: 1.05rem; font-weight: 600; } /* Required field asterisk — added via in the form template */ .ppa-nuisance-vehicle-form .ppa-req { color: red; margin-left: 0.15em; } /* Make inputs fill their column */ .ppa-nuisance-vehicle-form input[type="text"], .ppa-nuisance-vehicle-form input[type="email"], .ppa-nuisance-vehicle-form input[type="date"], .ppa-nuisance-vehicle-form select, .ppa-nuisance-vehicle-form textarea { width: 100%; box-sizing: border-box; font-size: 1rem; margin-top: 0.4rem; color: #333; background-color: #fff; } .ppa-nuisance-vehicle-form input[type="text"], .ppa-nuisance-vehicle-form input[type="email"], .ppa-nuisance-vehicle-form input[type="date"], .ppa-nuisance-vehicle-form textarea { padding: 1rem 0.625rem; } /* Select needs less vertical padding or the chosen value gets clipped */ .ppa-nuisance-vehicle-form select { padding: 0.5rem 0.625rem; } /* jQuery UI Autocomplete dropdown * The widget is appended to by jQuery UI, so do NOT scope these * rules inside .ppa-nuisance-vehicle-form or they will never match. */ .ui-autocomplete { max-height: 200px; overflow-y: auto; overflow-x: hidden; font-size: 0.85rem; } /* Stack to single column on narrow screens */ @media (max-width: 640px) { .ppa-nuisance-vehicle-grid { grid-template-columns: 1fr; } }