/* juvare27-modern.css - build 2026-09-23b */
/* ============================================================================
 * Juvare Elevate 2027 — Custom Bootstrap CSS
 * Brand: "MODERN - Juvare Elevate 2027 Brand"  (EventsAir Modern theme)
 * Site:  ACTIVE - 2027 Juvare Reg
 *
 * WHY THIS FILE EXISTS
 * The Modern theme emits only a handful of brand custom properties
 * (--page-background-color, --primary-color, --font-color-h1..h6,
 * --form-max-width and the font stacks). The Form Background, Input
 * Background, Input Border, Input Text and Button swatches in
 * Brand > Customize Style produce no CSS at all. Anything beyond heading
 * colors therefore has to live here.
 *
 * REPLACES the previous 1.4KB version, which caused three of the four
 * reported problems:
 *   - "#theme-modern .navbar { width:104% }"  -> header band sized off the
 *     wrong parent (832px in a 1200px viewport), leaving a gutter.
 *   - ".cstField:has(input[type=checkbox]) { float:left; width:50% }" ->
 *     crushed every interest-list row into a 367px column, which is why the
 *     session titles wrapped to 4-5 lines beside an orphaned checkbox.
 *   - "form.form-horizontal { display:block !important }" -> disabled the
 *     theme's own flex layout on every form component on the site.
 * The two-up checkbox layout those rules existed to produce is intentionally
 * gone; the interest list is now full-width cards per the approved design.
 * ========================================================================= */

:root {
  /* Palette supplied by Juvare (design annotations, Sep 2026) */
  --juv-page-bg:      #1D2125;
  --juv-container-bg: #101214;
  --juv-subhead:      #CD42FF;
  --juv-text:         #DEE4EA;
  --juv-field-bg:     #1D2125;
  --juv-field-border: #454F59;

  /* Card tones, sampled off the approved comp (Course_selection_redesign.png).
     Both are Juvare's own values reused: the header zone of a course card is
     the lighter #1D2125 and the disclosure strip and expanded body drop to
     #101214, with #454F59 — Juvare's field-border value — as the card edge.
     Sampling the comp returned #1D2125, #101214, #454F59 and #CD42FF exactly
     as written in the spec, which is how we know the file carries no colour
     profile shift and the one unlisted value below can be trusted. */
  --juv-card-head:    #1D2125;
  --juv-card-body:    #101214;
  --juv-card-border:  #454F59;

  /* Supporting tones derived from the above (not in Juvare's list) */
  --juv-text-muted:   #9BA5B0;
  --juv-hairline:     #2A2F35;

  /* The one value Juvare never wrote down. Sampled from the comp, where it is
     the price colour on each course card. */
  --juv-price:        #AEED6B;

  --juv-radius:       12px;
}

/* ===========================================================================
 * 1. PAGE, CONTAINER AND TYPE
 * The theme hard-codes a light form surface and near-black text; neither is
 * reachable from the brand panel, so both are set here.
 * ======================================================================== */

body,
#theme-modern {
  background-color: var(--juv-page-bg);
  color: var(--juv-text);
}

/* The form surface ("container" in Juvare's annotations).
   The theme paints this on .modern-page-content as rgba(255,255,255,0.9) —
   a translucent white, which is why the container reads light grey over the
   dark page. .modern-panel itself is transparent, so styling that does
   nothing. This is the element to set.

   The theme also draws a 1px white stroke with a 24px radius around this same
   container on every step. Against the near-black page that hairline was the
   brightest edge on the screen, which is what Juvare's designer meant by "the
   white stands out too much". Moved to the field-border grey so the container
   edge reads the same weight as the edge of an input. */
#theme-modern .modern-page-content {
  background-color: var(--juv-container-bg) !important;
  border-color: var(--juv-field-border) !important;
  color: var(--juv-text);
}

#theme-modern .modern-panel {
  background-color: transparent;
  color: var(--juv-text);
}

/* Content images inside a form step — the "27" rules that divide the page into
   sections. The asset is 650px wide and the theme only caps it at max-width,
   so it rendered at its natural size inside a 734px column and stopped short
   of the headings and fields on either side of it. Stretching it to the column
   width lines it up with everything else.
   Deliberately excludes .header-image (the banner, which section 2 takes full
   bleed) and .center-block (the footer logo, which is meant to sit at its own
   size). Anything else dropped into a step as an image component will be
   stretched to the column too, which is right for a divider and would be wrong
   for, say, a speaker headshot — if one is ever added, give it a class and
   exclude it here. */
#theme-modern .modern-component img.img-responsive:not(.header-image):not(.center-block) {
  width: 100%;
  height: auto;
}

/* Body copy, field labels and helper text.
   .theme-modern-label is the Modern theme's label class and renders #344054;
   it is what makes every field label look near-black on the dark surface. */
#theme-modern .modern-panel,
#theme-modern .control-label,
#theme-modern .theme-modern-label,
#theme-modern .modern-input-label-container,
#theme-modern label,
#theme-modern p,
#theme-modern li,
#theme-modern .help-block,
#theme-modern i,
#theme-modern em,
#theme-modern b,
#theme-modern strong,
#theme-modern small,
#theme-modern td,
#theme-modern th,
#theme-modern dt,
#theme-modern dd,
#theme-modern blockquote {
  color: var(--juv-text) !important;
}

/* Free-text HTML blocks carry the class "no-theme", which opts them out of
   theme styling and leaves them black on black here. Every one of them needs
   the colour forced, not just the ones attached to a card. */
#theme-modern .modern-html-container,
#theme-modern .modern-html-container p,
#theme-modern .modern-html-container li,
#theme-modern .modern-html-container div,
#theme-modern .modern-html-container span,
#theme-modern .modern-html-container strong,
#theme-modern .modern-html-container em,
#theme-modern .no-theme,
#theme-modern .no-theme p,
#theme-modern .no-theme li,
#theme-modern .no-theme span,
#theme-modern .no-theme strong {
  color: var(--juv-text) !important;
}

#theme-modern .modern-html-container a {
  color: var(--juv-subhead) !important;
}

/* h1-h4 take the brand subhead colour. h5/h6 are used on this site as body
   copy (the italic notes under the ticket headings), not as headings, so they
   take the text colour instead. */
#theme-modern h1,
#theme-modern h2,
#theme-modern h3,
#theme-modern h4 {
  color: var(--juv-subhead) !important;
}

#theme-modern h5,
#theme-modern h6 {
  color: var(--juv-text) !important;
}

/* A heading whose text was bolded in the editor comes through as
   <h2><b>JUVARE LAB</b></h2>. The <b> rule above would otherwise repaint it
   with the body colour, which is why that one section header on the summary
   page lost its styling while every other one kept it.
   <font> is in the list because recolouring a heading in the editor wraps the
   text a second time — <h2><b><font color="#893BB1">JUVARE LAB</font></b></h2>
   — and the colour attribute beats anything inherited, so without this the
   <b> is the only part that follows the heading colour and the text itself
   does not. See the note on the summary heading in section 5 for why that
   matters more than it sounds. */
#theme-modern h1 b, #theme-modern h1 strong, #theme-modern h1 font,
#theme-modern h2 b, #theme-modern h2 strong, #theme-modern h2 font,
#theme-modern h3 b, #theme-modern h3 strong, #theme-modern h3 font,
#theme-modern h4 b, #theme-modern h4 strong, #theme-modern h4 font,
#theme-modern h5 b, #theme-modern h5 strong, #theme-modern h5 font,
#theme-modern h6 b, #theme-modern h6 strong, #theme-modern h6 font {
  color: inherit !important;
}

/* Form controls. The theme applies "color:#000 !important" to inputs, so the
   override has to match that weight. */
#theme-modern input[type="text"],
#theme-modern input[type="email"],
#theme-modern input[type="tel"],
#theme-modern input[type="number"],
#theme-modern input[type="password"],
#theme-modern textarea,
#theme-modern select,
#theme-modern .form-control {
  background-color: var(--juv-field-bg) !important;
  border: 1px solid var(--juv-field-border) !important;
  color: var(--juv-text) !important;
}

#theme-modern .form-control::placeholder {
  color: var(--juv-text-muted) !important;
}

#theme-modern .form-control:focus {
  border-color: var(--juv-subhead) !important;
  box-shadow: 0 0 0 2px rgba(205, 66, 255, 0.25) !important;
}

/* Native select arrow and autofill both revert to light styling otherwise */
#theme-modern select option {
  background-color: var(--juv-field-bg);
  color: var(--juv-text);
}

/* The searchable selects (Slim Select, class ss-*) replace the native <select>
   with div.ss-main, and only some of them carry .form-control: on page 2 the
   entree dropdown does and the other four carry .select2-container instead.
   That is the whole of "the white dropdowns stand out too much" — four of the
   five were never reached by the .form-control rule above and kept the theme's
   white fill, #D0D5DD border and #101828 text. Styling .ss-main directly
   covers every one of them regardless of which classes it happens to carry. */
#theme-modern .ss-main {
  background-color: var(--juv-field-bg) !important;
  border: 1px solid var(--juv-field-border) !important;
  color: var(--juv-text) !important;
}

#theme-modern .ss-main .ss-values,
#theme-modern .ss-main .ss-single {
  color: var(--juv-text) !important;
}

/* The chevron inside the closed control is an SVG path that the theme fills
   black; on the dark field it disappeared entirely. */
#theme-modern .ss-main .ss-arrow path {
  stroke: var(--juv-text) !important;
  fill: none !important;
}

/* The dropdown panel that opens over the page is a separate element again and
   stays white with #4D4D4D options. */
#theme-modern .ss-content {
  background-color: var(--juv-field-bg) !important;
  border: 1px solid var(--juv-field-border) !important;
}

#theme-modern .ss-content .ss-list .ss-option,
#theme-modern .ss-content .ss-search input {
  background-color: var(--juv-field-bg) !important;
  color: var(--juv-text) !important;
}

#theme-modern .ss-content .ss-list .ss-option:hover,
#theme-modern .ss-content .ss-list .ss-option.ss-highlighted {
  background-color: var(--juv-subhead) !important;
  color: #101214 !important;
}

#theme-modern .ss-content .ss-list .ss-option.ss-disabled {
  color: var(--juv-text-muted) !important;
}

#theme-modern input:-webkit-autofill,
#theme-modern input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--juv-text);
  -webkit-box-shadow: 0 0 0 1000px var(--juv-field-bg) inset;
}

/* ===========================================================================
 * 2. HEADER  (replaces the 104% navbar hack)
 * The banner image is set to its natural size because "Automatically resize
 * to 1000 wide" is unchecked on the brand's Header Image. Let the bar span
 * the viewport and let the image scale down inside it.
 * ======================================================================== */

#theme-modern .navbar {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--juv-page-bg);
  border: 0;
  border-radius: 0;
}

/* The banner itself is NOT in .navbar — it is img.header-image inside
   header.brand-header, and the theme gives it object-fit:cover in a
   fixed-height box. With a 1632x451 file (aspect 3.62) in a box rendering at
   aspect 4.04, roughly 10% is cropped off the top and bottom, and the amount
   cropped changes with the viewport. That is exactly what Juvare's designer
   reported: "the image gets stretched quite a bit on different browser sizes,
   which forces it to actually zoom in and out."
   Letting the height follow the image removes the crop entirely. */
/* The theme breaks the header out of its 800px parent with a hardcoded
   negative margin — "margin: 0 -675px" — which is half of one particular
   viewport width. At any other width the arithmetic stops centring and the
   banner sits left, which is the off-centre header. Replaced with the standard
   full-bleed, which is measured against the viewport and so self-centres.
   Verified at 900px and 1350px: zero gap on both sides at both. */
#theme-modern .brand-header {
  position: relative;
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

#theme-modern .brand-header,
#theme-modern .brand-header > .header {
  height: auto !important;
  background-color: var(--juv-page-bg);
}

#theme-modern .header-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto;
}

/* ===========================================================================
 * 3. TICKET AND TRAINING CARDS  (page 1)
 *
 * EventsAir renders each item as two stacked siblings:
 *   div.fee-option-card                     <- native row: checkbox, title, amount
 *   div.row.no-theme.modern-html-container  <- the pasted description HTML
 *
 * Those two are welded into one card here. The description markup is the
 * client's to edit, so NOTHING below assumes a field is present, non-empty, or
 * in a particular order. Every part is optional and every row wraps. A course
 * with no instructor, a title twice as long, or an extra line someone adds next
 * month all have to keep working without a CSS change.
 *
 * Tones are taken from Juvare's own palette, sampled off the approved comp:
 * the header zone (checkbox, title, price, date, time) is the lighter #1D2125,
 * and the disclosure strip and expanded body drop to #101214. Card borders use
 * #454F59, the value Juvare listed for field borders.
 *
 * Each description block also ships its own <style> tag using a per-item class
 * prefix (.ct-, .edge-, .we-, .cores-, .emtrack-, .emres-, .eics-, .hsuite-).
 * Those cannot be deleted from here, so every rule below is written on
 * [class*="..."] substring matchers at #theme-modern (id) specificity, which
 * outranks them regardless of prefix.
 * ======================================================================== */

/* --- the welded card ---------------------------------------------------- */

/* The theme's .modern-spacing-* classes put a 24px margin under every
   component. That margin is what separates the two halves of a card, so it has
   to be beaten explicitly, not just set. */
#theme-modern .fee-option-card {
  background-color: var(--juv-card-head) !important;
  color: var(--juv-text) !important;
  border: 1px solid var(--juv-card-border);
  border-bottom: 0;
  border-radius: var(--juv-radius) var(--juv-radius) 0 0;
  margin-bottom: 0 !important;
  padding: 12px 18px;
}

/* A card with no description block keeps all four corners */
#theme-modern .fee-option-card:not(:has(+ .modern-html-container)) {
  border-bottom: 1px solid var(--juv-card-border);
  border-radius: var(--juv-radius);
  margin-bottom: 14px;
}

/* Header tone, not body tone: when the disclosure is closed there is nothing
   below the summary, and a body-toned block leaves a stray darker strip along
   the bottom of every card. The darker tone belongs to the expanded body only. */
#theme-modern .fee-option-card + .modern-html-container {
  background-color: var(--juv-card-head) !important;
  color: var(--juv-text) !important;
  border: 1px solid var(--juv-card-border);
  border-top: 0;
  border-radius: 0 0 var(--juv-radius) var(--juv-radius);
  margin: 0 0 14px !important;
  padding: 0;
  overflow: hidden;
}

/* Strip the fills and frames the pasted markup brings with it. Without this
   the card shows a second, nested box inside itself. */
#theme-modern .modern-html-container *:not(input):not(select):not(textarea):not(button) {
  background-color: transparent !important;
  background-image: none !important;
}

/* Several items also set an explicit max-width on their collapsible (700px in
   the ones checked), which makes the lower half of the card narrower than its
   header. Cleared here so the card is one width regardless of what any item's
   own stylesheet asks for. */
#theme-modern .modern-html-container [class*="-collapsible"],
#theme-modern .modern-html-container [class*="-content"],
#theme-modern .modern-html-container details,
#theme-modern .modern-html-container > div {
  border: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  max-width: none !important;
  width: auto !important;
}

#theme-modern .modern-html-container *:not(a):not(input):not(select):not(textarea):not(button) {
  color: var(--juv-text) !important;
}

/* --- header zone: title and price --------------------------------------- */

#theme-modern .fee-option-details-header {
  color: var(--juv-text) !important;
  font-weight: 700;
}

/* Written at .fee-option-card .fee-option-header, not .fee-option-header, and
   that extra class is the whole point. EventsAir's own sheet carries
   "#theme-modern .fee-option .fee-option-header { align-items: center }", and
   .fee-option sits on the card alongside .fee-option-card, so the one-class
   version of this rule lost the cascade and the theme kept centring.
   It only showed on the last two training tickets ("eICS for Command Staff…"
   and "Coordinated Response Using Juvare HealthSuite…") because those are the
   only titles long enough to wrap, and a centred checkbox against a one-line
   title is indistinguishable from a top-aligned one. Against two lines it
   drops to the middle and reads as misaligned, which is what Amarilys saw.
   Top alignment is also what EventsAir itself switches to under 480px. */
#theme-modern .fee-option-card .fee-option-header {
  align-items: flex-start;
  gap: 12px;
}

#theme-modern .fee-option-details {
  flex: 1 1 auto;
  min-width: 0;
}

/* Hide the AMOUNT caption and the whole Total column; keep the figure itself,
   which EventsAir already renders on the title row where the design wants it.
   No decimal-places setting exists, so this reads $1,500.00. */
#theme-modern .fee-option-card .modern-feetype-amount-label,
#theme-modern .fee-option-card .col-xs-6:not(.modern-feetype-amount-container) {
  display: none !important;
}

#theme-modern .fee-option-card .modern-feetype-amount-container {
  width: auto;
  float: none;
  margin-left: auto;
  text-align: right;
  padding: 0;
}

#theme-modern .fee-option-card .fee-amount {
  color: var(--juv-price) !important;
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
}

#theme-modern .fee-option-card .fee-amount::before {
  content: "$";
}

/* The cents are trimmed by script, not here — see
 * juvare27-price-format.md, which holds the snippet and where it is pasted.
 *
 * Why it is not done in CSS: EventsAir emits the amount as a single text node,
 * <span class="fee-amount" data-amount="1500.00">1,500.00</span>, and there is
 * no decimal-places setting on the fee type. CSS cannot trim characters from a
 * text node or compute on an attribute, so the only CSS route is to hide the
 * real figure and print a replacement through content — and content cannot be
 * computed, which means naming every price in the stylesheet and keeping that
 * list in step with the planner forever. An earlier build did exactly that.
 * The script does the same job for any amount, including ones nobody has
 * thought of yet, and gets prices with real cents right, which the list could
 * not.
 *
 * The division of labour matters for the failure mode. The script writes only
 * the digits; the "$" above stays in CSS. So if the script is ever removed,
 * blocked or broken, the figure falls back to the platform's own "$1,500.00" —
 * the formatting Juvare had before, never a blank and never a bare number.
 */

/* --- checkbox ------------------------------------------------------------ */

/* The theme hides the real input and paints span.modern-checkbox-box in its
   place, so that span is what has to be styled. Restyling the input itself
   un-hides it and you get two controls side by side.
   Scoped site-wide, not just to course cards: the same control appears on the
   solutions list, the consent rows and the session list, and was left white
   on white everywhere else. */
#theme-modern .modern-checkbox-box,
#theme-modern [class*="checkbox-box"],
#theme-modern [class*="radio-box"] {
  background-color: var(--juv-card-body) !important;
  border: 1px solid var(--juv-card-border) !important;
}

/* The tick is an SVG child that inherits colour, so on the purple fill it was
   rendering near-white at about 2.6:1 — the least legible thing on the page.
   Flipping it to the card tone takes it past 7:1 and keeps Juvare's purple. */
#theme-modern input:checked + .modern-checkbox-box,
#theme-modern input:checked + [class*="checkbox-box"],
#theme-modern input:checked + [class*="radio-box"] {
  background-color: var(--juv-subhead) !important;
  border-color: var(--juv-subhead) !important;
  color: var(--juv-card-body) !important;
}

#theme-modern input:checked + [class*="-box"] svg,
#theme-modern input:checked + [class*="-box"] svg path {
  color: var(--juv-card-body) !important;
  stroke: var(--juv-card-body) !important;
}

#theme-modern input:focus-visible + [class*="-box"] {
  outline: 2px solid var(--juv-subhead);
  outline-offset: 2px;
}

/* --- the disclosure row --------------------------------------------------
 * The summary is a wrapping flex row. The date/time line takes a full row of
 * its own and carries the header tone so it reads as part of the heading. Any
 * other field the client adds falls onto its own row rather than competing for
 * space. The chevron is a flex item, never positioned over the content, so it
 * cannot collide with text however long that text runs.
 * ---------------------------------------------------------------------- */

/* The summary carries the header tone edge to edge, so the card reads as one
   heading block that happens to continue past the component boundary. An
   earlier version bled a negative-margin band out of the date line instead;
   that could never reach the card edge, because the band is a flex item and
   the row's column gap and the chevron's slot both eat into its width. */
#theme-modern .modern-html-container summary {
  display: block !important;
  position: relative;
  padding: 0 42px 12px 18px !important;
  margin: 0 !important;
  background-color: var(--juv-card-head) !important;
  cursor: pointer;
  list-style: none;
  border: 0 !important;
}

#theme-modern .modern-html-container summary::-webkit-details-marker,
#theme-modern .modern-html-container summary::marker {
  display: none;
  content: "";
}

/* Every field in the summary is a plain block row. Nothing competes for width,
   so no field can squeeze another, however long its content runs. */
#theme-modern .modern-html-container [class*="-summary-title"] {
  display: block;
  color: var(--juv-text) !important;
  font-weight: 600;
  margin: 0;
  padding: 0 0 2px;
  background: transparent !important;
}

/* Any other descriptive field the markup carries: its own row, muted. */
#theme-modern .modern-html-container [class*="-summary-meta"],
#theme-modern .modern-html-container [class*="-summary-prereq"],
#theme-modern .modern-html-container [class*="-summary-instructor"] {
  display: block;
  color: var(--juv-text-muted) !important;
  margin: 0;
  padding: 0 0 2px;
  background: transparent !important;
}

/* The price is already on the title row; a second copy is what Juvare asked to
   remove. Hidden rather than deleted so the markup stays the client's. */
#theme-modern .modern-html-container [class*="-summary-price"] {
  display: none !important;
}

/* The expand affordance sits with the details rather than in the heading, so
   it takes the body tone and bleeds to the card edges out of the summary's own
   padding.
   position:relative because the chevron is positioned against this strip
   rather than against the summary — see the chevron rule below.
   14px of vertical padding rather than 10px: Juvare asked for more height on
   the page 3 rows so the purple text and the arrow are not hugging the bottom
   edge, and the strip is the element that sets that height on every card. */
#theme-modern .modern-html-container [class*="-summary-hint"] {
  display: block;
  background-color: var(--juv-card-body) !important;
  border-top: 1px solid var(--juv-card-border);
  color: var(--juv-subhead) !important;
  font-style: normal;
  position: relative;
  margin: 12px -42px -12px -18px;
  padding: 14px 42px 14px 18px;
}

/* Labelled fields in the expanded body ("Instructor:", "Equipment
   requirement:") sit tight above their value. */
#theme-modern .modern-html-container [class*="-detail-label"] {
  color: var(--juv-text-muted) !important;
  margin: 0 0 2px !important;
  font-size: 0.92em;
}

/* The theme gives a hovered card "border: 2px solid var(--primary-color)",
   which is the dark #7030A0 and, because the card element is only the header
   half, outlines the title and price alone. Recoloured to the brand purple,
   held at 1px so nothing shifts, and extended across both halves. */
#theme-modern .fee-option-card:hover,
#theme-modern .fee-option-card:has(.callout-label:hover) {
  border-width: 1px !important;
  border-color: var(--juv-subhead) !important;
  border-bottom: 0 !important;
  color: var(--juv-text) !important;
}

#theme-modern .fee-option-card:hover + .modern-html-container,
#theme-modern .fee-option-card:has(.callout-label:hover) + .modern-html-container {
  border-color: var(--juv-subhead) !important;
}

/* Selected state. The theme puts a 2px border on all four sides of a ticked
   card, and because the card element is only the header half, that bottom edge
   draws a line straight across the middle of the card. Neutralised back to the
   ordinary card edge: selection is already signalled by the tick, so the card
   itself should not change colour. Purple is reserved for hover. */
#theme-modern .fee-option-card:has(input:checked) {
  border-width: 1px !important;
  border-color: var(--juv-card-border) !important;
  border-bottom: 0 !important;
  color: var(--juv-text) !important;
}

#theme-modern .fee-option-card:has(input:checked) + .modern-html-container {
  border-color: var(--juv-card-border) !important;
}

/* Hovering a selected card still shows the hover outline: this comes after the
   selected rules so it wins on the elements they share. */
#theme-modern .fee-option-card:has(input:checked):hover,
#theme-modern .fee-option-card:has(input:checked):has(.callout-label:hover) {
  border-color: var(--juv-subhead) !important;
}

#theme-modern .fee-option-card:has(input:checked):hover + .modern-html-container,
#theme-modern .fee-option-card:has(input:checked):has(.callout-label:hover) + .modern-html-container {
  border-color: var(--juv-subhead) !important;
}

/* Every pasted course description ships its own arrow — each per-item <style>
   block carries `.<prefix>-collapsible summary::after { content: "\25BC" }` in
   #512DA8, all eight of them. Until this build our own summary::after sat on
   top of it and that was what hid it. Now that the chevron has moved to the
   strip below, that cover is gone, so the item's arrow has to be suppressed
   explicitly or every course card shows two: ours in the purple strip and
   theirs, in a near-invisible dark purple, up in the heading.
   This is the case the file header warns about — the per-item styles cannot be
   edited from here, so they have to be out-specified at id weight. */
#theme-modern .modern-html-container summary::after {
  content: none !important;
}

/* The chevron hangs off the disclosure strip, not off the summary.
   Anchored to the summary it sat 14px up from the summary's bottom edge, which
   put it level with the last line of the date and instructor block — visually
   part of the heading, and a row above the purple "(click to view training
   details)" band that actually does the expanding. Juvare asked for it to sit
   in the part that opens and closes. Anchoring it to the strip and centring it
   on that strip's own height puts it there and keeps it there: the strip can
   grow or the prompt can wrap and the arrow stays centred against it.
   The 42px of padding-right on the strip is the gutter it lives in, so no
   prompt text can ever reach it. */
#theme-modern .modern-html-container [class*="-summary-hint"]::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  margin-top: -3px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--juv-subhead);
  transition: transform 0.15s ease;
}

#theme-modern .modern-html-container details[open] [class*="-summary-hint"]::after {
  transform: rotate(180deg);
}

#theme-modern .modern-html-container summary:hover [class*="-summary-hint"] {
  text-decoration: underline;
}

/* --- expanded body ------------------------------------------------------- */

/* No rule above the expanded body: the divider that separates the heading from
   the disclosure strip already does that job, and a second one directly under
   "Training Session Details" boxes the strip in when it is open. */
#theme-modern .modern-html-container [class*="-content"] {
  background-color: var(--juv-card-body) !important;
  border-top: 0 !important;
  padding: 4px 18px 16px !important;
}

#theme-modern .modern-html-container [class*="-content"] h1,
#theme-modern .modern-html-container [class*="-content"] h2,
#theme-modern .modern-html-container [class*="-content"] h3,
#theme-modern .modern-html-container [class*="-content"] h4,
#theme-modern .modern-html-container [class*="-content"] h5,
#theme-modern .modern-html-container [class*="-content"] h6 {
  color: var(--juv-subhead) !important;
  font-size: 13px;
  margin: 14px 0 2px;
}

#theme-modern .modern-html-container a {
  color: var(--juv-subhead) !important;
}

/* ===========================================================================
 * 4. SESSION INTEREST LIST  (page 3 — "Shape the Stage for 2027!")
 * Undoes the 50%-width float and rebuilds each row as a full-width card:
 * title and checkbox on one line, description beneath.
 * ======================================================================== */

#theme-modern form.form-horizontal,
#theme-modern .dynamic-target.form-horizontal {
  display: block; /* no !important — let the theme win where it needs to */
}

#theme-modern .cstField,
#theme-modern .cstField > [class*="col-sm-"] {
  float: none;
  width: 100%;
  clear: both;
}

/* Each interest row: checkbox first, then the label, on one line */
#theme-modern .cstField:has(input[type="checkbox"]) {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background-color: var(--juv-card-head);
  border: 1px solid var(--juv-card-border);
  border-radius: var(--juv-radius);
  padding: 12px 18px;
  margin: 0 0 10px;
}

/* A row that carries a description is half of a card, exactly like a course
   card on page 1: heading tone on top, body tone beneath, welded into one
   bordered box. Amarilys asked for this list to "grab that same look", minus
   the expand and collapse — so it is the same construction, always open.
   The theme's .modern-spacing-* classes put 24px under every component, which
   is what separates the halves, so the margins need the weight to win. */
#theme-modern .cstField:has(input[type="checkbox"]):has(+ div.text-left),
#theme-modern .cstField:has(input[type="checkbox"]):has(+ div.modern-html-container) {
  border-bottom: 0;
  border-radius: var(--juv-radius) var(--juv-radius) 0 0;
  margin-bottom: 0 !important;
}

/* --- a session with a disclosure instead of an open description ----------
 * Amarilys asked for a template that gives the page 3 items the same expand
 * and collapse the course cards on page 1 have. It is a markup change, not a
 * CSS one: the description moves out of a Text component (div.text-left,
 * styled below) and into an HTML component (div.modern-html-container), which
 * is the same component type the course cards already use, carrying
 *
 *   <details>
 *     <summary><span class="sess-summary-hint">(click to read the session
 *       description)</span></summary>
 *     <div class="sess-content"><p>DESCRIPTION GOES HERE</p></div>
 *   </details>
 *
 * The template Amarilys works from is juvare27-session-dropdown-template.md,
 * alongside this file; keep the two in step if either changes.
 *
 * The -summary-hint and -content suffixes are what make this work with no
 * per-item CSS: section 3 matches those on [class*="..."] substrings, so the
 * strip, the chevron, the open and closed states and the body tone all come
 * from the rules the course cards already use. Only the weld is new, because
 * section 3 welds .fee-option-card to its description and there is no fee
 * card here — the .cstField row is the top half instead.
 *
 * Header tone, not body tone, for the same reason as the course cards: with
 * the disclosure closed there is nothing below the summary, and a body-toned
 * container would leave a darker strip along the bottom of every row. The
 * darker tone belongs to the hint strip and the expanded body only.
 * ---------------------------------------------------------------------- */

#theme-modern .cstField:has(input[type="checkbox"]) + div.modern-html-container {
  background-color: var(--juv-card-head) !important;
  border: 1px solid var(--juv-card-border);
  border-top: 0;
  border-radius: 0 0 var(--juv-radius) var(--juv-radius);
  margin: 0 0 14px !important;
  padding: 0;
  overflow: hidden;
}

/* A course card's summary reserves 12px under the title for its date, time and
   instructor rows, and a session summary carries the hint and nothing else. An
   earlier build closed that gap on :only-child, on the reasoning that the space
   was empty and the strip floated. Juvare looked at the result and asked for
   the opposite — more height on these rows, so the purple text and the arrow
   are not hugging the bottom — so the gap is deliberately left in place and the
   strip itself carries more padding (see the hint rule in section 3).
   Keeping this note because the empty-looking gap is intentional: closing it
   again is what produced the complaint. */

#theme-modern .cstField:has(input[type="checkbox"]) > [class*="col-sm-"] {
  display: flex;
  width: 100%;
  padding: 0;
}

/* The theme sizes .input-container to a narrow column (206px), which is what
   wraps the session titles onto four and five lines. Let it fill the card. */
#theme-modern .cstField:has(input[type="checkbox"]) .input-container {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
}

/* The theme gives this an explicit width:180px, and flex-basis:auto honours
   it — hence titles wrapping to four lines inside a full-width card. Zero the
   basis and clear the width so the title takes the room it has. */
#theme-modern .cstField:has(input[type="checkbox"]) .modern-input-label-container {
  flex: 1 1 0%;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  order: 2; /* title after the checkbox */
}

#theme-modern .cstField:has(input[type="checkbox"]) .theme-modern-label {
  width: auto !important;
  max-width: none !important;
  text-align: left;
  font-weight: 700;
  color: var(--juv-text) !important;
}

#theme-modern .cstField:has(input[type="checkbox"]) .checkbox {
  order: 1; /* checkbox to the left of the title */
  flex: 0 0 auto;
  margin: 0;
}

/* The session blurb that follows each interest row. EventsAir emits it as a
   sibling div.text-left, not as part of the field, so it is indented to line
   up under the title rather than under the checkbox. */
/* Matched on div.text-left, not bare .text-left: section headings carry the
   same class (h3.text-left), and a bare matcher paints them as descriptions —
   which is what was leaving "Who is your CSM or AE?" grey. */
#theme-modern .cstField:has(input[type="checkbox"]) + div.text-left {
  background-color: var(--juv-card-body);
  border: 1px solid var(--juv-card-border);
  border-top: 0;
  border-radius: 0 0 var(--juv-radius) var(--juv-radius);
  margin: 0 0 14px !important;
  padding: 12px 18px 14px 44px;
}

#theme-modern .cstField:has(input[type="checkbox"]) + div.text-left,
#theme-modern .cstField:has(input[type="checkbox"]) + div.text-left p,
#theme-modern .cstField:has(input[type="checkbox"]) + div.text-left span {
  color: var(--juv-text-muted) !important;
}

#theme-modern .cstField:has(input[type="checkbox"]) + div.text-left p:last-child {
  margin-bottom: 0;
}

/* --- two-column checkbox lists ------------------------------------------
 * Amarilys asked for the short checkbox lists to run two-up, which is what the
 * original stylesheet's float hack was reaching for before it misfired and
 * crushed every row to 367px.
 *
 * The discriminator is the content itself, not a hard-coded list: a row that
 * is followed by a description block (the session-interest list, 16 of them)
 * needs the full width, and a row with nothing after it (the "Which Juvare
 * Solutions do you use?" list, 10 of them) is a short label that pairs happily.
 * So a longer list added later sorts itself out. A description counts whether
 * it arrived as a Text component (div.text-left) or as an HTML component
 * (div.modern-html-container, the disclosure shape documented in section 4);
 * without the second one, converting a session to a dropdown would silently
 * move that row into this two-up layout while its description stayed full
 * width.
 *
 * inline-flex rather than float: floats are what broke the original, and they
 * need clearing rules that fall over the moment the item count is odd or the
 * labels wrap to different heights.
 * ---------------------------------------------------------------------- */

@media (min-width: 768px) {
  /* EventsAir shows and hides steps by setting display inline on the row, so
     this needs the weight to survive being switched back on.
     Width is calc(50% - 6px) with no horizontal margins: percentage margins
     resolve against the container and, added to the whitespace between inline
     items, push the pair past 100% so they stack again. The 6px absorbs that
     whitespace and doubles as the gutter.

     The two [style] guards are load-bearing, not belt-and-braces. Conditional
     logic ("show these only if Are you a current Juvare client = Yes") hides a
     field by writing display:none inline, and a stylesheet !important beats an
     inline style that carries no !important. Guarding only the step, as this
     rule first did, left the field itself unchecked: every one of the ten
     solutions showed regardless of the answer, which is the breakage Amarilys
     reported and why the builder looked correctly configured. The !important
     has to stay for the reason above, so the rule has to stop matching a
     hidden field instead. Both spellings are matched because the property
     value is echoed back as written and nothing guarantees the space. */
  #theme-modern .modern-page:not([style*="display: none"]):not([style*="display:none"])
    .cstField:has(input[type="checkbox"]):not(:has(+ div.text-left)):not(:has(+ div.modern-html-container)):not([style*="display: none"]):not([style*="display:none"]) {
    display: inline-flex !important;
    width: calc(50% - 6px);
    margin: 0 0 10px;
    vertical-align: top;
  }
}

/* ===========================================================================
 * 5. SUMMARY AND PAYMENT PAGES (steps 4 and 5)
 * These reuse none of the form component classes, so they need covering
 * separately. Left uncovered, the review page renders the attendee's own
 * answers at 1.06:1 — effectively invisible.
 * ======================================================================== */

#theme-modern .modern-field-label {
  color: var(--juv-text-muted) !important;
}

#theme-modern .modern-field-value {
  color: var(--juv-text) !important;
}

/* The brand's --primary-color (#7030A0) is a dark purple chosen for a light
   background. On the near-black panel it lands at 2.34:1 for headings and the
   outline "Edit" buttons, so interactive and heading purple both move to the
   brighter subhead value Juvare specified. */
#theme-modern h3,
#theme-modern .theme-btn-primary,
#theme-modern .btn-default.theme-btn-primary,
#theme-modern .btn-text,
#theme-modern a.btn {
  color: var(--juv-subhead) !important;
}

#theme-modern .theme-btn-primary,
#theme-modern .btn-default.theme-btn-primary,
#theme-modern a.btn {
  border-color: var(--juv-subhead) !important;
  background-color: transparent !important;
}

#theme-modern .theme-btn-primary:hover,
#theme-modern a.btn:hover {
  background-color: rgba(205, 66, 255, 0.12) !important;
}

/* Button icons. The two buttons that carry one — Back and "Return to summary"
   — draw it as a CSS mask on a pseudo-element, so the shape comes from
   -webkit-mask-image and the colour comes from background-color, NOT from
   color. That is why the icons ignored the colour rules above: "Return to
   summary" was painting its arrow white (the brightest thing on that toolbar,
   which is what Juvare flagged) and Back was painting its own at the brand's
   #7030A0, the dark purple that reads 2.34:1 on this panel.
   Both move to the subhead value, matching the label text beside them.
   Scoped to .icon-button, which only those two carry; Next, Summary, Submit
   and the Cancel buttons have no masked pseudo-element, so this reaches
   nothing else. */
#theme-modern .icon-button::before,
#theme-modern .icon-button::after {
  background-color: var(--juv-subhead) !important;
}

/* Section headings on the summary card. The bold wrapper has to inherit for
   the same reason as the heading rule in section 1: a heading someone bolded
   in the editor arrives as <span><b>JUVARE LAB</b></span>, and without this
   the broad <b> rule repaints it with the body colour. The heading rule
   further up only covers <b> inside h1-h6, and this one is inside a span.

   <font> is the answer to "I changed the colour of Juvare Lab but it won't
   bold". It already is bold: the markup is
     <span><b><font color="#893BB1">JUVARE LAB</font></b></span>
   and every element in that chain computes font-weight 700 — measured, the
   glyphs render at the 700 width, not the 400 one. What differs from its
   neighbours is only the colour. #893BB1 lands at 2.97:1 on the #101214
   panel, against 5.2:1 for the brand purple every other section heading uses,
   and at that contrast a bold weight simply stops registering. Nothing was
   stripping the weight, so adding font-weight here would have changed
   nothing; letting the heading take the brand colour is what makes the bold
   visible. It also brings the one heading that failed WCAG AA back in line. */
#theme-modern .modern-summary-heading,
#theme-modern .modern-summary-heading span,
#theme-modern .modern-summary-heading b,
#theme-modern .modern-summary-heading strong,
#theme-modern .modern-summary-heading font,
#theme-modern .modern-summary-heading span b,
#theme-modern .modern-summary-heading span strong {
  color: var(--juv-subhead) !important;
}

/* Two surfaces the theme still paints light: the payment total box and the
   terms-and-conditions switch row. Both carry text set for a light ground. */
#theme-modern .modern-payment-summary,
#theme-modern .emphasized-switch,
#theme-modern .input-container.callout {
  background-color: var(--juv-container-bg) !important;
  border-color: var(--juv-hairline) !important;
}

#theme-modern .modern-payment-summary *,
#theme-modern .emphasized-switch *:not(.slider):not(.arrow-icon) {
  color: var(--juv-text) !important;
}

#theme-modern .summary-amount-value,
#theme-modern .modern-payment-summary .modern-field-value {
  color: var(--juv-price) !important;
}

/* Radio and checkbox option rows elsewhere on the site (consent choices, the
   Yes/No answers on page 2) are painted white by the theme, which leaves their
   labels light-on-white.
   Course cards are excluded: they carry .modern-option as well, and this would
   repaint their header with the darker body tone, producing an inset dark bar
   inside a lighter card.

   These take the FIELD tone, not the container tone. An earlier build gave them
   --juv-container-bg, which is the same value as the panel behind them, so a
   Yes/No row read as an outline drawn on the page while the dropdown directly
   under it sat on a visibly lighter surface. Juvare asked why two controls in
   the same answer block had different backgrounds, and that was why. Everything
   an attendee can operate is now one surface: text inputs, dropdowns and option
   rows all sit on --juv-field-bg inside a --juv-field-border edge. */
#theme-modern .modern-option:not(.fee-option-card),
#theme-modern label.callout:not(.fee-option-card) {
  background-color: var(--juv-field-bg) !important;
  color: var(--juv-text) !important;
  border-color: var(--juv-field-border) !important;
}

/* The wrapper EventsAir puts around a set of radio options washes it with
   color-mix(var(--primary-color) 10%), which on this brand is #7030A0 and
   renders as a purple tint behind the rows — a third background in a block that
   should have one. It comes from the platform bundle, not the theme sheet or
   this file, so it has to be cleared rather than configured away. The grouping
   is already carried by the rows sitting together; it does not need a fill. */
#theme-modern .radio-group {
  background-color: transparent !important;
}

#theme-modern .callout-label:not(.fee-option-card) {
  color: var(--juv-text) !important;
}

#theme-modern .fee-option-card .callout-label,
#theme-modern .fee-option-card .fee-option,
#theme-modern .fee-option-card .fee-option-header {
  background-color: transparent !important;
}

#theme-modern .label-text {
  color: var(--juv-text) !important;
}

#theme-modern .ss-placeholder {
  color: var(--juv-text-muted) !important;
}

/* ===========================================================================
 * 6. CHROME
 * ======================================================================== */

#theme-modern .modern-footer-navigation,
#theme-modern .footer-navigation {
  background-color: var(--juv-container-bg);
  border-top: 1px solid var(--juv-hairline);
}

#theme-modern hr {
  border-color: var(--juv-hairline);
}

/* Validation messages stay legible on the dark surface */
#theme-modern .has-error .control-label,
#theme-modern .text-danger {
  color: #FF6B6B !important;
}

/* The validation summary banner is painted white by the theme, and the broad
   text rules in section 1 then render its messages in the light body colour —
   light grey on white, which is the least readable thing on the page and
   appears exactly when someone has made a mistake. Themed to match the cards.
   The amber icon block is left alone: it is a status indicator, and amber on
   this ground still reads. */
#theme-modern .alert {
  background-color: var(--juv-card-head) !important;
  border: 1px solid var(--juv-card-border) !important;
  color: var(--juv-text) !important;
}

#theme-modern .alert .alert-messages,
#theme-modern .alert ul,
#theme-modern .alert li,
#theme-modern .alert p,
#theme-modern .alert span,
#theme-modern .alert div:not(.alert-icon) {
  color: var(--juv-text) !important;
}

#theme-modern .alert .close,
#theme-modern .alert .close svg,
#theme-modern .alert .close path {
  color: var(--juv-text-muted) !important;
  fill: currentColor;
  opacity: 1;
}

/* ===========================================================================
 * 6. NARROW SCREENS
 * ======================================================================== */

@media (max-width: 767px) {
  #theme-modern .fee-option-header {
    flex-wrap: wrap;
  }

  #theme-modern .fee-option-additional {
    margin-left: 34px;
    text-align: left;
  }

  #theme-modern .cstField:has(input[type="checkbox"]) + .modern-html-container {
    padding-left: 16px;
  }
}

/* ===========================================================================
 * 7. radio controls 
 * ======================================================================== */
#theme-modern .radio-group.function-group {
  background-color: var(--juv-card-head) !important;
  color: var(--juv-text) !important;
  border: 1px solid var(--juv-card-border);
  border-bottom: 0;
  border-radius: var(--juv-radius) var(--juv-radius) 0 0;
  margin-bottom: 0 !important;
  padding: 12px 18px;
}


#theme-modern .row.no-theme:not(:has(.modern-html-container)) {
  border-bottom: 1px solid var(--juv-card-border);
  border-radius: var(--juv-radius);
  margin-bottom: 14px;
}

#theme-modern .row.no-theme.modern-html-container {
  background-color: var(--juv-card-head) !important;
  color: var(--juv-text) !important;
  border: 1px solid var(--juv-card-border);
  border-top: 0;
  border-radius: 0 0 var(--juv-radius) var(--juv-radius);
  margin: 0 0 14px !important;
  padding: 0;
  overflow: hidden;
}

#theme-modern .row.fee-option-card.fee-option.radio-marker {
  border: 0px;
  padding-left: 0px;
}

#theme-modern .row.fee-option-card.fee-option.radio-marker:has(input:checked) {
  border: 0px;
}

#theme-modern .row.fee-option-card.fee-option.radio-marker:hover {
  border: 0px !important;
}