/* ===========================================================================
   Farming Hub — the branded dropdown (pairs with js/fh-select.js)
   ---------------------------------------------------------------------------
   Colours are the site tokens, with literal fallbacks so this file still looks
   right if it ever loads before/without a page stylesheet.

   The button deliberately inherits nothing: each page already styles its own
   `select`, and the button must land on exactly the same box. It does that by
   copying the page's field rules, so `.fhs-btn` is styled ALONGSIDE `select` in
   each page's own sheet (see product.html / dealer.html) and only the parts
   that belong to the widget itself live here.
   =========================================================================== */

/* the real control: still submitted, still validated, just not drawn */
.fhs-native {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
  opacity: 0; pointer-events: none;
}

.fhs { position: relative; min-width: 0; }

.fhs-btn {
  width: 100%; box-sizing: border-box; cursor: pointer; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.fhs-btn:disabled { cursor: not-allowed; opacity: .62; }
.fhs-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fhs-chev {
  flex: none; width: 15px; height: 15px;
  color: var(--body, #44514b); transition: transform .22s ease;
}
.fhs.is-open .fhs-chev { transform: rotate(180deg); }

/* ---- the list ------------------------------------------------------------
   Appended to <body> and positioned by script, so no ancestor's overflow or
   backdrop-filter can clip it. Above the enquiry modal's 1200. */
.fhs-pop {
  /* above everything the site puts on screen: the enquiry modal is 1200, the
     dealer application panel is 1401, and the site's ceiling is 2000. A list
     that opens behind the dialog that opened it is worse than a blue one. */
  position: fixed; z-index: 9000; box-sizing: border-box;
  /* a COLUMN, not one scroller: the search box stays pinned while the list
     under it scrolls. A search that scrolls away is a search you lose. */
  display: flex; flex-direction: column;
  padding: 6px; border-radius: 13px;
  background: var(--white, #fff);
  border: 1px solid var(--line-strong, #d3ddd4);
  box-shadow: 0 22px 48px -18px rgba(10, 39, 25, .35), 0 2px 8px -2px rgba(10, 39, 25, .12);
  opacity: 0; transform: translateY(-5px);
  transition: opacity .16s ease, transform .16s ease;
}
.fhs-list { scrollbar-width: thin; scrollbar-color: var(--line-strong, #d3ddd4) transparent; }
.fhs-pop.is-up { transform: translateY(5px); }
.fhs-pop.is-open { opacity: 1; transform: none; }
.fhs-pop[hidden] { display: none; }
.fhs-list::-webkit-scrollbar { width: 8px; }
.fhs-list::-webkit-scrollbar-thumb { background: var(--line-strong, #d3ddd4); border-radius: 8px; border: 2px solid var(--white, #fff); }

/* ---- the search box ---- */
.fhs-find {
  flex: none; position: relative; display: flex; align-items: center;
  margin: 0 0 5px; padding: 0 0 6px;
  border-bottom: 1px solid var(--line, #e3eae3);
}
.fhs-find[hidden] { display: none; }              /* display:flex outranks [hidden] */
.fhs-find-ico {
  position: absolute; left: 11px; width: 15px; height: 15px;
  color: var(--muted, #6c7a72); pointer-events: none;
}
.fhs-search {
  width: 100%; box-sizing: border-box;
  padding: 9px 11px 9px 33px; border-radius: 9px;
  border: 1.5px solid var(--line-strong, #d3ddd4);
  background: var(--off-white, #ffffff);
  /* !! 1rem floor: iOS Safari zooms the page on focus below 16px, and this box
     !! is focused the moment a desktop user opens the list */
  font: 500 1rem/1.3 var(--font-body, system-ui, sans-serif);
  color: var(--ink, #16211b);
  -webkit-appearance: none; appearance: none;
}
.fhs-search::placeholder { color: var(--muted, #6c7a72); opacity: 1; font-size: .88rem; }
.fhs-search:focus {
  outline: none; background: var(--white, #fff);
  border-color: var(--lime, #c6dc3c); box-shadow: 0 0 0 3px rgba(198, 220, 60, .22);
}

.fhs-list {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}

.fhs-opt {
  padding: 10px 12px; border-radius: 9px; cursor: pointer;
  font: 500 .94rem/1.35 var(--font-body, system-ui, sans-serif);
  color: var(--ink, #16211b);
  transition: background .12s ease, color .12s ease;
}
/* THE POINT OF THIS FILE: hover and keyboard highlight are the house green,
   not the operating system's blue. */
.fhs-opt:hover, .fhs-opt.is-at {
  background: var(--green-50, #eef4ef);
  color: var(--green, #0f3b25);
}
.fhs-opt.is-on {
  background: var(--green, #0f3b25); color: #fff; font-weight: 600;
}
.fhs-opt.is-on.is-at, .fhs-opt.is-on:hover { background: var(--green-mid, #1c5a39); color: #fff; }
/* the "Select a division" row: still choosable, so the field can be cleared,
   but it is a prompt and must not look like a chosen answer */
.fhs-opt.is-prompt { color: var(--muted, #6c7a72); }
.fhs-opt.is-off { opacity: .45; cursor: default; }
.fhs-opt.is-off:hover { background: none; color: var(--ink, #16211b); }

.fhs-grp {
  padding: 11px 12px 5px;
  font: 700 .62rem/1 var(--font-display, system-ui, sans-serif);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--lime-dark, #93a82a);
}
.fhs-grp:first-child { padding-top: 5px; }
.fhs-empty {
  padding: 12px; font: 500 .88rem/1.4 var(--font-body, system-ui, sans-serif);
  color: var(--muted, #6c7a72); text-align: center;
}

/* a thumb needs a bigger row than a mouse pointer does */
@media (pointer: coarse) {
  .fhs-opt { padding: 13px 13px; font-size: 1rem; }
  .fhs-pop { padding: 7px; }
  .fhs-search { padding: 12px 12px 12px 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .fhs-pop, .fhs-chev { transition: none; }
  .fhs-pop { transform: none; }
}