/* ==========================================================================
   KSC Select — a themed replacement for the native dropdown
   --------------------------------------------------------------------------
   A browser renders a <select>'s open option list as an operating-system
   menu. It sits outside the page entirely, so no CSS can colour it: that is
   why an open dropdown looked like plain blue-on-white system chrome while
   the rest of the page was cream and forest green.

   The only way to control those colours is to draw the list ourselves. This
   stylesheet pairs with ksc-select.js, which keeps the real <select> in the
   DOM (hidden from view but still the thing that submits) and renders this
   listbox alongside it. With JavaScript off, the native control is shown
   instead and everything still works.

   Loaded by BOTH the public site and the admin panel so the two never drift
   apart. Colours come from the tokens below, which each side overrides with
   its own palette.
   ========================================================================== */

:root {
  --ksc-sel-bg: #ffffff;
  --ksc-sel-ink: #1a1d1b;
  --ksc-sel-muted: #6b7280;
  --ksc-sel-border: #d9d5cc;
  --ksc-sel-radius: 10px;
  --ksc-sel-accent: #2f4f3a;
  --ksc-sel-accent-ink: #ffffff;
  --ksc-sel-hover: #f3f1ea;
  --ksc-sel-panel-bg: #ffffff;
  --ksc-sel-shadow: 0 14px 38px rgba(20, 28, 23, .16);
  --ksc-sel-focus-ring: rgba(47, 79, 58, .22);
}

/* The original control stays in the DOM for form submission and validation,
   but is taken out of the visual and accessibility trees. display:none would
   stop some browsers reporting a failed `required`, so it is hidden this way
   instead. */
.ksc-select-native {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ksc-select {
  position: relative;
  display: block;
  width: 100%;
  font: inherit;
}
/* While open, the control has to out-rank whatever follows it in the form.
   Without this the panel is painted under the next field — on the contact
   form the message box covered the options entirely. */
.ksc-select.is-open { z-index: 1200; }

/* ---------- the closed control ---------- */
.ksc-select-trigger {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  min-height: 42px;
  padding: .5rem .75rem;
  background: var(--ksc-sel-bg);
  color: var(--ksc-sel-ink);
  border: 1px solid var(--ksc-sel-border);
  border-radius: var(--ksc-sel-radius);
  font: inherit;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.ksc-select-trigger:hover { border-color: var(--ksc-sel-accent); }
.ksc-select-trigger:focus-visible,
.ksc-select.is-open .ksc-select-trigger {
  outline: none;
  border-color: var(--ksc-sel-accent);
  box-shadow: 0 0 0 .2rem var(--ksc-sel-focus-ring);
}
.ksc-select-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ksc-select-value.is-placeholder { color: var(--ksc-sel-muted); }

.ksc-select-caret {
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: .55;
  transition: transform .2s ease, opacity .2s ease;
}
.ksc-select.is-open .ksc-select-caret {
  transform: rotate(225deg) translate(-2px, -2px);
  opacity: .9;
}

/* ---------- the open panel ---------- */
.ksc-select-panel {
  position: absolute;
  z-index: 1200;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .3rem;
  margin: 0;
  list-style: none;
  background: var(--ksc-sel-panel-bg);
  border: 1px solid var(--ksc-sel-border);
  border-radius: var(--ksc-sel-radius);
  box-shadow: var(--ksc-sel-shadow);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.ksc-select.is-open .ksc-select-panel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* Flipped above the control when there is not enough room below. */
.ksc-select.is-up .ksc-select-panel {
  top: auto;
  bottom: calc(100% + 6px);
  transform: translateY(4px);
}
.ksc-select.is-up.is-open .ksc-select-panel { transform: none; }

.ksc-select-option {
  padding: .5rem .65rem;
  border-radius: calc(var(--ksc-sel-radius) - 4px);
  color: var(--ksc-sel-ink);
  cursor: pointer;
  line-height: 1.35;
  transition: background-color .12s ease, color .12s ease;
}
.ksc-select-option + .ksc-select-option { margin-top: 1px; }
.ksc-select-option:hover,
.ksc-select-option.is-active {
  background: var(--ksc-sel-hover);
}
.ksc-select-option.is-selected {
  background: var(--ksc-sel-accent);
  color: var(--ksc-sel-accent-ink);
  font-weight: 600;
}
.ksc-select-option.is-selected.is-active {
  background: var(--ksc-sel-accent);
  filter: brightness(1.12);
}
.ksc-select-option.is-disabled {
  color: var(--ksc-sel-muted);
  cursor: not-allowed;
  opacity: .6;
}
.ksc-select-option.is-disabled:hover { background: transparent; }

.ksc-select-group-label {
  padding: .5rem .65rem .25rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ksc-sel-muted);
}

.ksc-select-empty {
  padding: .75rem .65rem;
  color: var(--ksc-sel-muted);
  font-size: .9rem;
}

/* A disabled select still reads as a control, just an inert one. */
.ksc-select.is-disabled .ksc-select-trigger {
  background: var(--ksc-sel-hover);
  color: var(--ksc-sel-muted);
  cursor: not-allowed;
  border-color: var(--ksc-sel-border);
}

/* Mirrors Bootstrap's invalid state so server-side errors look the same
   whether a field is a text input or one of these. */
.ksc-select.is-invalid .ksc-select-trigger {
  border-color: #b02a37;
}
.ksc-select.is-invalid .ksc-select-trigger:focus-visible {
  box-shadow: 0 0 0 .2rem rgba(176, 42, 55, .2);
}

/* Compact variant, matching form-select-sm. */
.ksc-select.ksc-select-sm .ksc-select-trigger {
  min-height: 34px;
  padding: .3rem .6rem;
  font-size: .875rem;
}
.ksc-select.ksc-select-sm .ksc-select-option {
  padding: .4rem .55rem;
  font-size: .875rem;
}

@media (prefers-reduced-motion: reduce) {
  .ksc-select-trigger,
  .ksc-select-panel,
  .ksc-select-caret,
  .ksc-select-option { transition: none; }
}