/* ============================================================ 
   LAR (Request for Funding for Legal Advice) Webform Wizard 
   Machine name: lar_new 
   - Left column: page content 
   - Right column: video sidebar (video_sidebar_*) 
   - Actions (Back/Next/Submit) stays on left 
   ============================================================ */ 
 
/* Review page: hide empty/no/none conditional summary blocks */ 
[class*="review-show-0"], 
[class$="review-show-"], 
[class*="review-show- "], 
[class*="review-show-No"], 
[class*="review-show-Non"], 
[class*="nolabel"] { 
  display: none !important; 
} 
 
span.review-token-special { 
  display: inline; 
} 
span.review-token-special:not(:has(a)) { 
  display: none; 
} 
 
.webform-type-radios .form-type-radio .checkmark { 
  top: 0; 
} 
 
.webform-type-radios .form-type-radio:first-child .checkmark { 
  top: unset !important; 
} 
 
/* Less space above radio buttons and the text above */ 
fieldset.webform-composite-hidden-title { 
  margin-top: 0px; 
} 
 
#edit-page-landing ul { 
  padding-left: 0; 
} 
 
/* Tighten general spacing coming from bootstrap/webform wrappers */ 
.webform-submission-lar-new-form .form-wrapper { 
  margin-bottom: 0 !important; 
} 
 
/* Make every wizard page wrapper a 2-column grid */ 
.webform-submission-lar-new-form [id^="edit-page-"] { 
  display: grid !important; 
  grid-template-columns: minmax(0, 1fr) 350px !important; 
  column-gap: 30px !important; 
  align-items: start !important; 
  grid-auto-rows: min-content !important; 
  margin: 0 !important; 
  padding: 0 !important; 
} 
 
/* Put ALL normal page children in the LEFT column by default */ 
.webform-submission-lar-new-form [id^="edit-page-"] > * { 
  grid-column: 1 !important; 
} 
 
/* Move ANY video sidebar to the RIGHT column, pinned to the top */ 
.webform-submission-lar-new-form [id^="edit-page-"] > [id^="edit-video-sidebar-"] { 
  grid-column: 2 !important; 
  grid-row: 1 / span 99 !important; 
  width: 350px !important; 
  margin: 0 !important; 
  padding: 0 !important; 
} 
 
/* Override inline margin on .video-sidebar-wrapper */ 
.webform-submission-lar-new-form [id^="edit-video-sidebar-"] .video-sidebar-wrapper { 
  margin: 0 !important; 
  padding: 20px !important; 
} 
 
/* Keep action buttons on LEFT */ 
.webform-submission-lar-new-form #edit-actions, 
.webform-submission-lar-new-form .form-actions { 
  grid-column: 1 !important; 
  margin-top: 12px !important; 
  padding: 0 !important; 
  text-align: left !important; 
  justify-self: start !important; 
} 
 
/* Spacing between buttons */ 
.webform-submission-lar-new-form #edit-actions button, 
.webform-submission-lar-new-form .form-actions button { 
  float: none !important; 
  margin-right: 10px !important; 
  margin-left: 0 !important; 
} 
 
/* ============================================================ 
   DEAD-END / mutually exclusive pages 
   page_reasons_public_servant and page_reasons_general are 
   shown via #states on current_status and both already use 
   '#next_button_label': 'Next question', so no button-hiding 
   CSS is needed here (unlike the Reprisal form's dead-end 
   pages, which have no further question and use an empty 
   '#next_button_label' in the YAML instead of CSS). 
   ============================================================ */ 
 
/* Optional: tighten headings */ 
.webform-submission-lar-new-form [id^="edit-page-"] h2, 
.webform-submission-lar-new-form [id^="edit-page-"] h3 { 
  margin-top: 0 !important; 
  margin-bottom: 10px !important; 
} 
 
/* Optional: tighten paragraphs and lists */ 
.webform-submission-lar-new-form [id^="edit-page-"] p { 
  margin: 0 0 8px 0 !important; 
} 
.webform-submission-lar-new-form [id^="edit-page-"] ul { 
  margin: 0 0 10px 0 !important; 
  padding-left: 18px !important; 
} 
 
/* Character counter remaining text, used throughout for the 1200/22000-character textareas */ 
.webform-submission-lar-new-form .webform-counter-message { 
  font-size: 0.85em; 
  color: #555; 
  margin-top: 4px !important; 
} 
 
/* Mobile: stack video under content */ 
@media (max-width: 968px) { 
  .webform-submission-lar-new-form [id^="edit-page-"] { 
    display: block !important; 
  } 
  .webform-submission-lar-new-form [id^="edit-page-"] > [id^="edit-video-sidebar-"] { 
    width: 100% !important; 
    margin-top: 16px !important; 
  } 
} 
 
/* ============================================================ 
   Progress tracker 
   Drupal webform core renders a numbered step tracker 
   (e.g. "2 of 19") above the two-column layout when the 
   wizard's progress bar setting is enabled. Pages are marked 
   is-visible-progress-step by the webform module based on 
   #states visibility, so conditional pages (reasons_public_ 
   servant / reasons_general) don't both count toward the total. 
   ============================================================ */ 
.webform-submission-lar-new-form { 
  .webform-progress-tracker .progress-step { 
    display: none; 
  } 
 
  .webform-progress-tracker .progress-step.is-visible-progress-step { 
    display: block; 
  } 
  .progress-tracker .step-double-digit { 
     right: 42%; 
  } 
} 
 
/* Progress bar style */ 
.webform-progress-tracker.progress-tracker { 
  display: flex; 
  gap: 0px; 
  margin: 2rem 0; 
  padding: 0; 
  list-style: none; 
} 
 
/* Each wizard page becomes one rectangle segment */ 
.webform-progress-tracker .progress-step { 
  flex: 1 1 0; 
  height: 26px; 
  background: #f1f1f1; 
  margin: 0; 
  padding: 0; 
  position: relative; 
} 
 
/* Hide the numbered circles */ 
.webform-progress-tracker .progress-marker { 
  display: none !important; 
} 
 
/* Hide the text labels */ 
.webform-progress-tracker .progress-text { 
  display: none !important; 
} 
 
/* Completed steps */ 
.webform-progress-tracker .progress-step.is-complete { 
  background: #40586b; 
} 
 
/* Current active step */ 
.webform-progress-tracker .progress-step.is-active { 
  background: #40586b; 
} 
 
/* Optional: make inactive separators cleaner */ 
.webform-progress-tracker .progress-step::after, 
.webform-progress-tracker .progress-step::before { 
  display: none !important; 
} 
 
.webform-progress-tracker.progress-tracker { 
  display: flex; 
  gap: 0px; 
  margin: 2rem 0; 
  padding: 0; 
  list-style: none; 
} 
 
.webform-progress-tracker .progress-step { 
  flex: 1 1 0; 
  height: 24px; 
  background: #ececec; 
  border-radius: 0; 
  transition: background-color .2s ease-in-out; 
} 
 
.webform-progress-tracker .progress-marker, 
.webform-progress-tracker .progress-text { 
  display: none !important; 
} 
 
.webform-progress-tracker .progress-step.is-complete, 
.webform-progress-tracker .progress-step.is-active { 
  background: #435569; /* or your brand colour */ 
} 
 
.webform-progress-tracker .progress-step:focus-within { 
  outline: 2px solid #086d5c; 
  outline-offset: 2px; 
} 
 
.left-video-wide-wrapper { 
    display: flex; 
    gap: 30px; 
    align-items: center; 
    margin: 30px 0; 
    padding: 20px; 
    background: #f9f9f9; 
    border-radius: 5px; 
} 
 
.video-container { 
    flex: 0 0 60%; 
    position: relative; 
    padding-bottom: 33.75%; /* 60% width × 16:9 */ 
    height: 0; 
    overflow: hidden; 
    background: #000; 
} 
 
.video-container iframe { 
    position: absolute; 
    inset: 0; 
    width: 100%; 
    height: 100%; 
    border: 0; 
} 
 
.video-text { 
    flex: 1; 
} 
 
.video-text p:last-child { 
    margin-bottom: 0; 
} 
 
.webform-type-managed-file .checkmark { 
  display: none !important; 
} 
 
/* Stack on mobile */ 
@media (max-width: 767px) { 
  .webform-progress-tracker.progress-tracker { 
    gap: 1px; 
  } 
 
  .webform-progress-tracker .progress-step { 
    height: 18px; 
  } 
  .left-video-wide-wrapper { 
    flex-direction: column; 
    align-items: stretch; 
  } 
 
  .video-container { 
    flex: none; 
    width: 100%; 
    padding-bottom: 56.25%; 
  } 
}

.webform-submission-lar-new-form .form-item-reprisal-against-me-file-number > label,
.webform-submission-lar-new-form .form-item-witness-reprisal-file-number > label,
.webform-submission-lar-new-form .form-item-made-reprisal-file-number > label {
  display: block !important;
  position: static !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.4 !important;
  margin: 0 0 10px 0 !important;
}

.webform-submission-lar-new-form .form-item-reprisal-against-me-file-number > input.form-control,
.webform-submission-lar-new-form .form-item-witness-reprisal-file-number  > input.form-control,
.webform-submission-lar-new-form .form-item-made-reprisal-file-number > input.form-control {
  display: block !important;
  position: static !important;
  margin: 0 !important;
}