/**
 * @file
 * MLT Modern — Views exposed filters.
 *
 * Styles the filter bar that appears above a view when filters are
 * exposed (e.g. "Sort by Category" dropdown above blog grid).
 *
 * Scoped to `.views-exposed-form` so it only touches view filter forms,
 * not webforms or any other form on the site (those have their own
 * styling in forms.css).
 *
 * Layout: filters + submit button sit on one row on desktop, flex-wrap
 * to multiple rows or fully stack on narrow viewports.
 *
 * Markup pattern (auto-generated by Drupal Views):
 *
 *   <form class="views-exposed-form">
 *     <div class="form-item js-form-type-select">
 *       <label>Sort by Category</label>
 *       <select class="form-select">...</select>
 *     </div>
 *     <div class="form-actions" id="edit-actions">
 *       <input type="submit" class="form-submit" value="Apply">
 *     </div>
 *   </form>
 */

.views-exposed-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 20px;
  padding: 20px 24px;
  margin: 0 0 32px 0;
  background: var(--mlt-bg-soft);
  border: 1px solid var(--mlt-border);
  border-radius: var(--mlt-radius-md);
}

/* Each filter sits inside .form-item. They line up horizontally. */
.views-exposed-form .form-item,
.views-exposed-form .js-form-item {
  margin: 0;
  flex: 1 1 200px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Labels. */
.views-exposed-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--mlt-text);
  margin: 0;
  letter-spacing: 0.02em;
}

/* Select dropdowns. Match the webform input look. */
.views-exposed-form select,
.views-exposed-form .form-select {
  width: 100%;
  padding: 10px 36px 10px 14px;
  border: 1px solid var(--mlt-border);
  border-radius: var(--mlt-radius-md);
  background-color: #fff;
  color: var(--mlt-text);
  font-size: 15px;
  font-family: inherit;
  line-height: 1.4;
  box-sizing: border-box;
  cursor: pointer;
  /* Custom dropdown arrow - inline SVG so no extra image file. */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231a2332' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.views-exposed-form select:focus,
.views-exposed-form .form-select:focus {
  outline: none;
  border-color: var(--mlt-primary);
  box-shadow: 0 0 0 3px var(--mlt-primary-light);
}

/* Text inputs (some views have search filters). */
.views-exposed-form input[type="text"],
.views-exposed-form input[type="search"],
.views-exposed-form input[type="number"],
.views-exposed-form input[type="date"] {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--mlt-border);
  border-radius: var(--mlt-radius-md);
  background: #fff;
  color: var(--mlt-text);
  font-size: 15px;
  font-family: inherit;
  line-height: 1.4;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.views-exposed-form input[type="text"]:focus,
.views-exposed-form input[type="search"]:focus,
.views-exposed-form input[type="number"]:focus,
.views-exposed-form input[type="date"]:focus {
  outline: none;
  border-color: var(--mlt-primary);
  box-shadow: 0 0 0 3px var(--mlt-primary-light);
}

/* Form actions wrapper - holds the Apply button. Sits at the end of the
 * filter row, vertically aligned with the select fields (not the labels). */
.views-exposed-form .form-actions {
  flex: 0 0 auto;
  margin: 0;
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

/* Apply button - small yellow CTA. */
.views-exposed-form .form-submit,
.views-exposed-form input[type="submit"],
.views-exposed-form button[type="submit"] {
  display: inline-block;
  background: var(--mlt-accent);
  color: var(--mlt-accent-contrast);
  padding: 10px 22px;
  border: 2px solid transparent;
  border-radius: var(--mlt-radius-md);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.views-exposed-form .form-submit:hover,
.views-exposed-form input[type="submit"]:hover,
.views-exposed-form button[type="submit"]:hover {
  background: var(--mlt-accent-dark);
  color: var(--mlt-accent-contrast);
}

/* Reset button - some views have a Reset alongside Apply. Outlined style. */
.views-exposed-form .form-submit[value="Reset"],
.views-exposed-form input[type="submit"][value="Reset"],
.views-exposed-form .button--reset {
  background: #fff;
  color: var(--mlt-text);
  border: 1px solid var(--mlt-border);
}

.views-exposed-form .form-submit[value="Reset"]:hover,
.views-exposed-form input[type="submit"][value="Reset"]:hover,
.views-exposed-form .button--reset:hover {
  background: var(--mlt-bg-soft);
  border-color: var(--mlt-text-light);
}

/* Mobile - stack everything full-width. */
@media (max-width: 540px) {
  .views-exposed-form {
    padding: 16px;
    gap: 14px;
  }
  .views-exposed-form .form-item,
  .views-exposed-form .js-form-item {
    flex: 1 1 100%;
  }
  .views-exposed-form .form-actions {
    width: 100%;
  }
  .views-exposed-form .form-submit,
  .views-exposed-form input[type="submit"],
  .views-exposed-form button[type="submit"] {
    width: 100%;
    padding: 12px 22px;
  }
}