/*
 * Champion Hub / LearnDash front-end tweaks
 * Enqueued site-wide by infinite-child functions.php (cclm-learndash-hub).
 * Most rules are scoped to LearnDash block classes (LMS output only); the
 * Champion Hub-only sections at the foot are scoped to body.page-id-1253.
 */

/*---------- Registration & login forms ----------*/

/* LearnDash caps these forms at max-width:650px, which leaves them indented
   from the block heading. Let them fill their column instead. */
.ld-registration__form,
.learndash-wrapper .ld-registration__form,
.ld-registration__wrapper .ld-registration__form {
    max-width: 100% !important;
}

/* Hide the registration block's logged-in state entirely — a logged-in user
   should never see a register form or the "You're Already Logged In" heading. */
.ld-registration__wrapper--logged-in {
    display: none !important;
}

/*---------- Accessible field text colour ----------*/
/*
 * LearnDash colours typed input text with --ld-color-field-text, which resolves
 * to #8c8ca2 — too light to pass WCAG contrast on white. Re-point the variable
 * to a dark neutral (and belt-and-braces on the inputs themselves).
 */
.learndash-wrapper {
    --ld-color-field-text: #333333;
}
.ld-registration__register-form .ld-form__field,
.ld-registration__login-form .ld-form__field,
.ld-form .ld-form__field {
    color: #333333 !important;
}

/*---------- Registration form: two-column field layout ----------*/
/*
 * Lay the registration fields out 50/50. Email, Password, the password-strength
 * hint and the submit button span the full width; First/Last name pair two per
 * row. Scoped to the *--register* view state so it ONLY applies while the
 * register form is the active view — otherwise the !important display would
 * override LearnDash's own rule that hides the register form in the login view
 * (which is why register fields used to stay visible after clicking "Log In").
 * Integrity's reCAPTCHA is v3 (invisible), so there is no widget to place.
 * Collapses to a single column on small screens.
 */
.ld-registration__wrapper--register #learndash_registerform.ld-registration__register-form {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    column-gap: 18px;
    row-gap: 12px;
    align-items: start;
}
/* Each field's outer + inner wrapper carries its own bottom margin; zero it and
   let the grid row-gap do the spacing, so fields sit tight and even. */
#learndash_registerform > .ld-form__field-outer-wrapper {
    margin-bottom: 0 !important;
}
#learndash_registerform .ld-form__field-wrapper {
    margin-bottom: 0 !important;
}
#learndash_registerform label {
    margin-bottom: 4px !important;
}
/* Full-width rows: email, password, the strength hint and the submit button. */
#learndash_registerform > .learndash-registration-field-email,
#learndash_registerform > .learndash-registration-field-password,
#learndash_registerform > .ld-password-strength__hint,
#learndash_registerform > .ld-registration__register-submit-wrapper {
    grid-column: 1 / -1 !important;
}
/* The strength hint is a grid item; keep it from inheriting the big field
   margin so it tucks neatly under the password field. */
#learndash_registerform > .ld-password-strength__hint {
    margin: 2px 0 0 !important;
}
/* Username is auto-generated from the email address (see learndash-hub.js),
   so the field itself is removed from the form. */
#learndash_registerform > .learndash-registration-field-username {
    display: none !important;
}
@media only screen and (max-width: 600px) {
    .ld-registration__wrapper--register #learndash_registerform.ld-registration__register-form {
        grid-template-columns: 1fr !important;
    }
}

/*---------- Inline validation messages ----------*/
/*
 * LearnDash pulls "This field is required" up with margin-top:calc(var(--ld-spacer-1)*-1)
 * so it tucks into the field-wrapper's bottom margin. We zeroed those margins for
 * the compact layout, so that negative margin makes the message overlap the input.
 * Give it a small positive top margin so it sits just below the field instead.
 */
.ld-registration__register-form .ld-form__field-error-message,
.ld-registration__login-form .ld-form__field-error-message {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}

/*---------- Login form: compact spacing ----------*/
/*
 * The login form is the standard WP markup (<p class="login-username"> etc.),
 * whose default paragraph margins leave big gaps. Tighten them to match the
 * compact register layout.
 */
.ld-registration__login-form label {
    margin-bottom: 4px !important;
}
.ld-registration__login-form .login-username,
.ld-registration__login-form .login-password,
.ld-registration__login-form .login-remember,
.ld-registration__login-form .ld-registration__login_options_wrapper {
    margin: 0 0 12px !important;
}
.ld-registration__login-form .login-submit {
    padding-top: 6px !important;
    margin: 0 !important;
}

/*---------- Registration / login headings + intro text ----------*/

/* "Register" and "Log In" headings — down from the theme's large h2 to 20px,
   with tighter margins so the form starts closer to the heading. */
.learndash-wrapper .ld-registration__heading {
    font-size: 20px !important;
    margin: 0 0 6px !important;
}
.learndash-wrapper .ld-registration__p {
    margin: 0 0 14px !important;
}

/*---------- Register / Log In toggle links: ghost / outlined pill buttons ----------*/
/*
 * The "Already have an account? Log In" and "Are you a new user? Register"
 * links switch views, so make them read as buttons — but ghost style (outlined
 * brand-purple, transparent fill) so they pop without overpowering the main
 * submit button. They fill solid on hover/focus. The border + colour use
 * !important because LearnDash/theme rules otherwise force a grey border.
 */
.ld-registration__login-link,
.ld-registration__register-link {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 15px;
    background: transparent;
    color: var(--cclm-purple, #814B99) !important;
    font-weight: 600;
    text-decoration: none !important;
    border: 2px solid var(--cclm-purple, #814B99) !important;
    border-radius: 30px;
    transition: background .2s ease, color .2s ease;
}
.ld-registration__login-link:hover,
.ld-registration__login-link:focus,
.ld-registration__register-link:hover,
.ld-registration__register-link:focus {
    background: var(--cclm-purple, #814B99);
    color: #ffffff !important;
    border-color: var(--cclm-purple, #814B99) !important;
    text-decoration: none !important;
}

/*---------- Profile: hide the avatar (picture only) ----------*/
/*
 * Hide just the profile picture — visitors can't change it from the front end.
 * The name heading and (if ever re-enabled) the edit link stay in place.
 */
.learndash-wrapper .ld-profile-summary .ld-profile-avatar {
    display: none !important;
}

/*---------- Buttons: 30px pill to match the rest of the site ----------*/
.learndash-wrapper .ld-button,
.learndash-wrapper .ld-login-button,
.ld-registration__register-form input[type="submit"],
.ld-registration__login-form input[type="submit"] {
    border-radius: 30px !important;
}

/*---------- Login-state visibility utilities ----------*/
/*
 * WordPress adds the `logged-in` class to <body> for authenticated users.
 * Add one of these as a block's "Additional CSS class(es)" (Block → Advanced)
 * to show/hide a whole section by login state:
 *   cclm-when-logged-out  → only logged-OUT visitors see it (e.g. login/register row)
 *   cclm-when-logged-in   → only logged-IN users see it (e.g. courses / profile)
 */
body.logged-in .cclm-when-logged-out { display: none !important; }
body:not(.logged-in) .cclm-when-logged-in { display: none !important; }

/*========================================================================
  Champion Hub — "External Programmes" accordions (core/accordion block)
  --------------------------------------------------------------------------
  Scoped to the Champion Hub page (body.page-id-1253) so accordion blocks
  elsewhere on the site are left untouched. WordPress core Accordion markup:

    .wp-block-accordion-item                       one item (gets .is-open when open)
      .wp-block-accordion-heading                  the <h3> wrapping the toggle
        .wp-block-accordion-heading__toggle        the clickable <button>
          .wp-block-accordion-heading__toggle-title  heading text
          .wp-block-accordion-heading__toggle-icon   the +/- glyph
      .wp-block-accordion-panel                    the drop-down content region

  Design: every item is a rounded box with a 2px #58585A border that is ALWAYS
  present (no layout shift between states). The header button is filled #58585A
  with white text, so a closed item reads as one solid grey bar (border + fill
  the same colour). Open the item and the white/transparent panel reveals the
  grey border framing the drop-down. White on #58585A is ~7:1 contrast — passes
  WCAG AA and AAA — and the keyboard focus ring stays clearly visible.
=========================================================================*/

/* The bordered, rounded "card". overflow:hidden clips the grey header's top
   corners (and the panel's bottom corners) to the radius. */
.page-id-1253 .wp-block-accordion-item {
    border: 2px solid #58585A;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}
.page-id-1253 .wp-block-accordion-item:last-child {
    margin-bottom: 0;
}

/* Kill the default <h3> heading margins so the grey bar fills the box edge to edge. */
.page-id-1253 .wp-block-accordion-heading {
    margin: 0;
}

/* The always-visible header bar: grey fill, white text and comfortable padding
   so the label isn't glued to the sides. Flex lays the title left / icon right. */
.page-id-1253 .wp-block-accordion-heading__toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 22px;
    background: #58585A !important;
    color: #ffffff !important;
    border: 0;
    cursor: pointer;
    transition: background .2s ease;
}
.page-id-1253 .wp-block-accordion-heading__toggle-title {
    color: #ffffff !important;
    text-align: left;
}
.page-id-1253 .wp-block-accordion-heading__toggle-icon {
    color: #ffffff !important;
    flex: 0 0 auto;
}

/* Hover / pointer affordance — lift the grey slightly. White text stays
   ~5.3:1 against #6A6A6D, still WCAG AA. */
.page-id-1253 .wp-block-accordion-heading__toggle:hover {
    background: #6A6A6D !important;
}

/* Visible keyboard focus ring. Inset (negative offset) so the item's
   overflow:hidden can't clip it; white-on-grey gives a clear 3px indicator. */
.page-id-1253 .wp-block-accordion-heading__toggle:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: -4px;
}

/* The drop-down content. Left transparent ("as is now") so it shows the page
   background; the grey card border + radius frame it. Padding (gated to the
   open state so it never adds height while collapsed) keeps the text off the
   edges and clear of the grey header. */
.page-id-1253 .wp-block-accordion-item.is-open .wp-block-accordion-panel {
    padding: 16px 22px 18px;
}
/* Trim the first/last child margins so the panel padding reads evenly. */
.page-id-1253 .wp-block-accordion-item.is-open .wp-block-accordion-panel > :first-child {
    margin-top: 0;
}
.page-id-1253 .wp-block-accordion-item.is-open .wp-block-accordion-panel > :last-child {
    margin-bottom: 0;
}

/*========================================================================
  Champion Hub — "Need an account?" note under the login form
  --------------------------------------------------------------------------
  Why this exists: the rule at the top of this file widens
  .ld-registration__form to fill its column, but LearnDash caps the three
  wrappers INSIDE it (.ld-registration__login, .ld-registration__login-form
  and .ld-registration__register) at max-width:650px with auto side margins.
  So the login heading and fields still sit in a 650px box centred in the
  column, while the "Need an account?" paragraph is a sibling of the whole
  LearnDash block and spanned the full column width. Its left edge therefore
  started outside the form's, which is the misalignment.

  Fix: give the paragraph the same 650px centred box, so its left and right
  edges line up with the login form above it. The text stays left aligned,
  which keeps the sentence readable when it wraps; centring the text instead
  would align neither edge.

  If LearnDash ever changes that 650px cap, this value has to change with it.
=========================================================================*/
.page-id-1253 .cclm-request-account {
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}


/*========================================================================
  Champion Hub — course grid cards, one image shape
  --------------------------------------------------------------------------
  functions.php now serves these images at the theme's 'Portfolio Thumbnail'
  700x450 hard crop instead of the 300x300 uncropped 'medium', which is the
  real fix. These rules are the safety net for the two cases that crop cannot
  cover:

    - a course whose featured image is smaller than 700x450. WordPress has no
      crop to serve, so it falls back to the full file at its own shape.
    - a course with no featured image at all. LearnDash draws its own
      placeholder (course-grid/assets/img/thumbnail.jpg) from a plain <img>.

  aspect-ratio fixes the box at 700:450 and object-fit: cover fills it from
  the middle of the image, so the cards line up whatever lands in them. Note
  that cover crops: a tall image loses its top and bottom, so a course image
  should carry its subject near the centre.

  Card heights can still vary a little below the image, because the title and
  description under it are free to run to any length. The images no longer
  contribute to that.
=========================================================================*/
.ld_course_grid article.course > a img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 700 / 450;
    object-fit: cover;
}


/*========================================================================
  LearnDash course grid (grid-1 card) — title weight + image shape
  --------------------------------------------------------------------------
  These rules cover the NEW course grid, the one built by the
  [learndash_course_grid] shortcode (skin "grid", card "grid-1"), which is
  what the Champion Hub section on the homepage uses. The Champion Hub page
  itself still uses the legacy v1 grid handled further up this file.

  Weight: the card's own stylesheet
  (sfwd-lms/includes/course-grid/templates/cards/grid-1/style.css) sets
  font-weight: bold on the title, which is heavier than anything else on the
  site — the theme runs headings and body copy at Montserrat 500 (Theme
  Options > Typography). Both selectors are needed because the plugin declares
  the weight twice, on .entry-title and again on .entry-title a, and the link
  rule is the one that wins for the title text while title_clickable is on.
  !important because the plugin enqueues this card CSS at render time, which
  on a Goodlayers page is after this file in the page source, so an override
  of equal specificity would lose on order.
=========================================================================*/
.learndash-course-grid .items-wrapper .grid-1 .content .entry-title,
.learndash-course-grid .items-wrapper .grid-1 .content .entry-title a {
    font-weight: 500 !important;
}

/*
 * Image shape, same belt-and-braces as the legacy cards above. The homepage
 * shortcode now asks for the theme's 'Portfolio Thumbnail' 700x450 hard crop,
 * so normally every card is delivered at one shape. The card CSS serves the
 * image at width:100%; height:auto, so the two cases the crop cannot cover
 * would still come out ragged:
 *
 *   - a course whose featured image is smaller than 700x450. There is no crop
 *     to serve, so WordPress falls back to the full file at its own shape.
 *   - a course with no featured image, where LearnDash draws its own
 *     placeholder (course-grid/assets/img/thumbnail.jpg).
 *
 * Pin the box at 700:450 and fill it from the centre. Note cover crops: a tall
 * image loses its top and bottom, so keep the subject near the middle.
 */
.learndash-course-grid .items-wrapper .grid-1 .thumbnail img {
    aspect-ratio: 700 / 450;
    object-fit: cover;
}


/*========================================================================
  Champion Hub — course card titles
  --------------------------------------------------------------------------
  The "Your Courses" grid is the legacy v1 card, whose title is a plain
  <h3 class="entry-title">, so it takes the theme's global h3 size of 25px
  (Theme Options > Typography > h3-font-size). Bring it down to 20px.

  Scoped to the Champion Hub so any legacy course grid elsewhere keeps the
  theme size. The External Programmes accordion headings on this page are also
  <h3> and are deliberately NOT covered by this rule — they take the theme
  size through .wp-block-accordion-heading.
=========================================================================*/
body.page-id-1253 .ld-course-list-items .ld_course_grid .caption h3.entry-title {
    font-size: 20px !important;
}


/*========================================================================
  Champion Hub - equal height course cards
  --------------------------------------------------------------------------
  The "Your Courses" grid is the legacy v1 card, which has no Equal Grid
  Height setting (that exists only on the newer [learndash_course_grid] used
  on the homepage). The row is already flex, so every column in a row is the
  same height, but the bordered card inside (article.thumbnail.course) is
  inline-block and only as tall as its own content. A longer excerpt made one
  card taller than its neighbour.

  Make the column and card flex columns so the card fills the column, let the
  caption take the spare height, and push the button (and the progress bar
  after it) to the bottom so they line up across a row.
=========================================================================*/
body.page-id-1253 .ld-course-list-items .ld_course_grid {
    display: flex;
}

body.page-id-1253 .ld-course-list-items .ld_course_grid .thumbnail.course {
    display: flex;
    flex-direction: column;
    width: 100%;
}

body.page-id-1253 .ld-course-list-items .ld_course_grid .caption {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

body.page-id-1253 .ld-course-list-items .ld_course_grid .ld_course_grid_button {
    margin-top: auto;
}

/*========================================================================
  Course list colours: text contrast (WCAG 1.4.3), added 23/09/2026
  --------------------------------------------------------------------------
  LearnDash's legacy v1 course list skin prints white text on its own
  Bootstrap colours, all below the 4.5:1 minimum for 14px text:
    "Free" ribbon      #5cb85c  2.48:1
    "Enrolled" ribbon  #428bca  3.63:1
    "Enroll Now"       #428bca  3.63:1
  The skin has no colour settings, so they are set here. The ribbon takes the
  site link purple, the button takes the site's pink button colour (4.51:1)
  and the enrolled ribbon a darker blue (6.25:1). The small :before folds are
  darkened to match. The homepage [learndash_course_grid] ribbon is coloured
  by its own shortcode attributes instead, see the Champion Hub text box.
=========================================================================*/
body .ld-course-list-items .ld_course_grid .thumbnail.course .ribbon {
    background: #5e2a73;
}

body .ld-course-list-items .ld_course_grid .thumbnail.course .ribbon:before {
    border-top-color: #3b1a48;
    border-right-color: #3b1a48;
}

body .ld-course-list-items .ld_course_grid .thumbnail.course .ribbon.enrolled {
    background: #2a6496;
}

body .ld-course-list-items .ld_course_grid .thumbnail.course .ribbon.enrolled:before {
    border-top-color: #1d466a;
    border-right-color: #1d466a;
}

body .ld-course-list-items .ld_course_grid .btn-primary {
    background-color: #e60f6d;
    border-color: #e60f6d;
}