/*
 Theme Name:   Spectrum Courses
 Theme URI:    https://spectrumcourses.co.uk/
 Description:  Child theme of Sky Pilot holding all Spectrum Courses customisations. Not a public theme — the folder is intentionally "spectrum-courses" to avoid clashing with the unrelated "Spectrum" theme on WordPress.org.
 Author:       Spectrum Courses
 Author URI:   https://spectrumcourses.co.uk/
 Template:     sky-pilot
 Version:      1.0.2
 Text Domain:  spectrum
*/

/* ==========================================================================
   Add your overrides below. This file is enqueued after Sky Pilot's own
   stylesheet (see functions.php), so anything here wins the cascade.
   ========================================================================== */

/**
 * Password Eye for register page
 * Runs unconditionally on every page, so moved here from a wp_footer print.
 * Depends on the Font Awesome stylesheet enqueued in functions.php and the
 * script in assets/js/global.js.
 */
.password-wrapper {
  position: relative;
  display: inline-block;
}

.password-input {
  padding-right: 1.5rem; /* Leave space for the icon */
}

.toggle-password {
  position: absolute;
  top: 50%;
  right: -30px; /* Adjust as needed */
  transform: translateY(-50%);
  font-size: 1.2rem; /* Adjust size as needed */
  cursor: pointer;
}

/* Swap quiz navigation buttons around */
.llms-quiz-ui .llms-quiz-nav {
  flex-direction: row-reverse;
}

/* Target the container to align items side by side */
.llms-quiz-buttons {
  display: flex;
  gap: 10px; /* Adjust this value to set the desired space between the buttons */
}
.llms-quiz-buttons #llms_start_quiz {
  margin-top: 0px;
}

/* Ensure buttons are styled correctly and responsive */
.llms-quiz-buttons .button,
.llms-quiz-buttons .llms-button-action {
  text-align: center;
}

/* "Next Lesson" link beside the Start button on a completed quiz. The rule above
   makes every direct child of .llms-quiz-buttons grow to fill the row, and the
   row stretches items to equal height with the label stuck at the top. Keep it
   button-sized and centre the label vertically. */
.llms-quiz-buttons {
  align-items: stretch;
}
/* The Start button sits inside a form; strip the form's and button's own
   spacing so it shares the same top edge and height as the link beside it. */
.llms-quiz-buttons form {
  display: flex;
  margin: 0;
}
.llms-quiz-buttons form button {
  margin: 0;
}
/* Size Start and Next Lesson identically so neither looks bigger than the other. */
.llms-quiz-buttons {
  align-items: flex-start;
}
.llms-quiz-buttons form button,
.llms-quiz-buttons .llms-next-lesson {
  box-sizing: border-box;
  margin: 0;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--wp--preset--font-size--18);
  line-height: 1.2;
  padding: calc(var(--wp--preset--spacing--10) / 2) var(--wp--preset--spacing--10);
  min-height: 0;
  height: auto;
  width: auto;
}

/* Make the quiz counter appear on its own line */
.llms-quiz-counter {
  display: inherit;
  text-align: center;
  margin-bottom: 10px; /* Space between counter and buttons */
}

/* Ensure buttons stack on smaller screens */
@media (max-width: 600px) {
  .llms-quiz-nav button {
    width: 100%;
    margin-bottom: 5px; /* Optional spacing between buttons */
  }
}

/* Hide has quiz button */
.llms-lesson-has-quiz {
  display: none;
}

/* Hide coupon field */
.llms-coupon-wrapper {
  display: none;
}

/* Hide more button on groups page */
.llms-group-menu-item.item--right.item--member-more {
  display: none;
}

/* Change group name font size */
.llms-group-profile-header .llms-group-name {
  font-size: 25px;
  margin-top: -130px;
}

/* keep completed modules as black text and not grey - For accessibility */
.llms-syllabus-wrapper .llms-lesson-preview.is-complete a {
  color: #000000;
}

/* Stack picture quiz answers on small screens */
@media (max-width: 480px) {
  fieldset.llms-question-choices.type--picture {
    display: block !important;
  }

  fieldset.llms-question-choices.type--picture .llms-choice.type--picture {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 15px 0 !important;
    clear: both !important;
  }

  fieldset.llms-question-choices.type--picture .llms-choice.type--picture label {
    display: block !important;
    width: 100% !important;
  }

  fieldset.llms-question-choices.type--picture .llms-choice-image {
    width: 100% !important;
  }

  fieldset.llms-question-choices.type--picture .llms-choice-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
}

.llms-question-wrapper .llms-question-choices .llms-choice label {
  padding: var(--wp--preset--spacing--10);
}

/* Keep a gap between the A/B/C marker and the answer text (mobile especially) */
.llms-question-wrapper .llms-question-choices .llms-choice label {
  column-gap: var(--wp--preset--spacing--20, 16px);
}

.llms-question-wrapper .llms-question-choices .llms-choice .llms-marker {
  margin-right: 0;
  min-width: 2.5em;
  flex-shrink: 0;
}

.llms-question-wrapper .llms-question-choices .llms-choice .llms-choice-text {
  padding-left: 0.5em;
  min-width: 0;
}

/* Grey out the Driving Licence Number field when checkbox is ticked */
.llms-form-field:has(#checkbox-19-117--option_1:checked) + .llms-form-field:has(#text-19-20) {
  opacity: 0.45;
}

.llms-form-field.licence-disabled {
  opacity: 0.45;
}

.llms-form-field.licence-disabled input {
  cursor: not-allowed;
}

/* Keep the Add member button permanently visible */
.llms-group-button.ghost .llms-group-text {
  opacity: 1 !important;
}
#llms-group-invite-members.llms-group-button.ghost {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  opacity: 100 !important;
  background: var(--wp--preset--color--primary) !important;
  color: #fff !important;
  border-color: var(--wp--preset--color--primary) !important;
  visibility: visible !important;
}

.spectrum-course-catalogue-description {
  margin: 6px 0 12px;
  font-size: 20px;
  line-height: 1.4;
  color: #555;
  padding-bottom: 12px;
  white-space: pre-line;
  font-weight: 500;
}

/*
 * Footer nav-column links (patterns/footer.php uses wp:list, not wp:navigation).
 * Sky Pilot's theme.json only strips the default underline for core/navigation
 * links - core/list has no override, so it falls through to the global default
 * (underlined, primary colour). This reproduces core/navigation's link state
 * for the footer's static columns so they match.
 */
footer.wp-block-template-part .wp-block-list a {
  color: var(--wp--preset--color--contrast); /* best guess - see note below */
  text-decoration: none;
}
footer.wp-block-template-part .wp-block-list a:hover,
footer.wp-block-template-part .wp-block-list a:focus {
  text-decoration: underline;
}
/* NOTE: the near-black colour above is a guess (Sky Pilot's "contrast" palette
 * colour, #090909). The live site's dark footer-link colour isn't explained by
 * anything in Sky Pilot's theme.json - core/navigation only removes the
 * underline there, not the colour - so it's most likely a Global Styles
 * customisation stored only in the database. Confirm the real value via
 * DevTools on the live site (inspect a footer link -> Computed -> color) and
 * swap it in here if it's not an exact match. */

/*
 * Force the footer to true full viewport width on every page, regardless of
 * where it sits in the DOM. On live, the homepage's footer happens to render
 * full-width because it's nested inside <main> (an accident of an old Site
 * Editor edit, frozen into that page's saved template row) - everywhere else
 * on the site (courses, archives, single lessons, etc.) it's a normal sibling
 * of <main>, which the default WordPress alignfull CSS doesn't reliably
 * stretch the same way depending on ancestor layout context. Rather than
 * fork every Sky Pilot template to replicate that one-off nesting, this
 * makes the footer full-width unconditionally so it looks identical on
 * every page without depending on DOM position.
 */
footer.wp-block-template-part > .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/*
 * Quiz results review: question title styling.
 * Older LifterLMS output the title as <h3 class="llms-question-title"> inside
 * <a class="toggle-answer">, so it picked up the theme's heading style
 * (Montserrat, bold, 1.3 line-height). Newer LifterLMS (10.x) outputs a <div>
 * inside a <button>, which Sky Pilot 2.5.0 / LifterLMS reset with
 * `font: inherit`, leaving it in the body font at normal weight. Set the
 * heading look explicitly so it is identical whichever markup is in use.
 */
.llms-quiz-attempt-results .llms-quiz-attempt-question-header .llms-question-title {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 700;
  line-height: 1.3;
}

/*
 * Home page hero buttons ("Operators, Drivers & PAs" / "Local Authorities") are set
 * to 35% wide each, which is too narrow on phones and makes WordPress break words
 * mid-word. On small screens let them size to their content and wrap on spaces only.
 */
@media (max-width: 781px) {
  .wp-block-buttons > .wp-block-button[style*="35%"],
  .wp-block-buttons > .wp-block-button:has(.wp-block-button__link[href*="/courses/"]),
  .wp-block-buttons > .wp-block-button:has(.wp-block-button__link[href*="/contact-us/"]) {
    width: auto !important;
    flex: 1 1 40%;
    min-width: min-content;
  }
  .wp-block-buttons .wp-block-button__link {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
}