/*
Home course search - [roa_tas_course_search].

A copy of the JetSearch widget it replaces, value for value: every size and colour here was read
off that widget's Elementor CSS on dev3 (post-22040.css). home_course_search.md has the table.

Colours are the Elementor kit's globals, with the kit's current hex as a fallback, so the search
follows the palette if the kit changes and still looks right on a page without the kit.

Over-qualified throughout, on purpose. The kit styles form elements globally and not lightly:

  .elementor-kit-N input:not([type="button"]):not([type="submit"])          0,3,1
  .elementor-kit-N input:focus:not([type="button"]):not([type="submit"])    0,4,1
  .elementor-kit-N button:hover / :focus                                    0,2,1

- borders, padding, a primary background and uppercase 18px/700 on every button. Each rule
below outranks the kit rule it has to beat on specificity alone, so load order never decides it.
*/

.roa-tas-cs {
  --roa-cs-primary: var(--e-global-color-primary, #F3AF34);
  --roa-cs-secondary: var(--e-global-color-secondary, #21464D);
  --roa-cs-text: var(--e-global-color-text, #01323D);
  --roa-cs-white: var(--e-global-color-c208b9d, #FFFFFF);
  --roa-cs-muted: var(--e-global-color-5909579, #658289);
  --roa-cs-hover: var(--e-global-color-c7f4273, #FFCB4C);
  --roa-cs-row-hover: var(--e-global-color-5a97c47, #001F26);
  --roa-cs-panel: #001F26E6;

  position: relative;
  width: 100%;
  max-width: 600px;
}

.roa-tas-cs [x-cloak] { display: none !important; }

/* Themes nearly always have this; the fallback costs nothing if this one does not. */
.roa-tas-cs .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.roa-tas-cs svg {
  display: block;
  width: 1em;
  height: 1em;
}

/* ------------------------------------------------------------------ the pill */

.roa-tas-cs .roa-tas-cs__form {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 8px;
  border-radius: 40px;
  background: var(--roa-cs-white);
}

.roa-tas-cs__wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.roa-tas-cs .roa-tas-cs__form .roa-tas-cs__wrap input.roa-tas-cs__field,
.roa-tas-cs .roa-tas-cs__form .roa-tas-cs__wrap input.roa-tas-cs__field:focus {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 5px 0 0 20px;
  border: 0;
  border-radius: 0;
  outline: none; /* the caret is the focus indicator, as it is on JetSearch */
  box-shadow: none;
  background: var(--roa-cs-white);
  color: var(--roa-cs-text);
  font-family: inherit;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.3;
}

.roa-tas-cs .roa-tas-cs__form .roa-tas-cs__wrap input.roa-tas-cs__field::placeholder {
  color: var(--roa-cs-text);
  opacity: 1;
}

/* Our own clear button replaces the browser's. */
.roa-tas-cs input.roa-tas-cs__field::-webkit-search-cancel-button,
.roa-tas-cs input.roa-tas-cs__field::-webkit-search-decoration {
  -webkit-appearance: none;
  display: none;
}

.roa-tas-cs .roa-tas-cs__wrap button.roa-tas-cs__clear {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 4px 0 8px;
  padding: 4px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--roa-cs-primary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.roa-tas-cs .roa-tas-cs__clear path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}

/* ------------------------------------------------------------------ course type */

.roa-tas-cs__type {
  position: relative;
  flex: none;
  width: 150px;
}

.roa-tas-cs .roa-tas-cs__type select.roa-tas-cs__select,
.roa-tas-cs .roa-tas-cs__type select.roa-tas-cs__select:focus {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 12px 24px 8px 8px;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  color: var(--roa-cs-text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  cursor: pointer;
}

.roa-tas-cs .roa-tas-cs__type select.roa-tas-cs__select:focus { color: var(--roa-cs-secondary); }

/* A keyboard user still needs to see where they are, even though a click shows nothing. */
.roa-tas-cs .roa-tas-cs__type select.roa-tas-cs__select:focus-visible {
  outline: 2px solid var(--roa-cs-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The options list is drawn by the OS - dark text on its own background, not the pill's. */
.roa-tas-cs .roa-tas-cs__select option { color: #000; background: #fff; }

.roa-tas-cs__caret {
  position: absolute;
  top: 50%;
  right: 8px;
  font-size: 8px;
  transform: translateY(-50%);
  pointer-events: none;
}

.roa-tas-cs__caret path { fill: var(--roa-cs-muted); }
.roa-tas-cs__type:focus-within .roa-tas-cs__caret path { fill: var(--roa-cs-primary); }

/* ------------------------------------------------------------------ submit */

.roa-tas-cs .roa-tas-cs__form button.roa-tas-cs__submit {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 12px 13.5px;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  background: var(--roa-cs-primary);
  color: var(--roa-cs-secondary);
  font-size: 23px;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.roa-tas-cs .roa-tas-cs__form button.roa-tas-cs__submit:hover,
.roa-tas-cs .roa-tas-cs__form button.roa-tas-cs__submit:focus {
  background: var(--roa-cs-hover);
  color: var(--roa-cs-muted);
}

.roa-tas-cs__submit path { fill: currentColor; }

/* ------------------------------------------------------------------ results panel */

.roa-tas-cs__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 9999;
  margin-top: 10px;
  border-radius: 15px;
  background: var(--roa-cs-panel);
  color: var(--roa-cs-white);
}

.roa-tas-cs__head,
.roa-tas-cs__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
}

.roa-tas-cs .roa-tas-cs__head a.roa-tas-cs__count {
  padding: 5px;
  color: var(--roa-cs-white);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.roa-tas-cs .roa-tas-cs__head a.roa-tas-cs__count:hover { color: var(--roa-cs-primary); }

.roa-tas-cs__arrows,
.roa-tas-cs__pages {
  display: flex;
  align-items: center;
  gap: 8px;
}

.roa-tas-cs .roa-tas-cs__arrows button.roa-tas-cs__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 3px;
  border: 1.5px solid var(--roa-cs-primary);
  border-radius: 50%;
  background: transparent;
  color: var(--roa-cs-white);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.roa-tas-cs .roa-tas-cs__arrows button.roa-tas-cs__arrow:hover:not(:disabled) {
  background: var(--roa-cs-primary);
  color: var(--roa-cs-text);
}

.roa-tas-cs .roa-tas-cs__arrows button.roa-tas-cs__arrow:disabled {
  opacity: 0.45;
  cursor: default;
}

.roa-tas-cs__arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------------ rows */

.roa-tas-cs .roa-tas-cs__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.roa-tas-cs .roa-tas-cs__list li {
  margin: 0;
  padding: 0;
}

.roa-tas-cs .roa-tas-cs__list a.roa-tas-cs__item {
  display: flex;
  align-items: flex-start;
  padding: 10px;
  color: inherit;
  text-decoration: none;
  background: transparent;
  transition: background-color 0.3s ease-in-out;
}

.roa-tas-cs .roa-tas-cs__list a.roa-tas-cs__item:hover,
.roa-tas-cs .roa-tas-cs__list a.roa-tas-cs__item.is-active {
  background: var(--roa-cs-row-hover);
}

.roa-tas-cs__thumb {
  flex: none;
  width: 66px;
  margin-right: 20px;
}

/* Square whatever the upload's shape - cropped to fill, centred. */
.roa-tas-cs .roa-tas-cs__thumb img {
  display: block;
  width: 66px;
  height: 66px;
  max-width: none;
  margin: 0;
  border-radius: 8px;
  object-fit: cover;
  object-position: center;
}

.roa-tas-cs__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.roa-tas-cs__title {
  color: var(--roa-cs-primary);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2em;
  letter-spacing: 0.4px;
}

.roa-tas-cs__excerpt {
  margin-top: 5px;
  color: var(--roa-cs-white);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.3em;
  letter-spacing: 0.8px;
}

/* ------------------------------------------------------------------ footer */

.roa-tas-cs .roa-tas-cs__foot a.roa-tas-cs__all {
  padding: 0 10px;
  color: var(--roa-cs-primary);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
}

.roa-tas-cs .roa-tas-cs__foot a.roa-tas-cs__all:hover { color: var(--roa-cs-white); }

.roa-tas-cs .roa-tas-cs__pages button.roa-tas-cs__page {
  margin: 0;
  padding: 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--roa-cs-white);
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.roa-tas-cs .roa-tas-cs__pages button.roa-tas-cs__page:hover,
.roa-tas-cs .roa-tas-cs__pages button.roa-tas-cs__page.is-current {
  background: transparent;
  color: var(--roa-cs-primary);
}

.roa-tas-cs__message {
  margin: 0;
  padding: 10px 15px;
  color: var(--roa-cs-white);
}

/* ------------------------------------------------------------------ focus */

/* Themes routinely remove outlines. This is the one place that must not be inherited. */
.roa-tas-cs :is(button, a):focus-visible {
  outline: 2px solid var(--roa-cs-primary);
  outline-offset: 2px;
}

.roa-tas-cs .roa-tas-cs__list a.roa-tas-cs__item:focus-visible { outline-offset: -2px; }

/* ------------------------------------------------------------------ phones */

@media (max-width: 767px) {
  .roa-tas-cs .roa-tas-cs__form { padding: 5px; }

  .roa-tas-cs .roa-tas-cs__form .roa-tas-cs__wrap input.roa-tas-cs__field,
  .roa-tas-cs .roa-tas-cs__form .roa-tas-cs__wrap input.roa-tas-cs__field:focus {
    font-size: 16px;
    padding: 0 0 0 10px;
  }

  .roa-tas-cs .roa-tas-cs__form button.roa-tas-cs__submit {
    font-size: 18px;
    padding: 9px 9px 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .roa-tas-cs * { transition: none !important; }
}