/*
Single course page: structural only.

Same contract as archive.css - the theme owns colour and type, this owns layout. The one
deliberate exception is the facts labels, sized here because their scale is the whole point of
that block now that it carries no heading. Borders and muted text are expressed as color-mix
and opacity over currentColor, so the sheet follows whatever palette the theme or Elementor
sets rather than fighting it.

Scoped to body.tas-course, added by ROA_TAS_Single. The classed blocks below are baked into
post_content by ROA_TAS_Content at sync time; the unclassed prose around them is Parsedown's.
*/

/* ------------------------------------------------------------------ facts */

/*
Duration / Delivery / Location / Cost, sitting directly under the description with no heading
of its own - the labels carry that weight instead, which is why they are set large and solid
rather than muted.

A grid rather than a floated dl, so a long value wraps under itself instead of under its own
label. The rule between the columns is the dt's right border: grid items stretch to the row
height by default, so each border runs the full height of its row and consecutive rows meet,
giving one unbroken line even where a value runs to four lines and its label to one. That only
holds while row-gap is 0 - row spacing is padding on the cells, not gap. Reintroduce a gap here
and the line breaks into dashes.
*/
.tas-course .roa-tas-facts {
  display: grid;
  grid-template-columns: minmax(0, 14rem) 1fr;
  gap: 0;
  margin: 0 0 2rem;
}

.tas-course .roa-tas-facts dt {
  font-size: 1.75em;
  font-weight: 700;
  line-height: 1.15;
  text-align: right;
  padding: 0.35rem 1.75rem 1.5rem 0;
  border-right: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

.tas-course .roa-tas-facts dd {
  margin: 0;
  padding: 0.5rem 0 1.5rem 1.75rem;
}

/*
One column under about 48rem, where a 14rem label column plus a value stops fitting side by
side. The rule goes with the column it divided, and the labels come back down to prose scale.
*/
@media (max-width: 48rem) {
  .tas-course .roa-tas-facts {
    grid-template-columns: 1fr;
  }

  .tas-course .roa-tas-facts dt {
    font-size: 1.25em;
    text-align: left;
    padding: 0 0 0.15rem;
    border-right: 0;
  }

  .tas-course .roa-tas-facts dd {
    padding: 0 0 1rem;
  }
}

/* ------------------------------------------------------------------ delivered by */

/*
A partner RTO's logo, twice on a partner course: under the featured image with "Delivered by"
over it (--media, ROA_TAS_Single::delivered_by_html()), and as the value of the Delivered by
row at the foot of the facts list (--facts, the dd itself - inject_delivered_by()).

The logo is capped on both axes because the logos are very different shapes - Interlink is
about 4.4:1, Competency Training about 1.9:1 - and one cap alone makes one of them either tiny
or tall. With width and height auto the browser scales to whichever cap bites first and keeps
the aspect ratio. 17rem is the image column's width, so under the image the wide logo runs the
full width of the picture above it.
*/
.tas-course .roa-tas-delivered {
  text-align: left;
}

.tas-course .roa-tas-delivered--media {
  margin-top: 1.25rem;
}

.tas-course .roa-tas-delivered .roa-tas-delivered__label {
  margin: 0 0 0.4rem;
  font-size: 0.9em;
  font-weight: 600;
  line-height: 1.2;
}

.tas-course .roa-tas-delivered .roa-tas-delivered__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 17rem);
  max-height: 7rem;
}

/* The partner's RTO code under the logo in the Delivered by row. */
.tas-course .roa-tas-delivered .roa-tas-delivered__rto {
  margin-top: 0.5rem;
}

/* ------------------------------------------------------------------ units */

.tas-course .roa-tas-units {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: 0.95em;
}

.tas-course .roa-tas-units th,
.tas-course .roa-tas-units td {
  text-align: left;
  padding: 0.55rem 0.75rem 0.55rem 0;
  vertical-align: top;
  border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.tas-course .roa-tas-units thead th {
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  border-bottom-width: 2px;
}

/*
Unit codes are the reason this table exists - people arrive looking for the code on their
ticket - so they get a column that never wraps mid-code and a figure width that keeps them
in a readable stack.
*/
.tas-course .roa-tas-units .roa-unit-code {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding-right: 1.25rem;
}

.tas-course .roa-tas-units .roa-unit-title {
  width: 100%;
}

.tas-course .roa-tas-units tbody tr:last-child th,
.tas-course .roa-tas-units tbody tr:last-child td {
  border-bottom: 0;
}

/* ------------------------------------------------------------------ prose */

/*
The rhythm of the generated body - headings, paragraphs, the prerequisites list.

These have no classes of their own: ROA_TAS_Content emits a bare <h2> per section and lets
Parsedown produce the rest. Rather than rebuild the catalogue to add classes, the rules below
are scoped to the Elementor Post Content widget, which is where that content lands.

If the single template ever stops using that widget - a JetEngine listing, a shortcode, a
different builder - this block stops applying and nothing else breaks. Swap the selector for
whatever wraps the content then; that is the only line that would need to change.
*/
.tas-course .elementor-widget-theme-post-content h2 {
  margin: 2.25rem 0 1.3rem;padding-bottom:0.7rem;font-size: 2em;border-bottom: 1px solid #ccc;

}

.tas-course .elementor-widget-theme-post-content > .elementor-widget-container > *:first-child {
  margin-top: 0;
}

.tas-course .elementor-widget-theme-post-content p,
.tas-course .elementor-widget-theme-post-content ul,
.tas-course .elementor-widget-theme-post-content ol {
  margin: 0 0 1rem;
}

.tas-course .elementor-widget-theme-post-content li + li {
  margin-top: 0.25rem;
}

/*
Prose is easier to read at a bounded measure, but the units table and the facts grid are
tabular and want the full column. Only the running text is capped.
*/
.tas-course .elementor-widget-theme-post-content p {
/*  max-width: 68ch;*/
}

/* ------------------------------------------------------------------ employer callout */

/*
"Attention employers" panel, injected under the facts list by ROA_TAS_Single::inject_callout().

The one block in this sheet that owns its colour: it is a fixed brand panel, not prose that
should follow the theme. The colours are custom properties so a restyle is one place.

Selectors are three classes deep on purpose. The prose rules above style every p inside the
Post Content widget at (0,2,1), and the callout's paragraphs must not inherit their margins
whichever order the rules end up in.

Two columns: text, and an action column that runs the full height of the panel with the arrow
hanging from its top edge and the button at its foot. The action column's negative top margin
cancels the panel padding, which is what lets the arrow touch the top edge.
*/
.tas-course .roa-tas-callout {
  --callout-bg: #01323d;
  --callout-accent: #f3af34;
  --callout-text: #fff;
  --callout-pad: 2.5rem;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  margin: 0 0 2rem;
  padding: var(--callout-pad);
  border-radius: 14px;
  background: var(--callout-bg);
  color: var(--callout-text);
}

.tas-course .roa-tas-callout .roa-tas-callout__eyebrow,
.tas-course .roa-tas-callout .roa-tas-callout__title,
.tas-course .roa-tas-callout .roa-tas-callout__sub {
  margin: 0;
  max-width: none;
}

.tas-course .roa-tas-callout .roa-tas-callout__eyebrow {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.tas-course .roa-tas-callout .roa-tas-callout__title {
  margin: 0.4rem 0 0.5rem;
  font-size: clamp(1.625rem, 1.1rem + 1.5vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--callout-accent);
}

.tas-course .roa-tas-callout .roa-tas-callout__sub {
  font-size: 1.15rem;
  line-height: 1.3;
}

.tas-course .roa-tas-callout .roa-tas-callout__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: calc(-1 * var(--callout-pad));
}

.tas-course .roa-tas-callout .roa-tas-callout__arrow {
  display: block;
  width: 56px;
  height: auto;
}

.tas-course .roa-tas-callout .roa-tas-callout__button,
.tas-course .roa-tas-callout .roa-tas-callout__button:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  background: var(--callout-accent);
  color: var(--callout-bg);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.15s ease;
}

.tas-course .roa-tas-callout .roa-tas-callout__button:hover,
.tas-course .roa-tas-callout .roa-tas-callout__button:focus-visible {
  color: var(--callout-bg);
  filter: brightness(1.08);
}

.tas-course .roa-tas-callout .roa-tas-callout__button:focus-visible {
  outline: 2px solid var(--callout-text);
  outline-offset: 3px;
}

/* The white caret, drawn rather than an icon font so nothing else has to be loaded. */
.tas-course .roa-tas-callout .roa-tas-callout__button::after {
  content: "";
  border-left: 0.4em solid var(--callout-text);
  border-top: 0.3em solid transparent;
  border-bottom: 0.3em solid transparent;
}

/*
Under 991px, matching the old site: the arrow goes (it points at a button that is no longer
beside it) and everything stacks into one column.
*/
@media (max-width: 991px) {
  .tas-course .roa-tas-callout {
    --callout-pad: 1.75rem;
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .tas-course .roa-tas-callout .roa-tas-callout__action {
    align-items: flex-start;
    margin-top: 0;
  }

  .tas-course .roa-tas-callout .roa-tas-callout__arrow {
    display: none;
  }
}

/* Phone: full-width button, as the old site's mobile justify did. */
@media (max-width: 767px) {
  .tas-course .roa-tas-callout .roa-tas-callout__action {
    align-items: stretch;
  }
}

/*
The callout as an Elementor template (ROA_TAS_Single::CALLOUT_SHORTCODE). The template does its
own styling; this only spaces it like the built-in panel, and stops the prose rule above
adding a margin under its last paragraph that the template did not ask for.
*/
.tas-course .roa-tas-callout-template {
  display: block;
  margin: 0 0 2rem;
}

.tas-course .elementor-widget-theme-post-content .roa-tas-callout-template p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ intro */

/*
Featured image beside the description and Book now button - ROA_TAS_Single::
inject_featured_image(). Only present when the course has an image.

Square by aspect-ratio + object-fit, whatever shape TAS supplied. The body's last child (the
button wrap, or the description's last p) drops its bottom margin so the block's own margin is
the only gap above the facts list; three classes deep to beat the prose p rule at (0,2,1).
*/
.tas-course .roa-tas-intro {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  margin: 0 0 3rem;
}

.tas-course .roa-tas-intro .roa-tas-intro__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 24px;
}

.tas-course .roa-tas-intro .roa-tas-intro__body > :last-child {
  margin-bottom: 0;
}

/* Stacked on phones, image first and capped so it does not fill the screen. */
@media (max-width: 767px) {
  .tas-course .roa-tas-intro {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  .tas-course .roa-tas-intro .roa-tas-intro__media {
    max-width: 17rem;
  }
}

/*
Enrol button - ROA_TAS_Single::inject_enrol_button(), a jump link down to the dates table,
directly above the facts list.

Same pill and palette as the callout's button, but a downward caret, since it points further
down the page rather than off it. Only rendered when the course has dates, so no hidden state.
*/
.tas-course .roa-tas-enrol-wrap {
  margin: 0 0 2rem;
}

.tas-course .roa-tas-enrol,
.tas-course .roa-tas-enrol:visited {
  --enrol-bg: #f3af34;
  --enrol-text: #01323d;
  --enrol-caret: #fff;

  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  background: var(--enrol-bg);
  color: var(--enrol-text);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.15s ease;
}

.tas-course .roa-tas-enrol:hover,
.tas-course .roa-tas-enrol:focus-visible {
  color: var(--enrol-text);
  filter: brightness(1.08);
}

.tas-course .roa-tas-enrol:focus-visible {
  outline: 2px solid var(--enrol-text);
  outline-offset: 3px;
}

.tas-course .roa-tas-enrol::after {
  content: "";
  border-top: 0.4em solid var(--enrol-caret);
  border-left: 0.3em solid transparent;
  border-right: 0.3em solid transparent;
}

/* A custom button leaves the page rather than going down it, so its caret points right. */
.tas-course .roa-tas-enrol--away::after {
  border-left: 0.4em solid var(--enrol-caret);
  border-top: 0.3em solid transparent;
  border-bottom: 0.3em solid transparent;
  border-right: 0;
}

/* Glide down to the dates rather than jump. #course-dates carries its own scroll margin. */
@media (prefers-reduced-motion: no-preference) {
  html:has(body.tas-course) {
    scroll-behavior: smooth;
  }
}

/* ------------------------------------------------------------------ action panel */

/*
What to do next, at the foot of a course with no dates to pick from - Contact us, or a custom
button with an optional partner line. ROA_TAS_Single::inject_action().

Owns its colour, like the callout, and takes the same palette - but light rather than the
callout's dark panel, so two promotions on one page do not read as the same block twice. The
button is the enrol pill with a right-pointing caret, since it leaves the page.

The message sits beside the button and wraps above it when there is no room. A RelyOn custom
button has no message, so the button is all there is and sits at the start.

Three classes deep on the p for the same reason as the callout: the prose p rule is (0,2,1).
*/
.tas-course .roa-tas-action {
  --action-bg: color-mix(in srgb, #f3af34 14%, #fff);
  --action-accent: #f3af34;
  --action-text: #01323d;
  --action-caret: #fff;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin: 3rem 0 2rem;
  padding: 2.25rem 2.5rem;
  border-left: 6px solid var(--action-accent);
  border-radius: 14px;
  background: var(--action-bg);
  color: var(--action-text);
}

.tas-course .roa-tas-action .roa-tas-action__message {
  flex: 1 1 20rem;
  margin: 0;
  max-width: none;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
}

.tas-course .roa-tas-action .roa-tas-action__button,
.tas-course .roa-tas-action .roa-tas-action__button:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95rem 1.9rem;
  border-radius: 999px;
  background: var(--action-accent);
  color: var(--action-text);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.15s ease;
}

.tas-course .roa-tas-action .roa-tas-action__button:hover,
.tas-course .roa-tas-action .roa-tas-action__button:focus-visible {
  color: var(--action-text);
  filter: brightness(1.08);
}

.tas-course .roa-tas-action .roa-tas-action__button:focus-visible {
  outline: 2px solid var(--action-text);
  outline-offset: 3px;
}

.tas-course .roa-tas-action .roa-tas-action__button::after {
  content: "";
  border-left: 0.4em solid var(--action-caret);
  border-top: 0.3em solid transparent;
  border-bottom: 0.3em solid transparent;
}

/* Phone: stacked, full-width button, as the callout does. */
@media (max-width: 767px) {
  .tas-course .roa-tas-action {
    flex-direction: column;
    align-items: stretch;
    padding: 1.75rem;
  }

  .tas-course .roa-tas-action .roa-tas-action__message {
    flex-basis: auto;
  }
}