/**
 * File: assets/css/search-form.css
 * Project: 12D Elementor Addons
 *
 * Shared Search Form component.
 *
 * Used by widgets that render the canonical 12D Search form.
 */

/* ============================================================
   Search Form
   ============================================================ */

.d12-search__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: flex-start;
}

.d12-search-widget {
  --d12-search-panel-alignment: right;
  position: relative;
  display: flex;
  flex-direction: column;
}

.elementor-widget-d12_search .d12-search-widget > .d12-search__trigger {
  display: none;
}

.d12-search__trigger-icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  flex: 0 0 auto;
  max-width: none;
  transform: translateY(var(--d12-search-trigger-icon-offset-y, 0px));
}

.elementor-widget-d12_search
  .d12-search-widget.is-mobile-mode
  > .d12-search__trigger {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
}

.d12-search-widget.is-mobile-mode .d12-search__panel {
  position: absolute;
  top: 100%;
  right: 0;
  width: max-content;
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  margin-top: 0 !important;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.d12-search-widget.is-mobile-mode.is-mobile-open .d12-search__panel {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.d12-search-widget.is-mobile-mode .d12-search__form {
  flex-wrap: nowrap;
  width: max-content;
  max-width: min(calc(100vw - 24px), 1000px);
  justify-content: flex-start;
}

/* Allow the field to shrink beside the fixed-size submit button on narrow
 * viewports, including when Elementor gives the field a fixed pixel width. */
.d12-search-widget.is-mobile-mode .d12-search__form > label,
.d12-search-widget.is-mobile-mode .d12-search__field {
  min-width: 0;
}

.d12-search-widget.is-mobile-mode .d12-search__submit-wrap,
.d12-search-widget.is-mobile-mode .d12-search__submit {
  min-width: 0;
  max-width: 100%;
}

/*
 * The Search field is wrapped by its label. Keep the label as the field's
 * layout container because Collapsed Search hides this entire element to
 * remove the field from layout while leaving the submit button available.
 */
.d12-search__form > label {
  display: flex;
  align-items: stretch;
}

/*
 * Collapsed Search
 *
 * JavaScript applies `is-collapsible` only when Collapse Search is enabled
 * for the currently active responsive range. `is-expanded` temporarily
 * reveals the field after user interaction.
 */
.d12-search__form--collapsible.is-collapsible:not(.is-expanded) > label {
  display: none;
}

/*
 * Search forms use the canonical Button wrapper for shared hover effects,
 * but inside the horizontal form the wrapper must size to its content rather
 * than inherit the shared standalone Button wrapper's 100% width.
 */
.d12-search__submit-wrap.d12-button__wrap {
  position: relative;
  top: var(--d12-search-button-offset-y, 0px);
  width: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
}

.d12-search__submit.d12-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
}

/* Own the default corner geometry instead of inheriting a theme's radius.
 * Elementor's widget-specific Border Radius controls remain more specific. */
.d12-search__form .d12-search__submit.d12-button,
.d12-search__form .d12-search__field {
  border-radius: 0;
}

.d12-search__field {
  flex: 1 1 180px;
  width: 100%;
  padding: 0.65rem 0.85rem;
  color: var(--e-global-color-text);
  background-color: #ffffff;
  border: 1px solid var(--e-global-color-text);
  border-radius: 0;
  font-size: 0.95rem;
  line-height: 1.2;
  box-sizing: border-box;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    outline-color 0.2s ease;
}

/*
 * Field Hover
 *
 * Hover provides a lighter interaction state than Focus:
 * - Global Text foreground;
 * - subtle Global Accent surface tint;
 * - semantic Accent Hover border.
 *
 * Explicit Elementor Hover controls may override these defaults.
 */
.elementor-widget .d12-search__form .d12-search__field:hover {
  color: var(--e-global-color-text);
  background-color: color-mix(
    in srgb,
    var(--e-global-color-accent) 10%,
    #ffffff
  );
  border-color: var(--d12-accent-hover, var(--e-global-color-accent));
}

/*
 * Field Focus
 *
 * The additional widget/form scoping is intentional. Elementor may generate
 * widget-specific Normal-state rules with greater specificity than a simple
 * `.d12-search__field:focus` selector. Scoping through an Elementor widget
 * containing the canonical Search Form ensures that the Focus state wins over
 * the Normal state while still allowing explicitly configured Elementor Focus
 * controls to override these defaults.
 *
 * The subtle background tint uses Global Accent as a surface treatment.
 * The interactive border and keyboard Focus Indicator use the framework's
 * semantic Accent Hover colour so Focus remains consistent with the canonical
 * Button system.
 */
.elementor-widget .d12-search__form .d12-search__field:focus {
  color: var(--e-global-color-text);
  background-color: color-mix(
    in srgb,
    var(--e-global-color-accent) 20%,
    #ffffff
  );
  border-color: var(--d12-accent-hover, var(--e-global-color-accent));

  outline: none;
  box-shadow: none;
}

.elementor-widget .d12-search__form .d12-search__field:focus-visible {
  color: var(--e-global-color-text);
  background-color: color-mix(
    in srgb,
    var(--e-global-color-accent) 20%,
    #ffffff
  );
  border-color: transparent;

  /*
   * Canonical field Focus Indicator.
   *
   * The ordinary field border becomes transparent during keyboard Focus
   * so the Accent Hover outline remains the single visible Focus Indicator.
   *
   * Some themes suppress input outlines with
   * `outline-color: transparent !important`.
   * The Search field owns its keyboard Focus Indicator, so these
   * properties are deliberately hardened against that interference.
   */
  outline-style: solid !important;
  outline-width: 2px !important;
  outline-color: var(
    --d12-accent-hover,
    var(--e-global-color-accent)
  ) !important;
  outline-offset: -2px;
  box-shadow: none;
}

/* End of file assets/css/search-form.css */