/*
Course list panel - ROA_TAS_Course_List, printed by the Elementor widget and the
[roa_tas_course_list] shortcode alike.

Everything adjustable is a custom property, declared once on .roa-tas-cl with the design's
defaults. The widget's style controls override them on its own wrapper; the shortcode uses them
as they are. Change a default here and both follow.

Unlike course.css and archive.css this block owns its colours: it is a fixed brand panel, not
prose that should take the theme's palette.
*/
.roa-tas-cl {
  --roa-cl-panel-bg: #01323d;
  --roa-cl-panel-radius: 30px;
  --roa-cl-panel-pad: 22px;
  --roa-cl-title: #f3af34;
  --roa-cl-all: #fff;
  --roa-cl-list-bg: #001f26;
  --roa-cl-list-radius: 10px;
  --roa-cl-max-height: 550px;
  --roa-cl-divider: rgba(255, 255, 255, 0.12);
  --roa-cl-scrollbar: #2c4a51;
  --roa-cl-name: #fff;
  --roa-cl-type: #a1b3b7;
  --roa-cl-next: #a1b3b7;
  --roa-cl-icon: #f3af34;
  --roa-cl-logo-bg: #fff;

  padding: var(--roa-cl-panel-pad);
  border-radius: var(--roa-cl-panel-radius);
  background: var(--roa-cl-panel-bg);
}

/* ------------------------------------------------------------------ header */

.roa-tas-cl__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0.5rem 1.1rem;
}

/* Margin reset against theme heading rules, whichever tag the title is given. */
.roa-tas-cl .roa-tas-cl__title {
  margin: 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.3;
  color: var(--roa-cl-title);
}

.roa-tas-cl .roa-tas-cl__all,
.roa-tas-cl .roa-tas-cl__all:visited,
.roa-tas-cl .roa-tas-cl__all:hover {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  flex-shrink: 0;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--roa-cl-all);
}

/* ------------------------------------------------------------------ list */

/*
The list scrolls, not the panel, so the header stays put. Styled scrollbar in both engines:
scrollbar-color for Firefox and current Chromium, the pseudo-elements for Safari.
*/
.roa-tas-cl .roa-tas-cl__list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0.75rem;
  max-height: var(--roa-cl-max-height);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--roa-cl-list-radius);
  background: var(--roa-cl-list-bg);
  scrollbar-width: thin;
  scrollbar-color: var(--roa-cl-scrollbar) transparent;
}

.roa-tas-cl .roa-tas-cl__list::-webkit-scrollbar {
  width: 8px;
}

.roa-tas-cl .roa-tas-cl__list::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: var(--roa-cl-scrollbar);
}

.roa-tas-cl .roa-tas-cl__item {
  margin: 0;
  padding: 0;
}

.roa-tas-cl .roa-tas-cl__item + .roa-tas-cl__item {
  border-top: 1px solid var(--roa-cl-divider);
}

/* Image, text, chevron. The whole row is the link. */
.roa-tas-cl .roa-tas-cl__link,
.roa-tas-cl .roa-tas-cl__link:visited,
.roa-tas-cl .roa-tas-cl__link:hover {
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem 0;
  text-decoration: none;
}

.roa-tas-cl .roa-tas-cl__link:focus-visible {
  outline: 2px solid var(--roa-cl-icon);
  outline-offset: 2px;
  border-radius: 4px;
}

.roa-tas-cl .roa-tas-cl__img {
  display: block;
  width: 45px;
  height: 45px;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  border-radius: 5px;
}

/* No featured image: keep the column so titles still line up. */
.roa-tas-cl .roa-tas-cl__img.is-empty {
  background: color-mix(in srgb, var(--roa-cl-name) 8%, transparent);
}

/*
Company logos (Term List): fitted, not cropped - a logo cut down to a square is no longer the
logo. On a light tile, because a dark logo on a transparent PNG vanishes into the dark panel.
*/
.roa-tas-cl .roa-tas-cl__img.is-logo {
  box-sizing: border-box;
  padding: 4px;
  object-fit: contain;
  background: var(--roa-cl-logo-bg);
}

.roa-tas-cl .roa-tas-cl__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.roa-tas-cl .roa-tas-cl__name {
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--roa-cl-name);
  overflow-wrap: anywhere;
}

.roa-tas-cl .roa-tas-cl__type {
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--roa-cl-type);
}

/*
Next intake (qualifications): small and grey like the type line, a touch heavier so a date
still stands out from its "Enquire now" stand-in.
*/
.roa-tas-cl .roa-tas-cl__next {
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--roa-cl-next);
}

.roa-tas-cl .roa-tas-cl__next.is-none {
  font-weight: 400;
  color: var(--roa-cl-type);
}

.roa-tas-cl .roa-tas-cl__link:hover .roa-tas-cl__name {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.roa-tas-cl .roa-tas-cl__empty {
  margin: 0;
  padding: 1rem;
  border-radius: var(--roa-cl-list-radius);
  background: var(--roa-cl-list-bg);
  color: var(--roa-cl-type);
}

/* ------------------------------------------------------------------ icons */

/*
Elementor prints a font icon as <i> or, with its inline-SVG experiment on, as <svg>; the rules
cover both. With no icon set, .is-drawn draws a plain CSS chevron / caret instead.
*/
.roa-tas-cl .roa-tas-cl__chev,
.roa-tas-cl .roa-tas-cl__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--roa-cl-icon);
}

.roa-tas-cl .roa-tas-cl__chev {
  font-size: 1rem;
}

.roa-tas-cl .roa-tas-cl__caret {
  font-size: 0.9rem;
}

.roa-tas-cl .roa-tas-cl__chev svg,
.roa-tas-cl .roa-tas-cl__caret svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.roa-tas-cl .roa-tas-cl__chev.is-drawn::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-top: 0.18em solid currentColor;
  border-right: 0.18em solid currentColor;
  transform: translateX(-0.15em) rotate(45deg);
}

.roa-tas-cl .roa-tas-cl__caret.is-drawn::before {
  content: "";
  border-left: 0.4em solid currentColor;
  border-top: 0.3em solid transparent;
  border-bottom: 0.3em solid transparent;
}

/* ------------------------------------------------------------------ editor */

/* Stands in for the panel in the Elementor editor when there is nothing to show. */
.roa-tas-cl-notice {
  padding: 1rem 1.25rem;
  border: 1px dashed #93a4a8;
  border-radius: 8px;
  background: #f4f6f6;
  color: #3c4b4e;
  font-size: 0.9rem;
}